github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): add disableImportButton & align layout margin

pull/2795/head
Wing-Kam Wong 2 years ago
parent
2612633ef6
commit
d90711e711
1 changed files with 73 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      packages/nc-gui-v2/components/dlg/QuickImport.vue

138
packages/nc-gui-v2/components/dlg/QuickImport.vue
Unescape View File

@ -107,6 +107,10 @@ const disablePreImportButton = computed(() => {
} }
}) })
const disableImportButton = computed(() => {
return !templateEditorRef.value?.isValid()
})
const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isEditorValid()) const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isEditorValid())
async function handlePreImport() { async function handlePreImport() {
@ -213,7 +217,7 @@ function getAdapter(name: string, val: any) {
<template> <template>
<a-modal v-model:visible="dialogShow" width="max(90vw, 600px)" @keydown.esc="dialogShow = false"> <a-modal v-model:visible="dialogShow" width="max(90vw, 600px)" @keydown.esc="dialogShow = false">
<a-typography-title class="mb-4 select-none" type="secondary" :level="5">{{ importMeta.header }}</a-typography-title> <a-typography-title class="ml-5 mt-5 mb-5" type="secondary" :level="5">{{ importMeta.header }}</a-typography-title>
<template #footer> <template #footer>
<a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button> <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
<a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button> <a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
@ -227,71 +231,75 @@ function getAdapter(name: string, val: any) {
:loading="loading" :loading="loading"
:disabled="disablePreImportButton" :disabled="disablePreImportButton"
@click="handlePreImport" @click="handlePreImport"
>{{ $t('activity.import') }}</a-button >{{ $t('activity.import') }}
> </a-button>
<a-button v-else key="import" type="primary" :loading="loading" @click="handleImport">{{ $t('activity.import') }}</a-button> <a-button v-else key="import" type="primary" :loading="loading" :disabled="disableImportButton" @click="handleImport">{{
$t('activity.import')
}}</a-button>
</template> </template>
<TemplateEditor <div class="ml-5 mr-5">
v-if="templateEditorModal" <TemplateEditor
ref="templateEditorRef" v-if="templateEditorModal"
:project-template="templateData" ref="templateEditorRef"
:import-data="importData" :project-template="templateData"
:quick-import-type="importType" :import-data="importData"
/> :quick-import-type="importType"
<a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top"> />
<a-tab-pane key="uploadTab" :closable="false"> <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
<template #tab> <a-tab-pane key="uploadTab" :closable="false">
<span class="flex items-center gap-2"> <template #tab>
<MdiFileUploadOutlineIcon /> <span class="flex items-center gap-2">
Upload <MdiFileUploadOutlineIcon />
</span> Upload
</template> </span>
<div class="pr-10 pb-0 pt-5"> </template>
<a-upload-dragger <div class="pr-10 pb-0 pt-5">
v-model:fileList="importState.fileList" <a-upload-dragger
name="file" v-model:fileList="importState.fileList"
:accept="importMeta.acceptTypes" name="file"
:max-count="1" :accept="importMeta.acceptTypes"
list-type="picture" :max-count="1"
@change="handleChange" list-type="picture"
@reject="rejectDrop" @change="handleChange"
> @reject="rejectDrop"
<MdiFileIcon size="large" /> >
<p class="ant-upload-text">Click or drag file to this area to upload</p> <MdiFileIcon size="large" />
<p class="ant-upload-hint"> <p class="ant-upload-text">Click or drag file to this area to upload</p>
{{ importMeta.uploadHint }} <p class="ant-upload-hint">
</p> {{ importMeta.uploadHint }}
</a-upload-dragger> </p>
</div> </a-upload-dragger>
</a-tab-pane> </div>
<a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false"> </a-tab-pane>
<template #tab> <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
<span class="flex items-center gap-2"> <template #tab>
<MdiCodeJSONIcon /> <span class="flex items-center gap-2">
Json Editor <MdiCodeJSONIcon />
</span> Json Editor
</template> </span>
<div class="pb-3 pt-3"> </template>
<MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" /> <div class="pb-3 pt-3">
</div> <MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
</a-tab-pane> </div>
<a-tab-pane v-else key="urlTab" :closable="false"> </a-tab-pane>
<template #tab> <a-tab-pane v-else key="urlTab" :closable="false">
<span class="flex items-center gap-2"> <template #tab>
<MdiLinkVariantIcon /> <span class="flex items-center gap-2">
Url <MdiLinkVariantIcon />
</span> Url
</template> </span>
<div class="pr-10 pt-5"> </template>
<a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0"> <div class="pr-10 pt-5">
<a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url"> <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
<a-input v-model:value="importState.url" size="large" /> <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
</a-form-item> <a-input v-model:value="importState.url" size="large" />
</a-form> </a-form-item>
</div> </a-form>
</a-tab-pane> </div>
</a-tabs> </a-tab-pane>
<div v-if="!templateEditorModal"> </a-tabs>
</div>
<div v-if="!templateEditorModal" class="ml-5 mr-5">
<a-divider /> <a-divider />
<div class="mb-4"> <div class="mb-4">
<span class="prose-xl font-bold">Advanced Settings</span> <span class="prose-xl font-bold">Advanced Settings</span>

Write Preview
Loading…
Cancel
Save