@worksafevictoria/wcl7.5 1.9.0-beta.14 → 1.9.0-beta.16

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

@@ -4,21 +4,43 @@
     <row style="column-gap: 16px">
       <!-- Keyword Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="keyword-search">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchRem" placeholder="Removalist" class="search" />
+        <input
+          id="keyword-search"
+          type="text"
+          v-model="searchRem"
+          placeholder="Removalist"
+          aria-label="Search by keyword (typed keyword automatically filters below results)"
+          class="search"
+        />
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="suburb-search">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchSub" placeholder="Location" class="search" />
+        <input
+          id="suburb-search"
+          type="text"
+          v-model="searchSub"
+          placeholder="Location"
+          aria-label="Search by suburb (typed suburb automatically filters below results)"
+          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="searchClass" name="filter" class="selectClass">
+        <label class="col-form-label visually-hidden" for="filterType">
+          Filter Type
+        </label>
+        <select
+          id="filterType"
+          v-model="searchClass"
+          name="filter"
+          class="selectClass"
+          aria-label="Filter Type"
+        >
           <option class="placeholder" value="" disabled hidden selected>
             Service class
           </option>
@@ -37,13 +59,15 @@
         </select>
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="search-services">
           Search by suburb (typed suburb automatically filters below results)
         </label>
         <input
+          id="search-services"
           type="text"
           v-model="searchServices"
           placeholder="Services"
+          aria-label="Search by suburb (typed suburb automatically filters below results)"
           class="search"
         />
       </column>
@@ -77,14 +101,14 @@
 </template>
 
 <script>
-import arRecord 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 "../../HSCP/Records/pagination.vue";
+import arRecord 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 '../../HSCP/Records/pagination.vue'
 
 export default {
-  name: "Asbestos",
+  name: 'Asbestos',
   components: {
     arRecord,
     SectionGroup,
@@ -93,16 +117,16 @@ export default {
   },
   data() {
     return {
-      searchRem: "",
-      searchSub: "",
-      searchClass: "",
-      searchServices: "",
+      searchRem: '',
+      searchSub: '',
+      searchClass: '',
+      searchServices: '',
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
       hideReset: true,
-    };
+    }
   },
   props: {
     items: {
@@ -113,33 +137,37 @@ export default {
 
   computed: {
     filteredRecords() {
-      let results = this.flatRecords;
+      let results = this.flatRecords
 
       if (this.searchRem.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.title.toLowerCase().includes(this.searchRem.toLowerCase())
-        );
+          item.title.toLowerCase().includes(this.searchRem.toLowerCase()),
+        )
       }
       if (this.searchSub.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase())
-        );
+          item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase()),
+        )
       }
       if (this.searchClass.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.serviceCategory.toLowerCase().includes(this.searchClass.toLowerCase())
-        );
+          item.serviceCategory
+            .toLowerCase()
+            .includes(this.searchClass.toLowerCase()),
+        )
       }
       if (this.searchServices.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.services.toLowerCase().includes(this.searchServices.toLowerCase())
-        );
+          item.services
+            .toLowerCase()
+            .includes(this.searchServices.toLowerCase()),
+        )
       }
-      this.filteredItems = results;
+      this.filteredItems = results
 
       if (
         this.searchRem.length ||
@@ -147,102 +175,107 @@ export default {
         this.searchClass.length ||
         this.searchServices.length
       ) {
-        this.pageChanged(1);
+        this.pageChanged(1)
       }
 
-      return results;
+      return results
     },
 
     flatRecords() {
-      let flatRecords = [];
+      let flatRecords = []
       const sortedItems = this.items.sort((a, b) =>
-        a.ResourceName.localeCompare(b.ResourceName, "en", { sensitivity: "base" })
-      );
+        a.ResourceName.localeCompare(b.ResourceName, 'en', {
+          sensitivity: 'base',
+        }),
+      )
 
       sortedItems.forEach((record) => {
         flatRecords.push({
-          type: "ar",
+          type: 'ar',
           title: record.ResourceName,
           fullAddress: record.AddressLine2,
           workPhone: record.Phone,
           mobilePhone: record.CompanyMobile,
           email: record.CompanyEmailDisp,
           website: this.formatWebsite(record.CompanyWebURLDisp),
-          contact1: this.returnContact(record.ContactFirstName, record.ContactLastName),
+          contact1: this.returnContact(
+            record.ContactFirstName,
+            record.ContactLastName,
+          ),
           email1: record.ContactEmail,
           phone1: record.ContactPhoneDisp,
           mobile1: record.ContactMobileDisp,
-          services: record.ServicesAll.replace(/,$/, ""),
+          services: record.ServicesAll.replace(/,$/, ''),
           serviceCategory: record.ServiceAll,
-        });
-      });
-      return flatRecords;
+        })
+      })
+      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: {
     formatWebsite(url) {
-      let startUrl = url.slice(0, 3);
-      let returnUrl = url;
-      if (startUrl.toLowerCase() === "www") {
-        returnUrl = "https://" + 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 !== ""
+        startUrl.toLowerCase() !== 'htt' &&
+        startUrl.toLowerCase() !== 'www' &&
+        url !== ''
       ) {
-        returnUrl = "https://www." + url;
+        returnUrl = 'https://www.' + url
       }
-      return returnUrl;
+      return returnUrl
     },
 
     returnContact(firstN, lastN) {
-      let retContact = [firstN, lastN].filter(Boolean).join(" ");
-      return retContact;
+      let retContact = [firstN, lastN].filter(Boolean).join(' ')
+      return retContact
     },
 
     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.searchRem = "";
-      this.searchClass = "";
-      this.searchSub = "";
-      this.searchServices = "";
+      this.collapseOrgs('No')
+      this.hideReset = true
+      this.searchRem = ''
+      this.searchClass = ''
+      this.searchSub = ''
+      this.searchServices = ''
     },
 
     pageChanged(ev) {
-      this.page = ev - 1;
+      this.page = ev - 1
 
       if (
         this.searchRem.length ||
@@ -254,41 +287,41 @@ export default {
         // don't collapseOrgs
       } else {
         // set focus to top element - used instead of scrollTo
-        this.collapseOrgs("Yes");
+        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 "../../HSCP/styles.scss";
+@import '../../HSCP/styles.scss';
 </style>