From 45b8a9f7fe4c798f100edc21d92b63e681325e0e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:16:32 +0000
Subject: [PATCH] feat(nc-gui): form view v2 setup

---
 .../nc-gui/components/smartsheet/Form.vue     | 1001 +++++++++--------
 .../nc-gui/components/tabs/Smartsheet.vue     |    2 +-
 2 files changed, 561 insertions(+), 442 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 9418a28734..cc62355778 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
+import { Pane, Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
 import { RelationTypes, UITypes, ViewTypes, getSystemColumns, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -113,6 +115,8 @@ const activeRow = ref('')
 
 const editEnabled = ref<boolean[]>([])
 
+const searchQuery = ref('')
+
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
@@ -402,509 +406,614 @@ const onFormItemClick = (element: any) => {
 </script>
 
 <template>
-  <template v-if="isMobileMode">
-    <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
-      <div class="text-gray-500 text-5xl font-semibold leading-16">
-        {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
-      </div>
-      <div class="text-gray-500 text-base font-medium leading-normal">
-        {{ $t('msg.formViewNotSupportedOnMobile') }}
-      </div>
-    </div>
-  </template>
-  <template v-else>
-    <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
-      <a-col :span="24">
-        <div v-if="formViewData" class="items-center justify-center text-center mt-2">
-          <a-alert type="success">
-            <template #message>
-              <div class="text-center">
-                {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
-              </div>
-            </template>
-          </a-alert>
-
-          <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
-            {{
-              $t('msg.newFormWillBeLoaded', {
-                seconds: secondsRemain,
-              })
-            }}
-          </div>
-
-          <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
-            <a-button type="primary" size="large" @click="submitted = false"> {{ $t('activity.submitAnotherForm') }}</a-button>
-          </div>
+  <div class="h-full">
+    <template v-if="isMobileMode">
+      <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
+        <div class="text-gray-500 text-5xl font-semibold leading-16">
+          {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
         </div>
-      </a-col>
-    </a-row>
-
-    <a-row v-else class="h-full flex" data-testid="nc-form-wrapper">
-      <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-dull nc-form-left-drawer">
-        <div class="flex flex-wrap gap-2">
-          <div class="flex-1 text-lg">
-            {{ $t('objects.fields') }}
-          </div>
-
-          <div class="flex flex-wrap gap-2 mb-4">
-            <NcButton
-              v-if="hiddenColumns.length"
-              type="secondary"
-              class="nc-form-add-all"
-              data-testid="nc-form-add-all"
-              :disabled="isLocked"
-              @click="addAllColumns"
-            >
-              <!-- Add all -->
-              {{ $t('general.addAll') }}
-            </NcButton>
-
-            <NcButton
-              v-if="localColumns.length"
-              type="secondary"
-              class="nc-form-remove-all"
-              data-testid="nc-form-remove-all"
-              :disabled="isLocked"
-              @click="removeAllColumns"
-            >
-              <!-- Remove all -->
-              {{ $t('general.removeAll') }}
-            </NcButton>
-          </div>
+        <div class="text-gray-500 text-base font-medium leading-normal">
+          {{ $t('msg.formViewNotSupportedOnMobile') }}
         </div>
-
-        <Draggable
-          :list="hiddenColumns"
-          item-key="id"
-          draggable=".item"
-          group="form-inputs"
-          :disabled="isLocked"
-          class="flex flex-col gap-2"
-          @start="drag = true"
-          @end="drag = false"
-        >
-          <template #item="{ element, index }">
-            <a-card
-              size="small"
-              class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
-              :class="{
-                '!bg-gray-50 !hover:bg-gray-50 !hover:ring-transparent !cursor-not-allowed': isLocked,
-              }"
-              :data-testid="`nc-form-hidden-column-${element.label || element.title}`"
-              @mousedown="moved = false"
-              @mousemove="moved = false"
-              @mouseup="handleMouseUp(element, index)"
-            >
-              <div class="flex">
-                <div class="flex flex-1">
-                  <LazySmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(element)"
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
-                  />
-
-                  <LazySmartsheetHeaderCell
-                    v-else
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
-                  />
+      </div>
+    </template>
+    <template v-else>
+      <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
+        <a-col :span="24">
+          <div v-if="formViewData" class="items-center justify-center text-center mt-2">
+            <a-alert type="success">
+              <template #message>
+                <div class="text-center">
+                  {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
                 </div>
-              </div>
-            </a-card>
-          </template>
+              </template>
+            </a-alert>
+
+            <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
+              {{
+                $t('msg.newFormWillBeLoaded', {
+                  seconds: secondsRemain,
+                })
+              }}
+            </div>
 
-          <template v-if="!isLocked" #footer>
-            <div
-              class="my-4 select-none border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide"
-              data-testid="nc-drag-n-drop-to-hide"
-            >
-              <!-- Drag and drop fields here to hide -->
-              {{ $t('msg.info.dragDropHide') }}
+            <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
+              <a-button type="primary" size="large" @click="submitted = false"> {{ $t('activity.submitAnotherForm') }}</a-button>
             </div>
+          </div>
+        </a-col>
+      </a-row>
 
-            <a-dropdown
-              v-model:visible="showColumnDropdown"
-              :trigger="['click']"
-              overlay-class-name="nc-dropdown-form-add-column"
-            >
-              <button type="button" class="group w-full mt-2" @click.stop="showColumnDropdown = true">
-                <span class="flex items-center flex-wrap justify-center gap-2 prose-sm text-gray-400">
-                  <component :is="iconMap.plus" class="color-transition transform group-hover:(text-accent scale-125)" />
-                  <!-- Add new field to this table -->
-                  <span class="color-transition group-hover:text-primary break-words">
-                    {{ $t('activity.addField') }}
-                  </span>
-                </span>
-              </button>
-
-              <template #overlay>
-                <SmartsheetColumnEditOrAddProvider
-                  v-if="showColumnDropdown"
-                  @submit="submitCallback"
-                  @cancel="showColumnDropdown = false"
-                  @click.stop
-                  @keydown.stop
-                />
-              </template>
-            </a-dropdown>
-          </template>
-        </Draggable>
-      </a-col>
-
-      <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-dull">
-        <div class="h-[200px] bg-primary bg-opacity-75">
-          <!-- for future implementation of cover image -->
-        </div>
+      <a-row v-else class="h-full flex" data-testid="nc-form-wrapper">
+        <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-dull p-6 bg-gray-50">
+          <div class="h-[160px] bg-primary bg-opacity-75 border-gray-200 rounded-3xl">
+            <!-- for future implementation of cover image -->
+          </div>
 
-        <a-card
-          class="p-4 border-none"
-          :body-style="{
-            maxWidth: 'max(50vw, 700px)',
-            margin: '0 auto',
-            marginTop: '-200px',
-            padding: '0px',
-          }"
-        >
-          <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-            <a-card class="!rounded !shadow !m-2 md:(!m-4) xl:(!m-8)" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
-              <!-- Header -->
-              <div v-if="isEditable" class="px-4 lg:px-12">
-                <a-form-item v-if="isEditable">
-                  <a-textarea
-                    v-model:value="formViewData.heading"
-                    class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                    :style="{
-                      'borderRightWidth': '0px !important',
-                      'height': '70px',
-                      'max-height': '250px',
-                      'resize': 'vertical',
-                    }"
-                    autosize
-                    size="large"
-                    hide-details
-                    :disabled="isLocked"
-                    placeholder="Form Title"
-                    :bordered="false"
-                    data-testid="nc-form-heading"
-                    @blur="updateView"
-                    @keydown.enter="updateView"
-                  />
-                </a-form-item>
-              </div>
-              <div v-else class="px-4 ml-3 w-full text-bold text-4xl">
-                {{ formViewData.heading }}
-              </div>
+          <a-card
+            class="p-4 border-none !mt-6 max-w-[688px] !mx-auto"
+            :body-style="{
+              maxWidth: 'max(50vw, 700px)',
+              margin: '0 auto',
+
+              padding: '0px',
+            }"
+          >
+            <a-form ref="formRef" :model="formState" class="nc-form" no-style>
+              <a-card class="!rounded !shadow !m-2 md:(!m-4) xl:(!m-8)" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+                <!-- Header -->
+                <div v-if="isEditable" class="px-4 lg:px-12">
+                  <a-form-item v-if="isEditable">
+                    <a-textarea
+                      v-model:value="formViewData.heading"
+                      class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
+                      :style="{
+                        'borderRightWidth': '0px !important',
+                        'height': '70px',
+                        'max-height': '250px',
+                        'resize': 'vertical',
+                      }"
+                      autosize
+                      size="large"
+                      hide-details
+                      :disabled="isLocked"
+                      placeholder="Form Title"
+                      :bordered="false"
+                      data-testid="nc-form-heading"
+                      @blur="updateView"
+                      @keydown.enter="updateView"
+                    />
+                  </a-form-item>
+                </div>
+                <div v-else class="px-4 ml-3 w-full text-bold text-4xl">
+                  {{ formViewData.heading }}
+                </div>
 
-              <!-- Sub Header -->
-              <div v-if="isEditable" class="px-4 lg:px-12">
-                <a-form-item>
-                  <a-textarea
-                    v-model:value="formViewData.subheading"
-                    class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                    :style="{
-                      'borderRightWidth': '0px !important',
-                      'height': '40px',
-                      'min-height': '40px',
-                      'resize': 'vertical',
-                    }"
-                    size="large"
-                    autosize
-                    hide-details
-                    :placeholder="$t('msg.info.formDesc')"
-                    :bordered="false"
-                    :disabled="!isEditable || isLocked"
-                    data-testid="nc-form-sub-heading"
-                    @blur="updateView"
-                    @click="updateView"
-                  />
-                </a-form-item>
-              </div>
+                <!-- Sub Header -->
+                <div v-if="isEditable" class="px-4 lg:px-12">
+                  <a-form-item>
+                    <a-textarea
+                      v-model:value="formViewData.subheading"
+                      class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
+                      :style="{
+                        'borderRightWidth': '0px !important',
+                        'height': '40px',
+                        'min-height': '40px',
+                        'resize': 'vertical',
+                      }"
+                      size="large"
+                      autosize
+                      hide-details
+                      :placeholder="$t('msg.info.formDesc')"
+                      :bordered="false"
+                      :disabled="!isEditable || isLocked"
+                      data-testid="nc-form-sub-heading"
+                      @blur="updateView"
+                      @click="updateView"
+                    />
+                  </a-form-item>
+                </div>
 
