Mop/amap
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add filters for all routes

Browse Source
This commit is contained in:
Julien Aldon
2026-02-15 01:09:36 +01:00
parent f440cef59e
commit a7b83da149
22 changed files with 184 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
<title>Amap Croix-luizet</title>
</head>
<body>
<div id="root"></div>

2
frontend/locales/en.json
View File

@@ -121,5 +121,5 @@
"error deleting shipment": "error deleting shipment",
"there is no contract for now": "there is no contract for now.",
"the product unit will be assigned to the quantity requested in the form": "the product unit will be assigned to the quantity requested in the form",
"all theses informations are for contract generation, no informations is stored outside of contracts": "all theses informations are for contract generation, no informations is stored outside of contracts."
"all theses informations are for contract generation": "all theses informations are for contract generation."
}

2
frontend/locales/fr.json
View File

@@ -134,5 +134,5 @@
"there is no contract for now": "Il n'y a pas de contrats pour le moment.",
"the product unit will be assigned to the quantity requested in the form": "L'unité de vente du produit définit l'unité associée a la quantité demandée dans le formulaire des amapiens.",
"all theses informations are for contract generation, no informations is stored outside of contracts": "ces informations sont nécéssaires pour la génération de contrat, aucune information personnelle n'est gardée ailleurs que dans les contrats générés."
"all theses informations are for contract generation": "ces informations sont nécéssaires pour la génération de contrat."
}

2
frontend/src/components/Navbar/index.css
View File

@@ -3,11 +3,11 @@ nav {
justify-self: left;
padding: 1rem;
background-color: var(--mantine-color-blue-4);
justify-content: space-between;
}
.navLink {
color: #fff;
font-weight: bold;
margin-right: 1rem;
text-decoration: none;
}

31
frontend/src/components/Navbar/index.tsx
View File

