restore create button

components/Layout/Dialog.vue

@@ -3,7 +3,7 @@
   <v-dialog
     :model-value="show"
     persistent
-    max-width="800"
+    :max-width="maxWidth"
     :content-class="contentClass"
   >
     <v-card class="d-flex flex-row">
@@ -14,7 +14,7 @@
       </div>
 
       <div class="dialog-container d-flex flex-column flex-grow-1">
-        <v-card-title class="dialog-title ">
+        <v-card-title class="dialog-title theme-neutral">
           <slot name="dialogTitle" />
         </v-card-title>
 
@@ -47,6 +47,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'primary',
+  },
+  maxWidth: {
+    type: [Number, String],
+    required: false,
+    default: 800
   }
 })
 </script>
@@ -58,7 +63,9 @@ const props = defineProps({
   }
 
   .dialog-type {
-    width: 50px;
+    width: 60px;
+    min-width: 60px;
+    max-width: 60px;
     min-height: 400px;
     padding: 25px 10px;
 

components/Layout/Header/UniversalCreation/CreateButton.vue

@@ -1,5 +1,5 @@
 <!--
-bouton Créer
+  Bouton Créer du header de l'application
 -->
 
 <template>
@@ -10,7 +10,7 @@ bouton Créer
         class="theme-primary"
         :icon="true"
         size="small"
-        @click="showDialog=true"
+        @click="show"
     >
       <v-icon>fas fa-plus</v-icon>
     </v-btn>
@@ -19,42 +19,36 @@ bouton Créer
         v-else
         :elevation="2"
         class="theme-x-create-btn"
-        @click="showDialog=true"
+        @click="show"
     >
       <span>{{ $t('create') }}</span>
     </v-btn>
 
-    <LayoutDialog :show="showDialog" >
+    <LayoutDialog :show="showing" :max-width="850" >
       <template #dialogType>{{ $t('creative_assistant') }}</template>
 
       <template #dialogTitle>
         <span v-if="type === 'home'">{{ $t('what_do_you_want_to_create') }}</span>
-        <span v-else-if="type === 'access'">{{ $t('universal_create_title_access') }}</span>
-        <span v-else-if="type === 'event'">{{ $t('universal_create_title_event') }}</span>
-        <span v-else-if="type === 'message'">{{ $t('universal_create_title_message') }}</span>
+        <span v-else-if="type === 'access'">{{ $t('what_type_of_contact_do_you_want_to_create') }}</span>
+        <span v-else-if="type === 'event'">{{ $t('what_do_you_want_to_add_to_your_planning') }}</span>
+        <span v-else-if="type === 'message'">{{ $t('what_do_you_want_to_send') }}</span>
       </template>
 
       <template #dialogText>
-        <!-- TODO: réactiver ce component quand les v-steper seront implémentés dans vuetify 3 -->
-        <!-- <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" @updateStep="updateStep" /> -->
-        <span>TEMP</span>
+         <LayoutHeaderUniversalCreationGenerateCardsSteps
+             :step="step"
+             @updateStep="updateStep"
+         />
       </template>
 
       <template #dialogBtn>
         <div class="text-center">
-          <v-btn
-            class="theme-neutral-soft"
-            @click="showDialog=false; step=1; type='home'"
-          >
+          <v-btn class="theme-neutral-soft" @click="close" >
             {{ $t('cancel') }}
           </v-btn>
 
-          <v-btn
-            v-if="step > 1"
-            class="theme-neutral-soft"
-            @click="step=1; type='home'"
-          >
-            {{ $t('previous') }}
+          <v-btn v-if="step > 1" class="theme-neutral-soft" @click="reset" >
+            {{ $t('previous_step') }}
           </v-btn>
         </div>
       </template>
@@ -66,7 +60,7 @@ bouton Créer
   import {Ref, ref} from "@vue/reactivity";
   import {useDisplay} from "vuetify";
 
-  const showDialog: Ref<Boolean> = ref(false);
+  const showing: Ref<Boolean> = ref(false);
   const step: Ref<Number> = ref(1);
   const type: Ref<String> = ref('home');
 
@@ -75,9 +69,20 @@ bouton Créer
     type.value = typeChoice
   }
 
+  const reset = () => {
+    step.value = 1
+    type.value = 'home'
+  }
+
+  const show = () => {
+    reset()
+    showing.value = true
+  }
+
+  const close = () => {
+    showing.value = false
+  }
+
   const { mdAndDown: asIcon } = useDisplay()
 
 </script>
-<style scoped>
-
-</style>

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -1,180 +1,220 @@
 <!--
-
+  Contenu de la boite de dialogue "Assistant de création"
 -->
 
 <template>
-  <v-stepper v-model="step">
-    <v-stepper-items>
-      <v-stepper-content step="1">
-        <div class="row">
+  <v-container v-if="step === 1">
+    <v-row>
+      <v-col cols="6" v-if="ability.can('manage', 'users')">
           <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')"
+      </v-col>
+
+      <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')
+                )">
+        <LayoutHeaderUniversalCreationTypeCard
+          title="an_event"
+          text-content="add_an_event_course"
+          icon="fa fa-calendar-alt"
+          type="event"
+          @typeClick="onTypeClick"
+        />
+      </v-col>
+
+      <v-col cols="6" v-else-if="ability.can('display', 'agenda_page') && ability.can('manage', 'events')">
+        <LayoutHeaderUniversalCreationTypeCard
+          title="other_event"
+          text-content="other_event_text_creation_card"
+          icon="far fa-calendar"
+          :link="makeAdminUrl('/calendar/create/events')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('display', 'message_send_page')
+                   && (
+                    ability.can('manage', 'emails') ||
+                    ability.can('manage', 'mails') ||
+                    ability.can('manage', 'texto')
+                  )">
+        <LayoutHeaderUniversalCreationTypeCard
+          title="a_correspondence"
+          text-content="sen_email_letter"
+          icon="fa fa-comment"
+          type="message"
+          @typeClick="onTypeClick"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('manage', 'equipments')">
+        <LayoutHeaderUniversalCreationTypeCard
+          title="a_materiel"
+          text-content="add_any_type_material"
+          icon="fa fa-cube"
+          :link="makeAdminUrl('/list/create/equipment')"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <v-container v-if="step === 2">
+    <v-row v-if="type === 'access'">
+      <v-col cols="6" v-if="isLaw1901">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="an_adherent"
+            text-content="adherent_text_creation_card"
+            icon="fa fa-user"
+            :link="makeAdminUrl('/universal_creation_person/adherent')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="isLaw1901">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_ca_member"
+            text-content="ca_member_text_creation_card"
+            icon="fa fa-users"
+            :link="makeAdminUrl('/universal_creation_person/ca_member')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_student"
+            text-content="student_text_creation_card"
+            icon="fa fa-user"
+            :link="makeAdminUrl('/universal_creation_person/student')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_guardian"
+            text-content="guardian_text_creation_card"
+            icon="fa fa-female"
+            :link="makeAdminUrl('/universal_creation_person/guardian')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_teacher"
+            text-content="teacher_text_creation_card"
+            icon="fa fa-graduation-cap"
+            :link="makeAdminUrl('/universal_creation_person/teacher')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_member_of_staff"
+            text-content="personnel_text_creation_card"
+            icon="fa fa-suitcase"
+            :link="makeAdminUrl('/universal_creation_person/personnel')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_legal_entity"
+            text-content="moral_text_creation_card"
+            icon="fa fa-building"
+            :link="makeAdminUrl('/universal_creation_person/company')"
+        />
+      </v-col>
+
+      <v-col cols="6">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="another_type_of_contact"
+            text-content="other_contact_text_creation_card"
+            icon="fa fa-plus"
+            :link="makeAdminUrl('/universal_creation_person/other_contact')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row v-if="type === 'event'">
+      <v-col cols="6" v-if="ability.can('display', 'course_page')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="course"
+            text-content="course_text_creation_card"
+            icon="fa fa-users"
+            :link="makeAdminUrl('/calendar/create/courses')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('display', 'exam_page')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="exam"
+            text-content="exam_text_creation_card"
+            icon="fa fa-graduation-cap"
+            :link="makeAdminUrl('/calendar/create/examens')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('display', 'pedagogics_project_page')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="educational_services"
+            text-content="educational_services_text_creation_card"
+            icon="fa fa-suitcase"
+            :link="makeAdminUrl('/calendar/create/educational_projects')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('manage', 'events')">
+        <LayoutHeaderUniversalCreationTypeCard
             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>
