codevdesign 0.0.1 → 0.0.2

package/composants/gabarit/csqcMenu.vue

@@ -0,0 +1,249 @@
+<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.title"
+        class="pt-1"
+      >
+        <v-btn
+          variant="text"
+          v-if="doitAfficherItemMenu(item)"
+          :to="item.path"
+          :active="item.path === route"
+          :active-color="'white'"
+          >{{ item.title }}</v-btn
+        >
+      </div>
+      <v-spacer></v-spacer>
+      <!-- Sous Liste -->
+      <v-menu
+        open-on-hover
+        v-for="(item, index) in filtrerSousListe"
+        :key="index"
+      >
+        <template v-slot:activator="{ props }">
+          <v-btn
+            color="white"
+            v-bind="props"
+            :active="estActifSousliste"
+          >
+            {{ 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"
+              >{{ sousitem.title }}</v-btn
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-toolbar>
+  </div>
+
+  <!-- mobile -->
+  <div v-else>
+    <v-toolbar class="pa-0 ajouterPointeur barreMenu">
+      <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>
+
+    <v-navigation-drawer v-model="menu">
+      <v-list>
+        <div
+          v-for="item in filtrerMenuItems"
+          :key="item.title"
+        >
+          <v-list-item
+            :to="item.path"
+            :active="item.path === route"
+            :title="item.title"
+          />
+        </div>
+        <div
+          v-for="item in filtrerSousListe"
+          :key="item.id"
+        >
+          <v-list-group :value="item.nom">
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                :title="item.nom"
+              />
+            </template>
+            <div
+              v-for="(sousitem, index) in obtenirItemsSousListeSelonDroits(item.id)"
+              :key="index"
+            >
+              <v-list-item
+                :title="sousitem.title"
+                :value="sousitem.title"
+                :to="sousitem.path"
+              />
+            </div>
+          </v-list-group>
+        </div>
+      </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,
+    },
+    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 verifierDroits = (monelement: string) => {
+    return props.droitsMap[monelement] || false
+  }*/
+
+  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 = computed(() => {
+    return props.souslisteItems.some(item => props.route === item.path)
+  })
+</script>
+<style lang="css" scoped>
+  /* desktop background de la barre de menu et hauteur */
+  .v-toolbar {
+    background-color: #223654;
+    height: 66px;
+  }
+
+  /* desktop couleur du texte de la barre, marge du haut, padding */
+  .barreMenu {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+    margin-top: 77px !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 */
+  .barreMenu {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+    margin-top: 65px !important;
+  }
+
+  /* mobile background de la barre de menu et hauteur */
+  .v-toolbar {
+    background-color: #223654;
+    height: 66px;
+  }
+
+  /* mobile drawer apparait sous les app bar */
+  .v-navigation-drawer {
+    top: 132px !important;
+  }
+</style>

package/composants/gabarit/pivEntete.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-toolbar
+    color="primary"
+    height="72px"
+    elevation="0"
+    absolute
+  >
+    <v-row
+      class="pl-6 pr-6"
+      align="center"
+      no-gutters
+    >
+      <!-- Première colonne : Logo -->
+      <v-col cols="auto">
+        <a href="/">
+          <img
+            v-if="texteVide(logoUrl)"
+            src="/images/QUEBEC_blanc.svg"
+            height="72"
+            id="pivImage"
+            :alt="$t('pivFooter.logoAlt')"
+          />
+          <img
+            v-else
+            :src="logoUrl"
+            height="72"
+            id="pivImage"
+            :alt="$t('pivFooter.logoAlt')"
+          />
+        </a>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode desktop) -->
+      <v-col
+        v-if="!estMobile"
+        class="d-flex justify-center"
+      >
+        <v-app-bar-title class="pl-12">
+          {{ $t('pivEntete.nom_application') }}
+        </v-app-bar-title>
+      </v-col>
+
+      <!-- Colonne pour le bouton de langue  -->
+      <v-col class="d-none d-flex justify-end">
+        <v-btn
+          variant="text"
+          @click="enregistrerLangue()"
+          >{{ $t('pivEntete.langue') }}
+        </v-btn>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode mobile) -->
+      <v-col
+        v-if="estMobile"
+        cols="12"
+      >
+        <v-app-bar-title>
+          {{ $t('pivEntete.nom_application') }}
+        </v-app-bar-title>
+      </v-col>
+    </v-row>
+  </v-toolbar>
+</template>
+
+<script setup lang="ts">
+  import { useLocale } from 'vuetify'
+  const { current } = useLocale()
+  const texteVide = (texte: string | undefined, retirerEspace: boolean = true): boolean => {
+    let retour = texte === undefined || texte === null || texte === ''
+
+    if (!retour && retirerEspace) {
+      const temp = texte
+      retour = temp!.replace(' ', '') === ''
+    }
+
+    return retour
+  }
+  const props = defineProps({
+    estMobile: {
+      type: Boolean,
+      required: true,
+    },
+    urlBase: {
+      type: String,
+      required: true,
+    },
+    logoUrl: {
+      type: String,
+      default: '',
+    },
+  })
+
+  // Fonction pour enregistrer la langue
+  const enregistrerLangue = (): void => {
+    const langueDispo: string = current.value === 'fr' ? 'en' : 'fr'
+    const returnUrl: string = encodeURIComponent(window.location.pathname) + encodeURIComponent(window.location.hash)
+    window.location.href = `${props.urlBase}/Traducteur/SetLanguage?culture=${langueDispo}&returnUrl=${returnUrl}`
+  }
+</script>
+
+<style scoped>
+  .container {
+    max-width: none !important;
+  }
+  .theme--light.v-app-bar.v-toolbar.v-sheet {
+    background: #095797;
+    color: #fff;
+  }
+</style>

