feat(fusager): hebergement add filter statuts 793 (#693)

Ajout du filtre sur les statuts des hébergements côté FUsager
SocialGouv · Feb 7, 2025 · 044e8c0 · 044e8c0
2 parents 0fe0b0b + 519947a
commit 044e8c0
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/packages/backend/src/services/hebergement/Hebergement.js b/packages/backend/src/services/hebergement/Hebergement.js
@@ -560,6 +560,12 @@ module.exports.getByUserId = async (userId, queryParams) => {
       queryKey: "adresse",
       type: "default",
     },
+    {
+      filterEnabled: true,
+      key: "h.statut_id",
+      queryKey: "statut",
+      type: "default",
+    },
     {
       filterEnabled: true,
       key: "uo.use_id",

diff --git a/packages/frontend-usagers/src/components/hebergements/filters.vue b/packages/frontend-usagers/src/components/hebergements/filters.vue
@@ -26,21 +26,37 @@
         />
       </div>
     </div>
+    <div :class="`${filedsetClass} fr-col-md-4 fr-col-lg-4`">
+      <div class="fr-input-group">
+        <DsfrSelect
+          v-model="statutSync"
+          label="Statut de l'hébergement"
+          name="statut"
+          mode="tags"
+          :options="statusFiltre"
+          @update:model-value="filtersUpdate"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps<{
   nom: string;
   adresse: string;
+  statut: string;
+  statusFiltre: { value: string; text: string }[];
 }>();
 const emits = defineEmits<{
   "update:nom": [string];
   "update:adresse": [string];
+  "update:statut": [string];
   "filters-update": [];
 }>();
 const filedsetClass =
   "fr-fieldset__element fr-fieldset__element--inline fr-col-12 ";
+
 const nomSync = computed({
   get() {
     return props.nom;
@@ -57,5 +73,13 @@ const adresseSync = computed({
     emits("update:adresse", value);
   },
 });
+const statutSync = computed({
+  get() {
+    return props.statut;
+  },
+  set(value) {
+    emits("update:statut", value);
+  },
+});
 const filtersUpdate = () => emits("filters-update");
 </script>
diff --git a/packages/frontend-usagers/src/components/hebergements/liste.vue b/packages/frontend-usagers/src/components/hebergements/liste.vue
@@ -2,6 +2,8 @@
   <HebergementsFilters
     v-model:nom="nom"
     v-model:adresse="adresse"
+    v-model:statut="statut"
+    :status-filtre="status"
     @filters-update="updateData"
   />
   <DsfrDataTableV2Wrapper
@@ -55,13 +57,18 @@
 <script setup>
 import { DsfrDataTableV2Wrapper } from "@vao/shared";
 import HebergementStatusBadge from "./HebergementStatusBadge.vue";
+import hebergements from "../../utils/hebergements";
+
 const hebergementStore = useHebergementStore();
 const departementStore = useDepartementStore();
 const route = useRoute();
 
 const data = computed(() => hebergementStore.hebergements);
 const total = computed(() => hebergementStore.hebergementsTotal);
 const { query } = route;
+
+const status = hebergements.statutsValues;
+
 const titles = [
   {
     key: "nom",
@@ -93,6 +100,7 @@ const sortableTitles = titles.flatMap((title) =>
 );
 const nom = ref(query.nom ?? "");
 const adresse = ref(query.adresse ?? "");
+const statut = ref(query.statut ?? "");
 const limit = ref(parseInt(query.limit, 10) || 10);
 const offset = ref(parseInt(query.offset, 10) || 0);
 const sort = ref(sortableTitles.includes(query.sort) ? query.sort : "");
@@ -106,6 +114,7 @@ const isValidParams = (params) =>
 const getSearchParams = () => ({
   ...(isValidParams(nom.value) ? { nom: nom.value } : {}),
   ...(isValidParams(adresse.value) ? { adresse: adresse.value } : {}),
+  ...(isValidParams(statut.value) ? { statut: statut.value } : {}),
 });
 let timeout = null;
 departementStore.fetch();

diff --git a/packages/frontend-usagers/src/utils/hebergements.js b/packages/frontend-usagers/src/utils/hebergements.js
@@ -1,3 +1,26 @@
+const statutsValues = [
+  {
+    value: "",
+    text: "Tous",
+    label: "",
+  },
+  {
+    value: 1,
+    text: "Brouillon",
+    label: "brouillon",
+  },
+  {
+    value: 2,
+    text: "Actif",
+    label: "actif",
+  },
+  {
+    value: 3,
+    text: "Désactivé",
+    label: "desactive",
+  },
+];
+
 const statuts = {
   ACTIF: "actif",
   BROUILLON: "brouillon",
@@ -6,4 +29,5 @@ const statuts = {
 
 export default {
   statuts,
+  statutsValues,
 };