feat: Présentaion du board avec des carte empilables

MTES-MCT · Dec 17, 2024 · a1d15fe · a1d15fe
1 parent 3bc2bd0
commit a1d15fe
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 104 deletions.
diff --git a/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBord.vue b/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBord.vue
@@ -10,108 +10,12 @@ import { ContentWrapper } from "@resorptionbidonvilles/ui";
 import TableauDeBordGrille from "./TableauDeBordGrille.vue";
 import { useUserStore } from "@/stores/user.store";
 
-import svgSearch from "@/assets/img/dsfr/search.svg";
-import svgUpdate from "@/assets/img/dsfr/update.svg";
-import svgAction from "@/assets/img/dsfr/human-cooperation.svg";
-import svgCommunity from "@/assets/img/dsfr/community.svg";
-import svgListSites from "@/assets/img/dsfr/location-france.svg";
-import svgSiteAdd from "@/assets/img/dsfr/site-add.svg";
-import svgAllActions from "@/assets/img/dsfr/all-actions.svg";
+import { default as baseCards } from "@/utils/TableauDeBordCardsList";
 
 const userStore = useUserStore();
 
 const cards = ref([]);
 
-const baseCards = [
-    {
-        name: "Sites",
-        icon: "tent",
-        permission: "shantytown.read",
-        actions: [
-            {
-                label: "Mettre à jour un site",
-                description:
-                    "J'ai constaté des changements sur un site ou je signale mon passage.",
-                icon: svgUpdate,
-                clickMgmt: "sites",
-                placeHolder: "Adresse, nom d'un site, ville, code postal...",
-                permission: "shantytown.read",
-                to: "/liste-des-sites",
-                mainAction: true,
-            },
-            {
-                label: "Afficher les sites",
-                description: "Je veux voir tous les sites de mon territoire.",
-                icon: svgListSites,
-                to: "/liste-des-sites",
-                permission: "shantytown.read",
-            },
-            {
-                label: "Déclarer un site",
-                description: "Je veux créer un nouveau site.",
-                icon: svgSiteAdd,
-                to: "/site/nouveau",
-                permission: "shantytown.create",
-            },
-        ],
-    },
-    {
-        name: "Actions",
-        icon: "handshake-angle",
-        permission: "action.read",
-        actions: [
-            {
-                label: "Rechercher une action",
-                description:
-                    "Je veux rechercher une action sur mon territoire.",
-                icon: svgSearch,
-                clickMgmt: "actions",
-                placeHolder: "Nom d'une action, commune, département, acteur.",
-                permission: "action.read",
-                to: "/liste-des-actions",
-                mainAction: true,
-            },
-            {
-                label: "Voir toutes les actions",
-                description:
-                    "Je veux accéder à toutes les actions sur mon territoire.",
-                icon: svgAllActions,
-                to: "/liste-des-actions",
-                permission: "action.read",
-            },
-            {
-                label: "Saisir une action",
-                description: "Je veux renseigner une action.",
-                icon: svgAction,
-                to: "/action/nouveau",
-                permission: "action.create",
-            },
-        ],
-    },
-    {
-        name: "Entraide",
-        icon: "comments",
-        permission: null,
-        actions: [
-            {
-                label: "Rechercher une personne ou une structure",
-                description:
-                    "Je recherche une personne ou une structure en particulier.",
-                icon: svgSearch,
-                to: "/annuaire",
-                permission: null,
-            },
-            {
-                label: "J'ai besoin d'aide",
-                description: "Je veux poser une question à la communauté.",
-                icon: svgCommunity,
-                to: "/communaute/nouvelle-question",
-                permission: null,
-            },
-        ],
-    },
-];
-
 onMounted(() => {
     baseCards.map((card) => {
         let tmpCard = {

diff --git a/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBordCard.vue b/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBordCard.vue
@@ -1,13 +1,17 @@
 <template>
     <div
         :id="`card_${cardKey}`"
-        class="p-5 px-30 fr-card col-span-1 shadow-md rounded-sm"
+        class="p-5 !pt-16 fr-card row-span-2 shadow-md rounded-sm !gap-16"
+        :class="{ '!row-span-1': cardActions.length === 1 }"
     >
-        <div class="fr-card__body">
+        <div class="fr-card__body -mb-4">
             <div class="fr-card__content gap-2">
                 <DsfrTile
                     v-for="(action, index) in cardActions"
-                    :class="{ '!bg-blue100': action.mainAction }"
+                    :class="{
+                        '!bg-blue100': action.mainAction,
+                        'hover:!bg-blue200': action.mainAction,
+                    }"
                     :key="index"
                     :id="`card_${cardKey}`"
                     :icon="true"
@@ -35,7 +39,7 @@
             </div>
         </div>
         <div
-            class="flex flex-row gap-2 justify-left p-4 h-16 bg-slate-100 items-center"
+            class="flex flex-row gap-2 justify-left p-4 absolute !h-16 w-full bg-slate-100 items-center border-x border-t"
         >
             <Icon
                 :icon="cardIcon"

diff --git a/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBordGrille.vue b/packages/frontend/webapp/src/components/TableauDeBord/TableauDeBordGrille.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-3 gap-8 justify-around p-2">
+    <div class="grid grid-cols-3 grid-rows-2 gap-8 justify-around p-2">
         <TableauDeBordCard
             v-for="(card, index) in cards"
             :key="index"
@@ -8,6 +8,7 @@
             :cardActions="card.actions"
             :cardIcon="card.icon"
             :cardOptions="card.options || null"
+            class="grid grid-rows-subgrid grid-rows-1"
         />
     </div>
 </template>

diff --git a/packages/frontend/webapp/src/utils/TableauDeBordCardsList.js b/packages/frontend/webapp/src/utils/TableauDeBordCardsList.js
@@ -73,9 +73,10 @@ export default [
         ],
     },
     {
-        name: "Entraide",
-        icon: "comments",
+        name: "Annuaire",
+        icon: "users",
         permission: null,
+        options: { half: true },
         actions: [
             {
                 label: "Rechercher une personne ou une structure",
@@ -85,6 +86,14 @@ export default [
                 to: "/annuaire",
                 permission: null,
             },
+        ],
+    },
+    {
+        name: "Entraide",
+        icon: "comments",
+        permission: null,
+        options: { half: true },
+        actions: [
             {
                 label: "J'ai besoin d'aide",
                 description: "Je veux poser une question à la communauté.",