389 territory tree filtering needed to avoid visual mess (#1841)

* dfilter esign , filter nonEmpty T * filter editor rights * utils for all filters, implement starred and label filter * ignore upper case, styles * search for included text in label * a bit of style * show also children of filtered nodes * reset filter settins on close * better handling of nonEmpty recursion * layering of filters without highlighting, highlighting for nonEmpty, keeping filter on refetch * mark filtered labels, type for tree with recursion search mark * mark combination of filters * better colors * no results and cancel button * handle scroll on close filter, scroll to different position when filter opened * clean up, redesign filter button * add star to tree node * color for results highlight * bold text for invertedLabel tags
DISSINET · Sep 29, 2023 · 2c73b14 · 2c73b14
1 parent c112587
commit 2c73b14
Show file tree

Hide file tree

Showing 17 changed files with 641 additions and 102 deletions.
diff --git a/packages/client/src/Theme/theme.ts b/packages/client/src/Theme/theme.ts
@@ -55,6 +55,7 @@ const theme = {
     primaryTransparent: "rgba(9,16,52,0.2)",
     modalBg: "rgba(9,16,52,0.3)",
 
+    foundByTreeFilter: "#b4c0e8",
     tableSelection: "#bce5ff",
     tableSelectionHover: "#e0f3ff",
     focusedCheckbox: "rgba(9,16,52,0.1)",

diff --git a/packages/client/src/components/basic/Checkbox/Checkbox.tsx b/packages/client/src/components/basic/Checkbox/Checkbox.tsx
@@ -4,7 +4,7 @@ import {
   MdOutlineCheckBoxOutlineBlank,
 } from "react-icons/md";
 import theme from "Theme/theme";
-import { StyledCheckboxWrapper } from "./CheckboxStyles";
+import { StyledCheckboxWrapper, StyledLabel } from "./CheckboxStyles";
 
 interface Checkbox {
   value: boolean;
@@ -15,6 +15,7 @@ interface Checkbox {
 export const Checkbox: React.FC<Checkbox> = ({
   value,
   onChangeFn,
+  label,
   size = 18,
 }) => {
   const [checked, setChecked] = useState(value);
@@ -46,6 +47,7 @@ export const Checkbox: React.FC<Checkbox> = ({
           }}
         />
       )}
+      <StyledLabel onClick={() => setChecked(!checked)}>{label}</StyledLabel>
     </StyledCheckboxWrapper>
   );
 };
diff --git a/packages/client/src/components/basic/Checkbox/CheckboxStyles.tsx b/packages/client/src/components/basic/Checkbox/CheckboxStyles.tsx
@@ -22,4 +22,6 @@ export const StyledCheckbox = styled.input<StyledCheckbox>`
 export const StyledLabel = styled.label`
   font-size: ${({ theme }) => theme.fontSize["xs"]};
   margin-left: ${({ theme }) => theme.space[1]};
+  user-select: none;
+  cursor: pointer;
 `;
diff --git a/packages/client/src/components/basic/Tag/Tag.tsx b/packages/client/src/components/basic/Tag/Tag.tsx
@@ -1,5 +1,6 @@
 import { EntityEnums } from "@shared/enums";
 import { IEntity } from "@shared/types";
+import theme from "Theme/theme";
 import { useSearchParams } from "hooks";
 import React, { ReactNode, useEffect, useMemo, useRef } from "react";
 import {
@@ -8,6 +9,7 @@ import {
   useDrag,
   useDrop,
 } from "react-dnd";
+import { FaStar } from "react-icons/fa";
 import { setDraggedEntity } from "redux/features/territoryTree/draggedEntitySlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import {
@@ -22,6 +24,8 @@ import {
   StyledElvlWrapper,
   StyledEntityTag,
   StyledLabel,
+  StyledLabelWrap,
+  StyledStarWrap,
   StyledTagWrapper,
 } from "./TagStyles";
 
@@ -72,7 +76,7 @@ export const Tag: React.FC<TagProps> = ({
   borderStyle = "solid",
   button,
   elvlButtonGroup,
-  invertedLabel,
+  invertedLabel = false,
   showOnly,
   fullWidth = false,
   index = -1,
@@ -179,45 +183,50 @@ export const Tag: React.FC<TagProps> = ({
     !disableDoubleClick && appendDetailId(propId);
   };
 
-  const getShortTag = () => {
+  const renderLabel = (labelOnly: boolean = false) => {
+    return (
+      <StyledLabelWrap invertedLabel={invertedLabel}>
+        {isFavorited && (
+          <StyledStarWrap>
+            <FaStar
+              color={theme.color["warning"]}
+              style={{ marginBottom: "0.1rem" }}
+            />
+          </StyledStarWrap>
+        )}
+        <StyledLabel
+          invertedLabel={invertedLabel}
+          status={status}
+          borderStyle={borderStyle}
+          fullWidth={fullWidth}
+          isFavorited={isFavorited}
+          labelOnly={labelOnly}
+          isItalic={labelItalic}
+        >
+          {label}
+        </StyledLabel>
+      </StyledLabelWrap>
+    );
+  };
+
+  const renderShortTag = () => {
     return (
       <>
         {showOnly === "entity" ? (
           <>{renderEntityTag()}</>
         ) : (
-          <>
-            <StyledLabel
-              invertedLabel={invertedLabel}
-              status={status}
-              borderStyle={borderStyle}
-              fullWidth={fullWidth}
-              isFavorited={isFavorited}
-              labelOnly
-              isItalic={labelItalic}
-            >
-              {label}
-            </StyledLabel>
-          </>
+          <>{renderLabel(true)}</>
         )}
         {button && renderButton()}
       </>
     );
   };
 
-  const getFullTag = () => {
+  const renderFullTag = () => {
     return (
       <>
         {renderEntityTag()}
-        <StyledLabel
-          invertedLabel={invertedLabel}
-          status={status}
-          borderStyle={borderStyle}
-          fullWidth={fullWidth}
-          isFavorited={isFavorited}
-          isItalic={labelItalic}
-        >
-          {label}
-        </StyledLabel>
+        {renderLabel()}
         {elvlButtonGroup && renderElvl()}
         {button && renderButton()}
       </>
@@ -236,7 +245,7 @@ export const Tag: React.FC<TagProps> = ({
         onClick={(e: React.MouseEvent) => e.stopPropagation()}
         onDoubleClick={(e: React.MouseEvent) => onDoubleClick(e)}
       >
-        {showOnly ? <>{getShortTag()}</> : <>{getFullTag()}</>}
+        {showOnly ? <>{renderShortTag()}</> : <>{renderFullTag()}</>}
       </StyledTagWrapper>
     </>
   );

diff --git a/packages/client/src/components/basic/Tag/TagStyles.tsx b/packages/client/src/components/basic/Tag/TagStyles.tsx
@@ -39,14 +39,47 @@ export const StyledEntityTag = styled.div<StyledEntityTag>`
   width: ${({ theme }) => theme.space[7]};
 `;
 
+const getColor = (
+  invertedLabel: boolean,
+  isFavorited: boolean,
+  isItalic: boolean
+): string => {
+  if (invertedLabel) {
+    if (isFavorited) {
+      return "warning";
+    } else {
+      return isItalic ? "grey" : "white";
+    }
+  } else {
+    return isItalic ? "greyer" : "black";
+  }
+};
+
+interface StyledLabelWrap {
+  invertedLabel: boolean;
+}
+export const StyledLabelWrap = styled.div<StyledLabelWrap>`
+  display: inline-flex;
+  overflow: hidden;
+  background-color: ${({ theme, invertedLabel }) =>
+    invertedLabel ? theme.color["primary"] : theme.color["white"]};
+`;
+interface StyledStarWrap {}
+export const StyledStarWrap = styled.div<StyledStarWrap>`
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  margin-left: 0.2rem;
+`;
+
 interface StyledLabel {
-  invertedLabel?: boolean;
+  invertedLabel: boolean;
   borderStyle: "solid" | "dashed" | "dotted";
   fullWidth: boolean;
   status: string;
   isFavorited: boolean;
   labelOnly?: boolean;
-  isItalic?: boolean;
+  isItalic: boolean;
 }
 export const StyledLabel = styled.div<StyledLabel>`
   display: inline-block;
@@ -55,27 +88,19 @@ export const StyledLabel = styled.div<StyledLabel>`
   overflow: hidden !important;
   text-overflow: ellipsis;
   padding: ${({ theme }) => `${theme.space[1]} ${theme.space[2]}`};
+  padding-left: ${({ theme, isFavorited }) =>
+    isFavorited ? theme.space[1] : ""};
   font-style: ${({ isItalic }) => `${isItalic ? "italic" : "normal"}`};
-  background-color: ${({ theme, invertedLabel, isFavorited }) =>
-    invertedLabel
-      ? theme.color["primary"]
-      : isFavorited
-      ? theme.color["warning"]
-      : theme.color["white"]};
-  color: ${({ theme, invertedLabel, isItalic }) =>
-    invertedLabel
-      ? isItalic
-        ? theme.color["grey"]
-        : theme.color["white"]
-      : isItalic
-      ? theme.color["greyer"]
-      : theme.color["black"]};
+  color: ${({ theme, invertedLabel, isItalic, isFavorited }) =>
+    theme.color[getColor(invertedLabel, isFavorited, isItalic)]};
   border-left-width: ${({ theme, labelOnly }) =>
     labelOnly ? 0 : theme.borderWidth[2]};
   border-left-style: ${({ borderStyle }) => borderStyle};
   border-left-color: ${({ theme, status }) => theme.color[status]};
   max-width: ${({ theme, fullWidth }) =>
     fullWidth ? "100%" : theme.space[30]};
+  font-weight: ${({ theme, invertedLabel }) =>
+    invertedLabel ? theme.fontWeight["bold"] : theme.fontWeight["normal"]};
 `;
 
 interface StyledButtonWrapper {

diff --git a/packages/client/src/hooks/ScrollHandler.tsx b/packages/client/src/hooks/ScrollHandler.tsx
@@ -18,6 +18,9 @@ const ScrollHandler = () => {
   const disableTreeScroll: boolean = useAppSelector(
     (state) => state.territoryTree.disableTreeScroll
   );
+  const treeFilterOpen: boolean = useAppSelector(
+    (state) => state.territoryTree.filterOpen
+  );
 
   const dispatch = useAppDispatch();
 
@@ -74,18 +77,21 @@ const ScrollHandler = () => {
             `Territories-box-content`
           );
 
+          // TODO: filter opened to choose scroll offset
           if (territoryBox && territoryInTree) {
             territoryBox?.scrollTo({
               behavior: territoryInTree ? "smooth" : "auto",
-              top: territoryInTree ? territoryInTree.offsetTop - 103 : 0,
+              top: territoryInTree
+                ? territoryInTree.offsetTop - (treeFilterOpen ? 165 : 104)
+                : 0,
             });
           }
         }, 200);
       } else {
         dispatch(setDisableTreeScroll(false));
       }
     }
-  }, [territoryId, treeStatus, isFetchingTree]);
+  }, [territoryId, treeStatus, isFetchingTree, treeFilterOpen]);
 
   return null;
 };

diff --git a/...c/pages/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx b/...c/pages/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx
@@ -304,9 +304,7 @@ export const StatementListHeader: React.FC<StatementListHeader> = ({
       </StyledHeaderBreadcrumbRow>
 
       <StyledHeaderRow>
-        {isFavorited && (
-          <StyledFaStar size={18} color={theme.color["warning"]} />
-        )}
+        {isFavorited && <StyledFaStar size={18} />}
         <StyledHeading>
           {territoryId
             ? `T:\xa0${trimTerritoryLabel(data.label)}`

diff --git a/...s/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeaderStyles.tsx b/...s/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeaderStyles.tsx
@@ -19,6 +19,7 @@ export const StyledFaStar = styled(FaStar)`
   float: left;
   margin-top: 0.5rem;
   margin-right: 0.3rem;
+  color: ${({ theme }) => theme.color["warning"]};
 `;
 export const StyledMoveToParent = styled.div`
   font-size: ${({ theme }) => theme.fontSize["sm"]};