github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(gui): use a different hook to reload the vue meta and avoid reloading data 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3655/head
Pranav C 2 years ago
parent
ece6f75a4e
commit
acba7769c0
5 changed files with 79 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
  2. 26
      packages/nc-gui/components/smartsheet/Gallery.vue
  3. 2
      packages/nc-gui/components/tabs/Smartsheet.vue
  4. 1
      packages/nc-gui/context/index.ts
  5. 125
      scripts/cypress/integration/common/4g_table_view_expanded_form.js

4
packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
Unescape View File

@ -26,6 +26,8 @@ const activeView = inject(ActiveViewInj, ref())
const reloadDataHook = inject(ReloadViewDataHookInj)! const reloadDataHook = inject(ReloadViewDataHookInj)!
const reloadViewMetaHook = inject(ReloadViewMetaHookInj)!
const rootFields = inject(FieldsInj) const rootFields = inject(FieldsInj)
const isLocked = inject(IsLockedInj, ref(false)) const isLocked = inject(IsLockedInj, ref(false))
@ -93,7 +95,7 @@ const coverImageColumnId = computed({
fk_cover_image_col_id: val, fk_cover_image_col_id: val,
}) })
;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val ;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val
reloadDataHook.trigger() reloadViewMetaHook.trigger()
} }
}, },
}) })

26
packages/nc-gui/components/smartsheet/Gallery.vue
Unescape View File

@ -12,7 +12,7 @@ import {
OpenNewRecordFormHookInj, OpenNewRecordFormHookInj,
PaginationDataInj, PaginationDataInj,
ReadonlyInj, ReadonlyInj,
ReloadViewDataHookInj, ReloadViewMetaHookInj,
extractPkFromRow, extractPkFromRow,
inject, inject,
provide, provide,
@ -28,7 +28,7 @@ interface Attachment {
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref()) const view = inject(ActiveViewInj, ref())
const reloadViewDataHook = inject(ReloadViewDataHookInj) const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()) const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
const expandedFormDlg = ref(false) const expandedFormDlg = ref(false)
@ -85,17 +85,6 @@ const attachments = (record: any): Array<Attachment> => {
} }
} }
const reloadAttachments = ref(false)
reloadViewDataHook?.on(async () => {
await loadData()
await loadGalleryData()
reloadAttachments.value = true
nextTick(() => {
reloadAttachments.value = false
})
})
const expandForm = (row: RowType, _state?: Record<string, any>) => { const expandForm = (row: RowType, _state?: Record<string, any>) => {
if (!isUIAllowed('xcDatatableEditable')) return if (!isUIAllowed('xcDatatableEditable')) return
@ -142,8 +131,15 @@ const expandedFormOnRowIdDlg = computed({
}, },
}) })
// reload table data reload hook as fallback to rowdatareload const reloadAttachments = ref(false)
provide(ReloadRowDataHookInj, reloadViewDataHook)
reloadViewMetaHook?.on(async () => {
await loadGalleryData()
reloadAttachments.value = true
nextTick(() => {
reloadAttachments.value = false
})
})
onMounted(async () => { onMounted(async () => {
await loadData() await loadData()

2
packages/nc-gui/components/tabs/Smartsheet.vue
Unescape View File

@ -35,6 +35,7 @@ provide(TabMetaInj, ref(activeTab))
const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string]) const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
const reloadEventHook = createEventHook<void>() const reloadEventHook = createEventHook<void>()
const reloadViewMetaEventHook = createEventHook<void>()
const openNewRecordFormHook = createEventHook<void>() const openNewRecordFormHook = createEventHook<void>()
const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta) const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
@ -47,6 +48,7 @@ provide(MetaInj, meta)
provide(ActiveViewInj, activeView) provide(ActiveViewInj, activeView)
provide(IsLockedInj, isLocked) provide(IsLockedInj, isLocked)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReloadViewMetaHookInj, reloadViewMetaEventHook)
provide(OpenNewRecordFormHookInj, openNewRecordFormHook) provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
provide(FieldsInj, fields) provide(FieldsInj, fields)
provide(IsFormInj, isForm) provide(IsFormInj, isForm)

1
packages/nc-gui/context/index.ts
Unescape View File

@ -24,6 +24,7 @@ export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
/** when bool is passed, it indicates if a loading spinner should be visible while reloading */ /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection') export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')
export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection') export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection') export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection') export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')

125
scripts/cypress/integration/common/4g_table_view_expanded_form.js
Unescape View File

