@worksafevictoria/wcl7.5 1.10.0 → 1.11.0

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

@@ -1,30 +1,48 @@
 <template>
   <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
-    <row style="column-gap: 16px;">
+    <row style="column-gap: 16px">
       <!-- Keyword Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchOrg" placeholder="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="Training location" 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">
+        <label class="visually-hidden" for="filterType"> Filter Type </label>
         <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>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">
+        <select
+          id="filterTheme"
+          v-model="searchThemes"
+          name="filter1"
+          class="selectClass"
+        >
           <option class="placeholder" value="" disabled hidden selected>Theme</option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
             {{ opt }}
@@ -42,54 +60,51 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="dirRecords" >
-      <template v-for="(item, index) in resultChunks[page]" >
-        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
+    <div class="dirRecords">
+      <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">
-        <pagination
-          :total-pages="totalPages"
-          :total="totalResults"
-          :per-page="perPage"
-          :current-page="page + 1"
-          @pagechanged="pageChanged($event)"
-        />
-      </div>
+      <pagination
+        :total-pages="totalPages"
+        :total="totalResults"
+        :per-page="perPage"
+        :current-page="page + 1"
+        @pagechanged="pageChanged($event)"
+      />
+    </div>
     <h4 v-if="filteredRecords.length === 0">No records found</h4>
-
   </section-group>
-  
 </template>
 
 <script>
-
-import hscpRecord from './SingleRecord/index.vue'
-import searchIcon from './../../../../../assets/icons/search.svg?url'
-import SectionGroup from '../../../../Containers/SectionGroup/index.vue'
-import FilterButton from '../../../../Common/FilterButton/index.vue'  //Reset
-import Pagination from './pagination.vue'
+import hscpRecord from "./SingleRecord/index.vue";
+import searchIcon from "./../../../../../assets/icons/search.svg?url";
+import SectionGroup from "../../../../Containers/SectionGroup/index.vue";
+import FilterButton from "../../../../Common/FilterButton/index.vue"; //Reset
+import Pagination from "./pagination.vue";
 
 export default {
-  name: 'HSCP',
+  name: "HSCP",
   components: {
     hscpRecord,
     SectionGroup,
     FilterButton,
-    Pagination
+    Pagination,
   },
   data() {
     return {
-      searchOrg: '',
-      searchSub: '',
-      searchCourse: '',
-      searchThemes: '',
+      searchOrg: "",
+      searchSub: "",
+      searchCourse: "",
+      searchThemes: "",
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true
-    }
+      hideReset: true,
+    };
   },
   props: {
     items: {
@@ -97,23 +112,22 @@ export default {
       required: true,
     },
   },
- 
-  computed: {
 
+  computed: {
     themeOptions() {
       // Concatenate all themes, remove duplicates, sort and use for a drop-down list
-      let allThemes = this.flatRecords.map(a => a.themes)
-      allThemes = allThemes.join(',')
-      allThemes = allThemes.trim()
-      allThemes = allThemes.split(',')
+      let allThemes = this.flatRecords.map((a) => a.themes);
+      allThemes = allThemes.join(",");
+      allThemes = allThemes.trim();
+      allThemes = allThemes.split(",");
       // Change all themes to title case
       for (var i = 0; i < allThemes.length; i++) {
-        let newVal = this.toTitleCase(allThemes[i])
-        allThemes[i] = newVal
+        let newVal = this.toTitleCase(allThemes[i]);
+        allThemes[i] = newVal;
       }
       // Remove duplicates
-      let s = new Set(allThemes)
-      allThemes = [...s]
+      let s = new Set(allThemes);
+      allThemes = [...s];
 
       // Sort the themes
       let sortedThemes = allThemes.sort((a, b) => {
@@ -124,42 +138,55 @@ export default {
           return 1;
         }
         return 0;
-      })
-      allThemes = sortedThemes
+      });
+      allThemes = sortedThemes;
 
-      return allThemes
+      return allThemes;
     },
 
     filteredRecords() {
-      let results = this.flatRecords
-     
+      let results = this.flatRecords;
+
       if (this.searchOrg.length) {
-        this.hideReset = false
-        results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.title.toLowerCase().includes(this.searchOrg.toLowerCase())
+        );
       }
       if (this.searchSub.length) {
-        this.hideReset = false
-        results = results.filter(item => item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase())
+        );
       }
       if (this.searchCourse.length) {
-        this.hideReset = false
-        results = results.filter(item => item.courses.toLowerCase().includes(this.searchCourse.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.courses.toLowerCase().includes(this.searchCourse.toLowerCase())
+        );
       }
       if (this.searchThemes.length) {
-        this.hideReset = false
-        results = results.filter(item => item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.themes.toLowerCase().includes(this.searchThemes.toLowerCase())
+        );
       }
-      this.filteredItems = results
+      this.filteredItems = results;
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-        this.pageChanged(1)
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
+        this.pageChanged(1);
       }
 
