Merge pull request #3271 from nocodb/fix/gui-v2-bugs

fix: miscellaneous bug fixes

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -232,6 +232,7 @@ function openTableCreateDialog() {
         <div class="flex-1">
           <div
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+            v-if="isUIAllowed('table-create')"
             @click="openTableCreateDialog"
           >
             <MdiPlus />
@@ -352,7 +353,7 @@ function openTableCreateDialog() {
                           </div>
                         </a-menu-item>
 
-                        <a-menu-item v-if="isUIAllowed('table-delete')" @click="() => $e('c:table:delete') && deleteTable(table)">
+                        <a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(table)">
                           <div class="nc-project-menu-item">
                             {{ $t('general.delete') }}
                           </div>
@@ -386,10 +387,7 @@ function openTableCreateDialog() {
               </div>
             </a-menu-item>
 
-            <a-menu-item
-              v-if="isUIAllowed('table-delete')"
-              @click="() => $e('c:table:delete') && deleteTable(contextMenuTarget.value)"
-            >
+            <a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(contextMenuTarget.value)">
               <div class="nc-project-menu-item">
                 {{ $t('general.delete') }}
               </div>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
 import {
   ActiveViewInj,
@@ -14,6 +16,8 @@ import {
   useViewColumns,
   watch,
 } from '#imports'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
 const meta = inject(MetaInj)!
 
@@ -39,6 +43,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
+  metaColumnById,
 } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
@@ -76,6 +81,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
   $e('a:fields:reorder')
 }
+
+const getIcon = (c: ColumnType) =>
+  h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+    columnMeta: c,
+  })
 </script>
 
 <template>
@@ -103,9 +113,12 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         <div class="nc-fields-list py-1">
           <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field, index: index }">
-              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="shrink" @change="saveOrUpdate(field, index)">
-                  <span class="">{{ field.title }}</span>
+                  <div class="flex items-center">
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
+                    <span>{{ field.title }}</span>
+                  </div>
                 </a-checkbox>
                 <div class="flex-1" />
                 <MdiDrag class="cursor-move" />
@@ -140,4 +153,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
+:deep(.ant-checkbox) {
+  @apply top-auto;
+}
 </style>

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -49,12 +49,14 @@ const page = computed({
 
 <style scoped>
 :deep(.ant-pagination-item a) {
-  @apply text-sm !leading-[21px];
+  @apply text-sm !leading-[21px] !no-underline;
 }
+
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;
-  @apply text-sm text-gray-500;
+  @apply text-sm !text-gray-500;
 }
+
 :deep(.ant-pagination-item-link) {
   @apply text-gray-500;
 }

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -52,15 +52,23 @@ const iconColor = '#1890ff'
     </h5>
 
     <div class="flex-1" />
-
-    <mdi-reload class="cursor-pointer select-none" />
-
-    <component
-      :is="drawerToggleIcon"
-      v-if="isUIAllowed('rowComments')"
-      class="cursor-pointer select-none nc-toggle-comments"
-      @click="commentsDrawer = !commentsDrawer"
-    />
+    <a-tooltip placement="bottom">
+      <template #title>
+        <div class="text-center w-full">Reload</div>
+      </template>
+      <mdi-reload class="cursor-pointer select-none" />
+    </a-tooltip>
+    <a-tooltip placement="bottom">
+      <template #title>
+        <div class="text-center w-full">Toggle comments draw</div>
+      </template>
+      <component
+        :is="drawerToggleIcon"
+        v-if="isUIAllowed('rowComments') && !isNew"
+        class="cursor-pointer select-none nc-toggle-comments"
+        @click="commentsDrawer = !commentsDrawer"
+      />
+    </a-tooltip>
 
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->

packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
-import { isVirtualCol } from 'nocodb-sdk'
+import { isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import Cell from '../Cell.vue'
 import VirtualCell from '../VirtualCell.vue'
@@ -46,14 +46,14 @@ const meta = toRef(props, 'meta')
 
 const fields = computedInject(FieldsInj, (_fields) => {
   if (props.useMetaFields) {
-    return meta.value.columns ?? []
+    return (meta.value.columns ?? []).filter((col) => !isSystemColumn(col))
   }
   return _fields?.value ?? []
 })
 
 provide(MetaInj, meta)
 
-const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+const { commentsDrawer, changedColumns, state: rowState, isNew } = useProvideExpandedFormStore(meta, row)
 
 const { $api } = useNuxtApp()
 
@@ -113,6 +113,7 @@ export default {
           <div class="w-[500px] mx-auto">
             <div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
@@ -130,7 +131,7 @@ export default {
           </div>
         </div>
 
-        <div class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
+        <div v-if="!isNew" class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
           <div class="h-full">
             <Comments v-if="commentsDrawer" />
           </div>

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -58,7 +58,7 @@ export default {
       <ExpandedForm
         v-if="!readOnly && !isLocked && expandedFormDlg"
         v-model="expandedFormDlg"
-        :row="{ row: item }"
+        :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
         :meta="relatedTableMeta"
         load-row
         use-meta-fields

packages/nc-gui-v2/composables/useExpandedFormStore.ts

@@ -121,7 +121,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         return obj
       }, {} as Record<string, any>)
 
-      if (row.value.rowMeta.new) {
+      if (row.value.rowMeta?.new) {
         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         /* todo:
@@ -133,11 +133,12 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
                 }
               }
             } */
-        row.value = {
+
+        Object.assign(row.value, {
           row: data,
           rowMeta: {},
           oldRow: { ...data },
-        }
+        })
 
         /// todo:
         // await this.reload();

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -204,5 +204,6 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     saveOrUpdate,
     sortedAndFilteredFields,
     showSystemFields,
+    metaColumnById,
   }
 }

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -85,10 +85,6 @@ onKeyStroke(
 
 clearTabs()
 
-if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: 'Team & Auth' })
-}
-
 function toggleDialog(value?: boolean, key?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
@@ -98,6 +94,10 @@ await loadProject()
 
 await loadTables()
 
+if (!route.params.type && isUIAllowed('teamAndAuth')) {
+  addTab({ type: TabType.AUTH, title: 'Team & Auth' })
+}
+
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()

packages/nc-gui-v2/pages/index/index.vue

@@ -153,7 +153,7 @@ onMounted(() => {
                   onClick: () => {
                     $e('a:project:open')
 
-                    navigateTo(`/nc/${record.id}/auth`)
+                    navigateTo(`/nc/${record.id}`)
                   },
                   class: ['group'],
                 })