feat: added indexes in database page

crawlab-team · Sep 4, 2024 · 6c37d8b · 6c37d8b
1 parent 1769b61
commit 6c37d8b
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 55 deletions.
diff --git a/src/components/core/database/DatabaseDatabaseDetail.vue b/src/components/core/database/DatabaseDatabaseDetail.vue
@@ -70,7 +70,12 @@ defineOptions({ name: 'ClDatabaseDatabaseDetail' });
 
 <template>
   <div class="database-database-detail">
-    <cl-table :columns="tablesColumns" :data="tablesData" hide-footer />
+    <cl-table
+      :columns="tablesColumns"
+      :data="tablesData"
+      embedded
+      hide-footer
+    />
   </div>
 </template>
 

diff --git a/src/components/core/database/DatabaseTableDetail.vue b/src/components/core/database/DatabaseTableDetail.vue
@@ -270,6 +270,7 @@ defineOptions({ name: 'ClDatabaseTableDetail' });
           :page="dataTablePagination.page"
           :page-size="dataTablePagination.size"
           :total="dataTableTotal"
+          embedded
           @pagination-change="onDataTablePaginationChange"
         />
       </template>

diff --git a/src/components/core/database/tables/DatabaseTableDetailColumns.vue b/src/components/core/database/tables/DatabaseTableDetailColumns.vue
@@ -293,6 +293,7 @@ defineOptions({ name: 'ClDatabaseTableDetailColumns' });
     :row-style="columnRowStyle"
     :cell-style="columnCellStyle"
     :cell-class-name="columnCellClassName"
+    embedded
     hide-footer
   />
 </template>
diff --git a/src/components/core/database/tables/DatabaseTableDetailIndexes.vue b/src/components/core/database/tables/DatabaseTableDetailIndexes.vue
@@ -4,7 +4,11 @@ import type { CellCls, CellStyle, ColumnStyle } from 'element-plus';
 import { ElCheckbox } from 'element-plus';
 import type { TableColumnCtx } from 'element-plus/es/components/table/src/table/defaults';
 import { translate, plainClone } from '@/utils';
