codevdesign 0.0.87 → 0.0.89

package/composants/csqcChaise/chaiseItem.vue

@@ -1,54 +1,54 @@
-<template>
-  <div>
-    <v-list-item-title>{{ nomUnite }}</v-list-item-title>
-    <v-list-item-subtitle v-if="getPreference != ''">
-      {{ getPreference }}
-    </v-list-item-subtitle>
-    <v-list-item-subtitle
-      v-if="getPreference == ''"
-      class="messageErreurChaiseItem"
-    >
-      {{ $t('csqc.message.chaiseSelection') }}
-    </v-list-item-subtitle>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { computed } from 'vue'
-
-  // Définition des props
-  const props = defineProps<{
-    uniteId: number
-    preferences: { chaiseId: number }[]
-    dictChaisesReleve: Record<number, { id: number; nom: string }[]>
-    unites: { id: number; nom: string }[]
-  }>()
-
-  const nomUnite = computed(() => {
-    if (!props.uniteId || !props.unites?.length) {
-      return ''
-    }
-
-    const unite = props.unites.find(u => u.id == props.uniteId)
-    return unite?.nom || ''
-  })
-
-  const getPreference = computed(() => {
-    const chaises = props.dictChaisesReleve?.[props.uniteId] ?? []
-    const prefs = props.preferences ?? []
-
-    for (const chaise of chaises) {
-      if (prefs.some(p => p.chaiseId === chaise.id)) {
-        return chaise.nom
-      }
-    }
-
-    return ''
-  })
-</script>
-
-<style scoped>
-  .messageErreurChaiseItem {
-    color: red !important;
-    font-style: italic;
-  }
-</style>
+<template>
+  <div>
+    <v-list-item-title>{{ nomUnite }}</v-list-item-title>
+    <v-list-item-subtitle v-if="getPreference != ''">
+      {{ getPreference }}
+    </v-list-item-subtitle>
+    <v-list-item-subtitle
+      v-if="getPreference == ''"
+      class="messageErreurChaiseItem"
+    >
+      {{ $t('csqc.message.chaiseSelection') }}
+    </v-list-item-subtitle>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  // Définition des props
+  const props = defineProps<{
+    uniteId: number
+    preferences: { chaiseId: number }[]
+    dictChaisesReleve: Record<number, { id: number; nom: string }[]>
+    unites: { id: number; nom: string }[]
+  }>()
+
+  const nomUnite = computed(() => {
+    if (!props.uniteId || !props.unites?.length) {
+      return ''
+    }
+
+    const unite = props.unites.find(u => u.id == props.uniteId)
+    return unite?.nom || ''
+  })
+
+  const getPreference = computed(() => {
+    const chaises = props.dictChaisesReleve?.[props.uniteId] ?? []
+    const prefs = props.preferences ?? []
+
+    for (const chaise of chaises) {
+      if (prefs.some(p => p.chaiseId === chaise.id)) {
+        return chaise.nom
+      }
+    }
+
+    return ''
+  })
+</script>
+
+<style scoped>
+  .messageErreurChaiseItem {
+    color: red !important;
+    font-style: italic;
+  }
+</style>

package/composants/csqcDate/csqcDate.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-date-input
+    v-model="dateValeur"
+    @update:model-value="formatDate"
+    v-bind="$attrs"
+    variant="outlined"
+    prepend-icon=""
+    prepend-inner-icon="$calendar"
+    density="comfortable"
+  ></v-date-input>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { VDateInput } from 'vuetify/labs/VDateInput'
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue: string | Date | null
+    }>(),
+    {},
+  )
+
+  const emit = defineEmits(['update:modelValue'])
+  const dateValeur = ref<Date | string | null>(props.modelValue)
+
+  const formatDate = (date: Date | string | null) => {
+    if (date == null) {
+      emit('update:modelValue', null)
+      return
+    }
+
+    if (typeof date === 'string') {
+      emit('update:modelValue', props.modelValue)
+      return
+    }
+
+    //Transformer la date en string
+    const d = new Date(date)
+    const yyyy = d.getFullYear()
+    const mm = String(d.getMonth() + 1).padStart(2, '0')
+    const dd = String(d.getDate()).padStart(2, '0')
+    const formatte = `${yyyy}-${mm}-${dd}`
+    dateValeur.value = formatte
+
+    emit('update:modelValue', dateValeur.value)
+  }
+
+  // Synchronise les props externes avec l'état interne
+  watch(
+    () => props.modelValue,
+    nouvelle => {
+      dateValeur.value = nouvelle
+    },
+  )
+</script>

package/composants/csqcDialogue.vue

@@ -1,117 +1,117 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    class="pa-0 ma-0"
-    :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; white-space: normal; word-break: break-word"
-      >
-        <slot name="titre"></slot>
-        <div text-h5><span v-html="titre"></span></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.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver"
-          variant="flat"
-          @click="okBouton"
-        >
-          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.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>
+<template>
+  <v-dialog
+    v-model="dialog"
+    class="pa-0 ma-0"
+    :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; white-space: normal; word-break: break-word"
+      >
+        <slot name="titre"></slot>
+        <div text-h5><span v-html="titre"></span></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.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver"
+          variant="flat"
+          @click="okBouton"
+        >
+          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.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>