Merge pull request #926 from bcgov/feature/sdcCollections

EDX-1310 Added more information feature for step 3 of 1701 upload
bcgov · Jul 27, 2023 · 3ace6a9 · 3ace6a9
2 parents e79fa48 + 8b94e66
commit 3ace6a9
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 75 deletions.
diff --git a/frontend/src/components/sdcCollection/SDCCollectionSummary.vue b/frontend/src/components/sdcCollection/SDCCollectionSummary.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container 
+  <v-container
     class="containerSetup"
     fluid
   >
@@ -38,54 +38,54 @@
           :active="isLoading"
         />
       </v-col>
-    </v-row> 
+    </v-row>
     <v-row v-else>
       <div
-      v-if="isCollectionOpen()"
-      class="border"
-    >
-      <v-row>
-        <v-col cols="4">
-          <DoughnutChart :incoming-chart-data="incomingChartData" />
-        </v-col>
-        <v-col cols="8">
-          <h2 class="subjectHeading">
-            Student Level Data (1701)
-          </h2>
-          <p>{{ currentCollectionTypeCode }} 2022 Collection</p>
-        </v-col>
-      </v-row>
-      <v-row justify="space-around">
-        <v-col
-          cols="4"
-          class="steps"
-        >
-          <span>{{ noOfStepsCompleted }} / {{ totalStepsInCollection }} Steps Complete</span> 
-        </v-col>
-        <v-col
-          cols="8"
-          class="navigate"
-        >
-          <a
-            class="ml-1"
-            @click="startCollection()"
-          >Continue</a>
-          <v-icon
-            small
-            color="#1976d2"
+        v-if="isCollectionOpen()"
+        class="border"
+      >
+        <v-row>
+          <v-col cols="4">
+            <DoughnutChart :incoming-chart-data="incomingChartData" />
+          </v-col>
+          <v-col cols="8">
+            <h2 class="subjectHeading">
+              Student Level Data (1701)
+            </h2>
+            <p>{{ currentCollectionTypeCode }} 2022 Collection</p>
+          </v-col>
+        </v-row>
+        <v-row justify="space-around">
+          <v-col
+            cols="4"
+            class="steps"
           >
-            mdi-arrow-right
-          </v-icon>
-        </v-col>
-      </v-row>
-    </div>
-    <div v-else>
-      <p>Currently, there are no open collections.</p>
-    </div>
+            <span>{{ noOfStepsCompleted }} / {{ totalStepsInCollection }} Steps Complete</span>
+          </v-col>
+          <v-col
+            cols="8"
+            class="navigate"
+          >
+            <a
+              class="ml-1"
+              @click="startCollection()"
+            >Continue</a>
+            <v-icon
+              small
+              color="#1976d2"
+            >
+              mdi-arrow-right
+            </v-icon>
+          </v-col>
+        </v-row>
+      </div>
+      <div v-else>
+        <p>Currently, there are no open collections.</p>
+      </div>
     </v-row>
   </v-container>
 </template>
-  
+
 <script>
 import ApiService from '../../common/apiService';
 import {ApiRoutes} from '../../utils/constants';
@@ -160,36 +160,36 @@ export default {
   }
 };
 </script>
-    
-    <style scoped>
+
+<style scoped>
+.containerSetup{
+  padding-right: 10em !important;
+  padding-left: 10em !important;
+}
+
+@media screen and (max-width: 1200px) {
   .containerSetup{
-    padding-right: 10em !important;
-    padding-left: 10em !important;
-  }
-  
-  @media screen and (max-width: 1200px) {
-    .containerSetup{
-      padding-right: 3em !important;
-      padding-left: 3em !important;
-    }
-  } 
-  .border {
-    border: 2px solid grey;
-    border-radius: 5px;
-    padding: 35px;
-    margin-bottom: 2em;
-    margin-top: 2em;
-    width: 70%;
+    padding-right: 3em !important;
+    padding-left: 3em !important;
   }
+}
+.border {
+  border: 2px solid grey;
+  border-radius: 5px;
+  padding: 35px;
+  margin-bottom: 2em;
+  margin-top: 2em;
+  width: 70%;
+}
 
