Task modal

epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect.tsx

@@ -0,0 +1,188 @@
+import React from "react";
+import { Box, FormHelperText } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+import Select, { CSSObjectWithLabel } from "react-select";
+import { Palette } from "../../../styles/theme";
+import Option from "./Option";
+import MultiValue from "./MultiValue";
+
+type IFormInputProps = {
+  placeholder?: string;
+  name: string;
+  options: Array<any>;
+  defaultValue?: string[] | undefined;
+  isMulti?: boolean;
+  getOptionLabel: (option: any) => string;
+  getOptionValue: (option: any) => string;
+  helperText?: string | undefined;
+  disabled?: boolean;
+  onHandleChange?: (val: any) => void;
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
+  // menuPortalTarget: HTMLElement | undefined;
+};
+
+const ControlledSelectV2: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  IFormInputProps
+> = (
+  {
+    placeholder,
+    name,
+    options,
+    getOptionLabel,
+    getOptionValue,
+    isMulti,
+    disabled,
+    helperText,
+    onHandleChange,
+    // menuPortalTarget,
+    closeMenuOnSelect,
+    hideSelectedOptions,
+    defaultValue,
+    ...otherProps
+  },
+  ref
+) => {
+  const [selectedOptions, setSelectedOptions] = React.useState<any>([]);
+  const [label, setLabel] = React.useState("");
+
+  const handleChange = (item: any) => {
+    const selected: Array<any> = [];
+    item.map((o: any) => {
+      const val = getOptionValue(o);
+      selected.push(val);
+    });
+    setSelectedOptions(Array.from(new Set<string>(selected)));
+  };
+
+  React.useEffect(() => {
+    setSelectedOptions(Array.from(new Set<string>(defaultValue)));
+  }, [defaultValue]);
+
+  React.useEffect(() => {
+    let title = "";
+    options.map((o) => {
+      if (selectedOptions.includes(getOptionValue(o))) {
+        if (title) {
+          title += ", ";
+        }
+        title += getOptionLabel(o);
+      }
+    });
+    title = title.substring(0, 30);
+    setLabel(title);
+  }, [selectedOptions]);
+
+  const {
+    control,
+    formState: { errors, defaultValues },
+  } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValues?.[name] || ""}
+      render={({ field }) => {
+        const { onChange, value, ref } = field;
+        return (
+          <>
+            <Select
+              placeholder={placeholder}
+              {...field}
+              ref={ref}
+              {...otherProps}
+              options={options}
+              menuPosition="fixed"
+              getOptionValue={getOptionValue}
+              getOptionLabel={getOptionLabel}
+              isSearchable={true}
+              isDisabled={!!disabled}
+              isClearable={false}
+              hideSelectedOptions={!!hideSelectedOptions}
+              closeMenuOnSelect={!!closeMenuOnSelect}
+              filterProps={{
+                selectedOptions,
+                options,
+                getOptionLabel,
+                getOptionValue,
+                label,
+              }}
+              components={{
+                Option,
+                MultiValueRemove: () => null,
+                MultiValue,
+              }}
+              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);
+                if (onHandleChange !== undefined) onHandleChange(v);
+                handleChange(val);
+                return onChange(v);
+              }}
+              menuPortalTarget={document.body}
+              styles={{
+                option: (baseStyles, state) => {
+                  return {
+                    ...baseStyles,
+                    backgroundColor: Palette.white,
+                    color: Palette.primary.accent.light,
+                  };
+                },
+                control: (baseStyles, state) => {
+                  return {
+                    ...baseStyles,
+                    borderColor: !!errors[name]
+                      ? "#d32f2f"
+                      : 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",
+                }),
+                multiValue(base, props) {
+                  return {
+                    backgroundColor: Palette.white,
+                  };
+                },
+              }}
+            ></Select>
+            {helperText && (
+              <FormHelperText
+                error={true}
+                className="MuiFormHelperText-sizeSmall"
+                style={{ marginInline: "14px" }}
+              >
+                {String(errors[name]?.message || "")}
+              </FormHelperText>
+            )}
+          </>
+        );
+      }}
+    />
+  );
+};
+
+export default React.forwardRef(ControlledSelectV2);

epictrack-web/src/components/shared/controlledInputComponents/MultiValue.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { MultiValueProps } from "react-select";
+import { Box } from "@mui/material";
+import { ETCaption2 } from "..";
+import { Palette } from "../../../styles/theme";
+
+const MultiValue = ({ data, index, selectProps }: MultiValueProps) => {
+  const { filterProps } = selectProps;
+
+  // console.log(filterProps);
+
+  return (
+    <>
+      {index === 0 && selectProps.value && (
+        <Box
+          sx={{
+            background: Palette.white,
+          }}
+          key={index}
+        >
+          <ETCaption2>{filterProps?.label}</ETCaption2>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default MultiValue;

epictrack-web/src/components/shared/controlledInputComponents/Option.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Box, Checkbox } from "@mui/material";
+import { components, OptionProps } from "react-select";
+
+const Option = ({
+  getStyles,
+  isDisabled,
+  isFocused,
+  children,
+  innerProps,
+  isMulti,
+  ...rest
+}: OptionProps) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+  const { filterProps } = rest.selectProps;
+
+  React.useEffect(() => {
+    if (filterProps?.selectedOptions && filterProps.getOptionValue) {
+      const val = filterProps.getOptionValue(rest.data);
+      setIsSelected(filterProps?.selectedOptions.indexOf(val) > -1);
+    }
+  }, [filterProps?.selectedOptions]);
+
+  return (
+    <Box>
+      <components.Option
+        {...rest}
+        isMulti={isMulti}
+        isDisabled={isDisabled}
+        isFocused={isFocused}
+        isSelected={isSelected}
+        getStyles={getStyles}
+        innerProps={innerProps}
+      >
+        <Checkbox checked={isSelected} />
+        {children}
+      </components.Option>
+    </Box>
+  );
+};
+
+export default Option;

epictrack-web/src/components/shared/filterSelect/type.ts

@@ -15,11 +15,15 @@ declare module "react-select/dist/declarations/src/Select" {
     // Marking as optional here to not raise errors for ControlledSelect
     // Make sure to add for FilterSelect
     filterProps?: {
-      applyFilters: () => void;
-      clearFilters: () => void;
+      applyFilters?: () => void;
+      clearFilters?: () => void;
       selectedOptions: any[];
-      onCancel: () => void;
-      variant: "inline" | "bar";
+      options?: any[];
+      onCancel?: () => void;
+      variant?: "inline" | "bar";
+      getOptionLabel?: (option: any) => string;
+      getOptionValue?: (option: any) => string;
+      label?: string;
     };
     filterAppliedCallback?: (value?: string[] | string) => void;
     filterClearedCallback?: (value?: [] | "") => void;