@onewelcome/react-lib-components 8.14.0 → 8.15.0

package/src/components/DataGrid/DataGridFilters/DataGridFilterService.ts

@@ -19,18 +19,23 @@ import {
   DataGridColumnMetadata,
   DefaultOperators,
   Filter,
-  FilterEditorMode
+  FilterEditorMode,
+  FiltersState
 } from "./DataGridFilters.interfaces";
 
 export const useDataGridFilter = (
   mode: FilterEditorMode,
-  columnsMetadata: DataGridColumnMetadata[]
+  columnsMetadata: DataGridColumnMetadata[],
+  filterState: FiltersState
 ) => {
   const [column, setColumn] = useState("");
   const [operator, setOperator] = useState("");
   const [operators, setOperators] = useState<string[]>(Object.values(DefaultOperators));
   const [values, setValues] = useState<string[]>([]);
   const [pickedValues, setPickedValues] = useState<string[]>([]);
+  const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(
+    []
+  );
 
   //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.
   const mergeCustomValuesWithPredefined = (values: string[], pickedValues: string[]) => {
@@ -45,10 +50,14 @@ export const useDataGridFilter = (
   };
 
   const initialiseFilterValues = (filter?: Filter) => {
+    const allowedColumnMetaData = getAllowedColumnsMetadata(filter);
+
     if (mode === "ADD") {
-      const firstColumnMetadata = columnsMetadata[0];
+      const firstColumnMetadata = allowedColumnMetaData[0];
 
       if (!firstColumnMetadata) {
+        resetFields();
+        setAllowedColumnsMetaData([]);
         return;
       }
 
@@ -78,6 +87,22 @@ export const useDataGridFilter = (
       setPickedValues(value);
       setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));
     }
+
+    setAllowedColumnsMetaData(allowedColumnMetaData);
+  };
+
+  const getAllowedColumnsMetadata = (filter?: Filter) => {
+    return columnsMetadata.filter(value => {
+      if (!value.allowSingleFilterOnly) {
+        return true;
+      }
+
+      return !filterState.filters.find(v => {
+        return mode === "ADD"
+          ? v.column == value.name
+          : v.column == value.name && v.column != filter?.column;
+      });
+    });
   };
 
   return {
@@ -92,6 +117,7 @@ export const useDataGridFilter = (
     values,
     setValues,
     pickedValues,
-    setPickedValues
+    setPickedValues,
+    allowedColumnsMetaData
   };
 };

package/src/components/DataGrid/DataGridFilters/DataGridFilterValueSelect.tsx

@@ -0,0 +1,118 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+import { Option } from "../../Form/Select/SingleSelect/Option";
+import { MultiOption } from "../../Form/Select/MultiSelect/MultiOption";
+import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper";
+import {
+  DataGridColumnMetadata,
+  PopoverTranslations,
+  ValueSelectType
+} from "./DataGridFilters.interfaces";
+
+export type Props = {
+  column: string;
+  columnsMetadata: DataGridColumnMetadata[];
+  values: string[];
+  pickedValues: string[];
+  setValues: (values: React.SetStateAction<string[]>) => void;
+  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
+  translations?: PopoverTranslations;
+};
+
+export const DataGridFilterValueSelect = ({
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  setValues,
+  setPickedValues,
+  translations
+}: Props) => {
+  const {
+    valueSelectLabel = "Value",
+    addNewValueLabel = "Create new",
+    addNewValueButtonTitle = "Add new select value"
+  } = translations || {};
+
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata?.disableAddNew;
+  const valueSelectType = columnMetadata?.valueSelectType;
+
+  const addNewBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
+    title: addNewValueButtonTitle,
+    type: "button"
+  };
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setPickedValues(
+      [...Array.from(e.target.options)]
+        .filter(option => option.selected)
+        .map(option => option.value)
+    );
+  };
+
+  const selectProps = {
+    addNew: disableAddNew
+      ? undefined
+      : {
+          label: addNewValueLabel,
+          onAddNew: (value: string) => {
+            if (value) {
+              setValues(prev => [...prev, value]);
+              setPickedValues(prev => [...prev, value]);
+            }
+          },
+          btnProps: addNewBtnProps
+        },
+    search: {
+      enabled: true,
+      renderThreshold: 0
+    }
+  };
+
+  return ValueSelectType.single === valueSelectType ? (
+    <SelectWrapper
+      label={valueSelectLabel}
+      name={"value"}
+      value={pickedValues[0]}
+      onChange={onChangeHandler}
+      selectProps={selectProps}
+    >
+      {values.map(value => (
+        <Option key={value} value={value}>
+          {value}
+        </Option>
+      ))}
+    </SelectWrapper>
+  ) : (
+    <MultiSelectWrapper
+      label={valueSelectLabel}
+      name={"value"}
+      value={pickedValues}
+      onChange={onChangeHandler}
+      selectProps={selectProps}
+    >
+      {values.map(value => (
+        <MultiOption key={value} value={value}>
+          {value}
+        </MultiOption>
+      ))}
+    </MultiSelectWrapper>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -34,6 +34,10 @@ export type FiltersAction =
       type: "remove";
       payload: { id: string };
     }