-import { getIndexStatus } from '@/utils/database';
+import {
+  getDefaultIndexName,
+  getIndexStatus,
+  isDefaultIndexName,
+} from '@/utils/database';
 import {
   ClIcon,
   ClTag,
@@ -122,13 +126,14 @@ const indexesTableColumns = computed<TableColumns<DatabaseIndex>>(() => [
     label: t('components.database.databases.table.indexes.columns'),
     width: 200,
     noPadding: true,
-    value: (row: DatabaseIndex) => (
+    value: (row: DatabaseIndex, rowIndex: number) => (
       <ClTableEditCell
         modelValue={row.columns?.map(c => c.name).join(',')}
         required
         isEdit={false}
         onEdit={() => {
-          activeIndex.value = plainClone(row);
+          activeIndexColumnsRowIndex.value = rowIndex;
+          activeIndexColumns.value = plainClone(row.columns);
           editColumnsDialogVisible.value = true;
         }}
       >
@@ -140,7 +145,8 @@ const indexesTableColumns = computed<TableColumns<DatabaseIndex>>(() => [
                 icon={c.order > 0 ? ['fa', 'arrow-up'] : ['fa', 'arrow-down']}
                 label={c.name}
                 onClick={() => {
-                  activeIndex.value = plainClone(row);
+                  activeIndexColumnsRowIndex.value = rowIndex;
+                  activeIndexColumns.value = plainClone(row.columns);
                   editColumnsDialogVisible.value = true;
                 }}
               >
@@ -251,51 +257,50 @@ const indexCellClassName: CellCls<DatabaseIndex> = ({ row, column }) => {
 };
 
 const onAddIndexColumn = (
-  indexColumn: DatabaseIndexColumn,
-  before: boolean
+  indexColumn?: DatabaseIndexColumn,
+  before?: boolean
 ) => {
-  if (!activeIndex.value) return;
-  const idx = activeIndex.value?.columns?.findIndex(
-    i => i.name === indexColumn.name
-  );
-  if (typeof idx === 'undefined') return;
   const newIndexColumn: DatabaseIndexColumn = {
     name: '',
     order: 1,
-    isEdit: { name: true },
+    isEdit: {
+      name: true,
+    },
   };
+  const idx = activeIndexColumns.value?.findIndex(
+    i => i.name === indexColumn?.name
+  );
+  if (typeof idx === 'undefined') {
+    activeIndexColumns.value?.push(newIndexColumn);
+    return;
+  }
   if (before) {
-    activeIndex.value?.columns?.splice(idx, 0, newIndexColumn);
+    activeIndexColumns.value?.splice(idx, 0, newIndexColumn);
   } else {
-    activeIndex.value?.columns?.splice(idx + 1, 0, newIndexColumn);
+    activeIndexColumns.value?.splice(idx + 1, 0, newIndexColumn);
   }
 };
-const onDeleteIndexColumn = (indexColumn: DatabaseIndexColumn) => {
-  if (!activeIndex.value) return;
-  const idx = activeIndex.value?.columns?.findIndex(
-    i => i.name === indexColumn.name
-  );
-  if (typeof idx === 'undefined') return;
-  activeIndex.value?.columns?.splice(idx, 1);
+const onDeleteIndexColumn = (rowIndex: number) => {
+  activeIndexColumns.value?.splice(rowIndex, 1);
 };
-const activeIndex = ref<DatabaseIndex>();
+const activeIndexColumnsRowIndex = ref<number>();
+const activeIndexColumns = ref<DatabaseIndexColumn[]>();
 const activeIndexColumnsColumns = computed<TableColumns<DatabaseIndexColumn>>(
   () => [
     {
       key: 'actions',
       width: 80,
       label: t('components.table.columns.actions'),
-      value: (row: DatabaseIndexColumn) => (
+      value: (row: DatabaseIndexColumn, rowIndex: number) => (
         <ClEditTableActionCell
           onAddBefore={() => onAddIndexColumn(row, true)}
           onAddAfter={() => onAddIndexColumn(row, false)}
-          onDelete={() => onDeleteIndexColumn(row)}
+          onDelete={() => onDeleteIndexColumn(rowIndex)}
         />
       ),
     },
     {
       key: 'name',
-      width: 200,
       label: t('components.database.databases.table.indexes.column.name'),
       noPadding: true,
       value: (row: DatabaseIndexColumn) => (
@@ -314,21 +319,23 @@ const activeIndexColumnsColumns = computed<TableColumns<DatabaseIndexColumn>>(
             row.name = val;
           }}
           onEdit={(val: boolean) => {
+            console.debug('name.onEdit', row.isEdit?.name, val);
             if (!row.isEdit) row.isEdit = {};
             row.isEdit.name = val;
+            console.debug('name.onEdit', row.isEdit?.name, val);
           }}
         />
       ),
     },
     {
       key: 'order',
-      width: 200,
       label: t('components.database.databases.table.indexes.column.order'),
       value: (row: DatabaseIndexColumn) => (
         <ElCheckbox
           modelValue={row.order > 0}
           label={t(`common.order.${row.order > 0 ? 'asc' : 'desc'}`)}
           onChange={(val: boolean) => {
+            console.debug('order.onChange', row, val);
             row.order = val ? 1 : -1;
           }}
         />
@@ -337,8 +344,35 @@ const activeIndexColumnsColumns = computed<TableColumns<DatabaseIndexColumn>>(
   ]
 );
 const activeIndexColumnsData = computed<TableData<DatabaseIndexColumn>>(() => {
-  return activeIndex.value?.columns || [];
+  return activeIndexColumns.value || [];
 });
+const onActiveIndexColumnsDialogConfirm = () => {
+  if (typeof activeIndexColumnsRowIndex.value === 'undefined') return;
+  const index =
+    internalTable.value?.indexes?.[activeIndexColumnsRowIndex.value];
+  if (!index) return;
+
+  // Update name
+  if (
+    !index.name ||
+    isDefaultIndexName(internalTable.value as DatabaseTable, index)
+  ) {
+    index.name = getDefaultIndexName(
+      internalTable.value as DatabaseTable,
+      activeIndexColumns.value || []
+    );
+  }
+
+  // Update columns
+  index.columns = plainClone(activeIndexColumns.value || []);
+
+  editColumnsDialogVisible.value = false;
+};
+const onActiveIndexColumnsDialogClose = () => {
+  activeIndexColumnsRowIndex.value = undefined;
+  activeIndexColumns.value = undefined;
+  editColumnsDialogVisible.value = false;
+};
 
 defineOptions({ name: 'ClDatabaseTableDetailIndexes' });
 </script>
@@ -353,34 +387,24 @@ defineOptions({ name: 'ClDatabaseTableDetailIndexes' });
     :row-style="indexRowStyle"
     :cell-style="indexCellStyle"
     :cell-class-name="indexCellClassName"
+    embedded
     hide-footer
   />
 
   <cl-dialog
+    :title="t('components.database.databases.table.actions.editIndexColumns')"
     :visible="editColumnsDialogVisible"
-    @confirm="
-      () => {
-        if (!activeIndex) return;
-        const index = internalTable?.indexes?.find(
-          i => i.name === activeIndex?.name
-        );
-        if (!index) return;
-        index.columns = activeIndex.columns;
-        editColumnsDialogVisible = false;
-      }
-    "
-    @close="
-      () => {
-        activeIndex = undefined;
-        editColumnsDialogVisible = false;
-      }
-    "
+    @confirm="onActiveIndexColumnsDialogConfirm"
+    @close="onActiveIndexColumnsDialogClose"
   >
     <cl-edit-table
+      :key="JSON.stringify([activeIndexColumnsRowIndex, activeIndexColumns])"
       :row-key="(row: DatabaseIndexColumn) => JSON.stringify(row)"
       :columns="activeIndexColumnsColumns"
       :data="activeIndexColumnsData"
+      fit
       hide-footer
+      @add="onAddIndexColumn"
     />
   </cl-dialog>
 </template>
diff --git a/src/components/ui/table/EditTable.vue b/src/components/ui/table/EditTable.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ColumnCls } from 'element-plus/es/components/table/src/table/defaults';
 import { CellCls, CellStyle, ColumnStyle } from 'element-plus';
+import { translate } from '@/utils';
 
 withDefaults(
   defineProps<{
@@ -32,12 +33,19 @@ withDefaults(
     headerRowStyle?: ColumnStyle<any>;
     headerCellClassName?: CellCls<any>;
     headerCellStyle?: CellStyle<any>;
+    addButtonLabel?: string;
   }>(),
   {
     border: true,
   }
 );
 
+const emit = defineEmits<{
+  (e: 'add'): void;
+}>();
+
+const t = translate;
+
 defineOptions({ name: 'ClEditTable' });
 </script>
 
@@ -71,7 +79,15 @@ defineOptions({ name: 'ClEditTable' });
     :header-row-style="headerRowStyle"
     :header-cell-style="headerCellStyle"
     :header-cell-class-name="headerCellClassName"
-  />
+  >
+    <template #empty>
+      <cl-label-button
+        :icon="['fa', 'plus']"
+        :label="addButtonLabel || t('common.actions.add')"
+        @click="emit('add')"
+      />
+    </template>
+  </cl-table>
 </template>
 
 <style scoped>

diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue
@@ -296,6 +296,12 @@ defineOptions({ name: 'ClTable' });
 }
 
 .table.embedded {
+  &::before,
+  .el-table__inner-wrapper:after,
+  .el-table__border-left-patch {
+    background-color: transparent !important;
+  }
+
   &:deep(.el-table--border .el-table__inner-wrapper:after) {
     height: 0;
   }

diff --git a/src/components/ui/table/TableEditCell.vue b/src/components/ui/table/TableEditCell.vue
@@ -19,10 +19,12 @@ const props = withDefaults(
     fetchSuggestions?: AutocompleteFetchSuggestions;
     triggerOnFocus?: boolean;
     autoFocus?: boolean;
+    automaticDropdown?: boolean;
   }>(),
   {
     triggerOnFocus: true,
     autoFocus: true,
+    automaticDropdown: true,
   }
 );
 
@@ -147,7 +149,10 @@ defineOptions({ name: 'ClTableEditCell' });
         v-model="internalValue"
         class="edit-input"
         size="default"
+        :autofocus="autoFocus"
+        :automatic-dropdown="automaticDropdown"
         @change="onCheck"
+        @blur="onCancel"
       >
         <el-option
           v-for="(op, $index) in options"

diff --git a/src/i18n/lang/en/components/database.ts b/src/i18n/lang/en/components/database.ts
@@ -107,15 +107,16 @@ const database: LComponentsDatabase = {
         columns: 'Columns',
         unique: 'Unique',
         column: {
-          name: 'Name',
-          order: 'Order',
+          name: 'Column Name',
+          order: 'Column Order',
         },
       },
       create: {
         name: 'New table name',
       },
       actions: {
         addColumn: 'Add Column',
+        editIndexColumns: 'Edit Index Columns',
       },
     },
   },

diff --git a/src/i18n/lang/zh/components/database.ts b/src/i18n/lang/zh/components/database.ts
@@ -105,7 +105,7 @@ const database: LComponentsDatabase = {
         columns: '列',
         unique: '唯一',
         column: {
-          name: '名称',
+          name: '列名',
           order: '顺序',
         },
       },
@@ -114,6 +114,7 @@ const database: LComponentsDatabase = {
       },
       actions: {
         addColumn: '添加列',
+        editIndexColumns: '编辑索引列',
       },
     },
   },

diff --git a/src/interfaces/i18n/components/database.d.ts b/src/interfaces/i18n/components/database.d.ts
@@ -115,6 +115,7 @@ export declare global {
         };
         actions: {
           addColumn: string;
+          editIndexColumns: string;
         };
       };
     };

diff --git a/src/utils/database.ts b/src/utils/database.ts
@@ -125,3 +125,17 @@ export const isValidTable = (table?: DatabaseTable) => {
     table.indexes?.some(i => !i.name || !i.columns?.length)
   );
 };
+
+export const getDefaultIndexName = (
+  table: DatabaseTable,
+  columns: DatabaseIndexColumn[]
+) => {
+  return `${table.name}_${columns.map(c => c.name).join('_')}_idx`;
+};
+
+export const isDefaultIndexName = (
+  table: DatabaseTable,
+  index: DatabaseIndex
+) => {
+  return index.name === getDefaultIndexName(table, index.columns);
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,6 +115,7 @@ export declare global { @@
             };
             actions: {
               addColumn: string;
+              editIndexColumns: string;
             };
           };
         };
@@ Expand Down @@