Merge branch 'main' of https://github.com/bcgov/EDUC-SDCI

bcgov · Jul 18, 2023 · 69ab896 · 69ab896
2 parents 8c5300a + bb07dc7
commit 69ab896
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 21 deletions.
diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
@@ -6,23 +6,25 @@ import router from '@/router'
 
 const appStore = useAppStore()
 const { districts } = storeToRefs(appStore)
+console.log(appStore.districtNumberNameOnly)
 
-const selectedDistrict = ref({}) // placeholder
+const selectedDistrict = ref('') // placeholder
 function goToDistrict() {
   //console.log(selectedDistrict.value.districtId)
   router.push({
     name: 'district',
     params: {
-      // districtNumber: String(selectedDistrict.value?.districtNumber),
-      districtId: String(selectedDistrict.value?.districtId)
+      districtNumber: String(selectedDistrict.value?.districtNumber),
+      displayName: String(selectedDistrict.value?.displayName)
+      //districtId: String(selectedDistrict.value?.districtId)
     }
   })
 }
 </script>
 
 <template>
   <div>
-    <!-- {{ districts }} -->
+    {{ selectedDistrict }}
     <!-- <v-autocomplete
       v-model="selectedDistrict"
       label="Select a District"
@@ -47,7 +49,7 @@ function goToDistrict() {
     <v-autocomplete
       v-model="selectedDistrict"
       label="Select a District"
-      :items="districts"
+      :items="appStore.districtNumberNameOnly"
       :item-title="(item) => (item ? item.districtNumber + ' - ' + item.displayName : '')"
       :item-value="(item) => item"
       @update:modelValue="goToDistrict"

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -32,18 +32,10 @@ const router = createRouter({
       component: () =>  import('../views/SchoolView.vue'
       )
     },
-    // {
-    //   path: '/district-:districtNumber', //TODO: Add dist code once we setup axios call to get dist data
-    //   name: 'district',
-    //   alias: '/:districtId:districtNumber',
-    //   component: () =>  import('../views/DistrictView.vue'
-    //   )
-    // },
     {
-      path: '/district/:districtId',
+      path: '/district/:districtNumber-:displayName',
       name: 'district',
       component: ()=> import('../views/DistrictView.vue'),
-      props: true,
     },
     {
       path: '/authority', //TODO: Add auth code once we setup axios call to get dist data

diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
@@ -45,6 +45,12 @@ export const useAppStore = defineStore('app', {
     getDistricts: (state) => {
       return () => state.districts
     },
+    districtNumberNameOnly: (state) => {
+      return state.districts.map((district) => {return {districtNumber: district.districtNumber, displayName: district.displayName}})
+    },
+    getDistrictByDistrictNumber: (state) => {
+      return (distNum: String) => state.districts.find((district) => distNum === district.districtNumber)
+    },
     getSchools: (state) => {
       return () => state.schools
     }

diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import InstituteService from '@/Services/InstituteService'
 import { ref, onBeforeMount } from 'vue'
+import { useAppStore } from '@/stores/app'
+import router from '@/router'
+import { useRoute } from 'vue-router'
 
+const route = useRoute()
+const appStore = useAppStore()
 const district = ref({})
-const props = defineProps({
-  districtId: String
-  // districtNumber: String
-  // displayName: String
-})
+const districtId = appStore.getDistrictByDistrictNumber(
+  String(route.params.districtNumber)
+)?.districtId
 
-console.log(props.districtId)
-InstituteService.getDistrict(String(props.districtId))
+InstituteService.getDistrict(String(districtId))
   .then((response) => {
     district.value = response.data
   })