Browse Source

fix(nc-gui): remove injection usage in callback

# What's changed?

* update EditOrAdd form style
* remove injection use on callbacks
    * fixes errors thrown while changing column type
* use `unref`
pull/3641/head
braks 2 years ago
parent
commit
16b238fd8b
  1. 33
      packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
  2. 17
      packages/nc-gui/composables/useColumnCreateStore.ts
  3. 4
      packages/nc-gui/composables/useSmartsheetRowStore.ts

33
packages/nc-gui/components/smartsheet-column/EditOrAdd.vue

@ -97,11 +97,11 @@ onMounted(() => {
<template>
<div
class="w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border"
class="w-[400px] bg-gray-50 shadow p-4 overflow-auto border"
:class="{ '!w-[600px]': formState.uidt === UITypes.Formula }"
@click.stop
>
<a-form v-if="formState" v-model="formState" name="column-create-or-edit" layout="vertical">
<a-form v-if="formState" v-model="formState" no-style name="column-create-or-edit" layout="vertical">
<div class="flex flex-col gap-2">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
<a-input ref="antInput" v-model:value="formState.title" class="nc-column-name-input" @input="onAlter(8)" />
@ -138,6 +138,7 @@ onMounted(() => {
v-model:value="formState"
/>
</div>
<div
v-if="!isVirtualCol(formState.uidt)"
class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex items-center gap-1 justify-end"
@ -147,18 +148,22 @@ onMounted(() => {
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</div>
<div class="overflow-hidden" :class="advancedOptions ? 'h-min mb-2' : 'h-0'">
<a-checkbox
v-if="formState.meta && columnToValidate.includes(formState.uidt)"
v-model:checked="formState.meta.validate"
class="ml-1 mb-1"
>
<span class="text-[10px] text-gray-600">
{{ `Accept only valid ${formState.uidt}` }}
</span>
</a-checkbox>
<SmartsheetColumnAdvancedOptions v-model:value="formState" />
</div>
<Transition name="layout" mode="out-in">
<div v-if="advancedOptions" class="overflow-hidden">
<a-checkbox
v-if="formState.meta && columnToValidate.includes(formState.uidt)"
v-model:checked="formState.meta.validate"
class="ml-1 mb-1"
>
<span class="text-[10px] text-gray-600">
{{ `Accept only valid ${formState.uidt}` }}
</span>
</a-checkbox>
<SmartsheetColumnAdvancedOptions v-model:value="formState" />
</div>
</Transition>
<a-form-item>
<div class="flex justify-end gap-1 mt-4">
<a-button html-type="button" @click="emit('cancel')">

17
packages/nc-gui/composables/useColumnCreateStore.ts

@ -82,8 +82,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
const { resetFields, validate, validateInfos } = useForm(formState, validators)
const onUidtOrIdTypeChange = () => {
const { isCurrency } = useColumn(ref(formState.value as ColumnType))
const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
formState.value = {
...formState.value,
@ -111,14 +109,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
}
}
if (isCurrency.value) {
if (column.value?.uidt === UITypes.Currency) {
formState.value.dtxp = column.value.dtxp
formState.value.dtxs = column.value.dtxs
} else {
formState.value.dtxp = 19
formState.value.dtxs = 2
}
if (column.value?.uidt === UITypes.Currency) {
formState.value.dtxp = column.value.dtxp
formState.value.dtxs = column.value.dtxs
} else {
formState.value.dtxp = 19
formState.value.dtxs = 2
}
formState.value.altered = formState.value.altered || 2
@ -167,7 +163,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
const addOrUpdate = async (onSuccess: () => void) => {
try {
console.log(formState, validators)
if (!(await validate())) return
} catch (e) {
console.log(e)

4
packages/nc-gui/composables/useSmartsheetRowStore.ts

@ -117,9 +117,9 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
NOCO,
project.value?.id as string,
meta.value?.title as string,
extractPkFromRow(ref(row).value?.row, meta.value?.columns as ColumnType[]),
extractPkFromRow(unref(row)?.row, meta.value?.columns as ColumnType[]),
)
Object.assign(ref(row).value, {
Object.assign(unref(row), {
row: record,
oldRow: { ...record },
rowMeta: {},

Loading…
Cancel
Save