FORMS-844: Add ability to subset submissions for export

app/frontend/src/components/forms/ExportSubmissions.vue

@@ -62,7 +62,7 @@
             </v-radio-group>
           </v-col>
         </v-row>
-        <v-row v-if="exportFormat === 'csv'" class="mt-5">
+        <v-row v-if="exportFormat === 'csv' && !selectedVersion" class="mt-5">
           <v-col>
             <span class="subTitleObjectStyle" :lang="lang">
               {{ $t('trans.exportSubmissions.formVersion') }}
@@ -408,6 +408,8 @@ export default {
       'submissionList',
       'isRTL',
       'lang',
+      'selectedSubmissions',
+      'selectedVersion',
     ]),
 
     ...mapGetters('auth', ['email']),
@@ -426,7 +428,12 @@ export default {
   },
   methods: {
     ...mapActions('notifications', ['addNotification']),
-    ...mapActions('form', ['fetchForm', 'fetchFormCSVExportFields']),
+    ...mapActions('form', [
+      'fetchForm',
+      'fetchFormCSVExportFields',
+      'selectSubmissions',
+      'selectVersion',
+    ]),
     async changeVersions(value) {
       this.versionRequired = false;
       value !== ''
@@ -503,7 +510,8 @@ export default {
             // drafts: true
           },
           fieldToExport,
-          emailExport
+          emailExport,
+          this.selectedSubmissions
         );
 
         if (response && response.data && !emailExport) {
@@ -531,6 +539,9 @@ export default {
             `${this.form.id}: ${error}`,
         });
       }
+      // empty selected submissions for export if there are so
+      this.selectSubmissions('');
+      this.selectVersion(null);
     },
 
     async updateVersions() {
@@ -553,7 +564,11 @@ export default {
         this.versions.push(
           ...this.form.versions.map((version) => version.version)
         );
-        this.versionSelected = this.versions[0];
+        if (this.selectedVersion) {
+          this.versionSelected = this.selectedVersion;
+        } else {
+          this.versionSelected = this.versions[0];
+        }
         await this.refreshFormFields(this.versionSelected);
       }
     },

app/frontend/src/components/forms/SubmissionsTable.vue

@@ -101,6 +101,17 @@
           </template>
         </v-checkbox>
       </div>
+      <div>
+        <span class="subTitleObjectStyle" :lang="lang">
+          {{ $t('trans.exportSubmissions.formVersion') }}
+        </span>
+        <v-select
+          v-model="versionSelected"
+          :items="versions"
+          @change="changeVersions"
+          class="mt-0"
+        ></v-select>
+      </div>
       <div>
         <!-- search input -->
         <div class="submissions-search">
@@ -387,12 +398,24 @@ export default {
       deleteItem: {},
       switchSubmissionView: false,
       firstDataLoad: true,
+      versionSelected: null,
     };
   },
   computed: {
     multiDeleteMessage() {
       return this.$t('trans.submissionsTable.multiDelWarning');
     },
+    versions() {
+      const formVersions = [
+        { text: this.$t('trans.exportSubmissions.all'), value: null },
+      ];
+      if (this.form?.versions) {
+        this.form.versions.map((v) => {
+          formVersions.push(v.version);
+        });
+      }
+      return formVersions;
+    },
     singleDeleteMessage() {
       return this.$t('trans.submissionsTable.singleDelWarning');
     },
@@ -412,7 +435,6 @@ export default {
       'submissionList',
       'userFormPreferences',
       'roles',
-      'deletedSubmissions',
       'isRTL',
       'lang',
       'totalSubmissions',
@@ -622,6 +644,16 @@ export default {
       }
     },
   },
+  watch: {
+    selectedSubmissions(newValue) {
+      if (newValue && newValue.length > 0 && this.versionSelected) {
+        this.selectSubmissions(
+          newValue.map((val) => val.submissionId).join(',')
+        );
+        this.selectVersion(this.versionSelected);
+      }
+    },
+  },
   methods: {
     ...mapActions('form', [
       'fetchForm',
@@ -635,6 +667,8 @@ export default {
       'restoreMultiSubmissions',
       'deleteSubmission',
       'updateFormPreferencesForCurrentUser',
+      'selectSubmissions',
+      'selectVersion',
     ]),
     ...mapActions('notifications', ['addNotification']),
 
@@ -734,6 +768,7 @@ export default {
               : moment().add(50, 'years').utc().format('YYYY-MM-DD hh:mm:ss'), //Get User filter Criteria (Max Date)
         }),
         deletedOnly: this.deletedOnly,
+        version: this.versionSelected,
         createdBy: this.currentUserOnly
           ? `${this.user.username}@${this.user.idp}`
           : '',
@@ -805,6 +840,8 @@ export default {
         })
         .finally(() => {
           this.selectedSubmissions = [];
+          this.selectSubmissions('');
+          this.selectVersion(null);
         });
     },
 
@@ -854,6 +891,9 @@ export default {
         this.debounceInput();
       }
     },
