From 7c0fb16a0baac55120c0e1510e639b6b3a48f13c Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 7 Dec 2023 16:08:29 -0800
Subject: [PATCH 01/24] Sync changes from samara-mobile

---
 frontend/src/assets/main.css                |  49 ++++---
 frontend/src/components/AuthoritySelect.vue |   9 +-
 frontend/src/components/DistrictSelect.vue  |   2 +-
 frontend/src/components/Footer.vue          |  94 ++-----------
 frontend/src/components/Header.vue          |   4 +-
 frontend/src/components/OffshoreSelect.vue  |  24 ++--
 frontend/src/components/SchoolSelect.vue    |  32 ++---
 frontend/src/stores/app.ts                  |   2 +-
 frontend/src/views/AuthorityView.vue        |  96 +++++++-------
 frontend/src/views/ContactsView.vue         |  56 ++++----
 frontend/src/views/DistrictView.vue         | 103 +++++++--------
 frontend/src/views/HomeView.vue             |  21 ++-
 frontend/src/views/SchoolSearchView.vue     |  26 +---
 frontend/src/views/SchoolView.vue           | 138 ++++++++++----------
 14 files changed, 281 insertions(+), 375 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 99347e45..8015af61 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,27 +1,37 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0rem;
   font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-weight: normal;
 }
 
+#main {
+  max-width: 1280px;
+  padding: 0rem;
+}
+
 a {
   color: #2a6496;
 }
 
+div.v-application__wrap {
+  min-height: 100vh; /* override dvh property */
+}
+
+.full-width {
+  margin-left: calc(-1*(100vw - 1024px)/2);
+  margin-right: calc(-1*(100vw - 1024px)/2);
+}
+
 @media (max-width: 768px) {
   #app {
-    min-width: 1130px; /* Adjust as needed */
+    /* min-width: 600px; */
     padding: 0; /* Adjust as needed */
   }
 
   .full-width {
-    margin: 0 calc(-1*(100vw - 768px)/2);
-    padding: 0 calc((100vw - 768px)/2);
-    background-color: red;
+    margin-left: calc(-1*(100vw - 400px)/2);
+    margin-right: calc(-1*(100vw - 400px)/2);
   }
 }
 .school-search{
@@ -43,10 +53,12 @@ button.link-btn, .link-btn .v-btn__content {
 }
 
 .territorial-acknowledgement {
-  background-color: #494949;
-  color: #fff;
-  border-bottom: 3px solid #FCBA19;
-  border-top: 3px solid #FCBA19;
+  background-color: #292929;
+  color: #faf9f8;
+  font-size: 14px;
+  line-height: 21px;
+  border-bottom: 4px solid #FCBA19;
+  border-top: 4px solid #FCBA19;
 }
 
 .v-toolbar__extension {
@@ -76,11 +88,14 @@ button.link-btn, .link-btn .v-btn__content {
 
   #app {
     display: grid;
-    padding: 0;
+    padding: 0!important;
+    margin: 0 auto;
   }
 
-  .full-width {
-    margin: 0 calc(-1*(100vw - 1024px)/2);
-    padding: 0 calc((100vw - 1024px)/2);
-  }
-}
+  /* .full-width {
+    position: relative;
+    width: 100vw;
+    left: calc(-1*(100vw - 1280px)/2);
+    padding: 0!important;
+  } */
+}
\ No newline at end of file
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
index 747f11dd..4dd969ca 100644
--- a/frontend/src/components/AuthoritySelect.vue
+++ b/frontend/src/components/AuthoritySelect.vue
@@ -19,17 +19,10 @@ function goToAuthority() {
     }
   })
 }