-      return results
+      return results;
     },
-  
+
     flatRecords() {
-      let flatRecords = []
+      let flatRecords = [];
       const sortedItems = this.items.sort((a, b) => {
         if (a.Organisation < b.Organisation) {
           return -1;
@@ -168,10 +195,10 @@ export default {
           return 1;
         }
         return 0;
-      })
-     sortedItems.forEach((record) => {
+      });
+      sortedItems.forEach((record) => {
         flatRecords.push({
-          type: 'hscp',
+          type: "hscp",
           title: record.Organisation,
           fullAddress: record.Main_office_address,
           orgAcronym: record.Organisation_acronym,
@@ -185,116 +212,119 @@ export default {
           contact2: record.Contact_2_Name,
           email2: record.Contact_2_Email,
           phone2: record.Contact_2_Phone,
-          courses: record.Training_courses.replace(/,$/, ''),
-          themes: record.Themes.replace(/,$/, ''),
-          trainingVenues: record.Training_venues
-        })
-      })
-      return flatRecords
+          courses: record.Training_courses.replace(/,$/, ""),
+          themes: record.Themes.replace(/,$/, ""),
+          trainingVenues: record.Training_venues,
+        });
+      });
+      return flatRecords;
     },
     resultChunks() {
-      return this.chunkify(this.filteredItems || this.items, this.perPage)
+      return this.chunkify(this.filteredItems || this.items, this.perPage);
     },
     noRecordsFound() {
-      return this.resultChunks[0].length === 0
+      return this.resultChunks[0].length === 0;
     },
     totalResults() {
-      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0
+      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0;
     },
     totalPages() {
-      return this.resultChunks.length
+      return this.resultChunks.length;
     },
     pageResultCount() {
-      return this.resultChunks[this.page].length
-    }
+      return this.resultChunks[this.page].length;
+    },
   },
