Merge pull request #1925 from bcgov/fix/EDX-2937

Added export button to Step 2 of Data Collection

Author: arcshiftsolutions

frontend/src/components/sdcCollection/sdcDistrictCollection/StepTwoMonitor.vue

@@ -168,6 +168,15 @@
     justify="end"
     no-gutters
   >
+    <v-btn
+      id="export"
+      color="#003366"
+      text="Export"
+      class="mr-2 mb-1"
+      prepend-icon="mdi-tray-arrow-down"
+      variant="elevated"
+      @click="showExportDialog = true"
+    />
     <v-btn
       id="filters"
       color="#003366"
@@ -261,11 +270,38 @@
   <ConfirmationDialog ref="confirmRemovalOfCollection">
     <template #message />
   </ConfirmationDialog>
+  <v-dialog
+    v-model="showExportDialog"
+    :max-width="443"
+  >
+    <v-card>
+      <v-card-title>
+        Export Student Records
+      </v-card-title>
+      <v-card-actions>
+        <v-btn
+          color="#003366"
+          variant="elevated"
+          style="white-space: pre-wrap;"
+          text="Students Only"
+          @click="downloadStudentReport"
+        />
+        <v-btn
+          color="#003366"
+          variant="elevated"
+          style="white-space: pre-wrap;"
+          text="Students with Errors & Warnings"
+          @click="downloadStudentWithErrorsReport"
+        />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>  
 </template>
 <script>
 import {defineComponent} from 'vue';
 import ApiService from '../../../common/apiService';
 import {ApiRoutes} from '../../../utils/constants';
+import {downloadStudentOnlyReportURL,downloadStudentErrorsReportURL} from '../../../utils/common';
 import {setFailureAlert, setSuccessAlert} from '../../composable/alertComposable';
 import PrimaryButton from '../../util/PrimaryButton.vue';
 import Filters from '../../common/Filters.vue';
@@ -298,6 +334,7 @@ export default defineComponent({
   data() {
     return {
       allowedFilters: MONITORING.allowedFilters,
+      showExportDialog: false,
       filters: {},
       sortBy: [{ key: 'schoolTitle', order:'asc'}],
       headers: [
@@ -386,6 +423,16 @@ export default defineComponent({
 
   },
   methods: {
+    downloadStudentReport(){
+      const routeData = this.$router.resolve({path: downloadStudentOnlyReportURL()});
+      window.open(routeData.href, '_blank');
+      this.showExportDialog = false;
+    },
+    downloadStudentWithErrorsReport(){
+      const routeData = this.$router.resolve({path: downloadStudentErrorsReportURL()});
+      window.open(routeData.href, '_blank');
+      this.showExportDialog = false;
+    },
     canMoveForward(){
       return this.isStepComplete || this.hasEditPermission;
     },

frontend/src/components/sdcCollection/sdcDistrictCollection/stepThreeVerifyData/DetailComponent.vue

@@ -127,6 +127,7 @@
 <script>
 import alertMixin from '../../../../mixins/alertMixin';
 import CustomTable from '../../../common/CustomTable.vue';
+import {downloadStudentOnlyReportURL,downloadStudentErrorsReportURL} from '../../../utils/common';
 import ApiService from '../../../../common/apiService';
 import {ApiRoutes} from '../../../../utils/constants';
 import {cloneDeep, isEmpty, omitBy} from 'lodash';
@@ -213,21 +214,15 @@ export default {
       this.reloadStudentsFlag = false;
     },
     downloadStudentReport(){
-      const routeData = this.$router.resolve({path: this.downloadStudentOnlyReportURL()});
+      const routeData = this.$router.resolve({path: downloadStudentOnlyReportURL()});
       window.open(routeData.href, '_blank');
       this.showExportDialog = false;
     },
     downloadStudentWithErrorsReport(){
-      const routeData = this.$router.resolve({path: this.downloadStudentErrorsReportURL()});
+      const routeData = this.$router.resolve({path: downloadStudentErrorsReportURL()});
       window.open(routeData.href, '_blank');
       this.showExportDialog = false;
     },
-    downloadStudentOnlyReportURL() {
-      return `${ApiRoutes.sdc.SDC_DISTRICT_COLLECTION}/${this.$route.params.sdcDistrictCollectionID}/report/csv_dis/download`;
-    },
-    downloadStudentErrorsReportURL() {
-      return `${ApiRoutes.sdc.SDC_DISTRICT_COLLECTION}/${this.$route.params.sdcDistrictCollectionID}/report/csv_dis_errors_warns/download`;
-    },
     editStudent($event) {
       const selectedStudent = cloneDeep($event);
       this.studentForEdit.splice(0);

frontend/src/utils/common.js

@@ -72,6 +72,13 @@ export function getDemogValidationResults(student, sdcSchoolCollectionID) {
       });
   });
 }
+export function downloadStudentOnlyReportURL() {
+  return `${ApiRoutes.sdc.SDC_DISTRICT_COLLECTION}/${this.$route.params.sdcDistrictCollectionID}/report/csv_dis/download`;
+}
+
+export function  downloadStudentErrorsReportURL() {
+  return `${ApiRoutes.sdc.SDC_DISTRICT_COLLECTION}/${this.$route.params.sdcDistrictCollectionID}/report/csv_dis_errors_warns/download`;
+}
 
 export function     getCollectionLink(currentCollectionTypeCode) {
   let collectionLink = '';