-              <div v-else class="px-4 ml-3 w-full text-bold text-md">
-                {{ formViewData.subheading || '---' }}
-              </div>
+                <div v-else class="px-4 ml-3 w-full text-bold text-md">
+                  {{ formViewData.subheading || '---' }}
+                </div>
 
-              <Draggable
-                ref="draggableRef"
-                :list="localColumns"
-                item-key="fk_column_id"
-                draggable=".item"
-                group="form-inputs"
-                class="h-full"
-                :move="onMoveCallback"
-                :disabled="isLocked"
-                @change="onMove($event)"
-                @start="drag = true"
-                @end="drag = false"
-              >
-                <template #item="{ element, index }">
-                  <div
-                    class="color-transition nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
-                    :class="[
-                      `nc-form-drag-${element.title.replaceAll(' ', '')}`,
-                      {
-                        'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
-                      },
-                      {
-                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                      },
-                    ]"
-                    data-testid="nc-form-fields"
-                    @click="onFormItemClick(element)"
-                  >
+                <Draggable
+                  ref="draggableRef"
+                  :list="localColumns"
+                  item-key="fk_column_id"
+                  draggable=".item"
+                  group="form-inputs"
+                  class="h-full"
+                  :move="onMoveCallback"
+                  :disabled="isLocked"
+                  @change="onMove($event)"
+                  @start="drag = true"
+                  @end="drag = false"
+                >
+                  <template #item="{ element, index }">
                     <div
