From 2446b04de157e6d504d7a9b128b983204b1db567 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 01:37:59 +0530
Subject: [PATCH 01/27] feat(gui-v2): add shared form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue | 170 ++++++++++++------
 packages/nc-gui-v2/composables/index.ts       |   1 +
 .../composables/useSharedFormViewStore.ts     | 160 +++++++++++++++++
 packages/nc-gui-v2/package-lock.json          | 100 +++++++++++
 packages/nc-gui-v2/package.json               |   2 +
 .../pages/[projectType]/form/[viewId].vue     |  44 +++--
 6 files changed, 402 insertions(+), 75 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useSharedFormViewStore.ts

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 2a73cd22f5..d7171cb9f5 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { FieldsInj, MetaInj } from '#imports'
+import {  ref, useProvideSmartsheetRowStore } from '#imports'
+import { useSharedFormStoreOrThrow } from '#imports'
 
-const fields = inject(FieldsInj, ref([]))
-const meta = inject(MetaInj)
-const { sharedView } = useSharedView()
-
-const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
+const { sharedView, submitForm, v$, formState, notFound, formColumns, meta } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -15,67 +12,124 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = fields.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
-      string,
-      any
-    >
+    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,any>
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
 
-useSmartsheetStoreOrThrow()
-useProvideSmartsheetRowStore(meta, formState)
-
-const formRef = ref()
+const { state: additionalState } = useProvideSmartsheetRowStore(
+  meta,
+  ref({
+    row: formState,
+    rowMeta: { new: true },
+    oldRow: {},
+  }),
+)
 </script>
 
 <template>
-  <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
-    <div class="flex w-2/3 flex-col mt-10">
-      <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
-        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3 nc-share-form-title" :level="1">
-          {{ sharedView.view.heading }}
-        </a-typography-title>
-        <a-typography class="pl-1 text-sm nc-share-form-desc">{{ sharedView.view.subheading }}</a-typography>
-      </div>
+  <div class="bg-primary/100 !h-[100vh] overflow-auto w-100 flex flex-col">
+    <div>
+      <img src="~/assets/img/icons/512x512-trans.png" width="30" class="mx-4 mt-2" />
+    </div>
+    <div class="m-4 mt-2 bg-white rounded p-2 flex-1">
+      <a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
 
-      <a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
-        <div v-for="(field, index) in fields" :key="index" class="flex flex-col mt-4 px-10 pt-6 space-y-2">
-          <div class="flex">
-            <SmartsheetHeaderVirtualCell
-              v-if="isVirtualCol(field)"
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
-            <SmartsheetHeaderCell
-              v-else
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
+      <template v-if="submitted">
+        <div class="lex justify-center">
+          <div v-if="sharedView" style="min-width: 350px">
+            <a-alert type="success" outlined>
+              <span class="title">{{ sharedView.success_msg || 'Successfully submitted form data' }}</span>
+            </a-alert>
+            <p v-if="sharedView.show_blank_form" class="text-xs text-gray-500 text-center">
+              New form will be loaded after {{ secondsRemain }} seconds
+            </p>
+            <div v-if="sharedView.submit_another_form" class="text-center">
+              <v-btn color="primary" @click="submitted = false"> Submit Another Form</v-btn>
+            </div>
           </div>
-          <a-form-item
-            v-if="isVirtualCol(field)"
-            class="ma-0 gap-0 pa-0"
-            :class="`nc-form-field-${field.title}`"
-            :name="field.title"
-            :rules="[{ required: field.required, message: `${field.title} is required` }]"
-          >
-            <SmartsheetVirtualCell v-model="formState[field.title]" class="nc-input" :column="field" />
-          </a-form-item>
-          <a-form-item
-            v-else
-            class="ma-0 gap-0 pa-0"
-            :class="`nc-form-field-${field.title}`"
-            :name="field.title"
-            :rules="[{ required: field.required, message: `${field.title} is required` }]"
-          >
-            <SmartsheetCell v-model="formState[field.title]" class="nc-input" :column="field" :edit-enabled="true" />
-          </a-form-item>
         </div>
-      </a-form>
+      </template>
+      <div v-if="sharedView" class="">
+        <a-row class="justify-center">
+          <a-col :md="20">
+            <div>
+              <div class="h-full ma-0 rounded-b-0">
+                <div
+                  class="nc-form-wrapper pb-10 rounded shadow-xl"
+                  style="background: linear-gradient(180deg, #dbdbdb 0, #dbdbdb 200px, white 200px)"
+                >
+                  <div class="mt-10 flex items-center justify-center flex-col">
+                    <div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex">
+                      <div class="flex items-center justify-center grow h-[100px]">
+                        <img src="~/assets/img/icon.png" width="50" class="mx-4" />
+                        <span class="text-4xl font-weight-bold">NocoDB</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
+                    <h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
+                      {{ sharedView.view.heading }}
+                    </h2>
+
+                    <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
+                      {{ sharedView.view.subheading }}
+                    </div>
+                    <div class="h-100">
+                      <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">
+                        <div class="flex">
+                          <SmartsheetHeaderVirtualCell
+                            v-if="isVirtualCol(field)"
+                            :column="{ ...field, title: field.label || field.title }"
+                            :required="isRequired(field, field.required)"
+                            :hide-menu="true"
+                          />
+                          <SmartsheetHeaderCell
+                            v-else
+                            :column="{ ...field, title: field.label || field.title }"
+                            :required="isRequired(field, field.required)"
+                            :hide-menu="true"
+                          />
+                        </div>
+                        <div v-if="isVirtualCol(field)" class="mt-0">
+                          <SmartsheetVirtualCell v-model="formState[field.title]" class="mt-0 nc-input" :column="field" />
+                          <div
+                            v-if="
+                              v$.virtual?.$dirty && (!v$.virtual?.[col.title]?.required || !v$.virtual?.[col.title]?.minLength)
+                            "
+                            class="text-xs text-red-500"
+                          >
+                            Field is required.
+                          </div>
+                        </div>
+                        <div v-else class="mt-0">
+                          <SmartsheetCell
+                            v-model="formState[field.title]"
+                            class="nc-input"
+                            :column="field"
+                            :edit-enabled="true"
+                          />
+                          <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+                            <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+                              {{ error.$message }}
+                            </div>
+                          </template>
+                        </div>
+                      </div>
+
+                      <div class="text-center my-9">
+                        <a-button type="primary" size="large" @click="submitForm(formState, additionalState)"> Submit</a-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
     </div>
   </div>
 </template>
@@ -84,4 +138,8 @@ const formRef = ref()
 .nc-input {
   @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
 }
+
+.nc-form-wrapper {
+  @apply my-0 mx-auto max-w-[800px];
+}
 </style>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index b8a5c6339d..a242896d05 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -21,3 +21,4 @@ export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
 export * from './useLTARStore'
 export * from './useExpandedFormStore'
