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

<!--

-->

<template>
  <v-stepper v-model="step"
  >
    <v-stepper-items>
      <v-stepper-content step="1">
        <div class="row">
          <LayoutHeaderUniversalCreationTypeCard
            v-if="$can('manage', 'users')"
            title="a_person"
            text-content="add_new_person_student"
            icon="fa fa-user"
            type="access"
            @typeClick="onTypeClick"
          >
          </LayoutHeaderUniversalCreationTypeCard>
          <LayoutHeaderUniversalCreationTypeCard
            v-if="$can('display', 'agenda_page')
                && ($ability.can('manage', 'courses')
            || $ability.can('manage', 'examens')
            || $ability.can('manage', 'educationalprojects')
            || $ability.can('manage', 'events'))"
            title="an_event"
            text-content="add_an_event_course"
            icon="fa fa-comment"
            type="event"
            @typeClick="onTypeClick"
          >
          </LayoutHeaderUniversalCreationTypeCard>
          <LayoutHeaderUniversalCreationTypeCard
            v-if="$can('display', 'message_send_page')
            && ($ability.can('manage', 'emails')
            || $ability.can('manage', 'mails')
            || $ability.can('manage', 'texto'))"
            title="a_correspondence"
            text-content="sen_email_letter"
            icon="fa fa-comment"
            type="message"
            @typeClick="onTypeClick"
          >
          </LayoutHeaderUniversalCreationTypeCard>
          <LayoutHeaderUniversalCreationTypeCard
            v-if="$can('manage', 'equipments')"
            title="a_materiel"
            text-content="add_any_type_material"
            icon="fa fa-cube"
            :link="adminLegacy+ '/list/create/equipment'"
          >
          </LayoutHeaderUniversalCreationTypeCard>
        </div>
      </v-stepper-content>

      <v-stepper-content step="2">
        <div class="row">
          <div v-if="type === 'access'" class="row">
            <LayoutHeaderUniversalCreationTypeCard title="a_student" text-content="student_text_creation_card" icon="fa fa-user" :link="adminLegacy+ '/universal_creation_person/student'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="a_guardian" text-content="guardian_text_creation_card" icon="fa fa-female" :link="adminLegacy+ '/universal_creation_person/guardian'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="a_teacher" text-content="teacher_text_creation_card" icon="fa fa-graduation-cap" :link="adminLegacy+ '/universal_creation_person/teacher'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="a_member_of_staff" text-content="personnel_text_creation_card" icon="fa fa-suitcase" :link="adminLegacy+ '/universal_creation_person/personnel'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="a_legal_entity" text-content="moral_text_creation_card" icon="fa fa-building" :link="adminLegacy+ '/universal_creation_person/company'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="another_type_of_contact" text-content="other_contact_text_creation_card" icon="fa fa-plus" :link="adminLegacy+ '/universal_creation_person/other_contact'"></LayoutHeaderUniversalCreationTypeCard>
          </div>
          <div v-if="type === 'event'" class="row">
            <LayoutHeaderUniversalCreationTypeCard v-if="$can('manage', 'courses')" title="course" text-content="course_text_creation_card" icon="fa fa-users" :link="adminLegacy+ '/calendar/create/courses'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard v-if="$can('manage', 'examens')" title="exam" text-content="exam_text_creation_card" icon="fa fa-graduation-cap" :link="adminLegacy+ '/calendar/create/examens'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard v-if="$can('manage', 'educationalprojects')" title="educational_services" text-content="educational_services_text_creation_card" icon="fa fa-suitcase" :link="adminLegacy+ '/calendar/create/educational_projects'"></LayoutHeaderUniversalCreationTypeCard>
            <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'"></LayoutHeaderUniversalCreationTypeCard>
          </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>
            <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>
            <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'"></LayoutHeaderUniversalCreationTypeCard>
          </div>
        </div>

      </v-stepper-content>

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

<script lang="ts">
import {defineComponent, ref, Ref, useContext} from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    step: {
      type: Number,
      required: true
    }
  },
  setup (_,{emit}) {
    const { $config } = useContext()
    const onTypeClick = (step:Number,Cardtype:String)=>{
      type.value = Cardtype;
      emit('updateStep',step);
    }
    const type:Ref<String> = ref('');
    return {
      type,
      onTypeClick,
      adminLegacy: $config.baseURL_adminLegacy
    }
  }
})
</script>
<style lang="scss" scoped>
  .creation-type-container{
    border: none!important;
    .icon{
      i{
        font-size: 50px;
        color: var(--v-ot_grey-base, #777777);
      }
    }
    .infos-container{
      padding: 15px 0;
      h4{
        font-size: 15px;
        color: var(--v-ot_green-base, #00AD8E);
        font-weight: bold;
        margin-bottom: 6px;
      }
      p{
        font-size: 13px;
        padding: 0;
        margin: 0;
        color: #767676;
      }
    }
    &>div{
      &:hover{
        cursor: pointer;
        background: var(--v-ot_light_green-base, #a9e0d6);
      }
    }


  }
</style>