codevdesign 0.0.1 → 0.0.2

package/composants/csqcAlerteErreur.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    v-if="afficher && erreur"
+    :style="retournerStyle"
+  >
+    <v-alert
+      v-model="afficher"
+      class="mb-0 text-center hyphen_auto"
+      color="#CB381F"
+      closable
+      @click:close="fermer"
+    >
+      <span v-html="erreur" /><br />
+      <span
+        id="messageSoutien"
+        style="color: darkgray"
+        >{{ messageSoutien }}</span
+      >
+    </v-alert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue'
+  import { useDisplay } from 'vuetify'
+  import { useI18n } from 'vue-i18n'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    message: {
+      type: String,
+      required: true,
+    },
+    messageSoutien: {
+      type: String,
+      required: true,
+    },
+  })
+  const { name: displayName } = useDisplay()
+  const emit = defineEmits(['fermer:alerte'])
+  const { t } = useI18n({ useScope: 'global' })
+
+  const fermer = (): void => {
+    afficher.value = false
+    emit('fermer:alerte')
+  }
+
+  const afficher = ref(false)
+
+  // Watcher pour réagir aux changements du message
+  watch(
+    () => props.message,
+    nouveauMessage => {
+      if (nouveauMessage && nouveauMessage !== '') {
+        afficher.value = true
+      }
+    },
+  )
+
+  // Computed pour l'erreur, venant du store
+  const erreur = computed(() => {
+    if (props.message == null || props.message == '') return null
+
+    if (props.message.indexOf('erreurs.') === 0) return t(props.message)
+
+    return props.message
+  })
+
+  // Méthode computed pour le style en fonction du breakpoint
+  const retournerStyle = computed(() => {
+    if (displayName.value === 'xs') {
+      return 'top: 0px; right:1%;width: 98%;position: fixed; z-index: 2000;'
+    }
+    return 'top: 20px; right: 10%; width: 80%; position: fixed; z-index: 2000; margin: 0 auto;'
+  })
+</script>
+
+<style lang="css" scoped>
+  .error {
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
+  }
+  :deep(.blanc) {
+    color: white;
+  }
+</style>

package/composants/csqcConfirmation.vue

@@ -0,0 +1,74 @@
+<template>
+  <csqcDialogue
+    :titre="props.titre"
+    ref="modale"
+    :operationEnCours="operationEnCours"
+    activator="supprimer"
+    :largeur="props.largeur"
+    @ok="confirmer"
+    @annuler="annuler"
+  >
+    <v-form
+      ref="form"
+      @submit.prevent
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          class="pa-0 ma-0"
+        >
+          {{ texte }}
+        </v-col>
+      </v-row>
+    </v-form>
+  </csqcDialogue>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import csqcDialogue from './csqcDialogue.vue'
+
+  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
+  const utilisateurATermine = ref(false)
+  const reponse = ref(false)
+  const texte = ref('')
+  const modeAlerte = ref(false)
+
+  const props = defineProps({
+    operationEnCours: { type: Boolean, default: false },
+    titre: { type: String, default: '' },
+    largeur: { type: String, default: '525px' },
+  })
+
+  const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
+    texte.value = message
+    modeAlerte.value = modeAlerteParam
+    utilisateurATermine.value = false
+    modale.value?.ouvrir()
+
+    while (!utilisateurATermine.value) {
+      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
+    }
+
+    return reponse.value
+  }
+
+  const confirmer = (): void => {
+    reponse.value = true
+    utilisateurATermine.value = true
+
+    if (modeAlerte.value) fermer()
+  }
+
+  const annuler = (): void => {
+    reponse.value = false
+    utilisateurATermine.value = true
+    fermer()
+  }
+
+  const fermer = (): void => {
+    modale.value?.fermer()
+  }
+
+  defineExpose({ ouvrir, fermer })
+</script>

