feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié --------- Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #56 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-05-27 12:11:51 +00:00
parent 7d7b2fb720
commit acd531f69e
36 changed files with 6581 additions and 30 deletions
@@ -0,0 +1,88 @@
+<template>
+  <div class="flex justify-center">
+    <div class="w-[1348px]">
+      <div class="flex items-center justify-between mt-[46px]">
+        <div class="flex items-center gap-3">
+          <MalioButtonIcon
+            icon="mdi:arrow-left-bold"
+            icon-size="24"
+            aria-label="Précédent"
+            variant="ghost"
+          />
+          <h1 class="text-[32px] text-m-primary font-bold">Filtres</h1>
+        </div>
+        <MalioButton
+          label="Filtres"
+          variant="tertiary"
+          icon-name="mdi:tune"
+          icon-position="left"
+          button-class="w-[184px] px-2 py-2 justify-start text-black gap-4"
+          @click="drawerOpen = true"
+        />
+      </div>
+    </div>
+
+    <MalioDrawer
+      v-model="drawerOpen"
+      side="right"
+      drawer-class="max-w-[450px]"
+      body-class="p-0"
+      footer-class="sticky bottom-0 flex justify-between gap-4 bg-white px-5 py-7"
+    >
+      <template #header>
+        <h2 class="text-[24px] font-bold uppercase">Filtres</h2>
+      </template>
+
+      <MalioAccordion>
+        <MalioAccordionItem title="Type de camion" value="camion">
+          <div class="flex flex-col gap-6">
+            <MalioCheckbox v-model="semiBenne" label="Semi Benne" />
+            <MalioCheckbox v-model="benne" label="Benne" />
+          </div>
+        </MalioAccordionItem>
+
+        <MalioAccordionItem title="Date à Date" value="date">
+          <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
+            <span>Du</span>
+            <MalioDate v-model="dateDebut"/>
+            <span>Au</span>
+            <MalioDate v-model="dateFin"/>
+          </div>
+        </MalioAccordionItem>
+      </MalioAccordion>
+
+      <template #footer>
+        <MalioButton
+          label="Réinitialiser"
+          variant="tertiary"
+          button-class="w-[150px]"
+          @click="resetFiltres"
+        />
+        <MalioButton
+          label="Voir les résultats"
+          variant="primary"
+          button-class="w-[170px]"
+        />
+      </template>
+    </MalioDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const drawerOpen = ref(false)
+
+const semiBenne = ref(false)
+const benne = ref(false)
+
+const dateDebut = ref<string | null>(null)
+const dateFin = ref<string | null>(null)
+
+function resetFiltres() {
+  semiBenne.value = false
+  benne.value = false
+  dateDebut.value = null
+  dateFin.value = null
+}
+</script>