-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Premier jets des filtres sur le tableau suivi (#85)
* Ajout de filtres (commune, département, phase, prochaine action attendue) sur le tableau de suivi * Binder la fermeture du filtre par recherche * Ajouter une croix pour supprimer un filtre * Correction de couleurs pour qu'elles fonctionnent en mode dark * Travail sur les phases et le filtre des phases * Affichage vide lorsque la phase n'a pas été renseignée * Ajustement des prochaines actions attendues par * renommage FlitreTexte et correction affichage badge prochaine action attendue par * Ajout d'un filtre texte libre * Le filtre texte focus automatiquement l'input à l'ouverture --------- Co-authored-by: David Bruant <[email protected]>
- Loading branch information
1 parent
6762bc1
commit 7dba47b
Showing
7 changed files
with
390 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <script> | ||
| //@ts-check | ||
| import { createEventDispatcher } from "svelte"; | ||
| /** @type {Set<string>}*/ | ||
| export let options | ||
| /** @type {string} */ | ||
| export let titre | ||
| let optionsSélectionnées = new Set(options) | ||
| const dispatch = createEventDispatcher() | ||
| $: optionsAffichées = [...options].map(option => ({option, checked: optionsSélectionnées.has(option)})) | ||
| function rerender() { | ||
| optionsSélectionnées = optionsSélectionnées | ||
| } | ||
| /** | ||
| * | ||
| * @param {string} option | ||
| * @returns | ||
| */ | ||
| function mettreÀJourOption(option) { | ||
| if (optionsSélectionnées.has(option)) { | ||
| optionsSélectionnées.delete(option) | ||
| } else { | ||
| optionsSélectionnées.add(option) | ||
| } | ||
| rerender() | ||
| dispatch("selected-changed", optionsSélectionnées) | ||
| } | ||
| function selectionnerTout(){ | ||
| optionsSélectionnées = new Set(options) | ||
| dispatch("selected-changed", optionsSélectionnées) | ||
| } | ||
| function selectionnerRien(){ | ||
| optionsSélectionnées = new Set() | ||
| dispatch("selected-changed", optionsSélectionnées) | ||
| } | ||
| </script> | ||
|
|
||
| <details> | ||
| <summary class="fr-btn fr-btn--secondary fr-btn--sm"> | ||
| {titre} | ||
| </summary> | ||
|
|
||
| <section class="filtre-options"> | ||
| <button class="fr-btn fr-btn--secondary fr-btn--sm" on:click={selectionnerTout}>Sélectionner tout</button> | ||
| <button class="fr-btn fr-btn--secondary fr-btn--sm" on:click={selectionnerRien}>Sélectionner rien</button> | ||
|
|
||
| <ul> | ||
|
|
||
| {#each optionsAffichées as optionAffichée} | ||
| <li> | ||
| <label> | ||
| <input | ||
| type="checkbox" | ||
| bind:checked={optionAffichée.checked} | ||
| on:input={() => mettreÀJourOption(optionAffichée.option)} | ||
| /> | ||
| {optionAffichée.option} | ||
| </label> | ||
| </li> | ||
| {/each} | ||
| </ul> | ||
| </section> | ||
| </details> | ||
|
|
||
| <style lang="scss"> | ||
| details { | ||
| display: inline; | ||
| } | ||
| .filtre-options { | ||
| margin-top: 0.5rem; | ||
| padding: 1rem; | ||
| background-color: var(--background-contrast-grey); | ||
| border: 1px solid var(--border-default-grey); | ||
| position: absolute; | ||
| z-index: 2; | ||
| ul{ | ||
| list-style: none; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <script> | ||
| //@ts-check | ||
| import { createEventDispatcher } from "svelte"; | ||
| /** @type {string} */ | ||
| export let titre | ||
| $: valeur = "" | ||
| $: isOpen = false | ||
| let inputElement | ||
| $: if(isOpen) inputElement.focus() | ||
| const dispatch = createEventDispatcher() | ||
| function onMettreÀJourValeurSélectionnée(e) { | ||
| e.preventDefault() | ||
| isOpen = false | ||
| dispatch("selected-changed", valeur) | ||
| valeur = "" | ||
| } | ||
| </script> | ||
|
|
||
| <details bind:open={isOpen}> | ||
| <summary class="fr-btn fr-btn--secondary fr-btn--sm"> | ||
| {titre} | ||
| </summary> | ||
|
|
||
| <form on:submit={onMettreÀJourValeurSélectionnée} class="filtre-form"> | ||
| <label class="fr-label" for="text-input-text">{titre}</label> | ||
| <input class="fr-input fr-mb-2v" type="text" bind:value={valeur} bind:this={inputElement}/> | ||
| <button class="fr-btn fr-btn fr-btn--sm" type="submit">Chercher</button> | ||
| </form> | ||
| </details> | ||
|
|
||
| <style lang="scss"> | ||
| details { | ||
| display: inline; | ||
| } | ||
| .filtre-form { | ||
| margin-top: 0.5rem; | ||
| padding: 1rem; | ||
| background-color: var(--background-contrast-grey); | ||
| border: 1px solid var(--border-default-grey); | ||
| position: absolute; | ||
| z-index: 2; | ||
| list-style: none; | ||
| width: 20rem; | ||
| input { | ||
| width: 90%; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.