+    async changeVersions() {
+      this.refreshSubmissions();
+    },
   },
   async mounted() {
     this.debounceInput = _.debounce(async () => {

app/frontend/src/services/formService.js

@@ -428,6 +428,7 @@ export default {
     preference,
     fields,
     emailExport = false,
+    selectedSubmissions,
     options = {}
   ) {
     return appAxios().post(
@@ -440,6 +441,7 @@ export default {
         preference: preference,
         fields: fields,
         emailExport,
+        selectedSubmissions,
         ...options,
       },
       {

app/frontend/src/store/modules/form.js

@@ -102,6 +102,8 @@ export default {
     isRTL: false,
     subscriptionData: genInitialSubscribeDetails(),
     totalSubmissions: 0,
+    selectedSubmissions: '',
+    selectedVersion: null,
   },
   getters: {
     getField, // vuex-map-fields
@@ -127,6 +129,8 @@ export default {
     isRTL: (state) => state.isRTL,
     subscriptionData: (state) => state.subscriptionData,
     totalSubmissions: (state) => state.totalSubmissions,
+    selectedSubmissions: (state) => state.selectedSubmissions,
+    selectedVersion: (state) => state.selectedVersion,
   },
   mutations: {
     updateField, // vuex-map-fields
@@ -203,6 +207,12 @@ export default {
     SET_TOTALSUBMISSIONS(state, totalSubmissions) {
       state.totalSubmissions = totalSubmissions;
     },
+    SET_SELECTED_SUBMISSIONS(state, selectedSubmissions) {
+      state.selectedSubmissions = selectedSubmissions;
+    },
+    SET_SELECTED_VERSION(state, selectedVersion) {
+      state.selectedVersion = selectedVersion;
+    },
   },
   actions: {
     //
@@ -786,6 +796,7 @@ export default {
         sortDesc: sortDesc,
         search: search,
         searchEnabled: searchEnabled,
+        version,
       }
     ) {
       try {
@@ -811,6 +822,7 @@ export default {
               filterformSubmissionStatusCode: filterformSubmissionStatusCode,
               itemsPerPage: itemsPerPage,
               totalSubmissions: state.totalSubmissions,
+              version,
               sortBy: sortBy,
               sortDesc: sortDesc,
             });
@@ -1080,5 +1092,11 @@ export default {
         );
       }
     },
+    selectSubmissions({ commit }, selected) {
+      commit('SET_SELECTED_SUBMISSIONS', selected);
+    },
+    selectVersion({ commit }, selected) {
+      commit('SET_SELECTED_VERSION', selected);
+    },
   },
 };

app/src/forms/common/models/views/submissionData.js

@@ -7,9 +7,10 @@ class SubmissionData extends Model {
 
   static get modifiers() {
     return {
-      filterVersion(query, value) {
-        if (value) {
-          query.where('version', value);
+      filterVersion(query, version, selectedSubmissions) {
+        // DO NOT need to filter by version if we filter by particular selected ids
+        if (version && (!selectedSubmissions || selectedSubmissions === '')) {
+          query.where('version', version);
         }
       },
       filterCreatedAt(query, minDate, maxDate) {
@@ -45,6 +46,11 @@ class SubmissionData extends Model {
           query.where('draft', false);
         }
       },
+      filterSubmissionIds(query, value) {
+        if (value && value !== '') {
+          query.whereIn('submissionId', value.split(','));
+        }
+      },
       orderDefault(builder) {
         builder.orderBy('createdAt', 'DESC');
       },

app/src/forms/form/exportService.js

@@ -259,12 +259,13 @@ const service = {
     return SubmissionData.query()
       .select(service._submissionsColumns(form, params))
       .where('formId', form.id)
-      .modify('filterVersion', version)
+      .modify('filterVersion', version, params.selectedSubmissions)
       .modify('filterCreatedAt', preference && preference.minDate, preference && preference.maxDate)
       .modify('filterUpdatedAt', preference && preference.updatedMinDate, preference && preference.updatedMaxDate)
       .modify('filterStatus', params.status)
       .modify('filterDeleted', params.deleted)
       .modify('filterDrafts', params.drafts)
+      .modify('filterSubmissionIds', params.selectedSubmissions)
       .modify('orderDefault')
       .then((submissionData) => {
         if (submissionData == undefined || submissionData == null || submissionData.length == 0) return [];

app/tests/unit/forms/form/exportService.spec.js

@@ -575,7 +575,7 @@ describe('_getSubmissions', () => {
     }
     exportService._getSubmissions(form, params, params.version);
     expect(MockModel.query).toHaveBeenCalledTimes(1);
-    expect(MockModel.modify).toHaveBeenCalledTimes(7);
+    expect(MockModel.modify).toHaveBeenCalledTimes(8);
     expect(MockModel.modify).toHaveBeenCalledWith('filterUpdatedAt', preference && preference.updatedMinDate, preference && preference.updatedMaxDate);
   });
 
@@ -591,7 +591,7 @@ describe('_getSubmissions', () => {
     exportService._submissionsColumns = jest.fn().mockReturnThis();
     exportService._getSubmissions(form, params, params.version);
     expect(MockModel.query).toHaveBeenCalledTimes(1);
-    expect(MockModel.modify).toHaveBeenCalledTimes(7);
+    expect(MockModel.modify).toHaveBeenCalledTimes(8);
   });
 
   it('Should pass this test with preference passed to _getSubmissions', async () => {
@@ -617,7 +617,7 @@ describe('_getSubmissions', () => {
     }
     exportService._getSubmissions(form, params, params.version);
     expect(MockModel.query).toHaveBeenCalledTimes(1);
-    expect(MockModel.modify).toHaveBeenCalledTimes(7);
+    expect(MockModel.modify).toHaveBeenCalledTimes(8);
     expect(MockModel.modify).toHaveBeenCalledWith('filterUpdatedAt', preference && preference.updatedMinDate, preference && preference.updatedMaxDate);
   });
 });