add shipment forms and start contract from form

2026-02-13 01:12:42 +01:00
parent fe27595931
commit ef7403f213
20 changed files with 553 additions and 312 deletions
--- a/frontend/src/components/Shipments/Modal/index.tsx
+++ b/frontend/src/components/Shipments/Modal/index.tsx
@@ -0,0 +1,115 @@
+import { Button, Group, Modal, MultiSelect, Select, TextInput, type ModalBaseProps } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { DatePickerInput } from "@mantine/dates";
+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";
+
+export type ShipmentModalProps = ModalBaseProps & {
+    currentShipment?: Shipment;
+    handleSubmit: (shipment: ShipmentInputs, id?: number) => void;
+}
+
+export default function ShipmentModal({
+    opened, 
+    onClose, 
+    currentShipment, 
+    handleSubmit
+}: ShipmentModalProps) {
+    const form = useForm<ShipmentInputs>({
+        initialValues: {
+            name: "",
+            date: null,
+            form_id: "",
+            product_ids: []
+        },
+        validate: {
+            name: (value) =>
+                !value ? `${t("a name", {capfirst: true})} ${t('is required')}` : null,
+            date: (value) =>
+                !value ? `${t("a shipment date", {capfirst: true})} ${t('is required')}` : null,
+            form_id: (value) =>
+                !value ? `${t("a form", {capfirst: true})} ${t('is required')}` : null,
+        }
+    });
+
+    useEffect(() => {
+        if (currentShipment) {
+            form.setValues(shipmentToShipmentInputs(currentShipment));
+        }
+    }, [currentShipment]);
+
+    const { data: allForms } = getForms();
+    const { data: allProducts } = getProducts();
+    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]);
+
+    return (
+        <Modal
+            size="50%" 
+            opened={opened}
+            onClose={onClose}
+            title={currentShipment ? t("edit shipment") : t('create shipment')}
+        >
+            <TextInput
+                label={t("shipment name", {capfirst: true})}
+                placeholder={t("shipment name", {capfirst: true})}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps('name')}
+            />
+            <DatePickerInput
+                label={t("shipment date", {capfirst: true})}
+                placeholder={t("shipment date", {capfirst: true})}
+                withAsterisk
+                {...form.getInputProps('date')}
+            />
+            <Select
+                label={t("shipment form", {capfirst: true})}
+                placeholder={t("shipment form", {capfirst: true})}
+                radius="sm"
+                data={formsSelect || []}
+                clearable
+                withAsterisk
+                {...form.getInputProps('form_id')}
+            />
+            <MultiSelect
+                label={t("shipment products", {capfirst: true})}
+                placeholder={t("shipment products", {capfirst: true})}
+                data={productsSelect}
+                clearable
+                {...form.getInputProps('product_ids')}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", {capfirst: true})}
+                    leftSection={<IconCancel/>}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >{t("cancel", {capfirst: true})}</Button>
+                <Button
+                    variant="filled"
+                    aria-label={currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentShipment?.id)
+                            // form.reset();
+                        }
+                    }}
+                >{currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}</Button>
+            </Group>
+        </Modal>
+    );
+}