+export * from './useSharedFormViewStore'
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
new file mode 100644
index 0000000000..aab72bb898
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -0,0 +1,160 @@
+import useVuelidate from '@vuelidate/core'
+import { minLength, required } from '@vuelidate/validators'
+import { message } from 'ant-design-vue'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { extractSdkResponseErrorMsg } from '~/utils'
+
+const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() => {
+  const progress = ref(false)
+  const notFound = ref(false)
+  const showPasswordModal = ref(false)
+  const submitted = ref(false)
+  const password = ref(null)
+
+  // todo: type
+  const sharedView = ref<any>()
+  const meta = ref<TableType>()
+  const columns = ref<(ColumnType & { required?: boolean })[]>()
+
+  const { $api } = useNuxtApp()
+  const { metas, setMeta } = useMetas()
+  const formState = ref({})
+
+  const formColumns = computed(
+    () =>
+      columns?.value
+        ?.filter?.(
+        (f: Record<string, any>) =>
+          f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+      )
+        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
+        .map<ColumnType & { required: boolean }>((c: ColumnType & { required?: boolean }) => ({
+          ...c,
+          required: !!(c.required || 0),
+        })) ?? [],
+  )
+  const loadSharedView = async (viewId: string) => {
+    try {
+      // todo: swagget type correction
+      const viewMeta: any = await $api.public.sharedViewMetaGet(viewId)
+      sharedView.value = viewMeta
+      meta.value = viewMeta.model
+      columns.value = viewMeta.model.columns
+
+      setMeta(viewMeta.model)
+
+      const relatedMetas = { ...viewMeta.relatedMetas }
+      Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+    } catch (e: any) {
+      if (e.response && e.response.status === 404) {
+        notFound.value = true
+      } else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
+        showPasswordModal.value = true
+      }
+    }
+  }
+
+  const validators = computed(() => {
+    const obj: any = {
+      localState: {},
+      virtual: {},
+    }
+    for (const column of formColumns?.value ?? []) {
+      if (
+        !isVirtualCol(column) &&
+        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || (column as any).required)
+      ) {
+        obj.localState[column.title!] = { required }
+      } else if (
+        column.uidt === UITypes.LinkToAnotherRecord &&
+        column.colOptions &&
+        (column.colOptions as LinkToAnotherRecordType).type === RelationTypes.BELONGS_TO
+      ) {
+        const col = columns.value?.find((c) => c.id === (column?.colOptions as LinkToAnotherRecordType)?.fk_child_column_id)
+
+        if ((col && col.rqd && !col.cdf) || column.required) {
+          if (col) {
+            obj.virtual[column.title!] = { required }
+          }
+        }
+      } else if (isVirtualCol(column) && column.required) {
+        obj.virtual[column.title!] = {
+          minLength: minLength(1),
+          required,
+        }
+      }
+    }
+
+    console.log(obj)
+    return obj
+  })
+
+  const v$ = useVuelidate(validators, { localState: formState, virtual: {} })
+
+  const submitForm = async (formState: Record<string, any>, additionalState: Record<string, any>) => {
+    try {
+      // if (this.$v.localState.$invalid || this.$v.virtual.$invalid) {
+      //   this.$toast.error('Provide values of all required field').goAway(3000);
+      //   return;
+      // }
+      if (!(await v$.value?.$validate())) {
+        return
+      }
+
+      progress.value = true
+      const data = { ...formState, ...additionalState }
+      const attachment: Record<string, any> = {}
+
+      for (const col of metas?.value?.[sharedView?.value?.fk_model_id]?.columns ?? []) {
+        if (col.uidt === UITypes.Attachment) {
+          attachment[`_${col.title}`] = data[col.title!]
+          delete data[col.title!]
+        }
+      }
+
+      await $api.public.dataCreate(
+        sharedView?.value?.uuid,
+        {
+          data,
+          ...attachment,
+        },
+        {
+          // todo: add password support
+          // headers: { 'xc-password': password },
+        },
+      )
+
+      progress.value = false
+      await message.success(sharedView.value.success_msg || 'Saved successfully.')
+    } catch (e: any) {
+      console.log(e)
+      await message.error(await extractSdkResponseErrorMsg(e))
+    }
+    progress.value = false
+  }
+
+  return {
+    sharedView,
+    loadSharedView,
+    columns,
+    submitForm,
+    progress,
+    meta,
+    validators,
+    v$,
+    formColumns,
+    formState,
+    notFound,
+    password,
+    submitted
+  }
+}, 'expanded-form-store')
+
+export { useProvideSharedFormStore }
+
+export function useSharedFormStoreOrThrow() {
+  const sharedFormStore = useSharedFormStore()
+  if (sharedFormStore == null) throw new Error('Please call `useProvideSharedFormStore` on the appropriate parent component')
+  return sharedFormStore
+}
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c9bc82fe4c..6f084d334f 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -6,6 +6,8 @@
     "": {
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@vuelidate/core": "^2.0.0-alpha.44",
+        "@vuelidate/validators": "^2.0.0-alpha.31",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.2.10",
@@ -2862,6 +2864,72 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/core/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vuetify/loader-shared": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
@@ -17366,6 +17434,38 @@
       "dev": true,
       "requires": {}
     },
+    "@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
     "@vuetify/loader-shared": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index cca8e10ace..295b3e94d3 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
+    "@vuelidate/core": "^2.0.0-alpha.44",
+    "@vuelidate/validators": "^2.0.0-alpha.31",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.2.10",
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index aa46ab0e85..56753cff65 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -1,39 +1,45 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
+import type { TableType } from 'nocodb-sdk/build/main'
+import { useProvideSharedFormStore } from '~/composables/useSharedFormViewStore'
+import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
+  layout: 'false',
 })
 
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
 
-await loadSharedView(route.params.viewId as string)
-
-provide(ReloadViewDataHookInj, reloadEventHook)
-provide(MetaInj, meta)
-provide(ActiveViewInj, sharedView)
-provide(FieldsInj, formColumns)
-provide(IsPublicInj, ref(true))
+const { loadSharedView, sharedView, meta, columns, notFound, formColumns } = useProvideSharedFormStore()
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+await loadSharedView(route.params.viewId as string)
+if (!notFound.value) {
+  provide(ReloadViewDataHookInj, reloadEventHook)
+  provide(MetaInj, meta)
+  provide(ActiveViewInj, sharedView)
+  provide(FieldsInj, formColumns)
+  provide(IsPublicInj, ref(true))
+  provide(IsFormInj, ref(true))
+
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+}
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
-    <div class="nc-container flex flex-col h-full mt-2 px-6">
-      <SharedViewForm />
-    </div>
-  </NuxtLayout>
+  <!--  <NuxtLayout name="empty"> -->
+  <SharedViewForm />
+  <!--  </NuxtLayout> -->
 </template>
 
 <style scoped>
