codevdesign 0.0.8 → 0.0.10

package/README.md

@@ -1,4 +1,4 @@
-# [CODEV DESIGN]
+# CODEV DESIGN
 
 ## À propos
 
@@ -24,13 +24,16 @@ Typescript 5
 
 ## Installation
 
+Installez le package via npm en exécutant la commande suivante dans votre projet :
+```
 npm install codevdesign
+```
 
 ## Utilisation
 
-modifier vos settings i18n pour importer les traductions :import { createI18n } from 'vue-i18n'
+Pour utiliser les traductions fournies par Codev Design, vous devez d'abord configurer Vue-i18n. Voici un exemple de configuration :
 
-exemple de fichier i18n
+```
 import { createI18n } from 'vue-i18n'
 import { csqcEn, csqcFr } from 'codevdesign' // Importation des traductions du package `codevdesign`
 
@@ -90,21 +93,26 @@ export default createI18n({
   fallbackLocale: window.langue,
   silentTranslationWarn: true,
 }) 
+```
 
+Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
 
-
-exemple d'importation:
+```
 import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
+```
+Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
 
 
 ## Documentation
 
-Un bac à sable avec les props des components sont disponibles ici pour les membres de la cdpvd: https://espacedev.csqc.ca/codevdesign
+Un bac à sable interactif avec la documentation détaillée des props des composants est disponible pour les membres de la CDPVD. Vous pouvez y accéder ici : https://espacedev.csqc.ca/codevdesign
+
 
 ## Gestion des versions
 
-Les versions disponibles ainsi que les journaux décrivant les changements apportés sont disponibles depuis https://www.npmjs.com/package/codevdesign?activeTab=versions.
+Toutes les versions disponibles ainsi que les journaux des changements apportés sont disponibles sur la page npm du package : https://www.npmjs.com/package/codevdesign?activeTab=versions.
+
 
 ## Licence
 
-Aucune.
+Ce package Codev Design est fourni sans licence spécifique. Vous pouvez l'utiliser dans vos projets à votre discrétion, mais il n'y a aucune garantie légale.

