feat: added json editor

crawlab-team · Sep 29, 2024 · 5ab8327 · 5ab8327
1 parent 6f5cd04
commit 5ab8327
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -168,6 +168,7 @@
     "vue-tsc": "^2.0.24"
   },
   "dependencies": {
+    "json-editor-vue": "^0.17.0",
     "uuid": "^10.0.0"
   }
 }
diff --git a/src/components/core/database/DatabaseTableDetail.vue b/src/components/core/database/DatabaseTableDetail.vue
@@ -98,49 +98,40 @@ const onCommit = async () => {
 };
 
 const createTable = async () => {
-  try {
-    await post(`/databases/${props.activeId}/tables/create`, {
-      database_name: props.databaseName,
-      table: internalTable.value,
-    });
-    await getTable();
-    store.commit(`${ns}/setActiveNavItem`, {
-      ...state.activeNavItem,
-      id: `${props.databaseName}:${internalTable.value?.name}`,
-      new: false,
-    });
-  } catch (error: any) {
-    ElMessage.error(error.message);
-    throw error;
-  }
+  await post(`/databases/${props.activeId}/tables/create`, {
+    database_name: props.databaseName,
+    table: internalTable.value,
+  });
+  await getTable();
+  store.commit(`${ns}/setActiveNavItem`, {
+    ...state.activeNavItem,
+    id: `${props.databaseName}:${internalTable.value?.name}`,
+    new: false,
+  });
+  emit('refresh');
 };
 
 const modifyTable = async () => {
-  try {
-    await post(`/databases/${props.activeId}/tables/modify`, {
-      database_name: props.databaseName,
-      table: {
-        ...internalTable.value,
-        columns: internalTable.value?.columns?.map(c => {
-          return {
-            ...c,
-            status: getColumnStatus(c, activeTable.value),
-          };
-        }),
-        indexes: internalTable.value?.indexes?.map(i => {
-          return {
-            ...i,
-            status: getIndexStatus(i, activeTable.value),
-          };
-        }),
-      },
-    });
-    await getTable();
-    emit('refresh');
-  } catch (error: any) {
-    ElMessage.error(error.message);
-    throw error;
-  }
+  await post(`/databases/${props.activeId}/tables/modify`, {
+    database_name: props.databaseName,
+    table: {
+      ...internalTable.value,
+      columns: internalTable.value?.columns?.map(c => {
+        return {
+          ...c,
+          status: getColumnStatus(c, activeTable.value),
+        };
+      }),
+      indexes: internalTable.value?.indexes?.map(i => {
+        return {
+          ...i,
+          status: getIndexStatus(i, activeTable.value),
+        };
+      }),
+    },
+  });
+  await getTable();
+  emit('refresh');
 };
 
 const activeTabName = ref<string>(defaultTabName.value || TAB_NAME_DATA);

diff --git a/src/components/core/database/tables/DatabaseTableDetailData.vue b/src/components/core/database/tables/DatabaseTableDetailData.vue
@@ -48,48 +48,51 @@ const getHeaderIcon = (column: DatabaseColumn) => {
       return ['fa', 'calendar-alt'];
     case 'object':
       return ['fa', 'object-group'];
+    case 'array':
+      return ['fa', 'list'];
     default:
       return ['fa', 'font'];
   }
 };
 