-                      v-if="isUIAllowed('viewFieldEdit') && !isRequired(element, element.required) && !isLocked"
-                      class="absolute flex top-2 right-2"
+                      class="color-transition nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
+                      :class="[
+                        `nc-form-drag-${element.title.replaceAll(' ', '')}`,
+                        {
+                          'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
+                        },
+                        {
+                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                        },
+                      ]"
+                      data-testid="nc-form-fields"
+                      @click="onFormItemClick(element)"
                     >
-                      <component
-                        :is="iconMap.eyeSlash"
-                        class="opacity-0 nc-field-remove-icon"
-                        data-testid="nc-field-remove-icon"
-                        @click.stop="hideColumn(index)"
-                      />
-                    </div>
-
-                    <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
-                      <div class="flex gap-2 items-center">
-                        <span
-                          class="text-gray-500 mr-2 nc-form-input-required"
-                          data-testid="nc-form-input-required"
-                          @click="
-                            () => {
-                              element.required = !element.required
-                              updateColMeta(element)
-                            }
-                          "
-                        >
-                          {{ $t('general.required') }}
-                        </span>
-
-                        <a-switch
-                          v-model:checked="element.required"
-                          v-e="['a:form-view:field:mark-required']"
-                          size="small"
-                          @change="updateColMeta(element)"
+                      <div
+                        v-if="isUIAllowed('viewFieldEdit') && !isRequired(element, element.required) && !isLocked"
+                        class="absolute flex top-2 right-2"
+                      >
+                        <component
+                          :is="iconMap.eyeSlash"
+                          class="opacity-0 nc-field-remove-icon"
+                          data-testid="nc-field-remove-icon"
+                          @click.stop="hideColumn(index)"
                         />
                       </div>
 