@@ -1,21 +1,34 @@
import { NavLink } from "react-router";
import { t } from "@/config/i18n";
import "./index.css";
import { Group } from "@mantine/core";
import { Config } from "@/config/config";
export function Navbar() {
return (
<nav>
<Group>
<NavLink
className={"navLink"}
aria-label={t('home')}
to="/"
>
{t("home", {capfirst: true})}
</NavLink>
<NavLink
className={"navLink"}
aria-label={t('dashboard')}
to="/dashboard/productors"
>
{t("dashboard", {capfirst: true})}
</NavLink>
</Group>
<NavLink
className={"navLink"}
to="/"
className={"navLink"}
aria-label={t("login with keycloak")}
to={`${Config.backend_uri}/auth/login`}
>
{t("home", {capfirst: true})}
</NavLink>
<NavLink
className={"navLink"}
to="/dashboard/productors"
>
{t("dashboard", {capfirst: true})}
{t("login with keycloak", {capfirst: true})}
</NavLink>
</nav>
);

2
frontend/src/components/Productors/Row/index.tsx
View File

@@ -24,7 +24,7 @@ export default function ProductorRow({
<Table.Td>
{
productor.payment_methods.map((value) =>(
<Badge ml="xs">
<Badge key={value.name} ml="xs">
{t(value.name, {capfirst: true})}
</Badge>
))

17
frontend/src/components/Shipments/Filter/index.tsx
View File

@@ -4,18 +4,23 @@ import { t } from "@/config/i18n";
export type ShipmentFiltersProps = {
names: string[];
forms: string[];
filters: URLSearchParams;
onFilterChange: (values: string[], filter: string) => void;
}
export default function ShipmentsFilters({
names,
forms,
filters,
onFilterChange
}: ShipmentFiltersProps) {
const defaultNames = useMemo(() => {
return filters.getAll("names")
}, [filters]);
const defaultForms = useMemo(() => {
return filters.getAll("forms")
}, [filters]);
return (
<Group>
@@ -28,6 +33,18 @@ export default function ShipmentsFilters({
onFilterChange(values, 'names')
}}
clearable
searchable
/>
<MultiSelect
aria-label={t("filter by form", {capfirst: true})}
placeholder={t("filter by form", {capfirst: true})}
data={forms}
defaultValue={defaultForms}
onChange={(values: string[]) => {
onFilterChange(values, 'forms')
}}
clearable
searchable
/>
</Group>
);

1
frontend/src/components/Shipments/Modal/index.tsx
View File

@@ -44,6 +44,7 @@ export default function ShipmentModal({
const { data: allForms } = getForms();
const { data: allProducts } = getProducts(new URLSearchParams("types=1"));
const { data: allProductors } = getProductors()
const formsSelect = useMemo(() => {
return allForms?.map(form => ({value: String(form.id), label: `${form.name} ${form.season}`}))
}, [allForms]);

16
frontend/src/pages/Contract/index.tsx
View File

@@ -80,7 +80,7 @@ export function Contract() {
shipment.products
);
if (total < (form?.minimum_shipment_value || 0)) {
return shipment.id; // mark shipment as invalid
return shipment.id;
}
return null;
})
@@ -125,8 +125,18 @@ export function Contract() {
}
}, [inputForm, inputRefs, isShipmentsMinimumValue, form]);
if (!form)
return <Loader/>;
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
@@ -134,7 +144,7 @@ export function Contract() {
<Title order={2}>{form.name}</Title>
<Title order={3}>{t("informations", {capfirst: true})}</Title>
<Text size="sm">
{t("all theses informations are for contract generation, no informations is stored outside of contracts", {capfirst: true})}
{t("all theses informations are for contract generation", {capfirst: true})}
</Text>
<Group grow>
<TextInput

27
frontend/src/pages/Forms/index.tsx
View File

@@ -8,7 +8,6 @@ import FormModal from "@/components/Forms/Modal";
import FormRow from "@/components/Forms/Row";
import type { Form, FormInputs } from "@/services/resources/forms";
import FilterForms from "@/components/Forms/Filter";
import { notifications } from "@mantine/notifications";
export function Forms() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -59,11 +58,7 @@ export function Forms() {
minimum_shipment_value: Number(form.minimum_shipment_value),
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created form", {capfirst: true}),
});
}, [createFormMutation]);
}, [createFormMutation, closeModal]);
const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
if (!id)
@@ -80,11 +75,7 @@ export function Forms() {
}
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited form", {capfirst: true}),
});
}, [editFormMutation]);
}, [editFormMutation, closeModal]);
const onFilterChange = useCallback((
values: string[],
@@ -102,9 +93,19 @@ export function Forms() {
});
}, [searchParams, setSearchParams])
if (!data || isPending)
return (<Loader color="blue"/>);
if (!data || isPending)
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
<Stack>
<Group justify="space-between">

24
frontend/src/pages/Productors/index.tsx
View File

