Skip to content

Commit

Permalink
fixed SubmissionsTable (bcgov#1488)
Browse files Browse the repository at this point in the history 
fixed the issue with pagination and sort not working
  • Loading branch information
@jasonchung1871
jasonchung1871 authored Aug 23, 2024
1 parent 5b8bd97 commit eecbf22
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 52 deletions.
50 changes: 25 additions & 25 deletions app/frontend/src/components/forms/SubmissionsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ const filterIgnore = ref([
},
]);
const forceTableRefresh = ref(0);
const itemsPerPage = ref(10);
const itemsPP = ref(10);
const loading = ref(true);
const page = ref(1);
const currentPage = ref(1);
const restoreItem = ref({});
const selectedSubmissions = ref([]);
const serverItems = ref([]);
Expand All @@ -52,7 +52,7 @@ const showDeleteDialog = ref(false);
const showRestoreDialog = ref(false);
const singleSubmissionDelete = ref(false);
const singleSubmissionRestore = ref(false);
const sortBy = ref({});
const sort = ref({});
const firstDataLoad = ref(true);
// When filtering, this data will not be preselected when clicking reset
const tableFilterIgnore = ref([
Expand Down Expand Up @@ -306,26 +306,26 @@ function onShowColumnDialog() {
showColumnsDialog.value = true;
}
async function updateTableOptions({ pg, itemsPP, sort }) {
if (pg) {
page.value = pg;
async function updateTableOptions({ page, itemsPerPage, sortBy }) {
if (page) {
currentPage.value = page;
}
if (sort?.length > 0) {
if (sort[0].key === 'date') {
sortBy.value.column = 'createdAt';
} else if (sort[0].key === 'submitter') {
sortBy.value.column = 'createdBy';
} else if (sort[0].key === 'status') {
sortBy.value.column = 'formSubmissionStatusCode';
if (sortBy?.length > 0) {
if (sortBy[0].key === 'date') {
sort.value.column = 'createdAt';
} else if (sortBy[0].key === 'submitter') {
sort.value.column = 'createdBy';
} else if (sortBy[0].key === 'status') {
sort.value.column = 'formSubmissionStatusCode';
} else {
sortBy.value.column = sort[0].key;
sort.value.column = sortBy[0].key;
}
sortBy.value.order = sort[0].order;
sort.value.order = sortBy[0].order;
} else {
sortBy.value = {};
sort.value = {};
}
if (itemsPP) {
itemsPerPage.value = itemsPP;
if (itemsPerPage) {
itemsPP.value = itemsPerPage;
}
if (!firstDataLoad.value) {
await refreshSubmissions();
Expand All @@ -336,11 +336,11 @@ async function updateTableOptions({ pg, itemsPP, sort }) {
async function getSubmissionData() {
let criteria = {
formId: properties.formId,
itemsPerPage: itemsPerPage.value,
page: page.value - 1,
itemsPerPage: itemsPP.value,
page: currentPage.value - 1,
filterformSubmissionStatusCode: true,
paginationEnabled: true,
sortBy: sortBy.value,
sortBy: sort.value,
search: search.value,
searchEnabled: search.value.length > 0 ? true : false,
createdAt: Object.values({
Expand Down Expand Up @@ -539,11 +539,11 @@ defineExpose({
getSubmissionData,
handleSearch,
HEADERS,
itemsPerPage,
itemsPP,
multiDeleteMessage,
multiRestoreMessage,
onShowColumnDialog,
page,
currentPage,
restoreSub,
serverItems,
showColumnsDialog,
Expand All @@ -554,7 +554,7 @@ defineExpose({
singleRestoreMessage,
singleSubmissionDelete,
singleSubmissionRestore,
sortBy,
sort,
updateFilter,
userColumns,
USER_PREFERENCES,
Expand Down Expand Up @@ -691,7 +691,7 @@ defineExpose({
hover
:items-length="totalSubmissions"
class="submissions-table"
:items-per-page="itemsPerPage"
:items-per-page="itemsPP"
:headers="HEADERS"
item-value="submissionId"
:items="serverItems"
Expand Down
54 changes: 27 additions & 27 deletions app/frontend/tests/unit/components/forms/SubmissionsTable.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -731,70 +731,70 @@ describe('SubmissionsTable.vue', () => {
// should refresh submissions
expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
expect(fetchSubmissionsSpy).toBeCalledTimes(0);
expect(wrapper.vm.page).toEqual(1);
expect(wrapper.vm.sortBy).toEqual({});
expect(wrapper.vm.itemsPerPage).toEqual(10);
expect(wrapper.vm.currentPage).toEqual(1);
expect(wrapper.vm.sort).toEqual({});
expect(wrapper.vm.itemsPP).toEqual(10);

getFormPreferencesForCurrentUserSpy.mockReset();
fetchSubmissionsSpy.mockReset();

await wrapper.vm.updateTableOptions({
pg: 5,
itemsPP: 2,
sort: [{ key: 'date', order: 'desc' }],
page: 5,
itemsPerPage: 2,
sortBy: [{ key: 'date', order: 'desc' }],
});
// should not refresh submissions
wrapper.vm.firstDataLoad = true;
expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
expect(fetchSubmissionsSpy).toBeCalledTimes(0);
expect(wrapper.vm.page).toEqual(5);
expect(wrapper.vm.sortBy).toEqual({ column: 'createdAt', order: 'desc' });
expect(wrapper.vm.itemsPerPage).toEqual(2);
expect(wrapper.vm.currentPage).toEqual(5);
expect(wrapper.vm.sort).toEqual({ column: 'createdAt', order: 'desc' });
expect(wrapper.vm.itemsPP).toEqual(2);

await wrapper.vm.updateTableOptions({
pg: 5,
itemsPP: 2,
sort: [{ key: 'submitter', order: 'desc' }],
page: 5,
itemsPerPage: 2,
sortBy: [{ key: 'submitter', order: 'desc' }],
});
// should not refresh submissions
wrapper.vm.firstDataLoad = true;
expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
expect(fetchSubmissionsSpy).toBeCalledTimes(0);
expect(wrapper.vm.page).toEqual(5);
expect(wrapper.vm.sortBy).toEqual({ column: 'createdBy', order: 'desc' });
expect(wrapper.vm.itemsPerPage).toEqual(2);
expect(wrapper.vm.currentPage).toEqual(5);
expect(wrapper.vm.sort).toEqual({ column: 'createdBy', order: 'desc' });
expect(wrapper.vm.itemsPP).toEqual(2);

await wrapper.vm.updateTableOptions({
pg: 5,
itemsPP: 2,
sort: [{ key: 'status', order: 'desc' }],
page: 5,
itemsPerPage: 2,
sortBy: [{ key: 'status', order: 'desc' }],
});
// should not refresh submissions
wrapper.vm.firstDataLoad = true;
expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
expect(fetchSubmissionsSpy).toBeCalledTimes(0);
expect(wrapper.vm.page).toEqual(5);
expect(wrapper.vm.sortBy).toEqual({
expect(wrapper.vm.currentPage).toEqual(5);
expect(wrapper.vm.sort).toEqual({
column: 'formSubmissionStatusCode',
order: 'desc',
});
expect(wrapper.vm.itemsPerPage).toEqual(2);
expect(wrapper.vm.itemsPP).toEqual(2);

await wrapper.vm.updateTableOptions({
pg: 5,
itemsPP: 2,
sort: [{ key: 'something', order: 'desc' }],
page: 5,
itemsPerPage: 2,
sortBy: [{ key: 'something', order: 'desc' }],
});
// should not refresh submissions
wrapper.vm.firstDataLoad = true;
expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
expect(fetchSubmissionsSpy).toBeCalledTimes(0);
expect(wrapper.vm.page).toEqual(5);
expect(wrapper.vm.sortBy).toEqual({
expect(wrapper.vm.currentPage).toEqual(5);
expect(wrapper.vm.sort).toEqual({
column: 'something',
order: 'desc',
});
expect(wrapper.vm.itemsPerPage).toEqual(2);
expect(wrapper.vm.itemsPP).toEqual(2);
});

it('getSubmissionData will fetchSubmissions in different ways', async () => {
Expand Down

0 comments on commit eecbf22

Please sign in to comment.