feat(gui-v2): add store for column create, bind properties

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · b707641c50
6 changed files with 100 additions and 46 deletions
--- a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '~/composables/useColumnCreateStore'
 import useProject from '~/composables/useProject'

 const { sqlUi } = useProject()
@ -8,30 +9,44 @@ const newColumn = reactive({ uidt: UITypes.SingleLineText })
 const idType = null

 const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColumn))
+
+const { formState, validateInfos, setAdditionalValidations } = useColumnCreateStoreOrThrow()
+
+// set additional validations
+setAdditionalValidations({})
+
+// to avoid type error with checkbox
+formState.value.nn = !!formState.value.nn
+formState.value.pk = !!formState.value.pk
+formState.value.un = !!formState.value.un
+formState.value.ai = !!formState.value.ai
+formState.value.au = !!formState.value.au
+
 </script>

 <template>
  <div class="p-4 border-[2px] radius-1 border-grey w-full">
+
    <div class="flex justify-space-between">
-      <a-form-item label="NN" :label-col="2">
-        <a-checkbox size="small" class="nc-column-name-input" />
+      <a-form-item label="NN">
+        <a-checkbox v-model:checked="formState.nn" size="small" class="nc-column-name-input" />
      </a-form-item>
      <a-form-item label="PK">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.pk" size="small" class="nc-column-name-input" />
      </a-form-item>
      <a-form-item label="AI">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.ai" size="small" class="nc-column-name-input" />
      </a-form-item>
      <a-form-item label="UN">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-name-input" />
      </a-form-item>
      <a-form-item label="AU">
-        <a-checkbox size="small" class="nc-column-name-input" />
+        <a-checkbox v-model:checked="formState.au" size="small" class="nc-column-name-input" />
      </a-form-item>
    </div>
-    <a-form-item :label="$t('labels.databaseType')">
-      <a-select size="small">
-        <a-select-option v-for="type in dataTypes" :key="type" :value="type">
+    <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
+      <a-select size="small" v-model:value="formState.dt">
+        <a-select-option v-for="type in dataTypes" :key="type"  :value="type">
          {{ type }}
        </a-select-option>
      </a-select>
@ -40,13 +55,13 @@ const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColum
      :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
      :label="$t('labels.lengthValue')"
    >
-      <a-input size="small" />
+      <a-input v-model="newColumn.dtxp" size="small" />
    </a-form-item>
    <a-form-item v-if="sqlUi.showScale(newColumn)" label="Scale">
-      <a-input size="small" />
+      <a-input v-model="newColumn.dtxs" size="small" />
    </a-form-item>
    <a-form-item :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)" :label="$t('placeholder.defaultValue')">
-      <a-textarea size="small" auto-size />
+      <a-textarea v-model="newColumn.cdf" size="small" auto-size />
    </a-form-item>
  </div>
 </template>
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { Form } from 'ant-design-vue'
-import type { ColumnType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
+import {
+  useColumnCreateStoreOrThrow,
+} from '~/composables/useColumnCreateStore'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'

-const useForm = Form.useForm
-
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)

+const { formState, resetFields, validate, validateInfos } = useColumnCreateStoreOrThrow()
+
 // todo: make as a prop
 const editColumn = null

@ -29,40 +29,16 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
      : []),
  ]
 })
-
-const formState = $ref<Partial<ColumnType>>({
-  title: 'title',
-  uidt: UITypes.SingleLineText,
-})
-
-const validators = computed(() => {
-  return {
-    column_name: [
-      {
-        required: true,
-        message: 'Column name is required',
-      },
-    ],
-    uidt: [
-      {
-        required: true,
-        message: 'UI Datatype is required',
-      },
-    ],
-  }
-})
-
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
 </script>

 <template>
-  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4" @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-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" />
      </a-form-item>
-      <a-form-item v-model:value="formState.uidt" :label="$t('labels.columnType')">
-        <a-select size="small" class="nc-column-name-input">
+      <a-form-item  :label="$t('labels.columnType')">
+        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input">
          <a-select-option v-for="opt in uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
            <div class="flex gap-1 align-center text-xs">
              <component :is="opt.icon" class="text-grey" />
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@ -1,10 +1,14 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj } from '../../context'
+import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'

 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
 provide(ColumnInj, column)

+// instantiate column update store
+useProvideColumnCreateStore(column)
+
 /*
 import { UITypes } from 'nocodb-sdk'
 import cell from '@/components/project/spreadsheet/mixins/cell'
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/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']">
    <span />
    <template #overlay>
-      <SmartsheetColumnEdit @click.stop />
+      <SmartsheetColumnEditOrAdd @click.stop />
    </template>
  </a-dropdown>
  <a-dropdown :trigger="['hover']">
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
+import { useProvideColumnCreateStore } from '~/composables/useColumnCreateStore'
 import useGridViewColumnWidth from '~/composables/useGridViewColumnWidth'
 import {
  ActiveViewInj,
@ -74,6 +75,9 @@ const onXcResizing = (cn: string, event: any) => {
 defineExpose({
  loadData,
 })
+
+// instantiate column create store
+useProvideColumnCreateStore()
 </script>

 <template>
@ -102,7 +106,7 @@ defineExpose({
                  <MdiPlusIcon class="text-sm" />
                </div>
                <template #overlay>
-                  <SmartsheetColumnEdit @click.stop />
+                  <SmartsheetColumnEditOrAdd @click.stop />
                </template>
              </a-dropdown>
            </th>
@ -237,6 +241,7 @@ defineExpose({
    position: relative;
    padding: 0 5px !important;
    min-width: 200px;
+
    & > * {
      @apply flex align-center h-auto;
    }
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@ -0,0 +1,54 @@
+import { createInjectionState } from '@vueuse/core'
+import { Form } from 'ant-design-vue'
+import type { ColumnType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { computed } from '#imports'
+
+const useForm = Form.useForm
+
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((column?: ColumnType) => {
+  // state
+  // todo: give proper type
+  const formState = ref<Partial<ColumnType & Record<string, any>>>({
+    title: 'title',
+    uidt: UITypes.SingleLineText,
+    ...(column || {}),
+  })
+
+  const additionalValidations = ref<Record<string, any>>({})
+
+  const validators = computed(() => {
+    return {
+      column_name: [
+        {
+          required: true,
+          message: 'Column name is required',
+        },
+      ],
+      uidt: [
+        {
+          required: true,
+          message: 'UI Datatype is required',
+        },
+      ],
+      ...(additionalValidations?.value || {}),
+    }
+  })
+
+  // actions
+  const setAdditionalValidations = (validations: Record<string, any>) => {
+    additionalValidations.value = validations
+  }
+
+  const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
+  return { formState, resetFields, validate, validateInfos, setAdditionalValidations }
+})
+
+export { useProvideColumnCreateStore, useColumnCreateStore }
+
+export function useColumnCreateStoreOrThrow() {
+  const columnCreateStore = useColumnCreateStore()
+  if (columnCreateStore == null) throw new Error('Please call `useColumnCreateStore` on the appropriate parent component')
+  return columnCreateStore
+}