Browse Source

feat(gui-v2): integrate with save or update api

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2857/head
Pranav C 2 years ago
parent
commit
346d99237e
  1. 36
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  2. 9
      packages/nc-gui-v2/components/smartsheet-header/Cell.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  4. 48
      packages/nc-gui-v2/composables/useColumnCreateStore.ts

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

@ -1,6 +1,8 @@
<script lang="ts" setup>
import { useMeta } from '#head'
import { computed, inject } from '#imports'
import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
import useMetas from '~/composables/useMetas'
import { MetaInj } from '~/context'
import { uiTypes } from '~/utils/columnUtils'
import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
@ -9,8 +11,10 @@ import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
const emit = defineEmits(['cancel'])
const meta = inject(MetaInj)
const advancedOptions = ref(false)
const { getMeta } = useMetas()
const { formState, resetFields, validate, validateInfos, onUidtOrIdTypeChange, onAlter } = useColumnCreateStoreOrThrow()
const { formState, resetFields, validate, validateInfos, onUidtOrIdTypeChange, onAlter, addOrUpdate } =
useColumnCreateStoreOrThrow()
// todo: make as a prop
const editColumn = null
@ -28,11 +32,16 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
: []),
]
})
const reloadMeta = () => {
emit('cancel')
getMeta(meta?.value.id as string, true)
}
</script>
<template>
<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" name="column-create-or-edit" layout="vertical">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
<a-input v-model:value="formState.column_name" size="small" class="nc-column-name-input" @input="onAlter(8)" />
</a-form-item>
@ -59,17 +68,18 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
<div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
<SmartsheetColumnAdvancedOptions />
</div>
<div class="flex justify-end gap-1 mt-4">
<a-button html-type="button" size="small" @click="emit('cancel')">
<!-- Cancel -->
{{ $t('general.cancel') }}
</a-button>
<a-button html-type="submit" type="primary" size="small">
<!-- Save -->
{{ $t('general.save') }}
</a-button>
</div>
<a-form-item>
<div class="flex justify-end gap-1 mt-4">
<a-button html-type="button" size="small" @click="emit('cancel')">
<!-- Cancel -->
{{ $t('general.cancel') }}
</a-button>
<a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta)">
<!-- Save -->
{{ $t('general.save') }}
</a-button>
</div>
</a-form-item>
</a-form>
</div>
</template>

9
packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@ -1,13 +1,16 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { ColumnInj } from '../../context'
import type { ColumnType, TableType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { inject } from 'vue'
import { ColumnInj, MetaInj } from '../../context'
import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'
const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
provide(ColumnInj, column)
const meta = inject(MetaInj)
// instantiate column update store
useProvideColumnCreateStore(column)
useProvideColumnCreateStore(meta as Ref<TableType>, column)
/*
import { UITypes } from 'nocodb-sdk'

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

@ -77,7 +77,9 @@ defineExpose({
})
// instantiate column create store
useProvideColumnCreateStore()
// watchEffect(() => {
if (meta) useProvideColumnCreateStore(meta)
// })
</script>
<template>
@ -106,7 +108,7 @@ useProvideColumnCreateStore()
<MdiPlusIcon class="text-sm" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
</template>
</a-dropdown>
</th>

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

@ -1,9 +1,13 @@
import { createInjectionState } from '@vueuse/core'
import { Form } from 'ant-design-vue'
import type { ColumnType } from 'nocodb-sdk'
import type { ColumnType, TableType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { useToast } from 'vue-toastification'
import { computed } from '#imports'
import { useNuxtApp } from '#app'
import useColumn from '~/composables/useColumn'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
const useForm = Form.useForm
@ -16,8 +20,12 @@ const useForm = Form.useForm
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((column?: ColumnType) => {
const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
const { sqlUi } = useProject()
const { $api } = useNuxtApp()
const toast = useToast()
const idType = null
// state
@ -48,6 +56,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
}
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
// actions
const setAdditionalValidations = (validations: Record<string, any>) => {
additionalValidations.value = validations
@ -136,12 +146,34 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
if (cdf) formState.value.cdf = formState.value.cdf || null
}
const addOrUpdate = () => {
// todo
console.log('To be done')
}
const addOrUpdate = async (onSuccess: () => {}) => {
if (!(await validate())) return
const { resetFields, validate, validateInfos } = useForm(formState, validators)
formState.value.table_name = meta.value.table_name
formState.value.title = formState.value.column_name
try {
if (column) {
await $api.dbTableColumn.update(column.id as string, formState.value)
toast.success('Column updated')
} else {
// todo : set additional meta for auto generated string id
if (formState.value.uidt === UITypes.ID) {
// based on id column type set autogenerated meta prop
// if (isAutoGenId) {
// this.newColumn.meta = {
// ag: 'nc',
// };
// }
}
await $api.dbTableColumn.create(meta.value.id as string, formState.value)
toast.success('Column created')
}
onSuccess()
} catch (e) {
toast.error(await extractSdkResponseErrorMsg(e))
}
}
return {
formState,
@ -157,7 +189,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
}
})
export { useProvideColumnCreateStore, useColumnCreateStore }
export { useProvideColumnCreateStore }
export function useColumnCreateStoreOrThrow() {
const columnCreateStore = useColumnCreateStore()

Loading…
Cancel
Save