feat(DsfrMultiSelect): replace vueMultiSelect by DsfrMultiSelect (#550)

SocialGouv · Oct 18, 2024 · 2ed8712 · 2ed8712
2 parents 84c3de0 + a98d4da
commit 2ed8712
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 249 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -250,7 +250,7 @@ fileignoreconfig:
 - filename: packages/shared/src/components/Chat.vue
   checksum: f2dbbf72bf098c7abd2c3aee230d220f5a5a106952883c0e116eb49f4f9d4db7
 - filename: packages/shared/src/components/DsfrMultiSelect.vue
-  checksum: e635a591f2e2247088bab3a7d25548f251da65330fecaed9ce886fd3dd24fb3e
+  checksum: 90a7d72295ca0fb55d312f9608cbbe5475183936d21286952357b3961d1bd6fb
 - filename: packages/shared/src/components/DsfrTabsV2.vue
   checksum: 960c18a7ad76a91c74e5535240ae6ac4f87bb8aff10155096cd35afe5609cff8
 - filename: packages/shared/src/components/PasswordInput.vue

diff --git a/packages/frontend-bo/src/components/demandes-sejour/liste.vue b/packages/frontend-bo/src/components/demandes-sejour/liste.vue
@@ -96,26 +96,14 @@
               v-if="props.display === displayType.Organisme"
               class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
             >
-              <div class="fr-input-group">
-                <Multiselect
-                  :model-value="searchState.statuts"
-                  :hide-selected="true"
-                  :searchable="true"
-                  :close-on-select="false"
-                  mode="tags"
-                  name="statut"
-                  :options="status"
-                  @update:model-value="onStatutSelect"
-                >
-                  <template #option="{ option, isPointed }">
-                    <MultiSelectOption
-                      :label="`${option.label}`"
-                      :is-pointed="isPointed(option)"
-                    />
-                  </template>
-                  <template #no-result> Pas de résultat</template>
-                </Multiselect>
-              </div>
+              <dsfr-multi-select
+                v-model="searchState.statuts"
+                label="Statut"
+                search
+                select-all
+                id-key="value"
+                :options="status"
+              />
             </div>
             <div
               v-if="!props.organisme && props.display === displayType.Organisme"
@@ -181,7 +169,7 @@
 <script setup>
 import {
   CardsNumber,
-  MultiSelectOption,
+  DsfrMultiSelect,
   TableWithBackendPagination,
   ValidationModal,
   MessageHover,
@@ -190,7 +178,6 @@ import {
 import dayjs from "dayjs";
 import DemandeStatusBadge from "~/components/demandes-sejour/DemandeStatusBadge.vue";
 import Declaration from "~/components/demandes-sejour/Declaration.vue";
-import Multiselect from "@vueform/multiselect";
 import "@vueform/multiselect/themes/default.css";
 import { defineProps } from "vue";
 
@@ -250,7 +237,7 @@ const searchState = reactive({
     ? route.query.statuts
         .split(",")
         .filter((statut) => Object.values(status.value).includes(statut))
-    : null,
+    : [],
   action: parseBoolean(route.query.action),
   message: props.display === displayType.Messagerie,
 });
@@ -349,14 +336,6 @@ watch(
   { immediate: true },
 );
 
-const onStatutSelect = (value) => {
-  if (value.length) {
-    searchState.statuts = value;
-  } else {
-    searchState.statuts = null;
-  }
-};
-
 const headersOrganisme = [
   {
     column: "idFonctionnelle",

diff --git a/packages/frontend-usagers/src/components/demande-sejour/liste.vue b/packages/frontend-usagers/src/components/demande-sejour/liste.vue
@@ -22,150 +22,77 @@ defaultSort<!-- eslint-disable vue/multi-word-component-names -->
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label">ID</label>
-                  <Multiselect
-                    :model-value="search.declarationId"
-                    name="id"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="idOptions"
-                    @update:model-value="onUpdateId"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="option.label.toString()"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.declarationId"
+                  label="ID"
+                  search
+                  select-all
+                  :options="idOptions"
+                  @update:model-value="onUpdateId"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> N° enregistrement </label>
-                  <Multiselect
-                    :model-value="search.idFonctionnelle"
-                    name="idFonctionnelle"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="idFonctionnellesOptions"
-                    @update:model-value="onUpdateIdFonctionnelle"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.idFonctionnelle"
+                  label="N° enregistrement"
+                  search
+                  select-all
+                  :options="idFonctionnellesOptions"
+                  @update:model-value="onUpdateIdFonctionnelle"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label">SIRET déclarant</label>
-                  <Multiselect
-                    :model-value="search.siret"
-                    name="siret"
-                    mode="tags"
-                    :searchable="true"
-                    :close-on-select="false"
-                    :options="siretOptions"
-                    @update:model-value="onUpdateSiret"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.siret"
+                  label="SIRET déclarant"
+                  search
+                  select-all
+                  :options="siretOptions"
+                  @update:model-value="onUpdateSiret"
+                />
               </div>
 
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Département d'instruction </label>
-                  <Multiselect
-                    :model-value="search.departementSuivi"
-                    :searchable="true"
-                    :close-on-select="false"
-                    value-prop="value"
-                    label="label"
-                    mode="tags"
-                    :options="departementOptions"
-                    @update:model-value="onUpdateDepartement"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="option.label"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.departementSuivi"
+                  labe="Département d'instruction"
+                  search
+                  select-all
+                  id-key="value"
+                  :options="departementOptions"
+                  @update:model-value="onUpdateDepartement"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Statut</label>
-                  <Multiselect
-                    :model-value="search.statut"
-                    :hide-selected="true"
-                    :searchable="true"
-                    :close-on-select="false"
-                    mode="tags"
-                    name="statut"
-                    :options="statutOptions"
-                    @update:model-value="onUpdateStatut"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.statut"
+                  label="Statut"
+                  search
+                  select-all
+                  id-key="value"
+                  :options="statutOptions"
+                  @update:model-value="onUpdateStatut"
+                />
               </div>
               <div
                 class="fr-fieldset__element fr-fieldset__element--inline fr-col-12 fr-col-md-3 fr-col-lg-2"
               >
-                <div class="fr-input-group">
-                  <label class="fr-label"> Saison</label>
-                  <Multiselect
-                    :model-value="search.periode"
-                    :hide-selected="true"
-                    :searchable="false"
-                    :close-on-select="false"
-                    mode="tags"
-                    name="saison"
-                    :options="saisonOptions"
-                    @update:model-value="onUpdateSaison"
-                  >
-                    <template #option="{ option, isPointed }">
-                      <MultiSelectOption
-                        :label="`${option.label}`"
-                        :is-pointed="isPointed(option)"
-                      />
-                    </template>
-                    <template #no-result> Pas de résultat</template>
-                  </Multiselect>
-                </div>
+                <dsfr-multi-select
+                  :model-value="search.periode"
+                  label="Saison"
+                  search
+                  select-all
+                  :options="saisonOptions"
+                  @update:model-value="onUpdateSaison"
+                />
               </div>
             </div>
           </form>
@@ -218,12 +145,11 @@ defaultSort<!-- eslint-disable vue/multi-word-component-names -->
 import {
   MessageEtat,
   MessageHover,
-  MultiSelectOption,
   TableFull,
   ValidationModal,
+  DsfrMultiSelect,
 } from "@vao/shared";
 import dayjs from "dayjs";
-import Multiselect from "@vueform/multiselect";
 import "@vueform/multiselect/themes/default.css";
 import { useDepartementStore } from "~/stores/referentiels";
 import { useDemandeSejourStore } from "~/stores/demande-sejour";
@@ -305,24 +231,24 @@ const search = reactive({
   declarationId:
     route.query.declarationId
       ?.split(",")
-      ?.flatMap((id) => (isNaN(id) ? [] : [parseInt(id, 10)])) ?? null,
-  idFonctionnelle: route.query.idFonctionnelle?.split(",") ?? null,
-  siret: route.query.siret?.split(",") ?? null,
+      ?.flatMap((id) => (isNaN(id) ? [] : [parseInt(id, 10)])) ?? [],
+  idFonctionnelle: route.query.idFonctionnelle?.split(",") ?? [],
+  siret: route.query.siret?.split(",") ?? [],
   statut: route.query.statut
     ? route.query.statut
         .split(",")
         .filter((statut) =>
           Object.values(DeclarationSejour.statuts).includes(statut),
         )
-    : null,
+    : [],
   departementSuivi: route.query.departementSuivi
     ? route.query.departementSuivi.split(",")
-    : null,
+    : [],
   periode: route.query.periode
     ? route.query.periode
         .split(",")
         .filter((periode) => saisons.includes(periode))
-    : null,
+    : [],
 });
 
 const demandeSejourStore = useDemandeSejourStore();
@@ -760,7 +686,7 @@ async function copyDS(dsId) {
     log.d(`demande de séjour ${response.declarationId} dupliquée`);
   } catch (error) {
     log.w("Copie de la declaration de sejour : ", { error });
-    return toaster.error({
+    toaster.error({
       titleTag: "h2",
       description: `Une erreur est survenue lors de la copie de la déclaration de séjour`,
     });
@@ -784,12 +710,13 @@ async function deleteDS(dsId) {
       });
     } else {
       log.w("Erreur durant la suppression de la declaration de sejour");
-      return toaster.error({
+      toaster.error({
         titleTag: "h2",
         description: `Une erreur est survenue lors de la suppression de la déclaration de séjour`,
       });
     }
   } catch (error) {
+    log.w("Erreur durant la suppression de la declaration de sejour : ");
     toaster.error({
       titleTag: "h2",
       description: `Une erreur est survenue lors de la suppression de la déclaration de séjour`,
@@ -815,7 +742,7 @@ async function cancelDS(dsId) {
       });
     } else {
       log.w("Erreur durant l'annulation de la declaration de sejour");
-      return toaster.error({
+      toaster.error({
         titleTag: "h2",
         description: `Une erreur est survenue lors de l'annulation' de la déclaration de séjour`,
       });