package/composants/gabarit/pivPiedPage.vue

@@ -0,0 +1,59 @@
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const anneeEnCours = computed<number>(() => {
+  return new Date().getFullYear();
+});
+</script>
+
+
+<template>
+  <footer>
+    <div class="footer-content">
+      <a href="https://quebec.ca">
+        <img
+          id="logoFooter"
+          alt="Gouvernement du Québec."
+          src="/images/QUEBEC_couleur.svg"
+          width="117"
+          height="35"
+        />
+      </a>
+      <div>
+        <small>
+          <a
+            href="http://www.droitauteur.gouv.qc.ca/copyright.php"
+            target="_blank"
+          >© Gouvernement du Québec, {{anneeEnCours}} </a>
+        </small>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+
+footer {
+  display: flex;
+  justify-content: center;  /* Centrer horizontalement */
+  align-items: center;      /* Centrer verticalement */
+  text-align: center;       /* Centrer le texte à l'intérieur des éléments */
+  height: 100px;            /* Ajuster la hauteur du footer */
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;   /* Disposer les éléments les uns sous les autres */
+  justify-content: center;  /* Centrer verticalement à l'intérieur de .footer-content */
+  align-items: center;      /* Centrer horizontalement à l'intérieur de .footer-content */
+}
+
+footer a {
+  text-decoration: none;  /* Supprimer le soulignement des liens */
+}
+
+footer small {
+  margin-top: 10px;  /* Ajouter de l'espace entre l'image et le texte */
+}
+</style>

package/composants/gabarit/vueDefault.vue

@@ -0,0 +1,6 @@
+<template>
+  <router-view  />
+</template>
+
+<script setup lang='ts'>
+</script>

package/index.ts

@@ -0,0 +1,38 @@
+import csqcAlerteErreur from './composants/csqcAlerteErreur.vue'
+import csqcDialogue from './composants/csqcDialogue.vue'
+import csqcOptionSwitch from './composants/csqcOptionSwitch.vue'
+import csqcRecherche from './composants/csqcRecherche.vue'
+import csqcSnackbar from './composants/csqcSnackbar.vue'
+import csqcTiroir from './composants/csqcTiroir.vue'
+import pivEntete from './composants/gabarit/pivEntete.vue'
+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 modeleUtilisateur from './modeles/utilisateur'
+import modeleUnite from './modeles/unite'
+import modeleIntervention from './modeles/intervention'
+import modeleSnackbar from './modeles/composants/snackbar'
+import csqcEn from './locales/en.json'
+import csqcFr from './locales/fr.json'
+
+export {
+  csqcFr,
+  csqcEn,
+  csqcAlerteErreur,
+  csqcDialogue,
+  csqcConfirmation,
+  csqcOptionSwitch,
+  csqcRecherche,
+  csqcSnackbar,
+  csqcTable,
+  csqcTiroir,
+  csqcMenu,
+  pivFooter,
+  pivEntete,
+  modeleUtilisateur,
+  modeleUnite,
+  modeleIntervention,
+  modeleSnackbar,
+}

