@worksafevictoria/wcl7.5 1.8.0-beta.1 → 1.8.0-beta.11

package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.stories.js

@@ -0,0 +1,30 @@
+import arRecord from './index.vue'
+
+const arData = 
+    {
+        title: 'Ventia Utility Services Pty Limited',
+        fullAddress: 'Ventia - Cardinia Building, 25 Lucknow Street MITCHAM VIC 3132',
+        workPhone: '0438531164',
+        mobilePhone: '0438531164',
+        email: 'daniel.dehaan@ventia.com',
+        website: 'http://www.ventia.com.au',
+        contact1: 'Daniel DeHaan',
+        phone1: '0438531164',
+        email1: 'daniel.dehaan@ventia.com',
+        mobile1: '0438531164',
+        serviceCategory: 'Class B - Restricted - Asbestos Removalists',
+        services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
+    }
+
+
+export default {
+    title: 'Paragraphs/Directory/Asbestos/SingleRecord',
+    component: arRecord,
+    tags: ['autodocs']
+}
+
+export const Removalist = {}
+
+Removalist.args = {
+    item: arData,    
+}

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="paragraph--directory__records--dir">
+    <!-- Main details -->
+    <container>
+      <row class="records">
+        <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" >
+          <div class="label">Office address</div>
+          <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.workPhone || item.mobilePhone" :href="`tel:${item.workPhone || item.mobilePhone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.workPhone || item.mobilePhone }}
+          </a>
+        </column>
+      </row>
+      <div class="dir-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>
+    </container>
+    
+    <!-- Additional Content -->
+    <container>
+      <div v-if="this.visible">
+      <div style="padding-top: 20px;">
+        <hr>
+      </div>
+      <!-- Contacts, if any -->
+      <div v-if="validContacts">
+        <row >
+        <column >
+          <h4>Contact Information</h4>
+        </column>
+      </row>
+      <row v-if="item.contact1 !== ''">
+        <column sm="2" class="label" >
+          Contact
+        </column>
+        <column sm="4" class="dir-additional-records">
+          {{item.contact1}}
+        </column>
+      </row>
+      <row v-if="item.phone1 !== ''">
+        <column sm="2" class="label" >
+          Phone
+        </column>
+        <column sm="4" class="dir-additional-records" >
+          {{item.phone1}}
+        </column>
+      </row>
+      <row v-if="item.mobile1 !== ''">
+        <column sm="2" class="label" >
+          Mobile
+        </column>
+        <column sm="4" class="dir-additional-records" >
+          {{item.mobile1}}
+        </column>
+      </row>
+      <row v-if="item.email1 !== ''">
+        <column sm="2" class="label" >
+          Email
+        </column>
+        <column sm="4" class="dir-additional-records">
+          {{item.email1}}
+        </column>
+      </row>
+      </div>
+     <div v-if="item.serviceCategory">
+      <row class="row-dir-additional">
+        <column>
+          <h4> {{ item.serviceCategory }}</h4>
+        </column>
+      </row>
+      <row class="dir-additional-records">
+        <column  >
+          <ul>
+            <li v-for="(serv) in item.services.split(',')" :key="serv.id">
+              {{serv}}
+            </li>
+          </ul> 
+        </column>
+      </row>
+     </div>
+    </div>
+    </container>
+  </div>
+</template>
+<script>
+import Container from '../../../../../Containers/Container/index.vue'
+import Row from '../../../../../Containers/Row/index.vue'
+import Column from '../../../../../Containers/Column/index.vue'
+import CaretUp from './../../../../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../../../../assets/icons/caret-down.svg?url'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column,
+},
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      CaretUp,
+      CaretDown,
+    }
+  },
+  computed: {
+    gMapLink() {
+      return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
+    },
+    validContacts() {
+      if (this.item.contact1 === '' && this.item.phone1 === '' && this.item.email1 === '' && this.item.mobile1 === '') {
+        return false
+      } else {
+        return true
+      }
+    }
+
+  },
+  methods: {
+    handleClick(title) {
+      this.visible = !this.visible
+      if (this.$gtm) {
+        if (this.visible) {
+          this.$gtm.push({ event: 'custom.search.prs.open', title })
+        } else {
+          this.$gtm.push({
+            event: 'custom.search.prs.close',
+            title
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+@import '../../../HSCP/Records/SingleRecord/styles.scss'
+
+</style>
+

package/src/components/Paragraphs/Directory/Asbestos/Records/index.stories.js

@@ -0,0 +1,19 @@
+import Records from './index.vue'
+import { arData } from '../../../../../mock/asbestos-removalists'
+
+
+export default {
+    title: 'Paragraphs/Directory/Asbestos/Records',
+    component: Records,
+    tags: ['autodocs'],
+    data() {
+        return {
+            arData
+        }
+      },
+      args: {
+        items: arData,
+      },
+}
+
+export const Removalists = {}

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

@@ -0,0 +1,259 @@
+<template>
+  <section-group class="paragraph--directory dir-filters">
+    <!-- Filters -->
+    <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">
+      </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="Address" 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>
+        </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">
+      </column>
+      <column md="2">
+        <filter-button
+          v-if="!hideReset"
+          filter-button="!hideReset"
+          :is-reset="true"
+          class="filterButton__button filterButton__button--reset"
+          @clicked="reset"
+        />
+      </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"/>
+      </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>
+    <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'
+
+export default {
+  name: 'Asbestos',
+  components: {
+    arRecord,
+    SectionGroup,
+    FilterButton,
+    Pagination
+  },
+  data() {
+    return {
+      searchRem: '',
+      searchSub: '',
+      searchClass: '',
+      searchServices: '',
+      filteredItems: null,
+      perPage: 10,
+      page: 0,
+      searchIcon,
+      hideReset: true
+    }
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+ 
+  computed: {
+
+    filteredRecords() {
+      let results = this.flatRecords
+     
+      if (this.searchRem.length) {
+        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()))
+      }
+      if (this.searchClass.length) {
+        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.filteredItems = results
+
+      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'}))
+      
+      sortedItems.forEach((record) => {
+        flatRecords.push({
+          type: 'ar',
+          title: record.ResourceName,
+          fullAddress: record.CompanyAddress + ' ' + record.AddressLine2,
+          workPhone: record.Phone,
+          mobilePhone: record.CompanyMobile,
+          email: record.CompanyEmailDisp,
+          website: this.formatWebsite(record.CompanyWebURLDisp),
+          contact1: this.returnContact(record.ContactFirstName, record.ContactLastName),
+          email1: record.ContactEmail,
+          phone1: record.ContactPhoneDisp,
+          mobile1: record.ContactMobileDisp,
+          services: record.ServicesAll.replace(/,$/, ''),
+          serviceCategory: record.ServiceAll
+        })
+      })
+      return flatRecords
+    },
+    resultChunks() {
+      return this.chunkify(this.filteredItems || this.items, this.perPage)
+    },
+    noRecordsFound() {
+      return this.resultChunks[0].length === 0
+    },
+    totalResults() {
+      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0
+    },
+    totalPages() {
+      return this.resultChunks.length
+    },
+    pageResultCount() {
+      return this.resultChunks[this.page].length
+    }
+  },
+  
+  methods: {
+
+    formatWebsite(url) {
+      let startUrl = url.slice(0, 3)
+      if (startUrl.toLowerCase() === 'www') {
+        return 'https://' + url
+      } else {
+        return url
+      }
+    },
+
+    returnContact(firstN, lastN) {
+      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
+          },
+          [[]]
+        )
+        return chunked
+      }
+      return [[]]
+    },
+    
+    reset() {
+      this.collapseOrgs('No')
+      this.hideReset = true
+      this.searchRem = ''
+      this.searchClass = ''
+      this.searchSub = ''
+      this.searchServices = ''
+    },
+
+    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')
+        } 
+    },
+
+    collapseOrgs(focusLink) {
+      // called by pageChanged and reset.  pageChanged called by filter and by pagination links
+      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())
+
+        if (focusLink === 'Yes') {
+          linksArr[0].focus()
+        }
+      }
+
+    },
+
+    toTitleCase(strVal) {
+
+      let retVal = strVal.trim()
+
+      const firstChar = retVal.charAt(0)
+      const firstCharU = firstChar.toUpperCase()
+      const remChar = retVal.slice(1)
+
+      retVal = firstCharU + remChar
+
+      return retVal
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../HSCP/styles.scss'
+
+</style>