fix: Fixed issue with create and duplicate view view

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

@@ -6,15 +6,17 @@ const { $e } = useNuxtApp()
 
 const { refreshCommandPalette } = useCommandPalette()
 const viewsStore = useViewsStore()
-const { views } = storeToRefs(viewsStore)
 const { loadViews, navigateToView } = viewsStore
 
 const table = inject(SidebarTableInj)!
 const project = inject(ProjectInj)!
 
+const isViewListLoading = ref(false)
+const toBeCreateType = ref<ViewTypes>()
+
 const isOpen = ref(false)
 
-function onOpenModal({
+async function onOpenModal({
   title = '',
   type,
   copyViewId,
@@ -25,7 +27,17 @@ function onOpenModal({
   copyViewId?: string
   groupingFieldColumnId?: string
 }) {
+  if (isViewListLoading.value) return
+
+  toBeCreateType.value = type
+
+  isViewListLoading.value = true
+  await loadViews({
+    tableId: table.value.id!,
+  })
+
   isOpen.value = false
+  isViewListLoading.value = false
 
   const isDlgOpen = ref(true)
 
@@ -36,7 +48,6 @@ function onOpenModal({
     'tableId': table.value.id,
     'selectedViewId': copyViewId,
     groupingFieldColumnId,
-    'views': views,
     'onUpdate:modelValue': closeDialog,
     'onCreated': async (view: ViewType) => {
       closeDialog()
@@ -44,6 +55,7 @@ function onOpenModal({
       refreshCommandPalette()
 
       await loadViews({
+        tableId: table.value.id!,
         force: true,
       })
 
@@ -64,25 +76,24 @@ function onOpenModal({
 
   function closeDialog() {
     isOpen.value = false
-
-    close(1000)
   }
 }
 </script>
 
 <template>
-  <NcDropdown v-model:isOpen="isOpen" destroy-popup-on-hide @click.stop="isOpen = !isOpen">
+  <NcDropdown v-model:visible="isOpen" destroy-popup-on-hide @click.stop="isOpen = true">
     <slot />
     <template #overlay>
       <NcMenu class="max-w-48">
-        <NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })">
+        <NcMenuItem @click.stop="onOpenModal({ type: ViewTypes.GRID })">
           <div class="item" data-testid="sidebar-view-create-grid">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.GRID }" />
               <div>Grid</div>
             </div>
 
-            <GeneralIcon class="plus" icon="plus" />
+            <GeneralLoader v-if="toBeCreateType === ViewTypes.GRID && isViewListLoading" />
+            <GeneralIcon v-else class="plus" icon="plus" />
           </div>
         </NcMenuItem>
 
@@ -93,7 +104,8 @@ function onOpenModal({
               <div>Form</div>
             </div>
 
-            <GeneralIcon class="plus" icon="plus" />
+            <GeneralLoader v-if="toBeCreateType === ViewTypes.FORM && isViewListLoading" />
+            <GeneralIcon v-else class="plus" icon="plus" />
           </div>
         </NcMenuItem>
         <NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })">
@@ -103,7 +115,8 @@ function onOpenModal({
               <div>Gallery</div>
             </div>
 
-            <GeneralIcon class="plus" icon="plus" />
+            <GeneralLoader v-if="toBeCreateType === ViewTypes.GALLERY && isViewListLoading" />
+            <GeneralIcon v-else class="plus" icon="plus" />
           </div>
         </NcMenuItem>
         <NcMenuItem data-testid="sidebar-view-create-kanban" @click="onOpenModal({ type: ViewTypes.KANBAN })">
@@ -113,7 +126,8 @@ function onOpenModal({
               <div>Kanban</div>
             </div>
 
-            <GeneralIcon class="plus" icon="plus" />
+            <GeneralLoader v-if="toBeCreateType === ViewTypes.KANBAN && isViewListLoading" />
+            <GeneralIcon v-else class="plus" icon="plus" />
           </div>
         </NcMenuItem>
       </NcMenu>

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

@@ -341,6 +341,7 @@ function onOpenModal({
 
       await loadViews({
         force: true,
+        tableId: table.value.id!,
       })
 
       navigateToView({

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

@@ -13,7 +13,6 @@ interface Props {
   selectedViewId?: string
   groupingFieldColumnId?: string
   geoDataFieldColumnId?: string
-  views: ViewType[]
   tableId: string
 }
 
@@ -41,7 +40,9 @@ const emits = defineEmits<Emits>()
 
 const { getMeta } = useMetas()
 
-const { views, selectedViewId, groupingFieldColumnId, geoDataFieldColumnId, tableId } = toRefs(props)
+const { viewsByTable } = storeToRefs(useViewsStore())
+
+const { selectedViewId, groupingFieldColumnId, geoDataFieldColumnId, tableId } = toRefs(props)
 
 const meta = ref<TableType | undefined>()
 
@@ -57,6 +58,8 @@ const { api } = useApi()
 
 const isViewCreating = ref(false)
 
+const views = computed(() => viewsByTable.value.get(tableId.value) ?? [])
+
 const form = reactive<Form>({
   title: props.title || '',
   type: props.type,
@@ -239,19 +242,44 @@ onMounted(async () => {
       <div class="flex flex-row items-center gap-x-1.5">
         <GeneralViewIcon :meta="{ type: form.type }" class="nc-view-icon !text-xl" />
         <template v-if="form.type === ViewTypes.GRID">
-          {{ $t('labels.duplicateGridView') }}
+          <template v-if="form.copy_from_id">
+            {{ $t('labels.duplicateGridView') }}
+          </template>
+          <template v-else>
+            {{ $t('labels.createGridView') }}
+          </template>
         </template>
         <template v-else-if="form.type === ViewTypes.GALLERY">
-          {{ $t('labels.duplicateGalleryView') }}
+          <template v-if="form.copy_from_id">
+            {{ $t('labels.duplicateGalleryView') }}
+          </template>
+          <template v-else>
+            {{ $t('labels.createGalleryView') }}
+          </template>
         </template>
         <template v-else-if="form.type === ViewTypes.FORM">
-          {{ $t('labels.duplicateFormView') }}
+          <template v-if="form.copy_from_id">
+            {{ $t('labels.duplicateFormView') }}
+          </template>
+          <template v-else>
+            {{ $t('labels.createFormView') }}
+          </template>
         </template>
         <template v-else-if="form.type === ViewTypes.KANBAN">
-          {{ $t('labels.duplicateKanbanView') }}
+          <template v-if="form.copy_from_id">
+            {{ $t('labels.duplicateKanbanView') }}
+          </template>
+          <template v-else>
+            {{ $t('labels.createKanbanView') }}
+          </template>
         </template>
         <template v-else>
-          {{ $t('labels.duplicateView') }}
+          <template v-if="form.copy_from_id">
+            {{ $t('labels.duplicateMapView') }}
+          </template>
+          <template v-else>
+            {{ $t('labels.duplicateView') }}
+          </template>
         </template>
       </div>
     </template>

packages/nc-gui/lang/en.json

@@ -438,11 +438,15 @@
     "dashboardName": "Dashboard name",
     "createView": "Create a View",
     "creatingView": "Creating View",
-    "duplicateView": "Duplicate view",
+    "duplicateView": "Duplicate View",
     "duplicateGridView": "Duplicate Grid View",
+    "createGridView": "Create Grid View",
     "duplicateGalleryView": "Duplicate Gallery View",
+    "createGalleryView": "Create Gallery View",
     "duplicateFormView": "Duplicate Form View",
+    "createFormView": "Create Form View",
     "duplicateKanbanView": "Duplicate Kanban View",
+    "createKanbanView": "Create Kanban View",
     "viewName": "View name",
     "viewLink": "View Link",
     "columnName": "Column Name",