package/locales/en.json

@@ -0,0 +1,9 @@
+{
+    "pivEntete": {
+        "langue": "Français",
+        "nom_application": "Codev Design"
+    },
+    "pivFooter": {
+        "logoAlt": ""
+    }
+}

package/locales/fr.json

@@ -0,0 +1,126 @@
+{
+  "csqc-composants-ui": {
+    "annuler": "Annuler",
+    "boutton": {
+      "ajouter": "Ajouter",
+      "annuler": "Annuler",
+      "ok": "Ok"
+    },
+    "label": {
+      "rechercher": "Rechercher"
+    },
+    "ok": "Ok"
+  },
+  "csqc-dialog": {
+    "annuler": "Annuler"
+  },
+  "csqc-table": {
+    "boutton": {
+      "ajouter": "Ajouter"
+    },
+    "label": {
+      "rechercher": "Rechercher",
+      "supprimerMessage": "Voulez-vous vraiment supprimer {nom}?",
+      "supprimerTitre": "Confirmation de suppression!"
+    }
+  },
+  "csqcAlerte": {
+    "afficherComponent": "Afficher l'alerte",
+    "emitFermer": "v-on:fermer:alerte",
+    "headline": "csqcAlerte",
+    "message": "message* (obligatoire)",
+    "messageSoutien": "messageSoutien (facultatif)"
+  },
+  "csqcConfirmation": {
+    "afficherComponent": "Afficher la confirmation",
+    "headline": "csqcConfirmation",
+    "largeur": "largeur (facultatif, défaut: 525px)",
+    "message": "message* (obligatoire)",
+    "modeAlerteParam": "modeAlerteParam (facultatif, défaut: faux)",
+    "operationEnCours": "operationEnCours (facultatif, défaut: faux)",
+    "titre": "titre (facultatif)"
+  },
+  "csqcDialogue": {
+    "afficherComponent": "Afficher le dialogue",
+    "btnAnnuler": "btnAnnuler (facultatif, défaut: vrai)",
+    "btnAnnulerTexte": "btnAnnulerTexte (facultatif, défaut: 'annuler')",
+    "btnOk": "btnOk (facultatif, défaut: vrai)",
+    "btnOkDesactiver": "btnOkDesactiver (facultatif, défaut: faux)",
+    "btnOkTexte": "btnOkTexte (facultatif, défaut: 'ok')",
+    "emitAnnuler": "v-on:annuler",
+    "emitOk": "v-on:ok",
+    "headline": "csqcDialogue",
+    "largeur": "largeur (facultatif, défaut:50vw, max-width:650)",
+    "operationEnCours": "operationEnCours",
+    "persistant": "persistant (facultatif, défaut: vrai)",
+    "titre": "titre (facultatif)"
+  },
+  "csqcOptionSwitch": {
+    "desactiver": "desactiver (facultatif, défaut: faux)",
+    "headline": "csqcOptionSwitch",
+    "modelValue": "modelValue* (v-model)",
+    "texte": "texte*",
+    "texteDetaille": "texteDetaille*",
+    "update": "v-on:update:modelValue",
+    "valeurInverse": "valeurInverse (facultatif, défaut: faux)"
+  },
+  "csqcRecherche": {
+    "afficherComponent": "Afficher le snackbar",
+    "chargement": "chargement (facultatif, défaut: faux)",
+    "desactiver": "desactiver (facultatif, défaut: faux)",
+    "headline": "csqcRecherche",
+    "labelRechercher": "rechercheTexte (facultatif, défaut: Recherche)",
+    "rechercheAvancee": "rechercheAvancee",
+    "rechercheAvanceeDefaut": "Recherche avancée",
+    "rechercheAvanceeTexte": "rechercheAvanceeTexte (facultatif, défaut: Recherche Avancée)",
+    "rechercher": "Recherche",
+    "update": "v-on:update:recherche"
+  },
+  "csqcSnackbar": {
+    "afficherComponent": "Afficher le snackbar",
+    "btnFermer": "btnFermer (facultatif, défaut: vrai)",
+    "couleur": "couleur (facultatif, défaut: success)",
+    "headline": "csqcSnackbar",
+    "message": "message *",
+    "position": "position (facultatif, défaut: en bas à gauche)",
+    "styleCss": "styleCss (facultatif)",
+    "temps": "temps (facultatif, défaut: 4000, -1 pour indéfini)",
+    "titre": "titre (facultatif)"
+  },
+  "csqcTable": {
+    "btnAjouter": "btnAjouter (facultatif, défaut: vrai)",
+    "btnAjouterTexte": "btnAjouterTexte (facultatif, défaut: ajouter)",
+    "btnModifier": "btnModifier (facultatif, défaut: vrai)",
+    "btnSupprimer": "btnSupprimer (facultatif, défaut: vrai)",
+    "chargementEnCours": "chargementEnCours (facultatif, défaut: faux)",
+    "headline": "csqcTable",
+    "items": "# items",
+    "modaleSupprimerChamp": "modaleSupprimerChamp",
+    "modaleSupprimerTexte": "modaleSupprimerTexte",
+    "modaleSupprimerTitre": "modaleSupprimerTitre",
+    "operationEnCours": "operationEnCours (facultatif, défaut: faux)",
+    "rechercheAfficher": "rechercheAfficher (facultatif, défaut: vrai)",
+    "rechercheTexte": "rechercheTexte (facultatif, défaut: recherche)"
+  },
+  "csqcTiroir": {
+    "afficherComponent": "Afficher le tiroir",
+    "btnAnnuler": "btnAnnuler (facultatif, défaut: vrai)",
+    "btnAnnulerTexte": "btnAnnulerTexte (facultatif, défaut: 'annuler')",
+    "btnOk": "btnOk (facultatif, défaut: vrai)",
+    "btnOkDesactiver": "btnOkDesactiver (facultatif, défaut: faux)",
+    "btnOkTexte": "btnOkTexte (facultatif, défaut: 'ok')",
+    "emitFermer": "v-on:fermer",
+    "emitOk": "v-on:ok",
+    "headline": "csqcTiroir",
+    "operationEnCours": "operationEnCours",
+    "persistant": "persistant (facultatif, défaut: vrai)",
+    "titre": "titre (facultatif)"
+  },
+  "pivEntete": {
+    "langue": "English",
+    "nom_application": "Codev Design"
+  },
+  "pivFooter": {
+    "logoAlt": ""
+  }
+}

