feat: add Académie filter

proto-module-actu-react
Jalil Arfaoui 2023-02-07 01:30:49 +01:00
parent 96b1ca6c49
commit 7f18d5a5f6
3 changed files with 28 additions and 0 deletions

View File

@ -0,0 +1,23 @@
import {Select} from "@mantine/core";
import {IconBuilding} from "@tabler/icons-react";
import React from "react";
import {Resistant} from "../../Resistant";
interface Props {
resistants: Resistant[]
onChange: (value: string) => void
}
export const FiltreAcademie = ({resistants, onChange}: Props) =>
<Select
placeholder="Filtrer par académie"
onChange={onChange}
clearable
searchable
nothingFound="Aucun résistant ici"
icon={<IconBuilding/>}
data={[...new Set(resistants.map(r => r.academie))]
.filter(Boolean)
.sort()
.map(a => ({label: a, value: a}))
}
/>

View File

@ -17,6 +17,7 @@ export const FiltreDepartement = ({resistants, onChange}: Props) =>
icon={<IconMapPin/>} icon={<IconMapPin/>}
data={[...new Set(resistants.map(r => r.departement))] data={[...new Set(resistants.map(r => r.departement))]
.filter(Boolean) .filter(Boolean)
.sort()
.map(d => ({label: d, value: d})) .map(d => ({label: d, value: d}))
} }
/> />

View File

@ -6,6 +6,7 @@ import {Group, TextInput} from "@mantine/core";
import {FiltreDepartement} from "./FiltreDepartement"; import {FiltreDepartement} from "./FiltreDepartement";
import {IconUsers} from "@tabler/icons-react"; import {IconUsers} from "@tabler/icons-react";
import {Separator} from "../../components/Separator"; import {Separator} from "../../components/Separator";
import {FiltreAcademie} from "./FiltreAcademie";
export const resistantsLoader = async () => { export const resistantsLoader = async () => {
const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck' const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck'
@ -23,6 +24,7 @@ const normalize = (text: string) => (text || "")
export const ListeResistants = () => { export const ListeResistants = () => {
const { resistants } = useLoaderData() as { resistants: Resistant[] } const { resistants } = useLoaderData() as { resistants: Resistant[] }
const [departement, setDepartement] = React.useState<string|null>(null) const [departement, setDepartement] = React.useState<string|null>(null)
const [academie, setAcademie] = React.useState<string|null>(null)
const [nom, setNom] = React.useState<string|undefined>(undefined) const [nom, setNom] = React.useState<string|undefined>(undefined)
const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value) const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
@ -33,6 +35,7 @@ export const ListeResistants = () => {
<Group position="center"> <Group position="center">
<TextInput icon={<IconUsers />} placeholder="Nom" onChange={filtreNom}/> <TextInput icon={<IconUsers />} placeholder="Nom" onChange={filtreNom}/>
<FiltreDepartement resistants={resistants} onChange={setDepartement}/> <FiltreDepartement resistants={resistants} onChange={setDepartement}/>
<FiltreAcademie resistants={resistants} onChange={setAcademie}/>
</Group> </Group>
<Separator /> <Separator />
@ -40,6 +43,7 @@ export const ListeResistants = () => {
{resistants {resistants
.filter(r => !nom || normalize(r.noms).includes(normalize(nom.toLowerCase()))) .filter(r => !nom || normalize(r.noms).includes(normalize(nom.toLowerCase())))
.filter(r => !departement || normalize(r.departement).includes(normalize(departement))) .filter(r => !departement || normalize(r.departement).includes(normalize(departement)))
.filter(r => !academie || normalize(r.academie).includes(normalize(academie)))
.map((r) => <ResistantRow resistant={r} key={r.noms}/>)} .map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
<Outlet/> <Outlet/>
</div> </div>