From 31248ba5dd496385e563309a475489aa950b1683 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:19 +0000
Subject: [PATCH 01/18] fix(nc-gui): splitpanes typeerror:  Cannot read
 properties of null (reading 'children')

---
 packages/nc-gui/components/smartsheet/Form.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 3eda8c15d1..285dd9a81d 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1145,7 +1145,7 @@ useEventListener(
           </div>
         </div>
         <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
-          <Splitpanes horizontal class="w-full nc-form-right-splitpane">
+          <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
             <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
               <div class="flex flex-wrap justify-between items-center gap-2">
                 <div class="flex gap-3">
@@ -1298,12 +1298,7 @@ useEventListener(
                 </template>
               </div>
             </Pane>
-            <Pane
-              v-if="formViewData"
-              min-size="20"
-              size="50"
-              class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar"
-            >
+            <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
               <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
                 <!-- Appearance Settings -->
                 <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>

From 5a4a6eb7d9568e5d596ccfe2bbb14bde78c39448 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:19 +0000
Subject: [PATCH 02/18] feat(nc-gui): add single select list options layout

---
 .../nc-gui/components/cell/SingleSelect.vue   | 190 ++++++++++++------
 .../nc-gui/components/smartsheet/Form.vue     |  60 +++++-
 packages/nc-gui/lang/en.json                  |   5 +-
 3 files changed, 179 insertions(+), 76 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 1ca601c92f..fac921b5c7 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -272,82 +272,66 @@ const onFocus = () => {
 <template>
   <div
     class="nc-cell-field h-full w-full flex items-center nc-single-select focus:outline-transparent"
-    :class="{ 'read-only': readOnly }"
+    :class="{ 'read-only': readOnly, 'max-w-full': isForm }"
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
-    <div v-if="!(active || isEditable)" class="w-full">
-      <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
-        <span
-          :style="{
-            'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-              ? '#fff'
-              : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-            'font-size': '13px',
-          }"
-          :class="{ 'text-sm': isKanban }"
+    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="max-w-full">
+      <a-radio-group v-model:value="vModel" class="nc-field-layout-list">
+        <a-radio
+          v-for="op of options"
+          :key="op.title"
+          :value="op.title"
+          :data-testid="`select-option-${column.title}-${rowIndex}`"
+          :class="`nc-select-option-${column.title}-${op.title}`"
         >
-          <NcTooltip class="truncate max-w-full" show-on-truncate-only>
-            <template #title>
-              {{ selectedOpt.title }}
-            </template>
+          <a-tag class="rounded-tag max-w-full" :color="op.color">
             <span
-              class="text-ellipsis overflow-hidden"
               :style="{
-                wordBreak: 'keep-all',
-                whiteSpace: 'nowrap',
-                display: 'inline',
+                'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
               }"
             >
-              {{ selectedOpt.title }}
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ op.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ op.title }}
+                </span>
+              </NcTooltip>
             </span>
-          </NcTooltip>
-        </span>
-      </a-tag>
+          </a-tag></a-radio
+        >
+      </a-radio-group>
+      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = ''">
+        {{ $t('labels.clearSelection') }}
+      </div>
     </div>
-
-    <NcSelect
-      v-else
-      ref="aselect"
-      v-model:value="vModel"
-      class="w-full overflow-hidden xs:min-h-12"
-      :class="{ 'caret-transparent': !hasEditRoles }"
-      :placeholder="isEditColumn ? $t('labels.optional') : ''"
-      :allow-clear="!column.rqd && editAllowed"
-      :bordered="false"
-      :open="isOpen && editAllowed"
-      :disabled="readOnly || !editAllowed"
-      :show-search="!isMobileMode && isOpen && active"
-      :show-arrow="hasEditRoles && !readOnly && active && (vModel === null || vModel === undefined)"
-      :dropdown-class-name="`nc-dropdown-single-select-cell !min-w-200px ${isOpen && active ? 'active' : ''}`"
-      :dropdown-match-select-width="true"
-      @select="onSelect"
-      @keydown="onKeydown($event)"
-      @search="search"
-      @blur="isOpen = false"
-      @focus="onFocus"
-    >
-      <a-select-option
-        v-for="op of options"
-        :key="op.title"
-        :value="op.title"
-        :data-testid="`select-option-${column.title}-${rowIndex}`"
-        :class="`nc-select-option-${column.title}-${op.title}`"
-        @click.stop
-      >
-        <a-tag class="rounded-tag max-w-full" :color="op.color">
+    <template v-else>
+      <div v-if="!(active || isEditable)" class="w-full">
+        <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
           <span
             :style="{
-              'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+              'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
                 ? '#fff'
-                : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
               'font-size': '13px',
             }"
             :class="{ 'text-sm': isKanban }"
           >
             <NcTooltip class="truncate max-w-full" show-on-truncate-only>
               <template #title>
-                {{ op.title }}
+                {{ selectedOpt.title }}
               </template>
               <span
                 class="text-ellipsis overflow-hidden"
@@ -357,21 +341,80 @@ const onFocus = () => {
                   display: 'inline',
                 }"
               >
-                {{ op.title }}
+                {{ selectedOpt.title }}
               </span>
             </NcTooltip>
           </span>
         </a-tag>
-      </a-select-option>
-      <a-select-option v-if="searchVal && isOptionMissing && isNewOptionCreateEnabled" :key="searchVal" :value="searchVal">
-        <div class="flex gap-2 text-gray-500 items-center h-full">
-          <component :is="iconMap.plusThick" class="min-w-4" />
-          <div class="text-xs whitespace-normal">
-            {{ $t('msg.selectOption.createNewOptionNamed') }} <strong>{{ searchVal }}</strong>
+      </div>
+
+      <NcSelect
+        v-else
+        ref="aselect"
+        v-model:value="vModel"
+        class="w-full overflow-hidden xs:min-h-12"
+        :class="{ 'caret-transparent': !hasEditRoles }"
+        :placeholder="isEditColumn ? $t('labels.optional') : ''"
+        :allow-clear="!column.rqd && editAllowed"
+        :bordered="false"
+        :open="isOpen && editAllowed"
+        :disabled="readOnly || !editAllowed"
+        :show-search="!isMobileMode && isOpen && active"
+        :show-arrow="hasEditRoles && !readOnly && active && (vModel === null || vModel === undefined)"
+        :dropdown-class-name="`nc-dropdown-single-select-cell !min-w-200px ${isOpen && active ? 'active' : ''}`"
+        :dropdown-match-select-width="true"
+        @select="onSelect"
+        @keydown="onKeydown($event)"
+        @search="search"
+        @blur="isOpen = false"
+        @focus="onFocus"
+      >
+        <a-select-option
+          v-for="op of options"
+          :key="op.title"
+          :value="op.title"
+          :data-testid="`select-option-${column.title}-${rowIndex}`"
+          :class="`nc-select-option-${column.title}-${op.title}`"
+          @click.stop
+        >
+          <a-tag class="rounded-tag max-w-full" :color="op.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+              :class="{ 'text-sm': isKanban }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ op.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ op.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </a-select-option>
+        <a-select-option v-if="searchVal && isOptionMissing && isNewOptionCreateEnabled" :key="searchVal" :value="searchVal">
+          <div class="flex gap-2 text-gray-500 items-center h-full">
+            <component :is="iconMap.plusThick" class="min-w-4" />
+            <div class="text-xs whitespace-normal">
+              {{ $t('msg.selectOption.createNewOptionNamed') }} <strong>{{ searchVal }}</strong>
+            </div>
           </div>
-        </div>
-      </a-select-option>
-    </NcSelect>
+        </a-select-option>
+      </NcSelect>
+    </template>
   </div>
 </template>
 
