@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

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

@@ -1,35 +1,75 @@
 <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">
+        <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">
-        <select id="filterType" v-model="searchClass" name="filter" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Service class</option>
-          <option value="Class A Asbestos Removalists">Class A Asbestos Removalists</option>
-          <option value="Class B Asbestos Removalists">Class B Asbestos Removalists</option>
-          <option value="Class A - Restricted - Asbestos Removalists">Class A - Restricted - Asbestos Removalists</option>
-          <option value="Class B - Restricted - Asbestos Removalists">Class B - Restricted - Asbestos Removalists</option>
+        <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>
+          <option value="Class A Asbestos Removalists">
+            Class A Asbestos Removalists
+          </option>
+          <option value="Class B Asbestos Removalists">
+            Class B Asbestos Removalists
+          </option>
+          <option value="Class A - Restricted - Asbestos Removalists">
+            Class A - Restricted - Asbestos Removalists
+          </option>
+          <option value="Class B - Restricted - Asbestos Removalists">
+            Class B - Restricted - Asbestos Removalists
+          </option>
         </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 type="text" v-model="searchServices" placeholder="Services" class="search">
+        <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>
       <column md="2">
         <filter-button
@@ -42,32 +82,29 @@
       </column>
     </row>
     <!-- AR Records -->
-    <div class="dirRecords" >
-      <template v-for="(item, index) in resultChunks[page]" >
-        <ar-record v-if="item.type === 'ar'" :key="index" :item="item"/>
+    <div class="dirRecords">
+      <template v-for="(item, index) in resultChunks[page]">
+        <ar-record v-if="item.type === 'ar'" :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 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 FilterButton from '../../../../Common/FilterButton/index.vue' //Reset
 import Pagination from '../../HSCP/Records/pagination.vue'
 
 export default {
@@ -76,7 +113,7 @@ export default {
     arRecord,
     SectionGroup,
     FilterButton,
-    Pagination
+    Pagination,
   },
   data() {
     return {
@@ -88,7 +125,7 @@ export default {
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true
+      hideReset: true,
     }
   },
   props: {
@@ -97,41 +134,61 @@ export default {
       required: true,
     },
   },
- 
-  computed: {
 
+  computed: {
     filteredRecords() {
       let results = this.flatRecords
-     
+
       if (this.searchRem.length) {
         this.hideReset = false
-        results = results.filter(item => item.title.toLowerCase().includes(this.searchRem.toLowerCase()))
+        results = results.filter((item) =>
+          item.title.toLowerCase().includes(this.searchRem.toLowerCase()),
+        )
       }
       if (this.searchSub.length) {
         this.hideReset = false
-        results = results.filter(item => item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase()))
+        results = results.filter((item) =>
+          item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase()),
+        )
       }
       if (this.searchClass.length) {
         this.hideReset = false
-        results = results.filter(item => item.serviceCategory.toLowerCase().includes(this.searchClass.toLowerCase()))
+        results = results.filter((item) =>
+          item.serviceCategory
+            .toLowerCase()
+            .includes(this.searchClass.toLowerCase()),
+        )
       }
       if (this.searchServices.length) {
         this.hideReset = false
-        results = results.filter(item => item.services.toLowerCase().includes(this.searchServices.toLowerCase()))
+        results = results.filter((item) =>
+          item.services
+            .toLowerCase()
+            .includes(this.searchServices.toLowerCase()),
+        )
       }
       this.filteredItems = results
 
-      if (this.searchRem.length || this.searchSub.length || this.searchClass.length || this.searchServices.length) {
+      if (
+        this.searchRem.length ||
+        this.searchSub.length ||
+        this.searchClass.length ||
+        this.searchServices.length
+      ) {
         this.pageChanged(1)
       }
 
       return results
     },
-  
+
     flatRecords() {
       let flatRecords = []
-      const sortedItems = this.items.sort((a, b) => a.ResourceName.localeCompare(b.ResourceName, 'en', {'sensitivity': 'base'}))
-      
+      const sortedItems = this.items.sort((a, b) =>
+        a.ResourceName.localeCompare(b.ResourceName, 'en', {
+          sensitivity: 'base',
+        }),
+      )
+
       sortedItems.forEach((record) => {
         flatRecords.push({
           type: 'ar',
@@ -141,12 +198,15 @@ export default {
           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(/,$/, ''),
-          serviceCategory: record.ServiceAll
+          serviceCategory: record.ServiceAll,
         })
       })
       return flatRecords
@@ -165,21 +225,24 @@ export default {
     },
     pageResultCount() {
       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 !== '') {
+      }
+      if (
+        startUrl.toLowerCase() !== 'htt' &&
+        startUrl.toLowerCase() !== 'www' &&
+        url !== ''
+      ) {
         returnUrl = 'https://www.' + url
-      } 
-      return returnUrl  
+      }
+      return returnUrl
     },
 
     returnContact(firstN, lastN) {
@@ -195,13 +258,13 @@ export default {
             chunk[chunk.length - 1].push(val)
             return chunk
           },
-          [[]]
+          [[]],
         )
         return chunked
       }
       return [[]]
     },
-    
+
     reset() {
       this.collapseOrgs('No')
       this.hideReset = true
@@ -214,13 +277,18 @@ export default {
     pageChanged(ev) {
       this.page = ev - 1
 
-      if (this.searchRem.length || this.searchSub.length || this.searchClass.length || this.searchServices.length) {
-          // don't set focus
-          // don't collapseOrgs
-        } else {
-          // set focus to top element - used instead of scrollTo
-          this.collapseOrgs('Yes')
-        } 
+      if (
+        this.searchRem.length ||
+        this.searchSub.length ||
+        this.searchClass.length ||
+        this.searchServices.length
+      ) {
+        // don't set focus
+        // don't collapseOrgs
+      } else {
+        // set focus to top element - used instead of scrollTo
+        this.collapseOrgs('Yes')
+      }
     },
 
     collapseOrgs(focusLink) {
@@ -237,11 +305,9 @@ export default {
           linksArr[0].focus()
         }
       }
-
     },
 
     toTitleCase(strVal) {
-
       let retVal = strVal.trim()
 
       const firstChar = retVal.charAt(0)
@@ -252,11 +318,10 @@ export default {
 
       return retVal
     },
-  }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../../HSCP/styles.scss'
-
+@import '../../HSCP/styles.scss';
 </style>