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/ViewBar.tsx
+++ b/front/src/modules/views/components/ViewBar.tsx
@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+
+import { FilterDropdownButton } from '@/ui/data/filter/components/FilterDropdownButton';
+import { FilterScope } from '@/ui/data/filter/scopes/FilterScope';
+import { FiltersHotkeyScope } from '@/ui/data/filter/types/FiltersHotkeyScope';
+import { SortDropdownButton } from '@/ui/data/sort/components/SortDropdownButton';
+import { SortScope } from '@/ui/data/sort/scopes/SortScope';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { TopBar } from '@/ui/layout/top-bar/TopBar';
+
+import { useView } from '../hooks/useView';
+import { useViewInternalStates } from '../hooks/useViewInternalStates';
+import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
+
+import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
+import { ViewBarDetails } from './ViewBarDetails';
+import { ViewsDropdownButton } from './ViewsDropdownButton';
+
+export type ViewBarProps = {
+  className?: string;
+  optionsDropdownButton: ReactNode;
+  optionsDropdownScopeId: string;
+};
+
+export const ViewBar = ({
+  className,
+  optionsDropdownButton,
+  optionsDropdownScopeId,
+}: ViewBarProps) => {
+  const { openDropdown: openOptionsDropdownButton } = useDropdown({
+    dropdownScopeId: optionsDropdownScopeId,
+  });
+  const { upsertViewSort } = useView();
+  const { availableFilters, availableSorts } = useViewInternalStates();
+
+  return (
+    <FilterScope
+      filterScopeId="view-filter"
+      availableFilters={availableFilters}
+    >
+      <SortScope
+        sortScopeId="view-sort"
+        availableSorts={availableSorts}
+        onSortAdd={upsertViewSort}
+      >
+        <TopBar
+          className={className}
+          leftComponent={
+            <ViewsDropdownButton
+              onViewEditModeChange={openOptionsDropdownButton}
+              hotkeyScope={{ scope: ViewsHotkeyScope.ListDropdown }}
+            />
+          }
+          displayBottomBorder={false}
+          rightComponent={
+            <>
+              <FilterDropdownButton
+                hotkeyScope={{ scope: FiltersHotkeyScope.FilterDropdownButton }}
+              />
+              <SortDropdownButton
+                hotkeyScope={{ scope: FiltersHotkeyScope.SortDropdownButton }}
+                isPrimaryButton
+              />
+              {optionsDropdownButton}
+            </>
+          }
+          bottomComponent={
+            <ViewBarDetails
+              hasFilterButton
+              rightComponent={
+                <UpdateViewButtonGroup
+                  onViewEditModeChange={openOptionsDropdownButton}
+                  hotkeyScope={ViewsHotkeyScope.CreateDropdown}
+                />
+              }
+            />
+          }
+        />
+      </SortScope>
+    </FilterScope>
+  );
+};