Forms-754_select_columns_in_my_submission_table

bcgov · Jul 11, 2023 · dd8bb81 · dd8bb81
2 parents 000164f + 5d6c36e
commit dd8bb81
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 140 deletions.
diff --git a/app/frontend/src/components/base/BaseFilter.vue b/app/frontend/src/components/base/BaseFilter.vue
@@ -7,7 +7,7 @@
     <v-card-text class="mt-0 pt-0">
       <hr class="hr" />
 
-      <div class="d-flex flex-row align-center" style="gap: 30px">
+      <div class="d-flex flex-row" style="gap: 10px">
         <v-text-field
           v-model="inputFilter"
           :label="inputFilterLabel"
@@ -20,6 +20,28 @@
           class="mt-3"
         >
         </v-text-field>
+        <v-tooltip bottom>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              color="primary"
+              class="mx-1 align-self-center mb-3"
+              icon
+              @click="onResetColumns"
+              v-bind="attrs"
+              v-on="on"
+            >
+              <font-awesome-icon
+                icon="fa-solid fa-repeat"
+                color="primary"
+                v-bind="attrs"
+                style="pointer-events: none"
+                v-on="on"
+                size="xl"
+              />
+            </v-btn>
+          </template>
+          <span>Reset Columns</span>
+        </v-tooltip>
       </div>
       <v-data-table
         fixed-header
@@ -28,10 +50,11 @@
         height="300px"
         v-model="selectedData"
         :headers="inputHeaders"
-        :items="inputData"
+        :items="tableData"
         :item-key="inputItemKey"
         :search="inputFilter"
         class="grey lighten-5"
