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

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

<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-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"
  />
</template>

<script setup lang="ts">
  import {Ref, ref} from "@vue/reactivity";
  import {useOrganizationProfileStore} from "~/stores/organizationProfile";
  import {useAbility} from "@casl/vue";
  import {ComputedRef} from "vue";
  import {useAdminUrl} from "~/composables/utils/useAdminUrl";
  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(() => {
    return props.path.at(-1) ?? 'home'
  })

  const ability = useAbility()

  const organizationProfile = useOrganizationProfileStore()
  const isLaw1901: ComputedRef<boolean> = 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
    }
    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
  }

  const unwatch = watch(url, (newUrl: string | null) => {
    emit('urlUpdate', newUrl)
  })
  onUnmounted(() => {
    unwatch()
  })
</script>