add users and fix modal

frontend/src/components/Forms/Modal/index.tsx

@@ -51,7 +51,7 @@ export default function FormModal({
 
     useEffect(() => {
         if (currentForm) {
-            form.initialize({
+            form.setValues({
                 ...currentForm,
                 start: currentForm.start || null,
                 end: currentForm.end || null,
@@ -93,6 +93,7 @@ export default function FormModal({
 
     return (
         <Modal
+            size="50%" 
             opened={opened}
             onClose={onClose}
             title={currentForm ? t("edit form") : t('create form')}
@@ -206,8 +207,10 @@ export default function FormModal({
                     aria-label={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
                     onClick={() => {
                         form.validate();
-                        if (form.isValid())
+                        if (form.isValid()) {
                             handleSubmit(form.getValues(), currentForm?.id)
+                            form.reset();
+                        }
                     }}
                 >{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>
             </Group>

frontend/src/components/Forms/Row/index.tsx

@@ -8,29 +8,16 @@ import FormModal from "@/components/Forms/Modal";
 
 export type FormRowProps = {
     form: Form;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (form: FormInputs, id?: number) => void;
 }
 
 export default function FormRow({
     form, 
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: FormRowProps) {
     const deleteMutation = deleteForm();
     const navigate = useNavigate();
-    const {data: currentForm, isPending} = getForm(form.id);
-    
+
     return (
         <Table.Tr key={form.id}>
-            <FormModal
-                opened={isEdit} 
-                onClose={closeModal} 
-                currentForm={currentForm} 
-                handleSubmit={handleSubmit}
-            />
             <Table.Td>{form.name}</Table.Td>
             <Table.Td>{form.season}</Table.Td>
             <Table.Td>{form.start}</Table.Td>

frontend/src/components/Productors/Filter/index.tsx

@@ -21,6 +21,7 @@ export default function ProductorsFilter({
     const defaultTypes = useMemo(() => {
         return filters.getAll("types")
     }, [filters]);
+    
     return (
         <Group>
             <MultiSelect

frontend/src/components/Productors/Modal/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Modal, Text, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
@@ -34,13 +34,13 @@ export function ProductorModal({
                 !value ? `${t("type", {capfirst: true})} ${t('is required')}` : null
         }
     });
-
+    
     useEffect(() => {
         if (currentProductor) {
-            form.initialize({
+            form.setValues({
                 ...currentProductor,
             });
-        }
+        }    
     }, [currentProductor]);
     
     return (
@@ -99,6 +99,7 @@ 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>

frontend/src/components/Productors/Row/index.tsx

@@ -1,36 +1,22 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
-import type { Productor, ProductorInputs } from "@/services/resources/productors";
-import { ProductorModal } from "@/components/Productors/Modal";
-import { deleteProductor, getProductor } from "@/services/api";
+import type { Productor } from "@/services/resources/productors";
+import { deleteProductor } from "@/services/api";
 import { useNavigate } from "react-router";
 
 export type ProductorRowProps = {
     productor: Productor;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (productor: ProductorInputs, id?: number) => void;
 }
 
 export default function ProductorRow({
     productor,
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: ProductorRowProps) {
     const deleteMutation = deleteProductor();
     const navigate = useNavigate();
-    const {data: currentProductor, isPending} = getProductor(productor.id);
 
     return (
         <Table.Tr key={productor.id}>
-            <ProductorModal
-                opened={isEdit}
-                onClose={closeModal}
-                currentProductor={currentProductor}
-                handleSubmit={handleSubmit}
-            />
             <Table.Td>{productor.name}</Table.Td>
             <Table.Td>{productor.type}</Table.Td>
             <Table.Td>{productor.address}</Table.Td>

frontend/src/components/Products/Filter/index.tsx

@@ -21,6 +21,7 @@ export default function ProductsFilters({
     const defaultProductors = useMemo(() => {
         return filters.getAll("productors")
     }, [filters]);
+    
     return (
         <Group>
             <MultiSelect

frontend/src/components/Products/Modal/index.tsx

@@ -44,7 +44,7 @@ export function ProductModal({
 
     useEffect(() => {
         if (currentProduct) {
-            form.initialize(productToProductInputs(currentProduct));
+            form.setValues(productToProductInputs(currentProduct));
         }
     }, [currentProduct]);
     
@@ -136,8 +136,10 @@ export function ProductModal({
                     onClick={() => {
                         form.validate();
                         console.log(form.isValid(), form.getValues())
-                        if (form.isValid())
+                        if (form.isValid()) {
                             handleSubmit(form.getValues(), currentProduct?.id)
+                            form.reset();
+                        }
                     }}
                 >{currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}</Button>
             </Group>

frontend/src/components/Products/Row/index.tsx

@@ -8,29 +8,16 @@ import { useNavigate } from "react-router";
 
 export type ProductRowProps = {
     product: Product;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (product: ProductInputs, id?: number) => void;
 }
 
 export default function ProductRow({
     product,
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: ProductRowProps) {
     const deleteMutation = deleteProduct();
     const navigate = useNavigate();
-    const {data: currentProduct, isPending} = getProduct(product.id);
 
     return (
         <Table.Tr key={product.id}>
-            <ProductModal
-                opened={isEdit}
-                onClose={closeModal}
-                currentProduct={currentProduct}
-                handleSubmit={handleSubmit}
-            />
             <Table.Td>{product.name}</Table.Td>
             <Table.Td>{ProductType[product.type]}</Table.Td>
             <Table.Td>{product.price}</Table.Td>

frontend/src/components/Users/Filter/index.tsx

@@ -0,0 +1,34 @@
+import { Group, MultiSelect } from "@mantine/core";
+import { useMemo } from "react";
+import { t } from "@/config/i18n";
+
+export type UserFiltersProps = {
+    names: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+}
+
+export default function UserFilters({
+    names,
+    filters, 
+    onFilterChange
+}: UserFiltersProps) {
+    const defaultNames = useMemo(() => {
+        return filters.getAll("names")
+    }, [filters]);
+    
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by name", {capfirst: true})}
+                placeholder={t("filter by name", {capfirst: true})}
+                data={names}
+                defaultValue={defaultNames}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, 'names')
+                }}
+                clearable
+            />
+        </Group>
+    );
+}

frontend/src/components/Users/Modal/index.tsx

@@ -0,0 +1,87 @@
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useForm } from "@mantine/form";
+import { IconCancel } from "@tabler/icons-react";
+import { type User, type UserInputs } from "@/services/resources/users";
+import { useEffect } from "react";
+
+export type UserModalProps = ModalBaseProps & {
+    currentUser?: User;
+    handleSubmit: (user: UserInputs, id?: number) => void;
+}
+
+export function UserModal({
+    opened, 
+    onClose, 
+    currentUser, 
+    handleSubmit
+}: UserModalProps) {
+    const form = useForm<UserInputs>({
+        initialValues: {
+            name: "",
+            email: ""
+        },
+        validate: {
+            name: (value) =>
+                !value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
+            email: (value) =>
+                !value ? `${t("email", {capfirst: true})} ${t('is required')}` : null,
+        }
+    });
+
+    useEffect(() => {
+        if (currentUser) {
+            form.setValues(currentUser);
+        }
+    }, [currentUser]);
+
+    return (
+        <Modal
+            size="50%" 
+            opened={opened}
+            onClose={onClose}
+            title={t("create user", {capfirst: true})}
+        >
+            <Title order={4}>{t("informations", {capfirst: true})}</Title>
+            <TextInput
+                label={t("user name", {capfirst: true})}
+                placeholder={t("user name", {capfirst: true})}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps('name')}
+            />
+             <TextInput
+                label={t("user email", {capfirst: true})}
+                placeholder={t("user email", {capfirst: true})}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps('email')}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", {capfirst: true})}
+                    leftSection={<IconCancel/>}
+                    onClick={() => {
+                        form.reset();
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >{t("cancel", {capfirst: true})}</Button>
+                <Button
+                    variant="filled"
+                    aria-label={currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}
+                    onClick={() => {
+                        form.validate();
+                        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>
+            </Group>
+        </Modal>
+    );
+}

frontend/src/components/Users/Row/index.tsx

@@ -0,0 +1,52 @@
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+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";
+
+export type UserRowProps = {
+    user: User;
+}
+
+export default function UserRow({
+    user,
+}: UserRowProps) {
+    const deleteMutation = deleteUser();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={user.id}>
+            <Table.Td>{user.name}</Table.Td>
+            <Table.Td>{user.email}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit user", {capfirst: true})}>
+                    <ActionIcon
+                        size="sm" 
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/dashboard/users/${user.id}/edit`);
+                        }}
+                    >
+                        <IconEdit/>
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove user", {capfirst: true})}>
+                    <ActionIcon 
+                        color="red" 
+                        size="sm" 
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(user.id);
+                        }}
+                    >
+                        <IconX/>
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+
+    );
+}