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. 18
      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. 46
      packages/nc-gui-v2/composables/useColumnCreateStore.ts

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

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

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

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

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

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

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

@ -1,9 +1,13 @@
import { createInjectionState } from '@vueuse/core' import { createInjectionState } from '@vueuse/core'
import { Form } from 'ant-design-vue' 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 { UITypes } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { useToast } from 'vue-toastification'
import { computed } from '#imports' import { computed } from '#imports'
import { useNuxtApp } from '#app'
import useColumn from '~/composables/useColumn' import useColumn from '~/composables/useColumn'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
const useForm = Form.useForm const useForm = Form.useForm
@ -16,8 +20,12 @@ const useForm = Form.useForm
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber] 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 { sqlUi } = useProject()
const { $api } = useNuxtApp()
const toast = useToast()
const idType = null const idType = null
// state // state
@ -48,6 +56,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
} }
}) })
const { resetFields, validate, validateInfos } = useForm(formState, validators)
// actions // actions
const setAdditionalValidations = (validations: Record<string, any>) => { const setAdditionalValidations = (validations: Record<string, any>) => {
additionalValidations.value = validations additionalValidations.value = validations
@ -136,12 +146,34 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
if (cdf) formState.value.cdf = formState.value.cdf || null if (cdf) formState.value.cdf = formState.value.cdf || null
} }
const addOrUpdate = () => { const addOrUpdate = async (onSuccess: () => {}) => {
// todo if (!(await validate())) return
console.log('To be done')
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)
const { resetFields, validate, validateInfos } = useForm(formState, validators) toast.success('Column created')
}
onSuccess()
} catch (e) {
toast.error(await extractSdkResponseErrorMsg(e))
}
}
return { return {
formState, formState,
@ -157,7 +189,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
} }
}) })
export { useProvideColumnCreateStore, useColumnCreateStore } export { useProvideColumnCreateStore }
export function useColumnCreateStoreOrThrow() { export function useColumnCreateStoreOrThrow() {
const columnCreateStore = useColumnCreateStore() const columnCreateStore = useColumnCreateStore()

Loading…
Cancel
Save