+  | {
+      type: "reset";
+      payload: Filter[];
+    }
   | {
       type: "clear";
     };
@@ -58,6 +62,8 @@ export interface DataGridColumnMetadata {
   operators?: string[];
   defaultValues?: string[];
   disableAddNew?: boolean;
+  allowSingleFilterOnly?: boolean;
+  valueSelectType?: ValueSelectType;
 }
 
 export interface PopoverTranslations {
@@ -105,3 +111,8 @@ export interface DateTimeFilter {
   toDate: string;
   type: DateTimeFilterType;
 }
+
+export enum ValueSelectType {
+  single = "single",
+  multi = "multi"
+}

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useRef } from "react";
 import { DataGridFilter } from "./DataGridFilter";
 import classes from "./DataGridToolbar.module.scss";
 import {
@@ -52,8 +52,21 @@ export const DataGridToolbar = ({
   onFiltersClear,
   customEditTagContent
 }: DataGridToolbarProps) => {
-  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =
     useFiltersReducer(filterValues);
+
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (!isFirstRenderRef.current && filterValues) {
+      resetFilters(filterValues);
+    }
+  }, [filterValues]);
+
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
@@ -64,6 +77,7 @@ export const DataGridToolbar = ({
             key={filter.id}
             filter={filter}
             columnsMetadata={columnsMetadata}
+            filterState={state}
             onFilterEdit={filter => {
               editFilter(filter);
               onFilterEdit && onFilterEdit(filter);
@@ -83,6 +97,7 @@ export const DataGridToolbar = ({
             mode="ADD"
             customEditTagContent={customEditTagContent}
             columnsMetadata={columnsMetadata}
+            filterState={state}
             onFilterAdd={filter => {
               addFilter(filter);
               onFilterAdd && onFilterAdd(filter);

package/src/components/DataGrid/DataGridFilters/useFiltersReducer.tsx

@@ -39,6 +39,11 @@ export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
           ...state,
           filters: [...state.filters.filter(value => value.id !== action.payload.id)]
         };
+      case "reset":
+        return {
+          ...state,
+          filters: action.payload
+        };
       case "clear":
         return { ...state, filters: [] };
     }
@@ -60,7 +65,9 @@ export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
 
   const deleteFilter = (id: string) => dispatch({ type: "remove", payload: { id } });
 
+  const resetFilters = (filters: Filter[]) => dispatch({ type: "reset", payload: filters });
+
   const clearFilters = () => dispatch({ type: "clear" });
 
-  return { state, addFilter, deleteFilter, editFilter, clearFilters };
+  return { state, addFilter, deleteFilter, editFilter, resetFilters, clearFilters };
 };