fix/ Filter types order does not reflect current order. (#576)

* fix/ Filter types order does not reflect current order. #569 * bump package * diff approach. removes buggy behaviour * bump
equinor · Feb 1, 2024 · 5e0d9f6 · 5e0d9f6
1 parent 5b27993
commit 5e0d9f6
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 33 deletions.
diff --git a/packages/filter/package.json b/packages/filter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
@@ -42,17 +42,24 @@ export function QuickFilter(): JSX.Element {
 type QuickFilterReadyProps = {
   groups: IFilterGroup[];
 };
+
+type FilterGroups = {
+  groupName: string;
+  isVisible: boolean;
+};
+
 const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
   const { query, setUncheckedValues, uncheckedValues } = useFilterContext();
   const [isFilterExpanded, setIsFilterExpanded] = useState(false);
-  const [visibleFilterGroups, setVisibleFilterGroups] = useState<string[]>(groups.map((s) => s.name));
+  const [allFilterGroups, setFilterOrder] = useState<FilterGroups[]>(
+    groups.map((s) => ({ groupName: s.name, isVisible: true }))
+  );
   const [filterGroupOpen, setFilterGroupOpen] = useState<string | null>(null);
   const handleExpandFilterGroup = (groupName: string) =>
     filterGroupOpen === groupName ? setFilterGroupOpen(null) : setFilterGroupOpen(groupName);
 
   const quickFilterGroups = groups?.filter(({ isQuickFilter }) => isQuickFilter);
 
-  const filterGroups = groups?.map((s) => s.name);
   const toggleFilterIsExpanded = () => {
     setIsFilterExpanded(!isFilterExpanded);
     setFilterGroupOpen(null);
@@ -102,13 +109,7 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
         )}
         <StyledButtonWrapper>
           <FiltersAppliedInfo activeFilters={calculateHiddenFiltersApplied()} />
-          {isFilterExpanded && (
-            <ToggleHideFilterPopover
-              allFilters={filterGroups}
-              setVisibleFilters={setVisibleFilterGroups}
-              visibleFilters={visibleFilterGroups}
-            />
-          )}
+          {isFilterExpanded && <ToggleHideFilterPopover allFilters={allFilterGroups} setFilterOrder={setFilterOrder} />}
 
           <StyledButton onClick={() => clearActiveFilters()}>
             <FilterClearIcon isDisabled={uncheckedValues.map((s) => s.values).flat().length === 0} />
@@ -122,7 +123,11 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
       {isFilterExpanded && (
         <FilterView
           isFetching={query.isFetching}
-          groups={visibleFilterGroups.map((x) => groups.find((s) => s.name === x)).filter(Boolean) as IFilterGroup[]}
+          groups={
+            allFilterGroups
+              .map((x) => groups.find((s) => s.name === x.groupName && x.isVisible === true))
+              .filter(Boolean) as IFilterGroup[]
+          }
         />
       )}
     </StyledWrapper>

diff --git a/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx b/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
@@ -5,32 +5,47 @@ import { ReactSortable } from 'react-sortablejs';
 import { StyledButton, StyledItemWrapper, StyledPopoverList } from './toggleHideFilterPopover.styles';
 
 interface ShowHideFilterButtonProps {
-  allFilters: string[];
-  visibleFilters: string[];
-  setVisibleFilters: (val: string[]) => void;
+  allFilters: FilterType[];
+  setFilterOrder: (val: FilterType[]) => void;
 }
 
-export const ToggleHideFilterPopover = ({
-  setVisibleFilters,
-  visibleFilters,
-  allFilters,
-}: ShowHideFilterButtonProps): JSX.Element => {
+type FilterType = {
+  groupName: string;
+  isVisible: boolean;
+};
+
+export const ToggleHideFilterPopover = ({ allFilters, setFilterOrder }: ShowHideFilterButtonProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const DraggableHandleSelector = 'globalDraggableHandle';
+
+  const listRef = useRef(allFilters.map((s) => ({ id: s.groupName, item: s.groupName })));
 
-  const listRef = useRef(allFilters.map((s) => ({ id: s, item: s })));
+  const updateListOrder = () => {
+    const updatedFilterOrder = listRef.current
+      .filter((refItem) => allFilters.some((filter) => filter.groupName === refItem.item))
+      .map((refItem) => {
+        const correspondingFilter = allFilters.find((filter) => filter.groupName === refItem.item);
+        return {
+          groupName: refItem.item,
+          isVisible: correspondingFilter ? correspondingFilter.isVisible : true,
+        } as FilterType;
+      });
 
-  const handleChange = (val: string) => {
-    if (visibleFilters.includes(val)) {
-      setVisibleFilters([...visibleFilters.filter((s) => s !== val)]);
-    } else {
-      setVisibleFilters([...visibleFilters, val]);
-    }
+    setFilterOrder(updatedFilterOrder);
   };
-  const DraggableHandleSelector = 'globalDraggableHandle';
 
-  const updateList = () =>
-    setVisibleFilters(listRef.current.map((s) => s.item).filter((s) => visibleFilters.includes(s)));
+  const handleCheckboxClick = (val: string) => {
+    const updatedFilters = allFilters.map((filter) => {
+      if (filter.groupName === val) {
+        return { ...filter, isVisible: !filter.isVisible };
+      }
+
+      return filter;
+    });
+
+    setFilterOrder(updatedFilters);
+  };
 
   return (
     <>
@@ -55,15 +70,15 @@ export const ToggleHideFilterPopover = ({
                 setList={(e) => {
                   listRef.current = e;
                 }}
-                onEnd={updateList}
+                onEnd={updateListOrder}
               >
                 {listRef.current.map(({ item }) => (
                   <StyledItemWrapper className={DraggableHandleSelector} key={item}>
                     <Checkbox
                       size={2}
-                      checked={visibleFilters.includes(item)}
+                      checked={allFilters.some((filter) => filter.groupName === item && filter.isVisible === true)}
                       onChange={() => {
-                        handleChange(item);
+                        handleCheckboxClick(item);
                       }}
                     />
                     <div style={{ textTransform: 'capitalize' }}>{item}</div>

diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",