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

feat: create view from current table columns + persist view fields on… (#1308)

Browse Source 
feat: create view from current table columns + persist view fields on Update View button click

Closes #1302, Closes #1307
This commit is contained in:
Thaïs
2023-08-25 18:21:27 +02:00
committed by GitHub
parent f520a00909
commit 432fea0ee3
27 changed files with 432 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
View File

@ -1,7 +1,7 @@
import { useCallback, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { Button, ButtonSize } from '@/ui/button/components/Button';
@ -22,6 +22,9 @@ import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextS
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
import { canPersistTableColumnsScopedSelector } from '../../states/selectors/canPersistTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
import {
currentTableViewIdState,
tableViewEditModeState,
@ -56,12 +59,38 @@ export const TableUpdateViewButtonGroup = ({
currentTableViewIdState,
TableRecoilScopeContext,
);
const currentColumns = useRecoilScopedValue(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const setSavedColumns = useSetRecoilState(
savedTableColumnsScopedState(currentViewId),
);
const canPersistColumns = useRecoilValue(
canPersistTableColumnsScopedSelector([tableScopeId, currentViewId]),
);
const selectedFilters = useRecoilScopedValue(
filtersScopedState,
TableRecoilScopeContext,
);
const setSavedFilters = useSetRecoilState(
savedFiltersScopedState(currentViewId),
);
const canPersistFilters = useRecoilValue(
canPersistFiltersScopedSelector([tableScopeId, currentViewId]),
);
const selectedSorts = useRecoilScopedValue(
sortsScopedState,
TableRecoilScopeContext,
);
const setSavedSorts = useSetRecoilState(savedSortsScopedState(currentViewId));
const canPersistSorts = useRecoilValue(
canPersistSortsScopedSelector([tableScopeId, currentViewId]),
);
const setViewEditMode = useSetRecoilState(tableViewEditModeState);
const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({
@ -82,23 +111,21 @@ export const TableUpdateViewButtonGroup = ({
setIsDropdownOpen(false);
}, []);
const handleViewSubmit = useRecoilCallback(
({ set, snapshot }) =>
async () => {
await Promise.resolve(onViewSubmit?.());
const handleViewSubmit = useCallback(async () => {
await Promise.resolve(onViewSubmit?.());
const selectedFilters = await snapshot.getPromise(
filtersScopedState(tableScopeId),
);
set(savedFiltersScopedState(currentViewId), selectedFilters);
const selectedSorts = await snapshot.getPromise(
sortsScopedState(tableScopeId),
);
set(savedSortsScopedState(currentViewId), selectedSorts);
},
[currentViewId, onViewSubmit, tableScopeId],
);
setSavedColumns(currentColumns);
setSavedFilters(selectedFilters);
setSavedSorts(selectedSorts);
}, [
currentColumns,
onViewSubmit,
selectedFilters,
selectedSorts,
setSavedColumns,
setSavedFilters,
setSavedSorts,
]);
useScopedHotkeys(
[Key.Enter, Key.Escape],
@ -112,7 +139,10 @@ export const TableUpdateViewButtonGroup = ({
<ButtonGroup size={ButtonSize.Small}>
<Button
title="Update view"
disabled={!currentViewId || (!canPersistFilters && !canPersistSorts)}
disabled={
!currentViewId ||
(!canPersistColumns && !canPersistFilters && !canPersistSorts)
}
onClick={handleViewSubmit}
/>
<Button