-                      <a-form-item v-if="columnSupportsScanning(element.uidt)" class="my-0 w-1/2 !mb-1">
+                      <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
                         <div class="flex gap-2 items-center">
                           <span
                             class="text-gray-500 mr-2 nc-form-input-required"
-                            data-testid="nc-form-input-enable-scanner"
+                            data-testid="nc-form-input-required"
                             @click="
                               () => {
-                                element.general.enable_scanner = !element.general.enable_scanner
+                                element.required = !element.required
                                 updateColMeta(element)
                               }
                             "
                           >
-                            {{ $t('general.enableScanner') }}
+                            {{ $t('general.required') }}
                           </span>
 
                           <a-switch
-                            v-model:checked="element.enable_scanner"
-                            v-e="['a:form-view:field:mark-enable-scaner']"
+                            v-model:checked="element.required"
+                            v-e="['a:form-view:field:mark-required']"
                             size="small"
                             @change="updateColMeta(element)"
                           />
                         </div>
-                      </a-form-item>
 
-                      <a-form-item class="my-0 w-1/2 !mb-1">
-                        <a-input
-                          v-model:value="element.label"
-                          type="text"
-                          class="form-meta-input nc-form-input-label"
+                        <a-form-item v-if="columnSupportsScanning(element.uidt)" class="my-0 w-1/2 !mb-1">
+                          <div class="flex gap-2 items-center">
+                            <span
+                              class="text-gray-500 mr-2 nc-form-input-required"
+                              data-testid="nc-form-input-enable-scanner"
+                              @click="
+                                () => {
+                                  element.general.enable_scanner = !element.general.enable_scanner
+                                  updateColMeta(element)
+                                }
+                              "
+                            >
+                              {{ $t('general.enableScanner') }}
+                            </span>
+
+                            <a-switch
+                              v-model:checked="element.enable_scanner"
+                              v-e="['a:form-view:field:mark-enable-scaner']"
+                              size="small"
+                              @change="updateColMeta(element)"
+                            />
+                          </div>
+                        </a-form-item>
+
+                        <a-form-item class="my-0 w-1/2 !mb-1">
+                          <a-input
+                            v-model:value="element.label"
+                            type="text"
+                            class="form-meta-input nc-form-input-label"
+                            data-testid="nc-form-input-label"
+                            :placeholder="$t('msg.info.formInput')"
+                            @change="updateColMeta(element)"
+                          >
+                          </a-input>
+                        </a-form-item>
+
+                        <a-form-item class="mt-2 mb-0 w-1/2">
+                          <a-input
+                            v-model:value="element.description"
+                            type="text"
+                            class="form-meta-input text-sm nc-form-input-help-text"
+                            data-testid="nc-form-input-help-text"
+                            :placeholder="$t('msg.info.formHelpText')"
+                            @change="updateColMeta(element)"
+                          />
+                        </a-form-item>
+                      </div>
+
+                      <div>
+                        <LazySmartsheetHeaderVirtualCell
+                          v-if="isVirtualCol(element)"
+                          :column="{ ...element, title: element.label || element.title }"
+                          :required="isRequired(element, element.required)"
+                          :hide-menu="true"
                           data-testid="nc-form-input-label"
-                          :placeholder="$t('msg.info.formInput')"
-                          @change="updateColMeta(element)"
-                        >
-                        </a-input>
-                      </a-form-item>
+                        />
 
