Vuetify - Supprimer les composants Maison

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -3,357 +3,338 @@
 -->
 
 <template>
-  <!-- Menu Accueil -->
-  <v-container v-if="location === 'home'">
-    <v-row>
-      <!-- Une personne -->
-      <v-col cols="6" v-if="ability.can('manage', 'users')">
-        <LayoutHeaderUniversalCreationCard
-          to="access"
-          title="a_person"
-          text-content="add_new_person_student"
-          icon="fa fa-user"
-          @click="onCardClick"
+  <v-stepper v-model="step">
+    <v-stepper-items>
+      <v-stepper-content step="1">
+        <!-- Menu Accueil -->
+        <v-container v-if="location === 'home'">
+          <v-row>
+            <!-- Une personne -->
+            <v-col cols="6" v-if="ability.can('manage', 'users')">
+              <LayoutHeaderUniversalCreationCard
+                @click="onCardClick('access')"
+                title="a_person"
+                text-content="add_new_person_student"
+                icon="fa fa-user"
+              />
+            </v-col>
+            <v-col
+              cols="6"
+              v-if="
+                ability.can('display', 'agenda_page') &&
+                (ability.can('display', 'course_page') ||
+                  ability.can('display', 'exam_page') ||
+                  ability.can('display', 'pedagogics_project_page'))
+              "
+            >
+              <!-- Un évènement -->
+              <LayoutHeaderUniversalCreationCard
+                @click="onCardClick('event')"
+                title="an_event"
+                text-content="add_an_event_course"
+                icon="fa fa-calendar"
+              />
+            </v-col>
+
+            <!-- Autre évènement -->
+            <v-col
+              cols="6"
+              v-else-if="
+                ability.can('display', 'agenda_page') &&
+                ability.can('manage', 'events')
+              "
+            >
+              <LayoutHeaderUniversalCreationCard
+                to="event-params"
+                title="other_event"
+                text-content="other_event_text_creation_card"
+                icon="far fa-calendar"
+                href="/calendar/create/events"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Une correspondance -->
+            <v-col
+              cols="6"
+              v-if="
+                ability.can('display', 'message_send_page') &&
+                (ability.can('manage', 'emails') ||
+                  ability.can('manage', 'mails') ||
+                  ability.can('manage', 'texto'))
+              "
+            >
+              <LayoutHeaderUniversalCreationCard
+                @click="onCardClick('message')"
+                title="a_correspondence"
+                text-content="send_email_letter"
+                icon="fa fa-envelope"
+              />
+            </v-col>
+
+            <!-- Un matériel (direct link) -->
+            <v-col cols="6" v-if="ability.can('manage', 'equipments')">
+              <LayoutHeaderUniversalCreationCard
+                title="a_materiel"
+                text-content="add_any_type_material"
+                icon="fa fa-laptop"
+                href="/list/create/equipment"
+                @click="onCardClick"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-stepper-content>
+
+      <v-stepper-content step="2">
+        <!-- Menu creer une personne -->
+        <v-container v-if="location === 'access'">
+          <v-row>
+            <!-- Un adhérent -->
+            <v-col cols="6" v-if="isLaw1901">
+              <LayoutHeaderUniversalCreationCard
+                title="an_adherent"
+                text-content="adherent_text_creation_card"
+                icon="fa fa-user"
+                href="/universal_creation_person/adherent"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un membre du CA -->
+            <v-col cols="6" v-if="isLaw1901">
+              <LayoutHeaderUniversalCreationCard
+                title="a_ca_member"
+                text-content="ca_member_text_creation_card"
+                icon="fa fa-users"
+                href="/universal_creation_person/ca_member"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un élève -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="a_student"
+                text-content="student_text_creation_card"
+                icon="fa fa-user"
+                href="/universal_creation_person/student"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un tuteur -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="a_guardian"
+                text-content="guardian_text_creation_card"
+                icon="fa fa-female"
+                href="/universal_creation_person/guardian"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un professeur -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="a_teacher"
+                text-content="teacher_text_creation_card"
+                icon="fa fa-graduation-cap"
+                href="/universal_creation_person/teacher"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un membre du personnel -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="a_member_of_staff"
+                text-content="personnel_text_creation_card"
+                icon="fa fa-suitcase"
+                href="/universal_creation_person/personnel"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Une entité légale -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="a_legal_entity"
+                text-content="moral_text_creation_card"
+                icon="fa fa-building"
+                href="/universal_creation_person/company"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Une inscription en ligne -->
+            <v-col cols="6" v-if="hasOnlineRegistrationModule">
+              <LayoutHeaderUniversalCreationCard
+                title="online_registration"
+                text-content="online_registration_text_creation_card"
+                icon="fa fa-list-alt"
+                href="/online/registration/new_registration"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un autre type de contact -->
+            <v-col cols="6">
+              <LayoutHeaderUniversalCreationCard
+                title="another_type_of_contact"
+                text-content="other_contact_text_creation_card"
+                icon="fa fa-plus"
+                href="/universal_creation_person/other_contact"
+                @click="onCardClick"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <!-- Menu créer un evenement-->
+        <v-container v-if="location === 'event'">
+          <v-row>
+            <!-- Un cours -->
+            <v-col cols="6" v-if="ability.can('display', 'course_page')">
+              <LayoutHeaderUniversalCreationCard
+                title="course"
+                text-content="course_text_creation_card"
+                icon="fa fa-book"
+                href="/universal_creation_event/course"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un examen -->
+            <v-col cols="6" v-if="ability.can('display', 'exam_page')">
+              <LayoutHeaderUniversalCreationCard
+                title="exam"
+                text-content="exam_text_creation_card"
+                icon="fa fa-clipboard"
+                href="/universal_creation_event/exam"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un projet pédagogique -->
+            <v-col
+              cols="6"
+              v-if="ability.can('display', 'pedagogics_project_page')"
+            >
+              <LayoutHeaderUniversalCreationCard
+                title="educational_services"
+                text-content="educational_services_text_creation_card"
+                icon="fa fa-graduation-cap"
+                href="/universal_creation_event/pedagogical_project"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un autre évènement -->
+            <v-col cols="6" v-if="ability.can('manage', 'events')">
+              <LayoutHeaderUniversalCreationCard
+                to="event-params"
+                href="/calendar/create/events"
+                title="other_event"
+                text-content="other_event_text_creation_card"
+                icon="far fa-calendar"
+                @click="onCardClick"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <!-- Menu créer une correspondance -->
+        <v-container v-if="location === 'message'">
+          <v-row>
+            <!-- Un email -->
+            <v-col cols="6" v-if="ability.can('manage', 'emails')">
+              <LayoutHeaderUniversalCreationCard
+                title="an_email"
+                text-content="email_text_creation_card"
+                icon="far fa-envelope"
+                href="/list/create/emails"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un courrier -->
+            <v-col cols="6" v-if="ability.can('manage', 'mails')">
+              <LayoutHeaderUniversalCreationCard
+                title="a_letter"
+                text-content="letter_text_creation_card"
+                icon="far fa-file-alt"
+                href="/list/create/mails"
+                @click="onCardClick"
+              />
+            </v-col>
+
+            <!-- Un SMS -->
+            <v-col cols="6" v-if="ability.can('manage', 'texto')">
+              <LayoutHeaderUniversalCreationCard
+                title="a_sms"
+                text-content="sms_text_creation_card"
+                icon="fa fa-mobile-alt"
+                href="/list/create/sms"
+                @click="onCardClick"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-stepper-content>
+
+      <v-stepper-content step="3">
+        <!-- Event parameters page -->
+        <LayoutHeaderUniversalCreationEventParams
+          v-if="location === 'event-params'"
+          @params-updated="onEventParamsUpdated"
         />