-  
-  methods: {
 
+  methods: {
     formatWebsite(url) {
-      let startUrl = url.slice(0, 3)
-      let returnUrl = url
-      if (startUrl.toLowerCase() === 'www') {
-        returnUrl = 'https://' + url
-      } 
-      if (startUrl.toLowerCase() !== 'htt' && startUrl.toLowerCase() !== 'www' && url !== '') {
-        returnUrl = 'https://www.' + url
-      } 
-      return returnUrl
+      let startUrl = url.slice(0, 3);
+      let returnUrl = url;
+      if (startUrl.toLowerCase() === "www") {
+        returnUrl = "https://" + url;
+      }
+      if (
+        startUrl.toLowerCase() !== "htt" &&
+        startUrl.toLowerCase() !== "www" &&
+        url !== ""
+      ) {
+        returnUrl = "https://www." + url;
+      }
+      return returnUrl;
     },
 
     chunkify(arr, n) {
       if (arr) {
         const chunked = arr.reduce(
           (chunk, val) => {
-            if (chunk[chunk.length - 1].length === n) chunk.push([])
-            chunk[chunk.length - 1].push(val)
-            return chunk
+            if (chunk[chunk.length - 1].length === n) chunk.push([]);
+            chunk[chunk.length - 1].push(val);
+            return chunk;
           },
           [[]]
-        )
-        return chunked
+        );
+        return chunked;
       }
-      return [[]]
+      return [[]];
     },
-    
+
     reset() {
-      this.collapseOrgs('No')
-      this.hideReset = true
-      this.searchOrg = ''
-      this.searchCourse = ''
-      this.searchSub = ''
-      this.searchThemes = ''
+      this.collapseOrgs("No");
+      this.hideReset = true;
+      this.searchOrg = "";
+      this.searchCourse = "";
+      this.searchSub = "";
+      this.searchThemes = "";
     },
 
     pageChanged(ev) {
-      this.page = ev - 1
+      this.page = ev - 1;
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-          // don't set focus
-          // don't collapseOrgs
-        } else {
-          // set focus to top element - used instead of scrollTo
-          this.collapseOrgs('Yes')
-        } 
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
+        // don't set focus
+        // don't collapseOrgs
+      } else {
+        // set focus to top element - used instead of scrollTo
+        this.collapseOrgs("Yes");
+      }
     },
 
     collapseOrgs(focusLink) {
       // called by pageChanged and reset.  pageChanged called by filter and by pagination links
-      const aLinks = document.getElementsByName('titleLink')
+      const aLinks = document.getElementsByName("titleLink");
       // Convert nodelist to array
-      let linksArr = Array.from(aLinks)
+      let linksArr = Array.from(aLinks);
       if (Array.isArray(linksArr) && linksArr.length > 0) {
         linksArr
-          .filter((link) => link.getAttribute('aria-expanded') === 'true')
-          .forEach((link) => link.click())
+          .filter((link) => link.getAttribute("aria-expanded") === "true")
+          .forEach((link) => link.click());
 
-        if (focusLink === 'Yes') {
-          linksArr[0].focus()
+        if (focusLink === "Yes") {
+          linksArr[0].focus();
         }
       }
-
     },
 
     toTitleCase(strVal) {
+      let retVal = strVal.trim();
 
-      let retVal = strVal.trim()
-
-      const firstChar = retVal.charAt(0)
-      const firstCharU = firstChar.toUpperCase()
-      const remChar = retVal.slice(1)
+      const firstChar = retVal.charAt(0);
+      const firstCharU = firstChar.toUpperCase();
+      const remChar = retVal.slice(1);
 
-      retVal = firstCharU + remChar
+      retVal = firstCharU + remChar;
 
-      return retVal
+      return retVal;
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-@import '../styles.scss'
-
-
+@import "../styles.scss";
 </style>

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

@@ -13,8 +13,8 @@
       :class="`paragraph--tabs ${workwell ? 'workwell' : ''}`"
     >
       <template v-slot:cardItem>
-        <b-tabs v-model="tabIndex">
-          <b-tab
+        <BTabs v-model:index="tabIndex" card>
+          <BTab
             v-for="(item, index) in items"
             :key="`${index}-${$.uid}`"
             :title="item.title"
@@ -24,8 +24,8 @@
               :content="item.content.value"
               :without-container="true"
             />
-          </b-tab>
-        </b-tabs>
+          </BTab>
+        </BTabs>
       </template>
     </card-grid>
     <container v-else class="pdf-tabs">

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

@@ -5,7 +5,7 @@
     :size="'content'"
   >
     <div :class="isFluid ? 'table-scrolled' : ''">
-      <b-table
+      <BTable
         v-if="items"
         :items="items"
         :fields="fields"
@@ -22,6 +22,7 @@
           <span
             class="iconHeader table-active"
             tabindex="0"
+            role="button"
             @keypress.enter="accessSort(data.field)"
             scope="colgroup"
           >
@@ -31,13 +32,13 @@
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
                 :src="CaretUp"
                 alt="image indicating ascending sort"
-                class="iconAsc"
+                class="collapse icon"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
                 :src="CaretDown"
                 alt="image indicating descending sort"
-                class="iconDesc"
+                class="expand icon"
               />
             </span>
           </span>
@@ -45,20 +46,20 @@
         <template #cell()="data">
           <rich-text :content="data.value" />
         </template>
-      </b-table>
+      </BTable>
     </div>
   </section-group>
 </template>
 
 <script>
-import SectionGroup from "./../../Containers/SectionGroup/index.vue";
-import RichText from "../../Paragraphs/RichText/index.vue";
-import { BTable } from "bootstrap-vue-next";
-import CaretUp from "./../../../assets/icons/caret-up.svg?url";
-import CaretDown from "./../../../assets/icons/caret-down.svg?url";
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BTable } from 'bootstrap-vue-next'
+import CaretUp from './../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../assets/icons/caret-down.svg?url'
 
 export default {
-  name: "TabulatedData",
+  name: 'TabulatedData',
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -79,7 +80,7 @@ export default {
     },
     caption: {
       type: String,
-      default: "",
+      default: '',
       required: false,
     },
     sortBy: {
@@ -90,33 +91,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
       //sortDesc: false,
       CaretUp,
       CaretDown,
-    };
+    }
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth;
+      return this.isFixedWidth
     },
   },
   methods: {
     accessSort(fieldVar) {
-      const currentSort = fieldVar.thAttr["aria-sort"];
-      if (currentSort === "ascending") {
-        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
+      const currentSort = fieldVar.thAttr['aria-sort']
+      if (currentSort === 'ascending') {
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import "../../../includes/scss/all";
+  @import '../../../includes/scss/all';
 
   .section-group__block {
     margin-top: -32px;