Improve viewbar api (#2233)

* create scopes * fix import bug * add useView hook * wip * wip * currentViewId is now retrieved via useView * working on sorts with useView * refactor in progress * refactor in progress * refactor in progress * refactor in progress * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix code * fix code * wip * push * Fix issue dependencies * Fix resize --------- Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
2023-10-27 10:52:26 +02:00
parent 6a72c14af3
commit 5ba68e997d
205 changed files with 3092 additions and 3249 deletions
--- a/front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@ -0,0 +1,142 @@
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  DropResult,
+  OnDragEndResponder,
+  ResponderProvided,
+} from '@hello-pangea/dnd';
+
+import { IconMinus, IconPlus } from '@/ui/display/icon';
+import { AppTooltip } from '@/ui/display/tooltip/AppTooltip';
+import { IconInfoCircle } from '@/ui/input/constants/icons';
+import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
+import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { isDefined } from '~/utils/isDefined';
+
+import { ViewFieldForVisibility } from '../types/ViewFieldForVisibility';
+
+type ViewFieldsVisibilityDropdownSectionProps = {
+  fields: ViewFieldForVisibility[];
+  onVisibilityChange: (field: ViewFieldForVisibility) => void;
+  title: string;
+  isDraggable: boolean;
+  onDragEnd?: OnDragEndResponder;
+};
+
+export const ViewFieldsVisibilityDropdownSection = ({
+  fields,
+  onVisibilityChange,
+  title,
+  isDraggable,
+  onDragEnd,
+}: ViewFieldsVisibilityDropdownSectionProps) => {
+  const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
+    onDragEnd?.(result, provided);
+  };
+
+  const [openToolTipIndex, setOpenToolTipIndex] = useState<number>();
+
+  const handleInfoButtonClick = (index: number) => {
+    if (index === openToolTipIndex) setOpenToolTipIndex(undefined);
+    else setOpenToolTipIndex(index);
+  };
+
+  const getIconButtons = (index: number, field: ViewFieldForVisibility) => {
+    if (field.infoTooltipContent) {
+      return [
+        {
+          Icon: IconInfoCircle,
+          onClick: () => handleInfoButtonClick(index),
+          isActive: openToolTipIndex === index,
+        },
+        {
+          Icon: field.isVisible ? IconMinus : IconPlus,
+          onClick: () => onVisibilityChange(field),
+        },
+      ];
+    }
+    if (!field.infoTooltipContent) {
+      return [
+        {
+          Icon: field.isVisible ? IconMinus : IconPlus,
+          onClick: () => onVisibilityChange(field),
+        },
+      ];
+    }
+  };
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useListenClickOutside({
+    refs: [ref],
+    callback: () => {
+      setOpenToolTipIndex(undefined);
+    },
+  });
+
+  return (
+    <div ref={ref}>
+      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      <DropdownMenuItemsContainer>
+        {isDraggable ? (
+          <DraggableList
+            onDragEnd={handleOnDrag}
+            draggableItems={
+              <>
+                {fields
+                  .filter(({ index, size }) => index !== 0 || !size)
+                  .map((field, index) => (
+                    <DraggableItem
+                      key={field.key}
+                      draggableId={field.key}
+                      index={index + 1}
+                      itemComponent={
+                        <MenuItemDraggable
+                          key={field.key}
+                          LeftIcon={field.Icon}
+                          iconButtons={getIconButtons(index + 1, field)}
+                          isTooltipOpen={openToolTipIndex === index + 1}
+                          text={field.name}
+                          className={`${title}-draggable-item-tooltip-anchor-${
+                            index + 1
+                          }`}
+                        />
+                      }
+                    />
+                  ))}
+              </>
+            }
+          />
+        ) : (
+          fields.map((field, index) => (
+            <MenuItem
+              key={field.key}
+              LeftIcon={field.Icon}
+              iconButtons={getIconButtons(index, field)}
+              isTooltipOpen={openToolTipIndex === index}
+              text={field.name}
+              className={`${title}-fixed-item-tooltip-anchor-${index}`}
+            />
+          ))
+        )}
+      </DropdownMenuItemsContainer>
+      {isDefined(openToolTipIndex) &&
+        createPortal(
+          <AppTooltip
+            anchorSelect={`.${title}-${
+              isDraggable ? 'draggable' : 'fixed'
+            }-item-tooltip-anchor-${openToolTipIndex}`}
+            place="left"
+            content={fields[openToolTipIndex].infoTooltipContent}
+            isOpen={true}
+          />,
+          document.body,
+        )}
+    </div>
+  );
+};