From acba7769c00a12a262baf3c299ae5591d8f1a0af Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 21 Sep 2022 12:03:31 +0530 Subject: [PATCH] fix(gui): use a different hook to reload the vue meta and avoid reloading data Signed-off-by: Pranav C --- .../smartsheet-toolbar/FieldsMenu.vue | 4 +- .../nc-gui/components/smartsheet/Gallery.vue | 26 ++-- .../nc-gui/components/tabs/Smartsheet.vue | 2 + packages/nc-gui/context/index.ts | 1 + .../common/4g_table_view_expanded_form.js | 125 +++++++++--------- 5 files changed, 79 insertions(+), 79 deletions(-) diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue index ae04476d9a..c64aa19854 100644 --- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue @@ -26,6 +26,8 @@ const activeView = inject(ActiveViewInj, ref()) const reloadDataHook = inject(ReloadViewDataHookInj)! +const reloadViewMetaHook = inject(ReloadViewMetaHookInj)! + const rootFields = inject(FieldsInj) const isLocked = inject(IsLockedInj, ref(false)) @@ -93,7 +95,7 @@ const coverImageColumnId = computed({ fk_cover_image_col_id: val, }) ;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val - reloadDataHook.trigger() + reloadViewMetaHook.trigger() } }, }) diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue index 75e9ef2785..728efc86fb 100644 --- a/packages/nc-gui/components/smartsheet/Gallery.vue +++ b/packages/nc-gui/components/smartsheet/Gallery.vue @@ -12,7 +12,7 @@ import { OpenNewRecordFormHookInj, PaginationDataInj, ReadonlyInj, - ReloadViewDataHookInj, + ReloadViewMetaHookInj, extractPkFromRow, inject, provide, @@ -28,7 +28,7 @@ interface Attachment { const meta = inject(MetaInj, ref()) const view = inject(ActiveViewInj, ref()) -const reloadViewDataHook = inject(ReloadViewDataHookInj) +const reloadViewMetaHook = inject(ReloadViewMetaHookInj) const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()) const expandedFormDlg = ref(false) @@ -85,17 +85,6 @@ const attachments = (record: any): Array => { } } -const reloadAttachments = ref(false) - -reloadViewDataHook?.on(async () => { - await loadData() - await loadGalleryData() - reloadAttachments.value = true - nextTick(() => { - reloadAttachments.value = false - }) -}) - const expandForm = (row: RowType, _state?: Record) => { if (!isUIAllowed('xcDatatableEditable')) return @@ -142,8 +131,15 @@ const expandedFormOnRowIdDlg = computed({ }, }) -// reload table data reload hook as fallback to rowdatareload -provide(ReloadRowDataHookInj, reloadViewDataHook) +const reloadAttachments = ref(false) + +reloadViewMetaHook?.on(async () => { + await loadGalleryData() + reloadAttachments.value = true + nextTick(() => { + reloadAttachments.value = false + }) +}) onMounted(async () => { await loadData() diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue index 0779bccc1f..1323d58402 100644 --- a/packages/nc-gui/components/tabs/Smartsheet.vue +++ b/packages/nc-gui/components/tabs/Smartsheet.vue @@ -35,6 +35,7 @@ provide(TabMetaInj, ref(activeTab)) const meta = computed(() => metas.value?.[activeTab?.id as string]) const reloadEventHook = createEventHook() +const reloadViewMetaEventHook = createEventHook() const openNewRecordFormHook = createEventHook() const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta) @@ -47,6 +48,7 @@ provide(MetaInj, meta) provide(ActiveViewInj, activeView) provide(IsLockedInj, isLocked) provide(ReloadViewDataHookInj, reloadEventHook) +provide(ReloadViewMetaHookInj, reloadViewMetaEventHook) provide(OpenNewRecordFormHookInj, openNewRecordFormHook) provide(FieldsInj, fields) provide(IsFormInj, isForm) diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts index d13500e68b..556fea9767 100644 --- a/packages/nc-gui/context/index.ts +++ b/packages/nc-gui/context/index.ts @@ -24,6 +24,7 @@ export const ReadonlyInj: InjectionKey = Symbol('readonly-injection') /** when bool is passed, it indicates if a loading spinner should be visible while reloading */ export const ReloadViewDataHookInj: InjectionKey> = Symbol('reload-view-data-injection') +export const ReloadViewMetaHookInj: InjectionKey> = Symbol('reload-view-meta-injection') export const ReloadRowDataHookInj: InjectionKey> = Symbol('reload-row-data-injection') export const OpenNewRecordFormHookInj: InjectionKey> = Symbol('open-new-record-form-injection') export const FieldsInj: InjectionKey> = Symbol('fields-injection') diff --git a/scripts/cypress/integration/common/4g_table_view_expanded_form.js b/scripts/cypress/integration/common/4g_table_view_expanded_form.js index b85fecb150..3e85db5a95 100644 --- a/scripts/cypress/integration/common/4g_table_view_expanded_form.js +++ b/scripts/cypress/integration/common/4g_table_view_expanded_form.js @@ -1,6 +1,6 @@ -import { isTestSuiteActive } from "../../support/page_objects/projectConstants"; -import { loginPage } from "../../support/page_objects/navigation"; -import { mainPage } from "../../support/page_objects/mainPage"; +import { isTestSuiteActive } from '../../support/page_objects/projectConstants'; +import { loginPage } from '../../support/page_objects/navigation'; +import { mainPage } from '../../support/page_objects/mainPage'; function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); @@ -17,7 +17,7 @@ function capitalizeFirstLetter(string) { function verifyExpandFormHeader(title) { cy.get( `.nc-drawer-expanded-form .nc-expanded-form-header :contains("${title}")` - ).should("exist"); + ).should('exist'); } export const genTest = (apiType, dbType) => { @@ -29,7 +29,7 @@ export const genTest = (apiType, dbType) => { // open a table to work on views // - cy.openTableTab("Country", 25); + cy.openTableTab('Country', 25); }); beforeEach(() => { @@ -42,7 +42,7 @@ export const genTest = (apiType, dbType) => { after(() => { cy.restoreLocalStorage(); - cy.closeTableTab("Country"); + cy.closeTableTab('Country'); cy.saveLocalStorage(); }); @@ -55,93 +55,92 @@ export const genTest = (apiType, dbType) => { cy.get(`.nc-create-${viewType}-view`).click(); // Pop up window, click Submit (accepting default name for view) - cy.getActiveModal(".nc-modal-view-create") - .find(".ant-btn-primary") + cy.getActiveModal('.nc-modal-view-create') + .find('.ant-btn-primary') .click(); - cy.toastWait("View created successfully"); + cy.toastWait('View created successfully'); // validate if view was created && contains default name 'Country1' cy.get(`.nc-${viewType}-view-item`) .contains(`${capitalizeFirstLetter(viewType)}-1`) - .should("exist"); + .should('exist'); - if (viewType === "gallery") { - cy.intercept('/api/v1/db/meta/galleries/*').as('getGalleryView'); + if (viewType === 'gallery') { + // cy.intercept('/api/v1/db/meta/galleries/*').as('getGalleryView'); // mainPage.unhideField("City List"); - cy.get(".nc-fields-menu-btn").click(); - cy.getActiveMenu(".nc-dropdown-fields-menu") + cy.get('.nc-fields-menu-btn').click(); + cy.getActiveMenu('.nc-dropdown-fields-menu') .find(`.nc-fields-list label:contains("City List"):visible`) .click(); - cy.get(".nc-fields-menu-btn").click(); + cy.get('.nc-fields-menu-btn').click(); - cy.get('.ant-card-body [title="City List"]').should("exist"); - // cy.wait(5000); - - cy.wait(['@getGalleryView']) + cy.get('.ant-card-body [title="City List"]').should('exist'); + cy.wait(1000); + // cy.wait(['@getGalleryView']) } }); it(`Expand a row in ${viewType} and verify url`, () => { // click on first row-expand if grid & first card if its gallery - if (viewType === "grid") { - cy.get(".nc-row-expand").first().click({ force: true }); - } else if (viewType === "gallery") { - cy.get(".nc-gallery-container .ant-card").first().click(); + if (viewType === 'grid') { + cy.get('.nc-row-expand').first().click({ force: true }); + } else if (viewType === 'gallery') { + cy.get('.nc-gallery-container .ant-card').first().click(); } // ensure expand draw is open - verifyExpandFormHeader("Afghanistan"); - cy.url().should("include", "rowId=1"); + verifyExpandFormHeader('Afghanistan'); + cy.url().should('include', 'rowId=1'); // spy on clipboard to verify copied text // creating alias for clipboard cy.window().then((win) => { - cy.spy(win.navigator.clipboard, "writeText").as("copy"); + cy.spy(win.navigator.clipboard, 'writeText').as('copy'); }); // copy url - cy.getActiveDrawer(".nc-drawer-expanded-form") - .should("exist") - .find(".nc-copy-row-url") + cy.getActiveDrawer('.nc-drawer-expanded-form') + .should('exist') + .find('.nc-copy-row-url') .click(); // use alias; verify if clipboard was called with correct text - cy.get("@copy").should("be.calledWithMatch", `?rowId=1`); + cy.get('@copy').should('be.calledWithMatch', `?rowId=1`); // close expanded form - cy.getActiveDrawer(".nc-drawer-expanded-form") - .find(".nc-expand-form-close-btn") + cy.getActiveDrawer('.nc-drawer-expanded-form') + .find('.nc-expand-form-close-btn') .click(); }); it(`Visit a ${viewType} row url and verify expanded form`, () => { cy.url().then((url) => { cy.visit( - "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=2" + '/' + url.split('/').slice(3).join('/').split('?')[0] + '?rowId=2' ); - verifyExpandFormHeader("Algeria"); + verifyExpandFormHeader('Algeria'); }); }); it(`Visit an invalid ${viewType} row url and verify expanded form`, () => { cy.url().then((url) => { cy.visit( - "/" + - url.split("/").slice(3).join("/").split("?")[0] + - "?rowId=99999999" + '/' + + url.split('/').slice(3).join('/').split('?')[0] + + '?rowId=99999999' ); - cy.toastWait("Record not found"); + cy.toastWait('Record not found'); cy.get(`.nc-drawer-expanded-form .ant-drawer-content:visible`).should( - "not.exist" + 'not.exist' ); // defaults to corresponding grid / gallery view - cy.get(viewType === "grid" ? ".nc-grid" : ".nc-gallery").should( - "exist" + cy.get(viewType === 'grid' ? '.nc-grid' : '.nc-gallery').should( + 'exist' ); }); }); @@ -149,54 +148,54 @@ export const genTest = (apiType, dbType) => { it(`Visit a ${viewType} row url and verify nested expanded form`, () => { cy.url().then((url) => { cy.visit( - "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=1" + '/' + url.split('/').slice(3).join('/').split('?')[0] + '?rowId=1' ); - verifyExpandFormHeader("Afghanistan"); + verifyExpandFormHeader('Afghanistan'); - cy.get(".nc-drawer-expanded-form .ant-drawer-content").should( - "exist" + cy.get('.nc-drawer-expanded-form .ant-drawer-content').should( + 'exist' ); - cy.getActiveDrawer(".nc-drawer-expanded-form") - .find(".ant-card-body") + cy.getActiveDrawer('.nc-drawer-expanded-form') + .find('.ant-card-body') .first() .click(); - cy.get(".nc-drawer-expanded-form .ant-drawer-content").should( - "have.length", + cy.get('.nc-drawer-expanded-form .ant-drawer-content').should( + 'have.length', 2 ); cy.wait(1000); - verifyExpandFormHeader("Kabul"); + verifyExpandFormHeader('Kabul'); // close expanded forms - cy.getActiveDrawer(".nc-drawer-expanded-form") - .find(".ant-btn") - .contains("Cancel") + cy.getActiveDrawer('.nc-drawer-expanded-form') + .find('.ant-btn') + .contains('Cancel') .click(); - verifyExpandFormHeader("Afghanistan"); + verifyExpandFormHeader('Afghanistan'); - cy.getActiveDrawer(".nc-drawer-expanded-form") - .find(".ant-btn") - .contains("Cancel") + cy.getActiveDrawer('.nc-drawer-expanded-form') + .find('.ant-btn') + .contains('Cancel') .click(); }); }); - it("Delete view", () => { - cy.get(".nc-view-delete-icon").click({ force: true }); - cy.getActiveModal(".nc-modal-view-delete") - .find(".ant-btn-dangerous") + it('Delete view', () => { + cy.get('.nc-view-delete-icon').click({ force: true }); + cy.getActiveModal('.nc-modal-view-delete') + .find('.ant-btn-dangerous') .click(); - cy.toastWait("View deleted successfully"); + cy.toastWait('View deleted successfully'); }); }; // viewTest("grid"); // grid view - viewTest("gallery"); // gallery view + viewTest('gallery'); // gallery view }); };