codevdesign 1.0.34 → 1.0.36

package/composants/csqcTexteBilingue.vue

@@ -0,0 +1,175 @@
+<template>
+  <v-row dense>
+    <v-col
+      v-if="afficherChampFr"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampFr-${cleTradFr}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradFr) }}
+      </label>
+      <csqcAide
+        v-if="props.aide && !libelleInterieur"
+        :aide="props.aide"
+        hover
+        :style-css="'padding-bottom:6px;padding-left:8px;'"
+      />
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        v-bind="$attrs"
+        rows="1"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        v-bind="$attrs"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+    </v-col>
+    <v-col
+      v-if="afficherChampEn"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampEn-${cleTradEn}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradEn) }}</label
+      ><csqcAide
+        v-if="props.aide && !libelleInterieur"
+        :aide="props.aide"
+        hover
+        :style-css="'padding-bottom:6px;padding-left:8px;'"
+      />
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        rows="1"
+        v-bind="$attrs"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        density="comfortable"
+        v-bind="$attrs"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts" generic="T extends { id: number }">
+  import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
+  import { ChoixLangue } from '@/enums/choixLangue'
+  import csqcAide from './csqcAide.vue'
+  import { computed, type PropType, toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n({ useScope: 'global' })
+
+  const props = defineProps<{
+    aide?: string
+    textarea?: boolean
+    libelleInterieur?: boolean
+    estRequis?: boolean
+    autofocus?: boolean
+    estUniqueValeurs?: T[]
+    minimumLongueur?: number
+    maximumLongueur?: number
+    regles?: ((v: string) => string | true)[]
+    langue: ChoixLangue
+    i18nLibelleRacine: string
+    champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
+  }>()
+
+  const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
+    toRefs(props)
+
+  const minimumLongueur = computed(() => props.minimumLongueur)
+  const maximumLongueur = computed(() => props.maximumLongueur)
+  const estRequis = computed(() => props.estRequis)
+
+  const model = defineModel({
+    type: Object as PropType<T>,
+    required: true,
+  })
+
+  const reglesInterne = computed(() => {
+    const _regles: ((v: string) => string | true)[] = regles.value ?? []
+
+    if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
+      console.error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+      throw Error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+    }
+
+    if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
+
+    if (estUniqueValeurs.value) {
+      _regles.push(v =>
+        estUniqueBilingue(
+          v,
+          model.value,
+          {
+            champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
+            valeurs: estUniqueValeurs.value!,
+            langueCss: langue.value,
+          },
+          t,
+        ),
+      )
+    }
+
+    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
+
+    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
+
+    return _regles
+  })
+
+  // Clés i18n
+  const cleTradEn = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Anglais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const cleTradFr = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Francais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
+  const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
+</script>

package/composants/csqcTiroir.vue

@@ -0,0 +1,156 @@
+<template>
+  <v-navigation-drawer
+    v-model="visible"
+    location="right"
+    temporary
+    v-bind="$attrs"
+    :width="grosseurTiroir"
+    class="pa-0 elevation-2 csqc-ligneBleue"
+    :persistent="persistant"
+    @keydown.esc="!persistant ? fermeture : ''"
+    @click:outside="!persistant ? fermeture : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute couleurHover"
+        style="top: 5px; right: 5px"
+        @click="fermeture"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 text-wrap"
+        style="font-size: 24px"
+      >
+        <slot name="titre"></slot>
+        <div text-h5>{{ titre }}</div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          variant="text"
+          :loading="operationEnCours"
+          @click="fermeture"
+        >
+          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          variant="flat"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver || operationEnCours"
+          @click="okBouton"
+        >
+          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const visible = ref(false)
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    titre: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnAnnuler: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnOk: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnAnnulerTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnOkDesactiver: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    operationEnCours: { type: Boolean, default: false },
+    persistant: { type: Boolean, default: true },
+    btnOkTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  })
+
+  // Déclaration des événements
+  const emit = defineEmits(['fermer', 'ok'])
+
+  // Méthodes
+  const ouvrir = () => {
+    visible.value = true
+  }
+
+  const fermer = () => {
+    visible.value = false
+  }
+
+  const fermeture = () => {
+    emit('fermer')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+    fermer()
+  }
+
+  // Calcul des tailles du tiroir en fonction du breakpoint
+  const grosseurTiroir = computed(() => {
+    switch (display.name.value) {
+      case 'xs':
+        return ''
+      case 'sm':
+        return 0.95 * display.width.value
+      case 'md':
+        return 0.8 * display.width.value
+      case 'lg':
+        return 0.7 * display.width.value
+      case 'xl':
+        return 0.6 * display.width.value
+      case 'xxl':
+        return 0.5 * display.width.value
+      default:
+        return ''
+    }
+  })
+
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style>
+  .csqc-ligneBleue {
+    border-left: 30px #095797 solid !important;
+  }
+</style>

