Browse Source

feat(gui-v2): close create column dialog on cancel

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2857/head
Pranav C 2 years ago
parent
commit
905c154ca1
  1. 7
      packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
  2. 10
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet-header/Menu.vue
  4. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  5. 2
      packages/nc-gui-v2/composables/useColumn.ts
  6. 11
      packages/nc-gui-v2/composables/useColumnCreateStore.ts

7
packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue

@ -77,12 +77,7 @@ formState.value.au = !!formState.value.au
/> />
</a-form-item> </a-form-item>
<a-form-item v-if="sqlUi.showScale(formState)" label="Scale"> <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
<a-input <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" />
v-model="formState.dtxs"
:disabled="!sqlUi.columnEditable(formState)"
size="small"
@input="onAlter"
/>
</a-form-item> </a-form-item>
<a-form-item :label="$t('placeholder.defaultValue')"> <a-form-item :label="$t('placeholder.defaultValue')">
<a-textarea <a-textarea

10
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@ -6,6 +6,7 @@ import { uiTypes } from '~/utils/columnUtils'
import MdiPlusIcon from '~icons/mdi/plus-circle-outline' import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
import MdiMinusIcon from '~icons/mdi/minus-circle-outline' import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
const emit = defineEmits(['cancel'])
const meta = inject(MetaInj) const meta = inject(MetaInj)
const advancedOptions = ref(false) const advancedOptions = ref(false)
@ -33,12 +34,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
<div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop> <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
<a-form v-model="formState" layout="vertical"> <a-form v-model="formState" layout="vertical">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name"> <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
<a-input <a-input v-model:value="formState.column_name" size="small" class="nc-column-name-input" @input="onAlter(8)" />
v-model:value="formState.column_name"
size="small"
class="nc-column-name-input"
@input="onAlter(8)"
/>
</a-form-item> </a-form-item>
<a-form-item :label="$t('labels.columnType')"> <a-form-item :label="$t('labels.columnType')">
<a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange"> <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
@ -65,7 +61,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
</div> </div>
<div class="flex justify-end gap-1 mt-4"> <div class="flex justify-end gap-1 mt-4">
<a-button html-type="button" size="small"> <a-button html-type="button" size="small" @click="emit('cancel')">
<!-- Cancel --> <!-- Cancel -->
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a-button> </a-button>

2
packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@ -11,7 +11,7 @@ const editColumnDropdown = $ref(false)
<a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']"> <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']">
<span /> <span />
<template #overlay> <template #overlay>
<SmartsheetColumnEditOrAdd @click.stop /> <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
</template> </template>
</a-dropdown> </a-dropdown>
<a-dropdown :trigger="['hover']"> <a-dropdown :trigger="['hover']">

2
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -106,7 +106,7 @@ useProvideColumnCreateStore()
<MdiPlusIcon class="text-sm" /> <MdiPlusIcon class="text-sm" />
</div> </div>
<template #overlay> <template #overlay>
<SmartsheetColumnEditOrAdd @click.stop /> <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
</template> </template>
</a-dropdown> </a-dropdown>
</th> </th>

2
packages/nc-gui-v2/composables/useColumn.ts

@ -2,8 +2,6 @@ import type { ColumnType } from 'nocodb-sdk'
import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk' import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
import { useProject } from '#imports' import { useProject } from '#imports'
export default (column: ColumnType) => { export default (column: ColumnType) => {
const { project } = useProject() const { project } = useProject()

11
packages/nc-gui-v2/composables/useColumnCreateStore.ts

@ -133,8 +133,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
const onAlter = (val = 2, cdf = false) => { const onAlter = (val = 2, cdf = false) => {
formState.value.altered = formState.value.altered || val formState.value.altered = formState.value.altered || val
if (cdf) if (cdf) formState.value.cdf = formState.value.cdf || null
formState.value.cdf = formState.value.cdf || null }
const addOrUpdate = () => {
// todo
console.log('To be done')
} }
const { resetFields, validate, validateInfos } = useForm(formState, validators) const { resetFields, validate, validateInfos } = useForm(formState, validators)
@ -148,7 +152,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
onUidtOrIdTypeChange, onUidtOrIdTypeChange,
sqlUi, sqlUi,
onDataTypeChange, onDataTypeChange,
onAlter onAlter,
addOrUpdate,
} }
}) })

Loading…
Cancel
Save