Merge branch 'feature/MYD-101' into 'develop'

MYD-101/Add date to filter

See merge request !86

src/shared/sections/order/all-orders/order-table-toolbar.tsx

 import React, { useCallback } from "react";
-
 import Stack from "@mui/material/Stack";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { formHelperTextClasses } from "@mui/material/FormHelperText";
-
 import Iconify from "../../../components/iconify";
 import CustomPopover, { usePopover } from "../../../components/custom-popover";
 
@@ -24,14 +20,12 @@ import ColumnView from "../column-view";
 type Props = {
   filters: IOrderTableFilters;
   onFilters: (name: string, value: IOrderTableFilterValue) => void;
-  //
   dateError: boolean;
 };
 
 export default function OrderTableToolbar({
   filters,
   onFilters,
-  dateError,
 }: Props) {
   const popover = usePopover();
 
@@ -42,12 +36,6 @@ export default function OrderTableToolbar({
     [onFilters]
   );
 
-  const handleFilterStartDate = useCallback(
-    (newValue: Date | null) => {
-      onFilters("startDate", newValue);
-    },
-    [onFilters]
-  );
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -66,12 +54,6 @@ export default function OrderTableToolbar({
   const handleCloseColumn = () => {
     setOpenColumn(false);
   };
-  const handleFilterEndDate = useCallback(
-    (newValue: Date | null) => {
-      onFilters("endDate", newValue);
-    },
-    [onFilters]
-  );
 
   return (
     <>
@@ -117,6 +99,7 @@ export default function OrderTableToolbar({
             <Dialog
               open={open}
               onClose={handleClose}
+              fullWidth
               PaperProps={{
                 component: "form",
                 onSubmit: (event: React.FormEvent<HTMLFormElement>) => {

src/shared/sections/order/filter-view.tsx

 import React, { useState } from "react";
 import {
-  Card,
   Grid,
   Stack,
   TextField,
   IconButton,
-  InputAdornment,
-  Checkbox,
-  FormControlLabel,
+  MenuItem,
+  Select,
 } from "@mui/material";
-import Autocomplete from '@mui/material/Autocomplete';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
+import Autocomplete from "@mui/material/Autocomplete";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
 import LoadingButton from "@mui/lab/LoadingButton";
 
 interface Entry {
-    colonnes: string;
-    operateur: string;
-    valeur: string;
+  colonnes: string;
+  operateur: string;
+  valeur: string | Date;
 }
 
+const OPERATEURS_PAR_COLONNES: { [key: string]: string[] } = {
+  date: ["supérieur à", "inférieur à", "égal à"],
+  commande: ["contient", "commence avec", "se termine par"],
+  client: ["contient", "commence avec", "se termine par"],
+  Article: ["contient", "commence avec", "se termine par"],
+  prix: ["supérieur à", "inférieur à", "égal à"],
+  origine: ["égal à"],
+};
+
 export default function FilterView() {
-  const [entries, setEntries] = useState<Entry[]>([{ colonnes: "", operateur: "",valeur:"" }]);
-  const [expedition, setExpedition] = useState<string>("");
-  const [expeditionPrice, setExpeditionPrice] = useState<string>("");
-  const [taxe, setTaxe] = useState<string>("");
-  const [frais, setFrais] = useState<string>("");
-  const [coupon, setCoupon] = useState<string>("");
+  const [entries, setEntries] = useState<Entry[]>([
+    { colonnes: "", operateur: "", valeur: "" },
+  ]);
 
   const handleAddEntry = () => {
-    setEntries([...entries, { colonnes: "", operateur: "" ,valeur: "" }]);
+    setEntries([...entries, { colonnes: "", operateur: "", valeur: "" }]);
   };
 
   const handleRemoveEntry = (index: number) => {
@@ -38,75 +42,122 @@ export default function FilterView() {
     setEntries(newEntries);
   };
 
-  const handleInputChange = (index: number, field: keyof Entry, value: string) => {
+  const handleInputChange = (
+    index: number,
+    field: keyof Entry,
+    value: string | Date
+  ) => {
     const newEntries = [...entries];
-    newEntries[index][field] = value;
+    newEntries[index] = { ...newEntries[index], [field]: value };
+    if (field === "colonnes") {
+      const colonne = value as string;
+      const operateurOptions = OPERATEURS_PAR_COLONNES[colonne] || [];
+      newEntries[index].operateur = operateurOptions[0] || "";
+      if (colonne === "origine") {
+        newEntries[index].valeur = "site";
+      }
+    }
     setEntries(newEntries);
   };
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     console.log("Formulaire soumis !");
   };
 
-
   return (
-    <form onSubmit={handleSubmit}>
-     
-        <Stack spacing={1} sx={{ p:5 }}>
-          {entries.map((entry, index) => (
-            <Grid container spacing={1} alignItems="center" key={index}>
-              <Grid item xs={4} md={4}>
-                <Autocomplete
-                  value={entry.colonnes}
-                  onChange={(event, newValue) =>
-                    handleInputChange(index, "colonnes", newValue !== null ? newValue : "")
+    <form onSubmit={handleSubmit} style={{ maxWidth: "100%", padding: "20px" }}>
+      <Stack spacing={1} style={{ marginTop: "40px" }}>
+        {entries.map((entry, index) => (
+          <Grid container spacing={1} alignItems="center" key={index}>
+            <Grid item xs={3}>
+              <Autocomplete
+                value={entry.colonnes}
+                onChange={(_event, newValue: string | null) => {
+                  const colonne = newValue !== null ? newValue : "";
+                  handleInputChange(index, "colonnes", colonne);
+                }}
+                options={[
+                  "date",
+                  "commande",
+                  "client",
+                  "Article",
+                  "prix",
+                  "origine",
+                ]}
+                fullWidth
+                renderInput={(params: any) => (
+                  <TextField {...params} label="Colonnes" />
+                )}
+              />
+            </Grid>
+            <Grid item xs={4}>
+              <Autocomplete
+                value={entry.operateur}
+                onChange={(_event, newValue: string | null) =>
+                  handleInputChange(
+                    index,
+                    "operateur",
+                    newValue !== null ? newValue : ""
+                  )
+                }
+                options={OPERATEURS_PAR_COLONNES[entry.colonnes] || []}
+                fullWidth
+                renderInput={(params: any) => (
+                  <TextField {...params} label="Opérateur" />
+                )}
+              />
+            </Grid>
+            <Grid item xs={3}>
+              {entry.colonnes === "date" ? (
+                <TextField
+                  value={entry.valeur as Date}
+                  type="date"
+                  onChange={(event) =>
+                    handleInputChange(index, "valeur", event.target.value)
                   }
-                  options={["commande", "client", "Article"]}
                   fullWidth
-                  renderInput={(params) => <TextField {...params} label="Colonnes" />}
                 />
-              </Grid>
-              <Grid item xs={4} md={4}>
-                <Autocomplete
-                  value={entry.operateur}
-                  onChange={(event, newValue) =>
-                    handleInputChange(index, "operateur", newValue !== null ? newValue : "")
+              ) : entry.colonnes === "origine" ? (
+                <Select
+                  value={entry.valeur as string}
+                  onChange={(event) =>
+                    handleInputChange(index, "valeur", event.target.value)
                   }
-                  options={["contient", "commence avec", "se termine par"]}
                   fullWidth
-                  renderInput={(params) => <TextField {...params} label="Opérateur" />}
-                />
-              </Grid>
-              <Grid item xs={3} md={2}>
+                >
+                  <MenuItem value="site">Site</MenuItem>
+                  <MenuItem value="en direct">En direct</MenuItem>
+                </Select>
+              ) : (
                 <TextField
-                  value={entry.valeur}
+                  value={entry.valeur as string}
                   onChange={(event) =>
                     handleInputChange(index, "valeur", event.target.value)
                   }
                   fullWidth
-                  label="valeur"
+                  label="Valeur"
                 />
-              </Grid>
-              <Grid item xs={1} md={1} container justifyContent="flex-end">
-                <IconButton onClick={handleAddEntry}>
-                  <AddIcon fontSize="small" />
-                </IconButton>
-              </Grid>
+              )}
+            </Grid>
+            <Grid item xs={2} container alignItems="center">
+              <IconButton onClick={handleAddEntry}>
+                <AddIcon fontSize="small" />
+              </IconButton>
               {index > 0 && (
-                <Grid item xs={1} md={1} container >
-                  <IconButton onClick={() => handleRemoveEntry(index)}>
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
-                </Grid>
+                <IconButton onClick={() => handleRemoveEntry(index)}>
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
               )}
             </Grid>
-
-          ))}
-        </Stack>
-        <LoadingButton type="submit" variant="contained" fullWidth>
-       Filtrer les commandes
-      </LoadingButton>
-    
+          </Grid>
+        ))}
+        <Grid item xs={12} style={{ marginTop: "20px" }}>
+          <LoadingButton type="submit" variant="contained" fullWidth>
+            Filtrer les commandes
+          </LoadingButton>
+        </Grid>
+      </Stack>
     </form>
   );
-}
\ No newline at end of file
+}