Merge pull request #1474 from merico-dev/1473-apply-field-array-tabs-on-viz-table

1473 apply field array tabs on viz table

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.25.0",
+  "version": "13.26.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.25.0",
+  "version": "13.26.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/plugins/editor-components/field-array-tabs/tab-list.tsx

@@ -24,7 +24,7 @@ const DraggableTab = ({ value, index, children }: DraggableTabProps) => {
     <Tabs.Tab
       ref={ref}
       value={value}
-      icon={<IconGripHorizontal size={14} color={hovering ? 'rgb(34, 139, 230)' : 'transparent'} />}
+      icon={<IconGripHorizontal size={14} color={hovering || index === 0 ? 'rgb(34, 139, 230)' : 'transparent'} />}
       onMouseEnter={setTrue}
       onMouseLeave={setFalse}
     >

dashboard/src/components/plugins/viz-components/table/editors/columns/column.tsx

@@ -1,28 +1,12 @@
-import { Button, Divider, Group, NumberInput, Select, Stack, Text, TextInput } from '@mantine/core';
-import { Control, Controller, UseFieldArrayRemove, UseFormWatch } from 'react-hook-form';
-import { Trash } from 'tabler-icons-react';
+import { Divider, Group, NumberInput, Stack, Text, TextInput } from '@mantine/core';
+import { Control, Controller, UseFormWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { DataFieldSelector } from '~/components/panel/settings/common/data-field-selector';
+import { HorizontalAlignSelector } from '~/components/plugins/editor-components';
 import { BackgroundColorSelect } from '../../components/background-color-select';
-import { DEFAULT_CELL_FUNC_CONTENT, IColumnConf, ITableConf, ValueType } from '../../type';
+import { DEFAULT_CELL_FUNC_CONTENT, ITableConf, ValueType } from '../../type';
 import { ValueTypeSelector } from '../../value-type-selector';
 import { FuncContentEditor } from './func_content-editor';
-import { useTranslation } from 'react-i18next';
-import { HorizontalAlignSelector } from '~/components/plugins/editor-components';
-
-const alignmentOptions = [
-  {
-    label: 'Left',
-    value: 'left',
-  },
-  {
-    label: 'Center',
-    value: 'center',
-  },
-  {
-    label: 'Right',
-    value: 'right',
-  },
-];
 
 const PostFixPX = () => (
   <Text color="dimmed" size={12}>
@@ -34,10 +18,8 @@ interface IColumnField {
   control: Control<ITableConf, $TSFixMe>;
   watch: UseFormWatch<ITableConf>;
   index: number;
-  remove: UseFieldArrayRemove;
-  column: IColumnConf;
 }
-export const ColumnField = ({ control, index, watch, remove, column }: IColumnField) => {
+export const ColumnField = ({ control, index, watch }: IColumnField) => {
   const { t } = useTranslation();
   const value_type = watch(`columns.${index}.value_type`);
   const queryID = watch('query_id');
@@ -103,11 +85,6 @@ export const ColumnField = ({ control, index, watch, remove, column }: IColumnFi
         control={control}
         render={({ field }) => <BackgroundColorSelect {...field} />}
       />
-
-      <Divider mb={4} mt={12} variant="dashed" />
-      <Button leftIcon={<Trash size={16} />} color="red" variant="light" onClick={() => remove(index)}>
-        {t('viz.table.column.delete')}
-      </Button>
     </Stack>
   );
 };

dashboard/src/components/plugins/viz-components/table/editors/columns/index.tsx

@@ -1,32 +1,33 @@
-import { Divider, Stack, Switch, Tabs, Text, Textarea } from '@mantine/core';
+import { Switch, Textarea } from '@mantine/core';
 import { randomId } from '@mantine/hooks';
-import { Control, Controller, UseFormWatch, useFieldArray } from 'react-hook-form';
-import { Plus } from 'tabler-icons-react';
+import { Control, Controller, UseFormWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FieldArrayTabs } from '~/components/plugins/editor-components';
 import { IColumnConf, ITableConf, ValueType } from '../../type';
 import { ColumnField } from './column';
-import { useTranslation } from 'react-i18next';
 
 interface IColumnsField {
   control: Control<ITableConf, $TSFixMe>;
   watch: UseFormWatch<ITableConf>;
 }
 export const ColumnsField = ({ control, watch }: IColumnsField) => {
   const { t } = useTranslation();
-  const { fields, append, remove, update } = useFieldArray({
-    control,
-    name: 'columns',
-  });
 
-  const addColumn = () => {
+  const getItem = () => {
     const id = randomId();
-    append({
+    return {
       id,
       label: id,
       align: 'center',
       value_field: '',
       value_type: ValueType.string,
       width: '',
-    } as IColumnConf);
+    } as IColumnConf;
+  };
+
+  const renderTabName = (field: IColumnConf, index: number) => {
+    const n = field.label.trim();
+    return n ? n : index + 1;
   };
 
   watch(['columns', 'ignored_column_keys']);
@@ -63,38 +64,17 @@ export const ColumnsField = ({ control, watch }: IColumnsField) => {
         />
       )}
       {!use_raw_columns && (
-        <Stack>
-          <Tabs
-            defaultValue={'0'}
-            styles={{
-              tab: {
-                paddingTop: '0px',
-                paddingBottom: '0px',
-              },
-              panel: {
-                padding: '0px',
-                paddingTop: '6px',
-              },
-            }}
-          >
-            <Tabs.List>
-              {fields.map((_item, index) => (
-                <Tabs.Tab key={_item.id} value={index.toString()}>
-                  {index + 1}
-                  {/* {field.name.trim() ? field.name : index + 1} */}
-                </Tabs.Tab>
-              ))}
-              <Tabs.Tab onClick={addColumn} value="add">
-                <Plus size={18} color="#228be6" />
-              </Tabs.Tab>
-            </Tabs.List>
-            {fields.map((column, index) => (
-              <Tabs.Panel key={column.id} value={index.toString()}>
-                <ColumnField control={control} watch={watch} index={index} column={column} remove={remove} />
-              </Tabs.Panel>
-            ))}
-          </Tabs>
-        </Stack>
+        <FieldArrayTabs<ITableConf, IColumnConf>
+          control={control}
+          watch={watch}
+          name="columns"
+          getItem={getItem}
+          addButtonText={t('viz.table.column.add')}
+          deleteButtonText={t('viz.table.column.delete')}
+          renderTabName={renderTabName}
+        >
+          {({ field, index }) => <ColumnField control={control} watch={watch} index={index} />}
+        </FieldArrayTabs>
       )}
     </>
   );

dashboard/src/components/plugins/viz-components/table/translation.ts

@@ -5,6 +5,7 @@ const en = {
     viz_name: 'Table',
     column: {
       labels: 'Columns',
+      add: 'Add a column',
       delete: 'Delete this column',
       query_id: 'Query',
       query_id_hint: 'Load table data from this query',
@@ -50,6 +51,7 @@ const zh = {
     viz_name: '表格',
     column: {
       labels: '列设置',
+      add: '加一列',
       delete: '删除这个列',
       query_id: '表格数据来源',
       query_id_hint: '通过所选的查询获取表格数据',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.25.0",
+  "version": "13.26.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.25.0",
+  "version": "13.26.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.25.0",
+  "version": "13.26.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"