Browse Source

fix: disable closing create source modal while creating

pull/6630/head
mertmit 1 year ago
parent
commit
18208cc8e2
  1. 6
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  2. 48
      packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
  3. 6
      packages/nc-gui/components/general/Modal.vue
  4. 6
      packages/nc-gui/components/project/AllTables.vue
  5. 11
      packages/nc-gui/components/workspace/View.vue

6
packages/nc-gui/components/dashboard/settings/DataSources.vue

@ -547,15 +547,11 @@ const isEditBaseModalOpen = computed({
</Draggable> </Draggable>
</div> </div>
</div> </div>
<GeneralModal v-model:visible="isNewBaseModalOpen" closable :mask-closable="false" size="medium">
<div class="py-6 px-8">
<LazyDashboardSettingsDataSourcesCreateBase <LazyDashboardSettingsDataSourcesCreateBase
v-model:open="isNewBaseModalOpen"
:connection-type="clientType" :connection-type="clientType"
@source-created="loadBases(true)" @source-created="loadBases(true)"
@close="isNewBaseModalOpen = false"
/> />
</div>
</GeneralModal>
<GeneralModal v-model:visible="isErdModalOpen" size="large"> <GeneralModal v-model:visible="isErdModalOpen" size="large">
<div class="h-[80vh]"> <div class="h-[80vh]">
<LazyDashboardSettingsErd :source-id="activeBaseId" /> <LazyDashboardSettingsErd :source-id="activeBaseId" />

48
packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@ -27,9 +27,11 @@ import {
watch, watch,
} from '#imports' } from '#imports'
const props = defineProps<{ connectionType?: ClientType }>() const props = defineProps<{ open: boolean; connectionType?: ClientType }>()
const emit = defineEmits(['sourceCreated', 'close']) const emit = defineEmits(['update:open', 'sourceCreated'])
const vOpen = useVModel(props, 'open', emit)
const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL) const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL)
@ -284,7 +286,7 @@ const createSource = async () => {
} }
emit('sourceCreated') emit('sourceCreated')
emit('close') vOpen.value = false
creatingSource.value = false creatingSource.value = false
} else if (status === JobStatus.FAILED) { } else if (status === JobStatus.FAILED) {
message.error('Failed to create base') message.error('Failed to create base')
@ -405,9 +407,21 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const toggleModal = (val: boolean) => {
vOpen.value = val
}
</script> </script>
<template> <template>
<GeneralModal
:visible="vOpen"
:closable="!creatingSource"
:keyboard="!creatingSource"
:mask-closable="false"
size="medium"
@update:visible="toggleModal"
>
<div class="py-6 px-8">
<div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full"> <div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full">
<h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2"> <h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2">
{{ $t('title.newBase') }} {{ $t('title.newBase') }}
@ -415,7 +429,14 @@ watch(
<span class="flex-grow"></span> <span class="flex-grow"></span>
</h1> </h1>
<a-form ref="form" :model="formState" name="external-base-create-form" layout="horizontal" no-style :label-col="{ span: 8 }"> <a-form
ref="form"
:model="formState"
name="external-base-create-form"
layout="horizontal"
no-style
:label-col="{ span: 8 }"
>
<div <div
class="nc-scrollbar-md" class="nc-scrollbar-md"
:style="{ :style="{
@ -451,7 +472,10 @@ watch(
<template v-else> <template v-else>
<!-- Host Address --> <!-- Host Address -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> <a-input
v-model:value="(formState.dataSource.connection as DefaultConnection).host"
class="nc-extdb-host-address"
/>
</a-form-item> </a-form-item>
<!-- Port Number --> <!-- Port Number -->
@ -506,7 +530,11 @@ watch(
<span>{{ $t('title.advancedParameters') }}</span> <span>{{ $t('title.advancedParameters') }}</span>
</template> </template>
<a-form-item label="SSL mode"> <a-form-item label="SSL mode">
<a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange"> <a-select
v-model:value="formState.sslUse"
dropdown-class-name="nc-dropdown-ssl-mode"
@select="onSSLModeChange"
>
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option> <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -556,7 +584,11 @@ watch(
<a-divider /> <a-divider />
<!-- Extra connection parameters --> <!-- Extra connection parameters -->
<a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters"> <a-form-item
class="mb-2"
:label="$t('labels.extraConnectionParameters')"
v-bind="validateInfos.extraParameters"
>
<a-card> <a-card>
<div v-for="(item, index) of formState.extraParameters" :key="index"> <div v-for="(item, index) of formState.extraParameters" :key="index">
<div class="flex py-1 items-center gap-1"> <div class="flex py-1 items-center gap-1">
@ -662,6 +694,8 @@ watch(
<a-input v-model:value="importURL" /> <a-input v-model:value="importURL" />
</a-modal> </a-modal>
</div> </div>
</div>
</GeneralModal>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

6
packages/nc-gui/components/general/Modal.vue

@ -7,18 +7,21 @@ const props = withDefaults(
destroyOnClose?: boolean destroyOnClose?: boolean
maskClosable?: boolean maskClosable?: boolean
closable?: boolean closable?: boolean
keyboard?: boolean
}>(), }>(),
{ {
size: 'medium', size: 'medium',
destroyOnClose: true, destroyOnClose: true,
maskClosable: true, maskClosable: true,
closable: false, closable: false,
keyboard: true,
}, },
) )
const emits = defineEmits(['update:visible']) const emits = defineEmits(['update:visible'])
const { width: propWidth, destroyOnClose, closable, maskClosable } = props const { width: propWidth, destroyOnClose } = props
const { maskClosable, closable, keyboard } = toRefs(props)
const width = computed(() => { const width = computed(() => {
if (propWidth) { if (propWidth) {
@ -65,6 +68,7 @@ const visible = useVModel(props, 'visible', emits)
:class="{ active: visible }" :class="{ active: visible }"
:width="width" :width="width"
:closable="closable" :closable="closable"
:keyboard="keyboard"
wrap-class-name="nc-modal-wrapper" wrap-class-name="nc-modal-wrapper"
:footer="null" :footer="null"
:destroy-on-close="destroyOnClose" :destroy-on-close="destroyOnClose"

6
packages/nc-gui/components/project/AllTables.vue

@ -158,11 +158,7 @@ const onCreateBaseClick = () => {
</div> </div>
</div> </div>
<ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" /> <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" />
<GeneralModal v-model:visible="isNewBaseModalOpen" size="medium"> <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" />
<div class="py-6 px-8">
<LazyDashboardSettingsDataSourcesCreateBase @close="isNewBaseModalOpen = false" />
</div>
</GeneralModal>
</div> </div>
</template> </template>

11
packages/nc-gui/components/workspace/View.vue

@ -69,17 +69,6 @@ onMounted(() => {
</a-tab-pane> </a-tab-pane>
</template> </template>
<template v-if="isUIAllowed('workspaceBilling')">
<a-tab-pane key="billing" class="w-full">
<template #tab>
<div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
<MaterialSymbolsCreditCardOutline />
Billing
</div>
</template>
<WorkspaceBilling />
</a-tab-pane>
</template>
<template v-if="isUIAllowed('workspaceManage')"> <template v-if="isUIAllowed('workspaceManage')">
<a-tab-pane key="settings" class="w-full"> <a-tab-pane key="settings" class="w-full">
<template #tab> <template #tab>

Loading…
Cancel
Save