-
-function downloadAuthorityMailing() {
-  alert('TODO - Implement authority mailing download')
-}
-function downloadAuthorityContacts() {
-  alert('TODO - Implement authority contacts download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">Independent Authorities</h2>
     <v-row no-gutters>
       <v-col class="ma-1">
diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
index 9a7351c9..7558e23c 100644
--- a/frontend/src/components/DistrictSelect.vue
+++ b/frontend/src/components/DistrictSelect.vue
@@ -30,7 +30,7 @@ function downloadDistrictsMailing() {
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">School Districts</h2>
     <v-row no-gutters justify="space-between">
       <v-col class="ma-1">
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index e37a46ac..d759e46a 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,105 +1,27 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-footer class="full-width">
-    <v-col no-gutters justify="space-between"
-      ><v-row class="territorial-acknowledgement"
-        ><v-spacer /><v-col cols="6"
+  <v-footer class="full-width pa-0">
+    <v-col no-gutters justify="space-between">
+      <v-row class="territorial-acknowledgement px-3 py-5">
+        <v-spacer />
+        <v-col cols="12" style="max-width: 1280px"
           >The B.C. Public Service acknowledges the territories of First Nations around B.C. and is
           grateful to carry out our work on these lands. We acknowledge the rights, interests,
           priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit -
           respecting and acknowledging their distinct cultures, histories, rights, laws, and
-          governments.</v-col
-        ><v-spacer /></v-row
-      ><v-row>
-        <v-spacer />
-        <!-- <v-col cols="4"
-          ><a href="https://www2.gov.bc.ca/">
-            <img
-              alt="B.C. Government Logo"
-              class="logo"
-              src="@/assets/images/bc-gov-logo.svg"
-              width="125"
-              height="125"
-            /> </a
-        ></v-col>
-        <v-col cols="4" justify="space-between">
-          MORE INFO
-          <v-row>TEST</v-row>
-          <v-row>
-            <v-col>
-              <v-row> MORE INFO </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca">Home</a>
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=E08E79740F9C41B9B0C484685CC5E412"
-                  >Accessibility</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=79F93E018712422FBC8E674A67A70535"
-                  >Disclaimer</a
-                >
-              </v-row>
-            </v-col>
-            <v-col>
-              <v-row></v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=9E890E16955E4FF4BF3B0E07B4722932"
-                  >Privacy</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=1AAACC9C65754E4D89A118B875E0FBDA"
-                  >Copyright</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=6A77C17D0CCB48F897F8598CCC019111"
-                  >Contact Us</a
-                >
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-col> -->
-        <!-- <v-spacer /> -->
-        <v-spacer />
-        <v-col class="text-center mt-4" cols="12">
-          &copy; 2023 Government of British Columbia
+          governments.
         </v-col>
         <v-spacer />
       </v-row>
-    </v-col>
-
-    <!-- <v-col>
-      <v-row class="territorial-acknowledgement">
+      <v-row>
         <v-spacer />
-        <v-col class="text-center" cols="6"
-          ><p>
-            The B.C. Public Service acknowledges the territories of First Nations around B.C. and is
-            grateful to carry out our work on these lands. We acknowledge the rights, interests,
-            priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit -
-            respecting and acknowledging their distinct cultures, histories, rights, laws, and
-            governments.
-          </p></v-col
-        >
         <v-spacer />
-      </v-row>
-      <v-row>
-        <v-col cols="12"
-          ><v-row>MORE INFO</v-row
-          ><v-row>
-            <p>Home</p>
-            <p>Privacy</p>
-          </v-row></v-col
-        >
-        <hr />
         <v-col class="text-center mt-4" cols="12">
           &copy; 2023 Government of British Columbia
         </v-col>
         <v-spacer />
       </v-row>
-    </v-col> -->
+    </v-col>
   </v-footer>
 </template>
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index accc699e..ad1b3667 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -11,8 +11,8 @@
         height="125"
       />
     </a>
-    <v-divider class="mx-3" inset vertical />
-    <h1>BC School & District Contact Information</h1>
+    <v-divider class="mx-3 d-none d-md-inline-flex" inset vertical />
+    <h1 class="d-none d-md-block">BC School & District Contact Information</h1>
   </v-app-bar>
 </template>
 
diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
index 9dcfb04b..6e949134 100644
--- a/frontend/src/components/OffshoreSelect.vue
+++ b/frontend/src/components/OffshoreSelect.vue
@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAppStore } from '@/stores/app'
+//import { ref } from 'vue'
+//import { useAppStore } from '@/stores/app'
 import router from '@/router'
-import { useSanitizeURL } from '@/composables/string'
+//import { useSanitizeURL } from '@/composables/string'
 
 // Type Imports
-import type { ListSchool } from '@/types/types'
-import type { Ref } from 'vue'
+//import type { ListSchool } from '@/types/types'
+//import type { Ref } from 'vue'
 
-const appStore = useAppStore()
-const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
+//const appStore = useAppStore()
+//const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
 
 function viewOffshoreSchools() {
   router.push({
     name: 'offshore'
   })
 }
-
-function downloadOffshoreSchoolInfo() {
-  alert('TODO - Implement offshore school info extract download')
-}
-
-function downloadOffshoreSchoolReps() {
-  alert('TODO - Implement offshore school representative extract download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">BC Offshore Schools</h2>
     <v-row no-gutters>
       <v-col class="ma-1">
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index 234a29c3..7aff8b86 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -33,16 +33,18 @@ function goToSchoolSearch() {
 </script>
 
 <template>
-  <v-container fluid class="pt-0">
-    <v-sheet elevation="2" class="py-6 full-width">
+  <v-sheet elevation="2" class="py-6 full-width">
+    <v-container class="main">
       <v-row no-gutters justify="space-between">
-        <img
-          src="@/assets/images/BCMapGraphic.png"
-          alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 50px; left: -80px"
-        />
-        <v-spacer />
-        <v-col lg="6" md="8" class="ml-0 py-6 school-search">
+        <v-col>
+          <img
+            src="@/assets/images/BCMapGraphic.png"
+            alt="Map of British Columbia"
+            style="height: 268px; position: absolute; top: 50px; left: -80px"
+            class="d-none d-md-block"
+          />
+        </v-col>
+        <v-col cols="10" md="8" xl="6" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
           <v-row>
             <v-autocomplete
@@ -64,10 +66,10 @@ function goToSchoolSearch() {
               class="mx-3"
             />
           </v-row>
-
           <v-row>
-            <v-col class="px-0 my-1">
+            <v-col class="px-0 py-4 py-md-0 my-md-1">
               <v-btn
+                block
                 color="bcGovBlue"
                 class="text-none text-subtitle-1"
                 variant="outlined"
@@ -76,14 +78,14 @@ function goToSchoolSearch() {
                 Schools</v-btn
               >
             </v-col>
-            <v-spacer />
-            <v-col>
+            <v-spacer class="d-none d-md-block" />
+            <v-col class="px-0 py-4 py-md-0 my-md-1">
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
           </v-row>
         </v-col>
         <v-spacer />
       </v-row>
-    </v-sheet>
-  </v-container>
+    </v-container>
+  </v-sheet>
 </template>
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 23f02a98..8b37052d 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -105,7 +105,7 @@ export const useAppStore = defineStore('app', {
     },
     async setCodes() {
       await InstituteService.loadCache().then((response) => {
-          console.log(response)
+        //console.log(response)
       }).catch((error) => {
         console.error("ERRPR LOADING CACHE" + error)
       })
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 3910b4ee..148ad3a8 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -212,54 +212,56 @@ onMounted(async () => {
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-col>
-          <h1 class="mt-3 mb-2">
-            {{ authority.value.authorityData?.authorityNumber }} -
-            {{ authority.value.authorityData?.displayName }}
-          </h1>
-          <v-row v-if="authority.value.authorityData">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
-              </p>
-              <p>
-                <strong>Email: </strong>
-                <a :href="'mailto:' + authority.value.authorityData?.email">{{
-                  authority.value.authorityData?.email
-                }}</a>
-              </p>
-            </v-col>
-            <v-col
-              v-for="item in authority.value.authorityData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthorityContacts()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Contacts (CSV)</v-btn
-              >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthoritySchools()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Schools (CSV)</v-btn
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-col>
+            <h1 class="mt-3 mb-2">
+              {{ authority.value.authorityData?.authorityNumber }} -
+              {{ authority.value.authorityData?.displayName }}
+            </h1>
+            <v-row v-if="authority.value.authorityData">
+              <v-col>
+                <p>
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
+                </p>
+                <p>
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
+                </p>
+                <p>
+                  <strong>Email: </strong>
+                  <a :href="'mailto:' + authority.value.authorityData?.email">{{
+                    authority.value.authorityData?.email
+                  }}</a>
+                </p>
+              </v-col>
+              <v-col
+                v-for="item in authority.value.authorityData.addresses"
+                :key="item.addressTypeCode"
               >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+              <v-col>
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthorityContacts()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthoritySchools()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Authority Info Header Block -->
     <v-sheet class="pa-6">
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index b9eaaad9..803c5281 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -108,33 +108,35 @@ onMounted(() => {
       :items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-spacer />
-        <v-col cols="12">
-          <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedContactType"
-              label="Select a Contact by Type"
-              :items="appStore.getDistrictContactTypeCodes"
-              item-title="label"
-              item-value="districtContactTypeCode"
-            ></v-autocomplete>
-            <v-btn
-              @click="searchContact"
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              class="text-none text-subtle-1 ml-3"
-            />
-          </v-row>
-          <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
-            >Reset</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-spacer />
+          <v-col cols="12">
+            <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
+            <v-row>
+              <v-autocomplete
+                v-model="selectedContactType"
+                label="Select a Contact by Type"
+                :items="appStore.getDistrictContactTypeCodes"
+                item-title="label"
+                item-value="districtContactTypeCode"
+              ></v-autocomplete>
+              <v-btn
+                @click="searchContact"
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                class="text-none text-subtle-1 ml-3"
+              />
+            </v-row>
+            <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
+              >Reset</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Contacts by Type header-->
     <v-container>
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 09261118..f8d08391 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -175,7 +175,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <v-spacer />
     <v-breadcrumbs
       class="breadcrumbs"
       bg-color="white"
@@ -187,58 +186,60 @@ onMounted(async () => {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-col v-if="district.value.districtData">
-          <v-row no-gutters>
-            <h1 class="mt-3 mb-2">
-              {{ district.value.districtData?.districtNumber }} -
-              {{ district.value.districtData?.displayName }}
-            </h1>
-          </v-row>
-          <v-row no-gutters justify="space-between">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
-              </p>
-              <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
-              <p>
-                <a :href="district.value.districtData?.website">{{
-                  district.value.districtData?.website
-                }}</a>
-              </p>
-            </v-col>
-
-            <v-col
-              v-for="item in district.value.districtData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
+      <v-container id="main">
+        <v-row no-gutters justify="space-between">
+          <v-col v-if="district.value.districtData">
+            <v-row no-gutters>
+              <h1 class="mt-3 mb-2">
+                {{ district.value.districtData?.districtNumber }} -
+                {{ district.value.districtData?.displayName }}
+              </h1>
+            </v-row>
+            <v-row no-gutters justify="space-between">
+              <v-col>
+                <p>
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
+                </p>
+                <p>
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
+                </p>
+                <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
+                <p>
+                  <a :href="district.value.districtData?.website">{{
+                    district.value.districtData?.website
+                  }}</a>
+                </p>
+              </v-col>
 
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictContacts"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Contacts (CSV)</v-btn
+              <v-col
+                v-for="item in district.value.districtData.addresses"
+                :key="item.addressTypeCode"
               >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictSchools"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Schools (CSV)</v-btn
-              >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+
+              <v-col>
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictContacts"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictSchools"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END DISTRICT HEADER INFO -->
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index e9b5cd31..77769223 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -6,29 +6,26 @@ import SchoolSelect from '../components/SchoolSelect.vue'
 </script>
 
 <template>
-  <div>
-    <!-- <v-breadcrumbs
-      bg-color="primary"
-      class="breadcrumbs"
-      :items="[{ title: 'Home', href: '/' }]"
-    ></v-breadcrumbs> -->
+  <v-container fluid class="pa-0">
     <v-col no-gutters>
       <v-row>
-        <SchoolSelect />
+        <v-col class="pa-0">
+          <SchoolSelect />
+        </v-col>
       </v-row>
-      <v-row no-gutters>
-        <v-col class="d-flex align-stretch ma-2">
+      <v-row justify="center" class="pa-2 pa-md-0">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <DistrictSelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <AuthoritySelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <OffshoreSelect />
         </v-col>
       </v-row>
     </v-col>
-  </div>
+  </v-container>
 </template>
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index c7c24c94..f06cf585 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -42,17 +42,7 @@ const handleUpdate = async (options: any) => {
 const fetchTypes = async () => {
   try {
     const response = await InstituteService.getFacilityCodes()
-    const valuesToRemove = [
-      'PROVINCIAL',
-      'DIST_CONT',
-      'ELEC_DELIV',
-      'POST_SEC',
-      'JUSTB4PRO',
-      'SUMMER'
-    ] // Add the values you want to remove
-    types.value = response.data.filter(
-      (item: any) => !valuesToRemove.includes(item.facilityTypeCode)
-    )
+    types.value = response.data
   } catch (error) {
     console.error('Error fetching types:', error)
   }
@@ -151,20 +141,6 @@ const searchSchools = async () => {
     valueType: 'STRING',
     condition: 'AND'
   })
-  params[0].searchCriteriaList.push({
-    key: 'schoolCategoryCode',
-    operation: 'nin',
-    value: 'FED_BAND, POST_SEC,YUKON',
-    valueType: 'STRING',
-    condition: 'AND'
-  })
-  params[0].searchCriteriaList.push({
-    key: 'facilityTypeCode',
-    operation: 'nin',
-    value: 'SUMMER,PROVINCIAL,DIST_CONT, ELEC_DELIV,POST_SEC,JUSTB4PRO,SUMMER',
-    valueType: 'STRING',
-    condition: 'AND'
-  })
 
   const jsonString = JSON.stringify(params)
   const encodedParams = encodeURIComponent(jsonString)
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index ce05d422..5a69e632 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -203,74 +203,78 @@ function goToDistrict() {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-row v-if="schoolData.value" no-gutters justify="space-between">
-          <v-col>
-            <v-row no-gutters>
-              <h1 class="mt-3 mb-2">
-                {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
-              </h1>
-            </v-row>
-            <v-row no-gutters class="mt-0 mb-1">
-              <a
-                v-if="schoolData.value.schoolCategoryCode == 'PUBLIC'"
-                id="district-link"
-                :href="`/district/${useSanitizeURL(
-                  String(districtInfo.value?.districtNumber)
-                )}-${useSanitizeURL(String(districtInfo.value?.displayName))}`"
-              >
-                District {{ districtInfo.value.districtNumber }} -
-                {{ districtInfo.value.displayName }}
-              </a>
-              <a
-                id="authority-link"
-                :href="`/authority/${authorityInfo.value.authorityNumber}-${authorityInfo.value.displayName}`"
-                v-if="schoolData.value?.independentAuthorityId && authorityInfo.value"
-                class="ml-1"
-              >
-                Independent Authority {{ authorityInfo.value.authorityNumber }} -
-                {{ authorityInfo.value.displayName }}
-              </a>
-            </v-row>
-            <v-row no-gutters class="mt-1 mb-4">
-              <v-chip
-                v-for="grade in filteredGradesLabels"
-                :key="grade"
-                class="mr-1"
-                size="small"
-                color="primary"
-                label
-                >{{ grade }}</v-chip
-              >
-            </v-row>
-            <v-row no-gutters>
-              <v-col class="pl-0">
-                <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
-                <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
-                <p>
-                  <strong>Email: </strong>
-                  <a :href="'mailto:' + schoolData.value?.email">
-                    {{ schoolData.value.email }}
-                  </a>
-                </p>
-              </v-col>
-              <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
-                <DisplayAddress v-bind="item" />
-              </v-col>
-              <v-col
-                ><v-btn
-                  variant="text"
-                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                  @click="downloadCSV"
-                  :disabled="!schoolData.value"
-                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                  School Info (CSV)</v-btn
-                ></v-col
-              >
-            </v-row>
-          </v-col>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-row v-if="schoolData.value" no-gutters justify="space-between">
+            <v-col>
+              <v-row no-gutters>
+                <h1 class="mt-3 mb-2">
+                  {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
+                </h1>
+              </v-row>
+              <v-row no-gutters class="mt-0 mb-1">
+                <a
+                  v-if="schoolData.value.schoolCategoryCode == 'PUBLIC'"
+                  id="district-link"
+                  :href="`/district/${useSanitizeURL(
+                    String(districtInfo.value?.districtNumber)
+                  )}-${useSanitizeURL(String(districtInfo.value?.displayName))}`"
+                >
+                  District {{ districtInfo.value.districtNumber }} -
+                  {{ districtInfo.value.displayName }}
+                </a>
+                <a
+                  id="authority-link"
+                  :href="`/authority/${authorityInfo.value.authorityNumber}-${authorityInfo.value.displayName}`"
+                  v-if="schoolData.value?.independentAuthorityId && authorityInfo.value"
+                  class="ml-1"
+                >
+                  Independent Authority {{ authorityInfo.value.authorityNumber }} -
+                  {{ authorityInfo.value.displayName }}
+                </a>
+              </v-row>
+              <v-row no-gutters class="mt-1 mb-4">
+                <v-chip
+                  v-for="grade in filteredGradesLabels"
+                  :key="grade"
+                  class="mr-1"
+                  size="small"
+                  color="primary"
+                  label
+                  >{{ grade }}</v-chip
+                >
+              </v-row>
+              <v-row no-gutters>
+                <v-col class="pl-0">
+                  <p>
+                    <strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}
+                  </p>
+                  <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
+                  <p>
+                    <strong>Email: </strong>
+                    <a :href="'mailto:' + schoolData.value?.email">
+                      {{ schoolData.value.email }}
+                    </a>
+                  </p>
+                </v-col>
+                <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
+                  <DisplayAddress v-bind="item" />
+                </v-col>
+                <v-col
+                  ><v-btn
+                    variant="text"
+                    class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                    @click="downloadCSV"
+                    :disabled="!schoolData.value"
+                    ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                    School Info (CSV)</v-btn
+                  ></v-col
+                >
+              </v-row>
+            </v-col>
+          </v-row>
         </v-row>
-      </v-row>
+      </v-container>
     </v-sheet>
 
     <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">

From 47c60e61ef2385a983f72fbd4353b482a5331c81 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 7 Dec 2023 16:10:48 -0800
Subject: [PATCH 02/24] fix

---
 frontend/src/views/AuthorityView.vue | 2 +-
 frontend/src/views/SchoolView.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 148ad3a8..e5f0ea95 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -212,7 +212,7 @@ onMounted(async () => {
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-container class="main">
+      <v-container id="main">
         <v-row no-gutters justify="space-between">
           <v-col>
             <h1 class="mt-3 mb-2">
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index 5a69e632..93d8afe9 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -203,7 +203,7 @@ function goToDistrict() {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-container class="main">
+      <v-container id="main">
         <v-row no-gutters justify="space-between">
           <v-row v-if="schoolData.value" no-gutters justify="space-between">
             <v-col>

From 32bdffa02a9215f94b7ecc08cd06a024efa6fa87 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 08:26:56 -0700
Subject: [PATCH 03/24] authority style and breadcrumbs

---
 backend/src/components/utils.js               | 757 ++++++++++--------
 frontend/src/assets/main.css                  |  32 +-
 frontend/src/components/SchoolSelect.vue      |   5 +-
 .../src/components/common/DisplayAlert.vue    |   7 +-
 frontend/src/views/AuthorityView.vue          |   1 +
 5 files changed, 448 insertions(+), 354 deletions(-)

diff --git a/backend/src/components/utils.js b/backend/src/components/utils.js
index ea0f424f..d65d976f 100644
--- a/backend/src/components/utils.js
+++ b/backend/src/components/utils.js
@@ -1,21 +1,20 @@
 const ALLOWED_FILENAMES = new Set([
-  
-  'districtcontacts',
-  'districtmailing',
-  'publicschoolcontacts',
-  'independentschoolcontacts',
-  'allschoolcontacts',
-  'allschoolmailing',
-  'authoritycontacts',
-  'authoritymailing',
-  'offshoreschoolrepresentatives'
+  "districtcontacts",
+  "districtmailing",
+  "publicschoolcontacts",
+  "independentschoolcontacts",
+  "allschoolcontacts",
+  "allschoolmailing",
+  "authoritycontacts",
+  "authoritymailing",
+  "offshoreschoolrepresentatives",
   // Add more allowed filepaths as needed
 ]);
 
 const ALLOWED_SCHOOLCATEGORYCODES = new Set([
-  'PUBLIC',
-  'INDEPEND',
-  'OFFSHORE'
+  "PUBLIC",
+  "INDEPEND",
+  "OFFSHORE",
   // Add more allowed filepaths as needed
 ]);
 function isAllowedSchoolCategory(category) {
@@ -31,17 +30,17 @@ function createList(list, options = {}) {
     fieldToInclude = null, // Updated option name
     valueToInclude = null, // Updated option name
     sortFunction = null,
-    sortField = null
+    sortField = null,
   } = options;
 
   const filteredList = list
     .filter(function (item) {
       // Change the condition from removal to inclusion
-      return (!fieldToInclude || item[fieldToInclude] === valueToInclude);
+      return !fieldToInclude || item[fieldToInclude] === valueToInclude;
     })
     .map(function (item) {
       const itemData = {};
-      fields.forEach(field => {
+      fields.forEach((field) => {
         itemData[field] = item[field];
       });
       return itemData;
@@ -58,7 +57,6 @@ function createList(list, options = {}) {
     });
   }
 
-
   return filteredList;
 }
 function removeFieldsByCriteria(inputData, criteria) {
@@ -79,355 +77,434 @@ function removeFieldsByCriteria(inputData, criteria) {
 }
 function appendMailingAddressDetailsAndRemoveAddresses(data) {
   if (data && data.addresses && data.addresses.length > 0) {
-      const physicalAddress = data.addresses.find(address => address.addressTypeCode === 'PHYSICAL');
-      if (physicalAddress) {
-          // Extract specific name-value pairs from the mailing address
-          const { addressLine1, addressLine2, city, postal, provinceCode, countryCode } = physicalAddress;
-
-          // Add these name-value pairs to the original district object
-          data.physicalAddressLine1 = addressLine1;
-          data.physicalAddressLine2 = addressLine2;
-          data.physicalCity = city;
-          data.physicalPostal = postal;
-          data.physicalProvinceCode = provinceCode;
-          data.physicalCountryCode = countryCode;
-
-          // Remove the "addresses" property
-        
-      }
-      const courierAddress = data.addresses.find(address => address.addressTypeCode === 'MAILING');
-      if (courierAddress) {
-          // Extract specific name-value pairs from the mailing address
-          const { addressLine1, addressLine2, city, postal, provinceCode, countryCode } = courierAddress;
-
-          // Add these name-value pairs to the original district object
-          data.mailingAddressLine1 = addressLine1;
-          data.mailingAddressLine2 = addressLine2;
-          data.mailingCity = city;
-          data.mailingPostal = postal;
-          data.mailingProvinceCode = provinceCode;
-          data.mailingCountryCode = countryCode;
-
-          // Remove the "addresses" property
-      }  
-      delete data.addresses;
-      delete data.contacts;
-  }
-}
-function addDistrictLabels(jsonData, districtList) {
-    if (jsonData.content && Array.isArray(jsonData.content)) {
-      jsonData.content.forEach(dataItem => {
-        const district = districtList.find(item => item.districtId === dataItem.districtId);
-        if (district) {
-          dataItem.districtNumber = district.districtNumber;
-          dataItem.districtName = district.displayName;
-        }
-      });
+    const physicalAddress = data.addresses.find(
+      (address) => address.addressTypeCode === "PHYSICAL"
+    );
+    if (physicalAddress) {
+      // Extract specific name-value pairs from the mailing address
+      const {
+        addressLine1,
+        addressLine2,
+        city,
+        postal,
+        provinceCode,
+        countryCode,
+      } = physicalAddress;
+
+      // Add these name-value pairs to the original district object
+      data.physicalAddressLine1 = addressLine1;
+      data.physicalAddressLine2 = addressLine2;
+      data.physicalCity = city;
+      data.physicalPostal = postal;
+      data.physicalProvinceCode = provinceCode;
+      data.physicalCountryCode = countryCode;
+
+      // Remove the "addresses" property
     }
-    return jsonData
-  }
-
-  function districtNumberSort(a, b) {
-    // Convert the strings to numbers for comparison
-    const numA = parseInt(a, 10);
-    const numB = parseInt(b, 10);
-  
-    if (numA < numB) {
-      return -1;
+    const courierAddress = data.addresses.find(
+      (address) => address.addressTypeCode === "MAILING"
+    );
+    if (courierAddress) {
+      // Extract specific name-value pairs from the mailing address
+      const {
+        addressLine1,
+        addressLine2,
+        city,
+        postal,
+        provinceCode,
+        countryCode,
+      } = courierAddress;
+
+      // Add these name-value pairs to the original district object
+      data.mailingAddressLine1 = addressLine1;
+      data.mailingAddressLine2 = addressLine2;
+      data.mailingCity = city;
+      data.mailingPostal = postal;
+      data.mailingProvinceCode = provinceCode;
+      data.mailingCountryCode = countryCode;
+
+      // Remove the "addresses" property
     }
-    if (numA > numB) {
-      return 1;
-    }
-    return 0;
+    delete data.addresses;
+    delete data.contacts;
   }
-  function formatGrades(grades, schoolGrades) {
-    const result = {};
-
-    // Create a set of all school grade codes from the provided grades
-    const gradeCodesSet = new Set(grades.map(grade => grade.schoolGradeCode));
-  
-    // Include all school grade codes in the result object
-    for (const grade of grades) {
-      result[grade.schoolGradeCode] = "Y";
-    }
-  
-    // Set the value to "N" for school grade codes not in the provided grades
-    for (const grade of schoolGrades) {
-      if (!gradeCodesSet.has(grade.schoolGradeCode)) {
-        result[grade.schoolGradeCode] = "N";
+}
+function addDistrictLabels(jsonData, districtList) {
+  if (jsonData.content && Array.isArray(jsonData.content)) {
+    jsonData.content.forEach((dataItem) => {
+      const district = districtList.find(
+        (item) => item.districtId === dataItem.districtId
+      );
+      if (district) {
+        dataItem.districtNumber = district.districtNumber;
+        dataItem.districtName = district.displayName;
       }
-    }
-  
-    return result;
-  }
-
-  function sortJSONByDistrictNumber(districts) {
-    return districts.slice().sort((a, b) => {
-      const districtNumberA = a['District Number'] || '';
-      const districtNumberB = b['District Number'] || '';
-      return districtNumberA.localeCompare(districtNumberB, undefined, { numeric: true, sensitivity: 'base' });
     });
   }
-  function sortJSONBySchoolCode(schools) {
-    return schools.slice().sort((a, b) => {
-      const schoolCodeA = a.mincode || '';
-      const schoolCodeB = b.mincode || '';
-      return schoolCodeA.localeCompare(schoolCodeB, undefined, { numeric: true, sensitivity: 'base' });
-    });
-  } 
+  return jsonData;
+}
 
-  function sortByProperty(arr, propertyName, options = { numeric: true, sensitivity: 'base' }) {
-    return arr.slice().sort((a, b) => {
-      const valueA = a[propertyName] || '';
-      const valueB = b[propertyName] || '';
-      return valueA.localeCompare(valueB, undefined, options);
-    });
-  }
-  
-  function rearrangeAndRelabelObjectProperties(object, propertyList) {
-      const reorderedObject = {};
-      propertyList.forEach((propertyInfo) => {
-          const prop = propertyInfo.property;
-          const label = propertyInfo.label;
-          reorderedObject[label] = object.hasOwnProperty(prop) ? object[prop] : "";
-      });
-      return reorderedObject;
-  }
+function districtNumberSort(a, b) {
+  // Convert the strings to numbers for comparison
+  const numA = parseInt(a, 10);
+  const numB = parseInt(b, 10);
 
-  function normalizeJsonObject(sourceArray, referenceArray, matchKey, condition, includeFields) {
-    return sourceArray.map((item) => {
-      const matchingItem = referenceArray.find(
-        (info) => info[matchKey] === item[matchKey] && (!condition || condition(info))
-      );
-      if (matchingItem) {
-        return {
-          ...item,
-          ...includeFields.reduce((result, field) => {
-            result[matchKey + "_" + field] = matchingItem[field];
-            return result;
-          }, {}),
-        };
-      }
-      return item;
-    });
+  if (numA < numB) {
+    return -1;
   }
-  function filterRemoveByField(data, field, valuesToExclude) {
-    return data.filter(item => !valuesToExclude.includes(item[field]));
+  if (numA > numB) {
+    return 1;
   }
-  function filterIncludeByField(data, field, valuesToInclude) {
-    return data.filter(item => valuesToInclude.includes(item[field]));
-  }  
-
-  function filterByPubliclyAvailableCodes(jsonArray, fieldName, publicCodes) {
-    // Filter the array based on the condition
-    const filteredArray = jsonArray.filter(item => {
-      // Extract the field value (or use an empty string if the field is not present)
-      const fieldValue = item[fieldName] || '';
-  
-      // Check if the fieldValue exactly matches any string from the stringsToRemove array
-      return publicCodes.includes(fieldValue);
-    });
-  
-    return filteredArray;
+  return 0;
+}
+function formatGrades(grades, schoolGrades) {
+  const result = {};
+
+  // Create a set of all school grade codes from the provided grades
+  const gradeCodesSet = new Set(grades.map((grade) => grade.schoolGradeCode));
+
+  // Include all school grade codes in the result object
+  for (const grade of grades) {
+    result[grade.schoolGradeCode] = "Y";
   }
-  function filterByField(jsonArray, fieldName, stringsToRemove) {
-    // Filter the array based on the condition
-    const filteredArray = jsonArray.filter(item => {
-      // Extract the field value (or use an empty string if the field is not present)
-      const fieldValue = item[fieldName] || '';
-  
-      // Check if the fieldValue exactly matches any string from the stringsToRemove array
-      return !stringsToRemove.includes(fieldValue);
-    });
-  
-    return filteredArray;
+
+  // Set the value to "N" for school grade codes not in the provided grades
+  for (const grade of schoolGrades) {
+    if (!gradeCodesSet.has(grade.schoolGradeCode)) {
+      result[grade.schoolGradeCode] = "N";
+    }
   }
-  function filterByOpenedAndClosedDate(data){
-    const currentDate = new Date();
-  
-    return data.filter(item => {
-      const closedDate = item.closedDate ? new Date(item.closedDate) : null;
-      const openedDate = item.openedDate ? new Date(item.openedDate) : null;
-   
-      return (closedDate === null && currentDate > openedDate) || (currentDate < closedDate && currentDate > openedDate) ;
+
+  return result;
+}
+
+function sortJSONByDistrictNumber(districts) {
+  return districts.slice().sort((a, b) => {
+    const districtNumberA = a["District Number"] || "";
+    const districtNumberB = b["District Number"] || "";
+    return districtNumberA.localeCompare(districtNumberB, undefined, {
+      numeric: true,
+      sensitivity: "base",
     });
-  }
-  function filterByExpiryDate(data) {
-    const currentDate = new Date();
-  
-    return data.filter(item => {
-      const expiryDate = item.expiryDate ? new Date(item.expiryDate) : null;
-      const effectiveDate = item.effectiveDate ? new Date(item.effectiveDate) : null;
-   
-      return (expiryDate === null && currentDate > effectiveDate) || (currentDate < expiryDate && currentDate > effectiveDate) ;
+  });
+}
+function sortJSONBySchoolCode(schools) {
+  return schools.slice().sort((a, b) => {
+    const schoolCodeA = a.mincode || "";
+    const schoolCodeB = b.mincode || "";
+    return schoolCodeA.localeCompare(schoolCodeB, undefined, {
+      numeric: true,
+      sensitivity: "base",
     });
-  }
-  function getArrayofNonPubliclyAvailableCodes(codes, field) {
-    if (!Array.isArray(codes)) {
-      throw new Error('Invalid input. Expecting an array of objects.');
-    }
-  
-    // Filter out objects where "publiclyAvailable" is false
-    const nonPubliclyAvailableCodes = codes
-      .filter(item => item && item.publiclyAvailable !== true)
-      .map(item => item[field]);
-  
-    return nonPubliclyAvailableCodes;
-  }
-  function addFundingGroups(schools, fundingGroups) {
-    try {
-        // Process each school in the array
-        const schoolsWithFunding = schools.map(school => {
-            // Find all matching funding groups by mincode
-            const matchingFundingGroups = fundingGroups.filter(fundingGroup => 
-                fundingGroup.mincode === school.mincode
-            );
-
-            const schoolWithFunding = {
-              ...school,
-              primaryK3: "", // Replace with an appropriate default value
-              elementary47: "", // Replace with an appropriate default value
-              juniorSecondary810: "", // Replace with an appropriate default value
-              seniorSecondary1112: "" // Replace with an appropriate default value
-            };
-
-            // Iterate through the matching funding groups
-            matchingFundingGroups.forEach(matchingFundingGroup => {
-                // Access the fundingGroupCode and fundingSubCode properties
-                const fundingGroupCode = matchingFundingGroup.fundingGroupCode;
-                const fundingSubCode = matchingFundingGroup.fundingGroupSubCode;
-
-                // Check the fundingSubCode and update the school information
-                switch (fundingSubCode) {
-                    case "01":
-                        schoolWithFunding.primaryK3 = fundingGroupCode;
-                        break;
-                    case "04":
-                        schoolWithFunding.elementary47 = fundingGroupCode;
-                        break;
-                    case "08":
-                        schoolWithFunding.juniorSecondary810 = fundingGroupCode;
-                        break;
-                    case "11":
-                        schoolWithFunding.seniorSecondary1112 = fundingGroupCode;
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            return schoolWithFunding;
-        });
+  });
+}
 
-        return schoolsWithFunding;
-    } catch (error) {
-        // Handle the error here, you can log it or perform other actions
-        console.error("An error occurred in addFundingGroups:", error);
-        // Optionally, you can rethrow the error if needed
-        throw error;
-    }
+function sortByProperty(
+  arr,
+  propertyName,
+  options = { numeric: true, sensitivity: "base" }
+) {
+  return arr.slice().sort((a, b) => {
+    const valueA = a[propertyName] || "";
+    const valueB = b[propertyName] || "";
+    return valueA.localeCompare(valueB, undefined, options);
+  });
+}
+
+function rearrangeAndRelabelObjectProperties(object, propertyList) {
+  const reorderedObject = {};
+  propertyList.forEach((propertyInfo) => {
+    const prop = propertyInfo.property;
+    const label = propertyInfo.label;
+    reorderedObject[label] = object.hasOwnProperty(prop) ? object[prop] : "";
+  });
+  return reorderedObject;
 }
-  function getArrayofPubliclyAvailableCodes(codes, field) {
-    if (!Array.isArray(codes)) {
-      throw new Error('Invalid input. Expecting an array of objects.');
+
+function normalizeJsonObject(
+  sourceArray,
+  referenceArray,
+  matchKey,
+  condition,
+  includeFields
+) {
+  return sourceArray.map((item) => {
+    const matchingItem = referenceArray.find(
+      (info) =>
+        info[matchKey] === item[matchKey] && (!condition || condition(info))
+    );
+    if (matchingItem) {
+      return {
+        ...item,
+        ...includeFields.reduce((result, field) => {
+          result[matchKey + "_" + field] = matchingItem[field];
+          return result;
+        }, {}),
+      };
     }
-  
-    // Filter out objects where "publiclyAvailable" is true
-    const publiclyAvailableCodes = codes
-      .filter(item => item && item.publiclyAvailable === true)
-      .map(item => item[field]);
-  
-    return publiclyAvailableCodes;
+    return item;
+  });
+}
+function filterRemoveByField(data, field, valuesToExclude) {
+  return data.filter((item) => !valuesToExclude.includes(item[field]));
+}
+function filterIncludeByField(data, field, valuesToInclude) {
+  return data.filter((item) => valuesToInclude.includes(item[field]));
+}
+
+function filterByPubliclyAvailableCodes(jsonArray, fieldName, publicCodes) {
+  // Filter the array based on the condition
+  const filteredArray = jsonArray.filter((item) => {
+    // Extract the field value (or use an empty string if the field is not present)
+    const fieldValue = item[fieldName] || "";
+
+    // Check if the fieldValue exactly matches any string from the stringsToRemove array
+    return publicCodes.includes(fieldValue);
+  });
+
+  return filteredArray;
+}
+function filterByField(jsonArray, fieldName, stringsToRemove) {
+  // Filter the array based on the condition
+  const filteredArray = jsonArray.filter((item) => {
+    // Extract the field value (or use an empty string if the field is not present)
+    const fieldValue = item[fieldName] || "";
+
+    // Check if the fieldValue exactly matches any string from the stringsToRemove array
+    return !stringsToRemove.includes(fieldValue);
+  });
+
+  return filteredArray;
+}
+function filterByOpenedAndClosedDate(data) {
+  const currentDate = new Date();
+
+  return data.filter((item) => {
+    const closedDate = item.closedDate ? new Date(item.closedDate) : null;
+    const openedDate = item.openedDate ? new Date(item.openedDate) : null;
+
+    return (
+      (closedDate === null && currentDate > openedDate) ||
+      (currentDate < closedDate && currentDate > openedDate)
+    );
+  });
+}
+function filterByExpiryDate(data) {
+  const currentDate = new Date();
+
+  return data.filter((item) => {
+    const expiryDate = item.expiryDate ? new Date(item.expiryDate) : null;
+    const effectiveDate = item.effectiveDate
+      ? new Date(item.effectiveDate)
+      : null;
+
+    return (
+      (expiryDate === null && currentDate > effectiveDate) ||
+      (currentDate < expiryDate && currentDate > effectiveDate)
+    );
+  });
+}
+function getArrayofNonPubliclyAvailableCodes(codes, field) {
+  if (!Array.isArray(codes)) {
+    throw new Error("Invalid input. Expecting an array of objects.");
   }
-  function createSchoolCache(schoolData, schoolGrades) {
-    // Preload convertedGrades with schoolGrades.schoolGradeCode and set the value to "N"
 
+  // Filter out objects where "publiclyAvailable" is false
+  const nonPubliclyAvailableCodes = codes
+    .filter((item) => item && item.publiclyAvailable !== true)
+    .map((item) => item[field]);
 
-    // Map over each school object
-    return schoolData.map((school) => {
-      const convertedGrades = {};
-      schoolGrades.forEach((grade) => {
-          convertedGrades[grade.schoolGradeCode] = "N";
-      });
+  return nonPubliclyAvailableCodes;
+}
+function addFundingGroups(schools, fundingGroups) {
+  try {
+    // Process each school in the array
+    const schoolsWithFunding = schools.map((school) => {
+      // Find all matching funding groups by mincode
+      const matchingFundingGroups = fundingGroups.filter(
+        (fundingGroup) => fundingGroup.mincode === school.mincode
+      );
 
-      const addressFields = {
-          mailing: {},
-          physical: {},
+      const schoolWithFunding = {
+        ...school,
+        primaryK3: "", // Replace with an appropriate default value
+        elementary47: "", // Replace with an appropriate default value
+        juniorSecondary810: "", // Replace with an appropriate default value
+        seniorSecondary1112: "", // Replace with an appropriate default value
       };
 
-      // Loop through the grades and set the value to "Y" for each grade
-      school.grades.forEach((grade) => {
-          convertedGrades[grade.schoolGradeCode] = "Y";
+      // Iterate through the matching funding groups
+      matchingFundingGroups.forEach((matchingFundingGroup) => {
+        // Access the fundingGroupCode and fundingSubCode properties
+        const fundingGroupCode = matchingFundingGroup.fundingGroupCode;
+        const fundingSubCode = matchingFundingGroup.fundingGroupSubCode;
+
+        // Check the fundingSubCode and update the school information
+        switch (fundingSubCode) {
+          case "01":
+            schoolWithFunding.primaryK3 = fundingGroupCode;
+            break;
+          case "04":
+            schoolWithFunding.elementary47 = fundingGroupCode;
+            break;
+          case "08":
+            schoolWithFunding.juniorSecondary810 = fundingGroupCode;
+            break;
+          case "11":
+            schoolWithFunding.seniorSecondary1112 = fundingGroupCode;
+            break;
+          default:
+            break;
+        }
       });
 
-      // Extract and format principal contact information if it exists
-      const principalContact = school.contacts.find((contact) => contact.schoolContactTypeCode === "PRINCIPAL");
-      if (principalContact) {
-          school.firstName = principalContact.firstName;
-          school.lastName = principalContact.lastName;
-         
-          
-      }
+      return schoolWithFunding;
+    });
 
-      // Loop through addresses and update the fields based on addressTypeCode
-      school.addresses.forEach((address) => {
-          if (address.addressTypeCode === "MAILING") {
-              Object.keys(address).forEach((field) => {
-                  // Exclude the specified fields
-                  if (![
-                      "createUser",
-                      "updateUser",
-                      "createDate",
-                      "updateDate",
-                      "schoolAddressId",
-                      "schoolId",
-                      "addressTypeCode"
-                  ].includes(field)) {
-                      addressFields.mailing[`mailing_${field}`] = address[field];
-                  }
-              });
-          } else if (address.addressTypeCode === "PHYSICAL") {
-              Object.keys(address).forEach((field) => {
-                  if (![
-                      "createUser",
-                      "updateUser",
-                      "createDate",
-                      "updateDate",
-                      "schoolAddressId",
-                      "schoolId",
-                      "addressTypeCode"
-                  ].includes(field)) {
-                      addressFields.mailing[`physical_${field}`] = address[field];
-                  }
-              });
-            }
-        });
+    return schoolsWithFunding;
+  } catch (error) {
+    // Handle the error here, you can log it or perform other actions
+    console.error("An error occurred in addFundingGroups:", error);
+    // Optionally, you can rethrow the error if needed
+    throw error;
+  }
+}
+function getArrayofPubliclyAvailableCodes(codes, field) {
+  if (!Array.isArray(codes)) {
+    throw new Error("Invalid input. Expecting an array of objects.");
+  }
+
+  // Filter out objects where "publiclyAvailable" is true
+  const publiclyAvailableCodes = codes
+    .filter((item) => item && item.publiclyAvailable === true)
+    .map((item) => item[field]);
+
+  return publiclyAvailableCodes;
+}
+function createSchoolCache(schoolData, schoolGrades) {
+  // Preload convertedGrades with schoolGrades.schoolGradeCode and set the value to "N"
+
+  // Map over each school object
+  return schoolData.map((school) => {
+    const convertedGrades = {};
+    schoolGrades.forEach((grade) => {
+      convertedGrades[grade.schoolGradeCode] = "N";
+    });
+
+    const addressFields = {
+      mailing: {},
+      physical: {},
+    };
+
+    // Loop through the grades and set the value to "Y" for each grade
+    school.grades.forEach((grade) => {
+      convertedGrades[grade.schoolGradeCode] = "Y";
+    });
+
+    // Extract and format principal contact information if it exists
+    const principalContact = school.contacts.find(
+      (contact) => contact.schoolContactTypeCode === "PRINCIPAL"
+    );
+    if (principalContact) {
+      school.firstName = principalContact.firstName;
+      school.lastName = principalContact.lastName;
+    }
 
-        // Concatenate neighborhoodLearningTypeCode into a single string
-        const nlc = school.neighborhoodLearning.map(learning => learning.neighborhoodLearningTypeCode).join(' | ');
-
-        // Merge the address fields and nlc into the school object
-        Object.assign(school, convertedGrades, addressFields.mailing, addressFields.physical, { nlc });
-
-        // Remove the original grades property and the updated address object
-        delete school.grades;
-        delete school.addresses;
-        delete school.neighborhoodLearning;
-        delete school.createUser;
-        delete school.updateUser;
-        delete school.updateDate;
-        delete school.createDate;
-        delete school.schoolId;
-        delete school.openedDate;
-        delete school.closedDate;
-        delete school.notes;
-        delete school.schoolMove.createUser;
-        delete school.schoolMove;
-
-        // Remove the contacts property
-        delete school.contacts;
-        
-        return school;
+    // Loop through addresses and update the fields based on addressTypeCode
+    school.addresses.forEach((address) => {
+      if (address.addressTypeCode === "MAILING") {
+        Object.keys(address).forEach((field) => {
+          // Exclude the specified fields
+          if (
+            ![
+              "createUser",
+              "updateUser",
+              "createDate",
+              "updateDate",
+              "schoolAddressId",
+              "schoolId",
+              "addressTypeCode",
+            ].includes(field)
+          ) {
+            addressFields.mailing[`mailing_${field}`] = address[field];
+          }
+        });
+      } else if (address.addressTypeCode === "PHYSICAL") {
+        Object.keys(address).forEach((field) => {
+          if (
+            ![
+              "createUser",
+              "updateUser",
+              "createDate",
+              "updateDate",
+              "schoolAddressId",
+              "schoolId",
+              "addressTypeCode",
+            ].includes(field)
+          ) {
+            addressFields.mailing[`physical_${field}`] = address[field];
+          }
+        });
+      }
     });
+
+    // Concatenate neighborhoodLearningTypeCode into a single string
+    const nlc = school.neighborhoodLearning
+      .map((learning) => learning.neighborhoodLearningTypeCode)
+      .join(" | ");
+
+    // Merge the address fields and nlc into the school object
+    Object.assign(
+      school,
+      convertedGrades,
+      addressFields.mailing,
+      addressFields.physical,
+      { nlc }
+    );
+
+    // Remove the original grades property and the updated address object
+    delete school.grades;
+    delete school.addresses;
+    delete school.neighborhoodLearning;
+    delete school.createUser;
+    delete school.updateUser;
+    delete school.updateDate;
+    delete school.createDate;
+    delete school.schoolId;
+    delete school.openedDate;
+    delete school.closedDate;
+    delete school.notes;
+    delete school.schoolMove.createUser;
+    delete school.schoolMove;
+
+    // Remove the contacts property
+    delete school.contacts;
+
+    return school;
+  });
 }
-  module.exports = {addFundingGroups, filterByOpenedAndClosedDate, filterByPubliclyAvailableCodes, getArrayofPubliclyAvailableCodes, filterByExpiryDate, filterRemoveByField,filterIncludeByField, sortByProperty,getArrayofNonPubliclyAvailableCodes,filterByField,appendMailingAddressDetailsAndRemoveAddresses,sortJSONBySchoolCode,sortJSONByDistrictNumber,normalizeJsonObject, removeFieldsByCriteria, createList, isSafeFilePath,isAllowedSchoolCategory, addDistrictLabels, districtNumberSort, createSchoolCache, formatGrades, rearrangeAndRelabelObjectProperties};
\ No newline at end of file
+module.exports = {
+  addFundingGroups,
+  filterByOpenedAndClosedDate,
+  filterByPubliclyAvailableCodes,
+  getArrayofPubliclyAvailableCodes,
+  filterByExpiryDate,
+  filterRemoveByField,
+  filterIncludeByField,
+  sortByProperty,
+  getArrayofNonPubliclyAvailableCodes,
+  filterByField,
+  appendMailingAddressDetailsAndRemoveAddresses,
+  sortJSONBySchoolCode,
+  sortJSONByDistrictNumber,
+  normalizeJsonObject,
+  removeFieldsByCriteria,
+  createList,
+  isSafeFilePath,
+  isAllowedSchoolCategory,
+  addDistrictLabels,
+  districtNumberSort,
+  createSchoolCache,
+  formatGrades,
+  rearrangeAndRelabelObjectProperties,
+};
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 93ef9c7d..7d0efbc4 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -21,23 +21,14 @@ div.v-application__wrap {
 .full-width {
   margin-left: calc(-1*(100vw - 1024px)/2);
   margin-right: calc(-1*(100vw - 1024px)/2);
+}
+
 /** Need to look at how CSS is loaded in since Vuetify defaults are overriding our custom CSS.
 Fixing this now could risk delaying other releases, so we will have to wait on this one - SF **/
 .v-alert, .v-alert--variant-outlined {
   border-radius: 8px !important;
 }
 
-@media (max-width: 768px) {
-  #app {
-    /* min-width: 600px; */
-    padding: 0; /* Adjust as needed */
-  }
-
-  .full-width {
-    margin-left: calc(-1*(100vw - 400px)/2);
-    margin-right: calc(-1*(100vw - 400px)/2);
-  }
-}
 .school-search{
   margin-left:175px
 }
@@ -73,6 +64,25 @@ button.link-btn, .link-btn .v-btn__content {
 .v-btn-align-left {
   justify-content: normal !important;
 }
+
+@media (max-width: 768px) {
+  #app {
+    /* min-width: 600px; */
+    padding: 0; /* Adjust as needed */
+  }
+
+  .full-width {
+    margin-left: calc(-1*(100vw - 400px)/2);
+    margin-right: calc(-1*(100vw - 400px)/2);
+  }
+
+  .breadcrumbs {
+    margin: 0;
+    padding-left: inherit;
+  }
+
+}
+
 @media (hover: hover) {
   a:hover {
     background-color: #0000;
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index c6737f1e..88499c1a 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -35,13 +35,14 @@ function goToSchoolSearch() {
 
 <template>
   <v-sheet elevation="2" class="py-6 full-width">
-    <v-container class="main">
+    <v-container id="main">
+      <DisplayAlert class="mx-4" />
       <v-row no-gutters justify="space-between">
         <v-col>
           <img
             src="@/assets/images/BCMapGraphic.png"
             alt="Map of British Columbia"
-            style="height: 268px; position: absolute; top: 50px; left: -80px"
+            style="height: 268px; position: absolute; top: 170px; left: -80px"
             class="d-none d-md-block"
           />
         </v-col>
diff --git a/frontend/src/components/common/DisplayAlert.vue b/frontend/src/components/common/DisplayAlert.vue
index e2735140..86828b6d 100644
--- a/frontend/src/components/common/DisplayAlert.vue
+++ b/frontend/src/components/common/DisplayAlert.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-alert type="info" color="primary" variant="outlined" style="background-color: #f6f9fc"
+  <v-alert
+    class="display-alert"
+    type="info"
+    color="primary"
+    variant="outlined"
+    style="background-color: #f6f9fc"
     >The information on this page is provided by schools and districts through the Education Data
     Exchange (EDX).
     <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58">Learn more</a>.
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 15afce96..35905857 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -214,6 +214,7 @@ onMounted(async () => {
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
+        <DisplayAlert />
         <v-row no-gutters justify="space-between">
           <v-col>
             <h1 class="mt-3 mb-2">

From b9fa24d441b1e9c617e4be809d30b6751c5427a3 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 09:02:37 -0700
Subject: [PATCH 04/24] the wiggle is gone!

---
 frontend/src/assets/main.css         | 8 ++++----
 frontend/src/main.ts                 | 6 +++---
 frontend/src/views/AuthorityView.vue | 8 +++++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 7d0efbc4..b6aeca5a 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -37,7 +37,7 @@ Fixing this now could risk delaying other releases, so we will have to wait on t
 }
 .breadcrumbs {
   margin: 0 -40em;
-  padding-left: 40em !important;
+  padding-left: 40em;
 }
 
 /* styles button to look like links */
@@ -72,13 +72,13 @@ button.link-btn, .link-btn .v-btn__content {
   }
 
   .full-width {
-    margin-left: calc(-1*(100vw - 400px)/2);
-    margin-right: calc(-1*(100vw - 400px)/2);
+    margin-left: unset;
+    margin-right: unset;
   }
 
   .breadcrumbs {
     margin: 0;
-    padding-left: inherit;
+    padding-left: 12px;
   }
 
 }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 87dd4319..0fae98a5 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,3 @@
-import './assets/main.css'
-import '@bcgov/bc-sans/css/BCSans.css'
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
@@ -18,6 +15,9 @@ import '@mdi/font/css/materialdesignicons.css'
 import App from './App.vue'
 import router from './router/index'
 
+import './assets/main.css'
+import '@bcgov/bc-sans/css/BCSans.css'
+
 // define custom theme
 const bcGovTheme: ThemeDefinition = {
     dark: false,
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 35905857..d9e22b51 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -216,13 +216,13 @@ onMounted(async () => {
       <v-container id="main">
         <DisplayAlert />
         <v-row no-gutters justify="space-between">
-          <v-col>
+          <v-col cols="11" md="auto">
             <h1 class="mt-3 mb-2">
               {{ authority.value.authorityData?.authorityNumber }} -
               {{ authority.value.authorityData?.displayName }}
             </h1>
             <v-row v-if="authority.value.authorityData">
-              <v-col>
+              <v-col cols="11" md="auto">
                 <p>
                   <strong>Phone:</strong>
                   {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
@@ -239,12 +239,14 @@ onMounted(async () => {
                 </p>
               </v-col>
               <v-col
+                cols="11"
+                md="auto"
                 v-for="item in authority.value.authorityData.addresses"
                 :key="item.addressTypeCode"
               >
                 <DisplayAddress v-bind="item" />
               </v-col>
-              <v-col>
+              <v-col cols="11" md="auto">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"

From a1eee31e9c5bca111bf42ecafbc7919c172bc5f2 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 11:34:34 -0700
Subject: [PATCH 05/24] authority view responsive

---
 frontend/src/components/common/DisplayAddress.vue | 2 +-
 frontend/src/views/AuthorityView.vue              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/DisplayAddress.vue b/frontend/src/components/common/DisplayAddress.vue
index 252d70c5..cbbcc350 100644
--- a/frontend/src/components/common/DisplayAddress.vue
+++ b/frontend/src/components/common/DisplayAddress.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="px-1 py-0">
+  <div class="pa-0">
     <p class="font-weight-bold">{{ appStore.getAddressTypeCodeLabel(addressTypeCode) }} Address</p>
     <p>{{ addressLine1 }}</p>
     <p>{{ addressLine2 }}</p>
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index d9e22b51..252c758d 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -214,8 +214,8 @@ onMounted(async () => {
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert />
-        <v-row no-gutters justify="space-between">
+        <DisplayAlert class="mx-4" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-col cols="11" md="auto">
             <h1 class="mt-3 mb-2">
               {{ authority.value.authorityData?.authorityNumber }} -

From d910c9566dcdf8cb9b73343231d0a0f2b24085ba Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 11:40:54 -0700
Subject: [PATCH 06/24] District view responsive

---
 frontend/src/views/DistrictView.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index e07ccded..e014a25f 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -193,8 +193,9 @@ onMounted(async () => {
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <v-row no-gutters justify="space-between">
-          <v-col v-if="district.value.districtData">
+        <DisplayAlert class="mx-4" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
+          <v-col cols="11" md="auto" v-if="district.value.districtData">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
                 {{ district.value.districtData?.districtNumber }} -
@@ -202,7 +203,7 @@ onMounted(async () => {
               </h1>
             </v-row>
             <v-row no-gutters justify="space-between">
-              <v-col>
+              <v-col cols="11" md="auto">
                 <p>
                   <strong>Phone:</strong>
                   {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
@@ -220,13 +221,15 @@ onMounted(async () => {
               </v-col>
 
               <v-col
+                cols="11"
+                md="auto"
                 v-for="item in district.value.districtData.addresses"
                 :key="item.addressTypeCode"
               >
                 <DisplayAddress v-bind="item" />
               </v-col>
 
-              <v-col>
+              <v-col cols="11" md="auto">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"

From 235583ea92fa85e77365b9a19242f22ac7ade647 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 11:48:30 -0700
Subject: [PATCH 07/24] School view responsive

---
 frontend/src/views/AuthorityView.vue |  4 ++--
 frontend/src/views/DistrictView.vue  |  4 ++--
 frontend/src/views/SchoolView.vue    | 21 ++++++++++++++-------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 252c758d..cfc07050 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -214,7 +214,7 @@ onMounted(async () => {
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert class="mx-4" />
+        <DisplayAlert class="mx-4 mx-md-0" />
         <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-col cols="11" md="auto">
             <h1 class="mt-3 mb-2">
@@ -246,7 +246,7 @@ onMounted(async () => {
               >
                 <DisplayAddress v-bind="item" />
               </v-col>
-              <v-col cols="11" md="auto">
+              <v-col cols="11" md="4">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index e014a25f..c6910442 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -193,7 +193,7 @@ onMounted(async () => {
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert class="mx-4" />
+        <DisplayAlert class="mx-4 mx-md-0" />
         <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-col cols="11" md="auto" v-if="district.value.districtData">
             <v-row no-gutters>
@@ -229,7 +229,7 @@ onMounted(async () => {
                 <DisplayAddress v-bind="item" />
               </v-col>
 
-              <v-col cols="11" md="auto">
+              <v-col cols="11" md="4">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index d26b88a1..654e0fcc 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -235,9 +235,9 @@ function goToDistrict() {
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert />
-        <v-row v-if="schoolData.value" no-gutters justify="space-between">
-          <v-col>
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row v-if="schoolData.value" no-gutters justify="space-between" class="pa-4 pa-md-0">
+          <v-col cols="11" md="auto">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
                 {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
@@ -275,8 +275,8 @@ function goToDistrict() {
                 >{{ grade }}</v-chip
               >
             </v-row>
-            <v-row no-gutters>
-              <v-col class="pl-0">
+            <v-row no-gutters justify="space-between">
+              <v-col cols="11" md="auto" class="pl-0">
                 <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
                 <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
                 <p>
@@ -286,10 +286,17 @@ function goToDistrict() {
                   </a>
                 </p>
               </v-col>
-              <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
+              <v-col
+                cols="11"
+                md="auto"
+                v-for="item in schoolData.value.addresses"
+                :key="item.addressTypeCode"
+              >
                 <DisplayAddress v-bind="item" />
               </v-col>
               <v-col
+                cols="11"
+                md="auto"
                 v-if="
                   schoolData.value.primaryK3 ||
                   schoolData.value.elementary47 ||
@@ -316,7 +323,7 @@ function goToDistrict() {
                   </li>
                 </ul>
               </v-col>
-              <v-col
+              <v-col cols="11" md="4"
                 ><v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"

From 63a0763ccabd041b174879fda17cee2f63e3991a Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 12:16:54 -0700
Subject: [PATCH 08/24] School search, contacts, and offshore schools
 responsive

---
 frontend/src/components/Header.vue      |  1 +
 frontend/src/views/ContactsView.vue     | 16 +++----
 frontend/src/views/OffshoreView.vue     | 58 ++++++++++++-------------
 frontend/src/views/SchoolSearchView.vue | 24 +++++-----
 4 files changed, 47 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index ad1b3667..3465ca80 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -22,5 +22,6 @@
 .v-toolbar__extension {
   justify-content: start;
   max-width: 1280px;
+  /* padding: 0 2rem; */
 }
 </style>
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index 7f983747..7e01435c 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -153,12 +153,13 @@ onMounted(() => {
       :items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-container class="main">
-        <v-row no-gutters justify="space-between">
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-spacer />
           <v-col cols="12">
             <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
-            <v-row>
+            <v-row no-gutters>
               <v-autocomplete
                 v-model="selectedContactType"
                 label="Select a Contact by Type"
@@ -210,11 +211,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style>
-/* sizes header to align with content on desktop */
-.v-toolbar__content,
-.v-toolbar__extension {
-  max-width: 1280px;
-  padding: 0 2rem;
-}
-</style>
+<style></style>
diff --git a/frontend/src/views/OffshoreView.vue b/frontend/src/views/OffshoreView.vue
index 16c23bdb..2dff1467 100644
--- a/frontend/src/views/OffshoreView.vue
+++ b/frontend/src/views/OffshoreView.vue
@@ -131,29 +131,32 @@ onBeforeMount(() => {
       :items="[{ title: 'Home', href: '/' }, 'Offshore Schools']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-row no-gutters justify="space-between">
-        <v-col>
-          <h1 class="mt-3 mb-2">Offshore Schools</h1>
-        </v-col>
-        <v-spacer />
-        <v-col cols="3"
-          ><v-btn
-            variant="text"
-            class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-            href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
-            Representatives (CSV)</v-btn
-          >
-          <v-btn
-            @click="downloadCSV"
-            variant="text"
-            class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
-            Schools(CSV)</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters justify="space-between">
+          <v-col cols="11" md="auto">
+            <h1 class="mt-3 mb-2">Offshore Schools</h1>
+          </v-col>
+        </v-row>
+        <v-row no-gutters justify="space-between">
+          <v-col cols="11" md="3"
+            ><v-btn
+              variant="text"
+              class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+              href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
+              ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
+              Representatives (CSV)</v-btn
+            >
+            <v-btn
+              @click="downloadCSV"
+              variant="text"
+              class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+              ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
+              Schools(CSV)</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Offshore Schools Header Block -->
 
@@ -196,11 +199,4 @@ onBeforeMount(() => {
 
 <style></style>
 
-<style>
-/* sizes header to align with content on desktop */
-.v-toolbar__content,
-.v-toolbar__extension {
-  max-width: 1280px;
-  padding: 0 2rem;
-}
-</style>
+<style></style>
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index d7fe0411..909b5afe 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -203,11 +203,13 @@ onBeforeMount(async () => {
       :items="[{ title: 'Home', href: '/' }, 'Search']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-container class="main">
-        <h1>Find Schools</h1>
-        <v-row>
-          <v-col cols="12" md="3">
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters>
+          <v-col cols="11">
+            <h1>Find Schools</h1>
+          </v-col>
+          <v-col cols="11" md="3">
             <v-select
               v-model="selectedJurisdiction"
               :items="jurisdictions"
@@ -217,7 +219,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="12" md="3">
+          <v-col cols="11" md="3">
             <v-select
               v-model="selectedType"
               item-title="label"
@@ -227,7 +229,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="12" md="3"
+          <v-col cols="11" md="3"
             ><v-btn
               icon="mdi-magnify"
               color="primary"
@@ -237,7 +239,7 @@ onBeforeMount(async () => {
               @click="searchSchools"
               class="text-none text-subtle-1 ml-3"
           /></v-col>
-          <v-col cols="12">
+          <v-col cols="11">
             <v-btn @click="resetFilters" variant="outlined" color="primary" class="text-none"
               >Reset</v-btn
             >
@@ -247,7 +249,8 @@ onBeforeMount(async () => {
       </v-container>
     </v-sheet>
 
-    <v-card class="pa-6" width="100%">
+    <!-- <v-card class="pa-6" width="100%"> -->
+    <v-sheet class="pa-6">
       <!-- Search Results Table -->
       Total: {{ results }} <span v-if="results != 0">Current Page {{ currentPage + 1 }}</span>
       <v-data-table-server
@@ -317,7 +320,8 @@ onBeforeMount(async () => {
           </tr>
         </template>
       </v-data-table-server>
-    </v-card>
+      <!-- </v-card> -->
+    </v-sheet>
   </div>
 </template>
 

From fa9065761d7fcb6e7872df6e720df724f7ebd6de Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 12:22:04 -0700
Subject: [PATCH 09/24] fix dialog on mobile

---
 frontend/src/components/DownloadSchoolsModal.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/components/DownloadSchoolsModal.vue b/frontend/src/components/DownloadSchoolsModal.vue
index f017e510..a0816f36 100644
--- a/frontend/src/components/DownloadSchoolsModal.vue
+++ b/frontend/src/components/DownloadSchoolsModal.vue
@@ -6,13 +6,9 @@ const appStore = useAppStore()
 // used for open and close modal
 const dialog = ref(false)
 // varibles used for search
-
-function downloadAllSchoolsMailing() {
-  alert('TODO - Implement all schools mailing extract download')
-}
 </script>
 <template>
-  <v-dialog v-model="dialog" width="25%">
+  <v-dialog v-model="dialog" max-width="500">
     <template v-slot:activator="{ props }">
       <v-btn
         block

From 78f01de967a9492996816627ff06f41f4b0b0215 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 26 Mar 2024 15:05:50 -0700
Subject: [PATCH 10/24] style fixes to improve mobile look for schools view

---
 frontend/src/assets/main.css                  | 18 +++++++
 frontend/src/components/AuthoritySelect.vue   |  6 +--
 frontend/src/components/OffshoreSelect.vue    |  2 +-
 .../src/components/common/DisplayAddress.vue  | 10 ++--
 .../src/components/common/DisplayAlert.vue    |  5 +-
 frontend/src/views/ContactsView.vue           | 49 ++++++++++++-------
 frontend/src/views/OffshoreView.vue           |  8 +--
 frontend/src/views/SchoolSearchView.vue       | 13 ++---
 frontend/src/views/SchoolView.vue             | 20 +++++---
 9 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index b6aeca5a..e3a9a284 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -29,6 +29,11 @@ Fixing this now could risk delaying other releases, so we will have to wait on t
   border-radius: 8px !important;
 }
 
+.v-breadcrumbs-item--disabled {
+  opacity: 1;
+  font-weight: bold;
+}
+
 .school-search{
   margin-left:175px
 }
@@ -81,6 +86,19 @@ button.link-btn, .link-btn .v-btn__content {
     padding-left: 12px;
   }
 
+  h1 span.institute-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  /* 
+  * wraps button text as long as the class 'wrap' is added to v-btn component
+  * This is a workaround since a text wrap option is not available for buttons in Vuetify
+  */
+  .wrap .v-btn__content {
+    white-space: pre-wrap;
+}
+
 }
 
 @media (hover: hover) {
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
index 4dd969ca..4123ed21 100644
--- a/frontend/src/components/AuthoritySelect.vue
+++ b/frontend/src/components/AuthoritySelect.vue
@@ -49,9 +49,9 @@ function goToAuthority() {
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/INDEPENDNT?filepath=authoritymailing"
             variant="text"
-            class="v-btn-align-left text-none text-subtitle-1 my-1"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template> Contact
-            information for all Authorities (CSV)</v-btn
+            class="v-btn-align-left text-none wrap text-subtitle-1 my-1 text-wrap"
+            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Contact information
+            for all Authorities (CSV)</v-btn
           >
         </v-row>
       </v-col>
diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
index 6e949134..41fb8c94 100644
--- a/frontend/src/components/OffshoreSelect.vue
+++ b/frontend/src/components/OffshoreSelect.vue
@@ -36,7 +36,7 @@ function viewOffshoreSchools() {
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
             variant="text"
-            class="v-btn-align-left text-none text-subtitle-1 my-1"
+            class="wrap v-btn-align-left text-none text-subtitle-1 my-1"
             ><template v-slot:prepend> <v-icon icon="mdi-download" /></template>Offshore School
             Owner/Operators (CSV)</v-btn
           >
diff --git a/frontend/src/components/common/DisplayAddress.vue b/frontend/src/components/common/DisplayAddress.vue
index cbbcc350..56d2e102 100644
--- a/frontend/src/components/common/DisplayAddress.vue
+++ b/frontend/src/components/common/DisplayAddress.vue
@@ -18,9 +18,11 @@ const props = defineProps<{
 <template>
   <div class="pa-0">
     <p class="font-weight-bold">{{ appStore.getAddressTypeCodeLabel(addressTypeCode) }} Address</p>
-    <p>{{ addressLine1 }}</p>
-    <p>{{ addressLine2 }}</p>
-    <p>{{ city }}, {{ provinceCode }}</p>
-    <p>{{ formatPostalCode(postal) }}</p>
+    <div class="pl-2 pl-md-0">
+      <p>{{ addressLine1 }}</p>
+      <p>{{ addressLine2 }}</p>
+      <p>{{ city }}, {{ provinceCode }}</p>
+      <p>{{ formatPostalCode(postal) }}</p>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/common/DisplayAlert.vue b/frontend/src/components/common/DisplayAlert.vue
index 86828b6d..ea6c824d 100644
--- a/frontend/src/components/common/DisplayAlert.vue
+++ b/frontend/src/components/common/DisplayAlert.vue
@@ -9,8 +9,9 @@
     style="background-color: #f6f9fc"
     >The information on this page is provided by schools and districts through the Education Data
     Exchange (EDX).
-    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58">Learn more</a>.
-    <br />If you represent an Independent School or Independent Authority and have not yet been
+    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58"
+      >Learn more about EDX</a
+    >. <br />If you represent an Independent School or Independent Authority and have not yet been
     onboarded to EDX, please email
     <a href="mailto:EDUC.independentSchoolsOffice@gov.bc.ca">Independent Schools Office</a> to
     update your contact information.</v-alert
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index 7e01435c..7be1d265 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -160,26 +160,37 @@ onMounted(() => {
           <v-col cols="12">
             <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
             <v-row no-gutters>
-              <v-autocomplete
-                v-model="selectedContactType"
-                label="Select a Contact by Type"
-                :items="appStore.getDistrictContactTypeCodes"
-                item-title="label"
-                item-value="districtContactTypeCode"
-              ></v-autocomplete>
-              <v-btn
-                @click="searchContact"
-                icon="mdi-magnify"
-                color="primary"
-                variant="flat"
-                rounded="lg"
-                size="large"
-                class="text-none text-subtle-1 ml-3"
-              />
+              <v-col cols="11" md="4">
+                <v-autocomplete
+                  v-model="selectedContactType"
+                  label="Select a Contact by Type"
+                  :items="appStore.getDistrictContactTypeCodes"
+                  item-title="label"
+                  item-value="districtContactTypeCode"
+                ></v-autocomplete>
+              </v-col>
+              <v-col cols="3">
+                <v-btn
+                  @click="searchContact"
+                  icon="mdi-magnify"
+                  color="primary"
+                  variant="flat"
+                  rounded="lg"
+                  size="large"
+                  class="text-none text-subtle-1 ml-md-4"
+                />
+              </v-col>
+              <v-spacer class="d-block d-md-none" />
+              <v-col cols="3" md="12">
+                <v-btn
+                  @click="resetContactFilters"
+                  variant="outlined"
+                  color="primary"
+                  class="text-none"
+                  >Reset</v-btn
+                >
+              </v-col>
             </v-row>
-            <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
-              >Reset</v-btn
-            >
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/src/views/OffshoreView.vue b/frontend/src/views/OffshoreView.vue
index 2dff1467..b9b9a37d 100644
--- a/frontend/src/views/OffshoreView.vue
+++ b/frontend/src/views/OffshoreView.vue
@@ -135,14 +135,14 @@ onBeforeMount(() => {
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row no-gutters justify="space-between">
           <v-col cols="11" md="auto">
-            <h1 class="mt-3 mb-2">Offshore Schools</h1>
+            <h1 class="mt-3 mb-2 mx-4 mx-md-0">Offshore Schools</h1>
           </v-col>
         </v-row>
         <v-row no-gutters justify="space-between">
-          <v-col cols="11" md="3"
+          <v-col cols="11" md="4"
             ><v-btn
               variant="text"
-              class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+              class="text-none text-subtitle-1 ma-1 mx-4 mx-md-0 v-btn-align-left"
               href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
               ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
               Representatives (CSV)</v-btn
@@ -150,7 +150,7 @@ onBeforeMount(() => {
             <v-btn
               @click="downloadCSV"
               variant="text"
-              class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+              class="text-none text-subtitle-1 ma-1 mx-4 mx-md-0 v-btn-align-left"
               ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
               Schools(CSV)</v-btn
             >
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index 909b5afe..d7b6c692 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -205,11 +205,11 @@ onBeforeMount(async () => {
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
-        <v-row no-gutters>
+        <v-row no-gutters class="mx-4 mx-md-0">
           <v-col cols="11">
             <h1>Find Schools</h1>
           </v-col>
-          <v-col cols="11" md="3">
+          <v-col cols="11" md="3" class="pr-md-2">
             <v-select
               v-model="selectedJurisdiction"
               :items="jurisdictions"
@@ -219,7 +219,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="11" md="3">
+          <v-col cols="11" md="3" class="pl-md-2">
             <v-select
               v-model="selectedType"
               item-title="label"
@@ -229,7 +229,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="11" md="3"
+          <v-col cols="3"
             ><v-btn
               icon="mdi-magnify"
               color="primary"
@@ -237,9 +237,10 @@ onBeforeMount(async () => {
               rounded="lg"
               size="large"
               @click="searchSchools"
-              class="text-none text-subtle-1 ml-3"
+              class="text-none text-subtle-1 ml-md-4"
           /></v-col>
-          <v-col cols="11">
+          <v-spacer class="d-block d-md-none" />
+          <v-col cols="3" md="11">
             <v-btn @click="resetFilters" variant="outlined" color="primary" class="text-none"
               >Reset</v-btn
             >
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index 654e0fcc..dc56f5e9 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -233,14 +233,22 @@ function goToDistrict() {
       ]"
     ></v-breadcrumbs>
 
-    <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+    <v-sheet
+      style="z-index: 100; position: relative"
+      elevation="2"
+      class="pt-6 pb-0 pb-md-6 full-width"
+    >
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row v-if="schoolData.value" no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-col cols="11" md="auto">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
-                {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
+                <span class="">{{ schoolData.value.mincode }}</span>
+                <span class="d-none d-md-inline"> - </span>
+                <span class="d-block d-md-inline institute-name">{{
+                  schoolData.value.displayName
+                }}</span>
               </h1>
             </v-row>
             <v-row no-gutters class="mt-0 mb-1">
@@ -268,7 +276,7 @@ function goToDistrict() {
               <v-chip
                 v-for="grade in filteredGradesLabels"
                 :key="grade"
-                class="mr-1"
+                class="mr-1 mb-1"
                 size="small"
                 color="primary"
                 label
@@ -276,12 +284,12 @@ function goToDistrict() {
               >
             </v-row>
             <v-row no-gutters justify="space-between">
-              <v-col cols="11" md="auto" class="pl-0">
+              <v-col cols="11" md="auto" class="pl-0 mb-2">
                 <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
                 <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
                 <p>
                   <strong>Email: </strong>
-                  <a :href="'mailto:' + schoolData.value?.email">
+                  <a v-if="schoolData.value?.email" :href="'mailto:' + schoolData.value?.email">
                     {{ schoolData.value.email }}
                   </a>
                 </p>
@@ -326,7 +334,7 @@ function goToDistrict() {
               <v-col cols="11" md="4"
                 ><v-btn
                   variant="text"
-                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left px-0 px-md-4"
                   @click="downloadCSV"
                   :disabled="!schoolData.value"
                   ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download

From 34aa98e8ed04c8562d28721a4e9271472e1ee569 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Wed, 3 Apr 2024 14:35:24 -0700
Subject: [PATCH 11/24] finetune spacing on front page

---
 frontend/src/components/AuthoritySelect.vue | 48 +++++++++++---------
 frontend/src/components/DistrictSelect.vue  | 49 ++++++++++++---------
 frontend/src/components/SchoolSelect.vue    | 43 ++++++++++--------
 frontend/src/views/SchoolView.vue           | 14 ++++--
 4 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
index 4123ed21..7309103a 100644
--- a/frontend/src/components/AuthoritySelect.vue
+++ b/frontend/src/components/AuthoritySelect.vue
@@ -24,34 +24,38 @@ function goToAuthority() {
 <template>
   <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">Independent Authorities</h2>
-    <v-row no-gutters>
-      <v-col class="ma-1">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedAuthority"
-            label="Select an Authority"
-            :items="appStore.getAuthoritiesList"
-            :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
-            :item-value="(item) => item"
-            class="w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToAuthority"
-            class="text-none text-subtitle-1 ml-3"
-          />
+    <v-row no-gutters justify="space-between">
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedAuthority"
+              label="Select an Authority"
+              :items="appStore.getAuthoritiesList"
+              :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToAuthority"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/INDEPENDNT?filepath=authoritymailing"
             variant="text"
             class="v-btn-align-left text-none wrap text-subtitle-1 my-1 text-wrap"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Contact information
-            for all Authorities (CSV)</v-btn
+            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Mailing for All
+            Authorities (CSV)</v-btn
           >
         </v-row>
       </v-col>
diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
index 7558e23c..f50268b8 100644
--- a/frontend/src/components/DistrictSelect.vue
+++ b/frontend/src/components/DistrictSelect.vue
@@ -33,27 +33,32 @@ function downloadDistrictsMailing() {
   <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">School Districts</h2>
     <v-row no-gutters justify="space-between">
-      <v-col class="ma-1">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedDistrict"
-            label="Select a District"
-            :items="appStore.getDistrictList"
-            :item-title="
-              (item) => (item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : '')
-            "
-            :item-value="(item) => item"
-            class="selectDistrictInput w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToDistrict"
-            class="v-btn-align-left text-none text-subtitle-1 ml-3"
-          />
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedDistrict"
+              label="Select a District"
+              :items="appStore.getDistrictList"
+              :item-title="
+                (item) =>
+                  item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : ''
+              "
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToDistrict"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
@@ -63,7 +68,7 @@ function downloadDistrictsMailing() {
             block
             class="text-none text-subtitle-1 my-1"
             ><template v-slot:append> <v-icon icon="mdi-chevron-right" /> </template>
-            View Contacts by Type
+            View District Contacts by Type
           </v-btn>
 
           <v-btn
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index 88499c1a..b9045158 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -48,25 +48,30 @@ function goToSchoolSearch() {
         </v-col>
         <v-col cols="10" md="8" xl="6" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedSchool"
-              label="Select a School"
-              :items="appStore.getSchools"
-              :item-title="
-                (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
-              "
-              :item-value="(item) => (item?.mincode ? item : null)"
-            ></v-autocomplete>
-            <v-btn
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              @click="goToSchool"
-              class="mx-3"
-            />
+          <v-row justify="space-between">
+            <v-col cols="10" md="false" class="pa-0">
+              <v-autocomplete
+                class="mr-1 mr-md-n10"
+                v-model="selectedSchool"
+                label="Select a School"
+                :items="appStore.getSchools"
+                :item-title="
+                  (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
+                "
+                :item-value="(item) => (item?.mincode ? item : null)"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2" md="auto" class="pa-0">
+              <v-btn
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                @click="goToSchool"
+                class="mx-2 mx-md-0"
+              />
+            </v-col>
           </v-row>
           <v-row>
             <v-col class="px-0 py-4 py-md-0 my-md-1">
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index dc56f5e9..e04e535d 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -241,7 +241,7 @@ function goToDistrict() {
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row v-if="schoolData.value" no-gutters justify="space-between" class="pa-4 pa-md-0">
-          <v-col cols="11" md="auto">
+          <v-col cols="11" md="12">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
                 <span class="">{{ schoolData.value.mincode }}</span>
@@ -313,7 +313,7 @@ function goToDistrict() {
                 "
               >
                 <strong> Group Classification:</strong><br />
-                <ul>
+                <ul class="pl-2 pl-md-5">
                   <li v-if="schoolData.value.primaryK3">
                     {{ schoolData.value.primaryK3 }} - Primary K-3
                   </li>
@@ -347,7 +347,7 @@ function goToDistrict() {
       </v-container>
     </v-sheet>
 
-    <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">
+    <v-card class="pa-6" width="100%" v-if="schoolData.value">
       <v-tabs v-model="tab">
         <v-tab :value="tabOptions.contacts">School Contacts</v-tab>
       </v-tabs>
@@ -377,3 +377,11 @@ function goToDistrict() {
     </v-card>
   </div>
 </template>
+
+<style scoped>
+@media (max-width: 768px) {
+  ul {
+    list-style-type: none;
+  }
+}
+</style>

From f3ceebe51f72e9c18578cf1832d28b37e495e4f4 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Fri, 5 Apr 2024 09:02:05 -0700
Subject: [PATCH 12/24] updated heading style for authority and district views

---
 frontend/src/views/AuthorityView.vue | 9 +++++++--
 frontend/src/views/DistrictView.vue  | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index cfc07050..ed0448ca 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -218,8 +218,13 @@ onMounted(async () => {
         <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
           <v-col cols="11" md="auto">
             <h1 class="mt-3 mb-2">
-              {{ authority.value.authorityData?.authorityNumber }} -
-              {{ authority.value.authorityData?.displayName }}
+              <span>
+                {{ authority.value.authorityData?.authorityNumber }}
+              </span>
+              <span class="d-none d-md-inline"> - </span>
+              <span class="d-block d-md-inline institute-name">
+                {{ authority.value.authorityData?.displayName }}
+              </span>
             </h1>
             <v-row v-if="authority.value.authorityData">
               <v-col cols="11" md="auto">
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index c6910442..e6276aca 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -198,8 +198,13 @@ onMounted(async () => {
           <v-col cols="11" md="auto" v-if="district.value.districtData">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
-                {{ district.value.districtData?.districtNumber }} -
-                {{ district.value.districtData?.displayName }}
+                <span>
+                  {{ district.value.districtData?.districtNumber }}
+                </span>
+                <span class="d-none d-md-inline">-</span>
+                <span class="d-block d-md-inline institute-name">
+                  {{ district.value.districtData?.displayName }}
+                </span>
               </h1>
             </v-row>
             <v-row no-gutters justify="space-between">

From 8f18a27c42b95a4b9ebcf1725dae15f85d323c52 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 9 Apr 2024 14:44:20 -0700
Subject: [PATCH 13/24] Fixed .find error in district router and spaces around
 district title in template

---
 backend/src/routes/district-router.js | 87 ++++++++++++++++++---------
 frontend/src/views/DistrictView.vue   |  2 +-
 2 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/backend/src/routes/district-router.js b/backend/src/routes/district-router.js
index 8df54a90..a2d9c392 100644
--- a/backend/src/routes/district-router.js
+++ b/backend/src/routes/district-router.js
@@ -7,8 +7,22 @@ const axios = require("axios");
 const fs = require("fs");
 const path = require("path");
 const { checkToken } = require("../components/auth");
-const { listCache} = require("../components/cache");
-const {addFundingGroups, getArrayofPubliclyAvailableCodes,filterRemoveByField, filterByExpiryDate, getArrayofNonPubliclyAvailableCodes, filterByField,appendMailingAddressDetailsAndRemoveAddresses, rearrangeAndRelabelObjectProperties, addDistrictLabels, normalizeJsonObject, sortJSONByDistrictNumber, removeFieldsByCriteria, filterByPubliclyAvailableCodes} = require("../components/utils.js")
+const { listCache } = require("../components/cache");
+const {
+  addFundingGroups,
+  getArrayofPubliclyAvailableCodes,
+  filterRemoveByField,
+  filterByExpiryDate,
+  getArrayofNonPubliclyAvailableCodes,
+  filterByField,
+  appendMailingAddressDetailsAndRemoveAddresses,
+  rearrangeAndRelabelObjectProperties,
+  addDistrictLabels,
+  normalizeJsonObject,
+  sortJSONByDistrictNumber,
+  removeFieldsByCriteria,
+  filterByPubliclyAvailableCodes,
+} = require("../components/utils.js");
 
 //Batch Routes
 router.get("/all-contacts", checkToken, getAllDistrictContacts);
@@ -33,7 +47,7 @@ function addContactTypeLabels(districtDataResponse, nonPublicContactTypeCodes) {
     Array.isArray(updatedDistrictData.contacts)
   ) {
     updatedDistrictData.contacts.forEach((contact) => {
-      const matchingType = nonPublicContactTypeCodes.find(
+      const matchingType = nonPublicContactTypeCodes?.find(
         (codeObj) =>
           codeObj.districtContactTypeCode === contact.districtContactTypeCode
       );
@@ -381,13 +395,13 @@ async function getDistrict(req, res) {
     });
 
     const contactTypeCodes = await getDistrictCodes(req);
-    const schoolCategoryCodes = await listCache.get("categoryCodes")
-    const facilityCodes = await listCache.get("facilityCodes")
-    const fundingGroups = await listCache.get("fundingGroups")
-    const districtContactCodeTypes = await listCache.get("codesList")
-    const nonPublicContactTypeCodes = getNonPublicContactTypeCodes(contactTypeCodes);
-    
-    
+    const schoolCategoryCodes = await listCache.get("categoryCodes");
+    const facilityCodes = await listCache.get("facilityCodes");
+    const fundingGroups = await listCache.get("fundingGroups");
+    const districtContactCodeTypes = await listCache.get("codesList");
+    const nonPublicContactTypeCodes =
+      getNonPublicContactTypeCodes(contactTypeCodes);
+
     const districtDataPublic = removeContacts(
       districtDataResponse.data,
       nonPublicContactTypeCodes
@@ -408,28 +422,43 @@ async function getDistrict(req, res) {
       districtDataPublicWithLabels.contacts
     );
 
-    districtSchoolsResponse.data.content = normalizeJsonObject(districtSchoolsResponse.data.content, schoolCategoryCodes, "schoolCategoryCode",  null, ["label", "description"]);
-    districtSchoolsResponse.data.content = normalizeJsonObject(districtSchoolsResponse.data.content, facilityCodes, "faciltyTypeCode",  null, ["label", "description"]);
-   districtSchoolsResponse.data.content = addFundingGroups(districtSchoolsResponse.data.content, fundingGroups)
+    districtSchoolsResponse.data.content = normalizeJsonObject(
+      districtSchoolsResponse.data.content,
+      schoolCategoryCodes,
+      "schoolCategoryCode",
+      null,
+      ["label", "description"]
+    );
+    districtSchoolsResponse.data.content = normalizeJsonObject(
+      districtSchoolsResponse.data.content,
+      facilityCodes,
+      "faciltyTypeCode",
+      null,
+      ["label", "description"]
+    );
+    districtSchoolsResponse.data.content = addFundingGroups(
+      districtSchoolsResponse.data.content,
+      fundingGroups
+    );
 
-   const today = new Date();
-   const filteredSchoolsResponse = districtSchoolsResponse.data.content.filter(
-     (obj) => {
-       // if openedDate is a valid date is less than today, keep the object
-       const openedDate = new Date(obj.openedDate);
+    const today = new Date();
+    const filteredSchoolsResponse = districtSchoolsResponse.data.content.filter(
+      (obj) => {
+        // if openedDate is a valid date is less than today, keep the object
+        const openedDate = new Date(obj.openedDate);
 
-       // If closedDate is a valid date greater than today, keep the object
-       const closedDate = new Date(obj.closedDate);
+        // If closedDate is a valid date greater than today, keep the object
+        const closedDate = new Date(obj.closedDate);
 
-       // return obj IF closedDate does not exist OR is after than current date
-       // AND openedDate exists AND is before current date
-       return (
-         (!obj.closedDate || closedDate > today) &&
-         obj.openedDate &&
-         openedDate < today
-       );
-     }
-   );
+        // return obj IF closedDate does not exist OR is after than current date
+        // AND openedDate exists AND is before current date
+        return (
+          (!obj.closedDate || closedDate > today) &&
+          obj.openedDate &&
+          openedDate < today
+        );
+      }
+    );
     const districtJSON = {
       districtData: districtDataPublicWithLabels,
       districtSchools: filteredSchoolsResponse,
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index e6276aca..1d80216c 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -201,7 +201,7 @@ onMounted(async () => {
                 <span>
                   {{ district.value.districtData?.districtNumber }}
                 </span>
-                <span class="d-none d-md-inline">-</span>
+                <span class="d-none d-md-inline"> - </span>
                 <span class="d-block d-md-inline institute-name">
                   {{ district.value.districtData?.displayName }}
                 </span>

From b3cb18c9e07c8115c887b8e25413779cfab9debd Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 9 Apr 2024 15:59:27 -0700
Subject: [PATCH 14/24] visual fixes for district and authority views

---
 frontend/src/views/AuthorityView.vue | 15 +++++-----
 frontend/src/views/DistrictView.vue  | 42 +++++++++++++++++-----------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index ed0448ca..a325fa54 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -216,8 +216,9 @@ onMounted(async () => {
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
-          <v-col cols="11" md="auto">
-            <h1 class="mt-3 mb-2">
+          <v-col cols="12">
+            <h1 class="mt-1 mt-md-3 mb-6 mb-md-2">
+              <span class="d-inline d-md-none">Authority </span>
               <span>
                 {{ authority.value.authorityData?.authorityNumber }}
               </span>
@@ -226,17 +227,17 @@ onMounted(async () => {
                 {{ authority.value.authorityData?.displayName }}
               </span>
             </h1>
-            <v-row v-if="authority.value.authorityData">
+            <v-row v-if="authority.value.authorityData" justify="space-between">
               <v-col cols="11" md="auto">
-                <p>
+                <p v-if="authority.value.authorityData?.phoneNumber">
                   <strong>Phone:</strong>
                   {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
                 </p>
-                <p>
+                <p v-if="authority.value.authorityData?.faxNumber">
                   <strong>Fax:</strong>
                   {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
                 </p>
-                <p>
+                <p v-if="authority.value.authorityData?.email">
                   <strong>Email: </strong>
                   <a :href="'mailto:' + authority.value.authorityData?.email">{{
                     authority.value.authorityData?.email
@@ -251,7 +252,7 @@ onMounted(async () => {
               >
                 <DisplayAddress v-bind="item" />
               </v-col>
-              <v-col cols="11" md="4">
+              <v-col cols="11" md="4" class="pa-0 pa-md-3">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 1d80216c..715a50b5 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -195,29 +195,37 @@ onMounted(async () => {
       <v-container id="main">
         <DisplayAlert class="mx-4 mx-md-0" />
         <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
-          <v-col cols="11" md="auto" v-if="district.value.districtData">
-            <v-row no-gutters>
-              <h1 class="mt-3 mb-2">
-                <span>
-                  {{ district.value.districtData?.districtNumber }}
-                </span>
-                <span class="d-none d-md-inline"> - </span>
-                <span class="d-block d-md-inline institute-name">
-                  {{ district.value.districtData?.displayName }}
-                </span>
-              </h1>
+          <v-col cols="12" v-if="district.value.districtData">
+            <v-row no-gutters justify="space-between">
+              <v-col>
+                <h1 class="mt-1 mt-md-3 mb-6 mb-md-2">
+                  <span class="d-inline d-md-none">District </span>
+                  <span>
+                    {{ district.value.districtData?.districtNumber }}
+                  </span>
+                  <span class="d-none d-md-inline"> - </span>
+                  <span class="d-block d-md-inline institute-name">
+                    {{ district.value.districtData?.displayName }}
+                  </span>
+                </h1>
+              </v-col>
             </v-row>
             <v-row no-gutters justify="space-between">
-              <v-col cols="11" md="auto">
-                <p>
+              <v-col cols="11" md="auto" class="mb-4">
+                <p v-if="district.value.districtData?.phoneNumber">
                   <strong>Phone:</strong>
                   {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
                 </p>
-                <p>
+                <p v-if="district.value.districtData?.faxNumber">
                   <strong>Fax:</strong>
                   {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
                 </p>
-                <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
+                <p v-if="district.value.districtData?.email">
+                  <strong>Email: </strong
+                  ><a :href="'mailto:' + district.value.districtData?.email">{{
+                    district.value.districtData?.email
+                  }}</a>
+                </p>
                 <p>
                   <a :href="district.value.districtData?.website">{{
                     district.value.districtData?.website
@@ -231,10 +239,10 @@ onMounted(async () => {
                 v-for="item in district.value.districtData.addresses"
                 :key="item.addressTypeCode"
               >
-                <DisplayAddress v-bind="item" />
+                <DisplayAddress v-bind="item" class="mb-3" />
               </v-col>
 
-              <v-col cols="11" md="4">
+              <v-col cols="11" md="4" class="pa-0 pa-md-3">
                 <v-btn
                   variant="text"
                   class="text-none text-subtitle-1 ma-1 v-btn-align-left"

From d54c056f98b288df93e5ea4e18df8c191512e2fe Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Wed, 17 Apr 2024 16:24:19 -0700
Subject: [PATCH 15/24] Added contact type to district contacts extract

---
 frontend/src/views/DistrictView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 715a50b5..cb30b98e 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -148,6 +148,7 @@ onMounted(async () => {
         return {
           'District Number': response.data.districtData?.districtNumber,
           'District Name': response.data.districtData?.displayName,
+          'Contact Type': item.label,
           'Job Title': item.jobTitle,
           'First Name': item.firstName,
           'Last Name': item.lastName,

From 188346356613945cb9a71274a95ea981ab5b6d32 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Fri, 19 Apr 2024 08:28:03 -0700
Subject: [PATCH 16/24] fixes to mid-sized displays

---
 frontend/src/assets/main.css             | 14 ++++++++------
 frontend/src/components/SchoolSelect.vue |  6 +++---
 frontend/src/views/AuthorityView.vue     |  4 ++--
 frontend/src/views/DistrictView.vue      |  4 ++--
 frontend/src/views/SchoolView.vue        |  9 +++++++--
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index e3a9a284..59a5f718 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -70,16 +70,18 @@ button.link-btn, .link-btn .v-btn__content {
   justify-content: normal !important;
 }
 
-@media (max-width: 768px) {
-  #app {
-    /* min-width: 600px; */
-    padding: 0; /* Adjust as needed */
-  }
-
+@media (max-width: 1024px) {
   .full-width {
     margin-left: unset;
     margin-right: unset;
   }
+}
+
+@media (max-width: 960px) {
+  #app {
+    /* min-width: 600px; */
+    padding: 0; /* Adjust as needed */
+  }
 
   .breadcrumbs {
     margin: 0;
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index b9045158..f9baa2fd 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -43,7 +43,7 @@ function goToSchoolSearch() {
             src="@/assets/images/BCMapGraphic.png"
             alt="Map of British Columbia"
             style="height: 268px; position: absolute; top: 170px; left: -80px"
-            class="d-none d-md-block"
+            class="d-none d-lg-block"
           />
         </v-col>
         <v-col cols="10" md="8" xl="6" class="ml-0 py-6 school-search">
@@ -74,7 +74,7 @@ function goToSchoolSearch() {
             </v-col>
           </v-row>
           <v-row>
-            <v-col class="px-0 py-4 py-md-0 my-md-1">
+            <v-col cols="12" md="4" class="px-0 py-4 py-md-0 my-md-1">
               <v-btn
                 block
                 color="bcGovBlue"
@@ -86,7 +86,7 @@ function goToSchoolSearch() {
               >
             </v-col>
             <v-spacer class="d-none d-md-block" />
-            <v-col class="px-0 py-4 py-md-0 my-md-1">
+            <v-col cols="12" md="4" class="px-0 py-4 py-md-0 my-md-1">
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
           </v-row>
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index a325fa54..34c20369 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -214,8 +214,8 @@ onMounted(async () => {
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert class="mx-4 mx-md-0" />
-        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
+        <DisplayAlert class="mx-4 mx-lg-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-5 pa-lg-0">
           <v-col cols="12">
             <h1 class="mt-1 mt-md-3 mb-6 mb-md-2">
               <span class="d-inline d-md-none">Authority </span>
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 715a50b5..23337bd2 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -193,8 +193,8 @@ onMounted(async () => {
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
       <v-container id="main">
-        <DisplayAlert class="mx-4 mx-md-0" />
-        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
+        <DisplayAlert class="mx-4 mx-lg-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-5 pa-lg-0">
           <v-col cols="12" v-if="district.value.districtData">
             <v-row no-gutters justify="space-between">
               <v-col>
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index e04e535d..883df15c 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -239,8 +239,13 @@ function goToDistrict() {
       class="pt-6 pb-0 pb-md-6 full-width"
     >
       <v-container id="main">
-        <DisplayAlert class="mx-4 mx-md-0" />
-        <v-row v-if="schoolData.value" no-gutters justify="space-between" class="pa-4 pa-md-0">
+        <DisplayAlert class="mx-4 mx-lg-1 mx-xl-0" />
+        <v-row
+          v-if="schoolData.value"
+          no-gutters
+          justify="space-between"
+          class="pa-4 pa-md-5 pa-lg-0"
+        >
           <v-col cols="11" md="12">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">

From 761d80da2806a187a01f6037b722e37d9abbd99c Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 23 Apr 2024 09:01:33 -0700
Subject: [PATCH 17/24] fixed district router sometimes failing on .find()

---
 backend/src/components/utils.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/src/components/utils.js b/backend/src/components/utils.js
index d65d976f..7796d3e2 100644
--- a/backend/src/components/utils.js
+++ b/backend/src/components/utils.js
@@ -77,7 +77,7 @@ function removeFieldsByCriteria(inputData, criteria) {
 }
 function appendMailingAddressDetailsAndRemoveAddresses(data) {
   if (data && data.addresses && data.addresses.length > 0) {
-    const physicalAddress = data.addresses.find(
+    const physicalAddress = data.addresses?.find(
       (address) => address.addressTypeCode === "PHYSICAL"
     );
     if (physicalAddress) {
@@ -101,7 +101,7 @@ function appendMailingAddressDetailsAndRemoveAddresses(data) {
 
       // Remove the "addresses" property
     }
-    const courierAddress = data.addresses.find(
+    const courierAddress = data.addresses?.find(
       (address) => address.addressTypeCode === "MAILING"
     );
     if (courierAddress) {
@@ -132,7 +132,7 @@ function appendMailingAddressDetailsAndRemoveAddresses(data) {
 function addDistrictLabels(jsonData, districtList) {
   if (jsonData.content && Array.isArray(jsonData.content)) {
     jsonData.content.forEach((dataItem) => {
-      const district = districtList.find(
+      const district = districtList?.find(
         (item) => item.districtId === dataItem.districtId
       );
       if (district) {
@@ -229,7 +229,7 @@ function normalizeJsonObject(
   includeFields
 ) {
   return sourceArray.map((item) => {
-    const matchingItem = referenceArray.find(
+    const matchingItem = referenceArray?.find(
       (info) =>
         info[matchKey] === item[matchKey] && (!condition || condition(info))
     );
@@ -402,7 +402,7 @@ function createSchoolCache(schoolData, schoolGrades) {
     });
 
     // Extract and format principal contact information if it exists
-    const principalContact = school.contacts.find(
+    const principalContact = school.contacts?.find(
       (contact) => contact.schoolContactTypeCode === "PRINCIPAL"
     );
     if (principalContact) {

From 52ef152d81f4809b2b12f8bbba95b9497b60a752 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Tue, 23 Apr 2024 10:25:42 -0700
Subject: [PATCH 18/24] update ZAP scan version

---
 .github/workflows/build-n-deploy-backend-to-ocp-dev.yml | 2 +-
 .github/workflows/deploy-to.openshift-prod.yml          | 2 +-
 .github/workflows/deploy-to.openshift-test.yml          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml b/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
index a8ea8b52..28bb0752 100644
--- a/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
+++ b/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
@@ -204,6 +204,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"
diff --git a/.github/workflows/deploy-to.openshift-prod.yml b/.github/workflows/deploy-to.openshift-prod.yml
index a3d155a9..7b33dddd 100644
--- a/.github/workflows/deploy-to.openshift-prod.yml
+++ b/.github/workflows/deploy-to.openshift-prod.yml
@@ -143,6 +143,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"
diff --git a/.github/workflows/deploy-to.openshift-test.yml b/.github/workflows/deploy-to.openshift-test.yml
index fbdd2460..47dbbd26 100644
--- a/.github/workflows/deploy-to.openshift-test.yml
+++ b/.github/workflows/deploy-to.openshift-test.yml
@@ -143,6 +143,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"

From 66f221c2d9dc473852ee1e62d15879f9c25277af Mon Sep 17 00:00:00 2001
From: Tang <Michael.Tang@gov.bc.ca>
Date: Thu, 25 Apr 2024 14:27:20 -0700
Subject: [PATCH 19/24] hd24076 fixes

---
 frontend/src/views/ContactsView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index 7be1d265..2a5cd805 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -214,7 +214,6 @@ onMounted(() => {
         :headers="headers"
         :items="filteredContacts"
         class="elevation-1"
-        height="700"
         item-value="name"
         :sort-by="[{ key: 'districtNumber', order: 'asc' }]"
       ></v-data-table-virtual>

From f4517a93eb0a9075d99098c6e0f3d7aef24ba2b9 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Mon, 29 Apr 2024 13:39:41 -0700
Subject: [PATCH 20/24] add check

---
 frontend/src/utils/common.ts        |   5 +
 frontend/src/views/DistrictView.vue | 182 ++++++++++++++--------------
 2 files changed, 98 insertions(+), 89 deletions(-)

diff --git a/frontend/src/utils/common.ts b/frontend/src/utils/common.ts
index a3459726..f00bbbfd 100644
--- a/frontend/src/utils/common.ts
+++ b/frontend/src/utils/common.ts
@@ -13,3 +13,8 @@ export function useSanitizeURL(input: string | String): String {
     input = input.toLowerCase().replace(/^a-zA-Z0-9 ]/g, '')
     return input
 }
+
+/** VALIDATION FUNCTIONS */
+export function isValidDistrictNumber(input: string | String | number): boolean {
+    return !!input && input.toString().length === 3 && /^\d+$/.test(input.toString());
+}
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 88203020..833ce3da 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -4,7 +4,7 @@ import { ref, reactive, onMounted, computed, toValue } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useRoute } from 'vue-router'
 import router from '@/router'
-import { formatPhoneNumber } from '@/utils/common'
+import { formatPhoneNumber, isValidDistrictNumber } from '@/utils/common'
 import type { District, School, Grade, Address, Contact } from '@/types/types.d.ts'
 import jsonexport from 'jsonexport/dist'
 import { useSanitizeURL } from '@/composables/string'
@@ -78,97 +78,101 @@ function downloadDistrictSchools() {
 onMounted(async () => {
   const route = useRoute()
   // Set the districtId inside the onMounted hook; null if districtId not found
-  districtId.value =
-    appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
+  if (isValidDistrictNumber(String(route.params.districtNumber))) {
+    districtId.value =
+      appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
+  }
   // get district data
-  try {
-    const response = await InstituteService.getDistrictView(districtId.value as string)
-    if (response.data?.districtData?.contacts) {
-      district.value = response.data
-      contacts.value = response.data?.districtData?.contacts
-      schools.value = district.value?.districtSchools
+  if (!!districtId.value) {
+    try {
+      const response = await InstituteService.getDistrictView(districtId.value as string)
+      if (response.data?.districtData?.contacts) {
+        district.value = response.data
+        contacts.value = response.data?.districtData?.contacts
+        schools.value = district.value?.districtSchools
 
-      //Change School date for DL
-      const transformedSchoolData = schools.value.map((school: School) => {
-        const { contacts, addresses, ...rest } = school
-        const transformedContacts = contacts.map(({ schoolContactTypeCode, ...contactRest }) => ({
-          schoolContactTypeCode,
-          ...contactRest
-        }))
-        const physicalAddress = addresses.find(
-          (address: Address) => address?.addressTypeCode === 'PHYSICAL'
-        )
-        const mailingAddress = addresses.find(
-          (address: Address) => address?.addressTypeCode === 'MAILING'
-        )
-        return {
-          ...rest,
-          contacts: transformedContacts.reduce((acc, contact) => ({ ...acc, ...contact }), {}),
-          physicalAddress: physicalAddress,
-          mailingAddress: mailingAddress,
-          grades: [],
-          neighborhoodLearning: [],
-          schoolMove: []
-        }
-      })
-      //Change School data for DL
-      filteredSchools.value = transformedSchoolData.map((item: any) => {
-        return {
-          'District Number': response.data.districtData.districtNumber,
-          Mincode: item.mincode,
-          'Display Name': item.displayName,
-          'Mailing Address': item.mailingAddress?.addressLine1,
-          'Mailing Address Line2': item.mailingAddress?.addressLine2,
-          'Mailing Address City': item.mailingAddress?.city,
-          'Mailing Address Province': item.mailingAddress?.provinceCode,
-          'Mailing Address PostalCode': item.mailingAddress?.postal,
-          'Physical Address': item.physicalAddress?.addressLine1,
-          'Physical Address Line2': item.physicalAddress?.addressLine2,
-          'Physical Address City': item.physicalAddress?.city,
-          'Physical Address Province': item.physicalAddress?.provinceCode,
-          'Physical Address Postal Code': item.physicalAddress?.postal,
-          Role: item.contacts?.jobTitle,
-          'Contact First Name': item.contacts?.firstName,
-          'Contact Last Name': item.contacts?.lastName,
-          'Contact Phone Extension': item.contacts?.phoneExtension,
-          'Contact Phone Number': item.contacts?.phoneNumber,
-          'Facility Type Code': appStore.getFacilityCodeLabel(item.facilityTypeCode),
-          'School Category Code': appStore.getCategoryCodeLabel(item.schoolCategoryCode),
-          'Phone Number': item.phoneNumber,
-          Fax: item.faxNumber,
-          Email: item.email,
-          Website: item.website,
-          'Group Classification Primary K-3': item.primaryK3,
-          'Group Classification Elementary 4-7 EU': item.elementary47,
-          'Group Classification Junior Secondary 8-10 SU': item.juniorSecondary810,
-          'Group Classification Senior Secondary 11-12': item.seniorSecondary1112
-        }
-      })
-      filteredContacts.value = contacts.value.map((item: any) => {
-        return {
-          'District Number': response.data.districtData?.districtNumber,
-          'District Name': response.data.districtData?.displayName,
-          'Contact Type': item.label,
-          'Job Title': item.jobTitle,
-          'First Name': item.firstName,
-          'Last Name': item.lastName,
-          'Phone Number': item.phoneNumber,
-          'Phone Extension': item.phoneExtension,
-          'Alternate Phone Number': item.alternatePhoneNumber,
-          'Alternate Phone Extension': item.alternatePhoneExtension,
-          Email: item.email,
-          'Mailing Address': response.data.districtData?.addresses[0].addressLine1,
-          'Mailing City': response.data.districtData?.addresses[0].city,
-          'Mailing Province': response.data.districtData?.addresses[0].provinceCode,
-          'Mailing Postal Code': response.data.districtData?.addresses[0].postal,
-          'District Phone': response.data.districtData?.phoneNumber,
-          'District Fax': response.data.districtData?.faxNumber,
-          Website: response.data.districtData?.website
-        }
-      })
+        //Change School date for DL
+        const transformedSchoolData = schools.value.map((school: School) => {
+          const { contacts, addresses, ...rest } = school
+          const transformedContacts = contacts.map(({ schoolContactTypeCode, ...contactRest }) => ({
+            schoolContactTypeCode,
+            ...contactRest
+          }))
+          const physicalAddress = addresses.find(
+            (address: Address) => address?.addressTypeCode === 'PHYSICAL'
+          )
+          const mailingAddress = addresses.find(
+            (address: Address) => address?.addressTypeCode === 'MAILING'
+          )
+          return {
+            ...rest,
+            contacts: transformedContacts.reduce((acc, contact) => ({ ...acc, ...contact }), {}),
+            physicalAddress: physicalAddress,
+            mailingAddress: mailingAddress,
+            grades: [],
+            neighborhoodLearning: [],
+            schoolMove: []
+          }
+        })
+        //Change School data for DL
+        filteredSchools.value = transformedSchoolData.map((item: any) => {
+          return {
+            'District Number': response.data.districtData.districtNumber,
+            Mincode: item.mincode,
+            'Display Name': item.displayName,
+            'Mailing Address': item.mailingAddress?.addressLine1,
+            'Mailing Address Line2': item.mailingAddress?.addressLine2,
+            'Mailing Address City': item.mailingAddress?.city,
+            'Mailing Address Province': item.mailingAddress?.provinceCode,
+            'Mailing Address PostalCode': item.mailingAddress?.postal,
+            'Physical Address': item.physicalAddress?.addressLine1,
+            'Physical Address Line2': item.physicalAddress?.addressLine2,
+            'Physical Address City': item.physicalAddress?.city,
+            'Physical Address Province': item.physicalAddress?.provinceCode,
+            'Physical Address Postal Code': item.physicalAddress?.postal,
+            Role: item.contacts?.jobTitle,
+            'Contact First Name': item.contacts?.firstName,
+            'Contact Last Name': item.contacts?.lastName,
+            'Contact Phone Extension': item.contacts?.phoneExtension,
+            'Contact Phone Number': item.contacts?.phoneNumber,
+            'Facility Type Code': appStore.getFacilityCodeLabel(item.facilityTypeCode),
+            'School Category Code': appStore.getCategoryCodeLabel(item.schoolCategoryCode),
+            'Phone Number': item.phoneNumber,
+            Fax: item.faxNumber,
+            Email: item.email,
+            Website: item.website,
+            'Group Classification Primary K-3': item.primaryK3,
+            'Group Classification Elementary 4-7 EU': item.elementary47,
+            'Group Classification Junior Secondary 8-10 SU': item.juniorSecondary810,
+            'Group Classification Senior Secondary 11-12': item.seniorSecondary1112
+          }
+        })
+        filteredContacts.value = contacts.value.map((item: any) => {
+          return {
+            'District Number': response.data.districtData?.districtNumber,
+            'District Name': response.data.districtData?.displayName,
+            'Contact Type': item.label,
+            'Job Title': item.jobTitle,
+            'First Name': item.firstName,
+            'Last Name': item.lastName,
+            'Phone Number': item.phoneNumber,
+            'Phone Extension': item.phoneExtension,
+            'Alternate Phone Number': item.alternatePhoneNumber,
+            'Alternate Phone Extension': item.alternatePhoneExtension,
+            Email: item.email,
+            'Mailing Address': response.data.districtData?.addresses[0].addressLine1,
+            'Mailing City': response.data.districtData?.addresses[0].city,
+            'Mailing Province': response.data.districtData?.addresses[0].provinceCode,
+            'Mailing Postal Code': response.data.districtData?.addresses[0].postal,
+            'District Phone': response.data.districtData?.phoneNumber,
+            'District Fax': response.data.districtData?.faxNumber,
+            Website: response.data.districtData?.website
+          }
+        })
+      }
+    } catch (error) {
+      console.error(error)
     }
-  } catch (error) {
-    console.error(error)
   }
   // get district contact type codes
   // try {

From 045ba8c66cbf384f8097858156acbef2b2de154e Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Fri, 3 May 2024 12:03:13 -0700
Subject: [PATCH 21/24] backend fixes for async issues

---
 backend/src/routes/district-router.js  |  71 ++--
 backend/src/routes/institute-router.js | 494 +++++++++++++++----------
 frontend/src/stores/app.ts             |  28 +-
 frontend/src/views/DistrictView.vue    |   9 +-
 4 files changed, 355 insertions(+), 247 deletions(-)

diff --git a/backend/src/routes/district-router.js b/backend/src/routes/district-router.js
index a2d9c392..944d32e3 100644
--- a/backend/src/routes/district-router.js
+++ b/backend/src/routes/district-router.js
@@ -244,13 +244,14 @@ async function getAllDistrictContacts(req, res) {
     let sortedData = sortJSONByDistrictNumber(filteredData);
     res.json(sortedData);
   } catch (e) {
+    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
 
 async function getAllDistrictMailing(req, res) {
   const districtList = await listCache.get("districtlist");
-  const contactTypeCodes = await listCache.get("codesList");
+  //const contactTypeCodes = await listCache.get("codesList");
 
   const propertyOrder = [
     { property: "districtId_districtNumber", label: "District Number" },
@@ -325,6 +326,7 @@ async function getAllDistrictMailing(req, res) {
     res.json(contentByDistrict);
     //res.json(districtContactsReorderedAndRelabeled );
   } catch (e) {
+    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
@@ -399,8 +401,9 @@ async function getDistrict(req, res) {
     const facilityCodes = await listCache.get("facilityCodes");
     const fundingGroups = await listCache.get("fundingGroups");
     const districtContactCodeTypes = await listCache.get("codesList");
-    const nonPublicContactTypeCodes =
-      getNonPublicContactTypeCodes(contactTypeCodes);
+    const nonPublicContactTypeCodes = await getNonPublicContactTypeCodes(
+      contactTypeCodes
+    );
 
     const districtDataPublic = removeContacts(
       districtDataResponse.data,
@@ -410,36 +413,37 @@ async function getDistrict(req, res) {
       districtDataPublic,
       contactTypeCodes
     );
-    districtDataPublicWithLabels.contacts = filterByPubliclyAvailableCodes(
-      districtDataPublicWithLabels.contacts,
-      "districtContactTypeCode",
-      getArrayofPubliclyAvailableCodes(
-        districtContactCodeTypes.codesList.districtContactTypeCodes,
-        "districtContactTypeCode"
-      )
-    );
-    districtDataPublicWithLabels.contacts = filterByExpiryDate(
-      districtDataPublicWithLabels.contacts
-    );
-
-    districtSchoolsResponse.data.content = normalizeJsonObject(
-      districtSchoolsResponse.data.content,
-      schoolCategoryCodes,
-      "schoolCategoryCode",
-      null,
-      ["label", "description"]
-    );
-    districtSchoolsResponse.data.content = normalizeJsonObject(
-      districtSchoolsResponse.data.content,
-      facilityCodes,
-      "faciltyTypeCode",
-      null,
-      ["label", "description"]
-    );
-    districtSchoolsResponse.data.content = addFundingGroups(
-      districtSchoolsResponse.data.content,
-      fundingGroups
-    );
+    if (!!districtContactCodeTypes) {
+      districtDataPublicWithLabels.contacts = filterByPubliclyAvailableCodes(
+        districtDataPublicWithLabels.contacts,
+        "districtContactTypeCode",
+        getArrayofPubliclyAvailableCodes(
+          districtContactCodeTypes.codesList.districtContactTypeCodes,
+          "districtContactTypeCode"
+        )
+      );
+      districtDataPublicWithLabels.contacts = filterByExpiryDate(
+        districtDataPublicWithLabels.contacts
+      );
+      districtSchoolsResponse.data.content = normalizeJsonObject(
+        districtSchoolsResponse.data.content,
+        schoolCategoryCodes,
+        "schoolCategoryCode",
+        null,
+        ["label", "description"]
+      );
+      districtSchoolsResponse.data.content = normalizeJsonObject(
+        districtSchoolsResponse.data.content,
+        facilityCodes,
+        "faciltyTypeCode",
+        null,
+        ["label", "description"]
+      );
+      districtSchoolsResponse.data.content = addFundingGroups(
+        districtSchoolsResponse.data.content,
+        fundingGroups
+      );
+    }
 
     const today = new Date();
     const filteredSchoolsResponse = districtSchoolsResponse.data.content.filter(
@@ -467,6 +471,7 @@ async function getDistrict(req, res) {
     res.json(districtJSON);
     log.info(req.url);
   } catch (e) {
+    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
diff --git a/backend/src/routes/institute-router.js b/backend/src/routes/institute-router.js
index 2b0ebf95..a87404e4 100644
--- a/backend/src/routes/institute-router.js
+++ b/backend/src/routes/institute-router.js
@@ -5,28 +5,69 @@ const config = require("../config/index");
 
 const axios = require("axios");
 const { checkToken } = require("../components/auth");
-const {filterByOpenedAndClosedDate, formatGrades, removeFieldsByCriteria, createList, addDistrictLabels, districtNumberSort, isAllowedSchoolCategory, filterRemoveByField, filterByField } = require("../components/utils");
+const {
+  filterByOpenedAndClosedDate,
+  formatGrades,
+  removeFieldsByCriteria,
+  createList,
+  addDistrictLabels,
+  districtNumberSort,
+  isAllowedSchoolCategory,
+  filterRemoveByField,
+  filterByField,
+} = require("../components/utils");
 const { listCache, codeCache } = require("../components/cache");
 
-const schoolListOptions = { fields: ["mincode", "displayName", "schoolId", "closedDate", "openedDate","schoolCategoryCode"], fieldToInclude: null, valueToInclude: null, sortField: "mincode" };
-const districtListOptions = { fields: ["displayName", "districtId","districtNumber", "closedDate"] ,fieldToInclude: "districtStatusCode", valueToInclude: "ACTIVE", sortField: "districtNumber"};
-const authorityListOptions = { fields: ["displayName", "authorityNumber","independentAuthorityId", "closedDate", "opendDate"], sortField: "authorityNumber" };
-const openSchoolListOptions = { fields: [
-  "schoolId",
-  "districtId",
-  "mincode",
-  "schoolNumber",
-  "faxNumber",
-  "phoneNumber",
-  "email",
-  "website",
-  "displayName",
-  "schoolCategoryCode",
-  "facilityTypeCode",
-  "openedDate",
-  "closedDate",
-  "districtNumber"
-],fieldToInclude: "closedDate", valueToInclude: null, sortField: "mincode" };
+const schoolListOptions = {
+  fields: [
+    "mincode",
+    "displayName",
+    "schoolId",
+    "closedDate",
+    "openedDate",
+    "schoolCategoryCode",
+  ],
+  fieldToInclude: null,
+  valueToInclude: null,
+  sortField: "mincode",
+};
+const districtListOptions = {
+  fields: ["displayName", "districtId", "districtNumber", "closedDate"],
+  fieldToInclude: "districtStatusCode",
+  valueToInclude: "ACTIVE",
+  sortField: "districtNumber",
+};
+const authorityListOptions = {
+  fields: [
+    "displayName",
+    "authorityNumber",
+    "independentAuthorityId",
+    "closedDate",
+    "opendDate",
+  ],
+  sortField: "authorityNumber",
+};
+const openSchoolListOptions = {
+  fields: [
+    "schoolId",
+    "districtId",
+    "mincode",
+    "schoolNumber",
+    "faxNumber",
+    "phoneNumber",
+    "email",
+    "website",
+    "displayName",
+    "schoolCategoryCode",
+    "facilityTypeCode",
+    "openedDate",
+    "closedDate",
+    "districtNumber",
+  ],
+  fieldToInclude: "closedDate",
+  valueToInclude: null,
+  sortField: "mincode",
+};
 
 //Batch Routes
 router.get("/contact-type-codes", checkToken, getContactTypeCodes);
@@ -37,7 +78,7 @@ router.get("/authority/list", checkToken, getAuthorityList);
 router.get("/district/list", checkToken, getDistrictList);
 router.get("/district/contact/*", checkToken, getDistrictContactsAPI);
 router.get("/create-cache", checkToken, createCache);
-router.get("/category-codes", checkToken, getCategoryCodes);
+router.get("/category-codes", checkToken);
 
 router.get("/*", checkToken, getInstituteAPI);
 
@@ -47,9 +88,7 @@ async function createCache(req, res) {
 
     try {
       const fundingGroupsResponse = await axios.get(
-        `${config.get(
-          "server:schoolsAPIURL"
-        )}/schools/fundingGroups`,
+        `${config.get("server:schoolsAPIURL")}/schools/fundingGroups`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
@@ -70,10 +109,20 @@ async function createCache(req, res) {
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
-        const filteredNonbBCDistrictList = response.data.filter(district => ["098","102", "103"].includes(district.districtNumber));
-        const filteredDistrictList = response.data.filter(district => !["098","102", "103"].includes(district.districtNumber));
-        const districtList = createList(filteredDistrictList, districtListOptions);
-        const nonBCdistrictList = createList(filteredNonbBCDistrictList, districtListOptions);
+        const filteredNonbBCDistrictList = response.data.filter((district) =>
+          ["098", "102", "103"].includes(district.districtNumber)
+        );
+        const filteredDistrictList = response.data.filter(
+          (district) => !["098", "102", "103"].includes(district.districtNumber)
+        );
+        const districtList = createList(
+          filteredDistrictList,
+          districtListOptions
+        );
+        const nonBCdistrictList = createList(
+          filteredNonbBCDistrictList,
+          districtListOptions
+        );
 
         listCache.set("nonbcdistrictlist", nonBCdistrictList);
         listCache.set("districtlist", districtList);
@@ -86,31 +135,32 @@ async function createCache(req, res) {
           e.response ? e.response.status : e.message
         );
       });
-  } 
+  }
   if (!listCache.has("categoryCodes")) {
     //const codes = [];
-    
+
     try {
       const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
+        `${config.get("server:instituteAPIURL")}/institute/category-codes`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
+
+      categoryCodesResponse.data = filterRemoveByField(
+        categoryCodesResponse.data,
+        "schoolCategoryCode",
+        ["FED_BAND", "POST_SEC", "YUKON"]
+      );
       listCache.set("categoryCodes", categoryCodesResponse.data);
-      
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Category Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } else{
+  } else {
     const categoryCodes = await listCache.get("categoryCodes");
-    res.json(categoryCodes)
+    res.json(categoryCodes);
   }
   if (await !codeCache.has("gradelist")) {
     const url = `${config.get("server:instituteAPIURL")}/institute/grade-codes`; // Update the URL according to your API endpoint
@@ -118,7 +168,7 @@ async function createCache(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const gradeCodes = response.data;
-        
+
         codeCache.set("gradelist", gradeCodes);
         log.info(req.url);
       })
@@ -133,37 +183,34 @@ async function createCache(req, res) {
     res.json(gradeCodes);
   }
 
-  if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-    
-    try {
-      const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
-        {
-          headers: { Authorization: `Bearer ${req.accessToken}` },
-        }
-      );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
-      listCache.set("categoryCodes", categoryCodesResponse.data);
-      
-    } catch (error) {
-      const statusCode = error.response ? error.response.status : 500;
-      log.error("Category Code Caching Error", statusCode, error.message);
-      res.status(statusCode).send(error.message);
-    }
-  } 
-  
+  // if (!listCache.has("categoryCodes")) {
+
+  //   try {
+  //     const categoryCodesResponse = await axios.get(
+  //       `${config.get(
+  //         "server:instituteAPIURL"
+  //       )}/institute/category-codes`,
+  //       {
+  //         headers: { Authorization: `Bearer ${req.accessToken}` },
+  //       }
+  //     );
+
+  //     categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
+  //     listCache.set("categoryCodes", categoryCodesResponse.data);
+
+  //   } catch (error) {
+  //     const statusCode = error.response ? error.response.status : 500;
+  //     log.error("Category Code Caching Error", statusCode, error.message);
+  //     res.status(statusCode).send(error.message);
+  //   }
+  // }
+
   if (!listCache.has("facilityCodes")) {
     //const codes = [];
 
     try {
       const facilityCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/facility-codes`,
+        `${config.get("server:instituteAPIURL")}/institute/facility-codes`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
@@ -174,47 +221,52 @@ async function createCache(req, res) {
       log.error("Faility Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } 
+  }
   if (!listCache.has("districtAddresses")) {
     //const codes = [];
 
     try {
       const districtsResponse = await axios.get(
-        `${config.get("server:instituteAPIURL")}/institute/district/paginated?pageSize=200`,
+        `${config.get(
+          "server:instituteAPIURL"
+        )}/institute/district/paginated?pageSize=200`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
-      
+
       districtsResponse.data.content.forEach((district) => {
         district.addresses.forEach((address) => {
-          
           if (address.addressTypeCode === "MAILING") {
             Object.keys(address).forEach((field) => {
               // Exclude the specified fields
-              if (![
-                "createUser",
-                "updateUser",
-                "createDate",
-                "updateDate",
-                "schoolAddressId",
-                "schoolId",
-                "addressTypeCode"
-              ].includes(field)) {
+              if (
+                ![
+                  "createUser",
+                  "updateUser",
+                  "createDate",
+                  "updateDate",
+                  "schoolAddressId",
+                  "schoolId",
+                  "addressTypeCode",
+                ].includes(field)
+              ) {
                 district[`mailing_${field}`] = address[field];
               }
             });
           } else if (address.addressTypeCode === "PHYSICAL") {
             Object.keys(address).forEach((field) => {
-              if (![
-                "createUser",
-                "updateUser",
-                "createDate",
-                "updateDate",
-                "schoolAddressId",
-                "schoolId",
-                "addressTypeCode"
-              ].includes(field)) {
+              if (
+                ![
+                  "createUser",
+                  "updateUser",
+                  "createDate",
+                  "updateDate",
+                  "schoolAddressId",
+                  "schoolId",
+                  "addressTypeCode",
+                ].includes(field)
+              ) {
                 district[`physical_${field}`] = address[field];
               }
             });
@@ -227,8 +279,7 @@ async function createCache(req, res) {
       log.error("District Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } 
-
+  }
 
   if (await !listCache.has("codesList")) {
     try {
@@ -260,9 +311,18 @@ async function createCache(req, res) {
       );
 
       const codes = {
-        authorityContactTypeCodes: removeFieldsByCriteria(authorityContactTypeCodesResponse.data, [{ fieldToRemove: "publiclyAvailable", value: false }]),
-        districtContactTypeCodes: removeFieldsByCriteria(districtContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
-        schoolContactTypeCodes: removeFieldsByCriteria(schoolContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
+        authorityContactTypeCodes: removeFieldsByCriteria(
+          authorityContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        districtContactTypeCodes: removeFieldsByCriteria(
+          districtContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        schoolContactTypeCodes: removeFieldsByCriteria(
+          schoolContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
       };
       res.json(codes);
       listCache.set("codesList", { codesList: codes });
@@ -273,10 +333,8 @@ async function createCache(req, res) {
     }
   }
   res.status(200).json({ success: true });
-
 }
 
-
 async function getContactTypeCodes(req, res) {
   if (await !listCache.has("codesList")) {
     //const codes = [];
@@ -310,9 +368,18 @@ async function getContactTypeCodes(req, res) {
       );
 
       const codes = {
-        authorityContactTypeCodes: removeFieldsByCriteria(authorityContactTypeCodesResponse.data, [{ fieldToRemove: "publiclyAvailable", value: false }]),
-        districtContactTypeCodes: removeFieldsByCriteria(districtContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
-        schoolContactTypeCodes: removeFieldsByCriteria(schoolContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
+        authorityContactTypeCodes: removeFieldsByCriteria(
+          authorityContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        districtContactTypeCodes: removeFieldsByCriteria(
+          districtContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        schoolContactTypeCodes: removeFieldsByCriteria(
+          schoolContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
       };
       listCache.set("codesList", { codesList: codes });
       res.json(codes);
@@ -327,67 +394,72 @@ async function getContactTypeCodes(req, res) {
   }
 }
 async function getOffshoreSchoolList(req, res) {
-  
-  let currentDate = new Date().toISOString().substring(0, 19)
+  let currentDate = new Date().toISOString().substring(0, 19);
   const params = [
     {
-      condition: 'AND',
+      condition: "AND",
       searchCriteriaList: [
         {
-          key: 'schoolCategoryCode',
-          operation: 'eq',
+          key: "schoolCategoryCode",
+          operation: "eq",
           value: "OFFSHORE",
-          valueType: 'STRING',
-          condition: 'AND'
+          valueType: "STRING",
+          condition: "AND",
         },
         {
-          key: 'openedDate',
-          operation: 'lte',
+          key: "openedDate",
+          operation: "lte",
           value: currentDate,
-          valueType: 'DATE_TIME',
-          condition: 'AND'
-        }      
-      ]
+          valueType: "DATE_TIME",
+          condition: "AND",
+        },
+      ],
     },
     {
-      condition: 'AND',
+      condition: "AND",
       searchCriteriaList: [
         {
-          key: 'closedDate',
-          operation: 'eq',
+          key: "closedDate",
+          operation: "eq",
           value: null,
-          valueType: 'STRING',
-          condition: 'OR'
+          valueType: "STRING",
+          condition: "OR",
         },
         {
-          key: 'closedDate',
-          operation: 'gte',
+          key: "closedDate",
+          operation: "gte",
           value: currentDate,
-          valueType: 'DATE_TIME',
-          condition: 'OR'
-        }          
-      ]
-    }
+          valueType: "DATE_TIME",
+          condition: "OR",
+        },
+      ],
+    },
   ];
 
-  const jsonString = JSON.stringify(params)
-  const encodedParams = encodeURIComponent(jsonString)
-  
-  
+  const jsonString = JSON.stringify(params);
+  const encodedParams = encodeURIComponent(jsonString);
 
   if (await !listCache.has("offshoreschoollist")) {
-    const url = `${config.get('server:instituteAPIURL')}/institute/school/paginated?pageSize=1000&pageNumber=0&searchCriteriaList=${encodedParams}`;
+    const url = `${config.get(
+      "server:instituteAPIURL"
+    )}/institute/school/paginated?pageSize=1000&pageNumber=0&searchCriteriaList=${encodedParams}`;
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const offshoreSchoolList = response.data.content;
-        const schoolGrades =  codeCache.get("gradelist");
-        
+        const schoolGrades = codeCache.get("gradelist");
+
         for (let i = 0; i < offshoreSchoolList.length; i++) {
-          const formattedGrades = formatGrades(offshoreSchoolList[i].grades, schoolGrades);
-          offshoreSchoolList[i] = { ...offshoreSchoolList[i], ...formattedGrades };
+          const formattedGrades = formatGrades(
+            offshoreSchoolList[i].grades,
+            schoolGrades
+          );
+          offshoreSchoolList[i] = {
+            ...offshoreSchoolList[i],
+            ...formattedGrades,
+          };
           // Now you can use the updated offshoreSchoolList[i] object as needed
-      }
+        }
         res.json(offshoreSchoolList);
         listCache.set("offshoreschoollist", offshoreSchoolList);
         log.info(req.url);
@@ -404,41 +476,44 @@ async function getOffshoreSchoolList(req, res) {
   }
 }
 async function getAuthorityList(req, res) {
-
   if (await !listCache.has("authoritylist")) {
-
-    let currentDate = new Date().toISOString().substring(0, 19)
+    let currentDate = new Date().toISOString().substring(0, 19);
     const params = [
       {
         condition: null,
         searchCriteriaList: [
           {
-            key: 'closedDate',
-            operation: 'eq',
+            key: "closedDate",
+            operation: "eq",
             value: null,
-            valueType: 'STRING',
-            condition: 'OR'
+            valueType: "STRING",
+            condition: "OR",
           },
           {
-            key: 'closedDate',
-            operation: 'gte',
+            key: "closedDate",
+            operation: "gte",
             value: currentDate,
-            valueType: 'DATE_TIME',
-            condition: 'OR'
-          }          
-        ]
-      }
+            valueType: "DATE_TIME",
+            condition: "OR",
+          },
+        ],
+      },
     ];
-  
-    const jsonString = JSON.stringify(params)
-    const encodedParams = encodeURIComponent(jsonString)
-    
-    const url = `${config.get('server:instituteAPIURL')}/institute/authority/paginated?pageSize=1000&searchCriteriaList=${encodedParams}`;
+
+    const jsonString = JSON.stringify(params);
+    const encodedParams = encodeURIComponent(jsonString);
+
+    const url = `${config.get(
+      "server:instituteAPIURL"
+    )}/institute/authority/paginated?pageSize=1000&searchCriteriaList=${encodedParams}`;
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
-        const authorityList = createList(response.data.content, authorityListOptions);
-        
+        const authorityList = createList(
+          response.data.content,
+          authorityListOptions
+        );
+
         res.json(authorityList);
         listCache.set("authoritylist", authorityList);
         log.info(req.url);
@@ -454,43 +529,58 @@ async function getAuthorityList(req, res) {
     res.json(authorityList);
   }
 }
-async function getCategoryCodes(req, res) {
-   
-  if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-    
-    try {
-      const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
-        {
-          headers: { Authorization: `Bearer ${req.accessToken}` },
-        }
-      );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
-      listCache.set("categoryCodes", categoryCodesResponse.data);
-      
-    } catch (error) {
-      const statusCode = error.response ? error.response.status : 500;
-      log.error("Category Code Caching Error", statusCode, error.message);
-      res.status(statusCode).send(error.message);
-    }
-  } else{
-    const categoryCodes = await listCache.get("categoryCodes");
-    res.json(categoryCodes)
-  }
-}
+// async function getCategoryCodes(req, res) {
+//   if (!listCache.has("categoryCodes")) {
+//     //const codes = [];
+
+//     try {
+//       const categoryCodesResponse = await axios.get(
+//         `${config.get("server:instituteAPIURL")}/institute/category-codes`,
+//         {
+//           headers: { Authorization: `Bearer ${req.accessToken}` },
+//         }
+//       );
+
+//       categoryCodesResponse.data = filterRemoveByField(
+//         categoryCodesResponse.data,
+//         "schoolCategoryCode",
+//         ["FED_BAND", "POST_SEC", "YUKON"]
+//       );
+//       listCache.set("categoryCodes", categoryCodesResponse.data);
+//     } catch (error) {
+//       const statusCode = error.response ? error.response.status : 500;
+//       log.error("Category Code Caching Error", statusCode, error.message);
+//       res.status(statusCode).send(error.message);
+//     }
+//   } else {
+//     const categoryCodes = await listCache.get("categoryCodes");
+//     res.json(categoryCodes);
+//   }
+// }
 async function getSchoolList(req, res) {
   if (await !listCache.has("schoollist")) {
     const url = `${config.get("server:instituteAPIURL")}/institute/school`; // Update the URL according to your API endpoint
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
-        const openSchools = filterByOpenedAndClosedDate(response.data)
-        const validSchoolCategories = filterByField(openSchools, "schoolCategoryCode", ["POST_SEC", "YUKON", "SUMMER", "FED_BAND"])
-        const validSchoolFacilities = filterByField(validSchoolCategories, "facilityTypeCode", ['PROVINCIAL','DIST_CONT','ELEC_DELIV','POST_SEC','JUSTB4PRO','SUMMER'])
+        const openSchools = filterByOpenedAndClosedDate(response.data);
+        const validSchoolCategories = filterByField(
+          openSchools,
+          "schoolCategoryCode",
+          ["POST_SEC", "YUKON", "SUMMER", "FED_BAND"]
+        );
+        const validSchoolFacilities = filterByField(
+          validSchoolCategories,
+          "facilityTypeCode",
+          [
+            "PROVINCIAL",
+            "DIST_CONT",
+            "ELEC_DELIV",
+            "POST_SEC",
+            "JUSTB4PRO",
+            "SUMMER",
+          ]
+        );
         const schoolList = createList(validSchoolFacilities, schoolListOptions);
         res.json(schoolList);
         listCache.set("schoollist", schoolList);
@@ -514,10 +604,20 @@ async function getDistrictList(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         //const districtList = response.data;
-        const filteredNonbBCDistrictList = response.data.filter(district => ["098","102", "103"].includes(district.districtNumber));
-        const filteredDistrictList = response.data.filter(district => !["098","102", "103"].includes(district.districtNumber));
-        const districtList = createList(filteredDistrictList, districtListOptions);
-        const nonBCdistrictList = createList(filteredNonbBCDistrictList, districtListOptions);
+        const filteredNonbBCDistrictList = response.data.filter((district) =>
+          ["098", "102", "103"].includes(district.districtNumber)
+        );
+        const filteredDistrictList = response.data.filter(
+          (district) => !["098", "102", "103"].includes(district.districtNumber)
+        );
+        const districtList = createList(
+          filteredDistrictList,
+          districtListOptions
+        );
+        const nonBCdistrictList = createList(
+          filteredNonbBCDistrictList,
+          districtListOptions
+        );
         listCache.set("nonbcdistrictlist", nonBCdistrictList);
         listCache.set("districtlist", districtList);
         res.json(districtList);
@@ -552,19 +652,21 @@ async function getDistrictContactsAPI(req, res) {
   const url = `${config.get("server:instituteAPIURL")}/institute` + req.url;
 
   const districtList = await listCache.get("districtlist");
-  const nonBCDistrictList =  await listCache.get("nonbcdistrictlist");
+  const nonBCDistrictList = await listCache.get("nonbcdistrictlist");
   axios
     .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
     .then((response) => {
       if (req.url.includes("/district/contact/paginated")) {
         const jsonData = addDistrictLabels(response.data, districtList);
-      
-        jsonData.content = jsonData.content.filter(contact => {
+
+        jsonData.content = jsonData.content.filter((contact) => {
           // Check if districtId is not undefined, empty, or null
-          return contact.districtNumber !== undefined
-              && contact.districtNumber !== ""
-              && contact.districtNumber !== null;
-          });
+          return (
+            contact.districtNumber !== undefined &&
+            contact.districtNumber !== "" &&
+            contact.districtNumber !== null
+          );
+        });
         res.json(jsonData);
       } else {
         res.json(response.data);
@@ -582,7 +684,7 @@ async function getGradeCodes(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const gradeCodes = response.data;
-        
+
         codeCache.set("gradelist", gradeCodes);
         res.json(gradeCodes);
         log.info(req.url);
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 08dad99f..4d950961 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -111,20 +111,20 @@ export const useAppStore = defineStore('app', {
         console.error("ERRPR LOADING CACHE" + error)
       })
       // set category codes
-      InstituteService.getCategoryCodes().then((response) => {
-        const currentDate: Date = new Date()
-        this.categoryCodes = response.data?.filter((item: any) => {
-          const effectiveDate: Date = new Date(item.effectiveDate);
-          const expiryDate: Date = new Date(item.expiryDate);
-          return expiryDate >= currentDate && effectiveDate <= currentDate;
-        })
-         //sort by display order
-        this.categoryCodes?.sort((a: any, b: any) => {
-          return a.displayOrder - b.displayOrder
-        })
-      }).catch((error) => {
-        console.error(error)
-      })
+      // InstituteService.getCategoryCodes().then((response) => {
+      //   const currentDate: Date = new Date()
+      //   this.categoryCodes = response.data?.filter((item: any) => {
+      //     const effectiveDate: Date = new Date(item.effectiveDate);
+      //     const expiryDate: Date = new Date(item.expiryDate);
+      //     return expiryDate >= currentDate && effectiveDate <= currentDate;
+      //   })
+      //    //sort by display order
+      //   this.categoryCodes?.sort((a: any, b: any) => {
+      //     return a.displayOrder - b.displayOrder
+      //   })
+      // }).catch((error) => {
+      //   console.error(error)
+      // })
 
       // set facility type codes
       InstituteService.getFacilityCodes().then((response) => {
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 833ce3da..aaa7f9b8 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -78,10 +78,11 @@ function downloadDistrictSchools() {
 onMounted(async () => {
   const route = useRoute()
   // Set the districtId inside the onMounted hook; null if districtId not found
-  if (isValidDistrictNumber(String(route.params.districtNumber))) {
-    districtId.value =
-      appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
-  }
+  // if (isValidDistrictNumber(String(route.params.districtNumber))) {
+  //   districtId.value =
+  //     appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
+  // }
+  districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
   // get district data
   if (!!districtId.value) {
     try {

From e2343ab7ab896a2e27177924b0a09042febcdd1b Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Mon, 6 May 2024 13:41:06 -0700
Subject: [PATCH 22/24] added async to app store

---
 frontend/src/services/InstituteService.ts |  2 +-
 frontend/src/stores/app.ts                | 14 ++++++------
 frontend/src/views/DistrictView.vue       | 28 ++++++++++-------------
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/frontend/src/services/InstituteService.ts b/frontend/src/services/InstituteService.ts
index e7cbbf7d..75d823c1 100644
--- a/frontend/src/services/InstituteService.ts
+++ b/frontend/src/services/InstituteService.ts
@@ -68,7 +68,7 @@ export default {
     }
     return ApiService.apiAxios.get(url);
   },
-  getDistrictView(id: string): Promise<AxiosResponse> {
+  getDistrictView(id: string | undefined): Promise<AxiosResponse> {
     return ApiService.apiAxios.get(`/api/v1/district/${id}`)
   },
   getDistrictContactTypeCodes(): Promise<AxiosResponse> {
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 4d950961..e211ea4c 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -57,8 +57,8 @@ export const useAppStore = defineStore('app', {
     isIndependentSchool(schoolCategoryCode: String){
       return schoolCategoryCode == 'INDEPEND'
     },
-    setDistricts(): void {
-        InstituteService.getDistricts()
+    async setDistricts(): Promise<void> {
+        await InstituteService.getDistricts()
           .then((response) => {
             // Handle the response data
             this.districts = response.data
@@ -68,8 +68,8 @@ export const useAppStore = defineStore('app', {
             console.error(error)
           })
     },
-    setAuthorityList(): void {
-      InstituteService.getAuthorityList().then((response) => {
+    async setAuthorityList(): Promise<void> {
+      await InstituteService.getAuthorityList().then((response) => {
         //handle the response
         this.authorities = response.data
       })
@@ -78,7 +78,7 @@ export const useAppStore = defineStore('app', {
         console.error(error)
       })
     },
-    setSchoolList(): void {
+    async setSchoolList(): Promise<void> {
 
       InstituteService.getSchoolList()
       .then((response) => {
@@ -91,7 +91,7 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    setOffshoreSchoolList(): void {
+    async setOffshoreSchoolList(): Promise<void> {
 
       InstituteService.getOffshoreSchoolList()
       .then((response) => {
@@ -104,7 +104,7 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    async setCodes() {
+    async setCodes(): Promise<void> {
       await InstituteService.loadCache().then((response) => {
         //console.log(response)
       }).catch((error) => {
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index aaa7f9b8..96289cf9 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -13,7 +13,7 @@ import DisplayAddress from '@/components/common/DisplayAddress.vue'
 import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 const appStore = useAppStore()
-const districtId = ref<string | null>(null) // Initialize with null initially
+const districtId = ref<string | undefined>(undefined) // Initialize with null initially
 const district = reactive({ value: {} as District })
 const schools = ref<any>([])
 const contacts = ref<any>([])
@@ -74,19 +74,18 @@ function downloadDistrictSchools() {
     appStore.exportCSV(csv)
   })
 }
-
-onMounted(async () => {
+async function getDistrictId(): Promise<string> {
   const route = useRoute()
+  return appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? ''
+}
+async function getDistrictData(): Promise<void> {
   // Set the districtId inside the onMounted hook; null if districtId not found
-  // if (isValidDistrictNumber(String(route.params.districtNumber))) {
-  //   districtId.value =
-  //     appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
-  // }
-  districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
+  districtId.value = await getDistrictId() //move this getter to the backend? QUESTION
+  //districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
   // get district data
   if (!!districtId.value) {
     try {
-      const response = await InstituteService.getDistrictView(districtId.value as string)
+      const response = await InstituteService.getDistrictView(districtId.value)
       if (response.data?.districtData?.contacts) {
         district.value = response.data
         contacts.value = response.data?.districtData?.contacts
@@ -175,13 +174,10 @@ onMounted(async () => {
       console.error(error)
     }
   }
-  // get district contact type codes
-  // try {
-  //   const response = await InstituteService.getDistrictContactTypeCodes()
-  //   districtContactTypeCodes.value = response.data
-  // } catch (error) {
-  //   console.error(error)
-  // }
+}
+
+onMounted(async () => {
+  await getDistrictData()
 })
 </script>
 

From e157674afc02f5db3f995a54c1f4dc4e0196fdc6 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 9 May 2024 13:26:03 -0700
Subject: [PATCH 23/24] Fixed missing responses in backend and cleaning up
 routing since we were calling some endpoints multiple times

---
 backend/src/routes/district-router.js     |   8 +-
 backend/src/routes/institute-router.js    | 172 ++++++++++------------
 frontend/src/App.vue                      |   2 +-
 frontend/src/services/InstituteService.ts |  26 ++--
 frontend/src/stores/app.ts                |  36 ++---
 frontend/src/views/AuthorityView.vue      |  20 ++-
 frontend/src/views/DistrictView.vue       |  31 ++--
 frontend/src/views/SchoolView.vue         |   2 +-
 8 files changed, 144 insertions(+), 153 deletions(-)

diff --git a/backend/src/routes/district-router.js b/backend/src/routes/district-router.js
index 944d32e3..9f6751fa 100644
--- a/backend/src/routes/district-router.js
+++ b/backend/src/routes/district-router.js
@@ -93,7 +93,7 @@ async function getDistrictCodes(req) {
       return districtCodeList;
     } catch (e) {
       log.error(
-        "getDistrictList Error",
+        "getDistrictCodesList Error",
         e.response ? e.response.status : e.message
       );
     }
@@ -244,14 +244,12 @@ async function getAllDistrictContacts(req, res) {
     let sortedData = sortJSONByDistrictNumber(filteredData);
     res.json(sortedData);
   } catch (e) {
-    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
 
 async function getAllDistrictMailing(req, res) {
   const districtList = await listCache.get("districtlist");
-  //const contactTypeCodes = await listCache.get("codesList");
 
   const propertyOrder = [
     { property: "districtId_districtNumber", label: "District Number" },
@@ -324,14 +322,11 @@ async function getAllDistrictMailing(req, res) {
     const contentByDistrict = sortJSONByDistrictNumber(content);
 
     res.json(contentByDistrict);
-    //res.json(districtContactsReorderedAndRelabeled );
   } catch (e) {
-    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
 
-//api/v1/institute/district/12342525
 async function getDistrict(req, res) {
   const { id } = req.params;
 
@@ -471,7 +466,6 @@ async function getDistrict(req, res) {
     res.json(districtJSON);
     log.info(req.url);
   } catch (e) {
-    log.error(e);
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
diff --git a/backend/src/routes/institute-router.js b/backend/src/routes/institute-router.js
index a87404e4..4fb888eb 100644
--- a/backend/src/routes/institute-router.js
+++ b/backend/src/routes/institute-router.js
@@ -78,14 +78,12 @@ router.get("/authority/list", checkToken, getAuthorityList);
 router.get("/district/list", checkToken, getDistrictList);
 router.get("/district/contact/*", checkToken, getDistrictContactsAPI);
 router.get("/create-cache", checkToken, createCache);
-router.get("/category-codes", checkToken);
+router.get("/category-codes", checkToken, getCategoryCodes);
 
 router.get("/*", checkToken, getInstituteAPI);
 
 async function createCache(req, res) {
   if (await !listCache.has("fundingGroups")) {
-    //const codes = [];
-
     try {
       const fundingGroupsResponse = await axios.get(
         `${config.get("server:schoolsAPIURL")}/schools/fundingGroups`,
@@ -95,6 +93,7 @@ async function createCache(req, res) {
       );
       listCache.set("fundingGroups", fundingGroupsResponse.data);
       res.json(fundingGroupsResponse.data);
+      log.info("cached funding groups - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("getFunding Groups Error", statusCode, error.message);
@@ -104,41 +103,40 @@ async function createCache(req, res) {
     const cachedFundingGroupList = await listCache.get("fundingGroups");
     res.json(cachedFundingGroupList);
   }
-  if (await !listCache.has("districtlist")) {
-    const url = `${config.get("server:instituteAPIURL")}/institute/district`; // Update the URL according to your API endpoint
-    axios
-      .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
-      .then((response) => {
-        const filteredNonbBCDistrictList = response.data.filter((district) =>
-          ["098", "102", "103"].includes(district.districtNumber)
-        );
-        const filteredDistrictList = response.data.filter(
-          (district) => !["098", "102", "103"].includes(district.districtNumber)
-        );
-        const districtList = createList(
-          filteredDistrictList,
-          districtListOptions
-        );
-        const nonBCdistrictList = createList(
-          filteredNonbBCDistrictList,
-          districtListOptions
-        );
-
-        listCache.set("nonbcdistrictlist", nonBCdistrictList);
-        listCache.set("districtlist", districtList);
-        res.json(districtList);
-        log.info(req.url);
-      })
-      .catch((e) => {
-        log.error(
-          "getDistrictList Error",
-          e.response ? e.response.status : e.message
-        );
-      });
-  }
-  if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-
+  // if (await !listCache.has("districtlist")) {
+  //   const url = `${config.get("server:instituteAPIURL")}/institute/district`; // Update the URL according to your API endpoint
+  //   axios
+  //     .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
+  //     .then((response) => {
+  //       const filteredNonbBCDistrictList = response.data.filter((district) =>
+  //         ["098", "102", "103"].includes(district.districtNumber)
+  //       );
+  //       const filteredDistrictList = response.data.filter(
+  //         (district) => !["098", "102", "103"].includes(district.districtNumber)
+  //       );
+  //       const districtList = createList(
+  //         filteredDistrictList,
+  //         districtListOptions
+  //       );
+  //       const nonBCdistrictList = createList(
+  //         filteredNonbBCDistrictList,
+  //         districtListOptions
+  //       );
+
+  //       listCache.set("nonbcdistrictlist", nonBCdistrictList);
+  //       listCache.set("districtlist", districtList);
+  //       res.json(districtList);
+  //       log.info("cached district list - ", req.url);
+  //     })
+  //     .catch((e) => {
+  //       log.error(
+  //         "getDistrictList Error (createCache)",
+  //         e.response ? e.response.status : e.message
+  //       );
+  //     });
+  // }
+  //TODO: Move to common function since this is same as getCategoryCodes()
+  if (await !listCache.has("categoryCodes")) {
     try {
       const categoryCodesResponse = await axios.get(
         `${config.get("server:instituteAPIURL")}/institute/category-codes`,
@@ -153,6 +151,7 @@ async function createCache(req, res) {
         ["FED_BAND", "POST_SEC", "YUKON"]
       );
       listCache.set("categoryCodes", categoryCodesResponse.data);
+      log.info("cached category codes - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Category Code Caching Error", statusCode, error.message);
@@ -161,6 +160,7 @@ async function createCache(req, res) {
   } else {
     const categoryCodes = await listCache.get("categoryCodes");
     res.json(categoryCodes);
+    log.info("fetched category codes - ", req.url);
   }
   if (await !codeCache.has("gradelist")) {
     const url = `${config.get("server:instituteAPIURL")}/institute/grade-codes`; // Update the URL according to your API endpoint
@@ -170,44 +170,21 @@ async function createCache(req, res) {
         const gradeCodes = response.data;
 
         codeCache.set("gradelist", gradeCodes);
-        log.info(req.url);
+        log.info("cached grade list - ", req.url);
       })
       .catch((e) => {
         log.error(
-          "getDistrictList Error",
+          "getGradeList Error",
           e.response ? e.response.status : e.message
         );
       });
   } else {
     const gradeCodes = await codeCache.get("gradelist");
     res.json(gradeCodes);
+    log.info("fetched grade list - ", req.url);
   }
 
-  // if (!listCache.has("categoryCodes")) {
-
-  //   try {
-  //     const categoryCodesResponse = await axios.get(
-  //       `${config.get(
-  //         "server:instituteAPIURL"
-  //       )}/institute/category-codes`,
-  //       {
-  //         headers: { Authorization: `Bearer ${req.accessToken}` },
-  //       }
-  //     );
-
-  //     categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
-  //     listCache.set("categoryCodes", categoryCodesResponse.data);
-
-  //   } catch (error) {
-  //     const statusCode = error.response ? error.response.status : 500;
-  //     log.error("Category Code Caching Error", statusCode, error.message);
-  //     res.status(statusCode).send(error.message);
-  //   }
-  // }
-
   if (!listCache.has("facilityCodes")) {
-    //const codes = [];
-
     try {
       const facilityCodesResponse = await axios.get(
         `${config.get("server:instituteAPIURL")}/institute/facility-codes`,
@@ -216,6 +193,7 @@ async function createCache(req, res) {
         }
       );
       listCache.set("facilityCodes", facilityCodesResponse.data);
+      log.info("cached facility codes - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Faility Code Caching Error", statusCode, error.message);
@@ -223,8 +201,6 @@ async function createCache(req, res) {
     }
   }
   if (!listCache.has("districtAddresses")) {
-    //const codes = [];
-
     try {
       const districtsResponse = await axios.get(
         `${config.get(
@@ -274,6 +250,7 @@ async function createCache(req, res) {
         });
       });
       listCache.set("districtAddresses", districtsResponse.data.content);
+      log.info("cached district addresses - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("District Code Caching Error", statusCode, error.message);
@@ -283,6 +260,7 @@ async function createCache(req, res) {
 
   if (await !listCache.has("codesList")) {
     try {
+      log.info("Starting to get codes list"); //MOVE UNTIL I SEE IT
       const authorityContactTypeCodesResponse = await axios.get(
         `${config.get(
           "server:instituteAPIURL"
@@ -324,21 +302,22 @@ async function createCache(req, res) {
           [{ fieldToRemove: "publiclyAvailable", value: false }]
         ),
       };
-      res.json(codes);
+      // res.json(codes);
       listCache.set("codesList", { codesList: codes });
+      log.info("cached codes list - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
+      log.error(e);
       log.error("getCodesList Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
   }
+  // res acts like a return
   res.status(200).json({ success: true });
 }
 
 async function getContactTypeCodes(req, res) {
   if (await !listCache.has("codesList")) {
-    //const codes = [];
-
     try {
       const authorityContactTypeCodesResponse = await axios.get(
         `${config.get(
@@ -529,34 +508,33 @@ async function getAuthorityList(req, res) {
     res.json(authorityList);
   }
 }
-// async function getCategoryCodes(req, res) {
-//   if (!listCache.has("categoryCodes")) {
-//     //const codes = [];
-
-//     try {
-//       const categoryCodesResponse = await axios.get(
-//         `${config.get("server:instituteAPIURL")}/institute/category-codes`,
-//         {
-//           headers: { Authorization: `Bearer ${req.accessToken}` },
-//         }
-//       );
+async function getCategoryCodes(req, res) {
+  if (!listCache.has("categoryCodes")) {
+    try {
+      const categoryCodesResponse = await axios.get(
+        `${config.get("server:instituteAPIURL")}/institute/category-codes`,
+        {
+          headers: { Authorization: `Bearer ${req.accessToken}` },
+        }
+      );
 
-//       categoryCodesResponse.data = filterRemoveByField(
-//         categoryCodesResponse.data,
-//         "schoolCategoryCode",
-//         ["FED_BAND", "POST_SEC", "YUKON"]
-//       );
-//       listCache.set("categoryCodes", categoryCodesResponse.data);
-//     } catch (error) {
-//       const statusCode = error.response ? error.response.status : 500;
-//       log.error("Category Code Caching Error", statusCode, error.message);
-//       res.status(statusCode).send(error.message);
-//     }
-//   } else {
-//     const categoryCodes = await listCache.get("categoryCodes");
-//     res.json(categoryCodes);
-//   }
-// }
+      categoryCodesResponse.data = filterRemoveByField(
+        categoryCodesResponse.data,
+        "schoolCategoryCode",
+        ["FED_BAND", "POST_SEC", "YUKON"]
+      );
+      listCache.set("categoryCodes", categoryCodesResponse.data);
+      res.json(categoryCodesResponse.data);
+    } catch (error) {
+      const statusCode = error.response ? error.response.status : 500;
+      log.error("Category Code Caching Error", statusCode, error.message);
+      res.status(statusCode).send(error.message);
+    }
+  } else {
+    const categoryCodes = await listCache.get("categoryCodes");
+    res.json(categoryCodes);
+  }
+}
 async function getSchoolList(req, res) {
   if (await !listCache.has("schoollist")) {
     const url = `${config.get("server:instituteAPIURL")}/institute/school`; // Update the URL according to your API endpoint
@@ -625,7 +603,7 @@ async function getDistrictList(req, res) {
       })
       .catch((e) => {
         log.error(
-          "getDistrictList Error",
+          "getDistrictList Error (getDistrictList)",
           e.response ? e.response.status : e.message
         );
       });
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 64419e25..7cc84069 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,7 +9,7 @@ const data = ref([]) // Placeholder for the received data
 const appStore = useAppStore()
 
 onBeforeMount(async () => {
-  await appStore.setCodes()
+  await appStore.setCodes() //calls /create-cache
   await appStore.setDistricts()
   await appStore.setAuthorityList()
   await appStore.setSchoolList()
diff --git a/frontend/src/services/InstituteService.ts b/frontend/src/services/InstituteService.ts
index 75d823c1..fedcf26d 100644
--- a/frontend/src/services/InstituteService.ts
+++ b/frontend/src/services/InstituteService.ts
@@ -3,44 +3,44 @@ import { type AxiosResponse } from 'axios';
 
 export default {
   // Districts
-  getDistricts(): Promise<AxiosResponse> {
+  async getDistricts(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/district/list');
   },
   //DO NOT USE; TODO: Factor this out and use getDistrictView instead
   getDistrict(districtId: string): Promise<AxiosResponse> {
-    return ApiService.apiAxios.get('/api/v1/institute/district/'+districtId);
+    return ApiService.apiAxios.get('/api/v1/institute/district/'+ districtId);
   },
   // Independent Authorities
-  getAuthorityList(): Promise<AxiosResponse> {
+  async getAuthorityList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/authority/list');
   },
-  getAuthority(authorityId: string): Promise<AxiosResponse> {
+  async getAuthority(authorityId: string): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/authority/'+ authorityId)
   },
   // Schools
-  getSchoolList(): Promise<AxiosResponse> {
+  async getSchoolList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/school/list');
   },
-  getOffshoreSchoolList(): Promise<AxiosResponse> {
+  async getOffshoreSchoolList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/offshore-school/list');
   },  
-  getSchool(schoolId: string): Promise<AxiosResponse> {
+  async getSchool(schoolId: string): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/school/'+schoolId);
   },
   // Codes
-  getFacilityCodes(): Promise<AxiosResponse> {
+  async getFacilityCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/facility-codes');
   },
-  getCategoryCodes(): Promise<AxiosResponse> {
+  async getCategoryCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/category-codes');
   },
-  getContactTypeCodes(): Promise<AxiosResponse> {
+  async getContactTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/contact-type-codes');
   },
-  getGradeCodes(): Promise<AxiosResponse> {
+  async getGradeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/grade-codes');
   },
-  getAddressTypeCodes(): Promise<AxiosResponse> {
+  async getAddressTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/address-type-codes');
   },
 
@@ -74,7 +74,7 @@ export default {
   getDistrictContactTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/district-contact-type-codes');
   },
-  loadCache(): Promise<AxiosResponse> {
+  async loadCache(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/create-cache');
   },
 
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index e211ea4c..04165462 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -111,30 +111,30 @@ export const useAppStore = defineStore('app', {
         console.error("ERRPR LOADING CACHE" + error)
       })
       // set category codes
-      // InstituteService.getCategoryCodes().then((response) => {
-      //   const currentDate: Date = new Date()
-      //   this.categoryCodes = response.data?.filter((item: any) => {
-      //     const effectiveDate: Date = new Date(item.effectiveDate);
-      //     const expiryDate: Date = new Date(item.expiryDate);
-      //     return expiryDate >= currentDate && effectiveDate <= currentDate;
-      //   })
-      //    //sort by display order
-      //   this.categoryCodes?.sort((a: any, b: any) => {
-      //     return a.displayOrder - b.displayOrder
-      //   })
-      // }).catch((error) => {
-      //   console.error(error)
-      // })
+      await InstituteService.getCategoryCodes().then((response) => {
+        const currentDate: Date = new Date()
+        this.categoryCodes = response.data?.filter((item: any) => {
+          const effectiveDate: Date = new Date(item.effectiveDate);
+          const expiryDate: Date = new Date(item.expiryDate);
+          return expiryDate >= currentDate && effectiveDate <= currentDate;
+        })
+         //sort by display order
+        this.categoryCodes?.sort((a: any, b: any) => {
+          return a.displayOrder - b.displayOrder
+        })
+      }).catch((error) => {
+        console.error(error)
+      })
 
       // set facility type codes
-      InstituteService.getFacilityCodes().then((response) => {
+      await InstituteService.getFacilityCodes().then((response) => {
         this.facilityCodes = response.data
       }).catch((error) => {
         console.error(error)
       })
 
       // set contact type codes for Districts, Authorities, and Schools
-      InstituteService.getContactTypeCodes().then((response) => {
+      await InstituteService.getContactTypeCodes().then((response) => {
         const currentDate: Date = new Date()
 
 
@@ -178,13 +178,13 @@ export const useAppStore = defineStore('app', {
       })
 
       // set address type codes for institute addresses
-      InstituteService.getAddressTypeCodes().then((response) => {
+      await InstituteService.getAddressTypeCodes().then((response) => {
         this.addressTypeCodes = response.data
       }).catch((error) => {
         console.error(error)
       })
 
-      InstituteService.getGradeCodes().then((response) => {
+      await InstituteService.getGradeCodes().then((response) => {
         this.gradeCodes = response.data
       }).catch((error) => {
         console.error(error)
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 34c20369..0c3cbb23 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -207,9 +207,11 @@ onMounted(async () => {
       :items="[
         { title: 'Home', href: '/' },
         'Authority',
-        authority.value.authorityData?.authorityNumber +
-          ' ' +
-          authority.value.authorityData?.displayName
+        authority.value.authorityData
+          ? authority.value.authorityData.authorityNumber +
+            ' ' +
+            authority.value.authorityData.displayName
+          : ''
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
@@ -313,7 +315,9 @@ onMounted(async () => {
               </template>
 
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
@@ -351,11 +355,15 @@ onMounted(async () => {
               </template>
 
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.website="{ item }">
-                <a :href="item.website">{{ item.website }}</a>
+                <div style="max-width: 200px">
+                  <a :href="item.website">{{ item.website }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 96289cf9..598f35e5 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -189,7 +189,11 @@ onMounted(async () => {
       :items="[
         { title: 'Home', href: '/' },
         'District',
-        district.value.districtData?.districtNumber + ' ' + district.value.districtData?.displayName
+        district.value.districtData
+          ? district.value.districtData.districtNumber +
+            ' ' +
+            district.value.districtData.displayName
+          : ''
       ]"
     ></v-breadcrumbs>
 
@@ -302,7 +306,9 @@ onMounted(async () => {
               :sort-by="[{ key: 'label', order: 'asc' }]"
             >
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
@@ -333,6 +339,7 @@ onMounted(async () => {
                   item.displayName
                 }}</a>
               </template>
+
               <template v-slot:item.schoolCategoryCode="{ item }">
                 {{ appStore.getCategoryCodeLabel(item.schoolCategoryCode) }}
               </template>
@@ -341,14 +348,6 @@ onMounted(async () => {
                 {{ appStore.getFacilityCodeLabel(item.facilityTypeCode) }}
               </template>
 
-              <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
-              </template>
-
-              <template v-slot:item.website="{ item }">
-                <a :href="item.website">{{ item.website }}</a>
-              </template>
-
               <template v-slot:item.phoneNumber="{ item }">
                 <div style="min-width: 125px">
                   <!-- Adjust the min-width value as needed -->
@@ -361,6 +360,18 @@ onMounted(async () => {
                   {{ formatPhoneNumber(item.faxNumber) }}
                 </div>
               </template>
+
+              <template v-slot:item.email="{ item }">
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
+              </template>
+
+              <template v-slot:item.website="{ item }">
+                <div style="max-width: 200px">
+                  <a :href="item.website">{{ item.website }}</a>
+                </div>
+              </template>
             </v-data-table>
           </v-window-item>
         </v-window>
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index 883df15c..c71a1edb 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -229,7 +229,7 @@ function goToDistrict() {
       :items="[
         { title: 'Home', href: '/' },
         'School',
-        { title: schoolData?.value?.displayName, href: '' }
+        !!schoolData.value ? { title: schoolData.value.displayName, href: '' } : ''
       ]"
     ></v-breadcrumbs>
 

From 98cfe3027c00aca69d7f8edebc3b5893988bf121 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 23 May 2024 12:49:42 -0700
Subject: [PATCH 24/24] Remove comment block

---
 backend/src/routes/institute-router.js | 32 --------------------------
 1 file changed, 32 deletions(-)

diff --git a/backend/src/routes/institute-router.js b/backend/src/routes/institute-router.js
index 4fb888eb..fb7b4c2f 100644
--- a/backend/src/routes/institute-router.js
+++ b/backend/src/routes/institute-router.js
@@ -103,39 +103,7 @@ async function createCache(req, res) {
     const cachedFundingGroupList = await listCache.get("fundingGroups");
     res.json(cachedFundingGroupList);
   }
-  // if (await !listCache.has("districtlist")) {
-  //   const url = `${config.get("server:instituteAPIURL")}/institute/district`; // Update the URL according to your API endpoint
-  //   axios
-  //     .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
-  //     .then((response) => {
-  //       const filteredNonbBCDistrictList = response.data.filter((district) =>
-  //         ["098", "102", "103"].includes(district.districtNumber)
-  //       );
-  //       const filteredDistrictList = response.data.filter(
-  //         (district) => !["098", "102", "103"].includes(district.districtNumber)
-  //       );
-  //       const districtList = createList(
-  //         filteredDistrictList,
-  //         districtListOptions
-  //       );
-  //       const nonBCdistrictList = createList(
-  //         filteredNonbBCDistrictList,
-  //         districtListOptions
-  //       );
 
-  //       listCache.set("nonbcdistrictlist", nonBCdistrictList);
-  //       listCache.set("districtlist", districtList);
-  //       res.json(districtList);
-  //       log.info("cached district list - ", req.url);
-  //     })
-  //     .catch((e) => {
-  //       log.error(
-  //         "getDistrictList Error (createCache)",
-  //         e.response ? e.response.status : e.message
-  //       );
-  //     });
-  // }
-  //TODO: Move to common function since this is same as getCategoryCodes()
   if (await !listCache.has("categoryCodes")) {
     try {
       const categoryCodesResponse = await axios.get(