+        disable-pagination
       >
       </v-data-table>
       <v-btn @click="savingFilterData" class="primary mt-3">{{
@@ -49,6 +72,10 @@
 
 <script>
 import i18n from '@/internationalization';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faRepeat } from '@fortawesome/free-solid-svg-icons';
+library.add(faRepeat);
+
 export default {
   name: 'BaseFilter',
   props: {
@@ -77,6 +104,10 @@ export default {
         },
       ],
     },
+    resetData: {
+      type: Array,
+      default: () => [],
+    },
     // The default selected data
     preselectedData: {
       type: Array,
@@ -103,15 +134,32 @@ export default {
     return {
       selectedData: this.preselectedData,
       inputFilter: '',
+      tableData: this.inputData,
     };
   },
+  watch: {
+    selectedData() {
+      let filteredData = this.inputData.filter(
+        (item) =>
+          !this.selectedData.find(
+            (selectedItem) => selectedItem.text === item.text
+          )
+      );
+      this.tableData = this.selectedData.concat(filteredData);
+    },
+  },
   methods: {
     savingFilterData() {
       this.inputFilter = '';
       this.$emit('saving-filter-data', this.selectedData);
     },
+    onResetColumns() {
+      this.selectedData = this.resetData;
+      this.inputFilter = '';
+    },
     cancelFilterData() {
-      this.$emit('cancel-filter-data');
+      (this.selectedData = this.preselectedData),
+        this.$emit('cancel-filter-data');
     },
   },
 };

diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
@@ -310,38 +310,16 @@ export default {
       function iterate(obj, stack, fields, propNeeded) {
         //Get property path from nested object
         for (let property in obj) {
-          const innerObject = obj[property];
-
-          // When the form contains a Data Grid there will be an array that
-          // needs to be checked, and an array of properties to be unset.
-          if (Array.isArray(innerObject)) {
-            const fieldsArray = [];
-            for (let i = 0; i < innerObject.length; i++) {
-              const next = iterate(
-                innerObject[i],
-                stack + '.' + property + '[' + i + ']',
-                fields,
-                propNeeded
-              );
-
-              if (next) {
-                fieldsArray.push(next);
-              }
-            }
-
-            if (fieldsArray.length > 0) {
-              return fieldsArray;
-            }
-          } else if (typeof innerObject === 'object') {
+          if (typeof obj[property] == 'object') {
             return iterate(
-              innerObject,
+              obj[property],
               stack + '.' + property,
               fields,
               propNeeded
             );
           } else if (propNeeded === property) {
             fields = fields + stack + '.' + property;
-            return fields.replace(/^\./, '');
+            return fields;
           }
         }
       }
@@ -361,12 +339,8 @@ export default {
           });
         } else if (fieldcomponent?.validate?.isUseForCopy === false) {
           const fieldPath = iterate(submission, '', '', fieldcomponent.key);
-          if (Array.isArray(fieldPath)) {
-            for (let path of fieldPath) {
-              _.unset(submission, path);
-            }
-          } else if (fieldPath) {
-            _.unset(submission, fieldPath);
+          if (fieldPath) {
+            _.unset(submission, fieldPath.replace(/^\./, ''));
           }
         }
       }

diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -267,7 +267,8 @@
         "
         inputItemKey="value"
         :inputSaveButtonText="$t('trans.submissionsTable.save')"
-        :inputData="FILTER_HEADERS"
+        :inputData="SELECT_COLUMNS_HEADERS"
+        :resetData="FILTER_HEADERS"
         :preselectedData="PRESELECTED_DATA"
         @saving-filter-data="updateFilter"
         @cancel-filter-data="showColumnsDialog = false"
@@ -359,16 +360,14 @@ export default {
     checkFormManage() {
       return this.permissions.some((p) => FormManagePermissions.includes(p));
     },
-
-    DEFAULT_HEADERS() {
+    DEFAULT_HEADER() {
       let headers = [
         {
           text: this.$t('trans.submissionsTable.confirmationID'),
           align: 'start',
           value: 'confirmationId',
         },
       ];
-
       if (this.userFormPreferences?.preferences?.columns) {
         if (this.userFormPreferences.preferences.columns.includes('date')) {
           headers = [
@@ -437,19 +436,6 @@ export default {
         ];
       }
 
-      // Add any custom columns if the user has them
-      const maxHeaderLength = 25;
-      this.userColumns.forEach((col) => {
-        headers.push({
-          text:
-            col.length > maxHeaderLength
-              ? `${col.substring(0, maxHeaderLength)}...`
-              : col,
-          align: 'end',
-          value: col,
-        });
-      });
-
       // Actions column at the end
       headers.push({
         text: this.$t('trans.submissionsTable.view'),
@@ -469,71 +455,82 @@ export default {
         sortable: false,
         width: '40px',
       });
-
-      return headers.filter((x) => x.value !== 'updatedAt' || this.deletedOnly);
-    },
-
-    HEADERS() {
-      let headers = this.DEFAULT_HEADERS;
-      if (this.filterData.length > 0)
-        headers = headers.filter(
-          (h) =>
-            this.filterData.some((fd) => fd.value === h.value) ||
-            this.filterIgnore.some((ign) => ign.value === h.value)
-        );
       return headers;
     },
-    FILTER_HEADERS() {
-      let filteredHeader = this.DEFAULT_HEADERS.filter(
-        (h) => !this.filterIgnore.some((fd) => fd.value === h.value)
-      ).concat(
+
+    SELECT_COLUMNS_HEADERS() {
+      return [...this.FILTER_HEADERS].concat(
         this.formFields.map((ff) => {
           return { text: ff, value: ff, align: 'end' };
         })
       );
+    },
 
-      filteredHeader = [
-        {
-          text: this.$t('trans.submissionsTable.submissionDate'),
-          align: 'start',
-          value: 'date',
-        },
-        {
-          text: this.$t('trans.submissionsTable.submitter'),
-          align: 'start',
-          value: 'submitter',
-        },
-        {
-          text: this.$t('trans.submissionsTable.status'),
-          align: 'start',
-          value: 'status',
-        },
-        ...filteredHeader,
-      ];
+    HEADERS() {
+      let headers = [...this.DEFAULT_HEADER];
 
-      return filteredHeader.filter(function (item, index, inputArray) {
-        return (
+      if (headers.length > 1) {
+        headers.splice(1, 0, ...this.USER_PREFERENCES);
+      } else {
+        headers = headers.concat(this.USER_PREFERENCES);
+      }
+      return headers.filter(
+        (item, idx, inputArray) =>
           inputArray.findIndex((arrayItem) => arrayItem.value === item.value) ==
-          index
-        );
-      });
+          idx
+      );
+    },
+
+    FILTER_HEADERS() {
+      return [...this.DEFAULT_HEADER].filter(
+        (h) => !this.filterIgnore.some((fd) => fd.value === h.value)
+      );
     },
     PRESELECTED_DATA() {
+      let headers = [...this.FILTER_HEADERS];
+      if (headers.length > 1) {
+        headers.splice(1, 0, ...this.USER_PREFERENCES);
+      } else {
+        headers = headers.concat(this.USER_PREFERENCES);
+      }
+      return headers.filter(
+        (item, idx, inputArray) =>
+          inputArray.findIndex((arrayItem) => arrayItem.value === item.value) ==
+          idx
+      );
+    },
+    USER_PREFERENCES() {
       let preselectedData = [];
       if (this.userFormPreferences?.preferences?.columns) {
         preselectedData = this.userFormPreferences.preferences.columns.map(
           (column) => {
-            return {
-              align: 'end',
-              text: column,
-              value: column,
-            };
+            if (column === 'date') {
+              return {
+                text: this.$t('trans.submissionsTable.submissionDate'),
+                align: 'start',
+                value: 'date',
+              };
+            } else if (column === 'submitter') {
+              return {
+                text: this.$t('trans.submissionsTable.submitter'),
+                align: 'start',
+                value: 'submitter',
+              };
+            } else if (column === 'status') {
+              return {
+                text: this.$t('trans.submissionsTable.status'),
+                align: 'start',
+                value: 'status',
+              };
+            } else {
+              return {
+                align: 'start',
+                text: column,
+                value: column,
+              };
+            }
           }
         );
-      } else {
-        preselectedData = this.DEFAULT_HEADERS.filter(
-          (h) => !this.filterIgnore.some((fd) => fd.value === h.value)
-        );
       }
       return preselectedData;
     },

diff --git a/app/frontend/src/components/forms/manage/TeamManagement.vue b/app/frontend/src/components/forms/manage/TeamManagement.vue
@@ -160,11 +160,8 @@
         "
         inputItemKey="value"
         :inputSaveButtonText="$t('trans.teamManagement.save')"
-        :inputData="
-          DEFAULT_HEADERS.filter(
-            (h) => !filterIgnore.some((fd) => fd.value === h.value)
-          )
-        "
+        :inputData="FILTER_HEADERS"
+        :resetData="FILTER_HEADERS"
         :preselectedData="PRESELECTED_DATA"
         @saving-filter-data="updateFilter"
         @cancel-filter-data="showColumnsDialog = false"
@@ -245,6 +242,11 @@ export default {
         )
         .concat({ text: '', value: 'actions', width: '1rem', sortable: false });
     },
+    FILTER_HEADERS() {
+      return this.DEFAULT_HEADERS.filter(
+        (h) => !this.filterIgnore.some((fd) => fd.value === h.value)
+      );
+    },
     HEADERS() {
       let headers = this.DEFAULT_HEADERS;
       if (this.filterData.length > 0)
@@ -256,9 +258,9 @@ export default {
       return headers;
     },
     PRESELECTED_DATA() {
-      return this.DEFAULT_HEADERS.filter(
-        (h) => !this.filterIgnore.some((fd) => fd.value === h.value)
-      );
+      return this.filterData.length === 0
+        ? this.FILTER_HEADERS
+        : this.filterData;
     },
   },
   data() {