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/UpdateViewButtonGroup.tsx
+++ b/front/src/modules/views/components/UpdateViewButtonGroup.tsx
@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
+
+import { IconChevronDown, IconPlus } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useView } from '@/views/hooks/useView';
+
+import { useViewInternalStates } from '../hooks/useViewInternalStates';
+
+const StyledContainer = styled.div`
+  display: inline-flex;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  position: relative;
+`;
+export type UpdateViewButtonGroupProps = {
+  hotkeyScope: string;
+  onViewEditModeChange?: () => void;
+};
+
+export const UpdateViewButtonGroup = ({
+  hotkeyScope,
+  onViewEditModeChange,
+}: UpdateViewButtonGroupProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { updateCurrentView, setViewEditMode } = useView();
+  const { canPersistFilters, canPersistSorts } = useViewInternalStates();
+
+  const canPersistView = canPersistFilters || canPersistSorts;
+
+  const handleArrowDownButtonClick = useCallback(() => {
+    setIsDropdownOpen((previousIsOpen) => !previousIsOpen);
+  }, []);
+
+  const handleCreateViewButtonClick = useCallback(() => {
+    setViewEditMode('create');
+    onViewEditModeChange?.();
+    setIsDropdownOpen(false);
+  }, [setViewEditMode, onViewEditModeChange]);
+
+  const handleDropdownClose = useCallback(() => {
+    setIsDropdownOpen(false);
+  }, []);
+
+  const handleViewSubmit = async () => {
+    await updateCurrentView?.();
+  };
+
+  useScopedHotkeys(
+    [Key.Enter, Key.Escape],
+    handleDropdownClose,
+    hotkeyScope,
+    [],
+  );
+
+  if (!canPersistView) return null;
+
+  return (
+    <StyledContainer>
+      <ButtonGroup size="small" accent="blue">
+        <Button title="Update view" onClick={handleViewSubmit} />
+        <Button
+          size="small"
+          Icon={IconChevronDown}
+          onClick={handleArrowDownButtonClick}
+        />
+      </ButtonGroup>
+
+      {isDropdownOpen && (
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            onClick={handleCreateViewButtonClick}
+            LeftIcon={IconPlus}
+            text="Create view"
+          />
+        </DropdownMenuItemsContainer>
+      )}
+    </StyledContainer>
+  );
+};