refactor(gui-v2): ui permission code correction, reduce modal size

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -3,9 +3,9 @@ import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
-import { inject, useViewFilters, watchEffect } from '#imports'
+import { inject, useViewFilters } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
-import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
@@ -16,6 +16,7 @@ const emit = defineEmits(['update:filtersLength'])
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
+const isLocked = inject(IsLockedInj)
 
 // todo: replace with inject or get from state
 const shared = ref(false)

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

@@ -16,8 +16,8 @@ const { fieldsOrder, coverImageField, modelValue } = defineProps<{
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
-const isLocked = inject(IsLockedInj)
 const rootFields = inject(FieldsInj)
+const isLocked = inject(IsLockedInj)
 
 const { $e } = useNuxtApp()
 
@@ -94,7 +94,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
         <div class="nc-fields-list py-1">
-          <Draggable :list="fields" @change="onMove($event)">
+          <Draggable :list="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">

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

@@ -127,7 +127,7 @@ const exportCsv = async () => {
       </template>
     </a-dropdown>
 
-    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw" :footer="null">
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>

packages/nc-gui-v2/composables/useUIPermission/index.ts

@@ -10,7 +10,6 @@ export function useUIPermission() {
   const isUIAllowed = (permission: RolePermissions, _skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
-
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
       userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@@ -37,9 +36,8 @@ export function useUIPermission() {
 
       return (
         hasRole &&
-        (rolePermission === '*' || typeof rolePermission === 'object'
-          ? rolePermission[permission as keyof typeof rolePermission] === true
-          : false)
+        (rolePermission === '*' ||
+          (typeof rolePermission === 'object' && rolePermission[permission as keyof typeof rolePermission]))
       )
     })
   }