feat: add Académie filter
parent
96b1ca6c49
commit
7f18d5a5f6
|
@ -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}))
|
||||||
|
}
|
||||||
|
/>
|
|
@ -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}))
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue