feat: updated database detail page

src/components/core/database/DatabaseTableDetail.vue

@@ -9,9 +9,13 @@ import {
   TAB_NAME_OVERVIEW,
 } from '@/constants';
 import { plainClone, translate } from '@/utils';
-import { ClResultCell } from '@/components';
 import useRequest from '@/services/request';
-import { getColumnStatus } from '@/utils/database';
+import {
+  getColumnStatus,
+  getIndexStatus,
+  isValidTable,
+} from '@/utils/database';
+import { ClResultCell } from '@/components';
 
 const props = withDefaults(
   defineProps<{
@@ -210,11 +214,19 @@ const onDataTablePaginationChange = (pagination: TablePagination) => {
 
 const hasChanges = computed(() => {
   if (!internalTable.value) return false;
-  return internalTable.value.columns?.some(c =>
+  const hasColumnsChange = internalTable.value.columns?.some(c =>
     getColumnStatus(c, activeTable.value)
   );
+  const hasIndexesChange = internalTable.value.indexes?.some(i =>
+    getIndexStatus(i, activeTable.value)
+  );
+  return hasColumnsChange || hasIndexesChange;
 });
 
+const canSave = computed(
+  () => isValidTable(internalTable.value) && hasChanges.value
+);
+
 defineOptions({ name: 'ClDatabaseTableDetail' });
 </script>
 
@@ -232,7 +244,7 @@ defineOptions({ name: 'ClDatabaseTableDetail' });
             :icon="['fa', 'save']"
             :tooltip="t('components.database.actions.commitChanges')"
             size="small"
-            :disabled="!hasChanges"
+            :disabled="!canSave"
             :loading="commitLoading"
             @click.stop="onCommit"
           />
@@ -262,20 +274,17 @@ defineOptions({ name: 'ClDatabaseTableDetail' });
         />
       </template>
       <template v-else-if="activeTabName === TAB_NAME_COLUMNS">
-        <cl-database-detail-tab-databases-sub-tab-columns
+        <cl-database-table-detail-columns
           v-model="internalTable"
           :active-table="activeTable"
           :loading="commitLoading"
         />
       </template>
       <template v-else-if="activeTabName === TAB_NAME_INDEXES">
-        <cl-table
+        <cl-database-table-detail-indexes
+          v-model="internalTable"
+          :active-table="activeTable"
           :loading="commitLoading"
-          :key="JSON.stringify(internalTable)"
-          :row-key="(row: DatabaseColumn) => JSON.stringify(row)"
-          :columns="indexesTableColumns"
-          :data="indexesTableData"
-          hide-footer
         />
       </template>
     </div>
@@ -299,55 +308,6 @@ defineOptions({ name: 'ClDatabaseTableDetail' });
   .tab-content {
     flex: 1;
     overflow: auto;
-
-    &:deep(.table .actions) {
-      display: flex;
-      align-items: center;
-    }
-
-    &:deep(.table .actions > div) {
-      display: flex;
-      align-items: center;
-    }
-
-    &:deep(.table .actions .icon) {
-      padding: 5px;
-      cursor: pointer;
-      color: var(--el-table-text-color);
-      width: 14px;
-      height: 14px;
-    }
-
-    &:deep(.table .actions .icon:hover) {
-      border-radius: 50%;
-      color: var(--cl-primary-color);
-      background-color: var(--cl-primary-plain-color);
-    }
-
-    &:deep(.table .el-table__row:hover),
-    &:deep(.table .el-table__row:hover .el-table__cell) {
-      background-color: inherit;
-    }
-
-    &:deep(.table .el-table__cell:hover .cell-actions) {
-      display: flex;
-    }
-
-    &:deep(.table .el-table__cell .cell > div > .el-switch) {
-      height: inherit;
-    }
-
-    &:deep(.table .el-table__cell.updated) {
-      border-left: 4px solid var(--cl-primary-color);
-    }
-
-    &:deep(.table .el-table__cell.updated:not(.no-padding) .cell) {
-      padding-left: 8px;
-    }
-
-    &:deep(.table .el-table__cell.updated .cell .display-value) {
-      margin-left: 8px;
-    }
   }
 }
 </style>

src/views/database/detail/tabs/tables/DatabaseDetailTabDatabasesSubTabColumns.vue → src/components/core/database/tables/DatabaseTableDetailColumns.vue

@@ -6,16 +6,13 @@ import type {
   CellStyle,
   ColumnStyle,
 } from 'element-plus';
-import type {
-  ColumnCls,
-  TableColumnCtx,
-} from 'element-plus/es/components/table/src/table/defaults';
+import { ElCheckbox } from 'element-plus';
+import type { TableColumnCtx } from 'element-plus/es/components/table/src/table/defaults';
 import {
   ClContextMenu,
   ClContextMenuList,
   ClIcon,
   ClTableEditCell,
-  ClSwitch,
 } from '@/components';
 import { translate } from '@/utils';
 import { useDatabaseDetail } from '@/views';
@@ -46,14 +43,14 @@ const onAddColumn = (column?: DatabaseColumn, before?: boolean) => {
   if (column === undefined) {
     internalTable.value?.columns?.push(newColumn);
   } else {
-    const index = internalTable.value?.columns?.findIndex(
+    const idx = internalTable.value?.columns?.findIndex(
       c => c.name === column.name
     );
-    if (typeof index === 'undefined') return;
+    if (typeof idx === 'undefined') return;
     if (before) {
-      internalTable.value?.columns?.splice(index, 0, newColumn);
+      internalTable.value?.columns?.splice(idx, 0, newColumn);
     } else {
-      internalTable.value?.columns?.splice(index + 1, 0, newColumn);
+      internalTable.value?.columns?.splice(idx + 1, 0, newColumn);
     }
   }
 };
@@ -191,7 +188,7 @@ const columnsTableColumns = computed<TableColumns<DatabaseColumn>>(() => [
     label: t('components.database.databases.table.columns.notNull'),
     width: 120,
     value: (row: DatabaseColumn) => (
-      <ClSwitch
+      <ElCheckbox
         modelValue={row.not_null}
         onChange={(val: boolean) => {
           row.not_null = val;
@@ -250,7 +247,7 @@ const columnRowStyle: ColumnStyle<DatabaseColumn> = ({
   };
 };
 
-const isCellUpdated = (
+const isColumnCellUpdated = (
   row: DatabaseColumn,
   column: TableColumnCtx<DatabaseColumn>
 ) => {
@@ -268,7 +265,7 @@ const isCellUpdated = (
 };
 
 const columnCellStyle: CellStyle<DatabaseColumn> = ({ row, column }) => {
-  if (isCellUpdated(row, column)) {
+  if (isColumnCellUpdated(row, column)) {
     return {
       fontWeight: 'bold',
     };
@@ -277,17 +274,17 @@ const columnCellStyle: CellStyle<DatabaseColumn> = ({ row, column }) => {
 };
 
 const columnCellClassName: CellCls<DatabaseColumn> = ({ row, column }) => {
-  if (isCellUpdated(row, column)) {
+  if (isColumnCellUpdated(row, column)) {
     return 'updated';
   }
   return '';
 };
 
-defineOptions({ name: 'ClDatabaseDetailTabDatabasesSubTabColumns' });
+defineOptions({ name: 'ClDatabaseTableDetailColumns' });
 </script>
 
 <template>
-  <cl-table
+  <cl-edit-table
     :loading="loading"
     :key="JSON.stringify(internalTable)"
     :row-key="(row: DatabaseColumn) => JSON.stringify(row)"

src/views/database/detail/tabs/tables/DatabaseDetailTabDatabasesSubTabData.vue → src/components/core/database/tables/DatabaseTableDetailData.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-defineOptions({ name: 'ClDatabaseDetailTabDatabasesSubTabData' });
+defineOptions({ name: 'ClDatabaseTableDetailData' });
 </script>
 
 <template>