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">
          <v-card
            class="col-md-6 creation-type-container"
            color=""
            :outlined=true
            @click="onTypeClick(2,'access')"
          >
            <div class="row no-gutters" style="height: 100px">
              <div class="flex-grow-0 flex-shrink-0 d-flex justify-center col col-3" style="">
                <div class="icon align-self-center">
                  <i class="fa fa-user" aria-hidden="true"></i>
                </div>
              </div>
              <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
                <h4>Une Personne</h4>
                <p>
                  Ajoutez un nouveau membre parent, élève, professeur, personnel... à votre répertoire
                </p>
              </div>
            </div>
          </v-card>
          <v-card
            class="col-md-6 creation-type-container"
            color=""
            :outlined=true
            @click="onTypeClick(2,'event')"
          >
            <div class="row no-gutters" style="height: 100px">
              <div class="flex-grow-0 flex-shrink-0 d-flex justify-center col col-3" style="">
                <div class="icon align-self-center">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
              </div>
              <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
                <h4>Un évènement</h4>
                <p>
                  Ajoutez un évenement, un cour, une prestation pédagogique, un examen... à votre planning
                </p>
              </div>
            </div>
          </v-card>
          <v-card
            class="col-md-6 creation-type-container"
            color=""
            :outlined=true
            @click="onTypeClick(2,'message')"
          >
            <div class="row no-gutters" style="height: 100px">
              <div class="flex-grow-0 flex-shrink-0 d-flex justify-center col col-3" style="">
                <div class="icon align-self-center">
                  <i class="fa fa-comment" aria-hidden="true"></i>
                </div>
              </div>
              <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
                <h4>Une Correspondance</h4>
                <p>
                  Envoyez un email, un courrier, ou un SMS aux personnes de votre carnet d'adresses
                </p>
              </div>
            </div>
          </v-card>
          <v-card
            :outlined=true
            class="col-md-6 creation-type-container"
            color=""
            :href="adminLegacy+ '/list/create/equipment'"
          >
            <div class="row no-gutters" style="height: 100px">
              <div class="flex-grow-0 flex-shrink-0 d-flex justify-center col col-3" style="">
                <div class="icon align-self-center">
                  <i class="fa fa-cube" aria-hidden="true"></i>
                </div>
              </div>
              <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
                <h4>Une matériel</h4>
                <p>
                  Ajoutez tout type de matériel ou de documents tels que des partitions à votre parc de matériel
                </p>
              </div>
            </div>
          </v-card>
        </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 title="course" text-content="course_text_creation_card" icon="fa fa-users" :link="adminLegacy+ '/calendar/create/courses'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="exam" text-content="exam_text_creation_card" icon="fa fa-graduation-cap" :link="adminLegacy+ '/calendar/create/examens'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="educational_services" text-content="educational_services_text_creation_card" icon="fa fa-suitcase" :link="adminLegacy+ '/calendar/create/educational_projects'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard 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 title="an_email" text-content="email_text_creation_card" icon="far fa-envelope" :link="adminLegacy+ '/list/create/emails'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard title="a_letter" text-content="letter_text_creation_card" icon="far fa-file-alt" :link="adminLegacy+ '/list/create/mails'"></LayoutHeaderUniversalCreationTypeCard>
            <LayoutHeaderUniversalCreationTypeCard 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: #777777;
      }
    }
    .infos-container{
      padding: 15px 0;
      h4{
        font-size: 15px;
        color: #00AD8E;
        font-weight: bold;
        margin-bottom: 6px;
      }
      p{
        font-size: 13px;
        padding: 0;
        margin: 0;
        color: #767676;
      }
    }
    &>div{
      &:hover{
        cursor: pointer;
        background: #a9e0d6;
      }
    }


  }
</style>