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

add contract page with dynamic form elements

Browse Source
This commit is contained in:
Julien Aldon
2026-02-13 17:46:24 +01:00
parent ef7403f213
commit 7e42fbe106
34 changed files with 540 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/locales/en.json
View File

@@ -1,10 +1,15 @@
{
"product name": "product name",
"product price": "product price",
"product weight": "product weight",
"product quantity": "product quantity",
"product quantity unit": "product quantity unit",
"product type": "product type",
"planned": "planned",
"reccurent": "reccurent",
"planned products": "planned products",
"select products per shipment": "select products per shipment.",
"recurrent products": "recurrent products",
"your selection in this category will apply for all shipments": "your selection in this category will apply for all shipments.",
"recurrent": "recurrent",
"product price kg": "product price kg",
"product unit": "product unit",
"grams": "grams",
@@ -19,7 +24,8 @@
"referer": "referer",
"edit form": "edit form",
"form name": "form name",
"contact season": "contact season",
"contract season": "contract season",
"contract season recommandation": "recommandation : <Season>-<year> (example: Winter-2025)",
"start date": "start date",
"end date": "end date",
"nothing found": "nothing found",
@@ -41,13 +47,19 @@
"productor address": "productor address",
"productor payment": "productor payment",
"priceKg": "priceKg",
"weight": "weight",
"quantity": "quantity",
"quantity unit": "quantity unit",
"unit": "sell unit",
"price": "price",
"create product": "create product",
"informations": "informations",
"remove product": "remove product",
"edit product": "edit product",
"shipment name": "shipment name",
"shipments": "shipments",
"shipment": "shipment",
"there is": "there is",
"for this contract": "for this contact.",
"shipment date": "shipment date",
"remove shipment": "remove shipment",
"productors": "productors",
@@ -65,5 +77,11 @@
"a start date": "a start date",
"a end date": "a end date",
"a productor": "a productor",
"a referer": "a referer"
"a referer": "a referer",
"a phone": "a phone",
"a fistname": "a fistname",
"a lastname": "a lastname",
"a email": "a email",
"submit contract": "submit contract",
"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."
}

31
frontend/locales/fr.json
View File

@@ -1,15 +1,21 @@
{
"product name": "nom du produit",
"product price": "prix du produit",
"product weight": "poids du produit",
"product quantity": "quantité du produit",
"product type": "type de produit",
"planned": "planifié",
"reccurent": "récurrent",
"planned products": "Produits planifiés par livraison",
"select products per shipment": "Selectionnez les produits pour chaque livraison.",
"recurrent": "récurrent",
"recurrent products": "Produits récurents",
"your selection in this category will apply for all shipments": "votre selection sera appliquée pour chaque livraisons (Exemple: 6 livraisons, le produits sera comptés 6 fois : une fois par livraison).",
"product price kg": "prix du produit au Kilo",
"product unit": "unité de vente du produit",
"grams": "grammes",
"kilo": "kilo",
"piece": "pièce",
"in": "en",
"enter quantity": "entrez la quantitée",
"filter by season": "filtrer par saisons",
"name": "nom",
"season": "saison",
@@ -19,7 +25,8 @@
"referer": "référent·e",
"edit form": "modifier le formulaire de contrat",
"form name": "nom du formulaire de contrat",
"contact season": "saison du contrat",
"contract season": "saison du contrat",
"contract season recommandation": "recommandation : <Saison>-<année> (Exemple: Hiver-2025)",
"start date": "date de début",
"end date": "date de fin",
"nothing found": "rien à afficher",
@@ -35,13 +42,15 @@
"address": "adresse",
"payment": "ordre du chèque",
"type": "type",
"create productor": "créer le producteur·troce",
"create productor": "créer le producteur·trice",
"productor name": "nom du producteur·trice",
"productor type": "type du producteur·trice",
"productor address": "adresse du producteur·trice",
"productor payment": "ordre du chèque du producteur·trice",
"priceKg": "prix au kilo",
"weight": "poids",
"quantity": "quantité",
"quantity unit": "unité de quantité",
"unit": "Unité de vente",
"price": "prix",
"create product": "créer le produit",
"informations": "informations",
@@ -49,6 +58,10 @@
"edit product": "modifier le produit",
"shipment name": "nom de la livraison",
"shipment date": "date de la livraison",
"shipments": "livraisons",
"shipment": "livraison",
"there is": "il y a",
"for this contract": "pour ce contrat.",
"remove shipment": "supprimer la livraison",
"productors": "producteur·trices",
"products": "produits",
@@ -66,5 +79,11 @@
"a start date": "une date de début",
"a end date": "une date de fin",
"a productor": "un(e) producteur·trice",
"a referer": "un référent·e"
"a referer": "un référent·e",
"a phone": "un numéro de téléphone",
"a fistname": "un prénom",
"a lastname": "un nom",
"a email": "une adresse email",
"submit contract": "Envoyer le contrat",
"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."
}

