BTTF-21

components/Layout/Dialog.vue

@@ -7,14 +7,27 @@
     max-width="800"
   >
     <v-card>
-      <slot name="dialogText" />
+      <div class="d-flex">
+        <div class="dialog-type flex-column justify-center d-none d-sm-flex">
+          <h3 class="d-flex"> <slot name="dialogType">Type de la modal</slot></h3>
+        </div>
+        <div class="dialog-container">
+          <v-card-title class="dialog-title">
+            <slot name="dialogTitle">Titre de la modal</slot>
+          </v-card-title>
+          <div class="dialog-text-container">
+            <slot name="dialogText" />
+          </div>
 
-      <v-divider />
 
-      <v-card-actions>
-        <v-spacer />
-        <slot name="dialogBtn" />
-      </v-card-actions>
+          <v-divider />
+
+          <v-card-actions class="justify-center">
+            <slot name="dialogBtn" />
+          </v-card-actions>
+        </div>
+
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -32,5 +45,27 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .dialog-title{
+    background: #e6e6e6;
+    padding-left: 40px;
+    font-weight: normal;
+  }
+  .dialog-type{
+    background: #00AD8E;
+    color: #fff;
+   h3{
+     font-size: 25px;
+     font-weight: normal;
+     writing-mode: tb-lr;
+     writing-mode: vertical-lr;
+     transform: rotate(
+         -180deg);
+     padding: 10px;
+    }
+  }
+  .dialog-text-container{
+    max-height: 60vh;
+    overflow: auto;
+  }
 </style>

components/Layout/Header.vue

@@ -27,12 +27,7 @@ et aux préférences de l'utilisateur
 
     <v-spacer />
 
-    <v-btn
-      elevation="2"
-      color="ot_warning ot_white--text"
-    >
-      {{ $t('create') }}
-    </v-btn>
+    <LayoutHeaderUniversalCreationCreateButton />
 
     <v-tooltip bottom>
       <template #activator="{ on, attrs }">

components/Layout/Header/UniversalCreation/CreateButton.vue

@@ -0,0 +1,61 @@
+<!--
+bouton Créer
+-->
+
+<template>
+  <main>
+    <v-btn
+      elevation="2"
+      color="ot_warning ot_white--text"
+      @click="showDialog=true"
+    >
+      {{ $t('create') }}
+    </v-btn>
+    <lazy-LayoutDialog
+      :show="showDialog"
+    >
+
+      <template v-slot:dialogType>Assistant de création</template>
+      <template v-slot:dialogTitle>Que souhaitez-vous créer ?</template>
+      <template v-slot:dialogText>
+        <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" v-on:updateStep="step=$event" />
+
+      </template>
+      <template v-slot:dialogBtn>
+        <div class="text-center">
+          <v-btn
+            color="ot_super_light_grey"
+            @click="showDialog=false"
+          >
+            Annuler
+          </v-btn>
+          <v-btn
+            v-if="step > 1"
+            color="ot_super_light_grey"
+            @click="step=1"
+          >
+            Précedent
+          </v-btn>
+        </div>
+      </template>
+    </lazy-LayoutDialog>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, Ref,ref} from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup () {
+    const showDialog:Ref<Boolean> = ref(false);
+    const step:Ref<Number> = ref(1);
+    return {
+      showDialog,
+      step
+    }
+  }
+})
+</script>
+<style scoped>
+
+</style>

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -0,0 +1,181 @@
+<!--
+
+-->
+
+<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: 0;
+    .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>

components/Layout/Header/UniversalCreation/TypeCard.vue

@@ -0,0 +1,90 @@
+<!--
+
+-->
+
+<template>
+
+    <v-card
+      class="col-md-6 creation-type-container"
+      color=""
+      :outlined=true
+      :href="link"
+    >
+      <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="icon" aria-hidden="true"></i>
+          </div>
+        </div>
+        <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
+          <h4>{{ $t(title) | capitalize }}</h4>
+          <p>
+            {{ $t(textContent) }}
+          </p>
+        </div>
+      </div>
+    </v-card>
+
+</template>
+
+<script lang="ts">
+import {defineComponent, Ref,ref} from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    textContent: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    },
+    link: {
+      type: String,
+      required: false
+    }
+  },
+  setup () {
+    return {
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.creation-type-container{
+  border: 0;
+  .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>

lang/layout/fr-FR.js

@@ -1,5 +1,31 @@
 export default (context, locale) => {
   return ({
+    other_event_text_creation_card:'Comprend entre autres: auditions, concerts, répétitions, spectacles, stages...',
+    educational_services_text_creation_card:'Correspond aux interventions en milieu scolaire, pénitentiaire, ou hospitalier',
+    exam_text_creation_card:'Permet d\'organiser des examens avec la gestion des jurys, des convocations et des résultats',
+    course_text_creation_card:'On associe les élèves à leurs enseignements, puis à leurs cours, qui peut être périodique ou ponctuel',
+    other_event:'autre événement',
+    educational_services:'prestations pédagogiques',
+    exam:'examen',
+    course:'cours',
+    sms_text_creation_card: 'Les SMS sont disponible sur option, vous devez disposer de suffisament de crédit',
+    letter_text_creation_card: 'Un courrier est imprimé pour être envoyé par la Poste mais peut aussi être envoyé par mail',
+    email_text_creation_card: 'Les emails peuvent également être des newsletters / lettre d\'information',
+    an_sms: 'un sms',
+    a_letter: 'un courrier',
+    an_email: 'un email',
+    another_type_of_contact: 'un autre type de contact',
+    a_legal_entity: 'une personne morale',
+    a_member_of_staff: 'un membre du personnel',
+    a_teacher: 'un professeur',
+    a_guardian: 'un tuteur',
+    a_student: 'un élève',
+    other_contact_text_creation_card: 'Ajoutez un autre type de contact qui n\'a pas été défini précédemment',
+    moral_text_creation_card: 'Ajoutez les structures qui vous soutiennent ou avec qui vous travaillez',
+    personnel_text_creation_card: 'Ajoutez un membre à votre personnel et donnez-lui un accès administratif',
+    teacher_text_creation_card: 'Ajoutez un professeur à votre personnel et donnez-lui un accès pédagogique',
+    student_text_creation_card: 'Inscrivez un nouvel élève via le formulaire de la vue famille',
+    guardian_text_creation_card: 'Ajoutez un tuteur à votre carnet d\'adresses afin de l\'associer ultérieurement à un élève',
     click_here: 'cliquez ici',
     super_admin_switch_account: 'Vous utilisez une connexion SWITCH. Afin de retourner sur votre compte veuillez',
     insurance_cmf_subscription: 'Souscrire un contrat assurance CMF',