package/composants/csqcChaise/chaiseConteneur.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="pa-2 mt-2 mb-1 mr-1">
+    <!--on affiche une div avec les infos de préférences si le user a déjà au moins une préférence, au moins une unité et si activerDiv est à true.-->
+    <div v-if="preferences && unites && unites.length > 0 && activerDivPreferences">
+      <v-card
+        width="375"
+        outlined
+      >
+        <v-card-text
+          flat
+          class="pt-0 mt-0"
+        >
+          <v-progress-linear
+            v-if="chargementEnCours"
+            indeterminate
+          />
+          <div
+            v-if="!chargementEnCours"
+            class="pt-2"
+          >
+            <div class="text-overline text-h6 mb-2">{{ texteTitre }}</div>
+            <!--  <div v-if="existePreference == false">
+              Cliquer sur modifier ou lors de la soumission, vous pourrez sélectionner vos préférences de suivi.
+            </div>-->
+            <div>
+              <v-list-item
+                v-for="uniteId in Object.keys(dictChaisesReleve).map(Number)"
+                :key="uniteId"
+                class="mb-1"
+              >
+                <chaiseItem
+                  :uniteId="uniteId"
+                  :preferences="preferences"
+                  :dictChaisesReleve="dictChaisesReleve"
+                  :unites="unites"
+                />
+              </v-list-item>
+            </div>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <div class="flex-grow-1"></div>
+          <v-btn
+            v-if="chargementEnCours == false"
+            rounded
+            outlined
+            small
+            @click.stop="modifier"
+            >{{ $t('csqc.bouton.modifier') }}</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </div>
+
+    <v-dialog
+      max-width="largeur"
+      :fullscreen="display.name.value == 'xs'"
+      v-model="visible"
+      @click:outside="annuler"
+      @keydown.esc="annuler"
+    >
+      <v-card :class="['pa-0', display.name.value != 'xs' ? 'v-card-color-solid' : 'v-card-color-solid-xs']">
+        <v-container :class="display.name.value == 'xs' ? 'pl-1 pr-3' : ''">
+          <h3 class="pb-3 pl-2">{{ texteTitre }}</h3>
+          <hr class="pl-2" />
+          <v-card-text flat>
+            <i>{{ info }}</i>
+            <v-progress-linear
+              v-if="chargementEnCours"
+              indeterminate
+            />
+            <div
+              v-if="!chargementEnCours"
+              class="pt-4"
+            >
+              <v-row v-if="toutesUnitesPreferencesSelectionnees === false">
+                <v-col cols="12">
+                  <v-alert
+                    dismissible
+                    v-model="afficherErreur"
+                    type="error"
+                    >{{ $t('csqc.message.chaiseSelectionToutes') }}</v-alert
+                  >
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col
+                  cols="12"
+                  sm="4"
+                  md="3"
+                  v-for="uniteId in Object.keys(dictChaisesReleve).map(Number)"
+                  :key="uniteId"
+                >
+                  <label>{{ getUnite(uniteId)?.nom || '' }}</label>
+                  <br />
+                  <v-radio-group v-model="selection[uniteId]">
+                    <v-radio
+                      v-for="chaise in dictChaisesReleve[uniteId]"
+                      :key="chaise.id"
+                      :label="chaise.nom"
+                      :value="chaise.id"
+                    ></v-radio>
+                  </v-radio-group>
+                </v-col>
+              </v-row>
+            </div>
+          </v-card-text>
+        </v-container>
+
+        <v-card-actions>
+          <div class="flex-grow-1"></div>
+          <v-btn
+            color="primary"
+            outlined
+            @click.stop="annuler"
+            >Annuler</v-btn
+          >
+          <v-btn
+            color="primary"
+            @click.stop="ok"
+            >Ok</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, defineProps, defineEmits, onMounted } from 'vue'
+  import axios from '@/outils/appAxios.ts'
+  import chaiseItem from './chaiseItem.vue'
+  import { useDisplay } from 'vuetify'
+  const display = useDisplay()
+
+  // Définition des props
+  const props = defineProps<{
+    activerDivPreferences: boolean
+    typeintervenant: string
+    demandeid: string
+    formulaireid: string
+    urlbase: string
+    titre?: string
+    texteinfo?: string
+    largeur?: number
+  }>()
+
+  // Définition des emits
+  const emit = defineEmits<{
+    (event: 'annuler'): void
+    (event: 'confirmer'): void
+  }>()
+
+  // Variables réactives
+  const visible = ref(false)
+  const chargementEnCours = ref(false)
+  const afficherErreur = ref(false)
+  const unites = ref<Array<{ id: number; nom: string }>>([])
+  const preferences = ref<Array<{ uniteId: number; chaiseId: number }>>([])
+  const dictChaisesReleve = ref<Record<number, Array<{ id: number; nom: string }>>>({})
+  const selection = ref<Record<number, number>>({})
+  const modeModifier = ref(false)
+
+  // Méthodes
+  const soumettre = async () => {
+    modeModifier.value = false
+    await ouvrir()
+  }
+
+  const ouvrir = async () => {
+    // Mode sans les divs
+    if (props.activerDivPreferences === false) {
+      await chargementPreferences()
+      visible.value = true
+      return
+    }
+
+    // Mode avec div, mais il manque une sélection
+    if (!toutesUnitesPreferencesSelectionnees.value) {
+      visible.value = true
+      return
+    }
+
+    // Tout est beau
+    await ok()
+  }
+
+  const definitionSelectionDepart = () => {
+    for (let uniteId in dictChaisesReleve.value) {
+      const chaises = dictChaisesReleve.value[uniteId]
+      const uniteIdNum = Number(uniteId) // Convert to number
+
+      const pref = preferences.value.find(
+        pref => pref.uniteId === uniteIdNum && chaises.some(chaise => chaise.id === pref.chaiseId),
+      )
+
+      const chaiseIdDefaut = pref?.chaiseId ?? (chaises.length === 1 ? chaises[0].id : -1)
+      selection.value[uniteIdNum] = chaiseIdDefaut // Ensure key consistency
+    }
+  }
+  const estPrefere = (uniteId: number, chaiseId: number) => {
+    return preferences.value.some(x => x.uniteId === uniteId && x.chaiseId === chaiseId)
+  }
+
+  const annuler = () => {
+    visible.value = false
+    modeModifier.value = false
+    emit('annuler')
+  }
+
+  const getUnite = (uniteId: number) => {
+    return unites.value.find(x => x.id === uniteId)
+  }
+
+  const modifier = () => {
+    modeModifier.value = true
+    visible.value = true
+  }
+
+  const ok = async () => {
+    await sauvegarder()
+    if (toutesUnitesPreferencesSelectionnees.value) {
+      if (!modeModifier.value) {
+        emit('confirmer')
+      }
+      visible.value = false
+      modeModifier.value = false
+    } else {
+      afficherErreur.value = true
+    }
+  }
+
+  const sauvegarder = async () => {
+    for (let uniteId in dictChaisesReleve.value) {
+      const chaiseId = selection.value[uniteId]
+      if (chaiseId <= 0) {
+        continue
+      }
+
+      // Cibler l'ancienne préférence reliée à une des chaises de cette unité
+      let prefIndexDeUnite = -1
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        prefIndexDeUnite = preferences.value.findIndex(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)
+        if (prefIndexDeUnite >= 0) {
+          break
+        }
+      }
+
+      try {
+        const response = await axios
+          .getAxios()
+          .put(
+            `${props.urlbase}/api/ComposantUI/Preferences/${props.formulaireid}/Unite/${uniteId}/Chaise/${chaiseId}/TypeIntervenant/${props.typeintervenant}`,
+          )
+
+        const itemRecu = response.data // Extract the actual data
+
+        // Écraser l'ancienne sélection
+        if (prefIndexDeUnite >= 0) {
+          preferences.value[prefIndexDeUnite] = itemRecu
+        } else {
+          preferences.value = [itemRecu]
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+
+  const chargementPreferences = async () => {
+    chargementEnCours.value = true
+    // Ramasse les infos des chaises par unité
+    dictChaisesReleve.value = await axios
+      .getAxios()
+      .get(`${props.urlbase}/api/ComposantUI/ReleveDe/${props.typeintervenant}/Demande/${props.demandeid}`)
+
+    // Ramasse les préférences de l'usager
+    preferences.value = await axios
+      .getAxios()
+      .get(
+        `${props.urlbase}/api/ComposantUI/Preferences/${props.formulaireid}/TypeIntervenant/${props.typeintervenant}`,
+      )
+    definitionSelectionDepart()
+
+    await sauvegarder() // Immédiatement on sauvegarde pour les choix uniques.
+
+    chargementEnCours.value = false
+  }
+
+  const texteTitre = computed(() => {
+    return props.titre || ''
+  })
+
+  const info = computed(() => {
+    return props.texteinfo || ''
+  })
+
+  const existePreference = computed(() => {
+    for (let uniteId in dictChaisesReleve.value) {
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        if (preferences.value.some(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)) {
+          return true
+        }
+      }
+    }
+    return false
+  })
+
+  const toutesUnitesPreferencesSelectionnees = computed(() => {
+    for (let uniteId in dictChaisesReleve.value) {
+      let uniteOk = false
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        if (preferences.value.some(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)) {
+          uniteOk = true
+        }
+      }
+
+      if (!uniteOk) return false
+    }
+
+    return true // Toutes les unités ont été sélectionnées
+  })
+
+  onMounted(async () => {
+    chargementEnCours.value = true
+    // Ramasse les unités de l'usager
+    unites.value = await axios.getAxios().get(`${props.urlbase}/api/ComposantUI/Unites`)
+    chargementPreferences()
+  })
+</script>

package/composants/csqcChaise/chaiseItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <v-list-item-content>
+      <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>
+    </v-list-item-content>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  // Définition des props
+  const props = defineProps<{
+    uniteId: number
+    preferences: Array<{ chaiseId: number }>
+    dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
+    unites: Array<{ 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(() => {
+    for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
+      if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
+        return props.dictChaisesReleve[props.uniteId][i].nom
+      }
+    }
+
+    return ''
+  })
+</script>
+
+<style scoped>
+  .messageErreurChaiseItem {
+    color: red !important;
+    font-style: italic;
+  }
+</style>

package/index.ts

@@ -9,6 +9,7 @@ import pivFooter from './composants/gabarit/pivPiedPage.vue'
 import csqcMenu from './composants/gabarit/csqcMenu.vue'
 import csqcConfirmation from './composants/csqcConfirmation.vue'
 import csqcTable from './composants/csqcTable/csqcTable.vue'
+import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
 
 import modeleUtilisateur from './modeles/utilisateur'
 import modeleUnite from './modeles/unite'
@@ -29,6 +30,7 @@ export {
   csqcTable,
   csqcTiroir,
   csqcMenu,
+  csqcChaise,
   pivFooter,
   pivEntete,
   modeleUtilisateur,

package/locales/en.json

@@ -1,9 +1,53 @@
 {
+  "csqc": {
+    "bouton": {
+      "activer": "Activate",
+      "ajouter": "Add",
+      "annuler": "Cancel",
+      "anonymiser": "Anonymize",
+      "completer": "Complete",
+      "continuer": "Continue",
+      "desactiver": "Deactivate",
+      "envoyer": "Send",
+      "exporter": "Export",
+      "fermer": "Close",
+      "generer": "Generate",
+      "importer": "Import",
+      "modifier": "Edit",
+      "non": "No",
+      "ok": "Ok",
+      "oui": "Yes",
+      "ouvrir": "Open",
+      "recharger": "Reload",
+      "reinitialiser": "Reset",
+      "restaurer": "Restore",
+      "sauvegarder": "Save",
+      "supprimer": "Delete",
+      "televerser": "Upload"
+    },
+    "label": {
+      "actif": "Active",
+      "fermer": "Close",
+      "nom": "Name",
+      "recherche": "Search",
+      "rechercheAvanceeDefaut": "Advanced search",
+      "rechercher": "Search"
+    },
+    "message": {
+      "supprimerMessage": "Are you sure you want to delete {nom}?",
+      "supprimerTitre": "Delete confirmation!",
+      "chaiseSelection": "No selection for this unit",
+      "chaiseSelectionToutes": "Please make a selection for all units."
+    },
     "pivEntete": {
-        "langue": "Français",
-        "nom_application": "Codev Design"
+      "langue": "Français"
     },
     "pivFooter": {
-        "logoAlt": ""
+      "logoAlt": ""
+    },
+    "placeholder": {
+      "date": "Choose a date",
+      "selectionner": "Select"
     }
-}
+  }
+}

package/locales/fr.json

@@ -35,7 +35,9 @@
     },
     "message": {
       "supprimerMessage": "Voulez-vous vraiment supprimer {nom}?",
-      "supprimerTitre": "Confirmation de suppression!"
+      "supprimerTitre": "Confirmation de suppression!",
+      "chaiseSelection": "Aucune sélection pour cette unité",
+      "chaiseSelectionToutes": "Veuillez faire une sélection pour toutes les unités."
     },
     "pivEntete": {
       "langue": "English"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",