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

<!--

-->

<template>
  <v-stepper v-model="step">
    <v-stepper-items>
      <v-stepper-content step="1">
        <div class="row">
          <!-- TODO: peut-être faire un builder comme pour les menus? -->
          <LayoutHeaderUniversalCreationTypeCard
            v-if="can('manage', 'users')"
            title="a_person"
            text-content="add_new_person_student"
            icon="fa fa-user"
            type="access"
            @typeClick="onTypeClick"
          />

          <LayoutHeaderUniversalCreationTypeCard
            v-if="can('display', 'agenda_page')
                  && (can('display', 'course_page')
                  || can('display', 'exam_page')
                  || can('display', 'pedagogics_project_page'))"
            title="an_event"
            text-content="add_an_event_course"
            icon="fa fa-calendar-alt"
            type="event"
            @typeClick="onTypeClick"
          />

          <LayoutHeaderUniversalCreationTypeCard
            v-else-if="can('display', 'agenda_page') && can('manage', 'events')"
            title="other_event"
            text-content="other_event_text_creation_card"
            icon="far fa-calendar"
            :link="adminLegacy + '/calendar/create/events'"
          />

          <LayoutHeaderUniversalCreationTypeCard
            v-if="can('display', 'message_send_page')
                  && (can('manage', 'emails')
                  || can('manage', 'mails')
                  || can('manage', 'texto'))"
            title="a_correspondence"
            text-content="sen_email_letter"
            icon="fa fa-comment"
            type="message"
            @typeClick="onTypeClick"
          />

          <LayoutHeaderUniversalCreationTypeCard
            v-if="can('manage', 'equipments')"
            title="a_materiel"
            text-content="add_any_type_material"
            icon="fa fa-cube"
            :link="adminLegacy + '/list/create/equipment'"
          />
        </div>
      </v-stepper-content>

      <v-stepper-content step="2">
        <div class="row">
          <div v-if="type === 'access'" class="row">
            <LayoutHeaderUniversalCreationTypeCard
                v-if="isLaw1901"
                title="an_adherent"
                text-content="adherent_text_creation_card"
                icon="fa fa-user"
                :link="adminLegacy + '/universal_creation_person/adherent'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="isLaw1901"
                title="a_ca_member"
                text-content="ca_member_text_creation_card"
                icon="fa fa-users"
                :link="adminLegacy + '/universal_creation_person/ca_member'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="a_student"
                text-content="student_text_creation_card"
                icon="fa fa-user"
                :link="adminLegacy + '/universal_creation_person/student'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="a_guardian"
                text-content="guardian_text_creation_card"
                icon="fa fa-female"
                :link="adminLegacy + '/universal_creation_person/guardian'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="a_teacher"
                text-content="teacher_text_creation_card"
                icon="fa fa-graduation-cap"
                :link="adminLegacy + '/universal_creation_person/teacher'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="a_member_of_staff"
                text-content="personnel_text_creation_card"
                icon="fa fa-suitcase"
                :link="adminLegacy + '/universal_creation_person/personnel'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="a_legal_entity"
                text-content="moral_text_creation_card"
                icon="fa fa-building"
                :link="adminLegacy + '/universal_creation_person/company'" />

            <LayoutHeaderUniversalCreationTypeCard
                title="another_type_of_contact"
                text-content="other_contact_text_creation_card"
                icon="fa fa-plus"
                :link="adminLegacy + '/universal_creation_person/other_contact'" />
          </div>

          <div v-if="type === 'event'" class="row">
            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('display', 'course_page')"
                title="course"
                text-content="course_text_creation_card"
                icon="fa fa-users"
                :link="adminLegacy + '/calendar/create/courses'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('display', 'exam_page')"
                title="exam"
                text-content="exam_text_creation_card"
                icon="fa fa-graduation-cap"
                :link="adminLegacy + '/calendar/create/examens'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('display', 'pedagogics_project_page')"
                title="educational_services"
                text-content="educational_services_text_creation_card"
                icon="fa fa-suitcase"
                :link="adminLegacy + '/calendar/create/educational_projects'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('manage', 'events')"
                title="other_event"
                text-content="other_event_text_creation_card"
                icon="far fa-calendar"
                :link="adminLegacy + '/calendar/create/events'" />
          </div>

          <div v-if="type === 'message'" class="row">
            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('manage', 'emails')"
                title="an_email"
                text-content="email_text_creation_card"
                icon="far fa-envelope"
                :link="adminLegacy + '/list/create/emails'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('manage', 'mails')"
                title="a_letter"
                text-content="letter_text_creation_card"
                icon="far fa-file-alt"
                :link="adminLegacy + '/list/create/mails'" />

            <LayoutHeaderUniversalCreationTypeCard
                v-if="can('manage', 'texto')"
                title="an_sms"
                text-content="sms_text_creation_card"
                icon="fa fa-mobile-alt"
                :link="adminLegacy + '/list/create/sms'" />
          </div>
        </div>

      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

<script setup lang="ts">
  import {Ref, ref} from "@vue/reactivity";
  import {useOrganizationProfileStore} from "~/stores/organizationProfile";
  import {useAbility} from "@casl/vue";

  const props = defineProps({
    step: {
      type: Number,
      required: true
    }
  })

  const emit = defineEmits(['updateStep'])

  const { can } = useAbility()

  const onTypeClick = (step: Number, Cardtype: String) => {
    type.value = Cardtype;
    emit('updateStep', { stepChoice: step, typeChoice: Cardtype });
  }

  const type: Ref<String> = ref('');
  const organizationProfile = useOrganizationProfileStore()

  const runtimeConfig = useRuntimeConfig()
  const adminLegacy: Ref<string> = ref(runtimeConfig.baseURL_adminLegacy)
  const isLaw1901: Ref<boolean> = ref(organizationProfile.isAssociation())
</script>

<style lang="scss" scoped>
  .creation-type-container{
    border: none!important;
    .icon{
      i{
        font-size: 50px;
        color: var(--v-theme-ot-grey, #777777);
      }
    }
    .infos-container{
      padding: 15px 0;
      h4{
        font-size: 15px;
        color: var(--v-theme-ot-green, #00AD8E);
        font-weight: bold;
        margin-bottom: 6px;
      }
      p{
        font-size: 13px;
        padding: 0;
        margin: 0;
        color: #767676;
      }
    }
    &>div{
      &:hover{
        cursor: pointer;
        background: var(--v-theme-ot-light_green, #a9e0d6);
      }
    }
  }
</style>