feat(bo-ds): improve ds list

SocialGouv · Oct 9, 2024 · 3cd0ba6 · 3cd0ba6
1 parent 18f85c9
commit 3cd0ba6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/packages/frontend-bo/src/components/demandes-sejour/liste.vue b/packages/frontend-bo/src/components/demandes-sejour/liste.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="fr-container">
     <h1 v-if="props.display === displayType.Organisme" class="header">
-      Liste des séjours déclarés
-      {{ props.organisme ? "" : `(${sejourStore.stats?.global})` }}
+      Déclarations à Traiter ({{
+        (sejourStore.stats?.transmis ?? 0) +
+        (sejourStore.stats?.enCours ?? 0) +
+        (sejourStore.stats?.transmis8J ?? 0)
+      }})
     </h1>
     <h1 v-else class="header">Liste des messages par déclaration</h1>
     <div class="fr-grid-row">
@@ -13,14 +16,23 @@
             {
               title: 'Déclarations transmises à traiter',
               value: sejourStore.stats?.transmis || 0,
+              onClick: () =>
+                onStatutSelect([demandesSejours.statuts.TRANSMISE]),
             },
             {
               title: 'Déclarations en cours de traitement',
               value: sejourStore.stats?.enCours || 0,
+              onClick: () =>
+                onStatutSelect([
+                  demandesSejours.statuts.EN_COURS,
+                  demandesSejours.statuts.EN_COURS_8J,
+                ]),
             },
             {
               title: 'Déclarations 8 jours à traiter',
               value: sejourStore.stats?.transmis8J || 0,
+              onClick: () =>
+                onStatutSelect([demandesSejours.statuts.TRANSMISE_8J]),
             },
           ]"
         />
@@ -47,6 +59,10 @@
         />
       </div>
       <div class="fr-col-12">
+        <h1 v-if="props.display === displayType.Organisme" class="header">
+          Liste des déclarations reçues
+          {{ props.organisme ? "" : `(${sejourStore.stats?.global})` }}
+        </h1>
         <form>
           <div class="fr-fieldset">
             <div
@@ -181,11 +197,11 @@
 <script setup>
 import {
   CardsNumber,
+  MessageEtat,
+  MessageHover,
   MultiSelectOption,
   TableWithBackendPagination,
   ValidationModal,
-  MessageHover,
-  MessageEtat,
 } from "@vao/shared";
 import dayjs from "dayjs";
 import DemandeStatusBadge from "~/components/demandes-sejour/DemandeStatusBadge.vue";

diff --git a/packages/shared/src/components/CardNumber.vue b/packages/shared/src/components/CardNumber.vue
@@ -4,7 +4,11 @@
     :to="redirect"
     class="card-number fr-p-2w"
     :title="htmlTitle"
-    :class="{ 'card-number--has-hover-effect': redirect }"
+    :class="{
+      'card-number--has-hover-effect': redirect || onClick,
+      'has-cursor': onClick,
+    }"
+    @click="onClick"
   >
     <div class="card-number__title">
       {{ title }}
@@ -17,16 +21,19 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+
 const props = withDefaults(
   defineProps<{
     title: string;
     value: number;
     redirect?: string;
     htmlTitle?: string;
+    onClick?: () => void;
   }>(),
   {
     redirect: "",
     htmlTitle: "",
+    onClick: null,
   },
 );
 
@@ -40,12 +47,14 @@ const wrapper = computed(() => (props.redirect ? "router-link" : "div"));
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 10rem;
+  height: 7rem;
   flex: 1;
   background-image: none;
+
   &--has-hover-effect:hover {
     background-color: var(--blue-france-sun-113-625-hover) !important;
   }
+
   &__title {
     font-size: 1.5rem;
   }
@@ -57,4 +66,8 @@ const wrapper = computed(() => (props.redirect ? "router-link" : "div"));
     font-weight: 800;
   }
 }
+
+.has-cursor {
+  cursor: pointer;
+}
 </style>
diff --git a/packages/shared/src/components/CardsNumber.vue b/packages/shared/src/components/CardsNumber.vue
@@ -7,6 +7,7 @@
       :value="v.value"
       :redirect="v.redirect"
       :html-title="v.htmlTitle"
+      :on-click="v.onClick"
     />
   </div>
 </template>
@@ -20,6 +21,7 @@ defineProps<{
     value: number;
     redirect?: string;
     htmlTitle?: string;
+    onClick?: () => void;
   }>;
 }>();
 </script>