@@ -8,7 +8,6 @@ import { ProductorModal } from "@/components/Productors/Modal";
import { useCallback, useMemo } from "react";
import type { Productor, ProductorInputs } from "@/services/resources/productors";
import ProductorsFilters from "@/components/Productors/Filter";
import { notifications } from "@mantine/notifications";
export default function Productors() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -51,11 +50,7 @@ export default function Productors() {
...productor
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created productor", {capfirst: true}),
});
}, [createProductorMutation]);
}, [createProductorMutation, closeModal]);
const handleEditProductor = useCallback(async (productor: ProductorInputs, id?: number) => {
if (!id)
@@ -65,11 +60,7 @@ export default function Productors() {
productor: productor
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited productor", {capfirst: true}),
});
}, []);
}, [editProductorMutation, closeModal]);
const onFilterChange = useCallback((values: string[], filter: string) => {
setSearchParams(prev => {
@@ -84,7 +75,16 @@ export default function Productors() {
}, [searchParams, setSearchParams])
if (!productors || isPending)
return <Loader/>
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
<Stack>

26
frontend/src/pages/Products/index.tsx
View File

@@ -8,7 +8,6 @@ import { ProductModal } from "@/components/Products/Modal";
import { useCallback, useMemo } from "react";
import { productCreateFromProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
import ProductsFilters from "@/components/Products/Filter";
import { notifications } from "@mantine/notifications";
export default function Products() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -49,11 +48,7 @@ export default function Products() {
const handleCreateProduct = useCallback(async (product: ProductInputs) => {
await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created product", {capfirst: true}),
});
}, [createProductMutation]);
}, [createProductMutation, closeModal]);
const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
if (!id)
@@ -63,11 +58,7 @@ export default function Products() {
product: productCreateFromProductInputs(product)
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited product", {capfirst: true}),
});
}, []);
}, [editProductMutation, closeModal]);
const onFilterChange = useCallback((values: string[], filter: string) => {
setSearchParams(prev => {
@@ -82,8 +73,17 @@ export default function Products() {
}, [searchParams, setSearchParams])
if (!products || isPending)
return <Loader/>
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
<Stack>
<Group justify="space-between">

30
frontend/src/pages/Shipments/index.tsx
View File

@@ -8,7 +8,6 @@ import { useCallback, useMemo } from "react";
import { shipmentCreateFromShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
import ShipmentModal from "@/components/Shipments/Modal";
import ShipmentsFilters from "@/components/Shipments/Filter";
import { notifications } from "@mantine/notifications";
export default function Shipments() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -38,17 +37,18 @@ export default function Shipments() {
.filter((season, index, array) => array.indexOf(season) === index)
}, [allShipments])
const forms = useMemo(() => {
return allShipments?.map((shipment: Shipment) => (shipment.form.name))
.filter((season, index, array) => array.indexOf(season) === index)
}, [allShipments])
const createShipmentMutation = createShipment();
const editShipmentMutation = editShipment();
const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created shipment", {capfirst: true}),
});
}, [createShipmentMutation]);
}, [createShipmentMutation, closeModal]);
const handleEditShipment = useCallback(async (shipment: ShipmentInputs, id?: number) => {
if (!id)
@@ -58,11 +58,7 @@ export default function Shipments() {
shipment: shipmentCreateFromShipmentInputs(shipment)
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited shipment", {capfirst: true}),
});
}, []);
}, [editShipmentMutation, closeModal]);
const onFilterChange = useCallback((values: string[], filter: string) => {
setSearchParams(prev => {
@@ -77,7 +73,16 @@ export default function Shipments() {
}, [searchParams, setSearchParams])
if (!shipments || isPending)
return <Loader/>
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
<Stack>
@@ -106,6 +111,7 @@ export default function Shipments() {
/>
</Group>
<ShipmentsFilters
forms={forms || []}
names={names || []}
filters={searchParams}
onFilterChange={onFilterChange}

15
frontend/src/pages/Users/index.tsx
View File

@@ -44,7 +44,7 @@ export default function Users() {
const handleCreateUser = useCallback(async (user: UserInputs) => {
await createUserMutation.mutateAsync(user);
closeModal();
}, [createUserMutation]);
}, [createUserMutation, closeModal]);
const handleEditUser = useCallback(async (user: UserInputs, id?: number) => {
if (!id)
@@ -54,7 +54,7 @@ export default function Users() {
user: user
});
closeModal();
}, []);
}, [editUserMutation, closeModal]);
const onFilterChange = useCallback((values: string[], filter: string) => {
setSearchParams(prev => {
@@ -69,7 +69,16 @@ export default function Users() {
}, [searchParams, setSearchParams])
if (!users || isPending)
return <Loader/>
return (
<Group
align="center"
justify="center"
h="80vh"
w="100%"
>
<Loader color="pink"/>
</Group>
);
return (
<Stack>

1
frontend/src/router.tsx
View File

@@ -12,7 +12,6 @@ import Users from "@/pages/Users";
import Shipments from "./pages/Shipments";
import { Contract } from "./pages/Contract";
import { NotFound } from "./pages/NotFound";
// import { CreateForms } from "@/pages/Forms/CreateForm";
export const router = createBrowserRouter([
{