Merge pull request #80 from bcgov/samara-style

Fix offshore error in data table & School view imrpovements.

frontend/src/components/DownloadSchoolsModal.vue

@@ -6,6 +6,10 @@ 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%">
@@ -17,7 +21,7 @@ const dialog = ref(false)
         class="text-none text-subtitle-1 my-1"
         v-bind="props"
       >
-        Download Schools
+        Download School Info
       </v-btn>
     </template>
     <template v-slot:default="{ isActive }">
@@ -62,6 +66,15 @@ const dialog = ref(false)
                 ></v-col
               >
             </v-row>
+            <v-row>
+              <v-btn
+                block
+                class="v-btn-align-left text-none text-subtitle-1 ma-1"
+                @click="downloadAllSchoolsMailing"
+                ><template v-slot:prepend> <v-icon icon="mdi-download" /></template>Mailing for All
+                Schools</v-btn
+              >
+            </v-row>
           </v-column>
         </v-card-actions>
         <v-card-actions>

frontend/src/components/OffshoreSelect.vue

@@ -27,7 +27,6 @@ function downloadOffshoreSchoolReps() {
 </script>
 
 <template>
-  {{ offshoreSchools }}
   <v-card class="pa-6 mt-5">
     <h2 class="mb-5">BC Offshore Schools</h2>
     <v-row no-gutters>

frontend/src/components/SchoolSelect.vue

@@ -30,25 +30,19 @@ function goToSchoolSearch() {
     name: 'search'
   })
 }
-
-function downloadAllSchoolsMailing() {
-  alert('TODO - Implement all schools mailing extract download')
-}
 </script>
 
 <template>
   <v-container fluid class="pt-0">
     <v-sheet elevation="2" class="py-6 full-width">
       <v-row no-gutters justify="space-between">
-        <v-col class="mr-6">
-          <v-spacer />
-          <img
-            src="@/assets/images/BCMapGraphic.png"
-            alt="Map of British Columbia"
-            style="height: 268px; position: absolute; top: 50px; left: -80px"
-          />
-        </v-col>
-        <v-col lg="5" class="mr-6 py-6 school-search">
+        <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" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
           <v-row>
             <v-autocomplete