-      </v-col>
-
-      <!-- Un évènement -->
-      <v-col
-        cols="6"
-        v-if="
-          ability.can('display', 'agenda_page') &&
-          (ability.can('display', 'course_page') ||
-            ability.can('display', 'exam_page') ||
-            ability.can('display', 'pedagogics_project_page'))
-        "
-      >
-        <LayoutHeaderUniversalCreationCard
-          to="event"
-          title="an_event"
-          text-content="add_an_event_course"
-          icon="fa fa-calendar-alt"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Autre évènement -->
-      <v-col
-        cols="6"
-        v-else-if="
-          ability.can('display', 'agenda_page') &&
-          ability.can('manage', 'events')
-        "
-      >
-        <LayoutHeaderUniversalCreationCard
-          to="event-params"
-          title="other_event"
-          text-content="other_event_text_creation_card"
-          icon="far fa-calendar"
-          href="/calendar/create/events"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Une correspondance -->
-      <v-col
-        cols="6"
-        v-if="
-          ability.can('display', 'message_send_page') &&
-          (ability.can('manage', 'emails') ||
-            ability.can('manage', 'mails') ||
-            ability.can('manage', 'texto'))
-        "
-      >
-        <LayoutHeaderUniversalCreationCard
-          to="message"
-          title="a_correspondence"
-          text-content="send_email_letter"
-          icon="fa fa-comment"
-          type="message"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un matériel (direct link) -->
-      <v-col cols="6" v-if="ability.can('manage', 'equipments')">
-        <LayoutHeaderUniversalCreationCard
-          title="a_materiel"
-          text-content="add_any_type_material"
-          icon="fa fa-cube"
-          href="/list/create/equipment"
-          @click="onCardClick"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-
-  <!-- Menu "Créer une personne" -->
-  <v-container v-if="location === 'access'">
-    <v-row>
-      <!-- Un adhérent -->
-      <v-col cols="6" v-if="isLaw1901">
-        <LayoutHeaderUniversalCreationCard
-          title="an_adherent"
-          text-content="adherent_text_creation_card"
-          icon="fa fa-user"
-          href="/universal_creation_person/adherent"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un membre du CA -->
-      <v-col cols="6" v-if="isLaw1901">
-        <LayoutHeaderUniversalCreationCard
-          title="a_ca_member"
-          text-content="ca_member_text_creation_card"
-          icon="fa fa-users"
-          href="/universal_creation_person/ca_member"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un élève -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="a_student"
-          text-content="student_text_creation_card"
-          icon="fa fa-user"
-          href="/universal_creation_person/student"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un tuteur -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="a_guardian"
-          text-content="guardian_text_creation_card"
-          icon="fa fa-female"
-          href="/universal_creation_person/guardian"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un professeur -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="a_teacher"
-          text-content="teacher_text_creation_card"
-          icon="fa fa-graduation-cap"
-          href="/universal_creation_person/teacher"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un membre du personnel -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="a_member_of_staff"
-          text-content="personnel_text_creation_card"
-          icon="fa fa-suitcase"
-          href="/universal_creation_person/personnel"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Une entité légale -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="a_legal_entity"
-          text-content="moral_text_creation_card"
-          icon="fa fa-building"
-          href="/universal_creation_person/company"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Une inscription en ligne -->
-      <v-col cols="6" v-if="hasOnlineRegistrationModule">
-        <LayoutHeaderUniversalCreationCard
-          title="online_registration"
-          text-content="online_registration_text_creation_card"
-          icon="fa fa-list-alt"
-          href="/online/registration/new_registration"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un autre type de contact -->
-      <v-col cols="6">
-        <LayoutHeaderUniversalCreationCard
-          title="another_type_of_contact"
-          text-content="other_contact_text_creation_card"
-          icon="fa fa-plus"
-          href="/universal_creation_person/other_contact"
-          @click="onCardClick"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-
-  <!-- Menu Évènement -->
-  <v-container v-if="location === 'event'">
-    <v-row>
-      <!-- Un cours -->
-      <v-col cols="6" v-if="ability.can('display', 'course_page')">
-        <LayoutHeaderUniversalCreationCard
-          to="event-params"
-          href="/calendar/create/courses"
-          title="course"
-          text-content="course_text_creation_card"
-          icon="fa fa-users"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un examen -->
-      <v-col cols="6" v-if="ability.can('display', 'exam_page')">
-        <LayoutHeaderUniversalCreationCard
-          to="event-params"
-          href="/calendar/create/examens"
-          title="exam"
-          text-content="exam_text_creation_card"
-          icon="fa fa-graduation-cap"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un projet pédagogique -->
-      <v-col cols="6" v-if="ability.can('display', 'pedagogics_project_page')">
-        <LayoutHeaderUniversalCreationCard
-          to="event-params"
-          href="/calendar/create/educational_projects"
-          title="educational_services"
-          text-content="educational_services_text_creation_card"
-          icon="fa fa-suitcase"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un autre évènement -->
-      <v-col cols="6" v-if="ability.can('manage', 'events')">
-        <LayoutHeaderUniversalCreationCard
-          to="event-params"
-          href="/calendar/create/events"
-          title="other_event"
-          text-content="other_event_text_creation_card"
-          icon="far fa-calendar"
-          @click="onCardClick"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-
-  <!-- Une correspondance -->
-  <v-container v-if="location === 'message'">
-    <v-row>
-      <!-- Un email -->
-      <v-col cols="6" v-if="ability.can('manage', 'emails')">
-        <LayoutHeaderUniversalCreationCard
-          title="an_email"
-          text-content="email_text_creation_card"
-          icon="far fa-envelope"
-          href="/list/create/emails"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un courrier -->
-      <v-col cols="6" v-if="ability.can('manage', 'mails')">
-        <LayoutHeaderUniversalCreationCard
-          title="a_letter"
-          text-content="letter_text_creation_card"
-          icon="far fa-file-alt"
-          href="/list/create/mails"
-          @click="onCardClick"
-        />
-      </v-col>
-
-      <!-- Un SMS -->
-      <v-col cols="6" v-if="ability.can('manage', 'texto')">
-        <LayoutHeaderUniversalCreationCard
-          title="a_sms"
-          text-content="sms_text_creation_card"
-          icon="fa fa-mobile-alt"
-          href="/list/create/sms"
-          @click="onCardClick"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-
-  <!-- Page de pré-paramétrage des évènements -->
-  <LayoutHeaderUniversalCreationEventParams
-    v-if="location === 'event-params'"
-    @params-updated="onEventParamsUpdated"
-  />
+      </v-stepper-content>
+    </v-stepper-items>
+  </v-stepper>
 </template>
