feat: DDL query in table settings for MySQL and PostgreSQL, closes #581

src/renderer/components/BaseTextEditor.vue

@@ -44,6 +44,11 @@ watch(() => props.mode, () => {
       editor.session.setMode(`ace/mode/${props.mode}`);
 });
 
+watch(() => props.modelValue, () => {
+   if (editor)
+      editor.session.setValue(props.modelValue);
+});
+
 watch(editorTheme, () => {
    if (editor)
       editor.setTheme(`ace/theme/${editorTheme.value}`);

src/renderer/components/WorkspaceTabPropsTable.vue

@@ -43,13 +43,25 @@
                   <span>{{ t('word.indexes') }}</span>
                </button>
                <button
-                  class="btn btn-dark btn-sm"
+                  class="btn btn-dark btn-sm mr-0"
                   :disabled="isSaving"
                   @click="showForeignModal"
                >
                   <i class="mdi mdi-24px mdi-key-link mr-1" />
                   <span>{{ t('word.foreignKeys') }}</span>
                </button>
+
+               <div class="divider-vert py-3" />
+
+               <button
+                  v-if="workspace.customizations.tableDdl"
+                  class="btn btn-dark btn-sm"
+                  :disabled="isSaving"
+                  @click="showDdlModal"
+               >
+                  <i class="mdi mdi-24px mdi-code-tags mr-1" />
+                  <span>{{ t('word.ddl') }}</span>
+               </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('word.schema')">
@@ -169,6 +181,13 @@
          @hide="hideForeignModal"
          @foreigns-update="foreignsUpdate"
       />
+      <WorkspaceTabPropsTableDdlModal
+         v-if="isDdlModal"
+         :table="table"
+         :schema="schema"
+         :workspace="workspace"
+         @hide="hideDdlModal"
+      />
    </div>
 </template>
 
@@ -186,6 +205,7 @@ import BaseSelect from '@/components/BaseSelect.vue';
 import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields.vue';
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal.vue';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal.vue';
+import WorkspaceTabPropsTableDdlModal from '@/components/WorkspaceTabPropsTableDdlModal.vue';
 import { ipcRenderer } from 'electron';
 import { useSettingsStore } from '@/stores/settings';
 
@@ -221,6 +241,7 @@ const isLoading = ref(false);
 const isSaving = ref(false);
 const isIndexesModal = ref(false);
 const isForeignModal = ref(false);
+const isDdlModal = ref(false);
 const originalFields: Ref<TableField[]> = ref([]);
 const localFields: Ref<TableField[]> = ref([]);
 const originalKeyUsage: Ref<TableForeign[]> = ref([]);
@@ -649,6 +670,14 @@ const hideForeignModal = () => {
    isForeignModal.value = false;
 };
 
+const showDdlModal = () => {
+   isDdlModal.value = true;
+};
+
+const hideDdlModal = () => {
+   isDdlModal.value = false;
+};
+
 const foreignsUpdate = (foreigns: TableForeign[]) => {
    localKeyUsage.value = foreigns;
 };

src/renderer/components/WorkspaceTabPropsTableDdlModal.vue

@@ -0,0 +1,70 @@
+<template>
+   <ConfirmModal
+      :confirm-text="t('word.confirm')"
+      size="large"
+      class="options-modal"
+      :cancel-text="t('word.close')"
+      :hide-footer="true"
+      @hide="$emit('hide')"
+   >
+      <template #header>
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-code-tags mr-1" />
+            <span class="cut-text">{{ t('word.ddl') }} "{{ table }}"</span>
+         </div>
+      </template>
+      <template #body>
+         <div class="pb-4">
+            <BaseTextEditor
+               ref="queryEditor"
+               v-model="createDdl"
+               editor-class="textarea-editor"
+               :read-only="true"
+               mode="sql"
+            />
+         </div>
+      </template>
+   </ConfirmModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useI18n } from 'vue-i18n';
+import Tables from '@/ipc-api/Tables';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseTextEditor from '@/components/BaseTextEditor.vue';
+
+const { t } = useI18n();
+
+const props = defineProps({
+   table: String,
+   schema: String,
+   workspace: Object
+});
+
+const createDdl = ref('');
+
+defineEmits(['hide']);
+
+const { addNotification } = useNotificationsStore();
+
+onMounted(async () => {
+   try {
+      const { status, response } = await Tables.getTableDll({
+         uid: props.workspace.uid,
+         table: props.table,
+         schema: props.schema
+      });
+
+      if (status === 'success')
+         createDdl.value = response;
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+});
+
+</script>