@@ -412,6 +455,19 @@ const onFocus = () => {
 :deep(.ant-select-clear > span) {
   @apply block;
 }
+.nc-field-layout-list {
+  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
+
+  :deep(.ant-radio-wrapper) {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+    .ant-radio {
+      @apply !top-0;
+    }
+    .ant-radio + span {
+      @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+    }
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 285dd9a81d..1709f6b9e0 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -157,6 +157,8 @@ const focusLabel: VNodeRef = (el) => {
 
 const searchQuery = ref('')
 
+const selectTypeFields = [UITypes.SingleSelect, UITypes.MultiSelect, UITypes.User]
+
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
@@ -893,13 +895,13 @@ useEventListener(
                       :class="[
                         `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                         {
-                          'rounded-2xl overflow-hidden border-2 cursor-pointer my-1': isEditable,
+                          'rounded-2xl overflow-hidden border-2 my-1': isEditable,
                         },
                         {
                           'p-4 lg:p-6 border-transparent my-0': !isEditable,
                         },
                         {
-                          'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 ':
+                          'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 cursor-pointer':
                             activeRow !== element.title && isEditable,
                         },
 
@@ -1069,7 +1071,10 @@ useEventListener(
                                 v-else
                                 v-model="formState[element.title]"
                                 class="nc-input truncate"
-                                :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                :class="[
+                                  `nc-form-input-${element.title.replaceAll(' ', '')}`,
+                                  { 'layout-list': element.meta.isList },
+                                ]"
                                 :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                                 :column="element"
                                 :edit-enabled="true"
@@ -1080,12 +1085,24 @@ useEventListener(
                       </div>
 
                       <!-- Field Settings  -->
-                      <!-- eslint-disable vue/no-constant-condition -->
                       <div
-                        v-if="activeRow === element.title && false"
-                        class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6"
+                        v-if="activeRow === element.title"
+                        class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3"
                       >
-                        <!-- Todo: Show on conditions, options limit,... -->
+                        <!-- Layout  -->
+                        <div v-if="selectTypeFields.includes(element.uidt)">
+                          <div>Layout</div>
+
+                          <a-radio-group
+                            v-model:value="element.meta.isList"
+                            class="nc-form-field-layout !mt-2"
+                            @change="updateColMeta(element)"
+                          >
+                            <a-radio :value="false">Dropdown</a-radio>
+                            <a-radio :value="true">List</a-radio>
+                          </a-radio-group>
+                        </div>
+                        <!-- Todo: Show on conditions,... -->
                         <div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
                           <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
                           <div>
@@ -1093,6 +1110,17 @@ useEventListener(
                             <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                           </div>
                         </div>
+                        <!-- Limit options -->
+                        <div
+                          v-if="selectTypeFields.includes(element.uidt)"
+                          class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg"
+                        >
+                          <a-switch v-e="['a:form-view:field:limit-options']" size="small" />
+                          <div>
+                            <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                            <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </template>
@@ -1469,7 +1497,13 @@ useEventListener(
 }
 
 .nc-input {
-  @apply appearance-none w-full !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
+  @apply appearance-none w-full;
+  &:not(.layout-list) {
+    @apply !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
+  }
+  &.layout-list {
+    @apply h-auto !pl-0;
+  }
   &.nc-cell-rating,
   &.nc-cell-geodata {
     @apply !py-1;
@@ -1576,4 +1610,14 @@ useEventListener(
 :deep(.nc-form-input-required + button):focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
 }
+.nc-form-field-layout {
+  @apply !flex !items-center w-full space-x-3;
+
+  :deep(.ant-radio-wrapper) {
+    @apply border-1 border-gray-200 rounded-lg !py-2 !px-3 basis-full !mr-0 !items-center;
+    .ant-radio {
+      @apply !top-0;
+    }
+  }
+}
 </style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 8d8dacb99b..3598e1f691 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -692,7 +692,10 @@
     "backgroundColor":"Background Color",
     "hideNocodbBranding":"Hide NocoDB Branding",
     "showOnConditions": "Show on condtions",
-    "showFieldOnConditionsMet":"Shows field only when conditions are met"
+    "showFieldOnConditionsMet":"Shows field only when conditions are met",
+    "limitOptions": "Limit ptions",
+    "limitOptionsSubtext": "Limit options visible to users by selecting available options",
+    "clearSelection": "Clear selection"
   },
   "activity": {
     "noRange": "Calendar view requires a date range",

From bfc13045d2585a81bdf0ff50d9ba82e3a635f5b7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 03/18] feat(nc-gui): list option for single & multiselect
 field

---
 .../nc-gui/components/cell/MultiSelect.vue    | 347 +++++++++++-------
 .../nc-gui/components/cell/SingleSelect.vue   |   2 +-
 .../nc-gui/components/smartsheet/Form.vue     |   2 +-
 3 files changed, 208 insertions(+), 143 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 34080cd190..eec679eb95 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -353,154 +353,194 @@ const onFocus = () => {
 <template>
   <div
     class="nc-cell-field nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly }"
+    :class="{ 'read-only': readOnly, readOnly, 'max-w-full': isForm }"
     @click="toggleMenu"
   >
-    <div
-      v-if="!active"
-      class="flex flex-wrap"
-      :style="{
-        'display': '-webkit-box',
-        'max-width': '100%',
-        '-webkit-line-clamp': rowHeight || 1,
-        '-webkit-box-orient': 'vertical',
-        'overflow': 'hidden',
-      }"
-    >
-      <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
-        <a-tag class="rounded-tag max-w-full" :color="selectedOpt.color">
-          <span
-            :style="{
-              'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-                ? '#fff'
-                : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-              'font-size': '13px',
-            }"
-            :class="{ 'text-sm': isKanban }"
-          >
-            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
-              <template #title>
-                {{ selectedOpt.title }}
-              </template>
-              <span
-                class="text-ellipsis overflow-hidden"
-                :style="{
-                  wordBreak: 'keep-all',
-                  whiteSpace: 'nowrap',
-                  display: 'inline',
-                }"
-              >
-                {{ selectedOpt.title }}
-              </span>
-            </NcTooltip>
-          </span>
-        </a-tag>
-      </template>
+    <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
+          v-for="op of options"
+          :key="op.title"
+          :value="op.title"
+          :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
+          :class="`nc-select-option-${column.title}-${op.title}`"
+        >
+          <a-tag class="rounded-tag max-w-full" :color="op.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ op.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ op.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </a-checkbox>
+      </a-checkbox-group>
     </div>
-
-    <a-select
-      v-else
-      ref="aselect"
-      v-model:value="vModel"
-      mode="multiple"
-      class="w-full overflow-hidden"
-      :placeholder="isEditColumn ? $t('labels.optional') : ''"
-      :bordered="false"
-      clear-icon
-      :show-search="!isMobileMode"
-      :show-arrow="editAllowed && !readOnly"
-      :open="isOpen && editAllowed"
-      :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles }"
-      :dropdown-class-name="`nc-dropdown-multi-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
-      @search="search"
-      @keydown="onKeyDown"
-      @focus="onFocus"
-      @blur="isOpen = false"
-    >
-      <template #suffixIcon>
-        <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
-      </template>
-      <a-select-option
-        v-for="op of options"
-        :key="op.id || op.title"
-        :value="op.title"
-        :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
-        :class="`nc-select-option-${column.title}-${op.title}`"
-        @click.stop
+    <template v-else>
+      <div
+        v-if="!active"
+        class="flex flex-wrap"
+        :style="{
+          'display': '-webkit-box',
+          'max-width': '100%',
+          '-webkit-line-clamp': rowHeight || 1,
+          '-webkit-box-orient': 'vertical',
+          'overflow': 'hidden',
+        }"
       >
-        <a-tag class="rounded-tag max-w-full" :color="op.color">
-          <span
-            :style="{
-              'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-                ? '#fff'
-                : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-              'font-size': '13px',
-            }"
-            :class="{ 'text-sm': isKanban }"
-          >
-            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
-              <template #title>
-                {{ op.title }}
-              </template>
-              <span
-                class="text-ellipsis overflow-hidden"
-                :style="{
-                  wordBreak: 'keep-all',
-                  whiteSpace: 'nowrap',
-                  display: 'inline',
-                }"
-              >
-                {{ op.title }}
-              </span>
-            </NcTooltip>
-          </span>
-        </a-tag>
-      </a-select-option>
-
-      <a-select-option
-        v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation && isUIAllowed('fieldEdit')"
-        :key="searchVal"
-        :value="searchVal"
+        <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
+          <a-tag class="rounded-tag max-w-full" :color="selectedOpt.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+              :class="{ 'text-sm': isKanban }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ selectedOpt.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ selectedOpt.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </template>
+      </div>
+
+      <a-select
+        v-else
+        ref="aselect"
+        v-model:value="vModel"
+        mode="multiple"
+        class="w-full overflow-hidden"
+        :placeholder="isEditColumn ? $t('labels.optional') : ''"
+        :bordered="false"
+        clear-icon
+        :show-search="!isMobileMode"
+        :show-arrow="editAllowed && !readOnly"
+        :open="isOpen && editAllowed"
+        :disabled="readOnly || !editAllowed"
+        :class="{ 'caret-transparent': !hasEditRoles }"
+        :dropdown-class-name="`nc-dropdown-multi-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
+        @search="search"
+        @keydown="onKeyDown"
+        @focus="onFocus"
+        @blur="isOpen = false"
       >
-        <div class="flex gap-2 text-gray-500 items-center h-full">
-          <component :is="iconMap.plusThick" class="min-w-4" />
-          <div class="text-xs whitespace-normal">
-            {{ $t('msg.selectOption.createNewOptionNamed') }} <strong>{{ searchVal }}</strong>
-          </div>
-        </div>
-      </a-select-option>
-
-      <template #tagRender="{ value: val, onClose }">
-        <a-tag
-          v-if="options.find((el) => el.title === val)"
-          class="rounded-tag nc-selected-option"
-          :style="{ display: 'flex', alignItems: 'center' }"
-          :color="options.find((el) => el.title === val)?.color"
-          :closable="editAllowed && (vModel.length > 1 || !column?.rqd)"
-          :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
-          @click="onTagClick($event, onClose)"
-          @close="onClose"
+        <template #suffixIcon>
+          <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
+        </template>
+        <a-select-option
+          v-for="op of options"
+          :key="op.id || op.title"
+          :value="op.title"
+          :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
+          :class="`nc-select-option-${column.title}-${op.title}`"
+          @click.stop
         >
-          <span
-            :style="{
-              'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
-                level: 'AA',
-                size: 'large',
-              })
-                ? '#fff'
-                : tinycolor
-                    .mostReadable(options.find((el) => el.title === val)?.color || '#ccc', ['#0b1d05', '#fff'])
-                    .toHex8String(),
-              'font-size': '13px',
-            }"
-            :class="{ 'text-sm': isKanban }"
+          <a-tag class="rounded-tag max-w-full" :color="op.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+              :class="{ 'text-sm': isKanban }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ op.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ op.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </a-select-option>
+
+        <a-select-option
+          v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation && isUIAllowed('fieldEdit')"
+          :key="searchVal"
+          :value="searchVal"
+        >
+          <div class="flex gap-2 text-gray-500 items-center h-full">
+            <component :is="iconMap.plusThick" class="min-w-4" />
+            <div class="text-xs whitespace-normal">
+              {{ $t('msg.selectOption.createNewOptionNamed') }} <strong>{{ searchVal }}</strong>
+            </div>
+          </div>
+        </a-select-option>
+
+        <template #tagRender="{ value: val, onClose }">
+          <a-tag
+            v-if="options.find((el) => el.title === val)"
+            class="rounded-tag nc-selected-option"
+            :style="{ display: 'flex', alignItems: 'center' }"
+            :color="options.find((el) => el.title === val)?.color"
+            :closable="editAllowed && (vModel.length > 1 || !column?.rqd)"
+            :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
+            @click="onTagClick($event, onClose)"
+            @close="onClose"
           >
-            {{ val }}
-          </span>
-        </a-tag>
-      </template>
-    </a-select>
+            <span
+              :style="{
+                'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
+                  level: 'AA',
+                  size: 'large',
+                })
+                  ? '#fff'
+                  : tinycolor
+                      .mostReadable(options.find((el) => el.title === val)?.color || '#ccc', ['#0b1d05', '#fff'])
+                      .toHex8String(),
+                'font-size': '13px',
+              }"
+              :class="{ 'text-sm': isKanban }"
+            >
+              {{ val }}
+            </span>
+          </a-tag>
+        </template>
+      </a-select>
+    </template>
   </div>
 </template>
 
