Compare revisions

cf231ac5 · cf231ac5 · cf231ac5 · cf231ac5 · cf231ac5 · cf231ac5
--- a/packages/common/src/strings.test.ts
+++ b/packages/common/src/strings.test.ts
@@ -29,6 +29,10 @@ test('levenshtein', () => {
  expect(levenshtein('port', 'or')).toBe(2)
  expect(levenshtein('or', 'port')).toBe(2)
  expect(levenshtein('', 'port')).toBe(4)
+  expect(levenshtein('chien', 'chine')).toBe(2)
+  expect(levenshtein('abcd', 'xyzw')).toBe(4)
+  expect(levenshtein('chat', 'cha t')).toBe(1)
+  expect(levenshtein('p@ssw0rd!', 'password!')).toBe(2)
 })

 test('slugify', () => {

--- a/packages/common/src/territoires.test.ts
+++ b/packages/common/src/territoires.test.ts
@@ -8,7 +8,6 @@ describe('territoiresFind', () => {
        {
          [toCommuneId('72500')]: 'Flée',
          [toCommuneId('72200')]: 'Montval-sur-loir',
-          [toCommuneId('37000')]: 'Tours',
        },
        [
          { id: toCommuneId('72500'), surface: 100000 },
@@ -35,7 +34,7 @@ describe('territoiresFind', () => {
            "surface": 0.105,
          },
          {
-            "nom": "Tours",
+            "nom": "",
            "surface": 0.1,
          },
        ],

--- a/packages/common/src/titres.test.ts
+++ b/packages/common/src/titres.test.ts
 import { describe, expect, test } from 'vitest'
-import { TitrePropTitreEtapeFindDemarcheEtape, getMostRecentValuePropFromEtapeFondamentaleValide } from './titres'
+import { TitrePropTitreEtapeFindDemarcheEtape, createAutomaticallyEtapeWhenCreatingTitre, getMostRecentValuePropFromEtapeFondamentaleValide } from './titres'
 import { toCaminoDate } from './date'
 import { entrepriseIdValidator } from './entreprise'
 import { ETAPE_IS_BROUILLON, ETAPE_IS_NOT_BROUILLON } from './etape'
+import { testBlankUser } from './tests-utils'
 describe('getMostRecentValuePropFromEtapeFondamentaleValide', () => {
  test("retourne le titulaire de la demande même si elle est en brouillon, si elle est l'unique étape", () => {
    const asl: TitrePropTitreEtapeFindDemarcheEtape = {
@@ -75,6 +76,10 @@ describe('getMostRecentValuePropFromEtapeFondamentaleValide', () => {
          etapes: [dpu, dex],
          ordre: 1,
        },
+        {
+          etapes: [],
+          ordre: 2,
+        },
      ])
    ).toStrictEqual(dpu.fondamentale.titulaireIds)

@@ -135,3 +140,8 @@ describe('getMostRecentValuePropFromEtapeFondamentaleValide', () => {
    ).toStrictEqual(240)
  })
 })
+
+test('createAutomaticallyEtapeWhenCreatingTitre', () => {
+  expect(createAutomaticallyEtapeWhenCreatingTitre({ ...testBlankUser, role: 'entreprise', entrepriseIds: [entrepriseIdValidator.parse('id')] })).toBe(true)
+  expect(createAutomaticallyEtapeWhenCreatingTitre({ ...testBlankUser, role: 'super' })).toBe(false)
+})
--- a/packages/common/src/typescript-tools.ts
+++ b/packages/common/src/typescript-tools.ts
@@ -32,6 +32,8 @@ export function isNullOrUndefinedOrEmpty(value: string | DeepReadonly<any[]> | n
    return value.length === 0
  } else if (typeof value === 'string') {
    return value.trim() === ''
+    // unreachable code
+    /* v8 ignore next 4 */
  }

  return false
@@ -118,6 +120,7 @@ export const map = <T, U>(array: DeepReadonly<NonEmptyArray<T>>, transform: (ite
  return [transform(first), ...rest.map(transform)]
 }

+/* v8 ignore next 2 */
 export const isTrue = <T extends true>(_t: T): void => {}
 export const isFalse = <T extends false>(_t: T): void => {}


--- a/packages/common/src/zod-tools.ts
+++ b/packages/common/src/zod-tools.ts
@@ -38,6 +38,7 @@ export type CaminoError<T extends string> = {
 const fieldNameFromPath = (path: (string | number)[]): string | undefined => {
  const fieldName = path[path.length - 1]

+  /* v8 ignore next 3 */
  if (typeof fieldName === 'number') {
    return fieldNameFromPath(path.slice(0, path.length - 1))
  }
@@ -99,6 +100,8 @@ export const translateIssue = (issue: ZodIssue): string => {
          message = `${message} doit commencer par "${issue.validation.startsWith}".`
        } else if ('endsWith' in issue.validation) {
          message = `${message} doit finir par "${issue.validation.endsWith}".`
+          // unreachable code
+          /* v8 ignore next 3 */
        } else {
          exhaustiveCheck(issue.validation)
        }
@@ -114,6 +117,7 @@ export const translateIssue = (issue: ZodIssue): string => {
      } else {
        message = 'La valeur'
      }
+      /* v8 ignore next 20 */
      if (issue.type === 'array') message = `${message} doit être un tableau avec ${issue.exact === true ? 'exactement' : issue.inclusive ? 'au moins' : 'plus de'} ${issue.minimum} élément(s).`
      else if (issue.type === 'string')
        message = `${message} doit être une chaine de caractère avec ${issue.exact === true ? 'exactement' : issue.inclusive ? 'au moins' : 'plus de'} ${issue.minimum} caractère(s).`

--- a/packages/common/vitest.config.ts
+++ b/packages/common/vitest.config.ts
@@ -7,15 +7,7 @@ export default defineConfig({
      provider: 'v8',
      enabled: true,
      extension: '.ts',
-      thresholds: {
-        // the endgame is to put thresholds at 100 and never touch it again :)
-        autoUpdate: false,
-        branches: 92.10,
-        functions: 85.88,
-        lines: 97.3,
-        statements: 97.3,
-        perFile: false,
-      },
+      thresholds: { 100: true }
    },
  },
 })
--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
@@ -799,10 +799,7 @@
              <!---->
              <!---->
              <!---->
-              <div>
-                <h5>Types d'étapes incluses</h5>
-                <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-              </div>
+              <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
            </div>
          </div>
        </li>
@@ -812,10 +809,7 @@
              <!---->
              <!---->
              <!---->
-              <div>
-                <h5>Types d'étapes exclues</h5>
-                <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-              </div>
+              <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
            </div>
          </div>
        </li>

--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
@@ -1098,10 +1098,7 @@
              <!---->
              <!---->
              <!---->
-              <div>
-                <h5>Types d'étapes incluses</h5>
-                <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-              </div>
+              <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
            </div>
          </div>
        </li>
@@ -1111,10 +1108,7 @@
              <!---->
              <!---->
              <!---->
-              <div>
-                <h5>Types d'étapes exclues</h5>
-                <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-              </div>
+              <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
            </div>
          </div>
        </li>

--- a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_DefaultNoValues.html
+++ b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_DefaultNoValues.html
-<div>
-  <h5>Types d'étapes exclues</h5>
-  <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-</div>
\ No newline at end of file
+<div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
\ No newline at end of file
--- a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html
+++ b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html
-<div>
-  <h5>Types d'étapes exclues</h5>
-  <hr class="mb-s">
-  <div>
-    <div class="flex mb-s" style="align-items: center;">
-      <div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1 p-s mr-s">
-        <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="demande"></div>
+<div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
+  <div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
+    <div class="flex" style="align-items: center;">
+      <div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1">
+        <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Demande"></div>
        <!---->
-      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
+      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
        <!---->
      </button>
    </div>
-    <div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Statut</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4"><select class="p-s mr-s">
-            <option value="">–</option>
-            <option selected="" value="fai">fait</option>
-          </select></div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Après le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-01-01">
-            <!---->
-          </div>
-        </div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Avant le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_670" id="input_670" type="date" value="2022-03-03">
-            <!---->
-          </div>
-        </div>
-      </div>
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut
+        <!---->
+      </label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" value="fai">
+        <option selected="" value="fai">fait</option>
+        <option disabled="" hidden="" value="">Selectionnez une option</option>
+      </select></div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Après le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_670" id="input_670" type="date" value="2022-01-01">
+      <!---->
+    </div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Avant le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_74" id="input_74" type="date" value="2022-03-03">
+      <!---->
    </div>
-    <hr class="mb-s">
  </div>
-  <div>
-    <div class="flex mb-s" style="align-items: center;">
-      <div id="select-etape-type-1_wrapper" class="_typeahead_8eddf1 p-s mr-s">
-        <div class="flex"><input id="select-etape-type-1" type="text" name="select-etape-type-1" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="dépôt de la demande"></div>
+  <div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
+    <div class="flex" style="align-items: center;">
+      <div id="select-etape-type-1_wrapper" class="_typeahead_8eddf1">
+        <div class="flex"><input id="select-etape-type-1" type="text" name="select-etape-type-1" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Dépôt de la demande"></div>
        <!---->
-      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
+      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
        <!---->
      </button>
    </div>
-    <div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Statut</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4"><select class="p-s mr-s">
-            <option value="">–</option>
-            <option selected="" value="fai">fait</option>
-          </select></div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Après le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_74" id="input_74" type="date" value="2024-01-01">
-            <!---->
-          </div>
-        </div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Avant le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_878" id="input_878" type="date" value="2025-03-03">
-            <!---->
-          </div>
-        </div>
-      </div>
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_878">Statut
+        <!---->
+      </label><select class="fr-select" id="select_878" aria-label="Statut" name="select_878" value="fai">
+        <option selected="" value="fai">fait</option>
+        <option disabled="" hidden="" value="">Selectionnez une option</option>
+      </select></div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Après le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_967" id="input_967" type="date" value="2024-01-01">
+      <!---->
+    </div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Avant le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_25" id="input_25" type="date" value="2025-03-03">
+      <!---->
    </div>
-    <hr class="mb-s">
  </div><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
 </div>
\ No newline at end of file
--- a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html
+++ b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html
-<div>
-  <h5>Types d'étapes exclues</h5>
-  <hr class="mb-s">
-  <div>
-    <div class="flex mb-s" style="align-items: center;">
-      <div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1 p-s mr-s">
-        <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="demande"></div>
+<div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
+  <div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
+    <div class="flex" style="align-items: center;">
+      <div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1">
+        <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Demande"></div>
        <!---->
-      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
+      </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
        <!---->
      </button>
    </div>
-    <div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Statut</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4"><select class="p-s mr-s">
-            <option value="">–</option>
-            <option selected="" value="fai">fait</option>
-          </select></div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Après le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" type="date">
-            <!---->
-          </div>
-        </div>
-      </div>
-      <div class="blobs mb-s">
-        <div class="blob-1-4">
-          <h5 class="mb-0">Avant le</h5>
-          <p class="h6 italic mb-0">Optionnel</p>
-        </div>
-        <div class="blob-3-4">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">
-              <!---->
-              <!---->
-            </label><input class="fr-input" name="input_670" id="input_670" type="date">
-            <!---->
-          </div>
-        </div>
-      </div>
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut
+        <!---->
+      </label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" value="fai">
+        <option selected="" value="fai">fait</option>
+        <option disabled="" hidden="" value="">Selectionnez une option</option>
+      </select></div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Après le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_670" id="input_670" type="date">
+      <!---->
+    </div>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Avant le
+        <!---->
+        <!---->
+      </label><input class="fr-input" name="input_74" id="input_74" type="date">
+      <!---->
    </div>
-    <hr class="mb-s">
  </div><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
 </div>
\ No newline at end of file
--- a/packages/ui/src/components/demarches/filtres-etapes.tsx
+++ b/packages/ui/src/components/demarches/filtres-etapes.tsx
@@ -3,13 +3,13 @@ import { getEtapesStatuts } from 'camino-common/src/static/etapesTypesEtapesStat
 import { CaminoDate } from 'camino-common/src/date'
 import { HTMLAttributes, computed, defineComponent, ref, watch } from 'vue'
 import { EtapeCaminoFiltres } from '../_ui/filters/camino-filtres'
-import { caminoFiltres } from 'camino-common/src/filters'
-import { EtapeStatutId, isStatut } from 'camino-common/src/static/etapesStatuts'
-import { isEventWithTarget } from '@/utils/vue-tsx-utils'
-import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
+import { EtapeStatutId } from 'camino-common/src/static/etapesStatuts'
+import { isNotNullNorUndefined, map } from 'camino-common/src/typescript-tools'
 import { TypeAheadSingle } from '../_ui/typeahead-single'
 import { DsfrInput } from '../_ui/dsfr-input'
 import { DsfrButtonIcon } from '../_ui/dsfr-button'
+import { capitalize } from 'camino-common/src/strings'
+import { DsfrSelect } from '../_ui/dsfr-select'

 export type FilterEtapeValue = {
  typeId: EtapeTypeId | ''
@@ -33,7 +33,6 @@ export const FiltresEtapes = defineComponent<Props>(props => {
    { deep: true }
  )
  const clonedValues = ref<FilterEtapeValue[]>(props.initialValues.map(value => ({ ...value })))
-  const fullFilter = computed(() => caminoFiltres[props.filter])
  const dateDebutChanged = (n: number) => (date: CaminoDate | null) => {
    if (date !== clonedValues.value[n].dateDebut) {
      clonedValues.value[n].dateDebut = date
@@ -62,28 +61,17 @@ export const FiltresEtapes = defineComponent<Props>(props => {
    props.valuesSelected(clonedValues.value)
  }

-  const statutValueSelected = (n: number, event: Event) => {
-    if (isEventWithTarget(event)) {
-      if (event.target.value === '') {
-        delete clonedValues.value[n].statutId
-      } else if (isStatut(event.target.value)) {
-        clonedValues.value[n].statutId = event.target.value
-      }
-      props.valuesSelected(clonedValues.value)
-    }
+  const statutValueSelected = (n: number) => (newStatut: null | EtapeStatutId) => {
+    clonedValues.value[n].statutId = newStatut ?? undefined
+    props.valuesSelected(clonedValues.value)
  }

-  // TODO 2023-07-13 mettre un composant typeahead pour les types d'étapes plutôt qu'un select de l'enfer
  return () => (
-    <div>
-      <h5>{fullFilter.value.name}</h5>
-      <hr class="mb-s" />
-
+    <div style={{ display: 'flex', flexDirection: 'column', fontWeight: 'normal', gap: '1rem' }}>
      {clonedValues.value.map((value, n) => (
-        <div key={n}>
-          <div class="flex mb-s" style={{ alignItems: 'center' }}>
+        <div key={n} class="fr-p-2w fr-tile--shadow" style={{ display: 'flex', flexDirection: 'column', fontWeight: 'normal', gap: '1rem' }}>
+          <div class="flex" style={{ alignItems: 'center' }}>
            <EtapeTypeSearch
-              class="p-s mr-s"
              index={n}
              initialEtapeTypeId={value.typeId !== '' ? value.typeId : null}
              selectedEtapeType={etapeType => {
@@ -91,48 +79,21 @@ export const FiltresEtapes = defineComponent<Props>(props => {
                valueReset(n)
              }}
            />
-            <DsfrButtonIcon onClick={() => valueRemove(n)} icon="fr-icon-delete-bin-line" title="Supprime la valeur" buttonType="tertiary" />
+            <DsfrButtonIcon class="fr-ml-1w" onClick={() => valueRemove(n)} icon="fr-icon-delete-bin-line" title="Supprime la valeur" buttonType="tertiary" />
          </div>
          {value.typeId ? (
-            <div>
-              <div class="blobs mb-s">
-                <div class="blob-1-4">
-                  <h5 class="mb-0">Statut</h5>
-                  <p class="h6 italic mb-0">Optionnel</p>
-                </div>
-                <div class="blob-3-4">
-                  <select class="p-s mr-s" onChange={event => statutValueSelected(n, event)}>
-                    <option value="">–</option>
-                    {getEtapesStatuts(value.typeId).map(statut => (
-                      <option key={statut.id} value={statut.id} selected={value.statutId === statut.id}>
-                        {statut.nom}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-              <div class="blobs mb-s">
-                <div class="blob-1-4">
-                  <h5 class="mb-0">Après le</h5>
-                  <p class="h6 italic mb-0">Optionnel</p>
-                </div>
-                <div class="blob-3-4">
-                  <DsfrInput initialValue={value.dateDebut} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateDebutChanged(n)} />
-                </div>
-              </div>
-              <div class="blobs mb-s">
-                <div class="blob-1-4">
-                  <h5 class="mb-0">Avant le</h5>
-                  <p class="h6 italic mb-0">Optionnel</p>
-                </div>
-                <div class="blob-3-4">
-                  <DsfrInput initialValue={value.dateFin} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateFinChanged(n)} />
-                </div>
-              </div>
-            </div>
+            <>
+              <DsfrSelect
+                class="fr-mb-0"
+                initialValue={value.statutId ?? null}
+                legend={{ main: 'Statut' }}
+                items={map(getEtapesStatuts(value.typeId), ({ id, nom }) => ({ id, label: nom }))}
+                valueChanged={statutValueSelected(n)}
+              />
+              <DsfrInput initialValue={value.dateDebut} legend={{ main: 'Après le' }} type={{ type: 'date' }} valueChanged={dateDebutChanged(n)} />
+              <DsfrInput initialValue={value.dateFin} legend={{ main: 'Avant le' }} type={{ type: 'date' }} valueChanged={dateFinChanged(n)} />
+            </>
          ) : null}
-
-          <hr class="mb-s" />
        </div>
      ))}

@@ -181,7 +142,7 @@ const EtapeTypeSearch = defineComponent<EtapeTypeSearchProps>(props => {
        items: items.value,
        minInputLength: 0,
        itemKey: 'id',
-        itemChipLabel: item => item.nom,
+        itemChipLabel: item => capitalize(item.nom),
        onSelectItem,
        onInput: onInputSearchEtapeType,
      }}

--- a/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html
@@ -466,10 +466,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes incluses</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>
@@ -479,10 +476,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes exclues</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>

--- a/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
@@ -466,10 +466,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes incluses</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>
@@ -479,10 +476,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes exclues</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>

--- a/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html
@@ -376,10 +376,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes incluses</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>
@@ -389,10 +386,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes exclues</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>

--- a/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
@@ -466,10 +466,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes incluses</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>
@@ -479,10 +476,7 @@
                    <!---->
                    <!---->
                    <!---->
-                    <div>
-                      <h5>Types d'étapes exclues</h5>
-                      <hr class="mb-s"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
-                    </div>
+                    <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button></div>
                  </div>
                </div>
              </li>
No results found