35
frontend/src/components/Forms/Modal/index.tsx
View File

@@ -67,7 +67,7 @@ export default function FormModal({
return (
<Modal
size="50%"
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={currentForm ? t("edit form") : t('create form')}
@@ -80,24 +80,27 @@ export default function FormModal({
{...form.getInputProps('name')}
/>
<TextInput
label={t("contact season", {capfirst: true})}
placeholder={t("contact season", {capfirst: true})}
label={t("contract season", {capfirst: true})}
placeholder={t("contract season", {capfirst: true})}
description={t("contract season recommandation", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('season')}
/>
<DatePickerInput
label={t("start date", {capfirst: true})}
placeholder={t("start date", {capfirst: true})}
withAsterisk
{...form.getInputProps('start')}
/>
<DatePickerInput
label={t("end date", {capfirst: true})}
placeholder={t("end date", {capfirst: true})}
withAsterisk
{...form.getInputProps('end')}
/>
<Group grow>
<DatePickerInput
label={t("start date", {capfirst: true})}
placeholder={t("start date", {capfirst: true})}
withAsterisk
{...form.getInputProps('start')}
/>
<DatePickerInput
label={t("end date", {capfirst: true})}
placeholder={t("end date", {capfirst: true})}
withAsterisk
{...form.getInputProps('end')}
/>
</Group>
<Select
label={t("referer", {capfirst: true})}
placeholder={t("referer", {capfirst: true})}
@@ -127,7 +130,6 @@ export default function FormModal({
aria-label={t("cancel", {capfirst: true})}
leftSection={<IconCancel/>}
onClick={() => {
form.reset();
form.clearErrors();
onClose();
}}
@@ -139,7 +141,6 @@ export default function FormModal({
form.validate();
if (form.isValid()) {
handleSubmit(form.getValues(), currentForm?.id)
form.reset();
}
}}
>{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>

5
frontend/src/components/Forms/Row/index.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Table, Tooltip } from "@mantine/core";
import { useNavigate } from "react-router";
import { useNavigate, useSearchParams } from "react-router";
import { deleteForm} from "@/services/api";
import { IconEdit, IconX } from "@tabler/icons-react";
import { t } from "@/config/i18n";
@@ -12,6 +12,7 @@ export type FormRowProps = {
export default function FormRow({
form,
}: FormRowProps) {
const [searchParams, _] = useSearchParams();
const deleteMutation = deleteForm();
const navigate = useNavigate();
@@ -30,7 +31,7 @@ export default function FormRow({
mr="5"
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/forms/${form.id}/edit`);
navigate(`/dashboard/forms/${form.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconEdit/>

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

@@ -6,7 +6,7 @@ export function Navbar() {
return (
<nav>
<NavLink to="/">{t("home", {capfirst: true})}</NavLink>
<NavLink to="/dashboard">{t("dashboard", {capfirst: true})}</NavLink>
<NavLink to="/dashboard/productors">{t("dashboard", {capfirst: true})}</NavLink>
</nav>
);
}

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

@@ -33,6 +33,7 @@ export default function ProductorsFilter({
onFilterChange(values, 'names')
}}
clearable
searchable
/>
<MultiSelect
aria-label={t("filter by type", {capfirst: true})}
@@ -43,6 +44,7 @@ export default function ProductorsFilter({
onFilterChange(values, 'types')
}}
clearable
searchable
/>
</Group>
);

4
frontend/src/components/Productors/Modal/index.tsx
View File

@@ -45,7 +45,7 @@ export function ProductorModal({
return (
<Modal
size="50%"
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create productor", {capfirst: true})}
@@ -87,7 +87,6 @@ export function ProductorModal({
aria-label={t("cancel", {capfirst: true})}
leftSection={<IconCancel/>}
onClick={() => {
form.reset();
form.clearErrors();
onClose();
}}
@@ -99,7 +98,6 @@ export function ProductorModal({
form.validate();
if (form.isValid()) {
handleSubmit(form.getValues(), currentProductor?.id)
form.reset();
}
}}
>{currentProductor ? t("edit productor", {capfirst: true}) : t('create productor', {capfirst: true})}</Button>

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

@@ -3,7 +3,7 @@ import { t } from "@/config/i18n";
import { IconEdit, IconX } from "@tabler/icons-react";
import type { Productor } from "@/services/resources/productors";
import { deleteProductor } from "@/services/api";
import { useNavigate } from "react-router";
import { useNavigate, useSearchParams } from "react-router";
export type ProductorRowProps = {
productor: Productor;
@@ -12,6 +12,7 @@ export type ProductorRowProps = {
export default function ProductorRow({
productor,
}: ProductorRowProps) {
const [searchParams, _] = useSearchParams();
const deleteMutation = deleteProductor();
const navigate = useNavigate();
@@ -28,7 +29,7 @@ export default function ProductorRow({
mr="5"
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/productors/${productor.id}/edit`);
navigate(`/dashboard/productors/${productor.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconEdit/>

2
frontend/src/components/Products/Filter/index.tsx
View File

@@ -33,6 +33,7 @@ export default function ProductsFilters({
onFilterChange(values, 'names')
}}
clearable
searchable
/>
<MultiSelect
aria-label={t("filter by productor", {capfirst: true})}
@@ -43,6 +44,7 @@ export default function ProductsFilters({
onFilterChange(values, 'productors')
}}
clearable
searchable
/>
</Group>
);

44
frontend/src/components/Products/Form/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { t } from "@/config/i18n";
import { ProductUnit, type Product } from "@/services/resources/products";
import type { Shipment } from "@/services/resources/shipments";
import { Group, NumberInput } from "@mantine/core";
import type { UseFormReturnType } from "@mantine/form";
export type ProductFormProps = {
inputForm: UseFormReturnType<Record<string, string | number>>;
product: Product;
shipment?: Shipment;
}
export function ProductForm({
inputForm,
product,
shipment,
}: ProductFormProps) {
return (
<Group mb="sm" grow>
<NumberInput
label={
`${product.name}
${product.quantity || ""}${product.quantity ? product.quantity_unit : ""}
${
product.price ?
Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(product.price) :
product.price_kg && Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(product.price_kg)
}
${product.price ? `/ ${t(ProductUnit[product.unit])}` : "/ kg"}`
}
description={`${t("enter quantity", {capfirst: true})} ${t('in')} ${t(ProductUnit[product.unit])}`}
aria-label={t("enter quantity")}
placeholder={`${t("enter quantity", {capfirst: true})} ${t('in')} ${t(ProductUnit[product.unit])}`}
{...inputForm.getInputProps(shipment ? `planned-${shipment.id}-${product.id}` : `recurrent-${product.id}`)}
/>
</Group>
);
}

130
frontend/src/components/Products/Modal/index.tsx
View File

@@ -1,8 +1,8 @@
import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type ModalBaseProps } from "@mantine/core";
import { Button, Group, Modal, NumberInput, Pill, Select, TextInput, Title, Tooltip, type ModalBaseProps } from "@mantine/core";
import { t } from "@/config/i18n";
import { useForm } from "@mantine/form";
import { IconCancel } from "@tabler/icons-react";
import { productToProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
import { IconCancel, IconInfoCircle } from "@tabler/icons-react";
import { ProductQuantityUnit, productToProductInputs, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
import { useEffect, useMemo } from "react";
import { getProductors } from "@/services/api";
@@ -24,7 +24,8 @@ export function ProductModal({
unit: null,
price: null,
price_kg: null,
weight: null,
quantity: null,
quantity_unit: null,
type: null,
productor_id: null,
},
@@ -33,8 +34,10 @@ export function ProductModal({
!value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
unit: (value) =>
!value ? `${t("unit", {capfirst: true})} ${t('is required')}` : null,
price: (value) =>
!value ? `${t("price", {capfirst: true})} ${t('is required')}` : null,
price: (value, values) =>
!value && !values.price_kg ? `${t("price or price_kg", {capfirst: true})} ${t('is required')}` : null,
price_kg: (value, values) =>
!value && !values.price ? `${t("price or price_kg", {capfirst: true})} ${t('is required')}` : null,
type: (value) =>
!value ? `${t("type", {capfirst: true})} ${t('is required')}` : null,
productor_id: (value) =>
@@ -54,70 +57,85 @@ export function ProductModal({
return (
<Modal
size="50%"
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create product", {capfirst: true})}
>
<Title order={4}>{t("informations", {capfirst: true})}</Title>
<TextInput
label={t("product name", {capfirst: true})}
placeholder={t("product name", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<Select
label={t("product type", {capfirst: true})}
placeholder={t("product type", {capfirst: true})}
radius="sm"
data={[
{value: "1", label: t("planned")},
{value: "2", label: t("reccurent")}
]}
{...form.getInputProps('type')}
/>
<Select
label={t("product unit", {capfirst: true})}
placeholder={t("product unit", {capfirst: true})}
radius="sm"
data={[
{value: "1", label: t("grams")},
{value: "2", label: t("kilo")},
{value: "3", label: t("piece")}
]}
{...form.getInputProps('unit')}
/>
<NumberInput
label={t("product price", {capfirst: true})}
placeholder={t("product price", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('price')}
/>
<NumberInput
label={t("product priceKg", {capfirst: true})}
placeholder={t("product priceKg", {capfirst: true})}
radius="sm"
{...form.getInputProps('price_kg')}
/>
<NumberInput
label={t("product weight", {capfirst: true})}
placeholder={t("product weight", {capfirst: true})}
radius="sm"
{...form.getInputProps('weight', {capfirst: true})}
/>
<Select
label={t("productor", {capfirst: true})}
placeholder={t("productor")}
nothingFoundMessage={t("nothing found", {capfirst: true})}
withAsterisk
clearable
allowDeselect
searchable
data={productorsSelect || []}
{...form.getInputProps('productor_id')}
/>
<Group grow>
<TextInput
label={t("product name", {capfirst: true})}
placeholder={t("product name", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<Select
label={t("product type", {capfirst: true})}
placeholder={t("product type", {capfirst: true})}
radius="sm"
withAsterisk
searchable
clearable
data={[
{value: "1", label: t("planned")},
{value: "2", label: t("recurrent")}
]}
{...form.getInputProps('type')}
/>
</Group>
<Select
label={t("product unit", {capfirst: true})}
placeholder={t("product unit", {capfirst: true})}
description={t("the product unit will be assigned to the quantity requested in the form", { capfirst: true})}
radius="sm"
withAsterisk
searchable
clearable
data={Object.entries(ProductUnit).map(([key, value]) => ({value: key, label: t(value)}))}
{...form.getInputProps('unit')}
/>
<Group grow>
<NumberInput
label={t("product price", {capfirst: true})}
placeholder={t("product price", {capfirst: true})}
radius="sm"
{...form.getInputProps('price')}
/>
<NumberInput
label={t("product price kg", {capfirst: true})}
placeholder={t("product price kg", {capfirst: true})}
radius="sm"
{...form.getInputProps('price_kg')}
/>
</Group>
<Group grow>
<NumberInput
label={t("product quantity", {capfirst: true})}
placeholder={t("product quantity", {capfirst: true})}
radius="sm"
{...form.getInputProps('quantity', {capfirst: true})}
/>
<Select
label={t("product quantity unit", {capfirst: true})}
placeholder={t("product quantity unit", {capfirst: true})}
radius="sm"
data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({value: key, label: t(value)}))}
{...form.getInputProps('quantity_unit', {capfirst: true})}
/>
</Group>
<Group mt="sm" justify="space-between">
<Button
variant="filled"
@@ -125,7 +143,6 @@ export function ProductModal({
aria-label={t("cancel", {capfirst: true})}
leftSection={<IconCancel/>}
onClick={() => {
form.reset();
form.clearErrors();
onClose();
}}
@@ -138,7 +155,6 @@ export function ProductModal({
console.log(form.isValid(), form.getValues())
if (form.isValid()) {
handleSubmit(form.getValues(), currentProduct?.id)
form.reset();
}
}}
>{currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}</Button>

17
frontend/src/components/Products/Row/index.tsx
View File

@@ -1,10 +1,9 @@
import { ActionIcon, Table, Tooltip } from "@mantine/core";
import { t } from "@/config/i18n";
import { IconEdit, IconX } from "@tabler/icons-react";
import { ProductType, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
import { ProductModal } from "@/components/Products/Modal";
import { deleteProduct, getProduct } from "@/services/api";
import { useNavigate } from "react-router";
import { ProductType, ProductUnit, type Product } from "@/services/resources/products";
import { deleteProduct } from "@/services/api";
import { useNavigate, useSearchParams } from "react-router";
export type ProductRowProps = {
product: Product;
@@ -13,17 +12,19 @@ export type ProductRowProps = {
export default function ProductRow({
product,
}: ProductRowProps) {
const [searchParams, _] = useSearchParams();
const deleteMutation = deleteProduct();
const navigate = useNavigate();
return (
<Table.Tr key={product.id}>
<Table.Td>{product.name}</Table.Td>
<Table.Td>{ProductType[product.type]}</Table.Td>
<Table.Td>{t(ProductType[product.type])}</Table.Td>
<Table.Td>{product.price}</Table.Td>
<Table.Td>{product.price_kg}</Table.Td>
<Table.Td>{product.weight}</Table.Td>
<Table.Td>{ProductUnit[product.unit]}</Table.Td>
<Table.Td>{product.quantity}</Table.Td>
<Table.Td>{product.quantity_unit}</Table.Td>
<Table.Td>{t(ProductUnit[product.unit])}</Table.Td>
<Table.Td>
<Tooltip label={t("edit product", {capfirst: true})}>
<ActionIcon
@@ -31,7 +32,7 @@ export default function ProductRow({
mr="5"
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/products/${product.id}/edit`);
navigate(`/dashboard/products/${product.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconEdit/>

101
frontend/src/components/Shipments/Form/index.tsx
View File

@@ -1,62 +1,57 @@
import { ActionIcon, Group, TextInput, Tooltip } from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { IconX } from "@tabler/icons-react";
import { t } from "@/config/i18n";
import type { ShipmentInputs } from "@/services/resources/shipments";
import { Accordion, Group, Text } from "@mantine/core";
import type { Shipment } from "@/services/resources/shipments";
import { ProductForm } from "@/components/Products/Form";
import type { UseFormReturnType } from "@mantine/form";
import { useMemo } from "react";
import { computePrices } from "@/pages/Contract";
export type ShipmentFormProps = {
inputForm: UseFormReturnType<Record<string, string | number>>;
shipment: Shipment;
index: number;
setShipmentElement: (index: number, shipment: ShipmentInputs) => void;
deleteShipmentElement: (index: number) => void;
shipment: ShipmentInputs;
}
export default function ShipmentForm({
index,
setShipmentElement,
deleteShipmentElement,
shipment
shipment,
index,
inputForm,
}: ShipmentFormProps) {
return (
<Group justify="space-between" key={`shipment_${index}`}>
<Group grow maw="80%">
<TextInput
label={t("shipment name", {capfirst: true})}
placeholder={t("shipment name", {capfirst: true})}
radius="sm"
withAsterisk
value={shipment.name || ""}
onChange={(event) => {
const value = event.target.value;
setShipmentElement(index, {...shipment, name: value})
}}
/>
<DatePickerInput
label={t("shipment date", {capfirst: true})}
placeholder={t("shipment date", {capfirst: true})}
radius="sm"
withAsterisk
value={shipment.date || null}
onChange={(event) => {
const value = event || "";
setShipmentElement(index, {...shipment, date: value})
}}
/>
</Group>
<Tooltip label={t("remove shipment", {capfirst: true})}>
<ActionIcon
flex={{base: "1", md: "0"}}
style={{alignSelf: "flex-end"}}
color="red"
aria-label={t("remove shipment", {capfirst: true})}
onClick={() => {
deleteShipmentElement(index)
}}
>
<IconX/>
</ActionIcon>
</Tooltip>
</Group>
const shipmentPrice = useMemo(() => {
const values = Object
.entries(inputForm.getValues())
.filter(([key]) =>
key.includes("planned") &&
key.split("-")[1] === String(shipment.id)
);
return computePrices(values, shipment.products);
}, [inputForm, shipment.products]);
)
return (
<Accordion.Item value={String(index)}>
<Accordion.Control>
<Group justify="space-between">
<Text>{shipment.name}</Text>
<Text>{
Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(shipmentPrice)
}</Text>
<Text mr="lg">{shipment.date}</Text>
</Group>
</Accordion.Control>
<Accordion.Panel>
{
shipment?.products.map((product) => (
<ProductForm
key={product.id}
product={product}
shipment={shipment}
inputForm={inputForm}
/>
))
}
</Accordion.Panel>
</Accordion.Item>
);
}

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

@@ -5,7 +5,7 @@ import { IconCancel } from "@tabler/icons-react";
import { useForm } from "@mantine/form";
import { useEffect, useMemo } from "react";
import { shipmentToShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
import { getForms, getProducts } from "@/services/api";
import { getForms, getProductors, getProducts } from "@/services/api";
export type ShipmentModalProps = ModalBaseProps & {
currentShipment?: Shipment;
@@ -42,18 +42,28 @@ export default function ShipmentModal({
}, [currentShipment]);
const { data: allForms } = getForms();
const { data: allProducts } = getProducts();
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]);
const productsSelect = useMemo(() => {
return allProducts?.map(product => ({value: String(product.id), label: `${product.name}`}))
}, [allProducts]);
if (!allProducts)
return;
return allProductors?.map(productor => {
return {
group: productor.name,
items: allProducts
.filter((product) => product.productor.id === productor.id)
.map((product) => ({value: String(product.id), label: `${product.name}`}))
}
});
}, [allProducts, form]);
return (
<Modal
size="50%"
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={currentShipment ? t("edit shipment") : t('create shipment')}
@@ -83,8 +93,9 @@ export default function ShipmentModal({
<MultiSelect
label={t("shipment products", {capfirst: true})}
placeholder={t("shipment products", {capfirst: true})}
data={productsSelect}
data={productsSelect || []}
clearable
searchable
{...form.getInputProps('product_ids')}
/>
<Group mt="sm" justify="space-between">
@@ -105,7 +116,6 @@ export default function ShipmentModal({
form.validate();
if (form.isValid()) {
handleSubmit(form.getValues(), currentShipment?.id)
// form.reset();
}
}}
>{currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}</Button>

5
frontend/src/components/Shipments/Row/index.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Table, Tooltip } from "@mantine/core";
import { useNavigate } from "react-router";
import { useNavigate, useSearchParams } from "react-router";
import { deleteShipment} from "@/services/api";
import { IconEdit, IconX } from "@tabler/icons-react";
import { t } from "@/config/i18n";
@@ -12,6 +12,7 @@ export type ShipmentRowProps = {
export default function ShipmentRow({
shipment,
}: ShipmentRowProps) {
const [searchParams, _] = useSearchParams();
const deleteMutation = deleteShipment();
const navigate = useNavigate();
@@ -27,7 +28,7 @@ export default function ShipmentRow({
mr="5"
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/shipments/${shipment.id}/edit`);
navigate(`/dashboard/shipments/${shipment.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconEdit/>

4
frontend/src/components/Users/Modal/index.tsx
View File

@@ -37,7 +37,7 @@ export function UserModal({
return (
<Modal
size="50%"
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create user", {capfirst: true})}
@@ -64,7 +64,6 @@ export function UserModal({
aria-label={t("cancel", {capfirst: true})}
leftSection={<IconCancel/>}
onClick={() => {
form.reset();
form.clearErrors();
onClose();
}}
@@ -77,7 +76,6 @@ export function UserModal({
console.log(form.isValid(), form.getValues())
if (form.isValid()) {
handleSubmit(form.getValues(), currentUser?.id)
form.reset();
}
}}
>{currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}</Button>

5
frontend/src/components/Users/Row/index.tsx
View File

@@ -4,7 +4,7 @@ import { IconEdit, IconX } from "@tabler/icons-react";
import { type User, type UserInputs } from "@/services/resources/users";
import { UserModal } from "@/components/Users/Modal";
import { deleteUser, getUser } from "@/services/api";
import { useNavigate } from "react-router";
import { useNavigate, useSearchParams } from "react-router";
export type UserRowProps = {
user: User;
@@ -13,6 +13,7 @@ export type UserRowProps = {
export default function UserRow({
user,
}: UserRowProps) {
const [searchParams, _] = useSearchParams();
const deleteMutation = deleteUser();
const navigate = useNavigate();
@@ -27,7 +28,7 @@ export default function UserRow({
mr="5"
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/users/${user.id}/edit`);
navigate(`/dashboard/users/${user.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconEdit/>

3
frontend/src/config/i18n.tsx
View File

@@ -15,11 +15,10 @@ const resources = {
};
i18next
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: resources,
fallbackLng: "en",
fallbackLng: "fr",
debug: Config.debug,
detection: {
caches: [],

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

@@ -1,52 +1,193 @@
import { ProductForm } from "@/components/Products/Form";
import ShipmentForm from "@/components/Shipments/Form";
import { t } from "@/config/i18n";
import { getForm } from "@/services/api";
import { Group, Loader, NumberInput, Stack, Text, Title } from "@mantine/core";
import { type Product } from "@/services/resources/products";
import { Accordion, Button, Group, List, Loader, Overlay, Stack, Text, TextInput, Title } from "@mantine/core";
import { useForm } from "@mantine/form";
import { IconMail, IconPhone, IconUser } from "@tabler/icons-react";
import { useMemo } from "react";
import { useParams } from "react-router";
export function computePrices(values: [string, any][], products: Product[], nbShipment?: number) {
return values.reduce((prev, [key, value]) => {
const keyArray = key.split("-");
const productId = Number(keyArray[keyArray.length - 1]);
const product = products.find((product) => product.id === productId);
if (!product) {
return 0;
}
const isRecurent = key.includes("recurrent") && nbShipment;
const productPrice = Number(product.price || product.price_kg);
const productQuantityUnit = product.unit === "2" ? 1 : 1000;
const productQuantity = Number(product.price ? value : value / productQuantityUnit);
return(prev + productPrice * productQuantity * (isRecurent ? nbShipment : 1));
}, 0);
}
export function Contract() {
const { id } = useParams();
const { data: form } = getForm(Number(id), {enabled: !!id})
const { data: form } = getForm(Number(id), {enabled: !!id});
const inputForm = useForm<Record<string, number | string>>({
validate: {
firstname: (value) => !value ? `${t("a firstname", {capfirst: true})} ${t("is required")}` : null,
lastname: (value) => !value ? `${t("a lastname", {capfirst: true})} ${t("is required")}` : null,
email: (value) => !value ? `${t("a email", {capfirst: true})} ${t("is required")}` : null,
phone: (value) => !value ? `${t("a phone", {capfirst: true})} ${t("is required")}` : null,
}
});
const productsRecurent = useMemo(() => {
console.log(form)
return form?.productor?.products.filter((el) => el.type === "2")
}, [form])
}, [form]);
const shipments = useMemo(() => {
return form?.shipments
return form?.shipments;
}, [form]);
const allProducts = useMemo(() => {
return form?.productor?.products;
}, [form])
const price = useMemo(() => {
const values = Object.entries(inputForm.getValues());
return computePrices(values, allProducts, form?.shipments.length);
}, [inputForm, allProducts, form?.shipments]);
if (!form)
return <Loader/>
return <Loader/>;
return (
<Stack>
<Title>{form.name}</Title>
<Stack w={{base: "100%", md: "80%", lg: "50%"}}>
<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})}
</Text>
<Group grow>
<TextInput
label={t("firstname", {capfirst: true})}
placeholder={t("firstname", {capfirst: true})}
radius="sm"
withAsterisk
required
leftSection={<IconUser/>}
{...inputForm.getInputProps('firstname')}
/>
<TextInput
label={t("lastname", {capfirst: true})}
placeholder={t("lastname", {capfirst: true})}
radius="sm"
withAsterisk
required
leftSection={<IconUser/>}
{...inputForm.getInputProps('lastname')}
/>
</Group>
<Group grow>
<TextInput
label={t("email", {capfirst: true})}
placeholder={t("email", {capfirst: true})}
radius="sm"
withAsterisk
required
leftSection={<IconMail/>}
{...inputForm.getInputProps('email')}
/>
<TextInput
label={t("phone", {capfirst: true})}
placeholder={t("phone", {capfirst: true})}
radius="sm"
withAsterisk
required
leftSection={<IconPhone/>}
{...inputForm.getInputProps('phone')}
/>
</Group>
<Title order={3}>{t('shipments', {capfirst: true})}</Title>
<Text>{`${t("there is", {capfirst: true})} ${shipments.length} ${shipments.length > 1 ? t("shipments") : t("shipment")} ${t("for this contract")}`}</Text>
<List>
{
shipments.map(shipment => (
<List.Item key={shipment.id}>{`${shipment.name} :
${
new Date(shipment.date).toLocaleDateString("fr-FR", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})
}`}
</List.Item>
))
}
</List>
{
productsRecurent.map((el) => (
<Group>
<Text>{el.name}</Text>
<NumberInput/>
</Group>
))
productsRecurent.length > 0 ?
<>
<Title order={3}>{t('recurrent products', {capfirst: true})}</Title>
<Text size="sm">{t('your selection in this category will apply for all shipments', {capfirst: true})}</Text>
{
productsRecurent.map((product) => (
<ProductForm
key={product.id}
product={product}
inputForm={inputForm}
/>
))
}
</> :
null
}
{
shipments.map((shipment) => (
<>
<Text>{shipment.name}</Text>
{
shipment?.products.map((product) => (
<Group>
<Text>{product.name}</Text>
<NumberInput/>
</Group>
))
}
</>
))
shipments.some(shipment => shipment.products.length > 0) ?
<>
<Title order={3}>{t("planned products")}</Title>
<Text>{t("select products per shipment")}</Text>
<Accordion defaultValue={"0"}>
{
shipments.map((shipment, index) => (
<ShipmentForm
shipment={shipment}
index={index}
inputForm={inputForm}
key={shipment.id}
/>
))
}
</Accordion>
</> :
null
}
<Overlay
bg={"lightGray"}
h="10vh"
p="sm"
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
position: "sticky",
bottom: "0px",
}}
>
<Text>{
t("total", {capfirst: true})} : {Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(price)}
</Text>
<Button
aria-label={t('submit contract')}
onClick={() => {
inputForm.validate();
console.log(inputForm.getValues())
}}
>
{t('submit contract')}
</Button>
</Overlay>
</Stack>
)
}

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

@@ -25,7 +25,7 @@ export function Forms() {
}, [location, isEdit])
const closeModal = () => {
navigate("/dashboard/forms");
navigate(`/dashboard/forms${searchParams ? `?${searchParams.toString()}` : ""}`);
};
const { isPending, data } = getForms(searchParams);
@@ -102,7 +102,7 @@ export function Forms() {
<ActionIcon
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/forms/create`);
navigate(`/dashboard/forms/create${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconPlus/>

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

@@ -5,7 +5,7 @@ import { IconPlus } from "@tabler/icons-react";
import ProductorRow from "@/components/Productors/Row";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { ProductorModal } from "@/components/Productors/Modal";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo } from "react";
import type { Productor, ProductorInputs } from "@/services/resources/productors";
import ProductorsFilters from "@/components/Productors/Filter";
@@ -25,7 +25,7 @@ export default function Productors() {
}, [location, isEdit])
const closeModal = () => {
navigate("/dashboard/productors");
navigate(`/dashboard/productors${searchParams ? `?${searchParams.toString()}` : ""}`);
};
const { data: productors, isPending } = getProductors(searchParams);
@@ -85,7 +85,7 @@ export default function Productors() {
<ActionIcon
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/productors/create`);
navigate(`/dashboard/productors/create${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconPlus/>

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

@@ -25,7 +25,7 @@ export default function Products() {
}, [location, isEdit])
const closeModal = () => {
navigate("/dashboard/products");
navigate(`/dashboard/products${searchParams ? `?${searchParams.toString()}` : ""}`);
};
const { data: products, isPending } = getProducts(searchParams);
@@ -38,7 +38,7 @@ export default function Products() {
}, [allProducts])
const productors = useMemo(() => {
return allProducts?.map((form: Product) => (form.productor.name))
return allProducts?.map((product: Product) => (product.productor.name))
.filter((productor, index, array) => array.indexOf(productor) === index)
}, [allProducts])
@@ -55,7 +55,7 @@ export default function Products() {
return;
await editProductMutation.mutateAsync({
id: id,
product: product
product: productCreateFromProductInputs(product)
});
closeModal();
}, []);
@@ -83,7 +83,7 @@ export default function Products() {
<ActionIcon
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/products/create`);
navigate(`/dashboard/products/create${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconPlus/>
@@ -115,7 +115,8 @@ export default function Products() {
<Table.Th>{t("type", {capfirst: true})}</Table.Th>
<Table.Th>{t("price", {capfirst: true})}</Table.Th>
<Table.Th>{t("priceKg", {capfirst: true})}</Table.Th>
<Table.Th>{t("weight", {capfirst: true})}</Table.Th>
<Table.Th>{t("quantity", {capfirst: true})}</Table.Th>
<Table.Th>{t("quantity unit", {capfirst: true})}</Table.Th>
<Table.Th>{t("unit", {capfirst: true})}</Table.Th>
<Table.Th>{t("actions", {capfirst: true})}</Table.Th>
</Table.Tr>

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

@@ -25,7 +25,7 @@ export default function Shipments() {
}, [location, isEdit])
const closeModal = () => {
navigate("/dashboard/shipments");
navigate(`/dashboard/shipments${searchParams ? `?${searchParams.toString()}` : ""}`);
};
const { data: shipments, isPending } = getShipments(searchParams);
@@ -78,7 +78,7 @@ export default function Shipments() {
<ActionIcon
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/shipments/create`);
navigate(`/dashboard/shipments/create${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconPlus/>

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

@@ -25,7 +25,7 @@ export default function Users() {
}, [location, isEdit])
const closeModal = () => {
navigate("/dashboard/users");
navigate(`/dashboard/users${searchParams ? `?${searchParams.toString()}` : ""}`);
};
const {data: users, isPending} = getUsers(searchParams);
@@ -79,7 +79,7 @@ export default function Users() {
<ActionIcon
onClick={(e) => {
e.stopPropagation();
navigate(`/dashboard/users/create`);
navigate(`/dashboard/users/create${searchParams ? `?${searchParams.toString()}` : ""}`);
}}
>
<IconPlus/>

57
frontend/src/services/resources/products.ts
View File

@@ -1,29 +1,37 @@
import { t } from "@/config/i18n";
import type { Productor } from "@/services/resources/productors";
import type { Shipment } from "@/services/resources/shipments";
export const ProductType = [
"none",
t("planned"),
t("reccurent"),
];
type ProductTypeKey = "1" | "2";
type ProductUnitKey = "1" | "2" | "3";
export const ProductUnit = [
"none",
t("grams"),
t("kilo"),
t("piece"),
];
export const ProductType = {
"1": "planned",
"2": "recurrent",
};
export const ProductUnit = {
"1": "grams",
"2": "kilo",
"3": "piece",
};
export const ProductQuantityUnit = {
"ml": "mililiter",
"L": "liter",
"g": "grams",
"kg": "kilo"
}
export type Product = {
id: number;
productor: Productor;
name: string;
unit: string;
price: number;
unit: ProductUnitKey;
price: number | null;
price_kg: number | null;
weight: number;
type: string;
quantity: number | null;
quantity_unit: string | null;
type: ProductTypeKey;
shipments: Shipment[];
}
@@ -31,9 +39,10 @@ export type ProductCreate = {
productor_id: number;
name: string;
unit: string;
price: number;
price: number | null;
price_kg: number | null;
weight: number | null;
quantity: number | null;
quantity_unit: string | null;
type: string;
}
@@ -43,7 +52,8 @@ export type ProductEdit = {
unit: string | null;
price: number | null;
price_kg: number | null;
weight: number | null;
quantity: number | null;
quantity_unit: string | null;
type: string | null;
}
@@ -53,7 +63,8 @@ export type ProductInputs = {
unit: string | null;
price: number | null;
price_kg: number | null;
weight: number | null;
quantity: number | null;
quantity_unit: string | null;
type: string | null;
}
@@ -69,7 +80,8 @@ export function productToProductInputs(product: Product): ProductInputs {
unit: product.unit,
price: product.price,
price_kg: product.price_kg,
weight: product.weight,
quantity: product.quantity,
quantity_unit: product.quantity_unit,
type: product.type,
};
}
@@ -81,7 +93,8 @@ export function productCreateFromProductInputs(productInput: ProductInputs): Pro
unit: productInput.unit!,
price: productInput.price!,
price_kg: productInput.price_kg,
weight: productInput.weight,
quantity: productInput.quantity,
quantity_unit: productInput.quantity_unit,
type: productInput.type!,
}
}