-  .steps {
-    text-align: center;
-  }
+.steps {
+  text-align: center;
+}
 
-  .navigate {
-    text-align: end;
-  }
-    </style>
+.navigate {
+  text-align: end;
+}
+</style>
     
     
   
diff --git a/frontend/src/components/sdcCollection/SDCCollectionView.vue b/frontend/src/components/sdcCollection/SDCCollectionView.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container 
+  <v-container
     class="containerSetup"
     fluid
   >
@@ -54,7 +54,7 @@
           :active="isLoading"
         />
       </v-col>
-    </v-row> 
+    </v-row>
     <v-row v-else>
       <v-col cols="2">
         <StepperComponent
@@ -147,7 +147,7 @@ export default {
     padding-right: 3em !important;
     padding-left: 3em !important;
   }
-} 
-  </style>
+}
+</style>
 
 
diff --git a/frontend/src/components/sdcCollection/StepThreeUploadData.vue b/frontend/src/components/sdcCollection/StepThreeUploadData.vue
@@ -142,6 +142,17 @@
             :loading="isReadingFile"
             :click-action="handleFileImport"
           />
+          <div class="mt-2">
+            More information on the
+            <a
+              :href="getLink"
+              target="_blank"
+              rel="noopener noreferrer"
+              style="color: rgb(56, 89, 138);"
+            >
+              1701 submission requirements.
+            </a>
+          </div>
         </v-col>
       </v-row>
       <v-row>
@@ -270,7 +281,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useSdcCollectionStore, ['currentStepInCollectionProcess']),
+    ...mapState(useSdcCollectionStore, ['currentCollectionTypeCode','currentStepInCollectionProcess']),
     collectionOpenDate() {
       return LocalDate.parse(this.schoolCollectionObject.collectionOpenDate.substring(0,19), DateTimeFormatter.ofPattern('uuuu-MM-dd\'T\'HH:mm:ss'));
     },
@@ -301,7 +312,21 @@ export default {
         return true;
       }
       return this.fileReportDate.isBefore(this.collectionOpenDate.minusDays(30)) || this.fileReportDate.isAfter(this.collectionCloseDate.plusDays(30));
-    }
+    },
+    getLink() {
+      let collectionLink = '';
+      let collectionCodeType = this.currentCollectionTypeCode;
+      if (collectionCodeType === 'September') {
+        collectionLink = 'https://www2.gov.bc.ca/gov/content/education-training/k-12/administration/program-management/data-collections/september';
+      } else if (collectionCodeType === 'February') {
+        collectionLink = 'https://www2.gov.bc.ca/gov/content/education-training/k-12/administration/program-management/data-collections/february';
+      } else if (collectionCodeType === 'May') {
+        collectionLink = 'https://www2.gov.bc.ca/gov/content/education-training/k-12/administration/program-management/data-collections/may';
+      } else if (collectionCodeType === 'July') {
+        collectionLink = 'https://www2.gov.bc.ca/gov/content/education-training/k-12/administration/program-management/data-collections/summer-learning';
+      }
+      return collectionLink;
+    },
   },
   watch: {
     uploadFileValue() {

diff --git a/frontend/src/store/modules/sdcCollection.js b/frontend/src/store/modules/sdcCollection.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import {SDC_STEPS} from '../../utils/institute/SdcSteps';
 import ApiService from '../../common/apiService';
 import { ApiRoutes } from '../../utils/constants';
+import {capitalize} from "lodash";
 
 export const useSdcCollectionStore = defineStore('sdcCollection', {
   id: 'sdcCollection',
@@ -130,6 +131,7 @@ export const useSdcCollectionStore = defineStore('sdcCollection', {
       if(this.schoolCollection == null) {
         const response = await ApiService.apiAxios.get(ApiRoutes.sdc.BASE_URL + '/' + schoolCollectionId);
         this.setSchoolCollection(response.data);
+        this.setCurrentCollectionTypeCode(capitalize(response.data.collectionTypeCode));
         this.setCollectionMetaData(response.data.sdcSchoolCollectionStatusCode);
       }
     },