Merge pull request #6636 from nocodb/nc-fix/misc-2

Misc issues

packages/nc-gui/components/dashboard/View.vue

@@ -111,6 +111,14 @@ watch(isMobileMode, () => {
   isLeftSidebarOpen.value = !isMobileMode.value
 })
 
+watch(sidebarState, () => {
+  if (sidebarState.value === 'peekCloseEnd') {
+    setTimeout(() => {
+      sidebarState.value = 'hiddenEnd'
+    }, animationDuration)
+  }
+})
+
 onMounted(() => {
   handleSidebarOpenOnMobileForNonViews()
 })
@@ -132,7 +140,7 @@ onMounted(() => {
     >
       <div
         ref="wrapperRef"
-        class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
+        class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-12 absolute overflow-visible"
         :class="{
           'mobile': isMobileMode,
           'minimized-height': !isLeftSidebarOpen,
@@ -171,6 +179,7 @@ onMounted(() => {
 
   > * {
     @apply opacity-0;
+    z-index: -1 !important;
     transform: translateX(-100%);
   }
 }

packages/nc-gui/components/smartsheet/Details.vue

@@ -33,7 +33,7 @@ const openedSubTab = computed({
 watch(openedSubTab, () => {
   // TODO: Find a good way to know when the roles are populated and check
   // Re-enable this check for first render
-  if (openedSubTab.value === 'field' && !isUIAllowed('hookList')) {
+  if (openedSubTab.value === 'field' && !isUIAllowed('fieldAdd')) {
     onViewsTabChange('relation')
   }
   if (openedSubTab.value === 'webhook' && !isUIAllowed('hookList')) {

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

@@ -14,6 +14,7 @@ interface Props {
   fixedSize?: number
   extraStyle?: string
   showApiTiming?: boolean
+  alignLeft?: boolean
 }
 
 const props = defineProps<Props>()
@@ -34,6 +35,8 @@ const extraStyle = toRef(props, 'extraStyle')
 
 const isGroupBy = inject(IsGroupByInj, ref(false))
 
+const alignLeft = computed(() => props.alignLeft ?? false)
+
 const { isViewDataLoading, isPaginationLoading } = storeToRefs(useViewsStore())
 
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
@@ -69,7 +72,12 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
       isGroupBy ? 'margin-top:1px; border-radius: 0 0 12px 12px !important;' : ''
     }${extraStyle}`"
   >
-    <div class="flex-1 flex items-center">
+    <div
+      class="flex items-center"
+      :class="{
+        'flex-1': !alignLeft,
+      }"
+    >
       <slot name="add-record" />
       <span
         v-if="!alignCountOnRight && count !== null && count !== Infinity"
@@ -84,7 +92,8 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
       v-if="!hidePagination"
       class="transition-all duration-350"
       :class="{
-        '-ml-17': isLeftSidebarOpen,
+        '-ml-17': isLeftSidebarOpen && !alignLeft,
+        'ml-8': alignLeft,
       }"
     >
       <div v-if="isPaginationLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">

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

@@ -297,6 +297,7 @@ const onScroll = (e: Event) => {
       v-model:pagination-data="vGroup.paginationData"
       align-count-on-right
       custom-label="groups"
+      show-api-timing
       :change-page="(p: number) => groupWrapperChangePage(p, vGroup)"
       :style="`${props.depth && props.depth > 0 ? 'border-radius: 0 0 12px 12px !important;' : ''}`"
     ></LazySmartsheetPagination>
@@ -305,6 +306,7 @@ const onScroll = (e: Event) => {
       v-model:pagination-data="vGroup.paginationData"
       align-count-on-right
       custom-label="groups"
+      show-api-timing
       :change-page="(p: number) => groupWrapperChangePage(p, vGroup)"
       :hide-sidebars="true"
       :style="`${props.depth && props.depth > 0 ? 'border-radius: 0 0 12px 12px !important;' : ''}margin-left: ${scrollBump}px;`"

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

@@ -1682,8 +1682,9 @@ const loaderText = computed(() => {
       v-if="headerOnly !== true"
       :key="isMobileMode"
       v-model:pagination-data="paginationDataRef"
-      show-api-timing
+      :show-api-timing="!isGroupBy"
       align-count-on-right
+      :align-left="isGroupBy"
       :change-page="changePage"
       :hide-sidebars="paginationStyleRef?.hideSidebars === true"
       :fixed-size="paginationStyleRef?.fixedSize"

packages/nc-gui/components/smartsheet/topbar/SelectMode.vue

@@ -3,7 +3,17 @@ import { storeToRefs, useViewsStore } from '#imports'
 
 const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
+const { isUIAllowed } = useRoles()
+
 const { onViewsTabChange } = useViewsStore()
+
+const onClickDetails = () => {
+  if (isUIAllowed('fieldAdd')) {
+    onViewsTabChange('field')
+  } else {
+    onViewsTabChange('relation')
+  }
+}
 </script>
 
 <template>
@@ -26,7 +36,7 @@ const { onViewsTabChange } = useViewsStore()
       :class="{
         active: openedViewsTab !== 'view',
       }"
-      @click="onViewsTabChange('field')"
+      @click="onClickDetails"
     >
       <GeneralIcon
         icon="erd"