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

feat: Column title menus (#1616)

Browse Source 
* view field index to float

* gql codegen and package.json

* list implementation

* db call

* reposition logic

* lint fix

* edge case fix

* review changes

* handleColumnMove refactor

* dropdown recoil scope

* rename props

* Update server/src/database/migrations/20230727124244_add_view_fields_table/migration.sql

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Aditya Pimpalkar
2023-09-19 23:27:02 +01:00
committed by GitHub
parent fc139f89ab
commit 321488ad3c
13 changed files with 253 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
front/src/generated/graphql.tsx
View File

@ -1016,15 +1016,15 @@ export enum FileFolder {
WorkspaceLogo = 'WorkspaceLogo'
}
export type IntFilter = {
equals?: InputMaybe<Scalars['Int']>;
gt?: InputMaybe<Scalars['Int']>;
gte?: InputMaybe<Scalars['Int']>;
in?: InputMaybe<Array<Scalars['Int']>>;
lt?: InputMaybe<Scalars['Int']>;
lte?: InputMaybe<Scalars['Int']>;
not?: InputMaybe<NestedIntFilter>;
notIn?: InputMaybe<Array<Scalars['Int']>>;
export type FloatFilter = {
equals?: InputMaybe<Scalars['Float']>;
gt?: InputMaybe<Scalars['Float']>;
gte?: InputMaybe<Scalars['Float']>;
in?: InputMaybe<Array<Scalars['Float']>>;
lt?: InputMaybe<Scalars['Float']>;
lte?: InputMaybe<Scalars['Float']>;
not?: InputMaybe<NestedFloatFilter>;
notIn?: InputMaybe<Array<Scalars['Float']>>;
};
export type IntNullableFilter = {
@ -1478,15 +1478,15 @@ export type NestedEnumViewTypeFilter = {
notIn?: InputMaybe<Array<ViewType>>;
};
export type NestedIntFilter = {
equals?: InputMaybe<Scalars['Int']>;
gt?: InputMaybe<Scalars['Int']>;
gte?: InputMaybe<Scalars['Int']>;
in?: InputMaybe<Array<Scalars['Int']>>;
lt?: InputMaybe<Scalars['Int']>;
lte?: InputMaybe<Scalars['Int']>;
not?: InputMaybe<NestedIntFilter>;
notIn?: InputMaybe<Array<Scalars['Int']>>;
export type NestedFloatFilter = {
equals?: InputMaybe<Scalars['Float']>;
gt?: InputMaybe<Scalars['Float']>;
gte?: InputMaybe<Scalars['Float']>;
in?: InputMaybe<Array<Scalars['Float']>>;
lt?: InputMaybe<Scalars['Float']>;
lte?: InputMaybe<Scalars['Float']>;
not?: InputMaybe<NestedFloatFilter>;
notIn?: InputMaybe<Array<Scalars['Float']>>;
};
export type NestedIntNullableFilter = {
@ -2587,7 +2587,7 @@ export type ViewCreateNestedOneWithoutFieldsInput = {
export type ViewField = {
__typename?: 'ViewField';
index: Scalars['Int'];
index: Scalars['Float'];
isVisible: Scalars['Boolean'];
key: Scalars['String'];
name: Scalars['String'];
@ -2598,7 +2598,7 @@ export type ViewField = {
};
export type ViewFieldCreateInput = {
index: Scalars['Int'];
index: Scalars['Float'];
isVisible: Scalars['Boolean'];
key: Scalars['String'];
name: Scalars['String'];
@ -2608,7 +2608,7 @@ export type ViewFieldCreateInput = {
};
export type ViewFieldCreateManyInput = {
index: Scalars['Int'];
index: Scalars['Float'];
isVisible: Scalars['Boolean'];
key: Scalars['String'];
name: Scalars['String'];
@ -2654,7 +2654,7 @@ export enum ViewFieldScalarFieldEnum {
}
export type ViewFieldUpdateInput = {
index?: InputMaybe<Scalars['Int']>;
index?: InputMaybe<Scalars['Float']>;
isVisible?: InputMaybe<Scalars['Boolean']>;
key?: InputMaybe<Scalars['String']>;
name?: InputMaybe<Scalars['String']>;
@ -2684,7 +2684,7 @@ export type ViewFieldWhereInput = {
AND?: InputMaybe<Array<ViewFieldWhereInput>>;
NOT?: InputMaybe<Array<ViewFieldWhereInput>>;
OR?: InputMaybe<Array<ViewFieldWhereInput>>;
index?: InputMaybe<IntFilter>;
index?: InputMaybe<FloatFilter>;
isVisible?: InputMaybe<BoolFilter>;
key?: InputMaybe<StringFilter>;
name?: InputMaybe<StringFilter>;

6
front/src/modules/ui/dropdown/components/DropdownButton.tsx
View File

@ -12,7 +12,7 @@ import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScop
import { DropdownCloseEffect } from './DropdownCloseEffect';
type OwnProps = {
buttonComponents: JSX.Element | JSX.Element[];
buttonComponents?: JSX.Element | JSX.Element[];
dropdownComponents: JSX.Element | JSX.Element[];
dropdownId: string;
hotkey?: {
@ -75,7 +75,9 @@ export const DropdownButton = ({
onHotkeyTriggered={handleHotkeyTriggered}
/>
)}
<div ref={refs.setReference}>{buttonComponents}</div>
{buttonComponents && (
<div ref={refs.setReference}>{buttonComponents}</div>
)}
{isDropdownButtonOpen && (
<div ref={refs.setFloating} style={floatingStyles}>
{dropdownComponents}

4
front/src/modules/ui/icon/index.ts
View File

@ -5,6 +5,10 @@ export {
IconAlertTriangle,
IconArchive,
IconArrowBack,
IconArrowNarrowDown,
IconArrowNarrowLeft,
IconArrowNarrowRight,
IconArrowNarrowUp,
IconArrowDown,
IconArrowRight,
IconArrowUp,

43
front/src/modules/ui/table/components/ColumnHead.tsx
View File

@ -1,11 +1,18 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
import { ColumnHeaderDropdownId } from '../constants/ColumnHeaderDropdownId';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
type OwnProps = {
viewName: string;
ViewIcon?: IconComponent;
column: ColumnDefinition<ViewFieldMetadata>;
isFirstColumn: boolean;
isLastColumn: boolean;
};
const StyledTitle = styled.div`
@ -34,14 +41,30 @@ const StyledText = styled.span`
white-space: nowrap;
`;
export const ColumnHead = ({ viewName, ViewIcon }: OwnProps) => {
export const ColumnHead = ({
column,
isFirstColumn,
isLastColumn,
}: OwnProps) => {
const theme = useTheme();
const { openDropdownButton } = useDropdownButton({
dropdownId: ColumnHeaderDropdownId,
});
return (
<StyledTitle>
<StyledIcon>
{ViewIcon && <ViewIcon size={theme.icon.size.md} />}
</StyledIcon>
<StyledText>{viewName}</StyledText>
</StyledTitle>
<>
<StyledTitle onClick={openDropdownButton}>
<StyledIcon>
{column.Icon && <column.Icon size={theme.icon.size.md} />}
</StyledIcon>
<StyledText>{column.name}</StyledText>
</StyledTitle>
<EntityTableHeaderOptions
column={column}
isFirstColumn={isFirstColumn}
isLastColumn={isLastColumn}
/>
</>
);
};

46
front/src/modules/ui/table/components/EntityTableHeader.tsx
View File

@ -3,8 +3,10 @@ import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { IconButton } from '@/ui/button/components/IconButton';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { IconPlus } from '@/ui/icon';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@ -163,25 +165,31 @@ export const EntityTableHeader = () => {
<SelectAllCheckbox />
</th>
{visibleTableColumns.map((column) => (
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<ColumnHead viewName={column.name} ViewIcon={column.Icon} />
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
/>
</StyledColumnHeaderCell>
{visibleTableColumns.map((column, index) => (
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<ColumnHead
column={column}
isFirstColumn={index === 0}
isLastColumn={index === visibleTableColumns.length - 1}
/>
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
/>
</StyledColumnHeaderCell>
</RecoilScope>
))}
<th>
{hiddenTableColumns.length > 0 && (

96
front/src/modules/ui/table/components/EntityTableHeaderOptions.tsx Normal file
View File

@ -0,0 +1,96 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
import {
IconArrowNarrowLeft,
IconArrowNarrowRight,
IconEyeOff,
} from '@/ui/icon';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { ColumnHeaderDropdownId } from '../constants/ColumnHeaderDropdownId';
import { useTableColumns } from '../hooks/useTableColumns';
import { ColumnDefinition } from '../types/ColumnDefinition';
const StyledDropdownContainer = styled.div`
left: 0px;
position: absolute;
top: 32px;
z-index: 1;
`;
type EntityTableHeaderOptionsProps = {
column: ColumnDefinition<ViewFieldMetadata>;
isFirstColumn: boolean;
isLastColumn: boolean;
};
export const EntityTableHeaderOptions = ({
column,
isFirstColumn,
isLastColumn,
}: EntityTableHeaderOptionsProps) => {
const theme = useTheme();
const {
handleColumnVisibilityChange,
handleColumnLeftMove,
handleColumnRightMove,
} = useTableColumns();
const { closeDropdownButton } = useDropdownButton({
dropdownId: ColumnHeaderDropdownId,
});
const handleColumnMoveLeft = () => {
closeDropdownButton();
if (isFirstColumn) return;
else handleColumnLeftMove(column);
};
const handleColumnMoveRight = () => {
closeDropdownButton();
if (isLastColumn) return;
else handleColumnRightMove(column);
};
const handleColumnVisibility = () => {
handleColumnVisibilityChange(column);
};
return (
<StyledDropdownContainer>
<DropdownButton
dropdownId={ColumnHeaderDropdownId}
dropdownComponents={
<StyledDropdownMenu>
<StyledDropdownMenuItemsContainer>
<MenuItem
LeftIcon={() => (
<IconArrowNarrowLeft size={theme.icon.size.md} />
)}
onClick={handleColumnMoveLeft}
text="Move left"
/>
<MenuItem
LeftIcon={() => (
<IconArrowNarrowRight size={theme.icon.size.md} />
)}
onClick={handleColumnMoveRight}
text="Move right"
/>
<MenuItem
LeftIcon={() => <IconEyeOff size={theme.icon.size.md} />}
onClick={handleColumnVisibility}
text="Hide"
/>
</StyledDropdownMenuItemsContainer>
</StyledDropdownMenu>
}
/>
</StyledDropdownContainer>
);
};

1
front/src/modules/ui/table/constants/ColumnHeaderDropdownId.ts Normal file
View File

@ -0,0 +1 @@
export const ColumnHeaderDropdownId = 'table-header-options';

50
front/src/modules/ui/table/hooks/useTableColumns.ts
View File

@ -36,5 +36,53 @@ export const useTableColumns = () => {
[tableColumnsByKey, tableColumns, setTableColumns],
);
return { handleColumnVisibilityChange };
const handleColumnMove = useCallback(
(direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
const tableColumnIndex = tableColumns.findIndex(
(tableColumn) => tableColumn.key === column.key,
);
if (tableColumnIndex >= 0) {
const currentColumn = tableColumns[tableColumnIndex];
const targetColumn =
direction === 'left'
? tableColumns[tableColumnIndex - 1]
: tableColumns[tableColumnIndex + 1];
const updatedColumns = tableColumns
.map((tableColumn) => {
switch (tableColumn.key) {
case targetColumn.key:
return { ...tableColumn, index: currentColumn.index };
case currentColumn.key:
return { ...tableColumn, index: targetColumn.index };
default:
return tableColumn;
}
})
.sort((columnA, columnB) => columnA.index - columnB.index);
setTableColumns(updatedColumns);
}
},
[tableColumns, setTableColumns],
);
const handleColumnLeftMove = useCallback(
(column: ColumnDefinition<ViewFieldMetadata>) => {
handleColumnMove('left', column);
},
[handleColumnMove],
);
const handleColumnRightMove = useCallback(
(column: ColumnDefinition<ViewFieldMetadata>) => {
handleColumnMove('right', column);
},
[handleColumnMove],
);
return {
handleColumnVisibilityChange,
handleColumnLeftMove,
handleColumnRightMove,
};
};

3
front/src/modules/views/hooks/useTableViewFields.ts
View File

@ -94,6 +94,7 @@ export const useTableViewFields = ({
data: {
isVisible: column.isVisible,
size: column.size,
index: column.index,
},
where: {
viewId_key: { key: column.key, viewId: currentViewId },
@ -177,5 +178,5 @@ export const useTableViewFields = ({
updateViewFields,
]);
return { createViewFields, persistColumns };
return { createViewFields, persistColumns, updateViewFields };
};

13
front/src/modules/views/hooks/useTableViews.ts
View File

@ -41,12 +41,12 @@ export const useTableViews = ({
type: ViewType.Table,
RecoilScopeContext: TableRecoilScopeContext,
});
const { createViewFields, persistColumns } = useTableViewFields({
objectId,
columnDefinitions,
skipFetch: isFetchingViews,
});
const { createViewFields, persistColumns, updateViewFields } =
useTableViewFields({
objectId,
columnDefinitions,
skipFetch: isFetchingViews,
});
const { createViewFilters, persistFilters } = useViewFilters({
RecoilScopeContext: TableRecoilScopeContext,
@ -62,6 +62,7 @@ export const useTableViews = ({
await persistColumns();
await persistFilters();
await persistSorts();
await updateViewFields(tableColumns);
};
return { createView, deleteView, submitCurrentView, updateView };

1
server/package.json
View File

@ -76,6 +76,7 @@
"passport-jwt": "^4.0.1",
"passport-local": "^1.0.0",
"pg": "^8.11.3",
"prisma-graphql-type-decimal": "^3.0.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0",

2
server/src/database/schema.prisma
View File

@ -685,7 +685,7 @@ model ViewSort {
}
model ViewField {
index Int
index Float
isVisible Boolean
key String
name String

5
server/yarn.lock
View File

@ -7684,6 +7684,11 @@ pretty-format@^28.0.0, pretty-format@^28.1.3:
ansi-styles "^5.0.0"
react-is "^18.0.0"
prisma-graphql-type-decimal@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/prisma-graphql-type-decimal/-/prisma-graphql-type-decimal-3.0.0.tgz#f3fa524b9e7aeab4fa0f969829bdddf199eff9fe"
integrity sha512-jrALv8ShVZoBBNyIOBCxwRoLM/DAOSD/OBKTWeJa9UigQXUTZniNXvLd4fLXwm+3v00A7cOZ1fFh3b74Ndgxhw==
prisma-nestjs-graphql@^18.0.2:
version "18.0.2"
resolved "https://registry.yarnpkg.com/prisma-nestjs-graphql/-/prisma-nestjs-graphql-18.0.2.tgz#852b9386d2c26bad0bd82254a5cc2e483a96d5b5"