@asaleh37/ui-base 25.6.19-6 → 25.6.21

package/src/components/templates/TransferList.tsx

@@ -1,257 +1,257 @@
-import * as React from "react";
-import List from "@mui/material/List";
-import Card from "@mui/material/Card";
-import CardHeader from "@mui/material/CardHeader";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import Checkbox from "@mui/material/Checkbox";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import { Box, Grid2, ListItemButton } from "@mui/material";
-import TemplateTextField from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
-
-function not(a, b) {
-  return a.filter((value) => b.indexOf(value) === -1);
-}
-
-function intersection(a, b) {
-  return a.filter((value) => b.indexOf(value) !== -1);
-}
-
-function union(a, b) {
-  return [...a, ...not(b, a)];
-}
-
-export type TransferListProps = {
-  valueField: string;
-  displayField: string;
-  options: Array<any>;
-  selectedOptions: Array<any>;
-  setSelection: any;
-};
-
-const TransferList: React.FC<TransferListProps> = ({
-  valueField = "id",
-  displayField = "name",
-  options = [],
-  selectedOptions = [],
-  setSelection,
-}) => {
-  const [checked, setChecked] = React.useState([]);
-  const [left, setLeft] = React.useState<Array<any>>([]);
-  const [right, setRight] = React.useState<Array<any>>([]);
-  const [leftFilterValue, setLeftFilterValue] = React.useState<string>("");
-  const [rightFilterValue, setRightFilterValue] = React.useState<string>("");
-
-  const leftChecked = intersection(checked, left);
-  const rightChecked = intersection(checked, right);
-
-  React.useEffect(() => {
-    if (options) {
-      setLeft([...options]);
-    }
-  }, [options]);
-  React.useEffect(() => {
-    if (selectedOptions) {
-    setRight([...selectedOptions]);
-    }
-  }, [selectedOptions]);
-
-  const handleToggle = (value) => () => {
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
-
-    setChecked(newChecked);
-  };
-
-  const numberOfChecked = (items) => intersection(checked, items).length;
-
-  const handleToggleAll = (items) => () => {
-    if (numberOfChecked(items) === items.length) {
-      setChecked(not(checked, items));
-    } else {
-      setChecked(union(checked, items));
-    }
-  };
-
-  const handleCheckedRight = () => {
-    setRight((oldState) => {
-      let newState = right.concat(leftChecked);
-      setSelection(newState);
-      return newState;
-    });
-    setLeft(not(left, leftChecked));
-    setChecked(not(checked, leftChecked));
-  };
-
-  const handleCheckedLeft = () => {
-    setLeft(left.concat(rightChecked));
-    setRight((oldState) => {
-      let newState = not(right, rightChecked);
-      setSelection(newState);
-      return newState;
-    });
-    setChecked(not(checked, rightChecked));
-  };
-
-  const customList = (
-    title: string,
-    unfilteredItems: Array<any>,
-    side: "left" | "right"
-  ) => {    
-    const items = unfilteredItems.filter((option: any) => {
-      
-      if (option[displayField]) {
-        const value: string = option[displayField];
-        if (
-          side === "left" &&
-          value
-            .toLocaleLowerCase()
-            .includes(leftFilterValue.toLocaleLowerCase())
-        ) {
-          return true;
-        } else if (
-          side === "right" &&
-          value
-            .toLocaleLowerCase()
-            .includes(rightFilterValue.toLocaleLowerCase())
-        ) {
-          return true;
-        }
-      }
-      return false;
-    });
-    return (
-      <Card sx={{ height: "100%" }}>
-        <CardHeader
-          sx={{ px: 2, py: 1 }}
-          avatar={
-            <Checkbox
-              onClick={handleToggleAll(items)}
-              checked={
-                numberOfChecked(items) === items.length && items.length !== 0
-              }
-              indeterminate={
-                numberOfChecked(items) !== items.length &&
-                numberOfChecked(items) !== 0
-              }
-              disabled={items.length === 0}
-              inputProps={{
-                "aria-label": "all items selected",
-              }}
-            />
-          }
-          title={title}
-          subheader={`${numberOfChecked(unfilteredItems)} / ${
-            unfilteredItems.length
-          } Selected`}
-        />
-        <Box sx={{ width: "100%", padding: 1 }}>
-          <TemplateTextField
-            fullWidth
-            label="search"
-            value={side === "left" ? leftFilterValue : rightFilterValue}
-            onChange={(event) => {
-              if (side === "left") {
-                setLeftFilterValue(event.target.value);
-              } else {
-                setRightFilterValue(event.target.value);
-              }
-            }}
-          />
-        </Box>
-        <Divider />
-        <List
-          sx={{
-            width: "100%",
-            height: "100%",
-            bgcolor: "secondary",
-            overflow: "auto",
-          }}
-          dense
-          component="div"
-          role="list"
-        >
-          {items.map((value) => {
-            const labelId = `transfer-list-all-item-${value[valueField]}-label`;
-
-            return (
-              <ListItemButton
-                key={value[valueField]}
-                role="listitem"
-                onClick={handleToggle(value)}
-                sx={{ cursor: "pointer" }}
-              >
-                <ListItemIcon>
-                  <Checkbox
-                    checked={checked.indexOf(value) !== -1}
-                    tabIndex={-1}
-                    disableRipple
-                  />
-                </ListItemIcon>
-                <ListItemText
-                  id={value[valueField]}
-                  primary={value[displayField]}
-                />
-              </ListItemButton>
-            );
-          })}
-        </List>
-      </Card>
-    );
-  };
-  return (
-    <Grid2
-      container
-      spacing={2}
-      sx={{
-        flexGrow: 1,
-        overflow: "auto",
-        margin: 1,
-        display: "flex",
-        width: "100%",
-      }}
-      justifyContent="center"
-      alignItems="center"
-    >
-      <Grid2 sx={{ height: "100%", flex: 1 }}>
-        {customList("Available Items", left, "left")}
-      </Grid2>
-      <Grid2>
-        <Grid2 container direction="column" alignItems="center">
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right"
-          >
-            &gt;
-          </Button>
-          <Button
-            sx={{ my: 0.5 }}
-            variant="outlined"
-            size="small"
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left"
-          >
-            &lt;
-          </Button>
-        </Grid2>
-      </Grid2>
-      <Grid2 sx={{ height: "100%", flex: 1 }}>
-        {customList("Currently Selected", right, "right")}
-      </Grid2>
-    </Grid2>
-  );
-};
-
-export default TransferList;
+import * as React from "react";
+import List from "@mui/material/List";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Checkbox from "@mui/material/Checkbox";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import { Box, Grid2, ListItemButton } from "@mui/material";
+import TemplateTextField from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+
+function not(a, b) {
+  return a.filter((value) => b.indexOf(value) === -1);
+}
+
+function intersection(a, b) {
+  return a.filter((value) => b.indexOf(value) !== -1);
+}
+
+function union(a, b) {
+  return [...a, ...not(b, a)];
+}
+
+export type TransferListProps = {
+  valueField: string;
+  displayField: string;
+  options: Array<any>;
+  selectedOptions: Array<any>;
+  setSelection: any;
+};
+
+const TransferList: React.FC<TransferListProps> = ({
+  valueField = "id",
+  displayField = "name",
+  options = [],
+  selectedOptions = [],
+  setSelection,
+}) => {
+  const [checked, setChecked] = React.useState([]);
+  const [left, setLeft] = React.useState<Array<any>>([]);
+  const [right, setRight] = React.useState<Array<any>>([]);
+  const [leftFilterValue, setLeftFilterValue] = React.useState<string>("");
+  const [rightFilterValue, setRightFilterValue] = React.useState<string>("");
+
+  const leftChecked = intersection(checked, left);
+  const rightChecked = intersection(checked, right);
+
+  React.useEffect(() => {
+    if (options) {
+      setLeft([...options]);
+    }
+  }, [options]);
+  React.useEffect(() => {
+    if (selectedOptions) {
+    setRight([...selectedOptions]);
+    }
+  }, [selectedOptions]);
+
+  const handleToggle = (value) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    setChecked(newChecked);
+  };
+
+  const numberOfChecked = (items) => intersection(checked, items).length;
+
+  const handleToggleAll = (items) => () => {
+    if (numberOfChecked(items) === items.length) {
+      setChecked(not(checked, items));
+    } else {
+      setChecked(union(checked, items));
+    }
+  };
+
+  const handleCheckedRight = () => {
+    setRight((oldState) => {
+      let newState = right.concat(leftChecked);
+      setSelection(newState);
+      return newState;
+    });
+    setLeft(not(left, leftChecked));
+    setChecked(not(checked, leftChecked));
+  };
+
+  const handleCheckedLeft = () => {
+    setLeft(left.concat(rightChecked));
+    setRight((oldState) => {
+      let newState = not(right, rightChecked);
+      setSelection(newState);
+      return newState;
+    });
+    setChecked(not(checked, rightChecked));
+  };
+
+  const customList = (
+    title: string,
+    unfilteredItems: Array<any>,
+    side: "left" | "right"
+  ) => {    
+    const items = unfilteredItems.filter((option: any) => {
+      
+      if (option[displayField]) {
+        const value: string = option[displayField];
+        if (
+          side === "left" &&
+          value
+            .toLocaleLowerCase()
+            .includes(leftFilterValue.toLocaleLowerCase())
+        ) {
+          return true;
+        } else if (
+          side === "right" &&
+          value
+            .toLocaleLowerCase()
+            .includes(rightFilterValue.toLocaleLowerCase())
+        ) {
+          return true;
+        }
+      }
+      return false;
+    });
+    return (
+      <Card sx={{ height: "100%" }}>
+        <CardHeader
+          sx={{ px: 2, py: 1 }}
+          avatar={
+            <Checkbox
+              onClick={handleToggleAll(items)}
+              checked={
+                numberOfChecked(items) === items.length && items.length !== 0
+              }
+              indeterminate={
+                numberOfChecked(items) !== items.length &&
+                numberOfChecked(items) !== 0
+              }
+              disabled={items.length === 0}
+              inputProps={{
+                "aria-label": "all items selected",
+              }}
+            />
+          }
+          title={title}
+          subheader={`${numberOfChecked(unfilteredItems)} / ${
+            unfilteredItems.length
+          } Selected`}
+        />
+        <Box sx={{ width: "100%", padding: 1 }}>
+          <TemplateTextField
+            fullWidth
+            label="search"
+            value={side === "left" ? leftFilterValue : rightFilterValue}
+            onChange={(event) => {
+              if (side === "left") {
+                setLeftFilterValue(event.target.value);
+              } else {
+                setRightFilterValue(event.target.value);
+              }
+            }}
+          />
+        </Box>
+        <Divider />
+        <List
+          sx={{
+            width: "100%",
+            height: "100%",
+            bgcolor: "secondary",
+            overflow: "auto",
+          }}
+          dense
+          component="div"
+          role="list"
+        >
+          {items.map((value) => {
+            const labelId = `transfer-list-all-item-${value[valueField]}-label`;
+
+            return (
+              <ListItemButton
+                key={value[valueField]}
+                role="listitem"
+                onClick={handleToggle(value)}
+                sx={{ cursor: "pointer" }}
+              >
+                <ListItemIcon>
+                  <Checkbox
+                    checked={checked.indexOf(value) !== -1}
+                    tabIndex={-1}
+                    disableRipple
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={value[valueField]}
+                  primary={value[displayField]}
+                />
+              </ListItemButton>
+            );
+          })}
+        </List>
+      </Card>
+    );
+  };
+  return (
+    <Grid2
+      container
+      spacing={2}
+      sx={{
+        flexGrow: 1,
+        overflow: "auto",
+        margin: 1,
+        display: "flex",
+        width: "100%",
+      }}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Grid2 sx={{ height: "100%", flex: 1 }}>
+        {customList("Available Items", left, "left")}
+      </Grid2>
+      <Grid2>
+        <Grid2 container direction="column" alignItems="center">
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={handleCheckedRight}
+            disabled={leftChecked.length === 0}
+            aria-label="move selected right"
+          >
+            &gt;
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={handleCheckedLeft}
+            disabled={rightChecked.length === 0}
+            aria-label="move selected left"
+          >
+            &lt;
+          </Button>
+        </Grid2>
+      </Grid2>
+      <Grid2 sx={{ height: "100%", flex: 1 }}>
+        {customList("Currently Selected", right, "right")}
+      </Grid2>
+    </Grid2>
+  );
+};
+
+export default TransferList;

