@worksafevictoria/wcl7.5 1.7.0 → 1.7.2

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue

@@ -3,51 +3,51 @@
     <!-- Main details -->
     <container>
       <row class="records">
-      <column md="2" sm="12" class="title" >
-        <a v-if="item.title" href="javascript:void(0)" @click="this.visible = !this.visible">
-          {{ item.title }}
-        </a>
-      </column>
-      <column md="2" sm="12" class="address" >
-        <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
-          {{ item.fullAddress }}
-        </a>
-      </column>
-      <column md="2" sm="12" class="coldata longstring" >
-        <div class="label">Email</div>
-        <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
-          {{ item.email }}
-        </a>
-      </column>
-      <column md="3" sm="12" class="coldata longstring" >
-        <div class="label">Website</div>
-        <a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
-          {{ item.website }}
+        <column md="2" sm="12" class="title" >
+          <a name="titleLink" v-if="item.title" href="javascript:void(0)" :aria-expanded="visible ? 'true' : 'false'" @click="this.visible = !this.visible">
+            {{ item.title }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="address" >
+          <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
+            {{ item.fullAddress }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="coldata longstring" >
+          <div class="label">Email</div>
+          <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
+            {{ item.email }}
+          </a>
+        </column>
+        <column md="3" sm="12" class="coldata longstring" >
+          <div class="label">Website</div>
+          <a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
+            {{ item.website }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="coldata" >
+          <div class="label">Phone</div>
+          <a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.tollfreePhone || item.workPhone }}
+          </a>
+        </column>
+      </row>
+      <div class="hscp-caret" >
+        <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
+          <img
+            :src="CaretUp"
+            height="12"
+            width="17"
+            alt="Expand Detail">
         </a>
-      </column>
-      <column md="2" sm="12" class="coldata" >
-        <div class="label">Phone</div>
-        <a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
-          {{ item.tollfreePhone || item.workPhone }}
+        <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
+          <img
+            :src="CaretDown"
+            height="12"
+            width="17"
+            alt="Expand Detail">
         </a>
-      </column>
-    </row>
-    <div class="hscp-caret" >
-      <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
-        <img
-          :src="CaretUp"
-          height="12"
-          width="17"
-          alt="Expand Detail">
-      </a>
-      <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
-        <img
-          :src="CaretDown"
-          height="12"
-          width="17"
-          alt="Expand Detail">
-      </a>
-    </div>
+      </div>
     </container>
     
     <!-- Additional Content -->
@@ -156,7 +156,7 @@ export default {
     item: {
       type: Object,
       required: true
-    }
+    },
   },
   data() {
     return {
@@ -169,6 +169,7 @@ export default {
     gMapLink() {
       return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
     },
+
   },
   methods: {
     handleClick(title) {

package/src/components/Paragraphs/Directory/HSCP/Records/index.vue

@@ -7,25 +7,25 @@
         <label class="visually-hidden" for="search-directory">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchOrg" placeholder="Search organisation" class="search">
+        <input type="text" v-model="searchOrg" placeholder="Organisation" class="search">
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchSub" placeholder="Search suburb" class="search">
+        <input type="text" v-model="searchSub" placeholder="Training location" class="search">
       </column>
       <!-- Other Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
         <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Search course type</option>
+          <option class="placeholder" value="" disabled hidden selected>Course type</option>
           <option value="HSR Initial">HSR Initial</option>
           <option value="HSR Refresher">HSR Refresher</option>
         </select>
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
         <select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Search theme</option>
+          <option class="placeholder" value="" disabled hidden selected>Theme</option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
             {{ opt }}
           </option>
@@ -42,9 +42,9 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="hscpRecords">
-      <template v-for="(item, index) in resultChunks[page]">
-        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item" />
+    <div class="hscpRecords" >
+      <template v-for="(item, index) in resultChunks[page]" >
+        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
       </template>
     </div>
     <div v-if="filteredRecords.length > 0" align-items="center">
@@ -88,7 +88,7 @@ export default {
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true,
+      hideReset: true
     }
   },
   props: {
@@ -137,7 +137,7 @@ export default {
 
     filteredRecords() {
       let results = this.flatRecords
-      
+     
       if (this.searchOrg.length) {
         this.hideReset = false
         results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
@@ -155,6 +155,11 @@ export default {
         results = results.filter(item => item.courses.toLowerCase().includes(this.searchThemes.toLowerCase()))
       }
       this.filteredItems = results
+
+      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
+        this.pageChanged(1)
+      }
+
       return results
     },
   
@@ -244,29 +249,21 @@ export default {
 
     pageChanged(ev) {
       this.page = ev - 1
-      if (this.pageResultCount < this.perPage) {
-        console.log('scroll to records')
-        this.scrollToRecords()
-      }
-    },
-    scrollToRecords() {
-      if (this.$refs.records) {
-        const element = this.$refs.records
-        const top = element.offsetTop
-
-        const buttons = [...element.querySelectorAll('button')]
-        if (Array.isArray(buttons) && buttons.length > 0) {
-          buttons
-            .filter((button) => button.getAttribute('aria-expanded') === 'true')
-            .forEach((button) => button.click())
-
-          buttons[0].focus()
-        }
+      
+      const aLinks = document.getElementsByName('titleLink')
+      // Convert nodelist to array
+      let linksArr = Array.from(aLinks)
+      if (Array.isArray(linksArr) && linksArr.length > 0) {
+        linksArr
+          .filter((link) => link.getAttribute('aria-expanded') === 'true')
+          .forEach((link) => link.click())
 
-        window.scrollTo({
-          top,
-          behavior: 'smooth',
-        })
+        if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
+          // don't set focus
+        } else {
+          // set focus to top element - used instead of scrollTo
+          linksArr[0].focus()
+        } 
       }
     },
   }

package/src/components/Paragraphs/Map/index.vue

@@ -22,62 +22,50 @@
     </row>
     <row>
       <column>
-        <div>
-          <GoogleMap
-            api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
-            :style="`width: 100%; height: ${mapHeight}`"
-            :center="center"
-            :zoom="zoom"
-            :zoom-control="true"
-            :mapTypeControl="false"
-            :streetViewControl="false"
-            :fullscreenControl="true"
-          >
-            <!-- <CustomControl
-              position="TOP_CENTER"
-              class="mt-4"
-              style="background-color: rgba(0, 0, 0, 0.2); border-radius: 5px"
-              ><row>
-                <column class="py-2 px-3">
-                  <single-taxonomy
-                    v-for="(t, i) in computedPropFilters"
-                    :key="i"
-                    :ref="`${t.record_id}`"
-                    :data="t"
-                    :results="filteredList.length"
-                    :loading="isFiltering"
-                    class="wcl-directory-filters__filterButton"
-                    @onFilter="onFilter"
-                  />
-                  <filter-button
-                    v-if="!hideReset"
-                    :is-reset="true"
-                    class="wcl-directory-filters__filterButton"
-                    @clicked="reset"
-                  />
-                </column>
-              </row>
-            </CustomControl> -->
-            <!-- <MarkerCluster> -->
-            <Marker
-              v-for="(location, i) in postcodes"
-              :options="{
-                position: location.center,
-                label: `${location.deaths}`,
-                title: `${location.deaths} ${location.deaths > 1 ? 'deaths' : 'death'}`,
-              }"
-              :key="i"
-            />
-            <!-- </MarkerCluster> -->
-          </GoogleMap>
-        </div>
+        <GoogleMap
+          api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
+          map-id="18650d0e6b0daeb1"
+          :style="`width: 100%; height: ${mapHeight}`"
+          :center="center"
+          :zoom="zoom"
+          :zoom-control="true"
+          :mapTypeControl="false"
+          :streetViewControl="false"
+          :fullscreenControl="true"
+        >
+          <Polygon
+            v-for="(location, i) in lgaBoundaries"
+            :options="location"
+            :key="i + polygonKey"
+          />
+          <CustomControl position="BOTTOM_CENTER">
+            <h4 v-if="unknownLGA">
+              <BBadge variant="light"> Unknown LGA {{ unknownLGA }} </BBadge>
+            </h4>
+          </CustomControl>
+          <AdvancedMarker
+            v-for="(location, i) in centerLGA"
+            :options="{
+              position: location.center,
+              title: `${location.lga} (${location.deaths} ${location.deaths > 1 ? 'fatalities' : 'fatality'})`,
+            }"
+            :key="i"
+            :pin-options="{
+              background: '#fdcd59',
+              glyph: `${location.deaths}`,
+              glyphColor: 'black',
+              borderColor: '#000000',
+              scale: 1,
+            }"
+          />
+        </GoogleMap>
       </column>
     </row>
   </container>
 </template>
 
 <script>
-import postcode from './postcode_location.json'
+import lga from './lga-map.json'
 import {
   GoogleMap,
   Marker,
@@ -85,13 +73,15 @@ import {
   Circle,
   CustomControl,
   InfoWindow,
+  Polygon,
+  AdvancedMarker,
 } from 'vue3-google-map'
 import Container from '../../Containers/Container/index.vue'
 import Column from '../../Containers/Column/index.vue'
 import Row from '../../Containers/Row/index.vue'
 import FilterButton from '../../Common/FilterButton/index.vue' // Reset
 import SingleTaxonomy from '../../Global/DirectoryFilters/SingleTaxonomy/index.vue'
-import { BFormGroup, BFormSelect, BButton } from 'bootstrap-vue-next'
+import { BFormGroup, BFormSelect, BButton, BBadge } from 'bootstrap-vue-next'
 
 export default {
   name: 'GeoChart',
@@ -110,6 +100,9 @@ export default {
     CustomControl,
     InfoWindow,
     BButton,
+    Polygon,
+    AdvancedMarker,
+    BBadge,
   },
   props: {
     statsData: { type: Array, default: () => [] },
@@ -118,7 +111,7 @@ export default {
   },
   data() {
     return {
-      postcode,
+      lga,
       zoom: 7,
       mapHeight: '700px',
       center: { lat: -36.5, lng: 145.3 },
@@ -129,6 +122,8 @@ export default {
         selected: {},
         availableBundles: [],
       },
+      unknownLGA: 0,
+      polygonKey: 1,
     }
   },
   mounted() {
@@ -209,27 +204,50 @@ export default {
       })
       return list
     },
-    postcodes: function () {
+    centerLGA: function () {
       if (this.filteredList.length > 1) {
         let location = {}
+        this.unknownLGA = 0
         this.filteredList.forEach((item) => {
-          if (location[item.POSTCODE]) {
-            location[item.POSTCODE].deaths++
+          if (location[item.LGA]) {
+            location[item.LGA].deaths++
           } else {
-            let pc = this.postcode.find((obj) => obj.postcode == item.POSTCODE)
+            let pc = this.lga.find(
+              (obj) =>
+                obj.name ==
+                item.LGA.replace('-', ' ')
+                  .toUpperCase()
+                  .substring(0, obj.name.length),
+            )
             if (pc) {
-              location[item.POSTCODE] = {
-                center: { lat: pc.lat, lng: pc.long },
+              location[item.LGA] = {
+                center: { lat: pc.labelpoint[0], lng: pc.labelpoint[1] },
                 deaths: 1,
+                lga: pc.name,
               }
             } else {
-              console.log('🚀 ~ item.POSTCODE:', item.POSTCODE)
+              this.unknownLGA++
             }
           }
         })
         return location
       }
     },
+    lgaBoundaries: function () {
+      let lgaData = lga.map((item) => {
+        return {
+          strokeColor: '#000000',
+          strokeOpacity: 0.8,
+          strokeWeight: 1,
+          fillColor: '#bababa',
+          fillOpacity: 0.5,
+          paths: item.boundaries.map((item) => {
+            return { lng: item[0], lat: item[1] }
+          }),
+        }
+      })
+      return lgaData
+    },
   },
   methods: {
     resize() {