admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve viewbar api (#2233)

Browse Source 
* 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>
This commit is contained in:
Charles Bochet
2023-10-27 10:52:26 +02:00
committed by GitHub
parent 6a72c14af3
commit 5ba68e997d
205 changed files with 3092 additions and 3249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/data/data-table/components/DataTable.tsx
View File

@ -14,7 +14,6 @@ import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection';
import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
import { TableHeader } from '../table-header/components/TableHeader';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { DataTableBody } from './DataTableBody';
@ -123,7 +122,6 @@ export const DataTable = ({ updateEntityMutation }: DataTableProps) => {
<EntityUpdateMutationContext.Provider value={updateEntityMutation}>
<StyledTableWithHeader>
<StyledTableContainer ref={tableBodyRef}>
<TableHeader />
<ScrollWrapper>
<div>
<StyledTable className="entity-table-cell">

52
front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
View File

@ -1,27 +1,21 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import defaults from 'lodash/defaults';
import { useRecoilCallback } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { useView } from '@/views/hooks/useView';
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
import {
SortOrder,
useGetCompaniesQuery,
useGetPeopleQuery,
} from '~/generated/graphql';
import { filtersWhereScopedSelector } from '../../view-bar/states/selectors/filtersWhereScopedSelector';
import { sortsOrderByScopedSelector } from '../../view-bar/states/selectors/sortsOrderByScopedSelector';
import { filtersWhereScopedSelector } from '../../filter/states/selectors/filtersWhereScopedSelector';
import { SortDefinition } from '../../sort/types/SortDefinition';
import { useSetDataTableData } from '../hooks/useSetDataTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
@ -46,12 +40,10 @@ export const DataTableEffect = ({
}) => {
const setDataTableData = useSetDataTableData();
const { registerOptimisticEffect } = useOptimisticEffect();
const { setCurrentViewId } = useView();
const { currentViewSortsOrderBy } = useViewInternalStates();
let sortsOrderBy = useRecoilScopedValue(
sortsOrderByScopedSelector,
TableRecoilScopeContext,
);
sortsOrderBy = defaults(sortsOrderBy, [
const sortsOrderBy = defaults(currentViewSortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
@ -76,43 +68,19 @@ export const DataTableEffect = ({
});
const [searchParams] = useSearchParams();
const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
const handleViewSelect = useRecoilCallback(
({ set, snapshot }) =>
async (viewId: string) => {
const currentView = await snapshot.getPromise(
currentViewIdScopedState(tableRecoilScopeId),
);
if (currentView === viewId) {
return;
}
const savedFilters = await snapshot.getPromise(
savedFiltersFamilyState(viewId),
);
const savedSorts = await snapshot.getPromise(
savedSortsFamilyState(viewId),
);
set(filtersScopedState(tableRecoilScopeId), savedFilters);
set(sortsScopedState(tableRecoilScopeId), savedSorts);
set(currentViewIdScopedState(tableRecoilScopeId), viewId);
},
[tableRecoilScopeId],
);
useEffect(() => {
const viewId = searchParams.get('view');
if (viewId) {
handleViewSelect(viewId);
//setCurrentViewId(viewId);
}
setActionBarEntries?.();
setContextMenuEntries?.();
}, [
handleViewSelect,
searchParams,
setActionBarEntries,
setContextMenuEntries,
setCurrentViewId,
]);
return <></>;

54
front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
View File

@ -166,33 +166,35 @@ export const DataTableHeader = () => {
>
<SelectAllCheckbox />
</th>
{visibleTableColumns.map((column, index) => (
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<StyledColumnHeadContainer>
<ColumnHeadWithDropdown
column={column}
isFirstColumn={index === 1}
isLastColumn={index === visibleTableColumns.length - 1}
primaryColumnKey={primaryColumn.key}
{[...visibleTableColumns]
.sort((columnA, columnB) => columnA.index - columnB.index)
.map((column, index) => (
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<StyledColumnHeadContainer>
<ColumnHeadWithDropdown
column={column}
isFirstColumn={index === 1}
isLastColumn={index === visibleTableColumns.length - 1}
primaryColumnKey={primaryColumn.key}
/>
</StyledColumnHeadContainer>
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
/>
</StyledColumnHeadContainer>
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
/>
</StyledColumnHeaderCell>
))}
</StyledColumnHeaderCell>
))}
<th>
{hiddenTableColumns.length > 0 && (
<StyledColumnHeadContainer>

16
front/src/modules/ui/data/data-table/components/DataTableRow.tsx
View File

@ -38,13 +38,15 @@ export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
<td>
<CheckboxCell />
</td>
{visibleTableColumns.map((column, columnIndex) => {
return (
<ColumnContext.Provider value={column} key={column.key}>
<DataTableCell cellIndex={columnIndex} />
</ColumnContext.Provider>
);
})}
{[...visibleTableColumns]
.sort((columnA, columnB) => columnA.index - columnB.index)
.map((column, columnIndex) => {
return (
<ColumnContext.Provider value={column} key={column.key}>
<DataTableCell cellIndex={columnIndex} />
</ColumnContext.Provider>
);
})}
<td></td>
</StyledRow>
);

35
front/src/modules/ui/data/data-table/hooks/useMoveViewColumns.ts Normal file
View File

@ -0,0 +1,35 @@
export const useMoveViewColumns = () => {
const handleColumnMove = <T extends { index: number }>(
direction: 'left' | 'right',
currentArrayindex: number,
targetArray: T[],
) => {
const targetArrayIndex =
direction === 'left' ? currentArrayindex - 1 : currentArrayindex + 1;
const targetArraySize = targetArray.length - 1;
if (
currentArrayindex >= 0 &&
targetArrayIndex >= 0 &&
currentArrayindex <= targetArraySize &&
targetArrayIndex <= targetArraySize
) {
const currentEntity = targetArray[currentArrayindex];
const targetEntity = targetArray[targetArrayIndex];
const newArray = [...targetArray];
newArray[currentArrayindex] = {
...targetEntity,
index: currentEntity.index,
};
newArray[targetArrayIndex] = {
...currentEntity,
index: targetEntity.index,
};
return newArray;
}
return targetArray;
};
return { handleColumnMove };
};

21
front/src/modules/ui/data/data-table/hooks/useSetDataTableData.ts
View File

@ -1,13 +1,12 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { useView } from '@/views/hooks/useView';
import { availableSortsScopedState } from '@/views/states/availableSortsScopedState';
import { SortDefinition } from '../../sort/types/SortDefinition';
import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
@ -17,6 +16,7 @@ import { useResetTableRowSelection } from './useResetTableRowSelection';
export const useSetDataTableData = () => {
const resetTableRowSelection = useResetTableRowSelection();
const { setEntityCountInCurrentView } = useView();
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
@ -51,20 +51,15 @@ export const useSetDataTableData = () => {
set(numberOfTableRowsState, entityIds.length);
set(entityCountInCurrentViewState, entityIds.length);
setEntityCountInCurrentView(entityIds.length);
set(
availableFiltersScopedState(tableContextScopeId),
filterDefinitionArray,
);
set(
availableSortsScopedState(tableContextScopeId),
availableSortsScopedState({ scopeId: tableContextScopeId }),
sortDefinitionArray,
);
set(isFetchingDataTableDataState, false);
},
[resetTableRowSelection, tableContextScopeId],
[resetTableRowSelection, setEntityCountInCurrentView, tableContextScopeId],
);
};

22
front/src/modules/ui/data/data-table/hooks/useTableColumns.ts
View File

@ -1,12 +1,11 @@
import { useCallback, useContext } from 'react';
import { useSetRecoilState } from 'recoil';
import { useMoveViewColumns } from '@/ui/data/data-table/hooks/useMoveViewColumns';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
import { ViewFieldForVisibility } from '@/ui/data/view-bar/types/ViewFieldForVisibility';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { useView } from '@/views/hooks/useView';
import { ViewFieldForVisibility } from '@/views/types/ViewFieldForVisibility';
import { TableContext } from '../contexts/TableContext';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
@ -23,10 +22,8 @@ export const useTableColumns = () => {
TableRecoilScopeContext,
);
const currentViewId = useRecoilScopedValue(
currentViewIdScopedState,
TableRecoilScopeContext,
);
const { currentViewId } = useView();
const setSavedTableColumns = useSetRecoilState(
savedTableColumnsFamilyState(currentViewId),
);
@ -91,7 +88,10 @@ export const useTableColumns = () => {
);
const handleMoveTableColumn = useCallback(
(direction: 'left' | 'right', column: ColumnDefinition<FieldMetadata>) => {
async (
direction: 'left' | 'right',
column: ColumnDefinition<FieldMetadata>,
) => {
const currentColumnArrayIndex = tableColumns.findIndex(
(tableColumn) => tableColumn.key === column.key,
);
@ -101,9 +101,9 @@ export const useTableColumns = () => {
tableColumns,
);
setTableColumns(columns);
await handleColumnsChange(columns);
},
[tableColumns, setTableColumns, handleColumnMove],
[tableColumns, handleColumnMove, handleColumnsChange],
);
return {

8
front/src/modules/ui/data/data-table/options/components/TableOptionsDropdown.tsx
View File

@ -1,9 +1,7 @@
import { useResetRecoilState } from 'recoil';
import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useView } from '@/views/hooks/useView';
import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
@ -17,7 +15,7 @@ type TableOptionsDropdownProps = {
export const TableOptionsDropdown = ({
customHotkeyScope,
}: TableOptionsDropdownProps) => {
const resetViewEditMode = useResetRecoilState(viewEditModeState);
const { setViewEditMode } = useView();
return (
<DropdownScope dropdownScopeId={TableOptionsDropdownId}>
@ -26,7 +24,7 @@ export const TableOptionsDropdown = ({
dropdownHotkeyScope={customHotkeyScope}
dropdownOffset={{ y: 8 }}
dropdownComponents={<TableOptionsDropdownContent />}
onClickOutside={resetViewEditMode}
onClickOutside={() => setViewEditMode('none')}
/>
</DropdownScope>
);

80
front/src/modules/ui/data/data-table/options/components/TableOptionsDropdownContent.tsx
View File

@ -1,15 +1,8 @@
import { useCallback, useContext, useRef, useState } from 'react';
import { useCallback, useRef, useState } from 'react';
import { OnDragEndResponder } from '@hello-pangea/dnd';
import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { ViewFieldsVisibilityDropdownSection } from '@/ui/data/view-bar/components/ViewFieldsVisibilityDropdownSection';
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
import { useUpsertView } from '@/ui/data/view-bar/hooks/useUpsertView';
import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/currentViewScopedSelector';
import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
import { IconChevronLeft, IconTag } from '@/ui/display/icon';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -18,22 +11,22 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { useView } from '@/views/hooks/useView';
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
import { useTableColumns } from '../../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
type TableOptionsMenu = 'fields';
export const TableOptionsDropdownContent = () => {
const scopeId = useRecoilScopeId(TableRecoilScopeContext);
const { setViewEditMode, handleViewNameSubmit } = useView();
const { viewEditMode, currentView } = useViewInternalStates();
const { onImport } = useContext(ViewBarContext);
const { closeDropdown } = useDropdown();
const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(
@ -42,12 +35,6 @@ export const TableOptionsDropdownContent = () => {
const viewEditInputRef = useRef<HTMLInputElement>(null);
const currentView = useRecoilScopedValue(
currentViewScopedSelector,
TableRecoilScopeContext,
);
const viewEditMode = useRecoilValue(viewEditModeState);
const resetViewEditMode = useResetRecoilState(viewEditModeState);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
@ -56,35 +43,13 @@ export const TableOptionsDropdownContent = () => {
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const viewsById = useRecoilScopedValue(
viewsByIdScopedSelector,
TableRecoilScopeContext,
);
const { handleColumnVisibilityChange, handleColumnReorder } =
useTableColumns();
const { upsertView } = useUpsertView();
const handleViewNameSubmit = useRecoilCallback(
({ set, snapshot }) =>
async () => {
const tableColumns = await snapshot.getPromise(
tableColumnsScopedState(scopeId),
);
const isCreateMode = viewEditMode.mode === 'create';
const name = viewEditInputRef.current?.value;
const view = await upsertView(name);
if (view && isCreateMode) {
set(savedTableColumnsFamilyState(view.id), tableColumns);
}
},
[scopeId, upsertView, viewEditMode.mode],
);
const handleSelectMenu = (option: TableOptionsMenu) => {
handleViewNameSubmit();
const name = viewEditInputRef.current?.value;
handleViewNameSubmit(name);
setCurrentMenu(option);
};
@ -108,7 +73,6 @@ export const TableOptionsDropdownContent = () => {
useScopedHotkeys(
Key.Escape,
() => {
resetViewEditMode();
closeDropdown();
},
TableOptionsHotkeyScope.Dropdown,
@ -117,9 +81,10 @@ export const TableOptionsDropdownContent = () => {
useScopedHotkeys(
Key.Enter,
() => {
handleViewNameSubmit();
const name = viewEditInputRef.current?.value;
handleViewNameSubmit(name);
resetMenu();
resetViewEditMode();
setViewEditMode('none');
closeDropdown();
},
TableOptionsHotkeyScope.Dropdown,
@ -130,16 +95,21 @@ export const TableOptionsDropdownContent = () => {
{!currentMenu && (
<>
<DropdownMenuInput
autoFocus={viewEditMode.mode === 'create' || !!viewEditMode.viewId}
ref={viewEditInputRef}
autoFocus={viewEditMode !== 'none'}
placeholder={
viewEditMode.mode === 'create' ? 'New view' : 'View name'
viewEditMode === 'create'
? 'New view'
: viewEditMode === 'edit'
? 'View name'
: ''
}
defaultValue={
viewEditMode.mode === 'create'
viewEditMode === 'create'
? ''
: viewEditMode.viewId
? viewsById[viewEditMode.viewId]?.name
: currentView?.name
: viewEditMode === 'edit'
? currentView?.name
: ''
}
/>
<DropdownMenuSeparator />
@ -149,13 +119,13 @@ export const TableOptionsDropdownContent = () => {
LeftIcon={IconTag}
text="Fields"
/>
{onImport && (
{/*onImport && (
<MenuItem
onClick={onImport}
LeftIcon={IconFileImport}
text="Import"
/>
)}
)*/}
</DropdownMenuItemsContainer>
</>
)}

44
front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx
View File

@ -1,44 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { TableOptionsDropdown } from '../TableOptionsDropdown';
const meta: Meta<typeof TableOptionsDropdown> = {
title: 'UI/Data/DataTable/Options/TableOptionsDropdown',
component: TableOptionsDropdown,
decorators: [
(Story) => (
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
<ViewBarContext.Provider
value={{
ViewBarRecoilScopeContext: TableRecoilScopeContext,
}}
>
<Story />
</ViewBarContext.Provider>
</RecoilScope>
),
ComponentDecorator,
],
};
export default meta;
type Story = StoryObj<typeof TableOptionsDropdown>;
export const Default: Story = {
args: {
customHotkeyScope: { scope: 'options' },
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const dropdownButton = canvas.getByText('Options');
await userEvent.click(dropdownButton);
},
};

52
front/src/modules/ui/data/data-table/table-header/components/TableHeader.tsx
View File

@ -1,52 +0,0 @@
import { useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { ViewBar } from '@/ui/data/view-bar/components/ViewBar';
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
export const TableHeader = () => {
const { onCurrentViewSubmit, ...viewBarContextProps } =
useContext(ViewBarContext);
const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
const [_, setSearchParams] = useSearchParams();
const handleViewSelect = useRecoilCallback(
({ set, snapshot }) =>
async (viewId: string) => {
const savedTableColumns = await snapshot.getPromise(
savedTableColumnsFamilyState(viewId),
);
set(tableColumnsScopedState(tableRecoilScopeId), savedTableColumns);
setSearchParams({ view: viewId });
},
[tableRecoilScopeId, setSearchParams],
);
return (
<ViewBarContext.Provider
value={{
...viewBarContextProps,
onCurrentViewSubmit,
onViewSelect: handleViewSelect,
}}
>
<ViewBar
optionsDropdownButton={
<TableOptionsDropdown
customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
/>
}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
</ViewBarContext.Provider>
);
};

0
front/src/modules/ui/data/view-bar/components/AddFilterFromDetailsButton.tsx → front/src/modules/ui/data/filter/components/AddFilterFromDetailsButton.tsx
View File

11
front/src/modules/ui/data/view-bar/components/FilterDropdownButton.tsx → front/src/modules/ui/data/filter/components/FilterDropdownButton.tsx
View File

@ -1,8 +1,6 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
import { useFilter } from '../hooks/useFilter';
import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
import { SingleEntityFilterDropdownButton } from './SingleEntityFilterDropdownButton';
@ -14,12 +12,7 @@ type FilterDropdownButtonProps = {
export const FilterDropdownButton = ({
hotkeyScope,
}: FilterDropdownButtonProps) => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [availableFilters] = useRecoilScopedState(
availableFiltersScopedState,
ViewBarRecoilScopeContext,
);
const { availableFilters } = useFilter();
const hasOnlyOneEntityFilter =
availableFilters.length === 1 && availableFilters[0].type === 'entity';

36
front/src/modules/ui/data/filter/components/FilterDropdownDateSearchInput.tsx Normal file
View File

@ -0,0 +1,36 @@
import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useUpsertFilter } from '@/views/hooks/useUpsertFilter';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownDateSearchInput = () => {
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
setIsFilterDropdownUnfolded,
} = useFilter();
const upsertFilter = useUpsertFilter();
const handleChange = (date: Date) => {
if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
upsertFilter({
key: filterDefinitionUsedInDropdown.key,
type: filterDefinitionUsedInDropdown.type,
value: date.toISOString(),
operand: selectedOperandInDropdown,
displayValue: date.toLocaleDateString(),
});
setIsFilterDropdownUnfolded(false);
};
return (
<InternalDatePicker
date={new Date()}
onChange={handleChange}
onMouseSelect={handleChange}
/>
);
};

29
front/src/modules/ui/data/filter/components/FilterDropdownEntitySearchInput.tsx Normal file
View File

@ -0,0 +1,29 @@
import { ChangeEvent } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySearchInput = () => {
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
} = useFilter();
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
<DropdownMenuSearchInput
autoFocus
type="text"
value={filterDropdownSearchInput}
placeholder={filterDefinitionUsedInDropdown.label}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterDropdownSearchInput(event.target.value);
}}
/>
)
);
};

42
front/src/modules/ui/data/view-bar/components/FilterDropdownEntitySearchSelect.tsx → front/src/modules/ui/data/filter/components/FilterDropdownEntitySearchSelect.tsx
View File

@ -1,45 +1,30 @@
import { useEffect, useState } from 'react';
import { useFilterCurrentlyEdited } from '@/ui/data/view-bar/hooks/useFilterCurrentlyEdited';
import { useRemoveFilter } from '@/ui/data/view-bar/hooks/useRemoveFilter';
import { useUpsertFilter } from '@/ui/data/view-bar/hooks/useUpsertFilter';
import { filterDefinitionUsedInDropdownScopedState } from '@/ui/data/view-bar/states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '@/ui/data/view-bar/states/filterDropdownSelectedEntityIdScopedState';
import { selectedOperandInDropdownScopedState } from '@/ui/data/view-bar/states/selectedOperandInDropdownScopedState';
import { useFilterCurrentlyEdited } from '@/ui/data/filter/hooks/useFilterCurrentlyEdited';
import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRemoveFilter } from '@/views/hooks/useRemoveFilter';
import { useUpsertFilter } from '@/views/hooks/useUpsertFilter';
import { ViewFilterOperand } from '~/generated/graphql';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySearchSelect = ({
entitiesForSelect,
}: {
entitiesForSelect: EntitiesForMultipleEntitySelect<EntityForSelect>;
}) => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const {
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
} = useFilter();
const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);
const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] =
useRecoilScopedState(
filterDropdownSelectedEntityIdScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const upsertFilter = useUpsertFilter();
const removeFilter = useRemoveFilter();
@ -80,11 +65,6 @@ export const FilterDropdownEntitySearchSelect = ({
}
};
const [filterDropdownSearchInput] = useRecoilScopedState(
filterDropdownSearchInputScopedState,
ViewBarRecoilScopeContext,
);
const isAllEntitySelectShown =
!!filterDefinitionUsedInDropdown?.selectAllLabel &&
!!filterDefinitionUsedInDropdown?.SelectAllIcon &&

21
front/src/modules/ui/data/filter/components/FilterDropdownEntitySelect.tsx Normal file
View File

@ -0,0 +1,21 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySelect = () => {
const { filterDefinitionUsedInDropdown } = useFilter();
if (filterDefinitionUsedInDropdown?.type !== 'entity') {
return null;
}
return (
<>
<DropdownMenuSeparator />
<RecoilScope>
{filterDefinitionUsedInDropdown.entitySelectComponent}
</RecoilScope>
</>
);
};

35
front/src/modules/ui/data/view-bar/components/FilterDropdownFilterSelect.tsx → front/src/modules/ui/data/filter/components/FilterDropdownFilterSelect.tsx
View File

@ -2,38 +2,17 @@ import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/Rela
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { useFilter } from '../hooks/useFilter';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
export const FilterDropdownFilterSelect = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setSelectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setFilterDropdownSearchInput] = useRecoilScopedState(
filterDropdownSearchInputScopedState,
ViewBarRecoilScopeContext,
);
const availableFilters = useRecoilScopedValue(
availableFiltersScopedState,
ViewBarRecoilScopeContext,
);
const {
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setFilterDropdownSearchInput,
availableFilters,
} = useFilter();
const setHotkeyScope = useSetHotkeyScope();

22
front/src/modules/ui/data/view-bar/components/FilterDropdownNumberSearchInput.tsx → front/src/modules/ui/data/filter/components/FilterDropdownNumberSearchInput.tsx
View File

@ -1,26 +1,14 @@
import { ChangeEvent } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRemoveFilter } from '../hooks/useRemoveFilter';
import { useUpsertFilter } from '../hooks/useUpsertFilter';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { useRemoveFilter } from '../../../../views/hooks/useRemoveFilter';
import { useUpsertFilter } from '../../../../views/hooks/useUpsertFilter';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownNumberSearchInput = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const { selectedOperandInDropdown, filterDefinitionUsedInDropdown } =
useFilter();
const upsertFilter = useUpsertFilter();
const removeFilter = useRemoveFilter();

27
front/src/modules/ui/data/filter/components/FilterDropdownOperandButton.tsx Normal file
View File

@ -0,0 +1,27 @@
import { IconChevronDown } from '@/ui/display/icon';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { useFilter } from '../hooks/useFilter';
import { getOperandLabel } from '../utils/getOperandLabel';
export const FilterDropdownOperandButton = () => {
const {
selectedOperandInDropdown,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownOperandSelectUnfolded,
} = useFilter();
if (isFilterDropdownOperandSelectUnfolded) {
return null;
}
return (
<DropdownMenuHeader
key={'selected-filter-operand'}
EndIcon={IconChevronDown}
onClick={() => setIsFilterDropdownOperandSelectUnfolded(true)}
>
{getOperandLabel(selectedOperandInDropdown)}
</DropdownMenuHeader>
);
};

33
front/src/modules/ui/data/view-bar/components/FilterDropdownOperandSelect.tsx → front/src/modules/ui/data/filter/components/FilterDropdownOperandSelect.tsx
View File

@ -1,42 +1,25 @@
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ViewFilterOperand } from '~/generated/graphql';
import { useUpsertFilter } from '../../../../views/hooks/useUpsertFilter';
import { useFilter } from '../hooks/useFilter';
import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
import { useUpsertFilter } from '../hooks/useUpsertFilter';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { getOperandLabel } from '../utils/getOperandLabel';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
export const FilterDropdownOperandSelect = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setSelectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const {
filterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
} = useFilter();
const operandsForFilterType = getOperandsForFilterType(
filterDefinitionUsedInDropdown?.type,
);
const [
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
] = useRecoilScopedState(
isFilterDropdownOperandSelectUnfoldedScopedState,
ViewBarRecoilScopeContext,
);
const filterCurrentlyEdited = useFilterCurrentlyEdited();
const upsertFilter = useUpsertFilter();

33
front/src/modules/ui/data/view-bar/components/FilterDropdownTextSearchInput.tsx → front/src/modules/ui/data/filter/components/FilterDropdownTextSearchInput.tsx
View File

@ -1,34 +1,19 @@
import { ChangeEvent } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRemoveFilter } from '../../../../views/hooks/useRemoveFilter';
import { useUpsertFilter } from '../../../../views/hooks/useUpsertFilter';
import { useFilter } from '../hooks/useFilter';
import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
import { useRemoveFilter } from '../hooks/useRemoveFilter';
import { useUpsertFilter } from '../hooks/useUpsertFilter';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
export const FilterDropdownTextSearchInput = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
useRecoilScopedState(
filterDropdownSearchInputScopedState,
ViewBarRecoilScopeContext,
);
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
} = useFilter();
const upsertFilter = useUpsertFilter();
const removeFilter = useRemoveFilter();

0
front/src/modules/ui/data/view-bar/components/GenericEntityFilterChip.tsx → front/src/modules/ui/data/filter/components/GenericEntityFilterChip.tsx
View File

39
front/src/modules/ui/data/filter/components/MultipleFiltersButton.tsx Normal file
View File

@ -0,0 +1,39 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { FilterDropdownId } from '../constants/FilterDropdownId';
import { useFilter } from '../hooks/useFilter';
export const MultipleFiltersButton = () => {
const {
setFilterDefinitionUsedInDropdown,
setIsFilterDropdownOperandSelectUnfolded,
setFilterDropdownSearchInput,
setSelectedOperandInDropdown,
} = useFilter();
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownScopeId: FilterDropdownId,
});
const resetState = () => {
setIsFilterDropdownOperandSelectUnfolded(false);
setFilterDefinitionUsedInDropdown(null);
setSelectedOperandInDropdown(null);
setFilterDropdownSearchInput('');
};
const handleClick = () => {
toggleDropdown();
resetState();
};
return (
<StyledHeaderDropdownButton
isUnfolded={isDropdownOpen}
onClick={handleClick}
>
Filter
</StyledHeaderDropdownButton>
);
};

0
front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownButton.tsx → front/src/modules/ui/data/filter/components/MultipleFiltersDropdownButton.tsx
View File

27
front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownContent.tsx → front/src/modules/ui/data/filter/components/MultipleFiltersDropdownContent.tsx
View File

@ -1,10 +1,6 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { useFilter } from '../hooks/useFilter';
import { FilterDropdownDateSearchInput } from './FilterDropdownDateSearchInput';
import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
@ -17,22 +13,11 @@ import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';
import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
export const MultipleFiltersDropdownContent = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [isFilterDropdownOperandSelectUnfolded] = useRecoilScopedState(
isFilterDropdownOperandSelectUnfoldedScopedState,
ViewBarRecoilScopeContext,
);
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const {
isFilterDropdownOperandSelectUnfolded,
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
} = useFilter();
return (
<>

0
front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx → front/src/modules/ui/data/filter/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx
View File

39
front/src/modules/ui/data/view-bar/components/SingleEntityFilterDropdownButton.tsx → front/src/modules/ui/data/filter/components/SingleEntityFilterDropdownButton.tsx
View File

@ -6,14 +6,9 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ViewFilterOperand } from '~/generated/graphql';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filtersScopedState } from '../states/filtersScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { useFilter } from '../hooks/useFilter';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
@ -25,29 +20,15 @@ export const SingleEntityFilterDropdownButton = ({
}: {
hotkeyScope: HotkeyScope;
}) => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const {
availableFilters,
selectedFilters,
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
} = useFilter();
const [availableFilters] = useRecoilScopedState(
availableFiltersScopedState,
ViewBarRecoilScopeContext,
);
const availableFilter = availableFilters[0];
const [filters] = useRecoilScopedState(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setSelectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
React.useEffect(() => {
setFilterDefinitionUsedInDropdown(availableFilter);
const defaultOperand = getOperandsForFilterType(availableFilter?.type)[0];
@ -67,11 +48,11 @@ export const SingleEntityFilterDropdownButton = ({
dropdownOffset={{ x: 0, y: -28 }}
clickableComponent={
<StyledHeaderDropdownButton>
{filters[0] ? (
{selectedFilters[0] ? (
<GenericEntityFilterChip
filter={filters[0]}
filter={selectedFilters[0]}
Icon={
filters[0].operand === ViewFilterOperand.IsNotNull
selectedFilters[0].operand === ViewFilterOperand.IsNotNull
? availableFilter.SelectAllIcon
: undefined
}

0
front/src/modules/ui/data/view-bar/constants/FilterDropdownId.ts → front/src/modules/ui/data/filter/constants/FilterDropdownId.ts
View File

54
front/src/modules/ui/data/filter/hooks/useFilter.ts Normal file
View File

@ -0,0 +1,54 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { FilterScopeInternalContext } from '../scopes/scope-internal-context/FilterScopeInternalContext';
import { useFilterStates } from './useFilterStates';
type UseFilterProps = {
filterScopeId?: string;
};
export const useFilter = (props?: UseFilterProps) => {
const scopeId = useAvailableScopeIdOrThrow(
FilterScopeInternalContext,
props?.filterScopeId,
);
const {
availableFilters,
setAvailableFilters,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
selectedFilters,
setSelectedFilters,
selectedOperandInDropdown,
setSelectedOperandInDropdown,
} = useFilterStates(scopeId);
return {
scopeId,
availableFilters,
setAvailableFilters,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
selectedFilters,
setSelectedFilters,
selectedOperandInDropdown,
setSelectedOperandInDropdown,
};
};

13
front/src/modules/ui/data/filter/hooks/useFilterCurrentlyEdited.ts Normal file
View File

@ -0,0 +1,13 @@
import { useMemo } from 'react';
import { useFilter } from './useFilter';
export const useFilterCurrentlyEdited = () => {
const { selectedFilters, filterDefinitionUsedInDropdown } = useFilter();
return useMemo(() => {
return selectedFilters?.find(
(filter) => filter.key === filterDefinitionUsedInDropdown?.key,
);
}, [filterDefinitionUsedInDropdown?.key, selectedFilters]);
};

64
front/src/modules/ui/data/filter/hooks/useFilterStates.ts Normal file
View File

@ -0,0 +1,64 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '../states/filterDropdownSelectedEntityIdScopedState';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
import { selectedFiltersScopedState } from '../states/selectedFiltersScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
export const useFilterStates = (scopeId: string) => {
const [availableFilters, setAvailableFilters] = useRecoilScopedStateV2(
availableFiltersScopedState,
scopeId,
);
const [filterDefinitionUsedInDropdown, setFilterDefinitionUsedInDropdown] =
useRecoilScopedStateV2(filterDefinitionUsedInDropdownScopedState, scopeId);
const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
useRecoilScopedStateV2(filterDropdownSearchInputScopedState, scopeId);
const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] =
useRecoilScopedStateV2(filterDropdownSelectedEntityIdScopedState, scopeId);
const [
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
] = useRecoilScopedStateV2(
isFilterDropdownOperandSelectUnfoldedScopedState,
scopeId,
);
const [isFilterDropdownUnfolded, setIsFilterDropdownUnfolded] =
useRecoilScopedStateV2(isFilterDropdownUnfoldedScopedState, scopeId);
const [selectedFilters, setSelectedFilters] = useRecoilScopedStateV2(
selectedFiltersScopedState,
scopeId,
);
const [selectedOperandInDropdown, setSelectedOperandInDropdown] =
useRecoilScopedStateV2(selectedOperandInDropdownScopedState, scopeId);
return {
availableFilters,
setAvailableFilters,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
selectedFilters,
setSelectedFilters,
selectedOperandInDropdown,
setSelectedOperandInDropdown,
};
};

28
front/src/modules/ui/data/filter/scopes/FilterScope.tsx Normal file
View File

@ -0,0 +1,28 @@
import { ReactNode } from 'react';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { FilterScopeInitEffect } from './init-effect/FilterScopeInitEffect';
import { FilterScopeInternalContext } from './scope-internal-context/FilterScopeInternalContext';
type FilterScopeProps = {
children: ReactNode;
filterScopeId: string;
availableFilters?: FilterDefinition[];
};
export const FilterScope = ({
children,
filterScopeId,
availableFilters,
}: FilterScopeProps) => {
return (
<FilterScopeInternalContext.Provider value={{ scopeId: filterScopeId }}>
<FilterScopeInitEffect
filterScopeId={filterScopeId}
availableFilters={availableFilters}
/>
{children}
</FilterScopeInternalContext.Provider>
);
};

25
front/src/modules/ui/data/filter/scopes/init-effect/FilterScopeInitEffect.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useEffect } from 'react';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { useFilterStates } from '../../hooks/useFilterStates';
type FilterScopeInitEffectProps = {
filterScopeId: string;
availableFilters?: FilterDefinition[];
};
export const FilterScopeInitEffect = ({
filterScopeId,
availableFilters,
}: FilterScopeInitEffectProps) => {
const { setAvailableFilters } = useFilterStates(filterScopeId);
useEffect(() => {
if (availableFilters) {
setAvailableFilters(availableFilters);
}
}, [availableFilters, setAvailableFilters]);
return <></>;
};

9
front/src/modules/ui/data/filter/scopes/scope-internal-context/FilterScopeInternalContext.ts Normal file
View File

@ -0,0 +1,9 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type FilterScopeInternalContextProps = ScopedStateKey & {
test?: string;
};
export const FilterScopeInternalContext =
createScopeInternalContext<FilterScopeInternalContextProps>();

9
front/src/modules/ui/data/filter/states/availableFiltersScopedState.ts Normal file
View File

@ -0,0 +1,9 @@
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const availableFiltersScopedState = createScopedState<
FilterDefinition[]
>({
key: 'availableFiltersScopedState',
defaultValue: [],
});

9
front/src/modules/ui/data/filter/states/filterDefinitionUsedInDropdownScopedState.ts Normal file
View File

@ -0,0 +1,9 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { FilterDefinition } from '../types/FilterDefinition';
export const filterDefinitionUsedInDropdownScopedState =
createScopedState<FilterDefinition | null>({
key: 'filterDefinitionUsedInDropdownScopedState',
defaultValue: null,
});

6
front/src/modules/ui/data/filter/states/filterDropdownSearchInputScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const filterDropdownSearchInputScopedState = createScopedState<string>({
key: 'filterDropdownSearchInputScopedState',
defaultValue: '',
});

8
front/src/modules/ui/data/filter/states/filterDropdownSelectedEntityIdScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const filterDropdownSelectedEntityIdScopedState = createScopedState<
string | null
>({
key: 'filterDropdownSelectedEntityIdScopedState',
defaultValue: null,
});

7
front/src/modules/ui/data/filter/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isFilterDropdownOperandSelectUnfoldedScopedState =
createScopedState<boolean>({
key: 'isFilterDropdownOperandSelectUnfoldedScopedState',
defaultValue: false,
});

6
front/src/modules/ui/data/filter/states/isFilterDropdownUnfoldedScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isFilterDropdownUnfoldedScopedState = createScopedState<boolean>({
key: 'isFilterDropdownUnfoldedScopedState',
defaultValue: false,
});

8
front/src/modules/ui/data/filter/states/selectedFiltersScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Filter } from '../types/Filter';
export const selectedFiltersScopedState = createScopedState<Filter[]>({
key: 'selectedFiltersScopedState',
defaultValue: [],
});

8
front/src/modules/ui/data/filter/states/selectedOperandInDropdownScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ViewFilterOperand } from '~/generated/graphql';
export const selectedOperandInDropdownScopedState =
createScopedState<ViewFilterOperand | null>({
key: 'selectedOperandInDropdownScopedState',
defaultValue: null,
});

8
front/src/modules/ui/data/view-bar/states/selectors/filtersWhereScopedSelector.ts → front/src/modules/ui/data/filter/states/selectors/filtersWhereScopedSelector.ts
View File

@ -1,13 +1,15 @@
import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../utils/turnFilterIntoWhereClause';
import { filtersScopedState } from '../filtersScopedState';
import { selectedFiltersScopedState } from '../selectedFiltersScopedState';
export const filtersWhereScopedSelector = selectorFamily({
key: 'filtersWhereScopedSelector',
get:
(param: string) =>
(scopeId: string) =>
({ get }) => ({
AND: get(filtersScopedState(param)).map(turnFilterIntoWhereClause),
AND: get(selectedFiltersScopedState({ scopeId })).map(
turnFilterIntoWhereClause,
),
}),
});

0
front/src/modules/ui/data/view-bar/types/Filter.ts → front/src/modules/ui/data/filter/types/Filter.ts
View File

0
front/src/modules/ui/data/view-bar/types/FilterDefinition.ts → front/src/modules/ui/data/filter/types/FilterDefinition.ts
View File

0
front/src/modules/ui/data/view-bar/types/FilterDefinitionByEntity.ts → front/src/modules/ui/data/filter/types/FilterDefinitionByEntity.ts
View File

0
front/src/modules/ui/data/view-bar/types/FilterOperand.ts → front/src/modules/ui/data/filter/types/FilterOperand.ts
View File

0
front/src/modules/ui/data/view-bar/types/FilterType.ts → front/src/modules/ui/data/filter/types/FilterType.ts
View File

0
front/src/modules/ui/data/view-bar/types/FiltersHotkeyScope.ts → front/src/modules/ui/data/filter/types/FiltersHotkeyScope.ts
View File

0
front/src/modules/ui/data/view-bar/utils/getOperandLabel.ts → front/src/modules/ui/data/filter/utils/getOperandLabel.ts
View File

0
front/src/modules/ui/data/view-bar/utils/getOperandsForFilterType.ts → front/src/modules/ui/data/filter/utils/getOperandsForFilterType.ts
View File

0
front/src/modules/ui/data/view-bar/utils/turnFilterIntoWhereClause.ts → front/src/modules/ui/data/filter/utils/turnFilterIntoWhereClause.ts
View File

44
front/src/modules/ui/data/view-bar/components/SortDropdownButton.tsx → front/src/modules/ui/data/sort/components/SortDropdownButton.tsx
View File

@ -1,5 +1,4 @@
import { useCallback, useState } from 'react';
import { produce } from 'immer';
import { IconChevronDown } from '@/ui/display/icon';
import { LightButton } from '@/ui/input/button/components/LightButton';
@ -11,12 +10,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { SortDropdownId } from '../constants/SortDropdownId';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { availableSortsScopedState } from '../states/availableSortsScopedState';
import { sortsScopedState } from '../states/sortsScopedState';
import { useSort } from '../hooks/useSort';
import { SortDefinition } from '../types/SortDefinition';
import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
@ -28,8 +24,6 @@ export type SortDropdownButtonProps = {
export const SortDropdownButton = ({
hotkeyScope,
}: SortDropdownButtonProps) => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [isSortDirectionMenuUnfolded, setIsSortDirectionMenuUnfolded] =
useState(false);
@ -41,17 +35,7 @@ export const SortDropdownButton = ({
setSelectedSortDirection('asc');
}, []);
const [availableSorts] = useRecoilScopedState(
availableSortsScopedState,
ViewBarRecoilScopeContext,
);
const [sorts, setSorts] = useRecoilScopedState(
sortsScopedState,
ViewBarRecoilScopeContext,
);
const isSortSelected = sorts.length > 0;
const { availableSorts, onSortAdd, isSortSelected } = useSort();
const { toggleDropdown } = useDropdown({
dropdownScopeId: SortDropdownId,
@ -64,25 +48,11 @@ export const SortDropdownButton = ({
const handleAddSort = (selectedSortDefinition: SortDefinition) => {
toggleDropdown();
setSorts(
produce(sorts, (existingSortsDraft) => {
const foundExistingSortIndex = existingSortsDraft.findIndex(
(existingSort) => existingSort.key === selectedSortDefinition.key,
);
if (foundExistingSortIndex !== -1) {
existingSortsDraft[foundExistingSortIndex].direction =
selectedSortDirection;
} else {
existingSortsDraft.push({
key: selectedSortDefinition.key,
direction: selectedSortDirection,
definition: selectedSortDefinition,
});
}
}),
);
onSortAdd?.({
key: selectedSortDefinition.key,
direction: selectedSortDirection,
definition: selectedSortDefinition,
});
};
const handleDropdownButtonClose = () => {

0
front/src/modules/ui/data/view-bar/constants/SortDropdownId.ts → front/src/modules/ui/data/sort/constants/SortDropdownId.ts
View File

36
front/src/modules/ui/data/sort/hooks/useSort.ts Normal file
View File

@ -0,0 +1,36 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { SortScopeInternalContext } from '../scopes/scope-internal-context/SortScopeInternalContext';
import { useScopeInternalContextOrThrow } from './../../../utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
import { useSortStates } from './useSortStates';
type UseSortProps = {
sortScopeId?: string;
};
export const useSort = (props?: UseSortProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SortScopeInternalContext,
props?.sortScopeId,
);
const {
availableSorts,
setAvailableSorts,
isSortSelected,
setIsSortSelected,
} = useSortStates(scopeId);
const { onSortAdd } = useScopeInternalContextOrThrow(
SortScopeInternalContext,
);
return {
onSortAdd,
scopeId,
availableSorts,
isSortSelected,
setIsSortSelected,
setAvailableSorts,
};
};

23
front/src/modules/ui/data/sort/hooks/useSortStates.ts Normal file
View File

@ -0,0 +1,23 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { availableSortsScopedState } from '@/views/states/availableSortsScopedState';
import { isSortSelectedScopedState } from '../states/isSortSelectedScopedState';
export const useSortStates = (scopeId: string) => {
const [availableSorts, setAvailableSorts] = useRecoilScopedStateV2(
availableSortsScopedState,
scopeId,
);
const [isSortSelected, setIsSortSelected] = useRecoilScopedStateV2(
isSortSelectedScopedState,
scopeId,
);
return {
availableSorts,
setAvailableSorts,
isSortSelected,
setIsSortSelected,
};
};

33
front/src/modules/ui/data/sort/scopes/SortScope.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ReactNode } from 'react';
import { Sort } from '../types/Sort';
import { SortDefinition } from '../types/SortDefinition';
import { SortScopeInitEffect } from './init-effect/SortScopeInitEffect';
import { SortScopeInternalContext } from './scope-internal-context/SortScopeInternalContext';
type SortScopeProps = {
children: ReactNode;
sortScopeId: string;
availableSorts?: SortDefinition[];
onSortAdd?: (sort: Sort) => void | Promise<void>;
};
export const SortScope = ({
children,
sortScopeId,
availableSorts,
onSortAdd,
}: SortScopeProps) => {
return (
<SortScopeInternalContext.Provider
value={{ scopeId: sortScopeId, onSortAdd }}
>
<SortScopeInitEffect
sortScopeId={sortScopeId}
availableSorts={availableSorts}
/>
{children}
</SortScopeInternalContext.Provider>
);
};

25
front/src/modules/ui/data/sort/scopes/init-effect/SortScopeInitEffect.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useEffect } from 'react';
import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
import { useSortStates } from '../../hooks/useSortStates';
type SortScopeInitEffectProps = {
sortScopeId: string;
availableSorts?: SortDefinition[];
};
export const SortScopeInitEffect = ({
sortScopeId,
availableSorts,
}: SortScopeInitEffectProps) => {
const { setAvailableSorts } = useSortStates(sortScopeId);
useEffect(() => {
if (availableSorts) {
setAvailableSorts(availableSorts);
}
}, [availableSorts, setAvailableSorts]);
return <></>;
};

13
front/src/modules/ui/data/sort/scopes/scope-internal-context/SortScopeInternalContext.ts Normal file
View File

@ -0,0 +1,13 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
import { Sort } from '../../types/Sort';
import { SortDefinition } from '../../types/SortDefinition';
type SortScopeInternalContextProps = ScopedStateKey & {
onSortAdd?: (sort: Sort) => void;
availableSorts?: SortDefinition[];
};
export const SortScopeInternalContext =
createScopeInternalContext<SortScopeInternalContextProps>();

8
front/src/modules/ui/data/sort/states/availableSortsScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { SortDefinition } from '../types/SortDefinition';
export const availableSortsScopedState = createScopedState<SortDefinition[]>({
key: 'availableSortsScopedState',
defaultValue: [],
});

6
front/src/modules/ui/data/sort/states/isSortSelectedScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isSortSelectedScopedState = createScopedState<boolean>({
key: 'isSortSelectedScopedState',
defaultValue: false,
});

0
front/src/modules/ui/data/view-bar/types/Sort.ts → front/src/modules/ui/data/sort/types/Sort.ts
View File

0
front/src/modules/ui/data/view-bar/types/SortDefinition.ts → front/src/modules/ui/data/sort/types/SortDefinition.ts
View File

0
front/src/modules/ui/data/view-bar/types/SortDirection.ts → front/src/modules/ui/data/sort/types/SortDirection.ts
View File

0
front/src/modules/ui/data/view-bar/types/interface.ts → front/src/modules/ui/data/sort/types/interface.ts
View File

0
front/src/modules/ui/data/view-bar/utils/helpers.ts → front/src/modules/ui/data/sort/utils/helpers.ts
View File

51
front/src/modules/ui/data/view-bar/components/FilterDropdownDateSearchInput.tsx
View File

@ -1,51 +0,0 @@
import { useUpsertFilter } from '@/ui/data/view-bar/hooks/useUpsertFilter';
import { filterDefinitionUsedInDropdownScopedState } from '@/ui/data/view-bar/states/filterDefinitionUsedInDropdownScopedState';
import { selectedOperandInDropdownScopedState } from '@/ui/data/view-bar/states/selectedOperandInDropdownScopedState';
import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
export const FilterDropdownDateSearchInput = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setIsFilterDropdownUnfolded] = useRecoilScopedState(
isFilterDropdownUnfoldedScopedState,
ViewBarRecoilScopeContext,
);
const upsertFilter = useUpsertFilter();
const handleChange = (date: Date) => {
if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
upsertFilter({
key: filterDefinitionUsedInDropdown.key,
type: filterDefinitionUsedInDropdown.type,
value: date.toISOString(),
operand: selectedOperandInDropdown,
displayValue: date.toLocaleDateString(),
});
setIsFilterDropdownUnfolded(false);
};
return (
<InternalDatePicker
date={new Date()}
onChange={handleChange}
onMouseSelect={handleChange}
/>
);
};

44
front/src/modules/ui/data/view-bar/components/FilterDropdownEntitySearchInput.tsx
View File

@ -1,44 +0,0 @@
import { ChangeEvent } from 'react';
import { filterDefinitionUsedInDropdownScopedState } from '@/ui/data/view-bar/states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '@/ui/data/view-bar/states/filterDropdownSearchInputScopedState';
import { selectedOperandInDropdownScopedState } from '@/ui/data/view-bar/states/selectedOperandInDropdownScopedState';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
export const FilterDropdownEntitySearchInput = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
useRecoilScopedState(
filterDropdownSearchInputScopedState,
ViewBarRecoilScopeContext,
);
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
<DropdownMenuSearchInput
autoFocus
type="text"
value={filterDropdownSearchInput}
placeholder={filterDefinitionUsedInDropdown.label}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterDropdownSearchInput(event.target.value);
}}
/>
)
);
};

28
front/src/modules/ui/data/view-bar/components/FilterDropdownEntitySelect.tsx
View File

@ -1,28 +0,0 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
export const FilterDropdownEntitySelect = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
if (filterDefinitionUsedInDropdown?.type !== 'entity') {
return null;
}
return (
<>
<DropdownMenuSeparator />
<RecoilScope>
{filterDefinitionUsedInDropdown.entitySelectComponent}
</RecoilScope>
</>
);
};

39
front/src/modules/ui/data/view-bar/components/FilterDropdownOperandButton.tsx
View File

@ -1,39 +0,0 @@
import { IconChevronDown } from '@/ui/display/icon';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
import { getOperandLabel } from '../utils/getOperandLabel';
export const FilterDropdownOperandButton = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [selectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
] = useRecoilScopedState(
isFilterDropdownOperandSelectUnfoldedScopedState,
ViewBarRecoilScopeContext,
);
if (isFilterDropdownOperandSelectUnfolded) {
return null;
}
return (
<DropdownMenuHeader
key={'selected-filter-operand'}
EndIcon={IconChevronDown}
onClick={() => setIsFilterDropdownOperandSelectUnfolded(true)}
>
{getOperandLabel(selectedOperandInDropdown)}
</DropdownMenuHeader>
);
};

59
front/src/modules/ui/data/view-bar/components/MultipleFiltersButton.tsx
View File

@ -1,59 +0,0 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { FilterDropdownId } from '../constants/FilterDropdownId';
import { useViewBarContext } from '../hooks/useViewBarContext';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
export const MultipleFiltersButton = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownScopeId: FilterDropdownId,
});
const [, setIsFilterDropdownOperandSelectUnfolded] = useRecoilScopedState(
isFilterDropdownOperandSelectUnfoldedScopedState,
ViewBarRecoilScopeContext,
);
const [, setFilterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const [, setFilterDropdownSearchInput] = useRecoilScopedState(
filterDropdownSearchInputScopedState,
ViewBarRecoilScopeContext,
);
const [, setSelectedOperandInDropdown] = useRecoilScopedState(
selectedOperandInDropdownScopedState,
ViewBarRecoilScopeContext,
);
const resetState = () => {
setIsFilterDropdownOperandSelectUnfolded(false);
setFilterDefinitionUsedInDropdown(null);
setSelectedOperandInDropdown(null);
setFilterDropdownSearchInput('');
};
const handleClick = () => {
toggleDropdown();
resetState();
};
return (
<StyledHeaderDropdownButton
isUnfolded={isDropdownOpen}
onClick={handleClick}
>
Filter
</StyledHeaderDropdownButton>
);
};

82
front/src/modules/ui/data/view-bar/components/SortOrFilterChip.tsx
View File

@ -1,82 +0,0 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconX } from '@/ui/display/icon/index';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
type SortOrFilterChipProps = {
labelKey?: string;
labelValue: string;
Icon?: IconComponent;
onRemove: () => void;
isSort?: boolean;
testId?: string;
};
type StyledChipProps = {
isSort?: boolean;
};
const StyledChip = styled.div<StyledChipProps>`
align-items: center;
background-color: ${({ theme }) => theme.accent.quaternary};
border: 1px solid ${({ theme }) => theme.accent.tertiary};
border-radius: 4px;
color: ${({ theme }) => theme.color.blue};
display: flex;
flex-direction: row;
flex-shrink: 0;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ isSort }) => (isSort ? 'bold' : 'normal')};
padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
`;
const StyledIcon = styled.div`
align-items: center;
display: flex;
margin-right: ${({ theme }) => theme.spacing(1)};
`;
const StyledDelete = styled.div`
align-items: center;
cursor: pointer;
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
margin-left: ${({ theme }) => theme.spacing(2)};
margin-top: 1px;
user-select: none;
&:hover {
background-color: ${({ theme }) => theme.accent.secondary};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
`;
const StyledLabelKey = styled.div`
font-weight: ${({ theme }) => theme.font.weight.medium};
`;
const SortOrFilterChip = ({
labelKey,
labelValue,
Icon,
onRemove,
isSort,
testId,
}: SortOrFilterChipProps) => {
const theme = useTheme();
return (
<StyledChip isSort={isSort}>
{Icon && (
<StyledIcon>
<Icon size={theme.icon.size.sm} />
</StyledIcon>
)}
{labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
{labelValue}
<StyledDelete onClick={onRemove} data-testid={'remove-icon-' + testId}>
<IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
</StyledDelete>
</StyledChip>
);
};
export default SortOrFilterChip;

138
front/src/modules/ui/data/view-bar/components/UpdateViewButtonGroup.tsx
View File

@ -1,138 +0,0 @@
import { useCallback, useContext, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
import { canPersistFiltersScopedFamilySelector } from '@/ui/data/view-bar/states/selectors/canPersistFiltersScopedFamilySelector';
import { canPersistSortsScopedFamilySelector } from '@/ui/data/view-bar/states/selectors/canPersistSortsScopedFamilySelector';
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
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 { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewBarContext } from '../contexts/ViewBarContext';
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 {
canPersistViewFields,
onCurrentViewSubmit,
ViewBarRecoilScopeContext,
} = useContext(ViewBarContext);
const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
const currentViewId = useRecoilScopedValue(
currentViewIdScopedState,
ViewBarRecoilScopeContext,
);
const filters = useRecoilScopedValue(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const setSavedFilters = useSetRecoilState(
savedFiltersFamilyState(currentViewId),
);
const canPersistFilters = useRecoilValue(
canPersistFiltersScopedFamilySelector({
recoilScopeId,
viewId: currentViewId,
}),
);
const sorts = useRecoilScopedValue(
sortsScopedState,
ViewBarRecoilScopeContext,
);
const setSavedSorts = useSetRecoilState(savedSortsFamilyState(currentViewId));
const canPersistSorts = useRecoilValue(
canPersistSortsScopedFamilySelector({
recoilScopeId,
viewId: currentViewId,
}),
);
const setViewEditMode = useSetRecoilState(viewEditModeState);
const canPersistView =
currentViewId &&
(canPersistViewFields || canPersistFilters || canPersistSorts);
const handleArrowDownButtonClick = useCallback(() => {
setIsDropdownOpen((previousIsOpen) => !previousIsOpen);
}, []);
const handleCreateViewButtonClick = useCallback(() => {
setViewEditMode({ mode: 'create', viewId: undefined });
onViewEditModeChange?.();
setIsDropdownOpen(false);
}, [setViewEditMode, onViewEditModeChange]);
const handleDropdownClose = useCallback(() => {
setIsDropdownOpen(false);
}, []);
const handleViewSubmit = async () => {
if (canPersistFilters) setSavedFilters(filters);
if (canPersistSorts) setSavedSorts(sorts);
await onCurrentViewSubmit?.();
};
useScopedHotkeys(
[Key.Enter, Key.Escape],
handleDropdownClose,
hotkeyScope,
[],
);
if (!canPersistView) return null;
return (
<StyledContainer>
<ButtonGroup 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>
);
};

65
front/src/modules/ui/data/view-bar/components/ViewBar.tsx
View File

@ -1,65 +0,0 @@
import { ReactNode } from 'react';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { TopBar } from '@/ui/layout/top-bar/TopBar';
import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
import { FilterDropdownButton } from './FilterDropdownButton';
import { SortDropdownButton } from './SortDropdownButton';
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,
});
return (
<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}
/>
}
/>
}
/>
);
};

242
front/src/modules/ui/data/view-bar/components/ViewBarDetails.tsx
View File

@ -1,242 +0,0 @@
import { ReactNode, useContext } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconArrowDown, IconArrowUp } from '@/ui/display/icon/index';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewBarContext } from '../contexts/ViewBarContext';
import { useRemoveFilter } from '../hooks/useRemoveFilter';
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
import { filtersScopedState } from '../states/filtersScopedState';
import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
import { canPersistFiltersScopedFamilySelector } from '../states/selectors/canPersistFiltersScopedFamilySelector';
import { canPersistSortsScopedFamilySelector } from '../states/selectors/canPersistSortsScopedFamilySelector';
import { savedFiltersFamilySelector } from '../states/selectors/savedFiltersFamilySelector';
import { savedSortsFamilySelector } from '../states/selectors/savedSortsFamilySelector';
import { sortsScopedState } from '../states/sortsScopedState';
import { getOperandLabelShort } from '../utils/getOperandLabel';
import { AddFilterFromDropdownButton } from './AddFilterFromDetailsButton';
import SortOrFilterChip from './SortOrFilterChip';
export type ViewBarDetailsProps = {
hasFilterButton?: boolean;
rightComponent?: ReactNode;
};
const StyledBar = styled.div`
align-items: center;
border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
flex-direction: row;
height: 40px;
justify-content: space-between;
z-index: 4;
`;
const StyledChipcontainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
height: 40px;
justify-content: space-between;
margin-left: ${({ theme }) => theme.spacing(2)};
overflow-x: auto;
`;
const StyledCancelButton = styled.button`
background-color: inherit;
border: none;
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: auto;
margin-right: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => {
const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1);
return `${vert} ${horiz} ${vert} ${horiz}`;
}};
user-select: none;
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.spacing(1)};
}
`;
const StyledFilterContainer = styled.div`
align-items: center;
display: flex;
`;
const StyledSeperatorContainer = styled.div`
align-items: flex-start;
align-self: stretch;
display: flex;
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledSeperator = styled.div`
align-self: stretch;
background: ${({ theme }) => theme.background.quaternary};
width: 1px;
`;
const StyledAddFilterContainer = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
z-index: 5;
`;
export const ViewBarDetails = ({
hasFilterButton = false,
rightComponent,
}: ViewBarDetailsProps) => {
const { canPersistViewFields, onViewBarReset, ViewBarRecoilScopeContext } =
useContext(ViewBarContext);
const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
const currentViewId = useRecoilScopedValue(
currentViewIdScopedState,
ViewBarRecoilScopeContext,
);
const [filters, setFilters] = useRecoilScopedState(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const savedFilters = useRecoilValue(
savedFiltersFamilySelector(currentViewId),
);
const savedSorts = useRecoilValue(savedSortsFamilySelector(currentViewId));
const [availableFilters] = useRecoilScopedState(
availableFiltersScopedState,
ViewBarRecoilScopeContext,
);
const canPersistFilters = useRecoilValue(
canPersistFiltersScopedFamilySelector({
recoilScopeId,
viewId: currentViewId,
}),
);
const [sorts, setSorts] = useRecoilScopedState(
sortsScopedState,
ViewBarRecoilScopeContext,
);
const canPersistSorts = useRecoilValue(
canPersistSortsScopedFamilySelector({
recoilScopeId,
viewId: currentViewId,
}),
);
const canPersistView =
canPersistViewFields || canPersistFilters || canPersistSorts;
const [isViewBarExpanded] = useRecoilScopedState(
isViewBarExpandedScopedState,
ViewBarRecoilScopeContext,
);
const filtersWithDefinition = filters.map((filter) => {
const filterDefinition = availableFilters.find((availableFilter) => {
return availableFilter.key === filter.key;
});
return {
...filter,
...filterDefinition,
};
});
const removeFilter = useRemoveFilter();
const handleCancelClick = () => {
onViewBarReset?.();
setFilters(savedFilters);
setSorts(savedSorts);
};
const handleSortRemove = (sortKey: string) =>
setSorts((previousSorts) =>
previousSorts.filter((sort) => sort.key !== sortKey),
);
const shouldExpandViewBar =
canPersistView ||
((filtersWithDefinition.length || sorts.length) && isViewBarExpanded);
if (!shouldExpandViewBar) {
return null;
}
return (
<StyledBar>
<StyledFilterContainer>
<StyledChipcontainer>
{sorts.map((sort) => {
return (
<SortOrFilterChip
key={sort.key}
testId={sort.key}
labelValue={sort.definition.label}
Icon={sort.direction === 'desc' ? IconArrowDown : IconArrowUp}
isSort
onRemove={() => handleSortRemove(sort.key)}
/>
);
})}
{!!sorts.length && !!filtersWithDefinition.length && (
<StyledSeperatorContainer>
<StyledSeperator />
</StyledSeperatorContainer>
)}
{filtersWithDefinition.map((filter) => {
return (
<SortOrFilterChip
key={filter.key}
testId={filter.key}
labelKey={filter.label}
labelValue={`${getOperandLabelShort(filter.operand)} ${
filter.displayValue
}`}
Icon={filter.Icon}
onRemove={() => {
removeFilter(filter.key);
}}
/>
);
})}
</StyledChipcontainer>
{hasFilterButton && (
<StyledAddFilterContainer>
<AddFilterFromDropdownButton />
</StyledAddFilterContainer>
)}
</StyledFilterContainer>
{canPersistView && (
<StyledCancelButton
data-testid="cancel-button"
onClick={handleCancelClick}
>
Reset
</StyledCancelButton>
)}
{rightComponent}
</StyledBar>
);
};

142
front/src/modules/ui/data/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
View File

@ -1,142 +0,0 @@
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>
);
};

214
front/src/modules/ui/data/view-bar/components/ViewsDropdownButton.tsx
View File

@ -1,214 +0,0 @@
import { MouseEvent, useContext } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
RecoilValueReadOnly,
useRecoilCallback,
useRecoilValue,
useSetRecoilState,
} from 'recoil';
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/currentViewScopedSelector';
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
import { viewsScopedState } from '@/ui/data/view-bar/states/viewsScopedState';
import {
IconChevronDown,
IconList,
IconPencil,
IconPlus,
IconTrash,
} from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { assertNotNull } from '~/utils/assert';
import { ViewsDropdownId } from '../constants/ViewsDropdownId';
import { ViewBarContext } from '../contexts/ViewBarContext';
import { useRemoveView } from '../hooks/useRemoveView';
const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
font-weight: ${({ theme }) => theme.font.weight.regular};
`;
const StyledDropdownLabelAdornments = styled.span`
align-items: center;
color: ${({ theme }) => theme.grayScale.gray35};
display: inline-flex;
gap: ${({ theme }) => theme.spacing(1)};
margin-left: ${({ theme }) => theme.spacing(1)};
`;
const StyledViewIcon = styled(IconList)`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
const StyledViewName = styled.span`
display: inline-block;
max-width: 130px;
@media (max-width: 375px) {
max-width: 90px;
}
@media (min-width: 376px) and (max-width: ${MOBILE_VIEWPORT}px) {
max-width: 110px;
}
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
`;
export type ViewsDropdownButtonProps = {
hotkeyScope: HotkeyScope;
onViewEditModeChange?: () => void;
};
export const ViewsDropdownButton = ({
hotkeyScope,
onViewEditModeChange,
}: ViewsDropdownButtonProps) => {
const theme = useTheme();
const { defaultViewName, onViewSelect, ViewBarRecoilScopeContext } =
useContext(ViewBarContext);
const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
const currentView = useRecoilScopedValue(
currentViewScopedSelector,
ViewBarRecoilScopeContext,
);
const [views] = useRecoilScopedState(
viewsScopedState,
ViewBarRecoilScopeContext,
);
const entityCount = useRecoilValue(
entityCountInCurrentViewState as RecoilValueReadOnly<number>,
);
const { isDropdownOpen, closeDropdown } = useDropdown({
dropdownScopeId: ViewsDropdownId,
});
const setViewEditMode = useSetRecoilState(viewEditModeState);
const handleViewSelect = useRecoilCallback(
({ set, snapshot }) =>
async (viewId: string) => {
await onViewSelect?.(viewId);
const savedFilters = await snapshot.getPromise(
savedFiltersFamilyState(viewId),
);
const savedSorts = await snapshot.getPromise(
savedSortsFamilyState(viewId),
);
set(filtersScopedState(recoilScopeId), savedFilters);
set(sortsScopedState(recoilScopeId), savedSorts);
set(currentViewIdScopedState(recoilScopeId), viewId);
closeDropdown();
},
[onViewSelect, recoilScopeId, closeDropdown],
);
const handleAddViewButtonClick = () => {
setViewEditMode({ mode: 'create', viewId: undefined });
onViewEditModeChange?.();
closeDropdown();
};
const handleEditViewButtonClick = (
event: MouseEvent<HTMLButtonElement>,
viewId: string,
) => {
event.stopPropagation();
setViewEditMode({ mode: 'edit', viewId });
onViewEditModeChange?.();
closeDropdown();
};
const { removeView } = useRemoveView();
const handleDeleteViewButtonClick = async (
event: MouseEvent<HTMLButtonElement>,
viewId: string,
) => {
event.stopPropagation();
await removeView(viewId);
closeDropdown();
};
return (
<DropdownScope dropdownScopeId={ViewsDropdownId}>
<Dropdown
dropdownHotkeyScope={hotkeyScope}
clickableComponent={
<StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
<StyledViewIcon size={theme.icon.size.md} />
<StyledViewName>
{currentView?.name || defaultViewName}
</StyledViewName>
<StyledDropdownLabelAdornments>
· {entityCount} <IconChevronDown size={theme.icon.size.sm} />
</StyledDropdownLabelAdornments>
</StyledDropdownButtonContainer>
}
dropdownComponents={
<>
<DropdownMenuItemsContainer>
{views.map((view) => (
<MenuItem
key={view.id}
iconButtons={[
{
Icon: IconPencil,
onClick: (event: MouseEvent<HTMLButtonElement>) =>
handleEditViewButtonClick(event, view.id),
},
views.length > 1
? {
Icon: IconTrash,
onClick: (event: MouseEvent<HTMLButtonElement>) =>
handleDeleteViewButtonClick(event, view.id),
}
: null,
].filter(assertNotNull)}
onClick={() => handleViewSelect(view.id)}
LeftIcon={IconList}
text={view.name}
/>
))}
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<StyledBoldDropdownMenuItemsContainer>
<MenuItem
onClick={handleAddViewButtonClick}
LeftIcon={IconPlus}
text="Add view"
/>
</StyledBoldDropdownMenuItemsContainer>
</>
}
/>
</DropdownScope>
);
};

1
front/src/modules/ui/data/view-bar/constants/ViewsDropdownId.ts
View File

@ -1 +0,0 @@
export const ViewsDropdownId = 'views';

20
front/src/modules/ui/data/view-bar/contexts/ViewBarContext.ts
View File

@ -1,20 +0,0 @@
import { createContext } from 'react';
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
import { View } from '../types/View';
export const ViewBarContext = createContext<{
canPersistViewFields?: boolean;
defaultViewName?: string;
onCurrentViewSubmit?: () => void | Promise<void>;
onViewBarReset?: () => void;
onViewCreate?: (view: View) => void | Promise<void>;
onViewEdit?: (view: View) => void | Promise<void>;
onViewRemove?: (viewId: string) => void | Promise<void>;
onViewSelect?: (viewId: string) => void | Promise<void>;
onImport?: () => void | Promise<void>;
ViewBarRecoilScopeContext: RecoilScopeContext;
}>({
ViewBarRecoilScopeContext: createContext<string | null>(null),
});

28
front/src/modules/ui/data/view-bar/hooks/useFilterCurrentlyEdited.ts
View File

@ -1,28 +0,0 @@
import { useMemo } from 'react';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filtersScopedState } from '../states/filtersScopedState';
import { useViewBarContext } from './useViewBarContext';
export const useFilterCurrentlyEdited = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [filters] = useRecoilScopedState(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
ViewBarRecoilScopeContext,
);
return useMemo(() => {
return filters.find(
(filter) => filter.key === filterDefinitionUsedInDropdown?.key,
);
}, [filterDefinitionUsedInDropdown, filters]);
};

25
front/src/modules/ui/data/view-bar/hooks/useRemoveFilter.ts
View File

@ -1,25 +0,0 @@
import { useContext } from 'react';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ViewBarContext } from '../contexts/ViewBarContext';
import { filtersScopedState } from '../states/filtersScopedState';
export const useRemoveFilter = () => {
const { ViewBarRecoilScopeContext } = useContext(ViewBarContext);
const [, setFilters] = useRecoilScopedState(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const removeFilter = (filterKey: string) => {
setFilters((filters) => {
return filters.filter((filter) => {
return filter.key !== filterKey;
});
});
};
return removeFilter;
};

35
front/src/modules/ui/data/view-bar/hooks/useRemoveView.ts
View File

@ -1,35 +0,0 @@
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewBarContext } from '../contexts/ViewBarContext';
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
import { viewsScopedState } from '../states/viewsScopedState';
export const useRemoveView = () => {
const { onViewRemove, ViewBarRecoilScopeContext } =
useContext(ViewBarContext);
const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
const removeView = useRecoilCallback(
({ set, snapshot }) =>
async (viewId: string) => {
const currentViewId = await snapshot.getPromise(
currentViewIdScopedState(recoilScopeId),
);
if (currentViewId === viewId)
set(currentViewIdScopedState(recoilScopeId), undefined);
set(viewsScopedState(recoilScopeId), (previousViews) =>
previousViews.filter((view) => view.id !== viewId),
);
await onViewRemove?.(viewId);
},
[onViewRemove, recoilScopeId],
);
return { removeView };
};

35
front/src/modules/ui/data/view-bar/hooks/useUpsertFilter.ts
View File

@ -1,35 +0,0 @@
import { produce } from 'immer';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { filtersScopedState } from '../states/filtersScopedState';
import { Filter } from '../types/Filter';
import { useViewBarContext } from './useViewBarContext';
export const useUpsertFilter = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const [, setFilters] = useRecoilScopedState(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const upsertFilter = (filterToUpsert: Filter) => {
setFilters((filters) => {
return produce(filters, (filtersDraft) => {
const index = filtersDraft.findIndex(
(filter) => filter.key === filterToUpsert.key,
);
if (index === -1) {
filtersDraft.push(filterToUpsert);
} else {
filtersDraft[index] = filterToUpsert;
}
});
});
};
return upsertFilter;
};

109
front/src/modules/ui/data/view-bar/hooks/useUpsertView.ts
View File

@ -1,109 +0,0 @@
import { useContext } from 'react';
import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewBarContext } from '../contexts/ViewBarContext';
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
import { filtersScopedState } from '../states/filtersScopedState';
import { savedFiltersFamilyState } from '../states/savedFiltersFamilyState';
import { savedSortsFamilyState } from '../states/savedSortsFamilyState';
import { currentViewScopedSelector } from '../states/selectors/currentViewScopedSelector';
import { viewsByIdScopedSelector } from '../states/selectors/viewsByIdScopedSelector';
import { sortsScopedState } from '../states/sortsScopedState';
import { viewEditModeState } from '../states/viewEditModeState';
import { viewsScopedState } from '../states/viewsScopedState';
export const useUpsertView = () => {
const { onViewCreate, onViewEdit, ViewBarRecoilScopeContext } =
useContext(ViewBarContext);
const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
const filters = useRecoilScopedValue(
filtersScopedState,
ViewBarRecoilScopeContext,
);
const sorts = useRecoilScopedValue(
sortsScopedState,
ViewBarRecoilScopeContext,
);
const viewEditMode = useRecoilValue(viewEditModeState);
const resetViewEditMode = useResetRecoilState(viewEditModeState);
const upsertView = useRecoilCallback(
({ set, snapshot }) =>
async (name?: string) => {
if (!viewEditMode.mode || !name) {
resetViewEditMode();
return;
}
if (viewEditMode.mode === 'create') {
const createdView = { id: v4(), name };
set(savedFiltersFamilyState(createdView.id), filters);
set(savedSortsFamilyState(createdView.id), sorts);
set(viewsScopedState(recoilScopeId), (previousViews) => [
...previousViews,
createdView,
]);
await onViewCreate?.(createdView);
resetViewEditMode();
set(currentViewIdScopedState(recoilScopeId), createdView.id);
return createdView;
}
const viewsById = await snapshot.getPromise(
viewsByIdScopedSelector(recoilScopeId),
);
const currentView = await snapshot.getPromise(
currentViewScopedSelector(recoilScopeId),
);
const viewToEdit = viewEditMode.viewId
? viewsById[viewEditMode.viewId]
: currentView;
if (!viewToEdit) {
resetViewEditMode();
return;
}
const editedView = {
...viewToEdit,
name,
};
set(viewsScopedState(recoilScopeId), (previousViews) =>
previousViews.map((previousView) =>
previousView.id === editedView.id ? editedView : previousView,
),
);
await onViewEdit?.(editedView);
resetViewEditMode();
return editedView;
},
[
filters,
onViewCreate,
onViewEdit,
recoilScopeId,
resetViewEditMode,
sorts,
viewEditMode.mode,
viewEditMode.viewId,
],
);
return { upsertView };
};

7
front/src/modules/ui/data/view-bar/hooks/useViewBarContext.ts
View File

@ -1,7 +0,0 @@
import { useContext } from 'react';
import { ViewBarContext } from '../contexts/ViewBarContext';
export const useViewBarContext = () => {
return useContext(ViewBarContext);
};

11
front/src/modules/ui/data/view-bar/states/availableFiltersScopedState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { FilterDefinition } from '../types/FilterDefinition';
export const availableFiltersScopedState = atomFamily<
FilterDefinition[],
string
>({
key: 'availableFiltersScopedState',
default: [],
});

8
front/src/modules/ui/data/view-bar/states/availableSortsScopedState.ts
View File

@ -1,8 +0,0 @@
import { atomFamily } from 'recoil';
import { SortDefinition } from '../types/SortDefinition';
export const availableSortsScopedState = atomFamily<SortDefinition[], string>({
key: 'availableSortsScopedState',
default: [],
});

6
front/src/modules/ui/data/view-bar/states/currentViewIdScopedState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const currentViewIdScopedState = atomFamily<string | undefined, string>({
key: 'currentViewIdScopedState',
default: undefined,
});

6
front/src/modules/ui/data/view-bar/states/entityCountInCurrentViewState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const entityCountInCurrentViewState = atom<number>({
key: 'entityCountInCurrentViewState',
default: 0,
});

11
front/src/modules/ui/data/view-bar/states/filterDefinitionUsedInDropdownScopedState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { FilterDefinition } from '../types/FilterDefinition';
export const filterDefinitionUsedInDropdownScopedState = atomFamily<
FilterDefinition | null,
string
>({
key: 'filterDefinitionUsedInDropdownScopedState',
default: null,
});

6
front/src/modules/ui/data/view-bar/states/filterDropdownSearchInputScopedState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const filterDropdownSearchInputScopedState = atomFamily<string, string>({
key: 'filterDropdownSearchInputScopedState',
default: '',
});

9
front/src/modules/ui/data/view-bar/states/filterDropdownSelectedEntityIdScopedState.ts
View File

@ -1,9 +0,0 @@
import { atomFamily } from 'recoil';
export const filterDropdownSelectedEntityIdScopedState = atomFamily<
string | null,
string
>({
key: 'filterDropdownSelectedEntityIdScopedState',
default: null,
});

8
front/src/modules/ui/data/view-bar/states/filtersScopedState.ts
View File

@ -1,8 +0,0 @@
import { atomFamily } from 'recoil';
import { Filter } from '../types/Filter';
export const filtersScopedState = atomFamily<Filter[], string>({
key: 'filtersScopedState',
default: [],
});

9
front/src/modules/ui/data/view-bar/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts
View File

@ -1,9 +0,0 @@
import { atomFamily } from 'recoil';
export const isFilterDropdownOperandSelectUnfoldedScopedState = atomFamily<
boolean,
string
>({
key: 'isFilterDropdownOperandSelectUnfoldedScopedState',
default: false,
});

6
front/src/modules/ui/data/view-bar/states/isFilterDropdownUnfoldedScopedState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const isFilterDropdownUnfoldedScopedState = atomFamily<boolean, string>({
key: 'isFilterDropdownUnfoldedScopedState',
default: false,
});

6
front/src/modules/ui/data/view-bar/states/isViewBarExpandedScopedState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const isViewBarExpandedScopedState = atomFamily<boolean, string>({
key: 'isViewBarExpandedScopedState',
default: true,
});

10
front/src/modules/ui/data/view-bar/states/savedFiltersFamilyState.ts
View File

@ -1,10 +0,0 @@
import { atomFamily } from 'recoil';
import { Filter } from '../types/Filter';
export const savedFiltersFamilyState = atomFamily<Filter[], string | undefined>(
{
key: 'savedFiltersFamilyState',
default: [],
},
);

8
front/src/modules/ui/data/view-bar/states/savedSortsFamilyState.ts
View File

@ -1,8 +0,0 @@
import { atomFamily } from 'recoil';
import { Sort } from '../types/Sort';
export const savedSortsFamilyState = atomFamily<Sort[], string | undefined>({
key: 'savedSortsFamilyState',
default: [],
});

11
front/src/modules/ui/data/view-bar/states/selectedOperandInDropdownScopedState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { ViewFilterOperand } from '~/generated/graphql';
export const selectedOperandInDropdownScopedState = atomFamily<
ViewFilterOperand | null,
string
>({
key: 'selectedOperandInDropdownScopedState',
default: null,
});

Some files were not shown because too many files have changed in this diff Show More