Merge pull request #3082 from nocodb/fix/select-improvements

fix(gui-v2): select improvements

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -6,7 +6,7 @@ import { ActiveCellInj, ColumnInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue: string | string[] | undefined
+  modelValue?: string | string[]
 }
 
 const { modelValue } = defineProps<Props>()
@@ -38,7 +38,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
+  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -130,7 +130,7 @@ watch(isOpen, (n, _o) => {
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
       >
-        <span class="text-slate-500">{{ val }}</span>
+        <span class="w-full text-slate-500">{{ val }}</span>
       </a-tag>
     </template>
   </a-select>
@@ -169,6 +169,10 @@ watch(isOpen, (n, _o) => {
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
+
+:deep(.ant-select-selection-overflow-item) {
+  @apply "flex overflow-hidden";
+}
 </style>
 <!--
 /**

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -5,7 +5,7 @@ import { computed, inject } from '#imports'
 import { ActiveCellInj, ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | undefined
+  modelValue?: string
 }
 
 const { modelValue } = defineProps<Props>()
@@ -72,11 +72,12 @@ watch(isOpen, (n, _o) => {
     placeholder="Select an option"
     :bordered="false"
     :open="isOpen"
+    :show-arrow="active || vModel === null"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
-    <a-select-option v-for="op of options" :key="op.title" @click.stop>
+    <a-select-option v-for="op of options" :key="op.title" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -18,7 +18,7 @@ const column = inject(ColumnInj)
 
 const meta = inject(MetaInj)
 
-const { $api } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
 const { t } = useI18n()
 
@@ -45,6 +45,7 @@ const setAsPrimaryValue = async () => {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
     message.success('Successfully updated as primary column')
+    $e('a:column:set-primary')
   } catch (e) {
     message.error('Failed to update primary column')
   }
@@ -63,7 +64,7 @@ const setAsPrimaryValue = async () => {
             {{ $t('general.edit') }}
           </div>
         </a-menu-item>
-        <a-menu-item v-if="!virtual" v-t="['a:column:set-primary']" @click="setAsPrimaryValue">
+        <a-menu-item v-if="!virtual" @click="setAsPrimaryValue">
           <div class="nc-column-edit nc-header-menu-item">
             <MdiStarIcon class="text-primary" />
 

packages/nocodb/src/lib/meta/api/columnApis.ts

@@ -748,13 +748,13 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       // MultiSelect to SingleSelect
       if (column.uidt === UITypes.MultiSelect && colBody.uidt === UITypes.SingleSelect) {
         if (driverType === 'mysql' || driverType === 'mysql2') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = SUBSTRING_INDEX(??, ',', 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = SUBSTRING_INDEX(??, ',', 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.column_name, column.column_name, column.column_name]);
         } else if (driverType === 'pg') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = split_part(??, ',', 1);`, [table.table_name, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = split_part(??, ',', 1);`, [table.table_name, column.column_name, column.column_name]);
         } else if (driverType === 'mssql') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = LEFT(cast(?? as varchar(max)), CHARINDEX(',', ??) - 1) WHERE CHARINDEX(',', ??) > 0;`, [table.table_name, column.title, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = LEFT(cast(?? as varchar(max)), CHARINDEX(',', ??) - 1) WHERE CHARINDEX(',', ??) > 0;`, [table.table_name, column.column_name, column.column_name, column.column_name, column.column_name]);
         } else if (driverType === 'sqlite3') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = substr(??, 1, instr(??, ',') - 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = substr(??, 1, instr(??, ',') - 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.column_name, column.column_name, column.column_name, column.column_name]);
         }
       }
 
@@ -764,16 +764,21 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       }
 
       // Handle default values
+      const optionTitles = colBody.colOptions.options.map(el => el.title);
       if (colBody.cdf) {
-        
+        if (colBody.uidt === UITypes.SingleSelect) {
-        if (driverType === 'mysql' || driverType === 'mysql2') {
+          if (!optionTitles.includes(colBody.cdf)) {
-          
+            NcError.badRequest(`Default value '${colBody.cdf}' is not a select option.`);
-        } else if (driverType === 'pg') {
+          }
-          
+        } else {
-        } else if (driverType === 'mssql') {
+          for (const cdf of colBody.cdf.split(',')) {
-          
+            if (!optionTitles.includes(cdf)) {
-        } else if (driverType === 'sqlite3') {
+              NcError.badRequest(`Default value '${cdf}' is not a select option.`);
-          
+            }
+          }
+        }
+        if (driverType === 'pg') {
+          colBody.cdf = `'${colBody.cdf}'`;
         }
       }
       
@@ -811,19 +816,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         }
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = NULL WHERE ?? LIKE ?`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = NULL WHERE ?? LIKE ?`, [table.table_name, column.column_name, column.column_name, option.title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: null });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${option.title})` }, { [column.column_name]: null });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, option.title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, option.title, option.title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`, [table.table_name, column.column_name, column.column_name, option.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), ','), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), ',')) - 2)`, [table.table_name, column.title, column.title, option.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), ','), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), ',')) - 2)`, [table.table_name, column.column_name, column.column_name, option.title, column.column_name, option.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ','), ',')`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ','), ',')`, [table.table_name, column.column_name, column.column_name, option.title]);
           }
         }
       }
@@ -909,19 +914,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
 
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.column_name, newOp.title, column.column_name, option.title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: newOp.title });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${option.title})` }, { [column.column_name]: newOp.title });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, newOp.title, option.title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title, option.title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, option.title, newOp.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title, column.column_name, option.title, newOp.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title]);
           }
         }
       }
@@ -930,19 +935,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         let newOp = ch.def_option;
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, ch.temp_title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.column_name, newOp.title, column.column_name, ch.temp_title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${ch.temp_title})` }, { [column.title]: newOp.title });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${ch.temp_title})` }, { [column.column_name]: newOp.title });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, ch.temp_title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title, ch.temp_title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title, column.column_name, ch.temp_title, newOp.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title]);
           }
         }
       }