Merge pull request #8387 from nocodb/nc-fix/ui-flaws

Nc fix/UI flaws

packages/nc-gui/components/cell/Rating.vue

@@ -22,6 +22,8 @@ const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const rowHeight = inject(RowHeightInj, ref(undefined))
+
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const ratingMeta = computed(() => {
@@ -78,7 +80,15 @@ watch(rateDomRef, () => {
     :disabled="readOnly"
     :count="ratingMeta.max"
     :class="readOnly ? 'pointer-events-none' : ''"
-    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 2px'};`"
+    :style="{
+      'color': ratingMeta.color,
+      'padding': isExpandedFormOpen ? '0px 8px' : '0px 2px',
+      'display': '-webkit-box',
+      'max-width': '100%',
+      '-webkit-line-clamp': rowHeightTruncateLines(rowHeight),
+      '-webkit-box-orient': 'vertical',
+      'overflow': 'hidden',
+    }"
     @keydown="onKeyPress"
   >
     <template #character>

packages/nc-gui/components/dlg/TableDelete.vue

@@ -79,8 +79,9 @@ const onDelete = async () => {
     $e('a:table:delete')
 
     if (oldActiveTableId === toBeDeletedTable.id) {
+      const sourceTables = tables.value.filter((t) => t.source_id === toBeDeletedTable.source_id)
       // Navigate to base if no tables left or open first table
-      if (tables.value.length === 0) {
+      if (sourceTables.length === 0) {
         await navigateTo(
           baseUrl({
             id: props.baseId,
@@ -88,7 +89,7 @@ const onDelete = async () => {
           }),
         )
       } else {
-        await openTable(tables.value[0])
+        await openTable(sourceTables[0])
       }
     }
 

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -204,6 +204,8 @@ const { height: tableHeadHeight, width: _tableHeadWidth } = useElementBounding(t
 
 const isViewColumnsLoading = computed(() => _isViewColumnsLoading.value || !meta.value)
 
+const resizingColumn = ref(false)
+
 // #Permissions
 const { isUIAllowed } = useRoles()
 const hasEditPermission = computed(() => isUIAllowed('dataEdit'))
@@ -855,6 +857,11 @@ const deleteSelectedRangeOfRows = () => {
 }
 
 const selectColumn = (columnId: string) => {
+  // this is triggered with click event, so do nothing & clear resizingColumn flag if it's true
+  if (resizingColumn.value) {
+    resizingColumn.value = false
+    return
+  }
   const colIndex = fields.value.findIndex((col) => col.id === columnId)
   if (colIndex !== -1) {
     makeActive(0, colIndex)
@@ -870,6 +877,10 @@ onClickOutside(tableBodyEl, (e) => {
     return
   }
 
+  if (resizingColumn.value) {
+    return
+  }
+
   // do nothing if context menu was open
   if (contextMenu.value) return
 
@@ -1117,6 +1128,7 @@ const onXcResizing = (cn: string | undefined, event: any) => {
 const onXcStartResizing = (cn: string | undefined, event: any) => {
   if (!cn) return
   resizingColOldWith.value = event.detail
+  resizingColumn.value = true
 }
 
 const loadColumn = (title: string, tp: string, colOptions?: any) => {

packages/nc-gui/composables/useData.ts

@@ -658,6 +658,8 @@ export function useData(args: {
 
     if (!removedRowsData.length) return
 
+    isPaginationLoading.value = true
+
     const { list } = await $api.dbTableRow.list(NOCO, base?.value.id as string, meta.value?.id as string, {
       pks: removedRowsData.map((row) => row[compositePrimaryKey]).join(','),
     })
@@ -677,11 +679,16 @@ export function useData(args: {
       return message.error(`${t('msg.error.deleteRowFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
     }
 
-    if (!removedRowsData.length) return
+    if (!removedRowsData.length) {
+      isPaginationLoading.value = false
+      return
+    }
 
     addUndo({
       redo: {
         fn: async function redo(this: UndoRedoAction, removedRowsData: Record<string, any>[]) {
+          isPaginationLoading.value = true
+
           const removedRowIds = await bulkDeleteRows(removedRowsData.map((row) => row.pkData))
 
           if (Array.isArray(removedRowIds)) {
@@ -693,7 +700,9 @@ export function useData(args: {
             }
           }
 
+          await callbacks?.syncCount?.()
           await callbacks?.syncPagination?.()
+          await callbacks?.globalCallback?.()
         },
         args: [removedRowsData],
       },
@@ -783,6 +792,8 @@ export function useData(args: {
 
     if (!removedRowsData.length) return
 
+    isPaginationLoading.value = true
+
     const { list } = await $api.dbTableRow.list(NOCO, base?.value.id as string, meta.value?.id as string, {
       pks: removedRowsData.map((row) => row[compositePrimaryKey]).join(','),
     })
@@ -802,11 +813,16 @@ export function useData(args: {
       return message.error(`${t('msg.error.deleteRowFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
     }
 
-    if (!removedRowsData.length) return
+    if (!removedRowsData.length) {
+      isPaginationLoading.value = false
+      return
+    }
 
     addUndo({
       redo: {
         fn: async function redo(this: UndoRedoAction, removedRowsData: Record<string, any>[]) {
+          isPaginationLoading.value = true
+
           const removedRowIds = await bulkDeleteRows(removedRowsData.map((row) => row.pkData))
 
           if (Array.isArray(removedRowIds)) {
@@ -818,7 +834,9 @@ export function useData(args: {
             }
           }
 
+          await callbacks?.syncCount?.()
           await callbacks?.syncPagination?.()
+          await callbacks?.globalCallback?.()
         },
         args: [removedRowsData],
       },
@@ -872,19 +890,14 @@ export function useData(args: {
     rows: Record<string, string>[],
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
-    isPaginationLoading.value = true
     try {
       const bulkDeletedRowsData = await $api.dbDataTableRow.delete(metaValue?.id as string, rows.length === 1 ? rows[0] : rows, {
         viewId: viewMetaValue?.id as string,
       })
 
-      await callbacks?.syncCount?.()
       return rows.length === 1 && bulkDeletedRowsData ? [bulkDeletedRowsData] : bulkDeletedRowsData
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
-    } finally {
-      await callbacks?.globalCallback?.()
-      isPaginationLoading.value = false
     }
   }
 

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -360,6 +360,10 @@ export function useMultiSelect(
     */
     const map: Record<string, boolean> = {}
 
+    if (activeCell.row !== null && activeCell.col !== null) {
+      map[`${activeCell.row}-${activeCell.col}`] = true
+    }
+
     if (selectedRange._start === null || selectedRange._end === null) {
       return map
     }