@worksafevictoria/wcl7.5 1.9.0-beta.4 → 1.9.0-beta.6

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

@@ -1,35 +1,51 @@
 <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="searchRem" placeholder="Removalist" class="search">
+        <input type="text" v-model="searchRem" placeholder="Removalist" 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="Location" class="search">
+        <input type="text" v-model="searchSub" placeholder="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="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>
+          <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">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchServices" placeholder="Services" class="search">
+        <input
+          type="text"
+          v-model="searchServices"
+          placeholder="Services"
+          class="search"
+        />
       </column>
       <column md="2">
         <filter-button
@@ -42,54 +58,51 @@
       </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 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,
     FilterButton,
-    Pagination
+    Pagination,
   },
   data() {
     return {
-      searchRem: '',
-      searchSub: '',
-      searchClass: '',
-      searchServices: '',
+      searchRem: "",
+      searchSub: "",
+      searchClass: "",
+      searchServices: "",
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true
-    }
+      hideReset: true,
+    };
   },
   props: {
     items: {
@@ -97,44 +110,58 @@ export default {
       required: true,
     },
   },
- 
-  computed: {
 
+  computed: {
     filteredRecords() {
-      let results = this.flatRecords
-     
+      let results = this.flatRecords;
+
       if (this.searchRem.length) {
-        this.hideReset = false
-        results = results.filter(item => item.title.toLowerCase().includes(this.searchRem.toLowerCase()))
+        this.hideReset = false;
+        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()))
+        this.hideReset = false;
+        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()))
+        this.hideReset = false;
+        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()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.services.toLowerCase().includes(this.searchServices.toLowerCase())
+        );
       }
-      this.filteredItems = results
+      this.filteredItems = results;
 
-      if (this.searchRem.length || this.searchSub.length || this.searchClass.length || this.searchServices.length) {
-        this.pageChanged(1)
+      if (
+        this.searchRem.length ||
+        this.searchSub.length ||
+        this.searchClass.length ||
+        this.searchServices.length
+      ) {
+        this.pageChanged(1);
       }
 
-      return results
+      return results;
     },
-  
+
     flatRecords() {
-      let flatRecords = []
-      const sortedItems = this.items.sort((a, b) => a.ResourceName.localeCompare(b.ResourceName, 'en', {'sensitivity': 'base'}))
-      
+      let flatRecords = [];
+      const sortedItems = this.items.sort((a, b) =>
+        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,
@@ -145,118 +172,123 @@ export default {
           email1: record.ContactEmail,
           phone1: record.ContactPhoneDisp,
           mobile1: record.ContactMobileDisp,
-          services: record.ServicesAll.replace(/,$/, ''),
-          serviceCategory: record.ServiceAll
-        })
-      })
-      return flatRecords
+          services: record.ServicesAll.replace(/,$/, ""),
+          serviceCategory: record.ServiceAll,
+        });
+      });
+      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;
     },
 
     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 || 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) {
       // 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>