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 type { Ref } from '@vue/reactivity'
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(() => {
  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>