@ -1,6 +1,6 @@
import { isTestSuiteActive } from "../../support/page_objects/projectConstants"; import { isTestSuiteActive } from '../../support/page_objects/projectConstants';
import { loginPage } from "../../support/page_objects/navigation"; import { loginPage } from '../../support/page_objects/navigation';
import { mainPage } from "../../support/page_objects/mainPage"; import { mainPage } from '../../support/page_objects/mainPage';
function capitalizeFirstLetter(string) { function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1); return string.charAt(0).toUpperCase() + string.slice(1);
@ -17,7 +17,7 @@ function capitalizeFirstLetter(string) {
function verifyExpandFormHeader(title) { function verifyExpandFormHeader(title) {
cy.get( cy.get(
`.nc-drawer-expanded-form .nc-expanded-form-header :contains("${title}")` `.nc-drawer-expanded-form .nc-expanded-form-header :contains("${title}")`
).should("exist"); ).should('exist');
} }
export const genTest = (apiType, dbType) => { export const genTest = (apiType, dbType) => {
@ -29,7 +29,7 @@ export const genTest = (apiType, dbType) => {
// open a table to work on views // open a table to work on views
// //
cy.openTableTab("Country", 25); cy.openTableTab('Country', 25);
}); });
beforeEach(() => { beforeEach(() => {
@ -42,7 +42,7 @@ export const genTest = (apiType, dbType) => {
after(() => { after(() => {
cy.restoreLocalStorage(); cy.restoreLocalStorage();
cy.closeTableTab("Country"); cy.closeTableTab('Country');
cy.saveLocalStorage(); cy.saveLocalStorage();
}); });
@ -55,93 +55,92 @@ export const genTest = (apiType, dbType) => {
cy.get(`.nc-create-${viewType}-view`).click(); cy.get(`.nc-create-${viewType}-view`).click();
// Pop up window, click Submit (accepting default name for view) // Pop up window, click Submit (accepting default name for view)
cy.getActiveModal(".nc-modal-view-create") cy.getActiveModal('.nc-modal-view-create')
.find(".ant-btn-primary") .find('.ant-btn-primary')
.click(); .click();
cy.toastWait("View created successfully"); cy.toastWait('View created successfully');
// validate if view was created && contains default name 'Country1' // validate if view was created && contains default name 'Country1'
cy.get(`.nc-${viewType}-view-item`) cy.get(`.nc-${viewType}-view-item`)
.contains(`${capitalizeFirstLetter(viewType)}-1`) .contains(`${capitalizeFirstLetter(viewType)}-1`)
.should("exist"); .should('exist');
if (viewType === "gallery") { if (viewType === 'gallery') {
cy.intercept('/api/v1/db/meta/galleries/*').as('getGalleryView'); // cy.intercept('/api/v1/db/meta/galleries/*').as('getGalleryView');
// mainPage.unhideField("City List"); // mainPage.unhideField("City List");
cy.get(".nc-fields-menu-btn").click(); cy.get('.nc-fields-menu-btn').click();
cy.getActiveMenu(".nc-dropdown-fields-menu") cy.getActiveMenu('.nc-dropdown-fields-menu')
.find(`.nc-fields-list label:contains("City List"):visible`) .find(`.nc-fields-list label:contains("City List"):visible`)
.click(); .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.get('.ant-card-body [title="City List"]').should('exist');
// cy.wait(5000); cy.wait(1000);
// cy.wait(['@getGalleryView'])
cy.wait(['@getGalleryView'])
} }
}); });
it(`Expand a row in ${viewType} and verify url`, () => { it(`Expand a row in ${viewType} and verify url`, () => {
// click on first row-expand if grid & first card if its gallery // click on first row-expand if grid & first card if its gallery
if (viewType === "grid") { if (viewType === 'grid') {
cy.get(".nc-row-expand").first().click({ force: true }); cy.get('.nc-row-expand').first().click({ force: true });
} else if (viewType === "gallery") { } else if (viewType === 'gallery') {
cy.get(".nc-gallery-container .ant-card").first().click(); cy.get('.nc-gallery-container .ant-card').first().click();
} }
// ensure expand draw is open // ensure expand draw is open
verifyExpandFormHeader("Afghanistan"); verifyExpandFormHeader('Afghanistan');
cy.url().should("include", "rowId=1"); cy.url().should('include', 'rowId=1');
// spy on clipboard to verify copied text // spy on clipboard to verify copied text
// creating alias for clipboard // creating alias for clipboard
cy.window().then((win) => { cy.window().then((win) => {
cy.spy(win.navigator.clipboard, "writeText").as("copy"); cy.spy(win.navigator.clipboard, 'writeText').as('copy');
}); });
// copy url // copy url
cy.getActiveDrawer(".nc-drawer-expanded-form") cy.getActiveDrawer('.nc-drawer-expanded-form')
.should("exist") .should('exist')
.find(".nc-copy-row-url") .find('.nc-copy-row-url')
.click(); .click();
// use alias; verify if clipboard was called with correct text // 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 // close expanded form
cy.getActiveDrawer(".nc-drawer-expanded-form") cy.getActiveDrawer('.nc-drawer-expanded-form')
.find(".nc-expand-form-close-btn") .find('.nc-expand-form-close-btn')
.click(); .click();
}); });
it(`Visit a ${viewType} row url and verify expanded form`, () => { it(`Visit a ${viewType} row url and verify expanded form`, () => {
cy.url().then((url) => { cy.url().then((url) => {
cy.visit( 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`, () => { it(`Visit an invalid ${viewType} row url and verify expanded form`, () => {
cy.url().then((url) => { cy.url().then((url) => {
cy.visit( cy.visit(
"/" + '/' +
url.split("/").slice(3).join("/").split("?")[0] + url.split('/').slice(3).join('/').split('?')[0] +
"?rowId=99999999" '?rowId=99999999'
); );
cy.toastWait("Record not found"); cy.toastWait('Record not found');
cy.get(`.nc-drawer-expanded-form .ant-drawer-content:visible`).should( cy.get(`.nc-drawer-expanded-form .ant-drawer-content:visible`).should(
"not.exist" 'not.exist'
); );
// defaults to corresponding grid / gallery view // defaults to corresponding grid / gallery view
cy.get(viewType === "grid" ? ".nc-grid" : ".nc-gallery").should( cy.get(viewType === 'grid' ? '.nc-grid' : '.nc-gallery').should(
"exist" 'exist'
); );
}); });
}); });
@ -149,54 +148,54 @@ export const genTest = (apiType, dbType) => {
it(`Visit a ${viewType} row url and verify nested expanded form`, () => { it(`Visit a ${viewType} row url and verify nested expanded form`, () => {
cy.url().then((url) => { cy.url().then((url) => {
cy.visit( 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( cy.get('.nc-drawer-expanded-form .ant-drawer-content').should(
"exist" 'exist'
); );
cy.getActiveDrawer(".nc-drawer-expanded-form") cy.getActiveDrawer('.nc-drawer-expanded-form')
.find(".ant-card-body") .find('.ant-card-body')
.first() .first()
.click(); .click();
cy.get(".nc-drawer-expanded-form .ant-drawer-content").should( cy.get('.nc-drawer-expanded-form .ant-drawer-content').should(
"have.length", 'have.length',
2 2
); );
cy.wait(1000); cy.wait(1000);
verifyExpandFormHeader("Kabul"); verifyExpandFormHeader('Kabul');
// close expanded forms // close expanded forms
cy.getActiveDrawer(".nc-drawer-expanded-form") cy.getActiveDrawer('.nc-drawer-expanded-form')
.find(".ant-btn") .find('.ant-btn')
.contains("Cancel") .contains('Cancel')
.click(); .click();
verifyExpandFormHeader("Afghanistan"); verifyExpandFormHeader('Afghanistan');
cy.getActiveDrawer(".nc-drawer-expanded-form") cy.getActiveDrawer('.nc-drawer-expanded-form')
.find(".ant-btn") .find('.ant-btn')
.contains("Cancel") .contains('Cancel')
.click(); .click();
}); });
}); });
it("Delete view", () => { it('Delete view', () => {
cy.get(".nc-view-delete-icon").click({ force: true }); cy.get('.nc-view-delete-icon').click({ force: true });
cy.getActiveModal(".nc-modal-view-delete") cy.getActiveModal('.nc-modal-view-delete')
.find(".ant-btn-dangerous") .find('.ant-btn-dangerous')
.click(); .click();
cy.toastWait("View deleted successfully"); cy.toastWait('View deleted successfully');
}); });
}; };
// viewTest("grid"); // grid view // viewTest("grid"); // grid view
viewTest("gallery"); // gallery view viewTest('gallery'); // gallery view
}); });
}; };

Write Preview
Loading…
Cancel
Save