@@ -570,6 +610,31 @@ const onFocus = () => {
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
+
+.nc-field-layout-list {
+  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
+
+  :deep(.ant-checkbox-wrapper) {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+
+    &:hover {
+      .ant-checkbox-checked:after {
+        @apply !rounded;
+      }
+    }
+    .ant-checkbox {
+      @apply !top-0;
+
+      & + span {
+        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+      }
+      .ant-checkbox-checked:after,
+      .ant-checkbox-inner {
+        @apply !rounded;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index fac921b5c7..fa37963d1f 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -276,7 +276,7 @@ const onFocus = () => {
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
-    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="max-w-full">
+    <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
           v-for="op of options"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 1709f6b9e0..ea84ba026a 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1502,7 +1502,7 @@ useEventListener(
     @apply !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
   }
   &.layout-list {
-    @apply h-auto !pl-0;
+    @apply h-auto !pl-0 !py-1;
   }
   &.nc-cell-rating,
   &.nc-cell-geodata {

From 3f5425cc82100b0dd09cc6de3610932744b688a0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 04/18] feat(nc-gui): list option for user select

---
 packages/nc-gui/components/cell/User.vue | 341 +++++++++++++++--------
 1 file changed, 223 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 2b89d774b5..244a5f21e6 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
 import tinycolor from 'tinycolor2'
+import { CheckboxGroup, Checkbox, RadioGroup, Radio } from 'ant-design-vue'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { UserFieldRecordType } from 'nocodb-sdk'
 import {
@@ -146,6 +147,14 @@ const vModel = computed({
   },
 })
 
+const vModelListLayout = computed(() => {
+  if (isMultiple) {
+    return (vModel.value || []).map((item) => item.value)
+  } else {
+    return (vModel.value || [])?.[0]?.value || ''
+  }
+})
+
 watch(isOpen, (n, _o) => {
   if (!n) searchVal.value = ''
 
@@ -266,87 +275,79 @@ const filterOption = (input: string, option: any) => {
     :class="{ 'read-only': readOnly }"
     @click="toggleMenu"
   >
-    <div
-      v-if="!active"
-      class="flex flex-wrap"
-      :style="{
-        'display': '-webkit-box',
-        'max-width': '100%',
-        '-webkit-line-clamp': rowHeight || 1,
-        '-webkit-box-orient': 'vertical',
-        'overflow': 'hidden',
-      }"
-    >
-      <template v-for="selectedOpt of vModel" :key="selectedOpt.value">
-        <a-tag class="rounded-tag max-w-full !pl-0" color="'#ccc'">
-          <span
-            :style="{
-              'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', { level: 'AA', size: 'large' })
-                ? '#fff'
-                : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-              'font-size': '13px',
-            }"
-            class="flex items-stretch gap-2"
-            :class="{ 'text-sm': isKanban }"
+    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
+      <component
+        :is="isMultiple ? CheckboxGroup : RadioGroup"
+        :model-value:value="vModelListLayout"
+        class="nc-field-layout-list"
+        @update:value="
+          (value) => {
+            // Todo: fix update single select user issue
+            vModel = isMultiple ? value : [value]
+          }
+        "
+      >
+        <template v-for="op of options" :key="op.id || op.email">
+          <component
+            v-if="!op.deleted"
+            :is="isMultiple ? Checkbox : Radio"
+            :key="op.id || op.email"
+            :value="op.id"
+            :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
+            :class="`nc-select-option-${column.title}-${op.email}`"
           >
-            <div class="flex-none">
-              <GeneralUserIcon
-                size="auto"
-                :name="!selectedOpt.label?.includes('@') ? selectedOpt.label.trim() : ''"
-                :email="selectedOpt.label"
-                class="!text-[0.65rem]"
-              />
-            </div>
-            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
-              <template #title>
-                {{ selectedOpt.label }}
-              </template>
+            <a-tag class="rounded-tag max-w-full !pl-0" color="'#ccc'">
               <span
-                class="text-ellipsis overflow-hidden"
                 :style="{
-                  wordBreak: 'keep-all',
-                  whiteSpace: 'nowrap',
-                  display: 'inline',
+                  'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                    ? '#fff'
+                    : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                  'font-size': '13px',
                 }"
+                class="flex items-stretch gap-2"
               >
-                {{ selectedOpt.label }}
+                <div>
+                  <GeneralUserIcon
+                    size="auto"
+                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
+                    :email="op.email"
+                    class="!text-[0.65rem]"
+                  />
+                </div>
+                <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                  <template #title>
+                    {{ op.display_name?.trim() || op.email }}
+                  </template>
+                  <span
+                    class="text-ellipsis overflow-hidden"
+                    :style="{
+                      wordBreak: 'keep-all',
+                      whiteSpace: 'nowrap',
+                      display: 'inline',
+                    }"
+                  >
+                    {{ op.display_name?.trim() || op.email }}
+                  </span>
+                </NcTooltip>
               </span>
-            </NcTooltip>
-          </span>
-        </a-tag>
-      </template>
+            </a-tag>
+          </component>
+        </template>
+      </component>
     </div>
-
-    <a-select
-      v-else
-      ref="aselect"
-      v-model:value="vModel"
-      mode="multiple"
-      class="w-full overflow-hidden"
-      :placeholder="isEditColumn ? $t('labels.optional') : ''"
-      :bordered="false"
-      clear-icon
-      :show-search="!isMobileMode"
-      :show-arrow="editAllowed && !readOnly"
-      :open="isOpen && editAllowed"
-      :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles }"
-      :dropdown-class-name="`nc-dropdown-user-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
-      :filter-option="filterOption"
-      @search="search"
-      @keydown.stop
-    >
-      <template #suffixIcon>
-        <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
-      </template>
-      <template v-for="op of options" :key="op.id || op.email">
-        <a-select-option
-          v-if="!op.deleted"
-          :value="op.id"
-          :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
-          :class="`nc-select-option-${column.title}-${op.email}`"
-          @click.stop
-        >
+    <template v-else>
+      <div
+        v-if="!active"
+        class="flex flex-wrap"
+        :style="{
+          'display': '-webkit-box',
+          'max-width': '100%',
+          '-webkit-line-clamp': rowHeight || 1,
+          '-webkit-box-orient': 'vertical',
+          'overflow': 'hidden',
+        }"
+      >
+        <template v-for="selectedOpt of vModel" :key="selectedOpt.value">
           <a-tag class="rounded-tag max-w-full !pl-0" color="'#ccc'">
             <span
               :style="{
@@ -358,17 +359,17 @@ const filterOption = (input: string, option: any) => {
               class="flex items-stretch gap-2"
               :class="{ 'text-sm': isKanban }"
             >
-              <div>
+              <div class="flex-none">
                 <GeneralUserIcon
                   size="auto"
-                  :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
-                  :email="op.email"
+                  :name="!selectedOpt.label?.includes('@') ? selectedOpt.label.trim() : ''"
+                  :email="selectedOpt.label"
                   class="!text-[0.65rem]"
                 />
               </div>
               <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                 <template #title>
-                  {{ op.display_name?.trim() || op.email }}
+                  {{ selectedOpt.label }}
                 </template>
                 <span
                   class="text-ellipsis overflow-hidden"
@@ -378,51 +379,121 @@ const filterOption = (input: string, option: any) => {
                     display: 'inline',
                   }"
                 >
-                  {{ op.display_name?.trim() || op.email }}
+                  {{ selectedOpt.label }}
                 </span>
               </NcTooltip>
             </span>
           </a-tag>
-        </a-select-option>
-      </template>
-
-      <template #tagRender="{ label, value: val, onClose }">
-        <a-tag
-          v-if="options.find((el) => el.id === val)"
-          class="rounded-tag nc-selected-option !pl-0"
-          :style="{ display: 'flex', alignItems: 'center' }"
-          color="'#ccc'"
-          :closable="editAllowed && ((vModel?.length ?? 0) > 1 || !column?.rqd)"
-          :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
-          @click="onTagClick($event, onClose)"
-          @close="onClose"
-        >
-          <span
-            :style="{
-              'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', {
-                level: 'AA',
-                size: 'large',
-              })
-                ? '#fff'
-                : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-              'font-size': '13px',
-            }"
-            class="flex items-stretch gap-2"
-            :class="{ 'text-sm': isKanban }"
+        </template>
+      </div>
+
+      <a-select
+        v-else
+        ref="aselect"
+        v-model:value="vModel"
+        mode="multiple"
+        class="w-full overflow-hidden"
+        :placeholder="isEditColumn ? $t('labels.optional') : ''"
+        :bordered="false"
+        clear-icon
+        :show-search="!isMobileMode"
+        :show-arrow="editAllowed && !readOnly"
+        :open="isOpen && editAllowed"
+        :disabled="readOnly || !editAllowed"
+        :class="{ 'caret-transparent': !hasEditRoles }"
+        :dropdown-class-name="`nc-dropdown-user-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
+        :filter-option="filterOption"
+        @search="search"
+        @keydown.stop
+      >
+        <template #suffixIcon>
+          <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
+        </template>
+        <template v-for="op of options" :key="op.id || op.email">
+          <a-select-option
+            v-if="!op.deleted"
+            :value="op.id"
+            :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
+            :class="`nc-select-option-${column.title}-${op.email}`"
+            @click.stop
+          >
+            <a-tag class="rounded-tag max-w-full !pl-0" color="'#ccc'">
+              <span
+                :style="{
+                  'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                    ? '#fff'
+                    : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                  'font-size': '13px',
+                }"
+                class="flex items-stretch gap-2"
+                :class="{ 'text-sm': isKanban }"
+              >
+                <div>
+                  <GeneralUserIcon
+                    size="auto"
+                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
+                    :email="op.email"
+                    class="!text-[0.65rem]"
+                  />
+                </div>
+                <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                  <template #title>
+                    {{ op.display_name?.trim() || op.email }}
+                  </template>
+                  <span
+                    class="text-ellipsis overflow-hidden"
+                    :style="{
+                      wordBreak: 'keep-all',
+                      whiteSpace: 'nowrap',
+                      display: 'inline',
+                    }"
+                  >
+                    {{ op.display_name?.trim() || op.email }}
+                  </span>
+                </NcTooltip>
+              </span>
+            </a-tag>
+          </a-select-option>
+        </template>
+
+        <template #tagRender="{ label, value: val, onClose }">
+          <a-tag
+            v-if="options.find((el) => el.id === val)"
+            class="rounded-tag nc-selected-option !pl-0"
+            :style="{ display: 'flex', alignItems: 'center' }"
+            color="'#ccc'"
+            :closable="editAllowed && ((vModel?.length ?? 0) > 1 || !column?.rqd)"
+            :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
+            @click="onTagClick($event, onClose)"
+            @close="onClose"
           >
-            <div>
-              <GeneralUserIcon
-                size="auto"
-                :name="!label?.includes('@') ? label.trim() : ''"
-                :email="label"
-                class="!text-[0.65rem]"
-              />
-            </div>
-            {{ label }}
-          </span>
-        </a-tag>
-      </template>
-    </a-select>
+            <span
+              :style="{
+                'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', {
+                  level: 'AA',
+                  size: 'large',
+                })
+                  ? '#fff'
+                  : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+              class="flex items-stretch gap-2"
+              :class="{ 'text-sm': isKanban }"
+            >
+              <div>
+                <GeneralUserIcon
+                  size="auto"
+                  :name="!label?.includes('@') ? label.trim() : ''"
+                  :email="label"
+                  class="!text-[0.65rem]"
+                />
+              </div>
+              {{ label }}
+            </span>
+          </a-tag>
+        </template>
+      </a-select>
+    </template>
   </div>
 </template>
 
@@ -492,4 +563,38 @@ const filterOption = (input: string, option: any) => {
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
+
+.nc-field-layout-list {
+  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
+
+  :deep(.ant-checkbox-wrapper) {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+
+    &:hover {
+      .ant-checkbox-checked:after {
+        @apply !rounded;
+      }
+    }
+    .ant-checkbox {
+      @apply !top-0;
+
+      & + span {
+        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+      }
+      .ant-checkbox-checked:after,
+      .ant-checkbox-inner {
+        @apply !rounded;
+      }
+    }
+  }
+  :deep(.ant-radio-wrapper) {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+    .ant-radio {
+      @apply !top-0;
+    }
+    .ant-radio + span {
+      @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+    }
+  }
+}
 </style>

From 51a8f4a4d73bc3bd17e0c3d6442a4f68864f950c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 05/18] fix(nc-gui): shared form select type list options

---
 .../nc-gui/components/smartsheet/Form.vue     | 25 ++++++++++++++-----
 .../composables/useSharedFormViewStore.ts     |  1 +
 packages/nocodb-sdk/src/lib/UITypes.ts        |  7 ++++++
 packages/nocodb-sdk/src/lib/index.ts          |  1 +
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ea84ba026a..63f8ad8d94 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -4,7 +4,16 @@ import Draggable from 'vuedraggable'
 import tinycolor from 'tinycolor2'
 import { Pane, Splitpanes } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
