feat(bo-ds): improve ds list

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">
@@ -11,16 +14,25 @@
           v-if="!props.organisme && props.display === displayType.Organisme"
           :values="[
             {
-              title: 'Déclarations transmises à traiter',
+              title: 'Déclarations reçues à 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
@@ -123,11 +139,15 @@
             >
               <div class="fr-input-group">
                 <DsfrSelect
-                  v-model="needAction"
-                  label="Filtrer sur les séjours nécessitant une action"
+                  label="Actions à faire"
                   name="action"
                   mode="tags"
-                  :options="['Oui', 'Non']"
+                  :options="[
+                    { value: 'ALL', text: 'Toutes les déclarations' },
+                    { value: 'A_TRAITER', text: 'Déclarations à traiter' },
+                    { value: 'EN_ATTENTE', text: 'Déclarations en attente' },
+                  ]"
+                  @update:model-value="onSelectAction($event)"
                 />
               </div>
             </div>
@@ -151,6 +171,9 @@
         </form>
       </div>
     </div>
+    <span class="number-of-ds"
+      >{{ sejourStore.total }} déclarations affichées
+    </span>
     <TableWithBackendPagination
       :headers="headers"
       :data="sejourStore.demandes"
@@ -181,11 +204,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";
@@ -222,7 +245,6 @@ const limitState = ref(defaultLimit);
 
 const route = useRoute();
 
-const parseBoolean = (value) => value === "true";
 const displayType = { Messagerie: "Messagerie", Organisme: "Organisme" };
 
 const status = computed(() => [
@@ -251,7 +273,6 @@ const searchState = reactive({
         .split(",")
         .filter((statut) => Object.values(status.value).includes(statut))
     : null,
-  action: parseBoolean(route.query.action),
   message: props.display === displayType.Messagerie,
 });
 
@@ -261,14 +282,27 @@ watch(
   { immediate: true },
 );
 
-const needAction = computed({
-  get() {
-    return searchState.action ? "Oui" : "Non";
-  },
-  set(value) {
-    searchState.action = value === "Oui" ? true : false;
-  },
-});
+const onSelectAction = (value) => {
+  switch (value) {
+    case "A_TRAITER":
+      onStatutSelect([
+        demandesSejours.statuts.TRANSMISE,
+        demandesSejours.statuts.TRANSMISE_8J,
+        demandesSejours.statuts.EN_COURS,
+        demandesSejours.statuts.EN_COURS_8J,
+      ]);
+      break;
+    case "EN_ATTENTE":
+      onStatutSelect([
+        demandesSejours.statuts.A_MODIFIER,
+        demandesSejours.statuts.A_MODIFIER_8J,
+        demandesSejours.statuts.ATTENTE_8_JOUR,
+      ]);
+      break;
+    default:
+      searchState.statuts = null;
+  }
+};
 
 const searchParams = computed(() =>
   Object.entries(searchState).reduce((acc, [key, value]) => {
@@ -542,4 +576,10 @@ onMounted(async () => {
 .header {
   padding: 1em 0em;
 }
+
+.number-of-ds {
+  font-weight: bold;
+  font-style: italic;
+  font-size: 1.25rem;
+}
 </style>

packages/frontend-bo/src/pages/index.vue

@@ -36,7 +36,7 @@ const formatHtmlTitle = (elements) =>
 
 const topCards = computed(() => [
   {
-    title: "Déclarations transmises à traiter",
+    title: "Déclarations reçues à traiter",
     value: stats.value?.transmis + stats.value?.enCours || 0,
     redirect: `/sejours?statuts=${demandesSejours.statuts.TRANSMISE},${demandesSejours.statuts.EN_COURS}`,
     htmlTitle: formatHtmlTitle([

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>

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>