From a1e6e46388ea23fd2a8219e23035b3ff528e18c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Mon, 4 Sep 2023 17:08:04 +0200 Subject: [PATCH] fix: allow access to the Update View button when a table column can be persisted (#1433) Closes #1432 --- .../components/SortAndFilterBar.tsx | 4 +++- .../ui/table/components/EntityTableHeader.tsx | 14 +++++++++++++- .../modules/ui/table/hooks/useTableColumns.ts | 13 ++++++++++++- .../TableOptionsDropdownContent.tsx | 5 +---- .../table-header/components/TableHeader.tsx | 19 ++++++++++++++++++- 5 files changed, 47 insertions(+), 8 deletions(-) diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx index 926ec075a0..6491b6f9e4 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx +++ b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx @@ -21,6 +21,7 @@ import { FilterDropdownButton } from './FilterDropdownButton'; import SortOrFilterChip from './SortOrFilterChip'; type OwnProps = { + canToggle?: boolean; context: Context; sorts: Array>; onRemoveSort: (sortId: SelectedSortType['key']) => void; @@ -93,6 +94,7 @@ const StyledSeperator = styled.div` `; function SortAndFilterBar({ + canToggle, context, sorts, onRemoveSort, @@ -136,7 +138,7 @@ function SortAndFilterBar({ } if ( - (!filtersWithDefinition.length && !sorts.length) || + (!canToggle && !filtersWithDefinition.length && !sorts.length) || !isSortAndFilterBarOpen ) { return null; diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx index 1d6a7e3b4e..7ad889afc3 100644 --- a/front/src/modules/ui/table/components/EntityTableHeader.tsx +++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilState } from 'recoil'; import { IconButton } from '@/ui/button/components/IconButton'; +import { sortAndFilterBarScopedState } from '@/ui/filter-n-sort/states/sortAndFilterBarScopedState'; import { IconPlus } from '@/ui/icon'; import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; @@ -88,6 +89,10 @@ export function EntityTableHeader() { visibleTableColumnsScopedSelector, TableRecoilScopeContext, ); + const [, setIsSortAndFilterBarOpen] = useRecoilScopedState( + sortAndFilterBarScopedState, + TableRecoilScopeContext, + ); const [initialPointerPositionX, setInitialPointerPositionX] = useState< number | null @@ -128,13 +133,20 @@ export function EntityTableHeader() { ); setColumns(nextColumns); + setIsSortAndFilterBarOpen(true); } set(resizeFieldOffsetState, 0); setInitialPointerPositionX(null); setResizedFieldKey(null); }, - [resizedFieldKey, columnsByKey, columns, setColumns], + [ + resizedFieldKey, + columnsByKey, + columns, + setColumns, + setIsSortAndFilterBarOpen, + ], ); useTrackPointer({ diff --git a/front/src/modules/ui/table/hooks/useTableColumns.ts b/front/src/modules/ui/table/hooks/useTableColumns.ts index a0181399a9..8539888b3f 100644 --- a/front/src/modules/ui/table/hooks/useTableColumns.ts +++ b/front/src/modules/ui/table/hooks/useTableColumns.ts @@ -1,6 +1,7 @@ import { useCallback } from 'react'; import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; +import { sortAndFilterBarScopedState } from '@/ui/filter-n-sort/states/sortAndFilterBarScopedState'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; @@ -18,6 +19,10 @@ export const useTableColumns = () => { tableColumnsByKeyScopedSelector, TableRecoilScopeContext, ); + const [, setIsSortAndFilterBarOpen] = useRecoilScopedState( + sortAndFilterBarScopedState, + TableRecoilScopeContext, + ); const handleColumnVisibilityChange = useCallback( (column: ColumnDefinition) => { @@ -32,8 +37,14 @@ export const useTableColumns = () => { ); setTableColumns(nextColumns); + setIsSortAndFilterBarOpen(true); }, - [setTableColumns, tableColumns, tableColumnsByKey], + [ + setIsSortAndFilterBarOpen, + setTableColumns, + tableColumns, + tableColumnsByKey, + ], ); return { handleColumnVisibilityChange }; diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx index 8f9baf3373..d5b6029d6b 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx @@ -138,10 +138,7 @@ export function TableOptionsDropdownContent({ const currentColumns = await snapshot.getPromise( tableColumnsScopedState(tableScopeId), ); - set( - savedTableColumnsScopedState(viewToCreate.id), - currentColumns.map((column) => ({ ...column, id: v4() })), - ); + set(savedTableColumnsScopedState(viewToCreate.id), currentColumns); const selectedFilters = await snapshot.getPromise( filtersScopedState(tableScopeId), diff --git a/front/src/modules/ui/table/table-header/components/TableHeader.tsx b/front/src/modules/ui/table/table-header/components/TableHeader.tsx index 5e2e7a78a8..f915a8b44f 100644 --- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx +++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx @@ -1,4 +1,5 @@ import { useCallback } from 'react'; +import { useRecoilValue } from 'recoil'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton'; @@ -9,13 +10,19 @@ import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope' import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface'; import { TopBar } from '@/ui/top-bar/TopBar'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown'; import { TableUpdateViewButtonGroup } from '../../options/components/TableUpdateViewButtonGroup'; import { TableViewsDropdownButton } from '../../options/components/TableViewsDropdownButton'; import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext'; -import type { TableView } from '../../states/tableViewsState'; +import { canPersistTableColumnsScopedSelector } from '../../states/selectors/canPersistTableColumnsScopedSelector'; +import { + currentTableViewIdState, + type TableView, +} from '../../states/tableViewsState'; import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope'; @@ -34,10 +41,19 @@ export function TableHeader({ onViewSubmit, onImport, }: OwnProps) { + const tableScopeId = useContextScopeId(TableRecoilScopeContext); + + const currentTableViewId = useRecoilScopedValue( + currentTableViewIdState, + TableRecoilScopeContext, + ); const [sorts, setSorts] = useRecoilScopedState[]>( sortsScopedState, TableRecoilScopeContext, ); + const canPersistTableColumns = useRecoilValue( + canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]), + ); const sortSelect = useCallback( (newSort: SelectedSortType) => { @@ -90,6 +106,7 @@ export function TableHeader({ } bottomComponent={