+        />
+      </v-col>
+    </v-row>
+
+    <v-row v-if="type === 'message'">
+      <v-col cols="6" v-if="ability.can('manage', 'emails')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="an_email"
+            text-content="email_text_creation_card"
+            icon="far fa-envelope"
+            :link="makeAdminUrl('/list/create/emails')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('manage', 'mails')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_letter"
+            text-content="letter_text_creation_card"
+            icon="far fa-file-alt"
+            :link="makeAdminUrl('/list/create/mails')"
+        />
+      </v-col>
+
+      <v-col cols="6" v-if="ability.can('manage', 'texto')">
+        <LayoutHeaderUniversalCreationTypeCard
+            title="a_sms"
+            text-content="sms_text_creation_card"
+            icon="fa fa-mobile-alt"
+            :link="makeAdminUrl('/list/create/sms')"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup lang="ts">
   import {Ref, ref} from "@vue/reactivity";
   import {useOrganizationProfileStore} from "~/stores/organizationProfile";
   import {useAbility} from "@casl/vue";
+  import {ComputedRef} from "vue";
+  import UrlUtils from "~/services/utils/urlUtils";
 
   const props = defineProps({
     step: {
@@ -185,50 +225,21 @@
 
   const emit = defineEmits(['updateStep'])
 
-  const { can } = useAbility()
+  const ability = useAbility()
+
+  const type: Ref<String> = ref('');
+  const organizationProfile = useOrganizationProfileStore()
+  const runtimeConfig = useRuntimeConfig()
 
   const onTypeClick = (step: Number, Cardtype: String) => {
     type.value = Cardtype;
     emit('updateStep', { stepChoice: step, typeChoice: Cardtype });
   }
 
-  const type: Ref<String> = ref('');
-  const organizationProfile = useOrganizationProfileStore()
+  const adminLegacy: Ref<string> = ref(runtimeConfig.baseUrlAdminLegacy)
+  const isLaw1901: ComputedRef<boolean> = organizationProfile.isAssociation
 
-  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-neutral-strong, #777777);
-      }
-    }
-    .infos-container{
-      padding: 15px 0;
-      h4{
-        font-size: 15px;
-        color: var(--v-theme-primary, #00AD8E);
-        font-weight: bold;
-        margin-bottom: 6px;
-      }
-      p{
-        font-size: 13px;
-        padding: 0;
-        margin: 0;
-        color: var(--v-theme-neutral);
-      }
-    }
-    &>div{
-      &:hover{
-        cursor: pointer;
-        background: var(--v-theme-ot-light_green, #a9e0d6);
-      }
-    }
+  const makeAdminUrl = (tail: string) => {
+    return UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, tail)
   }
-</style>
+</script>

components/Layout/Header/UniversalCreation/TypeCard.vue

@@ -1,31 +1,36 @@
 <!--
-
+  VCard proposant une option dans la boite de dialogue "Assistant de création"
 -->
 
 <template>
-
-    <v-card
-      class="col-md-6 creation-type-container"
-      color=""
-      :outlined=true
-      :href="link"
-      @click="$emit('typeClick', 2, type)"
-    >
-      <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) }}</h4>
-          <p>
-            {{ $t(textContent) }}
-          </p>
-        </div>
-      </div>
-    </v-card>
-
+  <v-card
+    class="col-md-6"
+    color=""
+    flat
+    border="solid 1px"
+    :href="link"
+    @click="$emit('typeClick', 2, type)"
+  >
+    <v-row no-gutters style="height: 100px">
+      <v-col cols="3" class="flex-grow-0 flex-shrink-0 d-flex justify-center">
+        <v-icon
+            :icon="icon"
+            size="50"
+            class="ma-2 pa-2 align-self-center text-neutral-strong"
+        />
+      </v-col>
+      <v-col
+          cols="9"
+          align-self="center"
+          class="pl-2 infos-container flex-grow-1 flex-shrink-1"
+      >
+        <h4 class="text-primary">{{ $t(title) }}</h4>
+        <p class="text-neutral-strong">
+          {{ $t(textContent) }}
+        </p>
+      </v-col>
+    </v-row>
+  </v-card>
 </template>
 
 <script setup lang="ts">
