Merge pull request #3310 from nocodb/fix/form-view-column-syncing-issues

vue3: Fixed form view column syncing issue

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

@@ -2,7 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean; hideMenu?: boolean }>()
+const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
 
 const hideMenu = toRef(props, 'hideMenu')
 

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -15,7 +15,7 @@ import {
   useVirtualCell,
 } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean }>()
+const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean | number }>()
 
 const column = toRef(props, 'column')
 

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -48,12 +48,17 @@ const view = inject(ActiveViewInj)
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => {
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+
+reloadEventHook.on(async () => {
   await loadFormView()
   setFormData()
 })
 
-const { syncLTARRefs } = useProvideSmartsheetRowStore(
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => reloadEventHook.trigger())
+
+const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
   meta,
   ref({
     row: formState,
@@ -144,8 +149,9 @@ function isDbRequired(column: Record<string, any>) {
   return isRequired
 }
 
+/** Block user from drag n drop required column to hidden fields */
 function onMoveCallback(event: any) {
-  if (shouldSkipColumn(event.draggedContext.element)) {
+  if (event.from !== event.to && shouldSkipColumn(event.draggedContext.element)) {
     return false
   }
 }
@@ -334,11 +340,16 @@ watch(submitted, (v) => {
   }
 })
 
-function handleMouseUp(col: Record<string, any>) {
+function handleMouseUp(col: Record<string, any>, hiddenColIndex: number) {
   if (!moved.value) {
     const index = localColumns.value.length
     col.order = (index ? localColumns.value[index - 1].order : 0) + 1
     col.show = true
+
+    /** remove column from hiddenColumns and add to localColumns */
+    localColumns.value.push(col)
+    hiddenColumns.value.splice(hiddenColIndex, 1)
+
     saveOrUpdate(col, index)
   }
 }
@@ -415,13 +426,13 @@ onMounted(async () => {
         @start="drag = true"
         @end="drag = false"
       >
-        <template #item="{ element }">
+        <template #item="{ element, index }">
           <a-card
             size="small"
             class="m-0 p-0 cursor-pointer item mb-2"
             @mousedown="moved = false"
             @mousemove="moved = false"
-            @mouseup="handleMouseUp(element)"
+            @mouseup="handleMouseUp(element, index)"
           >
             <div class="flex">
               <div class="flex flex-row flex-1">
@@ -625,6 +636,7 @@ onMounted(async () => {
                   >
                     <SmartsheetVirtualCell
                       v-model="formState[element.title]"
+                      :row="row"
                       class="nc-input"
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -135,7 +135,12 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
       } else if (view?.value?.id) {
-        if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view.value.id, field)) as any
+        const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any
+
+        /** update the field in fields if defined */
+        if (fields.value) fields.value[index] = insertedField
+
+        return insertedField
       }
     }
 

packages/nc-gui-v2/pages/[projectType]/form/[viewId]/index.vue

@@ -32,11 +32,9 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
-  <div
-    class="nc-form-view md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
-  >
+  <div class="nc-form-view md:bg-primary bg-opacity-5 min-h-full flex flex-col nc-form-signin py-15">
     <div
-      class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
     >
       <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 

packages/nocodb/src/lib/meta/api/swagger/helpers/getSwaggerJSON.ts

@@ -1,3 +1,5 @@
+import FormViewColumn from '../../../../models/FormViewColumn';
+import GalleryViewColumn from '../../../../models/GalleryViewColumn';
 import Noco from '../../../../Noco';
 import Model from '../../../../models/Model';
 import swaggerBase from './swagger-base.json';
@@ -62,5 +64,5 @@ export default async function getSwaggerJSON(
 
 export interface SwaggerView {
   view: View;
-  columns: Array<GridViewColumn>;
+  columns: Array<GridViewColumn | GalleryViewColumn | FormViewColumn>;
 }

packages/nocodb/src/lib/models/View.ts

@@ -468,7 +468,7 @@ export default class View implements ViewType {
   static async getColumns(
     viewId: string,
     ncMeta = Noco.ncMeta
-  ): Promise<Array<GridViewColumn | any>> {
+  ): Promise<Array<GridViewColumn | FormViewColumn | GalleryViewColumn>> {
     let columns: Array<GridViewColumn | any> = [];
     const view = await this.get(viewId, ncMeta);
 
@@ -497,8 +497,8 @@ export default class View implements ViewType {
     viewId: string,
     colId: string,
     colData: {
-      order: number;
-      show: boolean;
+      order?: number;
+      show?: boolean;
     },
     ncMeta = Noco.ncMeta
   ): Promise<Array<GridViewColumn | any>> {
@@ -524,10 +524,7 @@ export default class View implements ViewType {
         cacheScope = CacheScope.FORM_VIEW_COLUMN;
         break;
     }
-    const updateObj = {
-      order: colData.order,
-      show: colData.show,
-    };
+    const updateObj = extractProps(colData, ['order', 'show']);
     // get existing cache
     const key = `${cacheScope}:${colId}`;
     let o = await NocoCache.get(key, CacheGetType.TYPE_OBJECT);
@@ -886,6 +883,15 @@ export default class View implements ViewType {
     const view = await this.get(viewId);
     const table = this.extractViewColumnsTableName(view);
     const scope = this.extractViewColumnsTableNameScope(view);
+
+    const columns = await view
+      .getModel(ncMeta)
+      .then((meta) => meta.getColumns());
+    const viewColumns = await this.getColumns(viewId, ncMeta);
+    const availableColumnsInView = viewColumns.map(
+      (column) => column.fk_column_id
+    );
+
     // get existing cache
     const dataList = await NocoCache.getList(scope, [viewId]);
     if (dataList?.length) {
@@ -898,24 +904,52 @@ export default class View implements ViewType {
         }
       }
     }
-    return await ncMeta.metaUpdate(
-      null,
-      null,
-      table,
-      { show: true },
-      {
-        fk_view_id: viewId,
-      },
-      ignoreColdIds?.length
-        ? {
-            _not: {
-              fk_column_id: {
-                in: ignoreColdIds,
-              },
-            },
-          }
-        : null
-    );
+
+    // insert or update view column
+    for (const col of columns) {
+      if (ignoreColdIds?.includes(col.id)) continue;
+
+      const colIndex = availableColumnsInView.indexOf(col.id);
+      if (colIndex > -1) {
+        await this.updateColumn(
+          viewId,
+          viewColumns[colIndex].id,
+          { show: true },
+          ncMeta
+        );
+      } else {
+        await this.insertColumn(
+          {
+            view_id: viewId,
+            order: await ncMeta.metaGetNextOrder(table, {
+              fk_view_id: viewId,
+            }),
+            show: true,
+            fk_column_id: col.id,
+          },
+          ncMeta
+        );
+      }
+
+      // return await ncMeta.metaUpdate(
+      //   null,
+      //   null,
+      //   table,
+      //   { show: true },
+      //   {
+      //     fk_view_id: viewId,
+      //   },
+      //   ignoreColdIds?.length
+      //     ? {
+      //         _not: {
+      //           fk_column_id: {
+      //             in: ignoreColdIds,
+      //           },
+      //         },
+      //       }
+      //     : null
+      // );
+    }
   }
 
   static async hideAllColumns(