-                      <a-form-item class="mt-2 mb-0 w-1/2">
-                        <a-input
-                          v-model:value="element.description"
-                          type="text"
-                          class="form-meta-input text-sm nc-form-input-help-text"
-                          data-testid="nc-form-input-help-text"
-                          :placeholder="$t('msg.info.formHelpText')"
-                          @change="updateColMeta(element)"
+                        <LazySmartsheetHeaderCell
+                          v-else
+                          :column="{ ...element, title: element.label || element.title }"
+                          :required="isRequired(element, element.required)"
+                          :hide-menu="true"
+                          data-testid="nc-form-input-label"
                         />
-                      </a-form-item>
-                    </div>
+                      </div>
 
-                    <div>
-                      <LazySmartsheetHeaderVirtualCell
+                      <a-form-item
                         v-if="isVirtualCol(element)"
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                        data-testid="nc-form-input-label"
-                      />
-
-                      <LazySmartsheetHeaderCell
-                        v-else
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                        data-testid="nc-form-input-label"
-                      />
-                    </div>
-
-                    <a-form-item
-                      v-if="isVirtualCol(element)"
-                      :name="element.title"
-                      class="!mb-0 nc-input-required-error nc-form-input-item"
-                      :rules="[
-                        {
-                          required: isRequired(element, element.required),
-                          message: `${element.label || element.title} is required`,
-                        },
-                      ]"
-                    >
-                      <LazySmartsheetVirtualCell
-                        v-model="formState[element.title]"
-                        :row="row"
-                        class="nc-input"
-                        :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                        :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                        :column="element"
-                        @click.stop.prevent
-                      />
-                    </a-form-item>
-
-                    <a-form-item
-                      v-else
-                      :name="element.title"
-                      class="!mb-0 nc-input-required-error nc-form-input-item"
-                      :rules="[
-                        {
-                          required: isRequired(element, element.required),
-                          message: `${element.label || element.title} is required`,
-                        },
-                      ]"
-                    >
-                      <LazySmartsheetDivDataCell class="relative">
-                        <LazySmartsheetCell
+                        :name="element.title"
+                        class="!mb-0 nc-input-required-error nc-form-input-item"
+                        :rules="[
+                          {
+                            required: isRequired(element, element.required),
+                            message: `${element.label || element.title} is required`,
+                          },
+                        ]"
+                      >
+                        <LazySmartsheetVirtualCell
                           v-model="formState[element.title]"
-                          class="nc-input truncate"
+                          :row="row"
+                          class="nc-input"
                           :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                           :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                           :column="element"
-                          :edit-enabled="editEnabled[index]"
-                          @click="editEnabled[index] = true"
-                          @cancel="editEnabled[index] = false"
-                          @update:edit-enabled="editEnabled[index] = $event"
                           @click.stop.prevent
                         />
-                      </LazySmartsheetDivDataCell>
-                    </a-form-item>
+                      </a-form-item>
 
-                    <div class="nc-form-help-text text-gray-500 text-xs truncate" data-testid="nc-form-input-help-text-label">
-                      {{ element.description }}
+                      <a-form-item
+                        v-else
+                        :name="element.title"
+                        class="!mb-0 nc-input-required-error nc-form-input-item"
+                        :rules="[
+                          {
+                            required: isRequired(element, element.required),
+                            message: `${element.label || element.title} is required`,
+                          },
+                        ]"
+                      >
+                        <LazySmartsheetDivDataCell class="relative">
+                          <LazySmartsheetCell
+                            v-model="formState[element.title]"
+                            class="nc-input truncate"
+                            :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                            :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                            :column="element"
+                            :edit-enabled="editEnabled[index]"
+                            @click="editEnabled[index] = true"
+                            @cancel="editEnabled[index] = false"
+                            @update:edit-enabled="editEnabled[index] = $event"
+                            @click.stop.prevent
+                          />
+                        </LazySmartsheetDivDataCell>
+                      </a-form-item>
+
+                      <div class="nc-form-help-text text-gray-500 text-xs truncate" data-testid="nc-form-input-help-text-label">
+                        {{ element.description }}
+                      </div>
                     </div>
-                  </div>
-                </template>
+                  </template>
 
-                <template #footer>
-                  <div
-                    v-if="!localColumns.length"
-                    class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                  <template #footer>
+                    <div
+                      v-if="!localColumns.length"
+                      class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                    >
+                      {{ $t('activity.dragAndDropFieldsHereToAdd') }}
+                    </div>
+                  </template>
+                </Draggable>
+
+                <div class="justify-center flex mt-6">
+                  <NcButton
+                    html-type="submit"
+                    type="primary"
+                    :disabled="!isUIAllowed('dataInsert')"
+                    class="nc-form-submit"
+                    data-testid="nc-form-submit"
+                    @click="submitForm"
                   >
