Added column persistence to MySubmissionsTable (bcgov#1507)

MySubmissionsTable now persists the column selection for the currently active form in local storage.
usingtechnology · Oct 9, 2024 · 4536b3f · 4536b3f
1 parent 92ebb7c
commit 4536b3f
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 11 deletions.
diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -35,6 +35,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.4.0",
     "bootstrap-scss": "^5.3.1",
     "crypto-js": "^4.1.1",

diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -27,7 +27,6 @@ const debounceTime = ref(300);
 const deleteItem = ref({});
 // Show only deleted items
 const deletedOnly = ref(false);
-const filterData = ref([]);
 const search = ref('');
 const filterIgnore = ref([
   {
@@ -503,7 +502,6 @@ async function restoreMultipleSubs() {
 
 async function updateFilter(data) {
   showColumnsDialog.value = false;
-  filterData.value = data;
   let preferences = {
     columns: [],
   };

diff --git a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
@@ -16,7 +16,6 @@ const properties = defineProps({
   },
 });
 
-const filterData = ref([]);
 const filterIgnore = ref([
   {
     key: 'confirmationId',
@@ -32,7 +31,8 @@ const showColumnsDialog = ref(false);
 
 const formStore = useFormStore();
 
-const { form, formFields, submissionList, isRTL } = storeToRefs(formStore);
+const { form, formFields, mySubmissionPreferences, submissionList, isRTL } =
+  storeToRefs(formStore);
 
 //------------------------ TABLE HEADERS
 // These are headers that will be available by default for the
@@ -102,11 +102,11 @@ const HEADERS = computed(() => {
   let headers = BASE_HEADERS.value;
 
   // The user selected some columns
-  if (filterData.value.length > 0) {
+  if (USER_PREFERENCES.value.length > 0) {
     headers = headers.filter(
       (header) =>
         // It must be in the user selected columns
-        filterData.value.some((fd) => fd === header.key) ||
+        USER_PREFERENCES.value.some((up) => up === header.key) ||
         // except if it's in the filter ignore
         filterIgnore.value.some((fd) => fd.key === header.key)
     );
@@ -181,6 +181,21 @@ const isCopyFromExistingSubmissionEnabled = computed(
   () => form.value && form.value.enableCopyExistingSubmission
 );
 
+// These are columns that the user has previously selected
+// through the select columns dialog. These are columns
+// that they wish to see in the table in this view.
+const USER_PREFERENCES = computed(() => {
+  let preselectedData = [];
+  if (
+    mySubmissionPreferences.value?.preferences?.formId &&
+    mySubmissionPreferences.value.preferences.formId == properties.formId &&
+    mySubmissionPreferences.value?.preferences?.columns
+  ) {
+    preselectedData = mySubmissionPreferences.value.preferences.columns;
+  }
+  return preselectedData;
+});
+
 onBeforeMount(async () => {
   await Promise.all([
     await formStore.fetchForm(properties.formId),
@@ -280,14 +295,20 @@ async function populateSubmissionsTable() {
 }
 
 async function updateFilter(data) {
-  filterData.value = data;
+  let preferences = {
+    formId: properties.formId,
+    columns: [],
+  };
+  data.forEach((d) => {
+    preferences.columns.push(d);
+  });
+  mySubmissionPreferences.value.preferences = preferences;
   showColumnsDialog.value = false;
 }
 
 defineExpose({
   BASE_FILTER_HEADERS,
   BASE_HEADERS,
-  filterData,
   filterIgnore,
   getCurrentStatus,
   getStatusDate,

diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
@@ -1,3 +1,4 @@
+import { useLocalStorage } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { i18n } from '~/internationalization';
 import {
@@ -116,6 +117,7 @@ export const useFormStore = defineStore('form', {
     subscriptionData: genInitialSubscribeDetails(),
     totalSubmissions: 0,
     userFormPreferences: {},
+    mySubmissionPreferences: useLocalStorage('mySubmissionPreferences', {}),
     version: {},
     userLabels: [],
   }),

diff --git a/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js b/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js
@@ -39,6 +39,12 @@ describe('MySubmissionsTable.vue', () => {
       ],
     };
     formStore.formFields = [];
+    formStore.mySubmissionPreferences = {
+      preferences: {
+        formId: formId,
+        columns: [],
+      },
+    };
   });
 
   it('renders', async () => {
@@ -171,7 +177,7 @@ describe('MySubmissionsTable.vue', () => {
     };
     formStore.formFields = ['formField1', 'formField2'];
 
-    wrapper.vm.filterData = [
+    formStore.mySubmissionPreferences.preferences.columns = [
       'createdBy',
       'username',
       'status',
@@ -732,12 +738,12 @@ describe('MySubmissionsTable.vue', () => {
 
     wrapper.vm.showColumnsDialog = true;
 
-    expect(wrapper.vm.filterData).toEqual([]);
+    expect(formStore.mySubmissionPreferences.preferences.columns).toEqual([]);
     expect(wrapper.vm.showColumnsDialog).toBeTruthy();
 
     wrapper.vm.updateFilter(['createdBy']);
 
-    expect(wrapper.vm.filterData).toEqual(['createdBy']);
+    expect(formStore.mySubmissionPreferences.preferences.columns).toEqual(['createdBy']);
     expect(wrapper.vm.showColumnsDialog).toBeFalsy();
   });
 });