package/composants/gabarit/csqcMenu.vue

@@ -0,0 +1,281 @@
+<template>
+  <!-- desktop -->
+  <div v-if="!estMobile">
+    <v-toolbar
+      class="pa-0 ajouterPointeur barreMenu"
+      :border="false"
+      elevation="2"
+    >
+      <div
+        v-for="item in filtrerMenuItems"
+        :key="item.nom"
+        class="pt-1"
+      >
+        <v-btn
+          v-if="doitAfficherItemMenu(item)"
+          variant="text"
+          :to="item.path"
+          :active="item.path === route"
+          :active-color="'white'"
+          :style="'min-width: 100px;'"
+          >{{ item.nom }}</v-btn
+        >
+      </div>
+      <v-spacer></v-spacer>
+      <!-- Sous Liste -->
+      <v-menu
+        v-for="(item, index) in filtrerSousListe"
+        :key="index"
+        open-on-hover
+      >
+        <template #activator="{ props }">
+          <v-btn
+            color="white"
+            v-bind="props"
+            :active="estActifSousliste(item)"
+          >
+            {{ item.nom }}
+          </v-btn>
+        </template>
+
+        <v-list
+          style="background-color: #223654 !important"
+          min-width="230px"
+        >
+          <v-list-item
+            v-for="(sousitem, sousindex) in obtenirItemsSousListeSelonDroits(item.id)"
+            :key="sousindex"
+          >
+            <v-btn
+              :max-height="35"
+              width="100%"
+              class="params_item"
+              :to="sousitem.path"
+              variant="text"
+              :active="sousitem.path === route"
+              >{{ sousitem.nom }}</v-btn
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn
+        v-if="btnDeconnexion"
+        variant="text"
+        :style="'min-width: 100px;'"
+        @click="deconnexion"
+        >{{ $t('csqc.csqcMenu.deconnexion') }}</v-btn
+      >
+    </v-toolbar>
+  </div>
+
+  <!-- mobile -->
+  <div v-else>
+    <v-toolbar class="pa-0 ajouterPointeur barreMenuMobile">
+      <v-app-bar-nav-icon
+        variant="text"
+        @click.stop="menu = !menu"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title
+        ><label
+          class="ajouterPointeur"
+          style="color: white !important"
+          >{{ $t('menu.menu') }}</label
+        >
+      </v-toolbar-title>
+    </v-toolbar>
+
+    <!-- mobile -->
+    <v-navigation-drawer
+      v-model="menu"
+      nav
+    >
+      <v-list>
+        <!-- Menu principal -->
+        <template
+          v-for="item in filtrerMenuItems"
+          :key="item.nom"
+        >
+          <v-list-item
+            :to="item.path"
+            :active="item.path === route"
+            :title="item.nom"
+          />
+        </template>
+
+        <!-- Sous-listes -->
+        <template
+          v-for="item in filtrerSousListe"
+          :key="item.id"
+        >
+          <v-list-group :value="item.nom">
+            <template #activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                :title="item.nom"
+              />
+            </template>
+
+            <template
+              v-for="(sousitem, index) in obtenirItemsSousListeSelonDroits(item.id)"
+              :key="index"
+            >
+              <v-list-item
+                :title="sousitem.nom"
+                :value="sousitem.nom"
+                :to="sousitem.path"
+              />
+            </template>
+          </v-list-group>
+        </template>
+
+        <!-- ✅ Déconnexion : UNE seule fois -->
+        <v-list-item
+          v-if="btnDeconnexion"
+          :title="$t('csqc.csqcMenu.deconnexion')"
+          @click="deconnexion"
+        />
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { MenuItem, SousListe, SousListeItems } from '../../modeles/composants/csqcMenuModele'
+  import { ref, computed } from 'vue'
+
+  const props = defineProps({
+    estMobile: {
+      type: Boolean,
+      required: true,
+    },
+    btnDeconnexion: {
+      type: Boolean,
+      required: false,
+    },
+    route: {
+      type: String,
+      required: true,
+    },
+    menuItems: {
+      type: Array as () => MenuItem[],
+      required: true,
+    },
+    sousliste: {
+      type: Array as () => SousListe[],
+      required: false,
+      default: () => [],
+    },
+    souslisteItems: {
+      type: Array as () => SousListeItems[],
+      required: false,
+      default: () => [],
+    },
+    droitsMap: {
+      type: Object as () => Record<string, boolean>,
+      required: true,
+      default: () => ({}),
+    },
+  })
+
+  const menu = ref<boolean>(false)
+  const emit = defineEmits(['deconnexion'])
+
+  /*const verifierDroits = (monelement: string) => {
+    return props.droitsMap[monelement] || false
+  }*/
+
+  const deconnexion = () => {
+    emit('deconnexion')
+  }
+
+  const doitAfficherItemMenu = (item: MenuItem) => {
+    return props.droitsMap[item.droit] || false
+  }
+
+  const filtrerMenuItems = computed(() => {
+    return props.menuItems.filter(item => props.droitsMap[item.droit])
+  })
+
+  const filtrerSousListe = computed(() => {
+    return props.sousliste.filter(item => props.droitsMap[item.droit])
+  })
+
+  const obtenirItemsSousListeSelonDroits = (monitemId: number) => {
+    return props.souslisteItems.filter(item => item.parentId === monitemId && props.droitsMap[item.droit])
+  }
+
+  // Vérifie si un item de la sous-liste est actif (route correspond à un item)
+  const estActifSousliste = (item: SousListe) => {
+    // Vérifie si un des sous-items correspond à la route
+    return obtenirItemsSousListeSelonDroits(item.id).some(sousitem => sousitem.path === props.route)
+  }
+</script>
+<style lang="css" scoped>
+  /* desktop background de la barre de menu et hauteur */
+  .v-toolbar {
+    background-color: #223654;
+    height: 64px;
+  }
+
+  /* desktop couleur du texte de la barre, marge du haut, padding */
+  .barreMenu {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+  }
+  /* desktop */
+  .v-btn {
+    font-weight: 400;
+    height: 72px !important;
+  }
+  /* desktop */
+  .v-btn--active {
+    font-weight: 600 !important;
+  }
+
+  /* desktop empeche le texte parametre detre trop bas */
+  .params {
+    padding-top: 5px !important;
+  }
+  /* desktop */
+  .params_item {
+    font-weight: 400;
+    color: white !important;
+    background-color: #223654 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active {
+    color: white !important;
+    font-weight: 600 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active:hover {
+    color: white !important;
+    background-color: #223654 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active:hover::before {
+    color: #ffffff80 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active::before {
+    opacity: 0.24;
+    border-radius: 0;
+    color: #ffffff80 !important;
+    margin-top: 1px !important;
+  }
+
+  /* mobile couleur du texte de la barre, marge du haut, padding */
+  .barreMenuMobile {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+  }
+
+  /* mobile drawer apparait sous les app bar */
+  .v-navigation-drawer {
+    top: 132px !important;
+  }
+  /* mobile drawer,  Calcule la hauteur comme étant 100% moins 132px pour afficher le scroll */
+  :deep(.v-navigation-drawer__content) {
+    height: calc(100% - 132px);
+  }
+</style>