From 3d512adadee9a3735dba5ec0ab0a188431cd7b07 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Thu, 7 Nov 2024 20:47:14 +0800 Subject: [PATCH] feat(Table): add 'Hide column' configuration option (#5597) * chore(deps): bump antd from 5.12.8 to 5.13.3 * chore: update yarn.lock * chore: fix unit tests * chore: make e2e tests pass * feat(Table): add 'Hide column' configuration option * test: add e2e test * chore: fix build * Revert "chore: make e2e tests pass" This reverts commit a84a22c140c393c055136f90140ff74c657d8b28. * Revert "chore: fix unit tests" This reverts commit 436b001c9b3cf75ee2ddcc00915199b12e1d37d4. * Revert "chore: update yarn.lock" This reverts commit 0b960251c414a66d8a0a1274bd1cd3330093ccc0. * Revert "chore(deps): bump antd from 5.12.8 to 5.13.3" This reverts commit b165d557f68e3cb7dab4172e8f22f631decea277. * chore: make e2e more stable --- packages/core/client/src/locale/en-US.json | 4 +- packages/core/client/src/locale/es-ES.json | 4 +- packages/core/client/src/locale/fr-FR.json | 4 +- packages/core/client/src/locale/ja-JP.json | 4 +- packages/core/client/src/locale/ko-KR.json | 4 +- packages/core/client/src/locale/pt-BR.json | 4 +- packages/core/client/src/locale/ru-RU.json | 4 +- packages/core/client/src/locale/tr-TR.json | 4 +- packages/core/client/src/locale/uk-UA.json | 4 +- packages/core/client/src/locale/zh-CN.json | 4 +- packages/core/client/src/locale/zh-TW.json | 4 +- .../table/__e2e__/hideColumn.test.ts | 42 ++ .../table/__e2e__/templatesOfBug.ts | 441 ++++++++++++++++++ .../data-blocks/table/tableColumnSettings.tsx | 43 ++ .../menu/__e2e__/schemaInitializer.test.ts | 2 +- .../schema-component/antd/table-v2/Table.tsx | 54 ++- .../src/schema-settings/SchemaSettings.tsx | 8 +- 17 files changed, 613 insertions(+), 21 deletions(-) create mode 100644 packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/hideColumn.test.ts diff --git a/packages/core/client/src/locale/en-US.json b/packages/core/client/src/locale/en-US.json index e7b5995120..83f0759ff9 100644 --- a/packages/core/client/src/locale/en-US.json +++ b/packages/core/client/src/locale/en-US.json @@ -847,5 +847,7 @@ "Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data": "Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data", "Enable secondary confirmation": "Enable secondary confirmation", "Notification": "Notification", - "Ellipsis overflow content": "Ellipsis overflow content" + "Ellipsis overflow content": "Ellipsis overflow content", + "Hide column": "Hide column", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect." } diff --git a/packages/core/client/src/locale/es-ES.json b/packages/core/client/src/locale/es-ES.json index 614c6f2c12..d8488c2d29 100644 --- a/packages/core/client/src/locale/es-ES.json +++ b/packages/core/client/src/locale/es-ES.json @@ -768,5 +768,7 @@ "Sorry, the page you visited does not exist.": "Lo siento, la página que visitaste no existe.", "Allow multiple selection": "Permitir selección múltiple", "Parent object": "Objeto padre", - "Ellipsis overflow content": "Contenido de desbordamiento de elipsis" + "Ellipsis overflow content": "Contenido de desbordamiento de elipsis", + "Hide column": "Ocultar columna", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "En modo de configuración, toda la columna se vuelve transparente. En modo de no configuración, toda la columna se ocultará. Incluso si toda la columna está oculta, sus valores predeterminados configurados y otras configuraciones seguirán tomando efecto." } diff --git a/packages/core/client/src/locale/fr-FR.json b/packages/core/client/src/locale/fr-FR.json index 781ca69efc..60320c9598 100644 --- a/packages/core/client/src/locale/fr-FR.json +++ b/packages/core/client/src/locale/fr-FR.json @@ -788,5 +788,7 @@ "Sorry, the page you visited does not exist.": "Désolé, la page que vous avez visitée n'existe pas.", "Allow multiple selection": "Permettre la sélection multiple", "Parent object": "Objet parent", - "Ellipsis overflow content": "Contenu de débordement avec ellipse" + "Ellipsis overflow content": "Contenu de débordement avec ellipse", + "Hide column": "Masquer la colonne", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "En mode de configuration, toute la colonne devient transparente. En mode de non-configuration, toute la colonne sera masquée. Même si toute la colonne est masquée, ses valeurs par défaut configurées et les autres paramètres resteront toujours en vigueur." } diff --git a/packages/core/client/src/locale/ja-JP.json b/packages/core/client/src/locale/ja-JP.json index 08a6df9a88..b311b11e34 100644 --- a/packages/core/client/src/locale/ja-JP.json +++ b/packages/core/client/src/locale/ja-JP.json @@ -1006,5 +1006,7 @@ "Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data": "ページング時にテーブルレコードの総数取得をスキップして、読み込み速度を向上させます。データ量が多い場合にこのオプションの使用をお勧めします。", "The current user only has the UI configuration permission, but don't have view permission for collection \"{{name}}\"": "現在のユーザーにはUI設定の権限しかなく、コレクション「{{name}}」を閲覧する権限はありません。", "Allow multiple selection": "複数選択を許可", - "Parent object": "親オブジェクト" + "Parent object": "親オブジェクト", + "Hide column": "列を非表示", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "設定モードでは、列全体が透明になります。非設定モードでは、列全体が非表示になります。列全体が非表示になっても、設定されたデフォルト値やその他の設定は依然として有効です。" } diff --git a/packages/core/client/src/locale/ko-KR.json b/packages/core/client/src/locale/ko-KR.json index cf8fa45a7d..f3fcf24d73 100644 --- a/packages/core/client/src/locale/ko-KR.json +++ b/packages/core/client/src/locale/ko-KR.json @@ -879,5 +879,7 @@ "Sorry, the page you visited does not exist.": "죄송합니다. 방문한 페이지가 존재하지 않습니다.", "Allow multiple selection": "다중 선택 허용", "Parent object": "부모 객체", -"Ellipsis overflow content": "생략 부호로 내용 줄임" + "Ellipsis overflow content": "생략 부호로 내용 줄임", + "Hide column": "열 숨기기", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "구성 모드에서는 전체 열이 투명해집니다. 비구성 모드에서는 전체 열이 숨겨집니다. 전체 열이 숨겨져도 구성된 기본값 및 기타 설정은 여전히 적용됩니다." } diff --git a/packages/core/client/src/locale/pt-BR.json b/packages/core/client/src/locale/pt-BR.json index 3353373ff4..ba1bd69b45 100644 --- a/packages/core/client/src/locale/pt-BR.json +++ b/packages/core/client/src/locale/pt-BR.json @@ -745,5 +745,7 @@ "Sorry, the page you visited does not exist.": "Desculpe, a página que você visitou não existe.", "Allow multiple selection": "Permitir seleção múltipla", "Parent object": "Objeto pai", - "Ellipsis overflow content": "Conteúdo de transbordamento com reticências" + "Ellipsis overflow content": "Conteúdo de transbordamento com reticências", + "Hide column": "Ocultar coluna", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "Em modo de configuração, a coluna inteira se torna transparente. Em modo de não configuração, a coluna inteira será ocultada. Mesmo se a coluna inteira estiver oculta, seus valores padrão configurados e outras configurações ainda terão efeito." } diff --git a/packages/core/client/src/locale/ru-RU.json b/packages/core/client/src/locale/ru-RU.json index 6b0c2cd7c5..82138f9c5b 100644 --- a/packages/core/client/src/locale/ru-RU.json +++ b/packages/core/client/src/locale/ru-RU.json @@ -582,5 +582,7 @@ "Sorry, the page you visited does not exist.": "Извините, посещенной вами страницы не существует.", "Allow multiple selection": "Разрешить множественный выбор", "Parent object": "Родительский объект", - "Ellipsis overflow content": "Содержимое с многоточием при переполнении" + "Ellipsis overflow content": "Содержимое с многоточием при переполнении", + "Hide column": "Скрыть столбец", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "В режиме конфигурации вся колонка становится прозрачной. В режиме не конфигурации вся колонка будет скрыта. Даже если вся колонка будет скрыта, её настроенные значения по умолчанию и другие настройки все равно будут действовать." } diff --git a/packages/core/client/src/locale/tr-TR.json b/packages/core/client/src/locale/tr-TR.json index 83f6f2f9d0..b6bcc27250 100644 --- a/packages/core/client/src/locale/tr-TR.json +++ b/packages/core/client/src/locale/tr-TR.json @@ -580,5 +580,7 @@ "Sorry, the page you visited does not exist.": "Üzgünüz, ziyaret ettiğiniz sayfa mevcut değil.", "Allow multiple selection": "Çoklu seçim izni", "Parent object": "Üst nesne", - "Ellipsis overflow content": "Üç nokta ile taşan içerik" + "Ellipsis overflow content": "Üç nokta ile taşan içerik", + "Hide column": "Sütunu gizle", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "Yapılandırma modunda, tüm sütun tamamen saydamlık alır. Yapılandırma modu olmayan durumda, tüm sütun gizlenir. Tamamen sütun gizlendiğinde bile, yapılandırılmış varsayılan değerleri ve diğer ayarları hâlâ etkin olur." } diff --git a/packages/core/client/src/locale/uk-UA.json b/packages/core/client/src/locale/uk-UA.json index 3fa1500a9d..c53f9816e7 100644 --- a/packages/core/client/src/locale/uk-UA.json +++ b/packages/core/client/src/locale/uk-UA.json @@ -788,5 +788,7 @@ "Sorry, the page you visited does not exist.": "Вибачте, сторінка, яку ви відвідали, не існує.", "Allow multiple selection": "Дозволити множинний вибір", "Parent object": "Батьківський об'єкт", - "Ellipsis overflow content": "Вміст з багатокрапкою при переповненні" + "Ellipsis overflow content": "Вміст з багатокрапкою при переповненні", + "Hide column": "Сховати стовпець", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "В режимі конфігурації вся колонка стає прозорою. В режимі не конфігурації вся колонка буде прихована. Якщо вся колонка буде прихована, її налаштовані значення за замовчуванням і інші налаштування все одно будуть діяти." } diff --git a/packages/core/client/src/locale/zh-CN.json b/packages/core/client/src/locale/zh-CN.json index b135ff986f..d6172ea7d5 100644 --- a/packages/core/client/src/locale/zh-CN.json +++ b/packages/core/client/src/locale/zh-CN.json @@ -1025,5 +1025,7 @@ "Ellipsis": "省略", "Set block layout": "设置区块布局", "Add & Update": "添加 & 更新", - "Table size":"表格大小" + "Table size":"表格大小", + "Hide column": "隐藏列", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下，整个列会变为透明色。在非配置模式下，整个列将被隐藏。即使整个列被隐藏了，其配置的默认值和其他设置仍然有效。" } diff --git a/packages/core/client/src/locale/zh-TW.json b/packages/core/client/src/locale/zh-TW.json index 391a04ec50..a48d2c408e 100644 --- a/packages/core/client/src/locale/zh-TW.json +++ b/packages/core/client/src/locale/zh-TW.json @@ -878,5 +878,7 @@ "Sorry, the page you visited does not exist.": "抱歉，你訪問的頁面不存在。", "Allow multiple selection": "允許多選", "Parent object": "上級物件", - "Ellipsis overflow content": "省略超出長度的內容" + "Ellipsis overflow content": "省略超出長度的內容", + "Hide column": "隱藏列", + "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下，整個列會變為透明色。在非配置模式下，整個列將被隱藏。即使整個列被隱藏了，其配置的默認值和其他設置仍然有效。" } diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/hideColumn.test.ts b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/hideColumn.test.ts new file mode 100644 index 0000000000..4d5a3190f1 --- /dev/null +++ b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/hideColumn.test.ts @@ -0,0 +1,42 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import { expect, test } from '@nocobase/test/e2e'; +import { hideColumnBasic } from './templatesOfBug'; + +test.describe('hide column', () => { + test('basic', async ({ page, mockPage }) => { + await mockPage(hideColumnBasic).goto(); + + // 1. Normal table: hide column + await page.getByRole('button', { name: 'Nickname' }).hover(); + await page + .getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-users' }) + .hover(); + await page.getByRole('menuitem', { name: 'Hide column question-circle' }).click(); + await page.mouse.move(500, 0); + + // 2. Sub table: hide column + await page.getByRole('button', { name: 'Role name' }).hover(); + await page + .getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-roles' }) + .hover(); + await page.getByRole('menuitem', { name: 'Hide column question-circle' }).click(); + await page.mouse.move(500, 0); + + // Assert: In configuration mode, the entire column becomes transparent + await expect(page.locator('th', { hasText: 'Nickname' })).toHaveCSS('opacity', '0.3'); + await expect(page.locator('th', { hasText: 'Role name' })).toHaveCSS('opacity', '0.3'); + + // Assert: In non-configuration mode, the entire column will be hidden + await page.getByTestId('ui-editor-button').click(); + await expect(page.locator('th', { hasText: 'Nickname' })).not.toBeVisible(); + await expect(page.locator('th', { hasText: 'Role name' })).not.toBeVisible(); + }); +}); diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/templatesOfBug.ts b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/templatesOfBug.ts index 72ba397b28..ff12ba7efd 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/templatesOfBug.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/templatesOfBug.ts @@ -7926,3 +7926,444 @@ export const differentURL_DifferentPopupContent = { 'x-index': 1, }, }; +export const hideColumnBasic = { + pageSchema: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Page', + 'x-app-version': '1.4.0-alpha.1', + properties: { + bfc254m95nt: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'page:addBlock', + 'x-app-version': '1.4.0-alpha.1', + properties: { + '4e61hstsu6e': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.4.0-alpha.1', + properties: { + j9xovyw5nce: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.4.0-alpha.1', + properties: { + '9ivpaiunf9y': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-acl-action': 'users:list', + 'x-use-decorator-props': 'useTableBlockDecoratorProps', + 'x-decorator-props': { + collection: 'users', + dataSource: 'main', + action: 'list', + params: { + pageSize: 20, + }, + rowKey: 'id', + showIndex: true, + dragSort: false, + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:table', + 'x-component': 'CardItem', + 'x-filter-targets': [], + 'x-app-version': '1.4.0-alpha.1', + properties: { + actions: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'table:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 'var(--nb-spacing)', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': '51wc0e6u31j', + 'x-async': false, + 'x-index': 1, + }, + bs7p8uu830m: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'array', + 'x-initializer': 'table:configureColumns', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + properties: { + actions: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("Actions") }}', + 'x-action-column': 'actions', + 'x-decorator': 'TableV2.Column.ActionBar', + 'x-component': 'TableV2.Column', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-initializer': 'table:configureItemActions', + 'x-settings': 'fieldSettings:TableColumn', + 'x-toolbar-props': { + initializer: 'table:configureItemActions', + }, + 'x-app-version': '1.4.0-alpha.1', + properties: { + jw80rplhox4: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'DndContext', + 'x-component': 'Space', + 'x-component-props': { + split: '|', + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': 'u06c9tleqou', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '9s1pfakz0om', + 'x-async': false, + 'x-index': 1, + }, + aph2w5uiev9: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-settings': 'fieldSettings:TableColumn', + 'x-component': 'TableV2.Column', + 'x-app-version': '1.4.0-alpha.1', + properties: { + nickname: { + _isJSONSchemaObject: true, + version: '2.0', + 'x-collection-field': 'users.nickname', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, + }, + 'x-read-pretty': true, + 'x-decorator': null, + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': '3w3zou3ceb3', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '4m9sepacwvm', + 'x-async': false, + 'x-index': 2, + }, + wpmysa656gq: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-settings': 'fieldSettings:TableColumn', + 'x-component': 'TableV2.Column', + 'x-app-version': '1.4.0-alpha.1', + properties: { + username: { + _isJSONSchemaObject: true, + version: '2.0', + 'x-collection-field': 'users.username', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, + }, + 'x-read-pretty': true, + 'x-decorator': null, + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': '38dn4mm3hr5', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '9ed6nyhlgzi', + 'x-async': false, + 'x-index': 3, + }, + }, + 'x-uid': 'sc4a347zrvr', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'z8gp6wsukkv', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '60rzu0t7mm9', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'po4tzdbip1j', + 'x-async': false, + 'x-index': 1, + }, + h9rg0fz8izl: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.4.0-alpha.1', + properties: { + acu1j5bgeeh: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.4.0-alpha.1', + properties: { + azoaet9funq: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-acl-action-props': { + skipScopeCheck: true, + }, + 'x-acl-action': 'users:create', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', + 'x-decorator-props': { + dataSource: 'main', + collection: 'users', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:createForm', + 'x-component': 'CardItem', + 'x-app-version': '1.4.0-alpha.1', + properties: { + pfltqojjolr: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useCreateFormBlockProps', + 'x-app-version': '1.4.0-alpha.1', + properties: { + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'form:configureFields', + 'x-app-version': '1.4.0-alpha.1', + properties: { + y4g2q6tyb0a: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.4.0-alpha.1', + properties: { + thgbnha840e: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.4.0-alpha.1', + properties: { + roles: { + 'x-uid': 'ivyzmc9lc21', + _isJSONSchemaObject: true, + version: '2.0', + type: 'string', + 'x-toolbar': 'FormItemSchemaToolbar', + 'x-settings': 'fieldSettings:FormItem', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-collection-field': 'users.roles', + 'x-component-props': { + fieldNames: { + label: 'name', + value: 'name', + }, + mode: 'SubTable', + }, + 'x-app-version': '1.4.0-alpha.1', + default: null, + properties: { + eoizayhit92: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'AssociationField.SubTable', + 'x-initializer': 'table:configureColumns', + 'x-initializer-props': { + action: false, + }, + 'x-index': 1, + 'x-app-version': '1.4.0-alpha.1', + properties: { + nhe3d7uuyur: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-settings': 'fieldSettings:TableColumn', + 'x-component': 'TableV2.Column', + 'x-app-version': '1.4.0-alpha.1', + properties: { + name: { + _isJSONSchemaObject: true, + version: '2.0', + 'x-collection-field': 'roles.name', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, + }, + 'x-decorator': 'FormItem', + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': 'e89fxf1mg7i', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'kxbrpz5jmc7', + 'x-async': false, + 'x-index': 1, + }, + jgnjc800er5: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-settings': 'fieldSettings:TableColumn', + 'x-component': 'TableV2.Column', + 'x-app-version': '1.4.0-alpha.1', + properties: { + title: { + _isJSONSchemaObject: true, + version: '2.0', + 'x-collection-field': 'roles.title', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, + }, + 'x-decorator': 'FormItem', + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': 'bankqu2es91', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'uwyyk7ix2lb', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'ff16rxs8lbo', + 'x-async': false, + }, + }, + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '4nagabglobc', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'noqp2jcfp2j', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'a330n90aoyf', + 'x-async': false, + 'x-index': 1, + }, + vpwq72gj933: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'createForm:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + layout: 'one-column', + }, + 'x-app-version': '1.4.0-alpha.1', + 'x-uid': '1nauytag1dh', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': '342ktwn88zo', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '84tmhiuph4u', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'j70955c17aq', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'vtz6tq8n0mx', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': '1f4xbt4prbg', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ifb5nqtgnng', + 'x-async': true, + 'x-index': 1, + }, +}; diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx index 6e08363070..b5cdca020c 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx +++ b/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx @@ -7,8 +7,10 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ +import { QuestionCircleOutlined } from '@ant-design/icons'; import { ISchema } from '@formily/json-schema'; import { useField, useFieldSchema } from '@formily/react'; +import { Tooltip } from 'antd'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { useApp, useSchemaToolbar } from '../../../../application'; @@ -380,6 +382,47 @@ export const tableColumnSettings = new SchemaSettings({ }; }, }, + { + name: 'hidden', + type: 'switch', + useComponentProps() { + const field: any = useField(); + const { t } = useTranslation(); + const columnSchema = useFieldSchema(); + const { dn } = useDesignable(); + + return { + title: ( + + {t('Hide column')} + + + + + ), + checked: field.componentProps.columnHidden, + onChange: (v) => { + const schema: ISchema = { + ['x-uid']: columnSchema['x-uid'], + }; + columnSchema['x-component-props'] = { + ...columnSchema['x-component-props'], + columnHidden: v, + }; + schema['x-component-props'] = columnSchema['x-component-props']; + field.componentProps.columnHidden = v; + dn.emit('patch', { + schema, + }); + dn.refresh(); + }, + }; + }, + }, fieldComponentSettingsItem, ], }, diff --git a/packages/core/client/src/modules/menu/__e2e__/schemaInitializer.test.ts b/packages/core/client/src/modules/menu/__e2e__/schemaInitializer.test.ts index 8da21efcf6..ceb401c7ae 100644 --- a/packages/core/client/src/modules/menu/__e2e__/schemaInitializer.test.ts +++ b/packages/core/client/src/modules/menu/__e2e__/schemaInitializer.test.ts @@ -102,7 +102,7 @@ test.describe('add menu item', () => { // open link page await page.getByLabel(pageLink).click(); - await page.waitForTimeout(1000); + await page.waitForTimeout(2000); // After clicking, it will redirect to another page, so we need to get the instance of the new page const newPage = page.context().pages()[1]; diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index db7b12b8cc..c96b8dc507 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -121,13 +121,15 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }, paginat } }, []); const dataIndex = collectionFields?.length > 0 ? collectionFields[0].name : s.name; + const columnHidden = !!s['x-component-props']?.['columnHidden']; return { title: , dataIndex, key: s.name, sorter: s['x-component-props']?.['sorter'], - width: 200, + columnHidden, ...s['x-component-props'], + width: columnHidden && !designable ? 0 : s['x-component-props']?.width || 200, render: (v, record) => { // 这行代码会导致这里的测试不通过：packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts:189 // if (collectionFields?.length === 1 && collectionFields[0]['x-read-pretty'] && v == undefined) return null; @@ -149,14 +151,25 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }, paginat ); }, onCell: (record, rowIndex) => { - return { record, schema: s, rowIndex, isSubTable: props.isSubTable }; + return { + record, + schema: s, + rowIndex, + isSubTable: props.isSubTable, + columnHidden, + }; + }, + onHeaderCell: () => { + return { + columnHidden, + }; }, } as TableColumnProps; }), // 这里不能把 columnsSchema 作为依赖，因为其每次都会变化，这里使用 hasChangedColumns 作为依赖 // eslint-disable-next-line react-hooks/exhaustive-deps - [hasChangedColumns, field.value, field.address, collection, parentRecordData, schemaToolbarBigger], + [hasChangedColumns, field.value, field.address, collection, parentRecordData, schemaToolbarBigger, designable], ); const tableColumns = useMemo(() => { @@ -440,7 +453,25 @@ const HeaderWrapperComponent = (props) => { ); }; +// Style when Hidden is enabled in table column configuration +const columnHiddenStyle = { + borderRight: 'none', + paddingLeft: 0, + paddingRight: 0, +}; + +// Style when Hidden is enabled in configuration mode +const columnOpacityStyle = { + opacity: 0.3, +}; + const HeaderCellComponent = (props) => { + const { designable } = useDesignable(); + + if (props.columnHidden) { + return {designable ? props.children : null}; + } + return ; }; @@ -453,7 +484,7 @@ const BodyRowComponent = (props: { return ; }; -const BodyCellComponent = (props) => { +const InternalBodyCellComponent = (props) => { const { token } = useToken(); const inView = useContext(InViewContext); const isIndex = props.className?.includes('selection-column'); @@ -474,6 +505,21 @@ const BodyCellComponent = (props) => { ); }; +const displayNone = { display: 'none' }; +const BodyCellComponent = (props) => { + const { designable } = useDesignable(); + + if (props.columnHidden) { + return ( + + {designable ? props.children : {props.children}} + + ); + } + + return ; +}; + interface TableProps { /** @deprecated */ useProps?: () => any; diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx index 7a74e28999..aa6d723fda 100644 --- a/packages/core/client/src/schema-settings/SchemaSettings.tsx +++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx @@ -363,7 +363,7 @@ export const SchemaSettingsFormItemTemplate = function FormItemTemplate(props) { }; export interface SchemaSettingsItemProps extends Omit { - title: string; + title: string | ReactNode; } export const SchemaSettingsItem: FC = (props) => { const { pushMenuItem } = useCollectMenuItems(); @@ -544,7 +544,7 @@ export const SchemaSettingsCascaderItem: FC = ( }; export interface SchemaSettingsSwitchItemProps extends Omit { - title: string; + title: string | ReactNode; checked?: boolean; onChange?: (v: boolean) => void; } @@ -598,9 +598,7 @@ export const SchemaSettingsPopupItem: FC = (props) => ); }; -export interface SchemaSettingsActionModalItemProps - extends SchemaSettingsModalItemProps, - Omit { +export interface SchemaSettingsActionModalItemProps extends SchemaSettingsModalItemProps { uid?: string; initialSchema?: ISchema; schema?: ISchema;