feat: added drop table

src/components/core/database/DatabaseSidebar.vue

@@ -7,15 +7,25 @@ import {
   onBeforeMount,
   onBeforeUnmount,
 } from 'vue';
-import { ElTree, ElInput, ElForm, ElFormItem } from 'element-plus';
+import { useStore } from 'vuex';
+import {
+  ElTree,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElMessageBox,
+  ElMessage,
+} from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
 import { debounce } from 'lodash';
-import { translate } from '@/utils';
-import type { FilterNodeMethodFunction } from 'element-plus/es/components/tree/src/tree.type';
-import { ClDatabaseSidebar } from '@/components';
+import type {
+  FilterNodeMethodFunction,
+  TreeNodeData,
+} from 'element-plus/es/components/tree/src/tree.type';
 import { TAB_NAME_COLUMNS, TAB_NAME_DATA, TAB_NAME_INDEXES } from '@/constants';
-import { useStore } from 'vuex';
+import { translate } from '@/utils';
 import { useDatabaseDetail } from '@/views';
+import useRequest from '@/services/request';
 
 const t = translate;
 
@@ -25,7 +35,8 @@ const { database: state } = store.state as RootStoreState;
 
 const { activeId } = useDatabaseDetail();
 
-const sidebarRef = ref<InstanceType<typeof ClDatabaseSidebar>>();
+const { del } = useRequest();
+
 const treeRef = ref<InstanceType<typeof ElTree>>();
 const searchKeyword = ref('');
 const showSearch = ref(false);