package/composants/csqcDialogue.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-dialog
+    class="pa-0 ma-0"
+    v-model="dialog"
+    :width="largeur"
+    :fullscreen="display.xs.value"
+    max-width="650"
+    :persistent="props.persistant"
+    @keydown.esc="!persistant ? annuler : ''"
+    @click:outside="!persistant ? annuler : ''"
+  >
+    <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="annuler"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6"
+        style="font-size: 24px"
+      >
+        <slot name="titre"></slot>
+        <div class="headline">{{ 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"
+          :loading="operationEnCours"
+          variant="text"
+          @click="annuler"
+        >
+          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc-composants-ui.boutton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          variant="flat"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver"
+          @click="okBouton"
+          outlined
+        >
+          {{ btnOkTexte ? btnOkTexte : $t('csqc-composants-ui.boutton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    largeur: { type: String, default: '50vw' },
+    persistant: { type: Boolean, default: true },
+    operationEnCours: { type: Boolean, default: false },
+    btnAnnuler: { type: Boolean, default: true },
+    btnOk: { type: Boolean, default: true },
+    btnAnnulerTexte: { type: String, default: '' },
+    btnOkTexte: { type: String, default: '' },
+    titre: { type: String, default: '' },
+    btnOkDesactiver: { type: Boolean, default: false },
+  })
+
+  // Déclaration des événements émis
+  const emit = defineEmits(['annuler', 'ok'])
+
+  // Gestion de l'état du dialogue
+  const dialog = ref(false)
+
+  // Méthodes pour gérer l'ouverture et la fermeture
+  const ouvrir = () => {
+    dialog.value = true
+  }
+
+  const fermer = () => {
+    dialog.value = false
+  }
+
+  // Gestion des actions des boutons
+  const annuler = () => {
+    emit('annuler')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+  }
+
+  // permet d'exporter les 2 actions
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style lang="css" scoped>
+  .v-card__text,
+  .v-card__title {
+    word-break: normal; /* empeche le wrap de couper un mot en XS  */
+  }
+</style>

package/composants/csqcOptionSwitch.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="pt-4 pb-4 pl-4">
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+        lg="6"
+      >
+        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
+      </v-col>
+      <v-col
+        cols="2"
+        class="flex-grow-1 d-flex justify-end pt-0 mt-0 pb-0 mb-0"
+      >
+        <v-switch
+          v-model="maValeur"
+          :disabled="desactiver"
+          @change="sauvegarder"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+      >
+        <span v-html="texteDetaille"></span>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch, defineProps, defineEmits, onMounted } from 'vue'
+
+  // Définition des props
+  const props = defineProps({
+    valeurInverse: {
+      type: Boolean,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    texte: {
+      type: String,
+      required: true,
+    },
+    texteDetaille: {
+      type: String,
+      required: true,
+    },
+  })
+
+  // Définition de l'événement
+  const emit = defineEmits(['update:modelValue'])
+
+  // Référence pour la valeur interne
+  const maValeur = ref<boolean>(false)
+
+  // Montée du composant
+  onMounted(() => {
+    if (props.valeurInverse) {
+      maValeur.value = !props.modelValue
+    } else {
+      maValeur.value = props.modelValue
+    }
+  })
+
+  // Watcher pour suivre les changements de la prop 'value'
+  watch(
+    () => props.modelValue,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = !newValue
+      } else {
+        maValeur.value = newValue
+      }
+    },
+  )
+
+  watch(
+    () => props.valeurInverse,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = newValue
+      } else {
+        maValeur.value = !newValue
+      }
+    },
+  )
+
+  // Méthode pour sauvegarder la valeur
+  const sauvegarder = () => {
+    if (props.valeurInverse) {
+      emit('update:modelValue', !maValeur.value)
+    } else {
+      emit('update:modelValue', maValeur.value)
+    }
+  }
+</script>
+
+<style lang="css" scoped>
+  .labelSwitchSiSwitchApres {
+    font-weight: bold;
+    margin-top: 25px;
+  }
+</style>