-                    {{ $t('activity.dragAndDropFieldsHereToAdd') }}
+                    {{ $t('general.submit') }}
+                  </NcButton>
+                </div>
+              </a-card>
+            </a-form>
+
+            <a-divider v-if="!isLocked" />
+          </a-card>
+        </a-col>
+        <a-col v-if="isEditable" :span="8" class="h-full nc-form-left-drawer border-l border-gray-200">
+          <Splitpanes horizontal class="w-full nc-form-right-splitpane">
+            <Pane min-size="40%" size="50" class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4">
+              <div class="flex flex-wrap justify-between items-center gap-2">
+                <div class="flex gap-3">
+                  <div class="text-base font-bold text-gray-900">
+                    <!-- {{ $t('objects.fields') }} -->
+                    Form Fields
                   </div>
-                </template>
-              </Draggable>
-
-              <div class="justify-center flex mt-6">
-                <NcButton
-                  html-type="submit"
-                  type="primary"
-                  :disabled="!isUIAllowed('dataInsert')"
-                  class="nc-form-submit"
-                  data-testid="nc-form-submit"
-                  @click="submitForm"
+                  <NcBadge color="border-gray-200" class=""> 22/26 Field </NcBadge>
+                </div>
+
+                <a-dropdown
+                  v-model:visible="showColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-form-add-column"
                 >
-                  {{ $t('general.submit') }}
-                </NcButton>
+                  <NcButton
+                    v-if="hiddenColumns.length"
+                    type="secondary"
+                    size="small"
+                    class="nc-form-add-field"
+                    data-testid="nc-form-add-field"
+                    @click.stop="showColumnDropdown = true"
+                  >
+                    <div class="flex gap-2 items-center">
+                      <component :is="iconMap.plus" class="color-transition transform group-hover:(text-accent scale-125)" />
+                      <span> Add Field </span>
+                    </div>
+                  </NcButton>
+
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAddProvider
+                      v-if="showColumnDropdown"
+                      @submit="submitCallback"
+                      @cancel="showColumnDropdown = false"
+                      @click.stop
+                      @keydown.stop
+                    />
+                  </template>
+                </a-dropdown>
+                <!-- <NcButton
+                    v-if="hiddenColumns.length"
+                    type="secondary"
+                    class="nc-form-add-all"
+                    data-testid="nc-form-add-all"
+                    :disabled="isLocked"
+                    @click="addAllColumns"
+                  >
+                    Add all
+                    {{ $t('general.addAll') }}
+                  </NcButton>
+
+                  <NcButton
+                    v-if="localColumns.length"
+                    type="secondary"
+                    class="nc-form-remove-all"
+                    data-testid="nc-form-remove-all"
+                    :disabled="isLocked"
+                    @click="removeAllColumns"
+                  >
+                    Remove all
+                    {{ $t('general.removeAll') }}
+                  </NcButton> -->
+              </div>
+              <div>
+                <a-input
+                  v-model:value="searchQuery"
+                  data-testid="nc-form-field-search-input"
+                  class="!h-9 !px-3 !py-1 !rounded-lg"
+                  :placeholder="$t('placeholder.searchFields') + '...'"
+                >
+                  <template #prefix>
+                    <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+                  </template>
+                  <template #suffix>
+                    <GeneralIcon
+                      v-if="searchQuery.length > 0"
+                      icon="close"
+                      class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
+                      data-testid="nc-form-field-clear-search"
+                      @click="searchQuery = ''"
+                    />
+                  </template>
+                </a-input>
               </div>
-            </a-card>
-          </a-form>
+              <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto">
+                <div
+                  v-if="!hiddenColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
+                  class="px-0.5 py-2 text-gray-500 text-center"
+                >
+                  {{ $t('title.noFieldsFound') }}
+                </div>
 