@@ -104,14 +115,6 @@ const debouncedFilter = debounce(() => {
 
 watch(searchKeyword, debouncedFilter);
 
-const toggleSearch = () => {
-  showSearch.value = !showSearch.value;
-  if (!showSearch.value) {
-    searchKeyword.value = '';
-    treeRef.value?.filter('');
-  }
-};
-
 const getMetadata = async () => {
   await store.dispatch(`${ns}/getMetadata`, { id: activeId.value });
   updateDefaultExpandedKeys();
@@ -160,55 +163,67 @@ const contextMenuItems = computed<ContextMenuItem[]>(() => {
           title: t('common.actions.previewData'),
           icon: ['fa', 'table'],
           action: async () => {
-            store.commit(
-              `${ns}/setActiveNavItem`,
-              activeContextMenuNavItem.value
-            );
-            treeRef.value?.setCurrentKey(activeNavItem.value?.id);
+            await selectNode(activeContextMenuNavItem.value as DatabaseNavItem);
             await store.dispatch(`${ns}/getTablePreview`, {
               id: activeId.value,
               table: activeNavItem.value?.name,
             });
           },
         },
         {
-          title: t('common.actions.edit'),
+          title: t('common.actions.rename'),
           icon: ['fa', 'edit'],
-          action: () => {
-            // try to select a database first
-            let databaseName: string;
-            if (activeNavItem.value?.type === 'database') {
-              databaseName = activeNavItem.value?.name as string;
-            } else if (activeDatabaseName.value) {
-              databaseName = activeDatabaseName.value;
-            } else {
-              databaseName = treeItems.value?.[0]?.name as string;
-            }
-            const databaseNode = treeItems.value?.find(
-              d => d.name === databaseName
-            );
-            if (!databaseNode) return;
-
-            const newNode = newTableNode();
-            if (databaseNode?.children?.length) {
-              const firstTableNode = treeRef.value?.getNode(
-                databaseNode.children[0].id
-              );
-              treeRef.value?.insertBefore(newNode, firstTableNode as TreeNode);
-            } else {
-              treeRef.value?.append(newNode, databaseNode.id);
-            }
-            selectNode(newNode);
-            nextTick(() => {
+          action: async () => {
+            await selectNode(activeContextMenuNavItem.value as DatabaseNavItem);
+            const id = activeNavItem.value?.id as string;
+            const node = treeRef.value?.getNode(id) as TreeNodeData;
+            node.data.edit = true;
+            node.data.edit_name = node.data.label;
+            await nextTick(() => {
               const input = document.querySelector(
-                `#edit-input-${normalizeElementId(newNode.id)}`
+                `#edit-input-${normalizeElementId(id)}`
               );
               if (input instanceof HTMLInputElement) {
                 input.focus();
               }
             });
           },
         },
+        {
+          title: t('common.actions.drop'),
+          icon: ['fa', 'trash'],
+          action: async () => {
+            switch (activeContextMenuNavItem.value?.type) {
+              case 'table':
+                await selectNode(activeContextMenuNavItem.value);
+                const { value: promptTableName } = await ElMessageBox.prompt(
+                  t('components.database.messageBox.prompt.dropTable.message'),
+                  t('components.database.messageBox.prompt.dropTable.title'),
+                  {
+                    type: 'warning',
+                    inputPlaceholder: t(
+                      'components.database.messageBox.prompt.dropTable.placeholder'
+                    ),
+                    confirmButtonClass: 'el-button--danger',
+                  }
+                );
+                const tableName = activeNavItem.value?.data?.name;
+                if (!promptTableName || promptTableName !== tableName) {
+                  ElMessage.error(
+                    t('components.database.messageBox.prompt.dropTable.error')
+                  );
+                  return;
+                }
+                await del(`/databases/${activeId.value}/tables/drop`, {
+                  database_name: activeDatabaseName.value,
+                  table_name: tableName,
+                });
+                store.commit(`${ns}/setActiveNavItem`, undefined);
+                await getMetadata();
+                break;
+            }
+          },
+        },
       ];
     case 'column':
       return [
@@ -343,7 +358,7 @@ const selectNode = async (data: DatabaseNavItem) => {
 
   // highlight current node
   setTimeout(() => {
-    sidebarRef.value?.treeRef?.setCurrentKey(id);
+    treeRef.value?.setCurrentKey(id);
   }, 0);
 };
 
@@ -436,7 +451,13 @@ const validateAndSave = async (data: DatabaseNavItem) => {
     await formRef.value.validate();
     data.label = data.edit_name;
     data.edit = false;
-    // Emit an event or call a method to save the changes
+    store.commit(`${ns}/setActiveNavItem`, {
+      ...data,
+      data: {
+        ...data.data,
+        name: data.edit_name,
+      },
+    });
   } catch (error) {
     console.error('Validation failed', error);
   }

src/components/core/database/DatabaseTableDetail.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import {
   TAB_NAME_COLUMNS,
   TAB_NAME_DATA,
@@ -63,6 +63,30 @@ watch(activeTable, onRollback);
 
 const commitLoading = ref(false);
 const onCommit = async () => {
+  if (props.isNew) {
+    return createTable();
+  } else {
+    return modifyTable();
+  }
+};
+
+const createTable = async () => {
+  commitLoading.value = true;
+  try {
+    await post(`/databases/${props.activeId}/tables/create`, {
+      database_name: props.databaseName,
+      table: internalTable.value,
+    });
+    await getTable();
+    emit('refresh');
+  } catch (error: any) {
+    ElMessage.error(error.message);
+  } finally {
+    commitLoading.value = false;
+  }
+};
+
+const modifyTable = async () => {
   commitLoading.value = true;
   try {
     await post(`/databases/${props.activeId}/tables/modify`, {
@@ -75,6 +99,12 @@ const onCommit = async () => {
             status: getColumnStatus(c, activeTable.value),
           };
         }),
+        indexes: internalTable.value?.indexes?.map(i => {
+          return {
+            ...i,
+            status: getIndexStatus(i, activeTable.value),
+          };
+        }),
       },
     });
     await getTable();

src/components/core/database/tables/DatabaseTableDetailColumns.vue

@@ -220,6 +220,19 @@ const columnsTableColumns = computed<TableColumns<DatabaseColumn>>(() => {
         />
       ),
     },
+    {
+      key: 'primary',
+      label: t('components.database.databases.table.columns.primary'),
+      width: 120,
+      value: (row: DatabaseColumn) => (
+        <ElCheckbox
+          modelValue={row.primary}
+          onChange={(val: boolean) => {
+            row.primary = val;
+          }}
+        />
+      ),
+    },
   ];
 });
 

src/i18n/lang/en/common.ts

@@ -44,6 +44,8 @@ const common: LCommon = {
     previewData: 'Preview Data',
     insertBefore: 'Insert Before',
     insertAfter: 'Insert After',
+    rename: 'Rename',
+    drop: 'Drop',
   },
   messageBox: {
     confirm: {

src/i18n/lang/en/components/database.ts

@@ -67,6 +67,16 @@ const database: LComponentsDatabase = {
       change: 'Changed data source successfully',
     },
   },
+  messageBox: {
+    prompt: {
+      dropTable: {
+        title: 'Drop Table',
+        message: 'Are you sure you want to drop the table?',
+        placeholder: 'Please type the table name to confirm',
+        error: 'Table name does not match',
+      },
+    },
+  },
   connectType: {
     label: {
       standard: 'Standard',
@@ -100,6 +110,7 @@ const database: LComponentsDatabase = {
         type: 'Data Type',
         notNull: 'Not Null',
         default: 'Default Expression',
+        primary: 'Primary Key',
       },
       indexes: {
         name: 'Name',

src/i18n/lang/zh/common.ts

@@ -44,6 +44,8 @@ const common: LCommon = {
     previewData: '预览数据',
     insertBefore: '在前插入',
     insertAfter: '在后插入',
+    rename: '重命名',
+    drop: '删除',
   },
   messageBox: {
     confirm: {

src/i18n/lang/zh/components/database.ts

@@ -67,6 +67,16 @@ const database: LComponentsDatabase = {
       change: '更改数据库成功',
     },
   },
+  messageBox: {
+    prompt: {
+      dropTable: {
+        title: '删除表',
+        message: '确定要删除表吗？',
+        placeholder: '请输入表名',
+        error: '表名不正确',
+      },
+    },
+  },
   connectType: {
     label: {
       standard: '标准',
@@ -98,6 +108,7 @@ const database: LComponentsDatabase = {
         type: '数据类型',
         notNull: '非空',
         default: '默认值',
+        primary: '主键',
       },
       indexes: {
         name: '名称',

src/interfaces/i18n/common.d.ts

@@ -57,6 +57,8 @@ export declare global {
       previewData: string;
       insertBefore: string;
       insertAfter: string;
+      rename: string;
+      drop: string;
     };
     messageBox: {
       confirm: {

src/interfaces/i18n/components/database.d.ts

@@ -68,6 +68,16 @@ export declare global {
         change: string;
       };
     };
+    messageBox: {
+      prompt: {
+        dropTable: {
+          title: string;
+          message: string;
+          placeholder: string;
+          error: string;
+        };
+      };
+    };
     connectType: {
       label: {
         standard: string;
@@ -99,6 +109,7 @@ export declare global {
           type: string;
           notNull: string;
           default: string;
+          primary: string;
         };
         indexes: {
           name: string;

src/interfaces/models/database.d.ts

@@ -69,6 +69,7 @@ export declare global {
     type?: string;
     not_null?: boolean;
     default?: string;
+    primary?: boolean;
   }
 
   interface DatabaseIndex extends DatabaseTableItem<DatabaseIndex> {
@@ -89,7 +90,6 @@ export declare global {
     data_type?: string;
     children: DatabaseNavItem[];
     database?: string;
-    table?: DatabaseTable;
     new?: boolean;
     edit?: boolean;
     edit_name?: string;

src/utils/database.ts

@@ -95,7 +95,8 @@ export const getColumnStatus = (
       column.name === c.name &&
       column.type === c.type &&
       column.not_null === c.not_null &&
-      column.default === c.default
+      column.default === c.default &&
+      column.primary === c.primary
   );
   if (hasColumn) return;
   return 'updated';