package/composants/csqcRecherche.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col>
+        <v-text-field
+          v-model="rechercheLocale"
+          :label="rechercheTexte ? rechercheTexte : $t('csqcRecherche.rechercher')"
+          single-line
+          density="compact"
+          hide-details
+          clearable
+          rounded="0"
+          max-width="640"
+          class="BarreRecherche"
+          :loading="chargement"
+          :disabled="chargement || desactiver"
+        >
+          <template v-slot:append>
+            <v-btn
+              variant="flat"
+              class="BarreRechercheBackIcone"
+              :loading="chargement"
+              :disabled="chargement || desactiver"
+            >
+              <v-icon
+                class="BarreRechercheIcone"
+                icon="mdi-magnify"
+              />
+            </v-btn>
+          </template>
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col
+        cols="12"
+        md="10"
+        lg="8"
+      >
+        <v-expansion-panels
+          static
+          v-if="rechercheAvancee"
+          :readonly="chargement || desactiver"
+          expand-icon=""
+        >
+          <v-expansion-panel
+            flat
+            elevation="0"
+          >
+            <v-expansion-panel-title
+              style="color: #095797"
+              class="pl-0 ml-0"
+            >
+              <span
+                style="text-decoration: underline"
+                v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqcRecherche.rechercheAvanceeDefaut')"
+              ></span>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <slot name="rechercheAvancee"></slot>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue'
+
+  // Props
+  const props = defineProps({
+    rechercheTexte: {
+      type: String,
+      required: false,
+    },
+    rechercheAvanceeTexte: {
+      type: String,
+      required: false,
+    },
+    chargement: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    recherche: {
+      type: String,
+      required: false,
+    },
+    rechercheAvancee: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:recherche', recherche: string): void
+  }>()
+
+  // Création d'une variable locale pour gérer la recherche
+  const rechercheLocale = ref(props.recherche)
+
+  // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
+  watch(
+    () => props.recherche,
+    nouvelleValeur => {
+      rechercheLocale.value = nouvelleValeur
+    },
+  )
+
+  // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
+  watch(rechercheLocale, nouvelleValeur => {
+    emit('update:recherche', nouvelleValeur!)
+  })
+</script>
+
+<style lang="css">
+  /* barre de recherche design QC*/
+  .BarreRecherche {
+    min-height: 40px;
+  }
+
+  .BarreRechercheBackIcone {
+    border-right: 1px solid #808a9d;
+    border-top: 1px solid #808a9d;
+    border-bottom: 1px solid #808a9d;
+    background-color: #095797 !important;
+    height: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    border-radius: 0;
+    margin-left: -16px;
+  }
+
+  /* icone loupe */
+  .BarreRechercheIcone {
+    font-size: 34px !important;
+    margin-left: 1px !important;
+    margin-top: 2px !important;
+    color: white !important;
+  }
+</style>

package/composants/csqcSnackbar.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-snackbar
+    v-model="snackbar"
+    :timeout="tempsFinal"
+    :style="styleCss"
+    multi-line
+    :location="position"
+    :color="props.couleur"
+    @update:modelValue="fermer"
+  >
+    <template v-if="props.titre || props.message">
+      <b style="font-size: 12pt">{{ props.titre }}</b>
+      <br v-if="props.titre" />
+      <b>{{ props.message }}</b>
+    </template>
+
+    <template v-slot:actions>
+      <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
+      <v-icon
+        v-if="props.btnFermer || props.temps === -1"
+        color="white"
+        dark
+        style="cursor: pointer"
+        @click.stop="fermer"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+  </v-snackbar>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch, type PropType } from 'vue'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    styleCss: {
+      type: String,
+      required: false,
+    },
+    temps: {
+      type: Number,
+      required: false,
+      default: 4000,
+      validator(value: number) {
+        // Si la valeur est inférieure à -1, on la remplace par -1
+        if (value < -1) {
+          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
+        }
+        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
+        return value <= Number.MAX_VALUE
+      },
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    titre: {
+      type: String,
+      required: false,
+    },
+    couleur: {
+      type: String,
+      required: false,
+      default: 'success',
+    },
+    position: {
+      type: String as PropType<'top' | 'bottom' | 'left' | 'right' | 'center'>,
+      required: false,
+      default: 'left',
+    },
+    btnFermer: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  })
+  const emit = defineEmits(['fermer:snackbar'])
+  const fermer = (): void => {
+    snackbar.value = false
+    emit('fermer:snackbar')
+  }
+  // Déclarer l'état réactif pour snackbar
+  const snackbar = ref(false)
+  const message = computed(() => props.message)
+  const tempsFinal = computed(() => {
+    if (props.temps < -1) {
+      return -1 // Si la valeur est inférieure à -1, on la met à -1
+    }
+    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
+
+    return props.temps // Sinon, on retourne la valeur de la prop
+  })
+
+  watch(message, nouveau => {
+    if (nouveau != null && nouveau !== '') {
+      snackbar.value = true
+    }
+  })
+</script>