From f3b46bd72a6f214b72486777d4c49b5acdea3613 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:10 +0000
Subject: [PATCH] fix(nc-gui): grayed out shared form field if prefilled fields
 are locked

---
 .../nc-gui/components/cell/MultiSelect.vue    |  2 +-
 .../nc-gui/components/cell/SingleSelect.vue   |  2 +-
 packages/nc-gui/components/cell/User.vue      |  1 +
 .../dlg/share-and-collaborate/SharePage.vue   |  2 +-
 .../composables/useSharedFormViewStore.ts     | 29 +++-----
 packages/nc-gui/lang/en.json                  |  3 +-
 .../index/[typeOrId]/form/[viewId]/index.vue  | 10 +--
 .../[typeOrId]/form/[viewId]/index/index.vue  | 71 ++++++++++---------
 .../[typeOrId]/form/[viewId]/index/survey.vue | 67 +++++++++--------
 9 files changed, 94 insertions(+), 93 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5c5a205f2a..333a35c01f 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -394,7 +394,7 @@ const onFocus = () => {
     @click="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-checkbox-group v-model:value="vModel" class="nc-field-layout-list">
+      <a-checkbox-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
         <a-checkbox
           v-for="op of options"
           :key="op.title"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 57ccd9ee38..3d7d6ee3e4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -315,7 +315,7 @@ const onFocus = () => {
     @keydown.enter.stop.prevent="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-radio-group v-model:value="vModel" class="nc-field-layout-list">
+      <a-radio-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
         <a-radio
           v-for="op of options"
           :key="op.title"
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 3331110136..ec04f34400 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -323,6 +323,7 @@ const filterOption = (input: string, option: any) => {
       <component
         :is="isMultiple ? CheckboxGroup : RadioGroup"
         v-model:value="vModelListLayout"
+        :disabled="readOnly || !editAllowed"
         class="nc-field-layout-list"
         @update:value="
           (value) => {
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 8368d6766b..c28ef0ae84 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -191,7 +191,7 @@ function sharedViewUrl() {
     dashboardUrl1 = `${baseUrl}${appInfo.value?.dashboardPath}`
   }
 
-  return encodeURI(`${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}`)
+  return encodeURI(`${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}`)
 }
 
 const toggleViewShare = async () => {
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 3acda5c249..b37d6ac59a 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -264,15 +264,14 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function handlePreFillForm() {
-    // http://localhost:3000/#/nc/form/070dbc84-f3ca-43a3-808a-3547a873933f?Multiselect=a,b
     if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
-      console.log('router', route.query)
       columns.value = columns.value?.map((c) => {
         if (
           !c.title ||
           !route.query?.[c.title] ||
           isSystemColumn(c) ||
-          (isVirtualCol(c) && !isLinksOrLTAR(c)) ||
+          isVirtualCol(c) ||
+          // (isVirtualCol(c) && !isLinksOrLTAR(c)) || // Todo: Enable this after linksOrLTAR prefill supported
           isAttachment(c)
         ) {
           return c
@@ -298,8 +297,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
         return c
       })
-      console.log('form state', formState.value)
-      console.log('column', columns.value)
     }
   }
 
@@ -308,7 +305,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function getPreFillValue(c: ColumnType, value: string) {
-    let preFillValue: any = ''
+    let preFillValue: any
     switch (c.uidt) {
       case UITypes.SingleSelect:
       case UITypes.MultiSelect:
@@ -381,7 +378,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
       case UITypes.Rating: {
         if (!isNaN(Number(value))) {
-          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(preFillValue)
+          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(value)
         }
         break
       }
@@ -396,7 +393,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         break
       }
       case UITypes.Year: {
-        if (/^\d+$/.test(preFillValue)) {
+        if (/^\d+$/.test(value)) {
           preFillValue = Number(value)
         }
         break
@@ -431,22 +428,12 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         }
         break
       }
-      case UITypes.LinkToAnotherRecord: {
-        if (isBt(c)) {
-          const queryOptions = value.split(',')
-
-          // console.log('column bt', queryOptions, c)
-        }
-        break
-      }
+      case UITypes.LinkToAnotherRecord:
       case UITypes.Links: {
-        if (isMm(c)) {
-          const queryOptions = value.split(',')
-
-          // console.log('column mm', queryOptions, c)
-        }
+        // Todo: create an api which will fetch query params records and then autofill records
         break
       }
+
       default: {
         if (isNumericFieldType(c, getColAbstractType(c))) {
           if (!isNaN(Number(value))) {
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 710665b281..92d2dbe81d 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -932,7 +932,8 @@
       "default": "Allow pre-filling fields",
       "disabled": "Disable pre-filling fields",
       "locked": "Lock pre-filled fields as read-only",
-      "hidden": "Hide pre-filled fields"
+      "hidden": "Hide pre-filled fields",
+      "lockedFieldTooltip": "Pre-filled value"
     }
   },
   "tooltip": {
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index fb2e45ff2c..79b671de02 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -87,6 +87,10 @@ p {
         &:not(.layout-list) {
           @apply rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500 overflow-hidden;
 
+          &.readonly {
+            @apply bg-gray-50 cursor-not-allowed;
+          }
+
           & > div {
             @apply !bg-transparent;
           }
@@ -110,7 +114,7 @@ p {
         input,
         textarea,
         &.nc-virtual-cell {
-          @apply bg-white dark:(bg-slate-500 text-white);
+          @apply bg-white dark:(bg-slate-500 text-white) disabled:bg-transparent;
 
           .ant-btn {
             @apply dark:(bg-slate-300);
@@ -120,9 +124,7 @@ p {
             @apply dark:(bg-slate-700 text-white);
           }
         }
-        &:not(.layout-list) > div {
-          @apply bg-white dark:(bg-slate-500 text-white);
-        }
+
         &.layout-list > div {
           .ant-btn {
             @apply dark:(bg-slate-300);
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 6c929fec4a..6658252457 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -180,40 +180,45 @@ const onDecode = async (scannedCodeValue: string) => {
                   </div>
 
                   <div>
-                    <LazySmartsheetDivDataCell class="flex relative">
-                      <LazySmartsheetVirtualCell
-                        v-if="isVirtualCol(field)"
-                        :model-value="null"
-                        class="mt-0 nc-input nc-cell"
-                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                        :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
-                        :column="field"
-                      />
+                    <NcTooltip :disabled="!field?.read_only">
+                      <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
 
-                      <LazySmartsheetCell
-                        v-else
-                        v-model="formState[field.title]"
-                        class="nc-input truncate"
-                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                        :class="[
-                          `nc-form-input-${field.title?.replaceAll(' ', '')}`,
-                          { 'layout-list': parseProp(field?.meta)?.isList },
-                        ]"
-                        :column="field"
-                        :edit-enabled="!field?.read_only"
-                        :read-only="field?.read_only"
-                      />
-                      <a-button
-                        v-if="field.enable_scanner"
-                        class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
-                        :alt="$t('activity.fillByCodeScan')"
-                        @click="showCodeScannerForFieldTitle(field.title)"
-                      >
-                        <div class="flex items-center gap-1">
-                          <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
-                        </div>
-                      </a-button>
-                    </LazySmartsheetDivDataCell>
+                      <LazySmartsheetDivDataCell class="flex relative">
+                        <LazySmartsheetVirtualCell
+                          v-if="isVirtualCol(field)"
+                          :model-value="null"
+                          class="mt-0 nc-input nc-cell"
+                          :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                          :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                          :column="field"
+                          :read-only="field?.read_only"
+                        />
+
+                        <LazySmartsheetCell
+                          v-else
+                          v-model="formState[field.title]"
+                          class="nc-input truncate"
+                          :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                          :class="[
+                            `nc-form-input-${field.title?.replaceAll(' ', '')}`,
+                            { 'layout-list': parseProp(field?.meta)?.isList },
+                          ]"
+                          :column="field"
+                          :edit-enabled="!field?.read_only"
+                          :read-only="field?.read_only"
+                        />
+                        <a-button
+                          v-if="field.enable_scanner"
+                          class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
+                          :alt="$t('activity.fillByCodeScan')"
+                          @click="showCodeScannerForFieldTitle(field.title)"
+                        >
+                          <div class="flex items-center gap-1">
+                            <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
+                          </div>
+                        </a-button>
+                      </LazySmartsheetDivDataCell>
+                    </NcTooltip>
 
                     <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-sm mt-2">
                       <template v-if="isVirtualCol(field)">
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index 1939f39844..bac5a0c11b 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -280,38 +280,43 @@ onMounted(() => {
               <LazyCellRichText :value="field?.description" class="!h-auto -ml-1" is-form-field read-only sync-value-change />
             </div>
 
-            <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
-              <LazySmartsheetVirtualCell
-                v-if="isVirtualCol(field)"
-                v-model="formState[field.title]"
-                class="mt-0 nc-input h-auto"
-                :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-                :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :column="field"
-              />
-
-              <LazySmartsheetCell
-                v-else
-                v-model="formState[field.title]"
-                class="nc-input h-auto"
-                :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
-                :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :column="field"
-                :edit-enabled="!field?.read_only"
-                :read-only="field?.read_only"
-              />
-
-              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                  {{ error.$message }}
+            <NcTooltip :disabled="!field?.read_only">
+              <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
+
+              <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
+                <LazySmartsheetVirtualCell
+                  v-if="isVirtualCol(field)"
+                  v-model="formState[field.title]"
+                  class="mt-0 nc-input h-auto"
+                  :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+                  :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                  :read-only="field?.read_only"
+                />
+
+                <LazySmartsheetCell
+                  v-else
+                  v-model="formState[field.title]"
+                  class="nc-input h-auto"
+                  :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
+                  :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                  :edit-enabled="!field?.read_only"
+                  :read-only="field?.read_only"
+                />
+
+                <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                  <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                    {{ error.$message }}
+                  </div>
+
+                  <div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center">
+                    {{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }}
+                    <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> {{ $t('msg.makeLineBreak') }}
+                  </div>
                 </div>
-
-                <div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center">
-                  {{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }}
-                  <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> {{ $t('msg.makeLineBreak') }}
-                </div>
-              </div>
-            </LazySmartsheetDivDataCell>
+              </LazySmartsheetDivDataCell>
+            </NcTooltip>
           </div>
 
           <div class="ml-1 mt-4 flex w-full text-lg">