app/components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

<!--
  Contenu de la boite de dialogue "Assistant de création"

  @see https://vuetifyjs.com/en/components/steppers/
-->
<template>
  <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">
        <!-- 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 { ref, computed } from 'vue'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import { useAbility } from '@casl/vue'

const props = defineProps({
  /**
   * The path that the user followed throughout the wizard
   */
  path: {
    type: Array<string>,
    required: true,
  },
})

const step = ref(1)

const location: ComputedRef<string> = computed(() => {
  return props.path.at(-1) ?? 'home'
})

const ability = useAbility()
const organizationProfile = useOrganizationProfileStore()
const isLaw1901 = computed(() => organizationProfile.isAssociation)
const hasOnlineRegistrationModule: Ref<boolean> = ref(
  organizationProfile.hasModule('IEL'),
)

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 = 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)
  }
}

/**
 * Called when the event parameters page is updated
 * @param event
 */
const onEventParamsUpdated = (event: { start: string; end: string }) => {
  emit('urlUpdate', {
    start: event.start,
    end: event.end,
  })
}

onUnmounted(() => {
  // Reset the step when the component is unmounted
  step.value = 1
})
</script>