package/modeles/composants/csqcMenuModele.ts

@@ -0,0 +1,18 @@
+export interface MenuItem {
+  title: string
+  path: string
+  droit: string
+}
+
+export interface SousListe {
+  droit: string
+  id: number
+  nom: string
+}
+
+export interface SousListeItems {
+  parentId: number
+  title: string
+  path: string
+  droit: string
+}

package/modeles/composants/snackbar.ts

@@ -0,0 +1,18 @@
+class CSQCSnackbar {
+  temps?: number
+  couleur?: string
+  message: string
+  style?: string
+  titre?: string
+
+  // Constructeur de la classe
+  constructor(message: string, temps?: number, couleur?: string, style?: string, titre?: string) {
+    this.message = message
+    this.temps = temps
+    this.couleur = couleur
+    this.style = style
+    this.titre = titre
+  }
+}
+
+export default CSQCSnackbar

package/modeles/intervention.ts

@@ -0,0 +1,38 @@
+import { EtatDemandeUnite, TypeIntervenant } from '@/outils/enum'
+
+class Intervention {
+  id: number
+  demandeId: number
+  uniteId: number
+  chaiseId?: number
+  niveauChaise?: number
+  typeIntervenant: TypeIntervenant
+  utilisateurIdAyantIntervenu?: number
+  dateIntervention?: Date
+  etat: EtatDemandeUnite
+
+  // Constructeur de la classe
+  constructor(
+    id: number,
+    demandeId: number,
+    uniteId: number,
+    typeIntervenant: TypeIntervenant,
+    etat: EtatDemandeUnite,
+    chaiseId?: number,
+    niveauChaise?: number,
+    utilisateurIdAyantIntervenu?: number,
+    dateIntervention?: Date,
+  ) {
+    this.id = id
+    this.demandeId = demandeId
+    this.uniteId = uniteId
+    this.typeIntervenant = typeIntervenant
+    this.etat = etat
+    this.chaiseId = chaiseId
+    this.niveauChaise = niveauChaise
+    this.utilisateurIdAyantIntervenu = utilisateurIdAyantIntervenu
+    this.dateIntervention = dateIntervention
+  }
+}
+
+export default Intervention