-.nc-container {
-  height: calc(100% - var(--header-height));
-  flex: 1 1 100%;
+:global(.ant-layout-header) {
+  @apply !hidden;
+}
+:global(.nc-main-container) {
+  @apply !h-auto;
 }
 </style>

From 1e75ff30cd2e04c52135830c23f4b2f2180ed9a8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 01:43:11 +0530
Subject: [PATCH 02/27] feat(gui-v2): shared form LTAR - load referenced table
 data

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue |  8 ++++--
 .../components/virtual-cell/ManyToMany.vue    |  5 +++-
 .../nc-gui-v2/composables/useLTARStore.ts     | 28 +++++++++++++++++--
 .../composables/useSharedFormViewStore.ts     |  8 +++---
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index d7171cb9f5..55572cff3a 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import {  ref, useProvideSmartsheetRowStore } from '#imports'
-import { useSharedFormStoreOrThrow } from '#imports'
+import { ref, useProvideSmartsheetRowStore, useSharedFormStoreOrThrow } from '#imports'
 
 const { sharedView, submitForm, v$, formState, notFound, formColumns, meta } = useSharedFormStoreOrThrow()
 
@@ -12,7 +11,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,any>
+    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 54e73a81e2..f1d30ca30c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -89,7 +89,10 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </div>
 
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand" @click="childListDlg = true" />
+        <MdiArrowExpand
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
+          @click="childListDlg = true"
+        />
 
         <MdiPlus
           v-if="!readonly"
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 6904f9f43f..90941f0e5e 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -2,6 +2,7 @@ import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } fr
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
 import {
+  IsPublicInj,
   NOCO,
   computed,
   extractSdkResponseErrorMsg,
@@ -39,6 +40,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
+    const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
+
     const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
@@ -79,8 +82,29 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const loadChildrenExcludedList = async () => {
       try {
-        /** if new row load all records */
-        if (isNewRow?.value) {
+        if (isPublic) {
+          const route = useRoute()
+          childrenExcludedList.value = await $api.public.dataRelationList(
+            route.params.viewId as string,
+            column?.value?.id,
+            {},
+            {
+              headers: {
+                'xc-password': '',
+              },
+              query: {
+                limit: childrenExcludedListPagination.size,
+                offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+                where:
+                  childrenExcludedListPagination.query &&
+                  `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+                fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+              } as any,
+            },
+          )
+
+          /** if new row load all records */
+        } else if (isNewRow?.value) {
           childrenExcludedList.value = await $api.dbTableRow.list(
             NOCO,
             project.value.id as string,
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index aab72bb898..aa423dff48 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -25,9 +25,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     () =>
       columns?.value
         ?.filter?.(
-        (f: Record<string, any>) =>
-          f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
-      )
+          (f: Record<string, any>) =>
+            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+        )
         .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
         .map<ColumnType & { required: boolean }>((c: ColumnType & { required?: boolean }) => ({
           ...c,
@@ -147,7 +147,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     formState,
     notFound,
     password,
-    submitted
+    submitted,
   }
 }, 'expanded-form-store')
 

From 85f4be117bfa3ab6ac0bf9195959e485b5878d4f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 01:58:09 +0530
Subject: [PATCH 03/27] feat(gui-v2): integrate attachment cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      | 14 ++++-
 .../components/cell/attachment/utils.ts       | 52 ++++++++++++++-----
 .../nc-gui-v2/components/shared-view/Form.vue |  2 +-
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 33db7c7b83..28912f4314 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,7 +4,7 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
+import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch, useSmartsheetRowStoreOrThrow } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
@@ -23,13 +23,15 @@ const sortableRef = ref<HTMLDivElement>()
 
 const { cellRefs } = useSmartsheetStoreOrThrow()!
 
-const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
+const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly,   storedFilesRefs, } =
   useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
+const { state: rowState } = useSmartsheetRowStoreOrThrow()
+
 const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
 
 /** on new value, reparse our stored attachments */
@@ -53,6 +55,14 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+/** sync storedFilesRefs state with row state */
+watch(
+  () => storedFilesRefs?.value?.length || 0,
+  () => {
+    rowState.value[column.value.title!] = storedFilesRefs?.value
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index ed0aab1982..e6a0c450d5 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,7 +1,7 @@
 import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
+import { ColumnInj, EditModeInj, IsPublicInj, MetaInj, ReadonlyInj } from '~/context'
 import { isImage } from '~/utils'
 import { NOCO } from '~/lib'
 import MdiPdfBox from '~icons/mdi/pdf-box'
@@ -10,11 +10,18 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
 import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
+
+interface AttachmentProps {
+  data?: any
+  file: File
+  title: string
+}
+
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
     const isReadonly = inject(ReadonlyInj, false)
 
-    const isPublicForm = inject('isPublicForm', false)
+    const isPublic = inject(IsPublicInj, ref(false))
 
     const isForm = inject('isForm', false)
 
@@ -27,8 +34,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const editEnabled = inject(EditModeInj, ref(false))
 
+    // todo: refactor name
     const storedFiles = ref<{ title: string; file: File }[]>([])
 
+    const storedFilesRefs = ref<File[]>([])
+
     const attachments = ref<File[]>([])
 
     const modalVisible = ref(false)
@@ -43,8 +53,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
-      if (isPublicForm) {
+      if (isPublic.value) {
         storedFiles.value.splice(i, 1)
+        storedFilesRefs.value.splice(i, 1)
 
         updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
       } else {
@@ -57,16 +68,28 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     async function onFileSelect(selectedFiles: FileList | File[]) {
       if (!selectedFiles.length || isPublicGrid) return
 
-      if (isPublicForm) {
+      if (isPublic.value) {
+        storedFilesRefs.value.push(...selectedFiles)
         storedFiles.value.push(
-          ...Array.from(selectedFiles).map((file) => {
-            const res = { file, title: file.name }
-            if (isImage(file.name, (file as any).mimetype)) {
-              const reader = new FileReader()
-              reader.readAsDataURL(file)
-            }
-            return res
-          }),
+          ...(await Promise.all<AttachmentProps>(
+            Array.from(selectedFiles).map(
+              (file) =>
+                new Promise<AttachmentProps>((resolve) => {
+                  const res: AttachmentProps = { file, title: file.name }
+                  if (isImage(file.name, (file as any).mimetype)) {
+                    const reader = new FileReader()
+                    reader.onload = (e: any) => {
+                      res.data = e.target?.result
+                      resolve(res)
+                    }
+                    reader.onerror = () => {
+                      resolve(res)
+                    }
+                    reader.readAsDataURL(file)
+                  }
+                }),
+            ),
+          )),
         )
 
         return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
@@ -124,7 +147,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
+    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFiles.value : attachments.value) || ([] as any[]))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
@@ -132,7 +155,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       attachments,
       storedFiles,
       visibleItems,
-      isPublicForm,
+      isPublic,
       isForm,
       isPublicGrid,
       isReadonly,
@@ -149,6 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
+      storedFilesRefs
     }
   },
   'useAttachmentCell',
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 55572cff3a..9bd81515cc 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -96,7 +96,7 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
                           />
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
-                          <SmartsheetVirtualCell v-model="formState[field.title]" class="mt-0 nc-input" :column="field" />
+                          <SmartsheetVirtualCell  class="mt-0 nc-input" :column="field" />
                           <div
                             v-if="
                               v$.virtual?.$dirty && (!v$.virtual?.[col.title]?.required || !v$.virtual?.[col.title]?.minLength)

From 29485a0d71d4e2f45f595fe47bea7020fcd34cbe Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:16:06 +0530
Subject: [PATCH 04/27] fix(gui-v2): validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      | 26 +++++++++++++++--
 .../components/cell/attachment/utils.ts       |  3 +-
 .../nc-gui-v2/components/shared-view/Form.vue | 29 +++++++------------
 .../composables/useSharedFormViewStore.ts     | 22 ++++++++++----
 .../pages/[projectType]/form/[viewId].vue     |  7 ++---
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 28912f4314..10133de3a2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,7 +4,16 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch, useSmartsheetRowStoreOrThrow } from '#imports'
+import {
+  computed,
+  isImage,
+  openLink,
+  ref,
+  useDropZone,
+  useSmartsheetRowStoreOrThrow,
+  useSmartsheetStoreOrThrow,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
@@ -23,8 +32,19 @@ const sortableRef = ref<HTMLDivElement>()
 
 const { cellRefs } = useSmartsheetStoreOrThrow()!
 
-const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly,   storedFilesRefs, } =
-  useProvideAttachmentCell(updateModelValue)
+const {
+  column,
+  modalVisible,
+  attachments,
+  visibleItems,
+  onDrop,
+  isLoading,
+  open,
+  FileIcon,
+  selectedImage,
+  isReadonly,
+  storedFilesRefs,
+} = useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index e6a0c450d5..63089f28b9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -10,7 +10,6 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
 import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
-
 interface AttachmentProps {
   data?: any
   file: File
@@ -172,7 +171,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
-      storedFilesRefs
+      storedFilesRefs,
     }
   },
   'useAttachmentCell',
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 9bd81515cc..d9cb2b6c9b 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { ref, useProvideSmartsheetRowStore, useSharedFormStoreOrThrow } from '#imports'
+import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedView, submitForm, v$, formState, notFound, formColumns, meta } = useSharedFormStoreOrThrow()
+const { sharedView, submitForm, v$, formState, notFound, formColumns, meta, submitted, secondsRemain } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -20,14 +20,6 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
 
-const { state: additionalState } = useProvideSmartsheetRowStore(
-  meta,
-  ref({
-    row: formState,
-    rowMeta: { new: true },
-    oldRow: {},
-  }),
-)
 </script>
 
 <template>
@@ -38,22 +30,21 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
     <div class="m-4 mt-2 bg-white rounded p-2 flex-1">
       <a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
 
-      <template v-if="submitted">
-        <div class="lex justify-center">
-          <div v-if="sharedView" style="min-width: 350px">
-            <a-alert type="success" outlined>
-              <span class="title">{{ sharedView.success_msg || 'Successfully submitted form data' }}</span>
+      <template v-else-if="submitted">
+        <div class="flex justify-center">
+          <div v-if="sharedView" style="min-width: 350px" class="mt-3">
+            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'">
             </a-alert>
             <p v-if="sharedView.show_blank_form" class="text-xs text-gray-500 text-center">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
             <div v-if="sharedView.submit_another_form" class="text-center">
-              <v-btn color="primary" @click="submitted = false"> Submit Another Form</v-btn>
+              <a-btn color="primary" @click="submitted = false"> Submit Another Form</a-btn>
             </div>
           </div>
         </div>
       </template>
-      <div v-if="sharedView" class="">
+      <div v-else-if="sharedView" class="">
         <a-row class="justify-center">
           <a-col :md="20">
             <div>
@@ -96,10 +87,10 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
                           />
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
-                          <SmartsheetVirtualCell  class="mt-0 nc-input" :column="field" />
+                          <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
                           <div
                             v-if="
-                              v$.virtual?.$dirty && (!v$.virtual?.[col.title]?.required || !v$.virtual?.[col.title]?.minLength)
+                              v$.virtual?.$dirty && (!v$.virtual?.[field.title]?.required || !v$.virtual?.[field.title]?.minLength)
                             "
                             class="text-xs text-red-500"
                           >
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index aa423dff48..9519e2870a 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -4,6 +4,7 @@ import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg } from '~/utils'
+import {useInjectionState} from '#imports'
 
 const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() => {
   const progress = ref(false)
@@ -11,6 +12,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const showPasswordModal = ref(false)
   const submitted = ref(false)
   const password = ref(null)
+  const secondsRemain = ref(null)
 
   // todo: type
   const sharedView = ref<any>()
@@ -21,6 +23,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const { metas, setMeta } = useMetas()
   const formState = ref({})
 
+
+
+  const { state: additionalState } = useProvideSmartsheetRowStore(
+    meta,
+    ref({
+      row: formState,
+      rowMeta: { new: true },
+      oldRow: {},
+    }),
+  )
+
   const formColumns = computed(
     () =>
       columns?.value
@@ -86,18 +99,13 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
       }
     }
 
-    console.log(obj)
     return obj
   })
 
-  const v$ = useVuelidate(validators, { localState: formState, virtual: {} })
+  const v$ = useVuelidate(validators, computed(() => ({ localState: formState?.value, virtual: additionalState?.value })))
 
   const submitForm = async (formState: Record<string, any>, additionalState: Record<string, any>) => {
     try {
-      // if (this.$v.localState.$invalid || this.$v.virtual.$invalid) {
-      //   this.$toast.error('Provide values of all required field').goAway(3000);
-      //   return;
-      // }
       if (!(await v$.value?.$validate())) {
         return
       }
@@ -125,10 +133,12 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
         },
       )
 
+      submitted.value = true
       progress.value = false
       await message.success(sharedView.value.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
+      throw e
       await message.error(await extractSdkResponseErrorMsg(e))
     }
     progress.value = false
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 56753cff65..454aa65415 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -6,15 +6,14 @@ import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDa
 import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
-  requiresAuth: false,
-  layout: 'false',
+  requiresAuth: false
 })
 
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 
-const { loadSharedView, sharedView, meta, columns, notFound, formColumns } = useProvideSharedFormStore()
+const { loadSharedView, sharedView, meta, notFound, formColumns } = useProvideSharedFormStore()
 
 await loadSharedView(route.params.viewId as string)
 if (!notFound.value) {
@@ -25,7 +24,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>)
 }
 </script>
 

From a038608afa3936eb9ce08c03469760b3d7ba49cb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:21:47 +0530
Subject: [PATCH 05/27] feat(gui-v2): bring additional features

- show blank form
- custom message alert

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue |  2 +-
 .../composables/useSharedFormViewStore.ts     | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index d9cb2b6c9b..35deded74a 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -39,7 +39,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
             <div v-if="sharedView.submit_another_form" class="text-center">
-              <a-btn color="primary" @click="submitted = false"> Submit Another Form</a-btn>
+              <a-button color="primary" @click="submitted = false"> Submit Another Form</a-button>
             </div>
           </div>
         </div>
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 9519e2870a..9b00ba034f 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -1,6 +1,7 @@
 import useVuelidate from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import { message } from 'ant-design-vue'
+import { formatMessages } from 'esbuild'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -12,7 +13,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const showPasswordModal = ref(false)
   const submitted = ref(false)
   const password = ref(null)
-  const secondsRemain = ref(null)
+  const secondsRemain = ref(0)
 
   // todo: type
   const sharedView = ref<any>()
@@ -135,6 +136,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
 
       submitted.value = true
       progress.value = false
+
+      additionalState.value = {}
+      formState.value = {}
+
       await message.success(sharedView.value.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
@@ -144,6 +149,19 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     progress.value = false
   }
 
+  /** reset form if show_blank_form is true */
+  watch(submitted, (nextVal:boolean) =>{
+    if (nextVal && sharedView.value.show_blank_form) {
+      secondsRemain.value = 5;
+      const intvl = setInterval(() => {
+        if (--secondsRemain.value < 0) {
+          submitted.value = false;
+          clearInterval(intvl);
+        }
+      }, 1000);
+    }
+  })
+
   return {
     sharedView,
     loadSharedView,
@@ -158,6 +176,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     notFound,
     password,
     submitted,
+    secondsRemain
   }
 }, 'expanded-form-store')
 

From 9363cde954f81ede68e0e25e739d9259bbcfe9bb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:22:51 +0530
Subject: [PATCH 06/27] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue |  9 ++++----
 .../composables/useSharedFormViewStore.ts     | 22 +++++++++----------
 .../pages/[projectType]/form/[viewId].vue     |  2 +-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 35deded74a..2edea71e56 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -2,7 +2,7 @@
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedView, submitForm, v$, formState, notFound, formColumns, meta, submitted, secondsRemain } = useSharedFormStoreOrThrow()
+const { sharedView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -19,7 +19,6 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
-
 </script>
 
 <template>
@@ -33,8 +32,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       <template v-else-if="submitted">
         <div class="flex justify-center">
           <div v-if="sharedView" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'">
-            </a-alert>
+            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'"> </a-alert>
             <p v-if="sharedView.show_blank_form" class="text-xs text-gray-500 text-center">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
@@ -90,7 +88,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                           <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
                           <div
                             v-if="
-                              v$.virtual?.$dirty && (!v$.virtual?.[field.title]?.required || !v$.virtual?.[field.title]?.minLength)
+                              v$.virtual?.$dirty &&
+                              (!v$.virtual?.[field.title]?.required || !v$.virtual?.[field.title]?.minLength)
                             "
                             class="text-xs text-red-500"
                           >
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 9b00ba034f..0d486bb782 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -1,11 +1,10 @@
 import useVuelidate from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import { message } from 'ant-design-vue'
-import { formatMessages } from 'esbuild'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import {useInjectionState} from '#imports'
+import { useInjectionState } from '#imports'
 
 const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() => {
   const progress = ref(false)
@@ -24,8 +23,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const { metas, setMeta } = useMetas()
   const formState = ref({})
 
-
-
   const { state: additionalState } = useProvideSmartsheetRowStore(
     meta,
     ref({
@@ -103,7 +100,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     return obj
   })
 
-  const v$ = useVuelidate(validators, computed(() => ({ localState: formState?.value, virtual: additionalState?.value })))
+  const v$ = useVuelidate(
+    validators,
+    computed(() => ({ localState: formState?.value, virtual: additionalState?.value })),
+  )
 
   const submitForm = async (formState: Record<string, any>, additionalState: Record<string, any>) => {
     try {
@@ -150,15 +150,15 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   }
 
   /** reset form if show_blank_form is true */
-  watch(submitted, (nextVal:boolean) =>{
+  watch(submitted, (nextVal: boolean) => {
     if (nextVal && sharedView.value.show_blank_form) {
-      secondsRemain.value = 5;
+      secondsRemain.value = 5
       const intvl = setInterval(() => {
         if (--secondsRemain.value < 0) {
-          submitted.value = false;
-          clearInterval(intvl);
+          submitted.value = false
+          clearInterval(intvl)
         }
-      }, 1000);
+      }, 1000)
     }
   })
 
@@ -176,7 +176,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     notFound,
     password,
     submitted,
-    secondsRemain
+    secondsRemain,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 454aa65415..df802d102b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -6,7 +6,7 @@ import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDa
 import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
-  requiresAuth: false
+  requiresAuth: false,
 })
 
 const route = useRoute()

From f794f3194d5bb786f9c3225d10ff9c3d5a77923f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:26:53 +0530
Subject: [PATCH 07/27] fix(gui-v2): virtual cell validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/shared-view/Form.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 2edea71e56..836a7743ee 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -86,15 +86,11 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
                           <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
-                          <div
-                            v-if="
-                              v$.virtual?.$dirty &&
-                              (!v$.virtual?.[field.title]?.required || !v$.virtual?.[field.title]?.minLength)
-                            "
-                            class="text-xs text-red-500"
-                          >
-                            Field is required.
-                          </div>
+                          <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+                            <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+                              {{ error.$message }}
+                            </div>
+                          </template>
                         </div>
                         <div v-else class="mt-0">
                           <SmartsheetCell

From bc8b1cd70a10c01add8f559e111b6583396f441b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:38:05 +0530
Subject: [PATCH 08/27] fix(gui-v2): reset validation and form state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/shared-view/Form.vue | 10 +++++-----
 .../composables/useSharedFormViewStore.ts          | 14 ++++++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 836a7743ee..e2f96c640e 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -31,13 +31,13 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
       <template v-else-if="submitted">
         <div class="flex justify-center">
-          <div v-if="sharedView" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'"> </a-alert>
-            <p v-if="sharedView.show_blank_form" class="text-xs text-gray-500 text-center">
+          <div v-if="sharedView.view" style="min-width: 350px" class="mt-3">
+            <a-alert type="success" outlined :message="sharedView.view.success_msg || 'Successfully submitted form data'"> </a-alert>
+            <p v-if="sharedView.view.show_blank_form" class="text-xs text-gray-500 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
-            <div v-if="sharedView.submit_another_form" class="text-center">
-              <a-button color="primary" @click="submitted = false"> Submit Another Form</a-button>
+            <div v-if="sharedView.view.submit_another_form" class="text-center">
+              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
             </div>
           </div>
         </div>
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 0d486bb782..6f49b64ee4 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -137,8 +137,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
       submitted.value = true
       progress.value = false
 
-      additionalState.value = {}
-      formState.value = {}
 
       await message.success(sharedView.value.success_msg || 'Saved successfully.')
     } catch (e: any) {
@@ -151,15 +149,23 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
 
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal: boolean) => {
-    if (nextVal && sharedView.value.show_blank_form) {
+    if (nextVal && sharedView.value?.view?.show_blank_form) {
       secondsRemain.value = 5
       const intvl = setInterval(() => {
-        if (--secondsRemain.value < 0) {
+        secondsRemain.value = secondsRemain.value -1
+        if (secondsRemain.value < 0) {
           submitted.value = false
           clearInterval(intvl)
         }
       }, 1000)
     }
+
+    /** reset form state and validation */
+    if(!nextVal){
+      additionalState.value = {}
+      formState.value = {}
+      v$.value?.$reset()
+    }
   })
 
   return {

From 00d135417c628a6414b0a2f56561ab9bc3b4aa80 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:55:26 +0530
Subject: [PATCH 09/27] fix(gui-v2): shared form view with password

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue | 37 ++++++++++++++++++-
 .../nc-gui-v2/composables/useLTARStore.ts     |  4 +-
 .../composables/useSharedFormViewStore.ts     | 35 ++++++++++++------
 packages/nc-gui-v2/context/index.ts           |  1 +
 .../pages/[projectType]/form/[viewId].vue     |  4 +-
 5 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index e2f96c640e..a4213797a2 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -2,7 +2,19 @@
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain } = useSharedFormStoreOrThrow()
+const {
+  sharedView,
+  submitForm,
+  v$,
+  formState,
+  notFound,
+  formColumns,
+  submitted,
+  secondsRemain,
+  passwordDlg,
+  password,
+  loadSharedView,
+} = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -32,7 +44,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       <template v-else-if="submitted">
         <div class="flex justify-center">
           <div v-if="sharedView.view" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined :message="sharedView.view.success_msg || 'Successfully submitted form data'"> </a-alert>
+            <a-alert type="success" outlined :message="sharedView.view.success_msg || 'Successfully submitted form data'">
+            </a-alert>
             <p v-if="sharedView.view.show_blank_form" class="text-xs text-gray-500 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
@@ -119,6 +132,26 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </a-row>
       </div>
     </div>
+
+    <a-modal
+      v-model:visible="passwordDlg"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      :mask-closable="false"
+      @close="passwordDlg = false"
+    >
+      <div class="w-full flex flex-col">
+        <a-typography-title :level="4">This shared view is protected</a-typography-title>
+        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
+          <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+            <a-input-password v-model:value="password" placeholder="Enter password" />
+          </a-form-item>
+          <a-button type="primary" html-type="submit">Unlock</a-button>
+        </a-form>
+      </div>
+    </a-modal>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 90941f0e5e..d9055d6c5a 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -14,6 +14,7 @@ import {
   useProject,
 } from '#imports'
 import type { Row } from '~/composables'
+import { SharedViewPasswordInj } from '~/context'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -27,6 +28,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
     const { $api } = useNuxtApp()
+    const sharedViewPassword = inject(SharedViewPasswordInj, ref(null))
     const childrenExcludedList = ref<DataApiResponse | undefined>()
     const childrenList = ref<DataApiResponse | undefined>()
     const childrenExcludedListPagination = reactive({
@@ -90,7 +92,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             {},
             {
               headers: {
-                'xc-password': '',
+                'xc-password': sharedViewPassword.value,
               },
               query: {
                 limit: childrenExcludedListPagination.size,
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 6f49b64ee4..816c293e6b 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -3,17 +3,20 @@ import { minLength, required } from '@vuelidate/validators'
 import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { SharedViewPasswordInj } from '~/context'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import { useInjectionState } from '#imports'
+import { useInjectionState, useMetas } from '#imports'
 
-const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() => {
+const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((sharedViewId: string) => {
   const progress = ref(false)
   const notFound = ref(false)
-  const showPasswordModal = ref(false)
   const submitted = ref(false)
+  const passwordDlg = ref(false)
   const password = ref(null)
   const secondsRemain = ref(0)
 
+  provide(SharedViewPasswordInj, password)
+
   // todo: type
   const sharedView = ref<any>()
   const meta = ref<TableType>()
@@ -45,10 +48,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
           required: !!(c.required || 0),
         })) ?? [],
   )
-  const loadSharedView = async (viewId: string) => {
+  const loadSharedView = async () => {
     try {
-      // todo: swagget type correction
-      const viewMeta: any = await $api.public.sharedViewMetaGet(viewId)
+      // todo: swagger type correction
+      const viewMeta: any = await $api.public.sharedViewMetaGet(sharedViewId, {
+        headers: {
+          'xc-password': password.value,
+        },
+      })
+
+      passwordDlg.value = false
+
       sharedView.value = viewMeta
       meta.value = viewMeta.model
       columns.value = viewMeta.model.columns
@@ -61,7 +71,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
       if (e.response && e.response.status === 404) {
         notFound.value = true
       } else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
-        showPasswordModal.value = true
+        passwordDlg.value = true
       }
     }
   }
@@ -129,15 +139,15 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
           ...attachment,
         },
         {
-          // todo: add password support
-          // headers: { 'xc-password': password },
+          headers: {
+            'xc-password': password.value,
+          },
         },
       )
 
       submitted.value = true
       progress.value = false
 
-
       await message.success(sharedView.value.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
@@ -152,7 +162,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     if (nextVal && sharedView.value?.view?.show_blank_form) {
       secondsRemain.value = 5
       const intvl = setInterval(() => {
-        secondsRemain.value = secondsRemain.value -1
+        secondsRemain.value = secondsRemain.value - 1
         if (secondsRemain.value < 0) {
           submitted.value = false
           clearInterval(intvl)
@@ -161,7 +171,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     }
 
     /** reset form state and validation */
-    if(!nextVal){
+    if (!nextVal) {
       additionalState.value = {}
       formState.value = {}
       v$.value?.$reset()
@@ -183,6 +193,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
     password,
     submitted,
     secondsRemain,
+    passwordDlg,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 6e492138c5..07d0b08d00 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -25,3 +25,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
+export const SharedViewPasswordInj: InjectionKey<Ref<string>> = Symbol('shared-view-password-injection')
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index df802d102b..00e33c9dc5 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -13,9 +13,9 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 
-const { loadSharedView, sharedView, meta, notFound, formColumns } = useProvideSharedFormStore()
+const { loadSharedView, sharedView, meta, notFound, formColumns } = useProvideSharedFormStore(route.params.viewId)
 
-await loadSharedView(route.params.viewId as string)
+await loadSharedView()
 if (!notFound.value) {
   provide(ReloadViewDataHookInj, reloadEventHook)
   provide(MetaInj, meta)

From 9c74e5285cd2cca288b097d2c1d14bb990c9911c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:17:22 +0530
Subject: [PATCH 10/27] chore(swagger): type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts |  36 ++++++----
 scripts/sdk/swagger.json           | 104 +++++++++++++++++++++--------
 2 files changed, 97 insertions(+), 43 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index d916b3839b..535f255ea0 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -3062,32 +3062,40 @@ export class Api<
       }),
 
     /**
-     * No description
+     * @description Read project details
      *
      * @tags Public
-     * @name SharedViewMetaGet
-     * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
-     * @response `200` `object` OK
+     * @name SharedBaseGet
+     * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
+     * @response `200` `{ project_id?: string }` OK
      */
-    sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
-      this.request<object, any>({
-        path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
+    sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
+      this.request<{ project_id?: string }, any>({
+        path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
         method: 'GET',
         format: 'json',
         ...params,
       }),
 
     /**
-     * @description Read project details
+     * No description
      *
      * @tags Public
-     * @name SharedBaseGet
-     * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
-     * @response `200` `{ project_id?: string }` OK
+     * @name SharedViewMetaGet
+     * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
+     * @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: (GridColumnType | FormColumnType | GalleryColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
      */
-    sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
-      this.request<{ project_id?: string }, any>({
-        path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
+    sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
+      this.request<
+        ViewType & {
+          relatedMetas?: any;
+          client?: string;
+          columns?: GridColumnType | FormColumnType | GalleryColumnType;
+          model?: TableType;
+        } & { view?: FormType | GridType | GalleryType },
+        any
+      >({
+        path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
         method: 'GET',
         format: 'json',
         ...params,
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index b3e60d58f3..6df846ef2d 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4363,28 +4363,22 @@
         "description": ""
       }
     },
-    "/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
+    "/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
       "parameters": [
         {
           "schema": {
             "type": "string"
           },
-          "name": "sharedViewUuid",
+          "name": "sharedBaseUuid",
           "in": "path",
           "required": true
-        },
-        {
-          "schema": {
-            "type": "string"
-          },
-          "in": "header",
-          "name": "xc-password",
-          "description": "Shared view password"
         }
       ],
       "get": {
         "summary": "",
-        "operationId": "public-shared-view-meta-get",
+        "operationId": "public-shared-base-get",
+        "description": "Read project details",
+        "parameters": [],
         "responses": {
           "200": {
             "description": "OK",
@@ -4392,58 +4386,110 @@
               "application/json": {
                 "schema": {
                   "type": "object",
-                  "properties": {}
+                  "properties": {
+                    "project_id": {
+                      "type": "string"
+                    }
+                  }
                 }
-              },
-              "application/xml": {
-                "schema": {}
               }
             }
           }
         },
         "tags": [
           "Public"
-        ],
-        "description": "",
-        "parameters": []
+        ]
       }
     },
-    "/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
+    "/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
       "parameters": [
         {
           "schema": {
             "type": "string"
           },
-          "name": "sharedBaseUuid",
+          "name": "sharedViewUuid",
           "in": "path",
           "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "in": "header",
+          "name": "xc-password",
+          "description": "Shared view password"
         }
       ],
       "get": {
         "summary": "",
-        "operationId": "public-shared-base-get",
-        "description": "Read project details",
-        "parameters": [],
+        "operationId": "public-shared-view-meta-get",
         "responses": {
           "200": {
             "description": "OK",
             "content": {
               "application/json": {
                 "schema": {
-                  "type": "object",
-                  "properties": {
-                    "project_id": {
-                      "type": "string"
+                  "allOf": [
+                    {
+                      "$ref": "#/components/schemas/View"
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "relatedMetas": {},
+                        "client": {
+                          "type": "string"
+                        },
+                        "columns": {
+                          "oneOf": [
+                            {
+                              "$ref": "#/components/schemas/GridColumn"
+                            },
+                            {
+                              "$ref": "#/components/schemas/FormColumn"
+                            },
+                            {
+                              "$ref": "#/components/schemas/GalleryColumn"
+                            }
+                          ]
+                        },
+                        "model": {
+                          "$ref": "#/components/schemas/Table"
+                        }
+                      }
+                    },
+                    {
+                      "properties": {
+                        "view": {
+                          "oneOf": [
+                            {
+                              "$ref": "#/components/schemas/Form"
+                            },
+                            {
+                              "$ref": "#/components/schemas/Grid"
+                            },
+                            {
+                              "$ref": "#/components/schemas/Gallery"
+                            }
+                          ]
+                        }
+                      },
+                      "type": "object"
                     }
-                  }
+                  ]
                 }
+              },
+              "application/xml": {
+                "schema": {}
               }
             }
           }
         },
         "tags": [
           "Public"
-        ]
+        ],
+        "description": "",
+        "parameters": []
       }
     },
     "/api/v1/db/meta/audits/comments": {

From 255b69105313d30068797460eb79e6fee905108a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:17:54 +0530
Subject: [PATCH 11/27] refactor(gui-v2): use proper type

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue    | 16 ++++++++--------
 .../composables/useSharedFormViewStore.ts        | 15 +++++++++------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index a4213797a2..ce42f81c66 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -3,7 +3,7 @@ import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
 const {
-  sharedView,
+  sharedFormView,
   submitForm,
   v$,
   formState,
@@ -43,19 +43,19 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
       <template v-else-if="submitted">
         <div class="flex justify-center">
-          <div v-if="sharedView.view" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined :message="sharedView.view.success_msg || 'Successfully submitted form data'">
+          <div v-if="sharedFormView" style="min-width: 350px" class="mt-3">
+            <a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'">
             </a-alert>
-            <p v-if="sharedView.view.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
-            <div v-if="sharedView.view.submit_another_form" class="text-center">
+            <div v-if="sharedFormView.submit_another_form" class="text-center">
               <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
             </div>
           </div>
         </div>
       </template>
-      <div v-else-if="sharedView" class="">
+      <div v-else-if="sharedFormView" class="">
         <a-row class="justify-center">
           <a-col :md="20">
             <div>
@@ -75,11 +75,11 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
                   <div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
                     <h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
-                      {{ sharedView.view.heading }}
+                      {{ sharedFormView.heading }}
                     </h2>
 
                     <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
-                      {{ sharedView.view.subheading }}
+                      {{ sharedFormView.subheading }}
                     </div>
                     <div class="h-100">
                       <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 816c293e6b..4048f51848 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -1,8 +1,9 @@
 import useVuelidate from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import { message } from 'ant-design-vue'
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { Ref } from 'vue'
 import { SharedViewPasswordInj } from '~/context'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import { useInjectionState, useMetas } from '#imports'
@@ -17,8 +18,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   provide(SharedViewPasswordInj, password)
 
-  // todo: type
-  const sharedView = ref<any>()
+  const sharedView = ref<ViewType>()
+  const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
   const columns = ref<(ColumnType & { required?: boolean })[]>()
 
@@ -27,7 +28,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const formState = ref({})
 
   const { state: additionalState } = useProvideSmartsheetRowStore(
-    meta,
+    meta as Ref<TableType>,
     ref({
       row: formState,
       rowMeta: { new: true },
@@ -51,7 +52,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const loadSharedView = async () => {
     try {
       // todo: swagger type correction
-      const viewMeta: any = await $api.public.sharedViewMetaGet(sharedViewId, {
+      const viewMeta = await $api.public.sharedViewMetaGet(sharedViewId, {
         headers: {
           'xc-password': password.value,
         },
@@ -60,8 +61,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       passwordDlg.value = false
 
       sharedView.value = viewMeta
+      sharedFormView.value = viewMeta.view
       meta.value = viewMeta.model
-      columns.value = viewMeta.model.columns
+      columns.value = viewMeta.model?.columns
 
       setMeta(viewMeta.model)
 
@@ -180,6 +182,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   return {
     sharedView,
+    sharedFormView,
     loadSharedView,
     columns,
     submitForm,

From 0d49ace210018d2d0d89ec917842fec7a9eb8115 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:31:47 +0530
Subject: [PATCH 12/27] fix(gui-v2): show hint if provided

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/shared-view/Form.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index ce42f81c66..0287391e1f 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -99,6 +99,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
                           <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
+                          <div class="text-gray-500 text-[10px] mb-2 ml-1" v-if="field.description">{{ field.description }}</div>
                           <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
                             <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
                               {{ error.$message }}
@@ -112,6 +113,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                             :column="field"
                             :edit-enabled="true"
                           />
+                          <div class="text-gray-500 text-[10px] mb-2 ml-1" v-if="field.description">{{ field.description }}</div>
                           <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
                             <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
                               {{ error.$message }}

From 005e286fbcb82259ebc3669b8a5a3d551eb01d94 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:37:20 +0530
Subject: [PATCH 13/27] fix(gui-v2): maintain the sort order

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/shared-view/Form.vue  |  4 ++--
 .../composables/useSharedFormViewStore.ts      | 18 ++++--------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 0287391e1f..e658c9a843 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -99,7 +99,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
                           <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
-                          <div class="text-gray-500 text-[10px] mb-2 ml-1" v-if="field.description">{{ field.description }}</div>
+                          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
                           <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
                             <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
                               {{ error.$message }}
@@ -113,7 +113,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                             :column="field"
                             :edit-enabled="true"
                           />
-                          <div class="text-gray-500 text-[10px] mb-2 ml-1" v-if="field.description">{{ field.description }}</div>
+                          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
                           <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
                             <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
                               {{ error.$message }}
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 4048f51848..2cfcb02697 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -3,7 +3,7 @@ import { minLength, required } from '@vuelidate/validators'
 import { message } from 'ant-design-vue'
 import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 import { SharedViewPasswordInj } from '~/context'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import { useInjectionState, useMetas } from '#imports'
@@ -21,7 +21,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const sharedView = ref<ViewType>()
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
-  const columns = ref<(ColumnType & { required?: boolean })[]>()
+  const columns = ref<(ColumnType & { required?: boolean; show?: boolean })[]>()
 
   const { $api } = useNuxtApp()
   const { metas, setMeta } = useMetas()
@@ -36,18 +36,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     }),
   )
 
-  const formColumns = computed(
-    () =>
-      columns?.value
-        ?.filter?.(
-          (f: Record<string, any>) =>
-            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
-        )
-        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
-        .map<ColumnType & { required: boolean }>((c: ColumnType & { required?: boolean }) => ({
-          ...c,
-          required: !!(c.required || 0),
-        })) ?? [],
+  const formColumns = computed(() =>
+    columns?.value?.filter((c) => c.show)?.filter((col) => !isVirtualCol(col) || col.uidt === UITypes.LinkToAnotherRecord),
   )
   const loadSharedView = async () => {
     try {

From 277aad310ee55d06d72e0ea6b9adf07ecfef4cd5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:47:22 +0530
Subject: [PATCH 14/27] chore(swagger): shared meta api type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts |  6 ++++--
 scripts/sdk/swagger.json           | 26 ++++++++++++++++++--------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 535f255ea0..748b959145 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -130,6 +130,7 @@ export interface ViewType {
   order?: number;
   fk_model_id?: string;
   slug?: string;
+  uuid?: string;
   show_system_fields?: boolean;
   lock_type?: 'collaborative' | 'locked' | 'personal';
 }
@@ -3083,14 +3084,15 @@ export class Api<
      * @tags Public
      * @name SharedViewMetaGet
      * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
-     * @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: (GridColumnType | FormColumnType | GalleryColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
+     * @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: ((GridColumnType | FormColumnType | GalleryColumnType) & ColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
      */
     sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
       this.request<
         ViewType & {
           relatedMetas?: any;
           client?: string;
-          columns?: GridColumnType | FormColumnType | GalleryColumnType;
+          columns?: (GridColumnType | FormColumnType | GalleryColumnType) &
+            ColumnType;
           model?: TableType;
         } & { view?: FormType | GridType | GalleryType },
         any
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 6df846ef2d..dae305d759 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4441,15 +4441,22 @@
                           "type": "string"
                         },
                         "columns": {
-                          "oneOf": [
-                            {
-                              "$ref": "#/components/schemas/GridColumn"
-                            },
+                          "allOf": [
                             {
-                              "$ref": "#/components/schemas/FormColumn"
+                              "oneOf": [
+                                {
+                                  "$ref": "#/components/schemas/GridColumn"
+                                },
+                                {
+                                  "$ref": "#/components/schemas/FormColumn"
+                                },
+                                {
+                                  "$ref": "#/components/schemas/GalleryColumn"
+                                }
+                              ]
                             },
                             {
-                              "$ref": "#/components/schemas/GalleryColumn"
+                              "$ref": "#/components/schemas/Column"
                             }
                           ]
                         },
@@ -4459,6 +4466,7 @@
                       }
                     },
                     {
+                      "type": "object",
                       "properties": {
                         "view": {
                           "oneOf": [
@@ -4473,8 +4481,7 @@
                             }
                           ]
                         }
-                      },
-                      "type": "object"
+                      }
                     }
                   ]
                 }
@@ -6139,6 +6146,9 @@
           "slug": {
             "type": "string"
           },
+          "uuid": {
+            "type": "string"
+          },
           "show_system_fields": {
             "type": "boolean"
           },

From b6a1ff2cd45cad3dca81bdcc86574813f9938097 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:47:52 +0530
Subject: [PATCH 15/27] fix(gui-v2): corrections in shared view store

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/composables/useSharedFormViewStore.ts   | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 2cfcb02697..6518b621dc 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -13,7 +13,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const notFound = ref(false)
   const submitted = ref(false)
   const passwordDlg = ref(false)
-  const password = ref(null)
+  const password = ref('')
   const secondsRemain = ref(0)
 
   provide(SharedViewPasswordInj, password)
@@ -41,7 +41,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   )
   const loadSharedView = async () => {
     try {
-      // todo: swagger type correction
       const viewMeta = await $api.public.sharedViewMetaGet(sharedViewId, {
         headers: {
           'xc-password': password.value,
@@ -117,7 +116,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       const data = { ...formState, ...additionalState }
       const attachment: Record<string, any> = {}
 
-      for (const col of metas?.value?.[sharedView?.value?.fk_model_id]?.columns ?? []) {
+      for (const col of metas?.value?.[sharedFormView?.value?.fk_model_id as string]?.columns ?? []) {
         if (col.uidt === UITypes.Attachment) {
           attachment[`_${col.title}`] = data[col.title!]
           delete data[col.title!]
@@ -125,7 +124,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
 
       await $api.public.dataCreate(
-        sharedView?.value?.uuid,
+        sharedView?.value?.uuid as string,
         {
           data,
           ...attachment,
@@ -140,7 +139,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       submitted.value = true
       progress.value = false
 
-      await message.success(sharedView.value.success_msg || 'Saved successfully.')
+      await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
       throw e
@@ -151,7 +150,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal: boolean) => {
-    if (nextVal && sharedView.value?.view?.show_blank_form) {
+    if (nextVal && sharedFormView.value?.show_blank_form) {
       secondsRemain.value = 5
       const intvl = setInterval(() => {
         secondsRemain.value = secondsRemain.value - 1

From c1dca10aca7a4083137662bdd77ea5c1a4c10e1e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 13:50:41 +0530
Subject: [PATCH 16/27] fix(gui-v2): pass attachment and LTAR data properly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useSharedFormViewStore.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 6518b621dc..d8eff629a7 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -106,16 +106,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     computed(() => ({ localState: formState?.value, virtual: additionalState?.value })),
   )
 
-  const submitForm = async (formState: Record<string, any>, additionalState: Record<string, any>) => {
+  const submitForm = async () => {
     try {
       if (!(await v$.value?.$validate())) {
         return
       }
 
       progress.value = true
-      const data = { ...formState, ...additionalState }
+      const data:Record<string,any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
       const attachment: Record<string, any> = {}
 
+
       for (const col of metas?.value?.[sharedFormView?.value?.fk_model_id as string]?.columns ?? []) {
         if (col.uidt === UITypes.Attachment) {
           attachment[`_${col.title}`] = data[col.title!]
@@ -142,7 +143,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
-      throw e
       await message.error(await extractSdkResponseErrorMsg(e))
     }
     progress.value = false

From 4fcae289b6d4442aed4bb7bdb3205ca55b878e80 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 15:26:53 +0530
Subject: [PATCH 17/27] fix(gui-v2): allow shared form view publicly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useSharedFormViewStore.ts | 3 +--
 packages/nc-gui-v2/middleware/auth.global.ts             | 3 +++
 packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index d8eff629a7..6043aac0a0 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -113,10 +113,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
 
       progress.value = true
-      const data:Record<string,any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
+      const data: Record<string, any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
       const attachment: Record<string, any> = {}
 
-
       for (const col of metas?.value?.[sharedFormView?.value?.fk_model_id as string]?.columns ?? []) {
         if (col.uidt === UITypes.Attachment) {
           attachment[`_${col.title}`] = data[col.title!]
diff --git a/packages/nc-gui-v2/middleware/auth.global.ts b/packages/nc-gui-v2/middleware/auth.global.ts
index 740514cbb2..138dc99fbd 100644
--- a/packages/nc-gui-v2/middleware/auth.global.ts
+++ b/packages/nc-gui-v2/middleware/auth.global.ts
@@ -23,6 +23,9 @@ import { useGlobal } from '#imports'
 export default defineNuxtRouteMiddleware((to, from) => {
   const state = useGlobal()
 
+  /** if public allow */
+  if (to.meta.public) return
+
   /** if shred base allow without validating */
   if (to.params?.projectType === 'base') return
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 00e33c9dc5..05a41fdc67 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -6,7 +6,7 @@ import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDa
 import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
-  requiresAuth: false,
+  public: true,
 })
 
 const route = useRoute()

From fb5a0ce6886c2c8367a41dd1ea29f410bce624cc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 15:44:14 +0530
Subject: [PATCH 18/27] fix(gui-v2): attachment modal issue in shared form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/attachment/Carousel.vue | 2 +-
 packages/nc-gui-v2/components/cell/attachment/Modal.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 902cb57153..e57c41520a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -92,7 +92,7 @@ onClickOutside(carouselRef, () => {
 
           <div v-for="item of imageItems" :key="item.url">
             <div
-              :style="{ backgroundImage: `url('${item.url}')` }"
+              :style="{ backgroundImage: `url('${item.url || item.data}')` }"
               class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
             />
           </div>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 7ffec69130..c580bb33b0 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -116,7 +116,7 @@ function onClick(item: Record<string, any>) {
             >
               <div
                 v-if="isImage(item.title, item.mimetype)"
-                :style="{ backgroundImage: `url('${item.url}')` }"
+                :style="{ backgroundImage: `url('${item.url || item.data}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
                 @click.stop="onClick(item)"
               />

From 04172cf5f5cb007193358aa7dc00adc39afcf2fb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 16:12:33 +0530
Subject: [PATCH 19/27] refactor(gui-v2): attachment store refactoring

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      |  8 +++----
 .../components/cell/attachment/utils.ts       | 23 ++++++++++---------
 .../composables/useSharedFormViewStore.ts     |  2 +-
 packages/nc-gui-v2/context/index.ts           |  2 +-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 10133de3a2..0939ed4c6a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -43,7 +43,7 @@ const {
   FileIcon,
   selectedImage,
   isReadonly,
-  storedFilesRefs,
+  storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
@@ -76,11 +76,11 @@ onKeyDown('Escape', () => {
   isOverDropZone.value = false
 })
 
-/** sync storedFilesRefs state with row state */
+/** sync storedFiles state with row state */
 watch(
-  () => storedFilesRefs?.value?.length || 0,
+  () => storedFiles.value.length || 0,
   () => {
-    rowState.value[column.value.title!] = storedFilesRefs?.value
+    rowState.value[column.value.title!] = storedFiles.value
   },
 )
 </script>
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 63089f28b9..301d937944 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -33,10 +33,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const editEnabled = inject(EditModeInj, ref(false))
 
-    // todo: refactor name
-    const storedFiles = ref<{ title: string; file: File }[]>([])
+    /** keep user selected files data (in base encoded string format) and meta details */
+    const storedFilesData = ref<{ title: string; file: File }[]>([])
 
-    const storedFilesRefs = ref<File[]>([])
+    /** keep user selected File object */
+    const storedFiles = ref<File[]>([])
 
     const attachments = ref<File[]>([])
 
@@ -53,10 +54,10 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
       if (isPublic.value) {
+        storedFilesData.value.splice(i, 1)
         storedFiles.value.splice(i, 1)
-        storedFilesRefs.value.splice(i, 1)
 
-        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       } else {
         attachments.value.splice(i, 1)
         updateModelValue(attachments.value)
@@ -68,8 +69,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       if (!selectedFiles.length || isPublicGrid) return
 
       if (isPublic.value) {
-        storedFilesRefs.value.push(...selectedFiles)
-        storedFiles.value.push(
+        storedFiles.value.push(...selectedFiles)
+        storedFilesData.value.push(
           ...(await Promise.all<AttachmentProps>(
             Array.from(selectedFiles).map(
               (file) =>
@@ -91,7 +92,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
           )),
         )
 
-        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        return updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       }
 
       const newAttachments = []
@@ -146,13 +147,13 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFiles.value : attachments.value) || ([] as any[]))
+    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFilesData.value : attachments.value) || ([] as any[]))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
     return {
       attachments,
-      storedFiles,
+      storedFilesData,
       visibleItems,
       isPublic,
       isForm,
@@ -171,7 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
-      storedFilesRefs,
+      storedFiles,
     }
   },
   'useAttachmentCell',
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index 6043aac0a0..f2f63dfb21 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -13,7 +13,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const notFound = ref(false)
   const submitted = ref(false)
   const passwordDlg = ref(false)
-  const password = ref('')
+  const password = ref<string | null>(null)
   const secondsRemain = ref(0)
 
   provide(SharedViewPasswordInj, password)
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 07d0b08d00..4fec43459c 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -25,4 +25,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
-export const SharedViewPasswordInj: InjectionKey<Ref<string>> = Symbol('shared-view-password-injection')
+export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')

From 2ecebf953f287b691cbbd95bcc8b4e5d6d83da83 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 17:23:34 +0530
Subject: [PATCH 20/27] refactor(gui-v2): hide navbar in public page

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/layouts/base.vue             |  9 ++++++---
 .../pages/[projectType]/form/[viewId].vue       | 17 ++---------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 1ce866ad42..d46b05c9bd 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -22,7 +22,10 @@ const logout = () => {
 
     <a-layout class="!flex-col">
       <Transition name="layout">
-        <a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
+        <a-layout-header
+          v-if="!route.meta.public && signedIn"
+          class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+        >
           <div
             v-if="
               route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
@@ -48,7 +51,7 @@ const logout = () => {
           <GeneralShareBaseButton />
 
           <a-tooltip placement="bottom">
-            <template #title> Switch language </template>
+            <template #title> Switch language</template>
 
             <div class="flex pr-4 items-center">
               <GeneralLanguage class="cursor-pointer text-2xl" />
@@ -88,7 +91,7 @@ const logout = () => {
       </Transition>
 
       <a-tooltip placement="bottom">
-        <template #title> Switch language </template>
+        <template #title> Switch language</template>
 
         <Transition name="layout">
           <div v-if="!signedIn" class="nc-lang-btn">
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 05a41fdc67..7388ce6a55 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -2,7 +2,7 @@
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk/build/main'
 import { useProvideSharedFormStore } from '~/composables/useSharedFormViewStore'
-import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { IsFormInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
@@ -13,14 +13,12 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 
-const { loadSharedView, sharedView, meta, notFound, formColumns } = useProvideSharedFormStore(route.params.viewId)
+const { loadSharedView, sharedView, meta, notFound } = useProvideSharedFormStore(route.params.viewId as string)
 
 await loadSharedView()
 if (!notFound.value) {
   provide(ReloadViewDataHookInj, reloadEventHook)
   provide(MetaInj, meta)
-  provide(ActiveViewInj, sharedView)
-  provide(FieldsInj, formColumns)
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
@@ -29,16 +27,5 @@ if (!notFound.value) {
 </script>
 
 <template>
-  <!--  <NuxtLayout name="empty"> -->
   <SharedViewForm />
-  <!--  </NuxtLayout> -->
 </template>
-
-<style scoped>
-:global(.ant-layout-header) {
-  @apply !hidden;
-}
-:global(.nc-main-container) {
-  @apply !h-auto;
-}
-</style>

From 131ee2cbb33955214fb919d323c1851a4e1d6bb6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:12:25 +0530
Subject: [PATCH 21/27] fix(gui-v2): handle non image file in shared form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/attachment/utils.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 301d937944..d547633bd1 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -86,6 +86,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
                       resolve(res)
                     }
                     reader.readAsDataURL(file)
+                  } else {
+                    resolve(res)
                   }
                 }),
             ),

From 83d25f362efc7d587cc3e1e4a0084af21d183bd1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:24:36 +0530
Subject: [PATCH 22/27] fix(gui-v2): shared form - attachment show remove icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/Modal.vue      | 10 +-
 .../nc-gui-v2/components/shared-view/Form.vue |  2 +-
 .../composables/useSmartsheetStore.ts         | 97 ++++++++++---------
 .../pages/[projectType]/form/[viewId].vue     |  2 +-
 4 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index c580bb33b0..58d6117ff6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -10,7 +10,6 @@ const {
   open,
   isLoading,
   isPublicGrid,
-  isForm,
   isReadonly,
   visibleItems,
   modalVisible,
@@ -34,6 +33,8 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
+const { isSharedForm } = useSmartsheetStoreOrThrow()
+
 onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
@@ -61,7 +62,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >
@@ -78,7 +79,7 @@ function onClick(item: Record<string, any>) {
     </template>
 
     <div ref="dropZoneRef">
-      <template v-if="!isReadonly && !dragging">
+      <template v-if="isSharedForm || (!isReadonly && !dragging)">
         <general-overlay
           v-model="isOverDropZone"
           inline
@@ -94,9 +95,8 @@ function onClick(item: Record<string, any>) {
           <a-card class="nc-attachment-item group">
             <a-tooltip v-if="!isReadonly">
               <template #title> Remove File </template>
-
               <MdiCloseCircle
-                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="removeFile(i)"
               />
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index e658c9a843..75ada2d142 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -23,7 +23,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+    columnObj = formColumns.value?.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
       string,
       any
     >
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index f75856e3c6..11d355e563 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -3,53 +3,58 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
-const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
-  const { $api } = useNuxtApp()
-  const { sqlUi } = useProject()
-
-  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
-
-  // state
-  // todo: move to grid view store
-  const search = reactive({
-    field: '',
-    query: '',
-  })
-
-  // getters
-  const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
-  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
-  const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
-  const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
-  const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
-  const xWhere = computed(() => {
-    let where
-    const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
-    if (!col) return
-
-    if (!search.query.trim()) return
-    if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
-      where = `(${col.title},like,%${search.query.trim()}%)`
-    } else {
-      where = `(${col.title},eq,${search.query.trim()})`
+const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
+  (view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
+    const { $api } = useNuxtApp()
+    const { sqlUi } = useProject()
+
+    const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
+    // state
+    // todo: move to grid view store
+    const search = reactive({
+      field: '',
+      query: '',
+    })
+
+    // getters
+    const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+    const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+    const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+    const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+    const isSharedForm = computed(() => isForm?.value && shared)
+    const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
+    const xWhere = computed(() => {
+      let where
+      const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+      if (!col) return
+
+      if (!search.query.trim()) return
+      if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+        where = `(${col.title},like,%${search.query.trim()}%)`
+      } else {
+        where = `(${col.title},eq,${search.query.trim()})`
+      }
+      return where
+    })
+
+    return {
+      view,
+      meta,
+      isLocked,
+      $api,
+      search,
+      xWhere,
+      isPkAvail,
+      isForm,
+      isGrid,
+      isGallery,
+      cellRefs,
+      isSharedForm,
     }
-    return where
-  })
-
-  return {
-    view,
-    meta,
-    isLocked,
-    $api,
-    search,
-    xWhere,
-    isPkAvail,
-    isForm,
-    isGrid,
-    isGallery,
-    cellRefs,
-  }
-}, 'smartsheet-store')
+  },
+  'smartsheet-store',
+)
 
 export { useProvideSmartsheetStore }
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 7388ce6a55..b3590c30bb 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -22,7 +22,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>)
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
 }
 </script>
 

From b3062130df6bbe9720dbc360abd85725fc3f9fff Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:26:18 +0530
Subject: [PATCH 23/27] fix(gui-v2): make attachment drag-n-drop in shared form
 view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 0939ed4c6a..8f6bfaa887 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -83,13 +83,15 @@ watch(
     rowState.value[column.value.title!] = storedFiles.value
   },
 )
+
+const { isSharedForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && !!currentCellRef">
+    <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
       <general-overlay
         v-model="isOverDropZone"
         inline

From 304d91875faf217e68702ef48cae0674b14e8bb0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:34:45 +0530
Subject: [PATCH 24/27] fix(gui-v2): if json parsing failed set attachments as
 an empty array

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/attachment/index.vue  | 6 +++++-
 packages/nc-gui-v2/composables/useSharedFormViewStore.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 8f6bfaa887..f2e47339b7 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -59,7 +59,11 @@ watch(
   () => modelValue,
   (nextModel) => {
     if (nextModel) {
-      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+      try {
+        attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+      } catch {
+        attachments.value = []
+      }
     }
   },
   { immediate: true },
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index f2f63dfb21..902405b41c 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
@@ -116,7 +116,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       const data: Record<string, any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
       const attachment: Record<string, any> = {}
 
-      for (const col of metas?.value?.[sharedFormView?.value?.fk_model_id as string]?.columns ?? []) {
+      for (const col of metas?.value?.[sharedView?.value?.fk_model_id as string]?.columns ?? []) {
         if (col.uidt === UITypes.Attachment) {
           attachment[`_${col.title}`] = data[col.title!]
           delete data[col.title!]

From 7cb5dcb98248160478970f3672d051be59d19005 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:55:06 +0530
Subject: [PATCH 25/27] fix(gui-v2): hide add new row from record list in
 shared form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListItems.vue         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index f7a5d1863e..11deb22faa 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -13,6 +13,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -38,6 +39,8 @@ const {
 
 const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const linkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
     addLTARRef(row, column?.value as ColumnType)
@@ -105,7 +108,7 @@ const newRowState = computed(() => {
         ></a-input>
         <div class="flex-1" />
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
-        <a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
+        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">

From 187341e6330494737a107901985595c300071858 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:55:33 +0530
Subject: [PATCH 26/27] fix(api): handle belongsto column properly in nested
 insert

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 6c20ec4089..a87241315d 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -1552,8 +1552,9 @@ class BaseModelSqlv2 {
           switch (colOptions.type) {
             case RelationTypes.BELONGS_TO:
               {
-                const parentCol = await colOptions.getChildColumn();
-                insertObj[parentCol.column_name] =
+                const childCol = await colOptions.getChildColumn();
+                const parentCol = await colOptions.getParentColumn();
+                insertObj[childCol.column_name] =
                   nestedData?.[parentCol.title];
               }
               break;

From 4a0e878c32d20ac5051ac0f049791c577335886f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 22:57:53 +0530
Subject: [PATCH 27/27] fix(api): hide delete record icon in shared form
 children list(mm/hm)

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListChildItems.vue    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index bf938dd849..7b987eddde 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -11,6 +11,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 
@@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
@@ -117,7 +120,7 @@ const expandedFormRow = ref()
                   @click.stop="unlinkRow(row)"
                 />
                 <MdiDeleteOutline
-                  v-if="!readonly"
+                  v-if="!readonly && !isPublic"
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
                 />