-const tableColumns = computed<TableColumns>(() => {
+const tableColumns = computed<TableColumns<DatabaseTableRow>>(() => {
   const { columns } = props.activeTable || {};
   if (!columns) return [];
   return columns.map(c => {
+    const value = (row: DatabaseTableRow) => (
+      <ClTableEditCell
+        modelValue={row[c.name as string]}
+        isEdit={row.__edit__?.[c.name as string]}
+        dataType={getDataType(c.type as string)}
+        onChange={(val: any) => {
+          const colName = c.name as string;
+          row[colName] = val;
+        }}
+        onEdit={(val: boolean) => {
+          const colName = c.name as string;
+          row =
+            tableData.value.find(r => getRowHash(r) === getRowHash(row)) || row;
+          if (!row.__edit__) row.__edit__ = { [colName]: val };
+          row.__edit__[colName] = val;
+        }}
+      />
+    );
+    const header = () => (
+      <div>
+        <span style={{ marginRight: '5px' }}>
+          <ClIcon size="small" icon={getHeaderIcon(c)} />
+        </span>
+        <span>{c.name}</span>
+      </div>
+    );
     return {
       label: c.name,
       key: c.name,
       width: 200,
-      value: (row: DatabaseTableRow) => (
-        <ClTableEditCell
-          modelValue={row[c.name as string]}
-          isEdit={row.__edit__?.[c.name as string]}
-          dataType={getDataType(c.type as string)}
-          onChange={(val: any) => {
-            const colName = c.name as string;
-            row[colName] = val;
-          }}
-          onEdit={(val: boolean) => {
-            const colName = c.name as string;
-            row =
-              tableData.value.find(r => getRowHash(r) === getRowHash(row)) ||
-              row;
-            if (!row.__edit__) row.__edit__ = { [colName]: val };
-            row.__edit__[colName] = val;
-          }}
-        />
-      ),
-      header: () => (
-        <div>
-          <span style={{ marginRight: '5px' }}>
-            <ClIcon size="small" icon={getHeaderIcon(c)} />
-          </span>
-          <span>{c.name}</span>
-        </div>
-      ),
-    } as TableColumn;
-  });
+      value,
+      header,
+    };
+  }) as TableColumns<DatabaseTableRow>;
 });
 const tableData = ref<TableData<DatabaseTableRow>>([]);
 const tablePagination = ref<TablePagination>({

diff --git a/src/components/ui/dialog/Dialog.vue b/src/components/ui/dialog/Dialog.vue
@@ -14,6 +14,7 @@ withDefaults(
     confirmLoading?: boolean;
     confirmType?: BasicType;
     className?: string;
+    appendToBody?: boolean;
   }>(),
   {
     top: '15vh',
@@ -44,6 +45,7 @@ defineOptions({ name: 'ClDialog' });
     :custom-class="
       ['cl-dialog', className, visible ? 'visible' : 'hidden'].join(' ')
     "
+    :append-to-body="appendToBody"
     :modal-class="modalClass"
     :before-close="onClose"
     :model-value="visible"

diff --git a/src/components/ui/table/TableEditCell.vue b/src/components/ui/table/TableEditCell.vue
@@ -5,9 +5,10 @@ import {
   ElAutocomplete,
   type AutocompleteFetchSuggestions,
 } from 'element-plus';
+import dayjs from 'dayjs';
+import JsonEditorVue from 'json-editor-vue';
 import { ClIcon } from '@/components';
 import { translate } from '@/utils';
-import dayjs from 'dayjs';
 
 const props = withDefaults(
   defineProps<{
@@ -114,12 +115,17 @@ const labelValue = computed<string>(() => {
     case 'date':
       return dayjs(modelValue).format('YYYY-MM-DD');
     case 'object':
+    case 'array':
       return JSON.stringify(props.modelValue);
     default:
       return modelValue;
   }
 });
 
+const isJson = computed(() => {
+  return ['object', 'array'].includes(props.dataType || '');
+});
+
 defineOptions({ name: 'ClTableEditCell' });
 </script>
 
@@ -134,8 +140,8 @@ defineOptions({ name: 'ClTableEditCell' });
       ].join(' ')
     "
   >
-    <template v-if="!isEdit">
-      <span class="display-value" @click.stop="onEdit">
+    <template v-if="!isEdit || isJson">
+      <span class="display-value" @click.stop="onEdit" :title="labelValue">
         <template v-if="modelValue">
           <template v-if="$slots.default">
             <slot name="default" />
@@ -203,7 +209,11 @@ defineOptions({ name: 'ClTableEditCell' });
           value-format="YYYY-MM-DD hh:mm:ss"
           @keyup.enter="onCheck"
           @change="onCheck"
-          @blur="onCancel"
+          @visible-change="(visible: boolean) => {
+            if (!visible) {
+              onCheck();
+            }
+          }"
         />
         <el-input
           v-else-if="dataType === 'number'"
@@ -240,6 +250,17 @@ defineOptions({ name: 'ClTableEditCell' });
       />
     </div>
   </div>
+
+  <template v-if="isEdit && dataType && ['object', 'array'].includes(dataType)">
+    <cl-dialog
+      :visible="isEdit"
+      append-to-body
+      @confirm="onCheck"
+      @close="onCancel"
+    >
+      <JsonEditorVue v-model="internalValue" />
+    </cl-dialog>
+  </template>
 </template>
 
 <style scoped>
@@ -251,6 +272,10 @@ defineOptions({ name: 'ClTableEditCell' });
 
   .display-value {
     margin: 0 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: calc(100% - 24px);
 
     &:hover {
       cursor: pointer;

diff --git a/src/interfaces/components/ui/table/Table.d.ts b/src/interfaces/components/ui/table/Table.d.ts
@@ -62,7 +62,7 @@ export declare global {
     className?: string;
     proOnly?: boolean;
     noPadding?: boolean;
-    header?: JSX.Element | VNode;
+    header?: JSX.Element | (() => JSX.Element) | (() => VNode) | VNode;
   }
 
   type TableColumns<T = any> = TableColumn<T>[];

diff --git a/src/utils/database.ts b/src/utils/database.ts
@@ -204,8 +204,18 @@ export const getDataType = (type: string): DatabaseDataType => {
   }
 
   // MongoDB-specific types
-  if (/^(objectid|long|decimal128)$/.test(lowerType)) {
-    return 'object'; // Handled by MongoDB drivers
+  if (/^(objectid|long|decimal128|object|isodate)$/.test(lowerType)) {
+    switch (lowerType) {
+      case 'long':
+      case 'decimal128':
+        return 'number';
+      case 'objectid':
+        return 'string';
+      case 'object':
+        return 'object';
+      case 'isodate':
+        return 'datetime';
+    }
   }
 
   // Default case
@@ -228,7 +238,8 @@ export const normalizeDataType = (value: any, type: string) => {
     case 'string':
       return String(value);
     case 'date':
-      return value ? new Date(value) : null; // Convert to Date object
+    case 'datetime':
+      return value;
     case 'array':
       return Array.isArray(value) ? value : [value];
     case 'object':