-          <a-divider v-if="!isLocked" />
+                <Draggable
+                  v-else
+                  v-model="hiddenColumns"
+                  item-key="id"
+                  @change="onMove($event)"
+                  :style="{ height: 'calc(100% - 64px)' }"
+                >
+                  <template #item="{ element: field }">
+                    <div
+                      v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
+                      :key="field.id"
+                      class="p-2 flex flex-row items-center border-b-1 last:border-none first:rounded-t-lg border-gray-200"
+                      :data-testid="`nc-form-field-item-${field.title}`"
+                      @click.stop
+                    >
+                      <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                      <div
+                        class="flex-1 flex items-center justify-between cursor-pointer"
+                        @click="
+                          () => {
+                            field.show = !field.show
+                          }
+                        "
+                      >
+                        <div class="flex-1 flex items-center">
+                          <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                          <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+
+                          <NcTooltip class="truncate flex-1 ml-1" show-on-truncate-only>
+                            <template #title> {{ field.title }} </template>
+                            <span data-testid="nc-field-title">
+                              {{ field.title }}
+                            </span>
+                          </NcTooltip>
+                        </div>
 
-          <div v-if="isEditable && !isLocked" class="px-4 flex flex-col gap-2">
-            <!-- After form is submitted -->
-            <div class="text-lg text-gray-700">
-              {{ $t('msg.info.afterFormSubmitted') }}
-            </div>
+                        <NcSwitch :checked="field.show" />
+                      </div>
+                    </div>
+                  </template>
+                  <template #header>
+                    <div
+                      key="nc-form-show-all-fields"
+                      class="w-full px-2 py-2 flex flex-row items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100 overflow-hidden"
+                      data-testid="nc"
+                      @click.stop
+                    >
+                      <div class="w-4 h-4 flex-none mr-2"></div>
 
-            <!-- Show this message -->
-            <div class="text-gray-500 text-bold">{{ $t('msg.info.showMessage') }}:</div>
-            <a-textarea
-              v-model:value="formViewData.success_msg"
-              :rows="3"
-              hide-details
-              class="nc-form-after-submit-msg"
-              data-testid="nc-form-after-submit-msg"
-              @change="updateView"
-            />
-
-            <!-- Other options -->
-            <div class="flex flex-col gap-2 mt-4">
-              <div class="flex items-center">
-                <!-- Show "Submit Another Form" button -->
-                <a-switch
-                  v-model:checked="formViewData.submit_another_form"
-                  v-e="[`a:form-view:submit-another-form`]"
-                  size="small"
-                  class="nc-form-checkbox-submit-another-form"
-                  data-testid="nc-form-checkbox-submit-another-form"
-                  @change="updateView"
-                />
-                <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                      <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                        <div class="flex-1 font-base">Select all fields</div>
+                        <NcSwitch :checked="true" />
+                      </div>
+                    </div>
+                  </template>
+                </Draggable>
+              </div>
+            </Pane>
+            <Pane
+              v-if="isEditable && !isLocked && formViewData"
+              min-size="20%"
+              size="35"
+              class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4 !overflow-y-auto nc-scrollbar-x-lg"
+            >
+              <!-- After form is submitted -->
+              <div class="text-base font-bold text-gray-900">
+                Post Form Submission Settings
+                <!-- {{ $t('msg.info.afterFormSubmitted') }} -->
               </div>
 
-              <div class="flex items-center">
-                <!-- Show a blank form after 5 seconds -->
-                <a-switch
-                  v-model:checked="formViewData.show_blank_form"
-                  v-e="[`a:form-view:show-blank-form`]"
-                  size="small"
-                  class="nc-form-checkbox-show-blank-form"
-                  data-testid="nc-form-checkbox-show-blank-form"
+              <!-- Show this message -->
+              <div>
+                <div class="text-gray-800 mb-2">
+                  Display Message
+                  <!-- {{ $t('msg.info.showMessage') }} -->
+                </div>
+                <a-textarea
+                  v-model:value="formViewData.success_msg as string"
+                  :rows="3"
+                  hide-details
+                  class="nc-form-after-submit-msg !rounded-lg !px-3 !py-1"
+                  data-testid="nc-form-after-submit-msg"
                   @change="updateView"
                 />
+              </div>
 