@@ -54,38 +59,22 @@
 </script>
 
 <style lang="scss" scoped>
-.creation-type-container {
-  border: none!important;
+  h4 {
+    font-size: 15px;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
 
-  .icon {
-    i{
-      font-size: 50px;
-      color: rgb(var(--v-theme-neutral-strong, #777777));
-    }
+  p {
+    font-size: 13px;
   }
 
   .infos-container {
     padding: 15px 0;
-
-    h4 {
-      font-size: 15px;
-      color: rgb(var(--v-theme-primary, #00AD8E));
-      font-weight: bold;
-      margin-bottom: 6px;
-    }
-    p {
-      font-size: 13px;
-      padding: 0;
-      margin: 0;
-      color: var(--v-theme-neutral);
-    }
   }
 
-  &>div {
-    &:hover {
-      cursor: pointer;
-      background: rgb(var(--v-theme-ot-light_green, #a9e0d6));
-    }
+  .v-card:hover {
+    cursor: pointer;
+    background: rgb(var(--v-theme-primary-alt));
   }
-}
 </style>

lang/fr.json

@@ -331,9 +331,9 @@
   "bills_params": "Facturation",
   "secure_params": "Sécurité",
   "back_to_dashboard": "Quittez les paramètres",
-  "universal_create_title_access": "Quel type de contact souhaitez-vous créer ?",
-  "universal_create_title_event": "Que souhaitez-vous ajouter à votre planning ?",
-  "universal_create_title_message": "Que souhaitez-vous envoyer ?",
+  "what_type_of_contact_do_you_want_to_create": "Quel type de contact souhaitez-vous créer ?",
+  "what_do_you_want_to_add_to_your_planning": "Que souhaitez-vous ajouter à votre planning ?",
+  "what_do_you_want_to_send": "Que souhaitez-vous envoyer ?",
   "an_adherent": "Un adhérent",
   "adherent_text_creation_card": "Ajoutez un membre à votre structure le statut d'adhérent",
   "a_ca_member": "Un membre du CA",
@@ -343,7 +343,7 @@
   "delete_assistant": "Assistant de suppression",
   "creative_assistant": "Assistant de création",
   "what_do_you_want_to_create": "Que souhaitez-vous créer ?",
-  "previous": "Étape précédente",
+  "previous_step": "Étape précédente",
   "add_any_type_material": "Ajoutez tout type de matériel ou de documents tels que des partitions à votre parc de matériel",
   "a_materiel": "Un matériel",
   "sen_email_letter": "Envoyez un email, un courrier, ou un SMS aux personnes de votre carnet d'adresses",
@@ -363,7 +363,7 @@
   "sms_text_creation_card": "Les SMS sont disponible sur option, vous devez disposer de suffisamment 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_sms": "Un sms",
   "a_letter": "Un courrier",
   "an_email": "Un email",
   "another_type_of_contact": "Un autre type de contact",