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
Split 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 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()
}
},
})

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

@ -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<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>) => {
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()

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 reloadEventHook = createEventHook<void>()
const reloadViewMetaEventHook = createEventHook<void>()
const openNewRecordFormHook = createEventHook<void>()
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)

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 */
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 OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-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 { 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
});
};

Write Preview
Loading…
Cancel
Save