@@ -69,17 +63,10 @@ function downloadAllSchoolsMailing() {
               @click="goToSchool"
               class="mx-3"
             />
-            <!-- <v-btn
-              color="primary"
-              class="text-none text-subtitle-1"
-              variant="flat"
-              @click="goToSchool"
-              ><v-icon icon="mdi-magnify"
-            /></v-btn> -->
           </v-row>
 
           <v-row>
-            <v-col class="px-0">
+            <v-col class="px-0 my-1">
               <v-btn
                 color="bcGovBlue"
                 class="text-none text-subtitle-1"
@@ -92,15 +79,6 @@ function downloadAllSchoolsMailing() {
             <v-col>
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
-            <v-col>
-              <v-btn
-                block
-                class="v-btn-align-left text-none text-subtitle-1 ma-1"
-                @click="downloadAllSchoolsMailing"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /></template>Mailing for All
-                Schools</v-btn
-              >
-            </v-col>
           </v-row>
         </v-col>
         <v-spacer />

frontend/src/views/AuthorityView.vue

@@ -327,7 +327,7 @@ onMounted(async () => {
               </template>
 
               <template v-slot:item.faxNumber="{ item }">
-                {{ formatPhoneNumber(itemfax.Number) }}
+                {{ formatPhoneNumber(item.faxNumber) }}
               </template>
             </v-data-table>
           </v-window-item>

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, transformContactForDownload } from '@/utils/common'
+import { formatPhoneNumber } from '@/utils/common'
 import type { District, School, Grade, Address, Contact } from '@/types/types.d.ts'
 import * as jsonexport from 'jsonexport/dist'
 import { useSanitizeURL } from '@/composables/string'
@@ -24,10 +24,12 @@ const tabOptions = {
 }
 const tab = ref(tabOptions.contacts) // Default to contacts tab
 const contactHeaders = [
+  { title: 'Role', key: 'jobTitle' },
   { title: 'Contact Type', key: 'districtContactTypeCode' },
-  { title: 'Name', key: 'firstName' },
-  { title: 'Title/Role', key: 'jobTitle' },
+  { title: 'First Name', key: 'firstName' },
+  { title: 'Last Name', key: 'lastName' },
   { title: 'Phone', key: 'phoneNumber' },
+  { title: 'Extension', key: 'phoneExtension' },
   { title: 'Email', key: 'email' }
 ]
 const schoolHeaders = [
@@ -45,7 +47,7 @@ const schoolHeaders = [
 const schoolSearch = ref('')
 const contactSearch = ref('')
 // functions
-function goToSchool(displayName, mincode, id) {
+function goToSchool(displayName: string, mincode: string, id: string) {
   console.log(displayName)
   console.log(mincode)
   console.log(id)

frontend/src/views/OffshoreView.vue

@@ -25,7 +25,7 @@ const headers = ref([
   <div>
     <v-breadcrumbs
       class="breadcrumbs"
-      bg-color="primary"
+      bg-color="white"
       :items="[{ title: 'Home', href: '/' }, 'Offshore Schools']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
@@ -67,18 +67,18 @@ const headers = ref([
         :search="schoolSearch"
       >
         <template v-slot:item.displayName="{ item }">
-          <a :href="`/school/${item.raw.schoolId}`"> {{ item.raw.displayName }} </a>
+          <a :href="`/school/${item.schoolId}`"> {{ item.displayName }} </a>
         </template>
 
         <template v-slot:item.addresses="{ item }">
-          <div v-for="address in item.raw.addresses">
+          <div v-for="address in item.addresses">
             <DisplayAddress v-bind="address" />
           </div>
         </template>
         <template v-slot:item.contact="{ item }">
-          <strong>Phone:</strong> {{ item.raw.phoneNumber }} <br />
-          <strong>Fax:</strong> {{ item.raw.faxNumber }} <br />
-          <strong>Email:</strong> {{ item.raw.email }}
+          <strong>Phone:</strong> {{ item.phoneNumber }} <br />
+          <strong>Fax:</strong> {{ item.faxNumber }} <br />
+          <strong>Email:</strong> {{ item.email }}
         </template>
       </v-data-table>
     </v-container>

frontend/src/views/SchoolView.vue

@@ -17,7 +17,7 @@ const downloadContacts = ref<any>([])
 const filteredContacts = ref<any>([])
 const filteredAddresses = reactive<any>({ value: {} })
 const headers = [
-  { title: 'Contact', key: 'jobTitle' },
+  { title: 'Role', key: 'jobTitle' },
   { title: 'First Name', key: 'firstName' },
   { title: 'Last Name', key: 'lastName' },
   { title: 'Phone', key: 'phoneNumber' },
@@ -26,6 +26,11 @@ const headers = [
   { title: 'Email', key: 'email' }
 ]
 const schoolData = reactive({ value: {} as School })
+const tabOptions = {
+  contacts: 1,
+  learning: 2 //can we display grades and NLCs on their own tab?
+}
+const tab = ref(tabOptions.contacts)
 
 // functions
 const downloadCSV = () => {
@@ -78,7 +83,6 @@ onBeforeMount(async () => {
   try {
     const response = await InstituteService.getSchool(selectedSchoolId as string)
     schoolData.value = response.data
-    console.log(schoolData.value)
 
     //add the missing labels
     const filteredGrades = appStore.compareSchoolGrades(
@@ -185,6 +189,24 @@ function goToDistrict() {
                 {{ districtInfo.value.displayName }}
               </a>
             </v-row>
+            <v-row>
+              <!-- <p>
+                <strong>Grades: </strong>{{ appStore.extractGradeLabels(schoolData.value?.grades) }}
+              </p> -->
+              <!-- <div
+                label
+                v-for="grade in appStore.getGradeByGradeCodes"
+                :key="grade.schoolGradeCode"
+              >
+                {{
+                  schoolData.value.grades.find(
+                    (schoolGrade: Grade) => schoolGrade.schoolGradeCode == grade.schoolGradeCode
+                  )
+                    ? grade.label
+                    : undefined
+                }}
+              </div> -->
+            </v-row>
             <v-row>
               <v-col class="pl-0">
                 <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
@@ -214,63 +236,23 @@ function goToDistrict() {
         </v-row>
       </v-row>
     </v-sheet>
-    <v-card class="fill-screen-height" width="100%" v-if="schoolData.value">
-      <!-- DISPLAY GRADES -->
-      <!-- <v-chip
-        label
-        v-for="schoolGrade in schoolData.value.grades"
-        :key="schoolGrade.schoolGradeCode"
-      >
-        {{
-          appStore.getGradeByGradeCodes
-            .sort((a, b) => a.displayOrder - b.displayOrder)
-            .find((grade) => schoolGrade.schoolGradeCode == grade.schoolGradeCode)?.label
-        }}
-      </v-chip> -->
-
-      <!-- <v-card-item>
-        <v-card-title v-if="schoolData.value.displayName">
-          {{ schoolData.value.displayName }} - {{ schoolData.value.mincode }}</v-card-title
-        >
-        District: {{ districtInfo.value.districtNumber }} - {{ districtInfo.value.displayName }}
 
-        <v-card-subtitle> -->
-      <!-- School type info. -->
-      <!-- <span v-if="schoolData.value.facilityTypeCode"
-            >{{ schoolData.value.facilityTypeCode }} SCHOOL<br
-          /></span>
-          <div v-if="schoolData.value.grades">
-            Grades:
-            <span v-for="item in schoolData.value.grades" :key="item.schoolGradeCode"
-              >{{ item.schoolGradeCode }},</span
-            >
-          </div>
-          <br />
-          <span v-if="schoolData.value.schoolCategoryCode"
-            >{{ schoolData.value.schoolCategoryCode }} SCHOOL</span
-          >
-        </v-card-subtitle>
-      </v-card-item> -->
-      <h2>School Contacts</h2>
+    <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">
+      <v-tabs v-model="tab">
+        <v-tab :value="tabOptions.contacts">School Contacts</v-tab>
+      </v-tabs>
       <v-card-text>
-        <v-data-table-virtual
-          :headers="headers"
-          :items="filteredContacts"
-          class="elevation-1"
-          item-value="name"
-        ></v-data-table-virtual>
+        <v-window v-model="tab">
+          <v-window-item :value="tabOptions.contacts">
+            <v-data-table-virtual
+              :headers="headers"
+              :items="filteredContacts"
+              class="elevation-1"
+              item-value="name"
+            ></v-data-table-virtual>
+          </v-window-item>
+        </v-window>
       </v-card-text>
-
-      <h2>Grades</h2>
-      <div label v-for="grade in appStore.getGradeByGradeCodes" :key="grade.schoolGradeCode">
-        {{
-          schoolData.value.grades?.find(
-            (schoolGrade: Grade) => schoolGrade.schoolGradeCode == grade.schoolGradeCode
-          )
-            ? grade.label
-            : undefined
-        }}
-      </div>
     </v-card>
     <pre>{{ schoolData.value }}</pre>
   </div>