Merge pull request #1507 from jadmsaadaot/TRACK-task#1497-D

Add validation to special fields
bcgov · Dec 28, 2023 · cade487 · cade487
2 parents d7968d3 + 9e99d9b
commit cade487
Show file tree

Hide file tree

Showing 4 changed files with 543 additions and 375 deletions.
diff --git a/epictrack-web/src/components/shared/TrackSelect/index.tsx b/epictrack-web/src/components/shared/TrackSelect/index.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import Select, { CSSObjectWithLabel } from "react-select";
+import { FormHelperText } from "@mui/material";
+import { Palette } from "../../../styles/theme";
+import { OptionType } from "../filterSelect/type";
+
+type SelectProps = {
+  options: OptionType[];
+  getOptionLabel: (option: any) => string;
+  getOptionValue: (option: any) => string;
+  isMulti?: boolean;
+  disabled?: boolean;
+  value: any;
+  onChange: (val: any) => void;
+  error?: boolean;
+  helperText?: string;
+};
+
+const TrackSelect: React.FC<SelectProps> = ({
+  options,
+  getOptionLabel,
+  getOptionValue,
+  isMulti,
+  disabled,
+  value,
+  onChange,
+  error = false,
+  helperText = "",
+  ...rest
+}) => {
+  return (
+    <>
+      <Select
+        options={options}
+        menuPosition="fixed"
+        getOptionValue={getOptionValue}
+        getOptionLabel={getOptionLabel}
+        isSearchable={true}
+        isDisabled={!!disabled}
+        isClearable={true}
+        value={options.filter((c) => {
+          if (isMulti && value) {
+            return (value as any[])
+              .map((p) => p.toString())
+              .includes(getOptionValue(c));
+          }
+          return getOptionValue(c) === value?.toString();
+        })}
+        isMulti={isMulti}
+        onChange={(val: any) => {
+          let v;
+          if (isMulti) v = val.map((v: any) => getOptionValue(v));
+          else v = getOptionValue(val);
+          onChange(v);
+        }}
+        menuPortalTarget={document.body}
+        styles={{
+          control: (baseStyles, state) => {
+            return {
+              ...baseStyles,
+              borderColor: error
+                ? "#d32f2f"
+                : state.isFocused
+                ? Palette.primary.accent.light
+                : Palette.neutral.accent.light,
+              borderWidth: "2px",
+              fontSize: "16px",
+              lineHeight: "24px",
+              backgroundColor: !!disabled
+                ? Palette.neutral.bg.dark
+                : Palette.white,
+              fontWeight: "400",
+              "&:hover": {
+                borderColor: Palette.primary.accent.light,
+              },
+            };
+          },
+          menuPortal: (base: CSSObjectWithLabel) => ({
+            ...base,
+            zIndex: 99999,
+            fontSize: "1rem",
+          }),
+        }}
+        {...rest}
+      />
+      {error && (
+        <FormHelperText
+          error
+          className="MuiFormHelperText-sizeSmall"
+          style={{ marginInline: "14px" }}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+    </>
+  );
+};
+
+export default TrackSelect;
diff --git a/epictrack-web/src/components/shared/specialField/components/InLineDatePicker.tsx b/epictrack-web/src/components/shared/specialField/components/InLineDatePicker.tsx
@@ -1,62 +1,60 @@
-import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import dayjs from "dayjs";
-import {
-  MRT_Cell,
-  MRT_Column,
-  MRT_Row,
-  MRT_TableInstance,
-} from "material-react-table";
-import React from "react";
-import { SpecialField } from "../type";
-
-interface Props {
-  cell: MRT_Cell<SpecialField>;
-  column: MRT_Column<SpecialField>;
-  row: MRT_Row<SpecialField>;
-  table: MRT_TableInstance<SpecialField>;
-  isCreating: boolean;
-  name: string;
-}
-
-export const InLineDatePicker = ({
-  cell,
-  column,
-  row,
-  table,
-  isCreating,
-  name,
-}: Props) => {
-  const onBlur = (newValue: any) => {
-    row._valuesCache[column.id] = newValue;
-    if (isCreating) {
-      table.setCreatingRow(row);
-    } else {
-      table.setEditingRow(row);
-    }
-  };
-
-  const value = dayjs(row._valuesCache[column.id]);
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DatePicker
-        value={value.isValid() ? value : null}
-        onChange={onBlur}
-        disableFuture
-        slotProps={{
-          textField: {
-            id: name,
-            name: name,
-            placeholder: "Today",
-            inputProps: {
-              sx: {
-                fontSize: "14px",
-              },
-            },
-          },
-        }}
-      />
-    </LocalizationProvider>
-  );
-};
+import React from "react";
+import dayjs from "dayjs";
+import {
+  MRT_Cell,
+  MRT_Column,
+  MRT_Row,
+  MRT_TableInstance,
+} from "material-react-table";
+import { SpecialField } from "../type";
+import TrackDatePicker from "../../DatePicker";
+
+interface Props {
+  column: MRT_Column<SpecialField>;
+  row: MRT_Row<SpecialField>;
+  table: MRT_TableInstance<SpecialField>;
+  isCreating: boolean;
+  name: string;
+  error?: boolean;
+}
+
+export const InLineDatePicker = ({
+  column,
+  row,
+  table,
+  isCreating,
+  name,
+  error = false,
+}: Props) => {
+  const onBlur = (newValue: any) => {
+    row._valuesCache[column.id] = newValue;
+    if (isCreating) {
+      table.setCreatingRow(row);
+    } else {
+      table.setEditingRow(row);
+    }
+  };
+
+  const value = dayjs(row._valuesCache[column.id]);
+
+  return (
+    <TrackDatePicker
+      value={value.isValid() ? value : null}
+      onChange={onBlur}
+      disableFuture
+      slotProps={{
+        textField: {
+          id: name,
+          name: name,
+          placeholder: "Today",
+          inputProps: {
+            sx: {
+              fontSize: "14px",
+            },
+          },
+          error: error,
+        },
+      }}
+    />
+  );
+};