-                <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
+              <!-- Other options -->
+              <div class="flex flex-col gap-3">
+                <div class="flex items-center">
+                  <!-- Show "Submit Another Form" button -->
+                  <a-switch
+                    v-model:checked="formViewData.submit_another_form as boolean"
+                    v-e="[`a:form-view:submit-another-form`]"
+                    size="small"
+                    class="nc-form-checkbox-submit-another-form"
+                    data-testid="nc-form-checkbox-submit-another-form"
+                    @change="updateView"
+                  />
+                  <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                </div>
+
+                <div class="flex items-center">
+                  <!-- Show a blank form after 5 seconds -->
+                  <a-switch
+                    v-model:checked="formViewData.show_blank_form  as boolean"
+                    v-e="[`a:form-view:show-blank-form`]"
+                    size="small"
+                    class="nc-form-checkbox-show-blank-form"
+                    data-testid="nc-form-checkbox-show-blank-form"
+                    @change="updateView"
+                  />
+
+                  <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
+                </div>
+
+                <div class="mb-12 flex items-center">
+                  <a-switch
+                    v-model:checked="emailMe"
+                    v-e="[`a:form-view:email-me`]"
+                    size="small"
+                    class="nc-form-checkbox-send-email"
+                    data-testid="nc-form-checkbox-send-email"
+                    @change="onEmailChange"
+                  />
+
+                  <!-- Email me at <email> -->
+                  <span class="ml-4">
+                    {{ $t('msg.info.emailForm') }}
+                    <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                  </span>
+                </div>
               </div>
+            </Pane>
+            <!-- <Draggable
+            :list="hiddenColumns"
+            item-key="id"
+            draggable=".item"
+            group="form-inputs"
+            :disabled="isLocked"
+            class="flex flex-col gap-2"
+            @start="drag = true"
+            @end="drag = false"
+          >
+            <template #item="{ element, index }">
+              <a-card
+                size="small"
+                class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
+                :class="{
+                  '!bg-gray-50 !hover:bg-gray-50 !hover:ring-transparent !cursor-not-allowed': isLocked,
+                }"
+                :data-testid="`nc-form-hidden-column-${element.label || element.title}`"
+                @mousedown="moved = false"
+                @mousemove="moved = false"
+                @mouseup="handleMouseUp(element, index)"
+              >
+                <div class="flex">
+                  <div class="flex flex-1">
+                    <LazySmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(element)"
+                      :column="{ ...element, title: element.label || element.title }"
+                      :required="isRequired(element, element.required)"
+                      :hide-menu="true"
+                    />
 
-              <div class="mb-12 flex items-center">
-                <a-switch
-                  v-model:checked="emailMe"
-                  v-e="[`a:form-view:email-me`]"
-                  size="small"
-                  class="nc-form-checkbox-send-email"
-                  data-testid="nc-form-checkbox-send-email"
-                  @change="onEmailChange"
-                />
+                    <LazySmartsheetHeaderCell
+                      v-else
+                      :column="{ ...element, title: element.label || element.title }"
+                      :required="isRequired(element, element.required)"
+                      :hide-menu="true"
+                    />
+                  </div>
+                </div>
+              </a-card>
+            </template>
 
-                <!-- Email me at <email> -->
-                <span class="ml-4">
-                  {{ $t('msg.info.emailForm') }}
-                  <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                </span>
+            <template v-if="!isLocked" #footer>
+              <div
+                class="my-4 select-none border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide"
+                data-testid="nc-drag-n-drop-to-hide"
+              >
+                
+                {{ $t('msg.info.dragDropHide') }}
               </div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </template>
+            </template>
+          </Draggable> -->
+          </Splitpanes></a-col
+        >
+      </a-row>
+    </template>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -967,4 +1076,14 @@ const onFormItemClick = (element: any) => {
     @apply !border-none;
   }
 }
+
+:deep(.nc-form-right-splitpane .splitpanes__splitter) {
+  @apply !border-b-1 !border-gray-200;
+
+  ::after {
+    content: 'e945';
+  }
+}
+.nc-form-fields-list {
+}
 </style>
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 23fceac8a6..269212f5cc 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -171,7 +171,7 @@ watch([activeViewTitleOrId, activeTableId], () => {
     <div style="height: calc(100% - var(--topbar-height))">
       <div v-if="openedViewsTab === 'view'" class="flex flex-col h-full flex-1 min-w-0">
         <LazySmartsheetToolbar v-if="!isForm" />
-        <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
+        <div class="flex flex-row w-full" :style="{ height: isForm ? '100%' : 'calc(100% - var(--topbar-height))' }">
           <Transition name="layout" mode="out-in">
             <div v-if="openedViewsTab === 'view'" class="flex flex-1 min-h-0 w-3/4">
               <div class="h-full flex-1 min-w-0 min-h-0 bg-white">