-
 <script setup lang="ts">
-import type { Ref } from '@vue/reactivity'
+import { ref, computed } from 'vue'
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
 import { useAbility } from '@casl/vue'
-import type { ComputedRef } from 'vue'
-import UrlUtils from '~/services/utils/urlUtils'
 
 const props = defineProps({
-  /**
-   * The path that the user followed troughout the wizard
-   */
   path: {
     type: Array<string>,
     required: true,
   },
 })
 
-const location: ComputedRef<string> = computed(() => {
+const step = ref(1)
+const location = computed(() => {
   return props.path.at(-1) ?? 'home'
 })
 
 const ability = useAbility()
-
 const organizationProfile = useOrganizationProfileStore()
-const isLaw1901: ComputedRef<boolean> = organizationProfile.isAssociation
+const isLaw1901 = computed(() => organizationProfile.isAssociation)
 const hasOnlineRegistrationModule: Ref<boolean> = ref(
   organizationProfile.hasModule('IEL'),
 )
 
-const baseUrl: Ref<string | null> = ref(null)
-const query: Ref<Record<string, string>> = ref({})
-
-const url: ComputedRef<string | null> = computed(() => {
-  if (baseUrl.value === null) {
-    return null
-  }
-  return UrlUtils.addQuery(baseUrl.value, query.value)
-})
-
 const emit = defineEmits(['cardClick', 'urlUpdate'])
 
-/**
- * Called when a card is clicked
- * @param to  Target location in the wizard
- * @param href  Target absolute url
- */
-const onCardClick = (to: string | null, href: string | null) => {
-  if (href !== null) {
-    baseUrl.value = href
+const onCardClick = (to: string | null, href: string | null = null) => {
+  if (href) {
+    // If a href is provided, redirect to it directly
+    window.location.href = href
+  } else if (to) {
+    // If only 'to' is provided, navigate to the next step
+    step.value++
+    emit('cardClick', to)
   }
-  emit('cardClick', to, url.value)
 }
 
-/**
- * Called when the event parameters page is updated
- * @param event
- */
 const onEventParamsUpdated = (event: { start: string; end: string }) => {
-  query.value = event
+  // Handle event parameters update
 }
 
-const unwatch = watch(url, (newUrl: string | null) => {
-  emit('urlUpdate', newUrl)
-})
 onUnmounted(() => {
-  unwatch()
+  // Clean up if necessary
 })
 </script>

components/Ui/DatePicker.vue

@@ -1,79 +1,65 @@
-<!--
-Sélecteur de dates
-
-@see https://vue3datepicker.com/
--->
-
 <template>
-  <main>
-    <VueDatePicker
-      :model-value="modelValue"
-      :locale="i18n.locale.value"
-      :format-locale="fnsLocale"
-      :format="dateFormat"
-      :enable-time-picker="withTime"
-      :teleport="true"
-      text-input
-      :auto-apply="true"
-      :select-text="$t('select')"
-      :cancel-text="$t('cancel')"
-      :disabled="readonly"
-      :position="position"
-      @update:model-value="onUpdate"
-    />
-  </main>
+  <v-layout row wrap>
+    <v-menu
+      ref="menu"
+      v-model="menu"
+      :close-on-content-click="false"
+      :nudge-right="40"
+      :return-value.sync="modelValue"
+      lazy
+      transition="scale-transition"
+      offset-y
+      full-width
+      min-width="290px"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-text-field
+          v-model="displayDate"
+          :label="label"
+          readonly
+          v-on="on"
+          @blur="menu = false"
+        ></v-text-field>
+      </template>
+      <v-date-picker
+        color="primary"
+        :model-value="modelValue"
+        :locale="i18n.locale.value"
+        @update:model-value="updateDate"
+        no-title
+        scrollable
+        @change="menu = false"
+        
+      >
+      </v-date-picker>
+    </v-menu>
+  </v-layout>
 </template>
 
 <script setup lang="ts">
-import DateUtils, { supportedLocales } from '~/services/utils/dateUtils'
-import type { PropType } from '@vue/runtime-core'
-
-const i18n = useI18n()
-
-const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
-  modelValue: {
-    type: Object as PropType<Date>,
-    required: false,
-    default: null,
-  },
-  readonly: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  format: {
-    type: String,
-    required: false,
-    default: null,
-  },
-  withTime: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  /**
-   * @see https://vue3datepicker.com/props/positioning/#position
-   */
-  position: {
-    type: String as PropType<'left' | 'center' | 'right'>,
-    required: false,
-    default: 'center',
-  },
+  modelValue: Date,
+  label: String,
 })
 
-const defaultFormatPattern = props.withTime
-  ? DateUtils.getFormatPattern(i18n.locale.value as supportedLocales)
-  : DateUtils.getShortFormatPattern(i18n.locale.value as supportedLocales)
+const emit = defineEmits(['update:modelValue'])
 
-const dateFormat: Ref<string> = ref(props.format ?? defaultFormatPattern)
+const i18n = useI18n()
+const menu = ref(false)
 
-const emit = defineEmits(['update:model-value'])
+const displayDate = computed({
+  get: () =>
+    props.modelValue
+      ? props.modelValue.toLocaleDateString(i18n.locale.value)
+      : '',
+  set: (val) => {},
+})
 
-const onUpdate = (event: Date) => {
-  emit('update:model-value', event)
+function updateDate(value) {
+  emit('update:modelValue', value)
+  menu.value = false
 }
 </script>
-
-<style scoped></style>