fix/added shared view form

packages/nc-gui-v2/components/shared-view/Form.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { FieldsInj, MetaInj } from '~/context'
+
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+const { sharedView } = useSharedView()
+
+const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    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
+    >
+  }
+
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
+}
+
+useSmartsheetStoreOrThrow()
+useProvideSmartsheetRowStore(meta, formState)
+
+const formRef = ref()
+
+watch(
+  () => formState,
+  () => {
+    console.log('formData', formState.value)
+  },
+)
+
+console.log(fields)
+</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" :level="1">{{
+          sharedView.view.heading
+        }}</a-typography-title>
+        <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
+      </div>
+
+      <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"
+            />
+          </div>
+          <a-form-item
+            v-if="isVirtualCol(field)"
+            class="ma-0 gap-0 pa-0"
+            :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"
+            :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>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.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;
+}
+</style>

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

@@ -1,4 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -10,6 +11,16 @@ const password = ref<string | undefined>()
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  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((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) })) ?? [],
+  )
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -61,5 +72,16 @@ export function useSharedView() {
     })
   }
 
-  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts, exportFile }
+  return {
+    sharedView,
+    loadSharedView,
+    meta,
+    columns,
+    nestedFilters,
+    fetchSharedViewData,
+    paginationData,
+    sorts,
+    exportFile,
+    formColumns,
+  }
 }

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

@@ -19,7 +19,6 @@ export interface Row {
     commentCount?: number
   }
 }
-const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -36,6 +35,7 @@ export function useViewData(
   const formColumnData = ref<FormType>()
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
+  const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+import { useRoute } from '#imports'
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
+console.log(sharedView)
+await loadSharedView(route.params.viewId as string)
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, formColumns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+// useSmartsheetRowStore()
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SharedViewForm />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>

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

@@ -23,7 +23,7 @@ provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>