-import { ProjectRoles, RelationTypes, UITypes, ViewTypes, getSystemColumns, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
+import {
+  ProjectRoles,
+  RelationTypes,
+  UITypes,
+  ViewTypes,
+  getSystemColumns,
+  isLinksOrLTAR,
+  isVirtualCol,
+  isSelectTypeCol,
+} from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
   ActiveViewInj,
@@ -157,8 +166,6 @@ const focusLabel: VNodeRef = (el) => {
 
 const searchQuery = ref('')
 
-const selectTypeFields = [UITypes.SingleSelect, UITypes.MultiSelect, UITypes.User]
-
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
@@ -1090,7 +1097,7 @@ useEventListener(
                         class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3"
                       >
                         <!-- Layout  -->
-                        <div v-if="selectTypeFields.includes(element.uidt)">
+                        <div v-if="isSelectTypeCol(element.uidt)">
                           <div>Layout</div>
 
                           <a-radio-group
@@ -1112,13 +1119,19 @@ useEventListener(
                         </div>
                         <!-- Limit options -->
                         <div
-                          v-if="selectTypeFields.includes(element.uidt)"
+                          v-if="isSelectTypeCol(element.uidt)"
                           class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg"
                         >
-                          <a-switch v-e="['a:form-view:field:limit-options']" size="small" />
+                          <a-switch
+                            v-model:checked="element.meta.isLimitOption"
+                            v-e="['a:form-view:field:limit-options']"
+                            size="small"
+                            @change="updateColMeta(element)"
+                          />
                           <div>
                             <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                            <div v-if="element.meta.isLimitOption" class="mt-5"></div>
                           </div>
                         </div>
                       </div>
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index e60f089657..4be41faebc 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -109,6 +109,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       columns.value = viewMeta.model?.columns?.map((c) => ({
         ...c,
+        meta: { ...parseProp(fieldById[c.id].meta), ...parseProp(c.meta) },
         description: fieldById[c.id].description,
       }))
 
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index d5fa23214c..f7895f0cac 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -202,4 +202,11 @@ export const getEquivalentUIType = ({
   }
 };
 
+export const isSelectTypeCol = (
+  colOrUidt: ColumnType | { uidt: UITypes | string } | UITypes | string
+) => {
+  return [UITypes.SingleSelect, UITypes.MultiSelect, UITypes.User].includes(
+    <UITypes>(typeof colOrUidt === 'object' ? colOrUidt?.uidt : colOrUidt)
+  );
+};
 export default UITypes;
diff --git a/packages/nocodb-sdk/src/lib/index.ts b/packages/nocodb-sdk/src/lib/index.ts
index e06f405e5d..2a38f678de 100644
--- a/packages/nocodb-sdk/src/lib/index.ts
+++ b/packages/nocodb-sdk/src/lib/index.ts
@@ -18,6 +18,7 @@ export {
   isCreatedOrLastModifiedByCol,
   isHiddenCol,
   getEquivalentUIType,
+  isSelectTypeCol,
 } from '~/lib/UITypes';
 export { default as CustomAPI, FileType } from '~/lib/CustomAPI';
 export { default as TemplateGenerator } from '~/lib/TemplateGenerator';

From 081e57370b1993df5217498bfa06a9ca239e269b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 06/18] feat(nc-gui): add form select type field option limit

---
 packages/nc-gui/assets/nc-icons/eye-off.svg   |  14 +
 packages/nc-gui/assets/nc-icons/eye.svg       |  10 +-
 packages/nc-gui/components/cell/User.vue      |  63 ++++-
 .../nc-gui/components/smartsheet/Form.vue     |  51 ++--
 .../smartsheet/form/LimitOptions.vue          | 267 ++++++++++++++++++
 packages/nc-gui/utils/iconUtils.ts            |   3 +-
 6 files changed, 379 insertions(+), 29 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/eye-off.svg
 create mode 100644 packages/nc-gui/components/smartsheet/form/LimitOptions.vue

diff --git a/packages/nc-gui/assets/nc-icons/eye-off.svg b/packages/nc-gui/assets/nc-icons/eye-off.svg
new file mode 100644
index 0000000000..196a4ed3a0
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/eye-off.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_453_14719)">
+        <path
+            d="M6.59984 2.82676C7.05873 2.71935 7.52855 2.66566 7.99984 2.66676C12.6665 2.66676 15.3332 8.0001 15.3332 8.0001C14.9285 8.75717 14.4459 9.46992 13.8932 10.1268M9.41317 9.41343C9.23007 9.60993 9.00927 9.76754 8.76394 9.87685C8.51861 9.98616 8.25377 10.0449 7.98523 10.0497C7.71669 10.0544 7.44995 10.005 7.20091 9.90443C6.95188 9.80384 6.72565 9.65412 6.53573 9.4642C6.34582 9.27428 6.1961 9.04806 6.09551 8.79902C5.99492 8.54999 5.94552 8.28325 5.95026 8.0147C5.955 7.74616 6.01378 7.48133 6.12309 7.236C6.2324 6.99067 6.39001 6.76986 6.5865 6.58677M11.9598 11.9601C10.8202 12.8288 9.43258 13.31 7.99984 13.3334C3.33317 13.3334 0.666504 8.0001 0.666504 8.0001C1.49576 6.4547 2.64593 5.1045 4.03984 4.0401L11.9598 11.9601Z"
+            stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M0.666504 0.666748L15.3332 15.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+            stroke-linejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_453_14719">
+            <rect width="16" height="16" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/assets/nc-icons/eye.svg b/packages/nc-gui/assets/nc-icons/eye.svg
index 3e19595fa4..597b5e291f 100644
--- a/packages/nc-gui/assets/nc-icons/eye.svg
+++ b/packages/nc-gui/assets/nc-icons/eye.svg
@@ -1,4 +1,8 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.666656 7.99996C0.666656 7.99996 3.33332 2.66663 7.99999 2.66663C12.6667 2.66663 15.3333 7.99996 15.3333 7.99996C15.3333 7.99996 12.6667 13.3333 7.99999 13.3333C3.33332 13.3333 0.666656 7.99996 0.666656 7.99996Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+    <path
+        d="M0.666504 8.00008C0.666504 8.00008 3.33317 2.66675 7.99984 2.66675C12.6665 2.66675 15.3332 8.00008 15.3332 8.00008C15.3332 8.00008 12.6665 13.3334 7.99984 13.3334C3.33317 13.3334 0.666504 8.00008 0.666504 8.00008Z"
+        stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
+        stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 244a5f21e6..effaa9228c 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -26,6 +26,12 @@ import {
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
+interface LimitOptionsType {
+  id: string
+  order: number
+  show: boolean
+}
+
 interface Props {
   modelValue?: UserFieldRecordType[] | UserFieldRecordType | string | null
   rowIndex?: number
@@ -78,16 +84,57 @@ const searchVal = ref<string | null>()
 const { isUIAllowed } = useRoles()
 
 const options = computed<UserFieldRecordType[]>(() => {
+  let order = 1
+  const limitOptionsById =
+    ((parseProp(column.value.meta)?.limitOptions || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
+      if (f?.order !== undefined && order < f.order) {
+        order = f.order
+      }
+      return {
+        ...o,
+        [f.id]: f,
+      }
+    }, {}) as Record<string, LimitOptionsType>) ?? {}
+
   const collaborators: UserFieldRecordType[] = []
 
-  collaborators.push(
-    ...(baseUsers.value?.map((user: any) => ({
-      id: user.id,
-      email: user.email,
-      display_name: user.display_name,
-      deleted: user.deleted,
-    })) || []),
-  )
+  if (
+    !isEditColumn.value &&
+    isForm.value &&
+    parseProp(column.value.meta)?.isLimitOption &&
+    (parseProp(column.value.meta)?.limitOptions || []).length
+  ) {
+    collaborators.push(
+      ...(
+        baseUsers.value
+          .filter((user) => {
+            if (limitOptionsById[user.id]?.show !== undefined) {
+              return limitOptionsById[user.id]?.show
+            }
+            return false
+          })
+          ?.map((user: any) => ({
+            id: user.id,
+            email: user.email,
+            display_name: user.display_name,
+            deleted: user.deleted,
+            order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
+          })) || []
+      ).sort((a, b) => a.order - b.order),
+    )
+  } else {
+    collaborators.push(
+      ...(
+        baseUsers.value?.map((user: any) => ({
+          id: user.id,
+          email: user.email,
+          display_name: user.display_name,
+          deleted: user.deleted,
+          order: order++,
+        })) || []
+      ).sort((a, b) => a.order - b.order),
+    )
+  }
   return collaborators
 })
 
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 63f8ad8d94..5870f16d3c 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -160,9 +160,7 @@ const imageCropperData = ref<{
   cropFor: 'banner',
 })
 
-const focusLabel: VNodeRef = (el) => {
-  return (el as HTMLInputElement)?.focus()
-}
+const focusLabel = ref<HTMLTextAreaElement>()
 
 const searchQuery = ref('')
 
@@ -514,7 +512,15 @@ const handleOnUploadImage = (data: Record<string, any> = {}) => {
   updateView()
 }
 
-onClickOutside(draggableRef, () => {
+onClickOutside(draggableRef, (e) => {
+  if (
+    (e.target as HTMLElement)?.closest(
+      '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell',
+    )
+  ) {
+    return
+  }
+
   activeRow.value = ''
   isTabPressed.value = false
 })
@@ -570,6 +576,12 @@ watch(activeRow, (newValue) => {
   }
 })
 
+watch([focusLabel, activeRow], () => {
+  if (activeRow && focusLabel.value) {
+    focusLabel.value?.focus()
+  }
+})
+
 useEventListener(
   formRef,
   'focusout',
@@ -991,7 +1003,7 @@ useEventListener(
                         <template v-if="activeRow === element.title">
                           <a-form-item class="my-0 !mb-2">
                             <a-textarea
-                              :ref="focusLabel"
+                              ref="focusLabel"
                               v-model:value="element.label"
                               :rows="1"
                               auto-size
@@ -1118,20 +1130,25 @@ useEventListener(
                           </div>
                         </div>
                         <!-- Limit options -->
-                        <div
-                          v-if="isSelectTypeCol(element.uidt)"
-                          class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg"
-                        >
-                          <a-switch
-                            v-model:checked="element.meta.isLimitOption"
-                            v-e="['a:form-view:field:limit-options']"
-                            size="small"
-                            @change="updateColMeta(element)"
-                          />
-                          <div>
+                        <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
+                          <div class="flex items-start gap-3">
+                            <a-switch
+                              v-model:checked="element.meta.isLimitOption"
+                              v-e="['a:form-view:field:limit-options']"
+                              size="small"
+                              @change="updateColMeta(element)"
+                            />
                             <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                          </div>
+                          <div class="pl-8 flex-1 max-w-[calc(100%_-_40px)]">
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                            <div v-if="element.meta.isLimitOption" class="mt-5"></div>
+                            <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
+                              <LazySmartsheetFormLimitOptions
+                                v-model:modelValue="element.meta.limitOptions"
+                                :column="element"
+                                @update:modelValue="updateColMeta(element)"
+                              ></LazySmartsheetFormLimitOptions>
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
new file mode 100644
index 0000000000..a4dca81ebd
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import Draggable from 'vuedraggable'
+import tinycolor from 'tinycolor2'
+import { UITypes, type ColumnType, type SelectOptionType, type SelectOptionsType, type UserFieldRecordType } from 'nocodb-sdk'
+
+import { iconMap, MetaInj } from '#imports'
+
+interface LimitOptionsType {
+  id: string
+  order: number
+  show: boolean
+}
+
+const props = defineProps<{
+  modelValue: LimitOptionsType[]
+  column: ColumnType
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const meta = inject(MetaInj)!
+
+const column = toRef(props, 'column')
+
+const basesStore = useBases()
+
+const { basesUser } = storeToRefs(basesStore)
+
+const baseUsers = computed(() => (meta.value.base_id ? basesUser.value.get(meta.value.base_id) || [] : []))
+
+const searchQuery = ref('')
+
+const drag = ref(false)
+
+const { t } = useI18n()
+
+const vModel = computed({
+  get: () => {
+    let order = 1
+    const limitOptionsById =
+      (props.modelValue || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
+        if (f?.order !== undefined && order < f.order) {
+          order = f.order
+        }
+        return {
+          ...o,
+          [f.id]: f,
+        }
+      }, {} as Record<string, LimitOptionsType>) ?? {}
+
+    if (UITypes.User === column.value.uidt) {
+      const collaborators = ((baseUsers.value || []) as UserFieldRecordType[])
+        ?.filter((user) => !user?.deleted)
+        ?.map((user: any) => ({
+          id: user.id,
+          email: user.email,
+          display_name: user.display_name,
+          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
+          show:
+            user.id && limitOptionsById[user.id]
+              ? limitOptionsById[user.id]?.show
+              : !(props.modelValue || []).length
+              ? true
+              : false,
+        }))
+
+      if ((props.modelValue || []).length !== collaborators.length) {
+        emit(
+          'update:modelValue',
+          collaborators.map((o) => ({ id: o.id, order: o.order, show: o.show })),
+        )
+      }
+      return collaborators
+    } else if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(column.value.uidt as UITypes)) {
+      const updateModelValue = ((column.value.colOptions as SelectOptionsType)?.options || []).map((c) => {
+        return {
+          ...c,
+          order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
+          show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
+        } as SelectOptionType & { show?: boolean }
+      })
+
+      if ((props.modelValue || []).length !== ((column.value.colOptions as SelectOptionsType)?.options || []).length) {
+        emit(
+          'update:modelValue',
+          updateModelValue.map((o) => ({ id: o.id, order: o.order, show: o.show })),
+        )
+      }
+      return updateModelValue
+    }
+    return []
+  },
+  set: (val) => {
+    emit(
+      'update:modelValue',
+      val.map((o) => ({ id: o.id, order: o.order, show: o.show })),
+    )
+  },
+})
+
+const syncOptions = () => {
+  // set initial colOptions if not set
+}
+</script>
+
+<template>
+  <div class="w-full h-full nc-col-option-select-option nc-form-scrollbar">
+    <div v-if="vModel.length > 12">
+      <a-input
+        v-model:value="searchQuery"
+        class="!h-9 !px-3 !py-1 !rounded-lg mb-2"
+        :placeholder="`Search option...`"
+        name="nc-form-field-limit-option-search-input"
+        data-testid="nc-form-field-limit-option-search-input"
+      >
+        <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>
+    <Draggable
+      v-if="vModel.length"
+      :list="vModel"
+      item-key="id"
+      handle=".nc-child-draggable-icon"
+      class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
+      @change="syncOptions"
+      @start="drag = true"
+      @end="drag = false"
+    >
+      <template #item="{ element }">
+        <div
+          v-if="
+            column.uidt === UITypes.User
+              ? (element?.display_name?.trim() || element?.email)?.toLowerCase().includes(searchQuery.toLowerCase())
+              : element.title?.toLowerCase().includes(searchQuery.toLowerCase())
+          "
+          :key="element.id"
+          class="w-full h-10 px-2 py-1.5 flex flex-row items-center gap-3 border-b-1 last:border-none border-gray-200"
+          :class="[
+            `nc-form-field-${column.title?.replaceAll(' ', '')}-limit-option-${element.title?.replaceAll(' ', '')}`,
+            `${element.show ? 'hover:bg-gray-50' : 'bg-gray-100'}`,
+          ]"
+          :data-testid="`nc-form-field-${column.title?.replaceAll(' ', '')}-limit-option-${element.title?.replaceAll(' ', '')}`"
+        >
+          <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600" />
+
+          <div
+            @click="
+              () => {
+                element.show = !element.show
+                vModel = vModel
+              }
+            "
+          >
+            <component
+              :is="element.show ? iconMap.eye : iconMap.eyeSlash"
+              class="flex-none cursor-pointer !h-4 !w-4 text-gray-600"
+            />
+          </div>
+
+          <a-tag v-if="column.uidt === UITypes.User" class="rounded-tag max-w-[calc(100%_-_70px)] !pl-0" color="'#ccc'">
+            <span
+              :style="{
+                'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+              class="flex items-stretch gap-2"
+            >
+              <div>
+                <GeneralUserIcon
+                  size="auto"
+                  :name="element.display_name?.trim() ? element.display_name?.trim() : ''"
+                  :email="element.email"
+                  class="!text-[0.65rem]"
+                />
+              </div>
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ element.display_name?.trim() || element?.email }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ element.display_name?.trim() || element?.email }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+          <a-tag v-else class="rounded-tag max-w-[calc(100%_-_70px)]" :color="element.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(element.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(element.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ element.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ element.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </div>
+      </template>
+      <template v-if="!vModel.length" #footer><div class="px-0.5 py-2 text-gray-500 text-center">No options found</div></template>
+      <template
+        v-else-if="
+          vModel.length &&
+          searchQuery &&
+          !vModel?.filter((el) => {
+            return column.uidt === UITypes.User
+              ? (element?.display_name?.trim() || element?.email)?.toLowerCase().includes(searchQuery.toLowerCase())
+              : element.title?.toLowerCase().includes(searchQuery.toLowerCase())
+          })?.length
+        "
+        #footer
+      >
+        <div class="px-0.5 py-2 text-gray-500 text-center">No options found with title `{{ searchQuery }}`</div>
+      </template>
+    </Draggable>
+  </div>
+</template>
+
+<style scoped>
+.nc-form-scrollbar {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
+  &::-webkit-scrollbar-thumb:hover {
+    @apply !scrollbar-thumb-gray-300;
+  }
+}
+.rounded-tag {
+  @apply py-0 px-[12px] rounded-[12px];
+}
+
+:deep(.ant-tag) {
+  @apply rounded-tag my-[2px];
+}
+</style>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 695e5877b6..9a53f2fe17 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -92,6 +92,7 @@ import Sort from '~icons/nc-icons/sort'
 
 // NocoDB Icons
 import NcEye from '~icons/nc-icons/eye'
+import NcEyeOff from '~icons/nc-icons/eye-off'
 import NcStar from '~icons/nc-icons/star'
 import NcUnStar from '~icons/nc-icons/star-remove'
 import NcSearch from '~icons/nc-icons/search'
@@ -417,7 +418,7 @@ export const iconMap = {
   calculator: h('span', { class: 'material-symbols' }, 'calculate'),
   rollup: h('span', { class: 'material-symbols' }, 'group_work'),
   eye: NcEye,
-  eyeSlash: h('span', { class: 'material-symbols' }, 'visibility_off'),
+  eyeSlash: NcEyeOff,
   expand: h('span', { class: 'material-symbols' }, 'open_in_full'),
   shrink: h('span', { class: 'material-symbols' }, 'close_fullscreen'),
   check: NcCheck,

From 6c8825bed91682fba7dc25d2d3bbf7c081bcef1f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 07/18] feat(nc-gui): add limit options for single & multi
 select field

---
 .../nc-gui/components/cell/MultiSelect.vue    | 39 +++++++++++++++++-
 .../nc-gui/components/cell/SingleSelect.vue   | 40 ++++++++++++++++++-
 packages/nc-gui/components/cell/User.vue      | 28 ++++++-------
 .../smartsheet/form/LimitOptions.vue          | 17 +++-----
 packages/nc-gui/lib/types.ts                  |  7 ++++
 5 files changed, 103 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index eec679eb95..9559bcb48c 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -3,6 +3,7 @@ import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -95,7 +96,43 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
     for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
       op.title = op.title?.replace(/^'/, '').replace(/'$/, '')
     }
-    return opts.map((o: SelectOptionType) => ({ ...o, value: o.title }))
+    let order = 1
+    const limitOptionsById =
+      ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+        (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
+          if (f?.order !== undefined && order < f.order) {
+            order = f.order
+          }
+          return {
+            ...o,
+            [f.id]: f,
+          }
+        },
+        {},
+      ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
+
+    if (
+      !isEditColumn.value &&
+      isForm.value &&
+      parseProp(column.value.meta)?.isLimitOption &&
+      (parseProp(column.value.meta)?.limitOptions || []).length
+    ) {
+      return opts
+        ?.filter((o: SelectOptionType) => {
+          if (limitOptionsById[o.id!]?.show !== undefined) {
+            return limitOptionsById[o.id!]?.show
+          }
+          return false
+        })
+        ?.map((o) => ({
+          ...o,
+          value: o.title,
+          order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
+        }))
+        ?.sort((a, b) => a.order - b.order)
+    } else {
+      return opts.map((o: SelectOptionType) => ({ ...o, value: o.title }))
+    }
   }
   return []
 })
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index fa37963d1f..def1196ca3 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -3,6 +3,7 @@ import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -88,7 +89,44 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
-    return opts.map((o: any) => ({ ...o, value: o.title }))
+
+    let order = 1
+    const limitOptionsById =
+      ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+        (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
+          if (f?.order !== undefined && order < f.order) {
+            order = f.order
+          }
+          return {
+            ...o,
+            [f.id]: f,
+          }
+        },
+        {},
+      ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
+
+    if (
+      !isEditColumn.value &&
+      isForm.value &&
+      parseProp(column.value.meta)?.isLimitOption &&
+      (parseProp(column.value.meta)?.limitOptions || []).length
+    ) {
+      return opts
+        ?.filter((o: any) => {
+          if (limitOptionsById[o.id]?.show !== undefined) {
+            return limitOptionsById[o.id]?.show
+          }
+          return false
+        })
+        ?.map((o: any) => ({
+          ...o,
+          value: o.title,
+          order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
+        }))
+        ?.sort((a, b) => a.order - b.order)
+    } else {
+      return opts.map((o: any) => ({ ...o, value: o.title }))
+    }
   }
   return []
 })
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index effaa9228c..aeb6e6acea 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -4,6 +4,7 @@ import tinycolor from 'tinycolor2'
 import { CheckboxGroup, Checkbox, RadioGroup, Radio } from 'ant-design-vue'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { UserFieldRecordType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   CellClickHookInj,
@@ -26,12 +27,6 @@ import {
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
-interface LimitOptionsType {
-  id: string
-  order: number
-  show: boolean
-}
-
 interface Props {
   modelValue?: UserFieldRecordType[] | UserFieldRecordType | string | null
   rowIndex?: number
@@ -86,15 +81,18 @@ const { isUIAllowed } = useRoles()
 const options = computed<UserFieldRecordType[]>(() => {
   let order = 1
   const limitOptionsById =
-    ((parseProp(column.value.meta)?.limitOptions || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
-      if (f?.order !== undefined && order < f.order) {
-        order = f.order
-      }
-      return {
-        ...o,
-        [f.id]: f,
-      }
-    }, {}) as Record<string, LimitOptionsType>) ?? {}
+    ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+      (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
+        if (f?.order !== undefined && order < f.order) {
+          order = f.order
+        }
+        return {
+          ...o,
+          [f.id]: f,
+        }
+      },
+      {},
+    ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
 
   const collaborators: UserFieldRecordType[] = []
 
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index a4dca81ebd..3893c69db2 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
 import tinycolor from 'tinycolor2'
-import { UITypes, type ColumnType, type SelectOptionType, type SelectOptionsType, type UserFieldRecordType } from 'nocodb-sdk'
-
+import type { ColumnType, SelectOptionType, SelectOptionsType, UserFieldRecordType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import { iconMap, MetaInj } from '#imports'
 
-interface LimitOptionsType {
-  id: string
-  order: number
-  show: boolean
-}
-
 const props = defineProps<{
-  modelValue: LimitOptionsType[]
+  modelValue: FormFieldsLimitOptionsType[]
   column: ColumnType
 }>()
 
@@ -38,7 +33,7 @@ const vModel = computed({
   get: () => {
     let order = 1
     const limitOptionsById =
-      (props.modelValue || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
+      (props.modelValue || []).reduce((o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
         if (f?.order !== undefined && order < f.order) {
           order = f.order
         }
@@ -46,7 +41,7 @@ const vModel = computed({
           ...o,
           [f.id]: f,
         }
-      }, {} as Record<string, LimitOptionsType>) ?? {}
+      }, {} as Record<string, FormFieldsLimitOptionsType>) ?? {}
 
     if (UITypes.User === column.value.uidt) {
       const collaborators = ((baseUsers.value || []) as UserFieldRecordType[])
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 2c4f5c5222..01b9e168b6 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -198,6 +198,12 @@ interface UsersSortType {
 
 type CommandPaletteType = 'cmd-k' | 'cmd-j' | 'cmd-l'
 
+interface FormFieldsLimitOptionsType {
+  id: string
+  order: number
+  show: boolean
+}
+
 export type {
   User,
   ProjectMetaInfo,
@@ -226,4 +232,5 @@ export type {
   UsersSortType,
   CommandPaletteType,
   CalendarRangeType,
+  FormFieldsLimitOptionsType,
 }

From f9b31309e3c9fdfdc878e2275db97a60bc6ea7ba Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:20 +0000
Subject: [PATCH 08/18] feat(nc-gui): form limit options reordering

---
 .../smartsheet/form/LimitOptions.vue          | 68 +++++++++++++++----
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index 3893c69db2..ea64bab357 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -50,7 +50,7 @@ const vModel = computed({
           id: user.id,
           email: user.email,
           display_name: user.display_name,
-          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
+          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? c.order : order++,
           show:
             user.id && limitOptionsById[user.id]
               ? limitOptionsById[user.id]?.show
@@ -58,6 +58,7 @@ const vModel = computed({
               ? true
               : false,
         }))
+        .sort((a, b) => a.order - b.order)
 
       if ((props.modelValue || []).length !== collaborators.length) {
         emit(
@@ -67,13 +68,20 @@ const vModel = computed({
       }
       return collaborators
     } else if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(column.value.uidt as UITypes)) {
-      const updateModelValue = ((column.value.colOptions as SelectOptionsType)?.options || []).map((c) => {
-        return {
-          ...c,
-          order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
-          show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
-        } as SelectOptionType & { show?: boolean }
-      })
+      const updateModelValue = ((column.value.colOptions as SelectOptionsType)?.options || [])
+        .map((c) => {
+          return {
+            ...c,
+            order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
+            show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
+          } as SelectOptionType & { show?: boolean }
+        })
+        .sort((a, b) => {
+          if (a.order !== undefined && b.order !== undefined) {
+            return a.order - b.order
+          }
+          return 0
+        })
 
       if ((props.modelValue || []).length !== ((column.value.colOptions as SelectOptionsType)?.options || []).length) {
         emit(
@@ -93,8 +101,42 @@ const vModel = computed({
   },
 })
 
-const syncOptions = () => {
-  // set initial colOptions if not set
+async function onMove(_event: { moved: { newIndex: number; oldIndex: number; element: any } }) {
+  const {
+    moved: { newIndex = 0, oldIndex = 0, element },
+  } = _event
+
+  if (!vModel.value.length || vModel.value.length === 1) {
+    element.order = 1
+  } else if (vModel.value.length - 1 === newIndex) {
+    element.order = (vModel.value[newIndex - 1]?.order || 0) + 1
+  } else if (newIndex === 0) {
+    element.order = (vModel.value[1]?.order || 0) / 2
+  } else {
+    element.order = ((vModel.value[newIndex - 1]?.order || 0) + (vModel.value[newIndex + 1].order || 0)) / 2
+  }
+
+  let nextOrder: number
+
+  // set new order value based on the new order of the items
+  if (!vModel.value.length || vModel.value.length === 1) {
+    nextOrder = 1
+  } else if (vModel.value.length - 1 === newIndex) {
+    // If moving to the end, set nextOrder greater than the maximum order in the list
+    nextOrder = Math.max(...vModel.value.map((item) => item?.order ?? 0)) + 1
+  } else if (newIndex === 0) {
+    // If moving to the beginning, set nextOrder smaller than the minimum order in the list
+    nextOrder = Math.min(...vModel.value.map((item) => item?.order ?? 0)) / 2
+  } else {
+    nextOrder =
+      (parseFloat(String(vModel.value[newIndex - 1]?.order ?? 0)) + parseFloat(String(vModel.value[newIndex + 1]?.order ?? 0))) /
+      2
+  }
+  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
+
+  element.order = _nextOrder
+
+  vModel.value = vModel.value
 }
 </script>
 
@@ -124,11 +166,11 @@ const syncOptions = () => {
     </div>
     <Draggable
       v-if="vModel.length"
-      :list="vModel"
+      :model-value="vModel"
       item-key="id"
       handle=".nc-child-draggable-icon"
       class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
-      @change="syncOptions"
+      @change="onMove($event)"
       @start="drag = true"
       @end="drag = false"
     >
@@ -147,7 +189,7 @@ const syncOptions = () => {
           ]"
           :data-testid="`nc-form-field-${column.title?.replaceAll(' ', '')}-limit-option-${element.title?.replaceAll(' ', '')}`"
         >
-          <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600" />
+          <component :is="iconMap.drag" class="nc-child-draggable-icon flex-none cursor-move !h-4 !w-4 text-gray-600" />
 
           <div
             @click="

From 23cc214354c12c99cf431906c0417f51484bfedd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 09/18] fix(nc-gui): hide select type field error input inner
 border

---
 packages/nc-gui/components/smartsheet/Form.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 5870f16d3c..95664e24ee 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1583,6 +1583,12 @@ useEventListener(
     @apply mt-2;
   }
 }
+:deep(.ant-form-item-has-error .ant-select:not(.ant-select-disabled) .ant-select-selector) {
+  border: none !important;
+}
+:deep(.ant-form-item-has-success .ant-select:not(.ant-select-disabled) .ant-select-selector) {
+  border: none !important;
+}
 
 :deep(.nc-cell-attachment) {
   @apply p-0;

From de2251265554f62b831da5735f6bedf2c7f8040c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 10/18] fix(nc-gui): add clear option for single select user
 field list type

---
 packages/nc-gui/components/cell/User.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index aeb6e6acea..be4304cbe2 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -193,7 +193,7 @@ const vModel = computed({
 })
 
 const vModelListLayout = computed(() => {
-  if (isMultiple) {
+  if (isMultiple.value) {
     return (vModel.value || []).map((item) => item.value)
   } else {
     return (vModel.value || [])?.[0]?.value || ''
@@ -323,11 +323,10 @@ const filterOption = (input: string, option: any) => {
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
       <component
         :is="isMultiple ? CheckboxGroup : RadioGroup"
-        :model-value:value="vModelListLayout"
+        v-model:value="vModelListLayout"
         class="nc-field-layout-list"
         @update:value="
           (value) => {
-            // Todo: fix update single select user issue
             vModel = isMultiple ? value : [value]
           }
         "
@@ -379,6 +378,9 @@ const filterOption = (input: string, option: any) => {
           </component>
         </template>
       </component>
+      <div v-if="!isMultiple && vModel.length" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = []">
+        {{ $t('labels.clearSelection') }}
+      </div>
     </div>
     <template v-else>
       <div

From b682d1b5fb4264157c0ecccf820a5ad8f2aaa442 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 11/18] chore(nc-gui): lint

---
 packages/nc-gui/components/cell/User.vue      |  4 +--
 .../nc-gui/components/smartsheet/Form.vue     | 13 ++++++---
 .../smartsheet/form/LimitOptions.vue          | 27 ++++++++-----------
 packages/nc-gui/lang/en.json                  |  7 +++--
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index be4304cbe2..1764a4f47b 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
 import tinycolor from 'tinycolor2'
-import { CheckboxGroup, Checkbox, RadioGroup, Radio } from 'ant-design-vue'
+import { Checkbox, CheckboxGroup, Radio, RadioGroup } from 'ant-design-vue'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { UserFieldRecordType } from 'nocodb-sdk'
 import type { FormFieldsLimitOptionsType } from '~/lib'
@@ -333,8 +333,8 @@ const filterOption = (input: string, option: any) => {
       >
         <template v-for="op of options" :key="op.id || op.email">
           <component
-            v-if="!op.deleted"
             :is="isMultiple ? Checkbox : Radio"
+            v-if="!op.deleted"
             :key="op.id || op.email"
             :value="op.id"
             :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 95664e24ee..ea12580908 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { VNodeRef } from '@vue/runtime-core'
 import Draggable from 'vuedraggable'
 import tinycolor from 'tinycolor2'
 import { Pane, Splitpanes } from 'splitpanes'
@@ -11,8 +10,8 @@ import {
   ViewTypes,
   getSystemColumns,
   isLinksOrLTAR,
-  isVirtualCol,
   isSelectTypeCol,
+  isVirtualCol,
 } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -815,6 +814,9 @@ useEventListener(
                       {
                         'hover:bg-gray-50': activeRow !== 'nc-form-heading' && isEditable,
                       },
+                      {
+                        'bg-gray-50': activeRow === 'nc-form-heading' && isEditable,
+                      },
                       {
                         '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                       },
@@ -862,6 +864,9 @@ useEventListener(
                       {
                         'hover:bg-gray-50': activeRow !== 'nc-form-sub-heading' && isEditable,
                       },
+                      {
+                        'bg-gray-50': activeRow === 'nc-form-sub-heading' && isEditable,
+                      },
                       {
                         '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                       },
@@ -1144,9 +1149,9 @@ useEventListener(
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
                             <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
                               <LazySmartsheetFormLimitOptions
-                                v-model:modelValue="element.meta.limitOptions"
+                                v-model:model-value="element.meta.limitOptions"
                                 :column="element"
-                                @update:modelValue="updateColMeta(element)"
+                                @update:model-value="updateColMeta(element)"
                               ></LazySmartsheetFormLimitOptions>
                             </div>
                           </div>
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index ea64bab357..85a3c0e50b 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2'
 import type { ColumnType, SelectOptionType, SelectOptionsType, UserFieldRecordType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { FormFieldsLimitOptionsType } from '~/lib'
-import { iconMap, MetaInj } from '#imports'
+import { MetaInj, iconMap } from '#imports'
 
 const props = defineProps<{
   modelValue: FormFieldsLimitOptionsType[]
@@ -27,8 +27,6 @@ const searchQuery = ref('')
 
 const drag = ref(false)
 
-const { t } = useI18n()
-
 const vModel = computed({
   get: () => {
     let order = 1
@@ -51,12 +49,7 @@ const vModel = computed({
           email: user.email,
           display_name: user.display_name,
           order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? c.order : order++,
-          show:
-            user.id && limitOptionsById[user.id]
-              ? limitOptionsById[user.id]?.show
-              : !(props.modelValue || []).length
-              ? true
-              : false,
+          show: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.show : !(props.modelValue || []).length,
         }))
         .sort((a, b) => a.order - b.order)
 
@@ -73,7 +66,7 @@ const vModel = computed({
           return {
             ...c,
             order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
-            show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
+            show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length,
           } as SelectOptionType & { show?: boolean }
         })
         .sort((a, b) => {
@@ -136,7 +129,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 
   element.order = _nextOrder
 
-  vModel.value = vModel.value
+  vModel.value = [...vModel.value]
 }
 </script>
 
@@ -146,7 +139,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
       <a-input
         v-model:value="searchQuery"
         class="!h-9 !px-3 !py-1 !rounded-lg mb-2"
-        :placeholder="`Search option...`"
+        :placeholder="`${$t('placeholder.searchOptions')}...`"
         name="nc-form-field-limit-option-search-input"
         data-testid="nc-form-field-limit-option-search-input"
       >
@@ -195,7 +188,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
             @click="
               () => {
                 element.show = !element.show
-                vModel = vModel
+                vModel = [...vModel]
               }
             "
           >
@@ -268,7 +261,9 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
           </a-tag>
         </div>
       </template>
-      <template v-if="!vModel.length" #footer><div class="px-0.5 py-2 text-gray-500 text-center">No options found</div></template>
+      <template v-if="!vModel.length" #footer
+        ><div class="px-0.5 py-2 text-gray-500 text-center">{{ $t('title.noOptionsFound') }}</div></template
+      >
       <template
         v-else-if="
           vModel.length &&
@@ -281,13 +276,13 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         "
         #footer
       >
-        <div class="px-0.5 py-2 text-gray-500 text-center">No options found with title `{{ searchQuery }}`</div>
+        <div class="px-0.5 py-2 text-gray-500 text-center">{{ $t('title.noOptionsFound') }} with title `{{ searchQuery }}`</div>
       </template>
     </Draggable>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .nc-form-scrollbar {
   @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 3598e1f691..35646e423a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -425,7 +425,9 @@
       "setNull": "Set NULL",
       "setDefault": "Set Default"
     },
-    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here"
+    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here",
+    "noOptionsFound": "No options found"
+
   },
   "labels": {
     "selectYear": "Select Year",
@@ -1005,7 +1007,8 @@
     "noTokenCreated": "No API Tokens created",
     "noTokenCreatedLabel": "Looks like you haven’t generated any API tokens yet.",
     "inviteYourTeam": "Invite your team",
-    "inviteYourTeamLabel": "Fast track your projects by collaborating on them with your team!"
+    "inviteYourTeamLabel": "Fast track your projects by collaborating on them with your team!",
+    "searchOptions": "Search options"
   },
   "msg": {
     "clickToCopyFieldId": "Click to copy Field Id",

From 7d1cfcd5e67aaac2cdc5195bedd33d7bdcba73ee Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 12/18] fix(nc-gui): oss shared form ui changes

---
 .../nc-gui/components/smartsheet/Form.vue     |  8 ++--
 packages/nc-gui/lang/en.json                  |  4 +-
 .../index/[typeOrId]/form/[viewId]/index.vue  | 40 ++++++++++++++++---
 .../[typeOrId]/form/[viewId]/index/index.vue  |  5 ++-
 .../[typeOrId]/form/[viewId]/index/survey.vue | 28 +------------
 5 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ea12580908..dd4c5280b8 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1122,18 +1122,20 @@ useEventListener(
                             class="nc-form-field-layout !mt-2"
                             @change="updateColMeta(element)"
                           >
-                            <a-radio :value="false">Dropdown</a-radio>
-                            <a-radio :value="true">List</a-radio>
+                            <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                            <a-radio :value="true">{{ $t('general.list') }}</a-radio>
                           </a-radio-group>
                         </div>
                         <!-- Todo: Show on conditions,... -->
-                        <div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
+                        <!-- eslint-disable vue/no-constant-condition -->
+                        <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
                           <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
                           <div>
                             <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
                             <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                           </div>
                         </div>
+
                         <!-- Limit options -->
                         <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
                           <div class="flex items-start gap-3">
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 35646e423a..0056249390 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -195,7 +195,9 @@
     "restore": "Restore",
     "replace": "Replace",
     "banner": "Banner",
-    "logo": "Logo"
+    "logo": "Logo",
+    "dropdown":"Dropdown",
+    "list":"List"
   },
   "objects": {
     "day": "Day",
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 13a91b6536..32f8ba8ba7 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -66,8 +66,16 @@ p {
 }
 
 .nc-form-view {
+  .nc-data-cell {
+    @apply !border-none rounded-none;
+
+    &:focus-within {
+      @apply !border-none;
+    }
+  }
+
   .nc-cell {
-    @apply bg-white dark:bg-slate-500;
+    @apply bg-white dark:bg-slate-500 appearance-none;
 
     &.nc-cell-checkbox {
       @apply color-transition !border-0;
@@ -89,7 +97,18 @@ p {
       @apply bg-white dark:bg-slate-500;
 
       &.nc-input {
-        @apply w-full rounded p-2 min-h-[40px] flex items-center;
+        @apply w-full;
+
+        &:not(.layout-list) {
+          @apply rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
+
+          & > div {
+            @apply !bg-transparent;
+          }
+        }
+        &.layout-list {
+          @apply h-auto !pl-0 !py-1 !bg-transparent !dark:bg-none;
+        }
 
         .duration-cell-wrapper {
           @apply w-full;
@@ -105,8 +124,7 @@ p {
 
         input,
         textarea,
-        &.nc-virtual-cell,
-        > div {
+        &.nc-virtual-cell {
           @apply bg-white dark:(bg-slate-500 text-white);
 
           .ant-btn {
@@ -117,6 +135,18 @@ 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);
+          }
+
+          .chip {
+            @apply dark:(bg-slate-700 text-white);
+          }
+        }
 
         &.nc-cell-longtext {
           @apply p-0 h-auto;
@@ -132,7 +162,7 @@ p {
           }
         }
         &:not(.nc-cell-longtext) {
-          @apply px-2 py-2;
+          @apply p-2;
         }
 
         textarea {
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 57f239400d..6b36f969d1 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
@@ -176,7 +176,10 @@ const onDecode = async (scannedCodeValue: string) => {
                         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(' ', '')}`"
+                        :class="[
+                          `nc-form-input-${field.title?.replaceAll(' ', '')}`,
+                          { 'layout-list': parseProp(field?.meta)?.isList },
+                        ]"
                         :column="field"
                         edit-enabled
                       />
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 cc3e0f27a5..f749801aa9 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
@@ -292,6 +292,7 @@ onMounted(() => {
                 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
@@ -481,33 +482,6 @@ onMounted(() => {
     @apply flex items-center justify-center gap-2 text-left;
   }
 
-  .nc-input {
-    @apply appearance-none w-full !bg-white !rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
-    &.nc-cell-rating,
-    &.nc-cell-geodata {
-      @apply !py-1;
-    }
-
-    :deep(input) {
-      @apply !px-1;
-    }
-    &.nc-cell-longtext {
-      @apply p-0 h-auto overflow-hidden;
-    }
-    &:not(.nc-cell-longtext) {
-      @apply px-2 py-2;
-      :deep(textarea) {
-        @apply !p-2;
-      }
-    }
-
-    &.nc-cell-checkbox {
-      > * {
-        @apply justify-center flex items-center;
-      }
-    }
-  }
-
   .nc-form-data-cell.nc-data-cell {
     @apply !border-none rounded-none;
 

From b61fbef9bd5bcf95db95feb8f5c4baa6312e0424 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 13/18] chore(nc-gui): small changes

---
 packages/nc-gui/composables/useViewData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 2b7a35c5b7..853f28a53e 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -297,7 +297,7 @@ export function useViewData(
           fk_column_id: c.id,
           fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id!] ? fieldById[c.id!] : {}),
-          meta: { ...parseProp(c.meta), ...parseProp(fieldById[c.id!]?.meta) }, // TODO: discuss with @pranav
+          meta: { ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta) }, // TODO: discuss with @pranav
           order: (fieldById[c.id!] && fieldById[c.id!].order) || order++,
           id: fieldById[c.id!] && fieldById[c.id!].id,
         }))

From d3b70666e2fc04fc8df1c6e11bbf0dd54a0269e5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:21 +0000
Subject: [PATCH 14/18] fix(nc-gui): PR review changes #2404

---
 packages/nc-gui/components/general/ImageCropper.vue |  1 -
 packages/nc-gui/components/smartsheet/Form.vue      | 12 ++++++------
 packages/nc-gui/lang/en.json                        |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index d43900433b..fa0d6f4616 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -110,7 +110,6 @@ watch(showCropper, () => {
               }
             : {}
         "
-        image-restriction="none"
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index dd4c5280b8..93570e84ed 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -694,9 +694,9 @@ useEventListener(
               @submit="handleOnUploadImage"
             ></GeneralImageCropper>
             <!-- cover image -->
-            <div class="relative max-w-[max(33%,688px)] mx-auto">
-              <GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
-              <div class="absolute bottom-0 right-0">
+            <div class="group relative max-w-[max(33%,688px)] mx-auto">
+              <GeneralFormBanner :banner-image-url="formViewData.banner_image_url"/>
+              <div class="absolute bottom-0 right-0 hidden group-hover:block">
                 <div class="flex items-center space-x-1 m-2">
                   <NcButton
                     type="secondary"
@@ -750,8 +750,8 @@ useEventListener(
                   <!-- Form logo  -->
                   <div class="mb-4">
                     <div
-                      class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px max-w-189px overflow-hidden"
-                      :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100)' : 'bg-gray-100'"
+                      class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px overflow-hidden"
+                      :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100) max-w-189px' : 'w-full bg-gray-100 max-w-148px'"
                       style="transition: all 0.3s ease-in"
                     >
                       <LazyCellAttachmentImage
@@ -761,7 +761,7 @@ useEventListener(
                       />
                       <div
                         class="items-center space-x-1 flex-nowrap m-3"
-                        :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
+                        :class="'hidden absolute top-0 left-0 group-hover:flex'"
                       >
                         <NcButton
                           v-if="isEditable"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 0056249390..1f56a52179 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -697,7 +697,7 @@
     "hideNocodbBranding":"Hide NocoDB Branding",
     "showOnConditions": "Show on condtions",
     "showFieldOnConditionsMet":"Shows field only when conditions are met",
-    "limitOptions": "Limit ptions",
+    "limitOptions": "Limit options",
     "limitOptionsSubtext": "Limit options visible to users by selecting available options",
     "clearSelection": "Clear selection"
   },

From fdd9c2be6812d8f968ac583ee5ab66f177166fed Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:22 +0000
Subject: [PATCH 15/18] fix(nc-gui): pr review changes

---
 .../nc-gui/components/cell/MultiSelect.vue    | 10 ++---
 .../nc-gui/components/cell/SingleSelect.vue   |  8 ++--
 packages/nc-gui/components/cell/User.vue      | 41 +++++++++----------
 .../components/general/ImageCropper.vue       |  8 +---
 .../nc-gui/components/smartsheet/Form.vue     |  9 ++--
 .../smartsheet/form/LimitOptions.vue          | 18 ++------
 packages/nc-gui/utils/parseUtils.ts           |  2 +-
 7 files changed, 40 insertions(+), 56 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9559bcb48c..4f0c8346d0 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -100,7 +100,7 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
     const limitOptionsById =
       ((parseProp(column.value.meta)?.limitOptions || []).reduce(
         (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
-          if (f?.order !== undefined && order < f.order) {
+          if (order < (f?.order ?? 0)) {
             order = f.order
           }
           return {
@@ -118,18 +118,18 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
       (parseProp(column.value.meta)?.limitOptions || []).length
     ) {
       return opts
-        ?.filter((o: SelectOptionType) => {
+        .filter((o: SelectOptionType) => {
           if (limitOptionsById[o.id!]?.show !== undefined) {
             return limitOptionsById[o.id!]?.show
           }
           return false
         })
-        ?.map((o) => ({
+        .map((o) => ({
           ...o,
           value: o.title,
           order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
         }))
-        ?.sort((a, b) => a.order - b.order)
+        .sort((a, b) => a.order - b.order)
     } else {
       return opts.map((o: SelectOptionType) => ({ ...o, value: o.title }))
     }
@@ -390,7 +390,7 @@ const onFocus = () => {
 <template>
   <div
     class="nc-cell-field nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly, readOnly, 'max-w-full': isForm }"
+    :class="{ 'read-only': readOnly, 'max-w-full': isForm }"
     @click="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index def1196ca3..aa56a6e4dc 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -94,7 +94,7 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
     const limitOptionsById =
       ((parseProp(column.value.meta)?.limitOptions || []).reduce(
         (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
-          if (f?.order !== undefined && order < f.order) {
+          if (order < (f?.order ?? 0)) {
             order = f.order
           }
           return {
@@ -112,18 +112,18 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
       (parseProp(column.value.meta)?.limitOptions || []).length
     ) {
       return opts
-        ?.filter((o: any) => {
+        .filter((o: SelectOptionType & { value: string }) => {
           if (limitOptionsById[o.id]?.show !== undefined) {
             return limitOptionsById[o.id]?.show
           }
           return false
         })
-        ?.map((o: any) => ({
+        .map((o: any) => ({
           ...o,
           value: o.title,
           order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
         }))
-        ?.sort((a, b) => a.order - b.order)
+        .sort((a, b) => a.order - b.order)
     } else {
       return opts.map((o: any) => ({ ...o, value: o.title }))
     }
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 1764a4f47b..746798c630 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -83,7 +83,7 @@ const options = computed<UserFieldRecordType[]>(() => {
   const limitOptionsById =
     ((parseProp(column.value.meta)?.limitOptions || []).reduce(
       (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
-        if (f?.order !== undefined && order < f.order) {
+        if (order < (f?.order ?? 0)) {
           order = f.order
         }
         return {
@@ -103,34 +103,33 @@ const options = computed<UserFieldRecordType[]>(() => {
     (parseProp(column.value.meta)?.limitOptions || []).length
   ) {
     collaborators.push(
-      ...(
-        baseUsers.value
-          .filter((user) => {
-            if (limitOptionsById[user.id]?.show !== undefined) {
-              return limitOptionsById[user.id]?.show
-            }
-            return false
-          })
-          ?.map((user: any) => ({
-            id: user.id,
-            email: user.email,
-            display_name: user.display_name,
-            deleted: user.deleted,
-            order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
-          })) || []
-      ).sort((a, b) => a.order - b.order),
+      ...(baseUsers.value || [])
+        .filter((user) => {
+          if (limitOptionsById[user.id]?.show !== undefined) {
+            return limitOptionsById[user.id]?.show
+          }
+          return false
+        })
+        .map((user: any) => ({
+          id: user.id,
+          email: user.email,
+          display_name: user.display_name,
+          deleted: user.deleted,
+          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
+        }))
+        .sort((a, b) => a.order - b.order),
     )
   } else {
     collaborators.push(
-      ...(
-        baseUsers.value?.map((user: any) => ({
+      ...(baseUsers.value || [])
+        .map((user: any) => ({
           id: user.id,
           email: user.email,
           display_name: user.display_name,
           deleted: user.deleted,
           order: order++,
-        })) || []
-      ).sort((a, b) => a.order - b.order),
+        }))
+        .sort((a, b) => a.order - b.order),
     )
   }
   return collaborators
diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index fa0d6f4616..3c17460fbd 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -103,13 +103,7 @@ watch(showCropper, () => {
         class="nc-cropper relative"
         :src="imageConfig.src"
         :auto-zoom="true"
-        :stencil-props="
-          cropperConfig?.aspectRatio
-            ? {
-                aspectRatio: cropperConfig.aspectRatio,
-              }
-            : {}
-        "
+        :stencil-props="cropperConfig?.aspectRatio ? { aspectRatio: cropperConfig.aspectRatio } : {}"
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 93570e84ed..8234c0b7d5 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -170,6 +170,7 @@ const { betaFeatureToggleState } = useBetaFeatureToggle()
 const { open, onChange: onChangeFile } = useFileDialog({
   accept: 'image/*',
   multiple: false,
+  reset: true,
 })
 
 const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).sort((a, b) => a.order - b.order))
@@ -695,7 +696,7 @@ useEventListener(
             ></GeneralImageCropper>
             <!-- cover image -->
             <div class="group relative max-w-[max(33%,688px)] mx-auto">
-              <GeneralFormBanner :banner-image-url="formViewData.banner_image_url"/>
+              <GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
               <div class="absolute bottom-0 right-0 hidden group-hover:block">
                 <div class="flex items-center space-x-1 m-2">
                   <NcButton
@@ -750,8 +751,8 @@ useEventListener(
                   <!-- Form logo  -->
                   <div class="mb-4">
                     <div
-                      class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px overflow-hidden"
-                      :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100) max-w-189px' : 'w-full bg-gray-100 max-w-148px'"
+                      class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px max-w-189px overflow-hidden"
+                      :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100)' : 'bg-gray-100'"
                       style="transition: all 0.3s ease-in"
                     >
                       <LazyCellAttachmentImage
@@ -761,7 +762,7 @@ useEventListener(
                       />
                       <div
                         class="items-center space-x-1 flex-nowrap m-3"
-                        :class="'hidden absolute top-0 left-0 group-hover:flex'"
+                        :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
                       >
                         <NcButton
                           v-if="isEditable"
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index 85a3c0e50b..730275a51f 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -32,7 +32,7 @@ const vModel = computed({
     let order = 1
     const limitOptionsById =
       (props.modelValue || []).reduce((o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
-        if (f?.order !== undefined && order < f.order) {
+        if (order < (f?.order ?? 0)) {
           order = f.order
         }
         return {
@@ -43,12 +43,12 @@ const vModel = computed({
 
     if (UITypes.User === column.value.uidt) {
       const collaborators = ((baseUsers.value || []) as UserFieldRecordType[])
-        ?.filter((user) => !user?.deleted)
-        ?.map((user: any) => ({
+        .filter((user) => !user?.deleted)
+        .map((user: any) => ({
           id: user.id,
           email: user.email,
           display_name: user.display_name,
-          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? c.order : order++,
+          order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? user.order : order++,
           show: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.show : !(props.modelValue || []).length,
         }))
         .sort((a, b) => a.order - b.order)
@@ -99,16 +99,6 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
     moved: { newIndex = 0, oldIndex = 0, element },
   } = _event
 
-  if (!vModel.value.length || vModel.value.length === 1) {
-    element.order = 1
-  } else if (vModel.value.length - 1 === newIndex) {
-    element.order = (vModel.value[newIndex - 1]?.order || 0) + 1
-  } else if (newIndex === 0) {
-    element.order = (vModel.value[1]?.order || 0) / 2
-  } else {
-    element.order = ((vModel.value[newIndex - 1]?.order || 0) + (vModel.value[newIndex + 1].order || 0)) / 2
-  }
-
   let nextOrder: number
 
   // set new order value based on the new order of the items
diff --git a/packages/nc-gui/utils/parseUtils.ts b/packages/nc-gui/utils/parseUtils.ts
index ae567ab3b9..7e89c6dd24 100644
--- a/packages/nc-gui/utils/parseUtils.ts
+++ b/packages/nc-gui/utils/parseUtils.ts
@@ -1,7 +1,7 @@
 export function parseProp(v: any): any {
   if (!v) return {}
   try {
-    return typeof v === 'string' ? JSON.parse(v) : v
+    return typeof v === 'string' ? JSON.parse(v) ?? {} : v
   } catch {
     return {}
   }

From 933a6faf0b5216ac2f78368013178647000cbe48 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:22 +0000
Subject: [PATCH 16/18] fix(nc-gui): move duplicate css at global style file

---
 packages/nc-gui/assets/style.scss             | 36 +++++++++++++++++++
 .../nc-gui/components/cell/MultiSelect.vue    | 25 -------------
 .../nc-gui/components/cell/SingleSelect.vue   | 13 -------
 packages/nc-gui/components/cell/User.vue      | 34 ------------------
 4 files changed, 36 insertions(+), 72 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index f3330b1469..8ea1d047ca 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -749,3 +749,39 @@ svg.nc-cell-icon, svg.nc-virtual-cell-icon {
   @apply w-1em h-1em flex-none;
   font-size: 1rem;
 }
+
+
+// For select type field list layout 
+.nc-field-layout-list {
+  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
+
+  .ant-checkbox-wrapper {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+
+    &:hover {
+      .ant-checkbox-checked:after {
+        @apply !rounded;
+      }
+    }
+    .ant-checkbox {
+      @apply !top-0;
+
+      & + span {
+        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+      }
+      .ant-checkbox-checked:after,
+      .ant-checkbox-inner {
+        @apply !rounded;
+      }
+    }
+  }
+  .ant-radio-wrapper {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+    .ant-radio {
+      @apply !top-0;
+    }
+    .ant-radio + span {
+      @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 4f0c8346d0..5c5a205f2a 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -647,31 +647,6 @@ const onFocus = () => {
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
-
-.nc-field-layout-list {
-  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
-
-  :deep(.ant-checkbox-wrapper) {
-    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
-
-    &:hover {
-      .ant-checkbox-checked:after {
-        @apply !rounded;
-      }
-    }
-    .ant-checkbox {
-      @apply !top-0;
-
-      & + span {
-        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
-      }
-      .ant-checkbox-checked:after,
-      .ant-checkbox-inner {
-        @apply !rounded;
-      }
-    }
-  }
-}
 </style>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index aa56a6e4dc..4d91f1dd9a 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -493,19 +493,6 @@ const onFocus = () => {
 :deep(.ant-select-clear > span) {
   @apply block;
 }
-.nc-field-layout-list {
-  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
-
-  :deep(.ant-radio-wrapper) {
-    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
-    .ant-radio {
-      @apply !top-0;
-    }
-    .ant-radio + span {
-      @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
-    }
-  }
-}
 </style>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 746798c630..62fef82ce3 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -609,38 +609,4 @@ const filterOption = (input: string, option: any) => {
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
-
-.nc-field-layout-list {
-  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
-
-  :deep(.ant-checkbox-wrapper) {
-    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
-
-    &:hover {
-      .ant-checkbox-checked:after {
-        @apply !rounded;
-      }
-    }
-    .ant-checkbox {
-      @apply !top-0;
-
-      & + span {
-        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
-      }
-      .ant-checkbox-checked:after,
-      .ant-checkbox-inner {
-        @apply !rounded;
-      }
-    }
-  }
-  :deep(.ant-radio-wrapper) {
-    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
-    .ant-radio {
-      @apply !top-0;
-    }
-    .ant-radio + span {
-      @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
-    }
-  }
-}
 </style>

From 1adbfd5477f034eba627ba6d39609eadbbdc524d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:22 +0000
Subject: [PATCH 17/18] fix(nc-gui): form search limit option issue

---
 packages/nc-gui/components/cell/SingleSelect.vue       |  2 +-
 packages/nc-gui/components/cell/User.vue               |  6 +++++-
 packages/nc-gui/components/smartsheet/Form.vue         |  4 ++--
 .../nc-gui/components/smartsheet/form/LimitOptions.vue | 10 +++++++---
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4d91f1dd9a..414134298e 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -351,7 +351,7 @@ const onFocus = () => {
           </a-tag></a-radio
         >
       </a-radio-group>
-      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = ''">
+      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800" @click="vModel = ''">
         {{ $t('labels.clearSelection') }}
       </div>
     </div>
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 62fef82ce3..3331110136 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -377,7 +377,11 @@ const filterOption = (input: string, option: any) => {
           </component>
         </template>
       </component>
-      <div v-if="!isMultiple && vModel.length" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = []">
+      <div
+        v-if="!isMultiple && vModel.length"
+        class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800"
+        @click="vModel = []"
+      >
         {{ $t('labels.clearSelection') }}
       </div>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8234c0b7d5..716e3c1f42 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1139,7 +1139,7 @@ useEventListener(
 
                         <!-- Limit options -->
                         <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
-                          <div class="flex items-start gap-3">
+                          <div class="flex items-center gap-3">
                             <a-switch
                               v-model:checked="element.meta.isLimitOption"
                               v-e="['a:form-view:field:limit-options']"
@@ -1148,7 +1148,7 @@ useEventListener(
                             />
                             <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
                           </div>
-                          <div class="pl-8 flex-1 max-w-[calc(100%_-_40px)]">
+                          <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
                             <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
                               <LazySmartsheetFormLimitOptions
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index 730275a51f..c20d226413 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -124,7 +124,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 </script>
 
 <template>
-  <div class="w-full h-full nc-col-option-select-option nc-form-scrollbar">
+  <div class="w-full h-full nc-col-select-option nc-form-scrollbar">
     <div v-if="vModel.length > 12">
       <a-input
         v-model:value="searchQuery"
@@ -152,6 +152,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
       :model-value="vModel"
       item-key="id"
       handle=".nc-child-draggable-icon"
+      ghost-class="nc-form-field-limit-option-ghost"
       class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
       @change="onMove($event)"
       @start="drag = true"
@@ -258,7 +259,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         v-else-if="
           vModel.length &&
           searchQuery &&
-          !vModel?.filter((el) => {
+          !vModel?.filter((element) => {
             return column.uidt === UITypes.User
               ? (element?.display_name?.trim() || element?.email)?.toLowerCase().includes(searchQuery.toLowerCase())
               : element.title?.toLowerCase().includes(searchQuery.toLowerCase())
@@ -272,7 +273,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .nc-form-scrollbar {
   @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {
@@ -286,4 +287,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 :deep(.ant-tag) {
   @apply rounded-tag my-[2px];
 }
+.nc-form-field-limit-option-ghost {
+  @apply bg-gray-50;
+}
 </style>

From 91467588ae92edd9b05e441552e80f6f7e661b20 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:39:22 +0000
Subject: [PATCH 18/18] chore(nc-gui): lint

---
 packages/nc-gui/components/cell/SingleSelect.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 414134298e..57ccd9ee38 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -351,7 +351,11 @@ const onFocus = () => {
           </a-tag></a-radio
         >
       </a-radio-group>
-      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800" @click="vModel = ''">
+      <div
+        v-if="vModel"
+        class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800"
+        @click="vModel = ''"
+      >
         {{ $t('labels.clearSelection') }}
       </div>
     </div>