package/src/components/templates/Window/ConfirmationWindow.tsx

@@ -1,55 +1,55 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-interface ConfirmationWindowProps {
-  open: boolean;
-  setOpen: Function;
-  title: string;
-  body: string;
-  onConfirmationCallBk: Function;
-}
-const ConfirmationWindow: React.FC<ConfirmationWindowProps> = (props) => {
-  const handleClose = () => {
-    props.setOpen(false);
-  };
-  const { t } = useTranslation();
-  return (
-    <Dialog open={props.open}>
-      <DialogTitle>{props.title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{props.body}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            handleClose();
-          }}
-        >
-          {t("NO_LABEL")}
-        </Button>
-        <Button
-          variant="contained"
-          color="error"
-          onClick={() => {
-            props.onConfirmationCallBk();
-            handleClose();
-          }}
-          autoFocus
-        >
-          {t("YES_LABEL")}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ConfirmationWindow;
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmationWindowProps {
+  open: boolean;
+  setOpen: Function;
+  title: string;
+  body: string;
+  onConfirmationCallBk: Function;
+}
+const ConfirmationWindow: React.FC<ConfirmationWindowProps> = (props) => {
+  const handleClose = () => {
+    props.setOpen(false);
+  };
+  const { t } = useTranslation();
+  return (
+    <Dialog open={props.open}>
+      <DialogTitle>{props.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{props.body}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            handleClose();
+          }}
+        >
+          {t("NO_LABEL")}
+        </Button>
+        <Button
+          variant="contained"
+          color="error"
+          onClick={() => {
+            props.onConfirmationCallBk();
+            handleClose();
+          }}
+          autoFocus
+        >
+          {t("YES_LABEL")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationWindow;