@worksafevictoria/wcl7.5 1.1.0-beta.10 → 1.1.0-beta.101

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

@@ -0,0 +1,321 @@
+<template>
+  <div class="paragraph--directory__records--hscp">
+    <!-- Main details -->
+    <container>
+      <row class="records">
+      <column md="2" sm="12" class="title" >
+        <a v-if="item.title" href="javascript:void(0)" @click="this.visible = !this.visible">
+          {{ item.title }}
+        </a>
+      </column>
+      <column md="2" sm="12" class="address" >
+        <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.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+          {{ item.tollfreePhone || item.workPhone }}
+        </a>
+      </column>
+    </row>
+    <div class="hscp-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>
+      <row >
+        <column >
+          <h4>Contact Information</h4>
+        </column>
+      </row>
+      <row>
+        <column sm="2" class="label">
+          Contact
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.contact1}}
+        </column>
+        <column sm="2" class="label">
+          Contact
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.contact2}}
+        </column>
+      </row>
+      <row>
+        <column sm="2" class="label">
+          Phone
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.phone1}}
+        </column>
+        <column sm="2" class="label">
+          Phone
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.phone2}}
+        </column>
+      </row>
+      <row>
+        <column sm="2" class="label">
+          Email
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.email1}}
+        </column>
+        <column sm="2" class="label">
+          Email
+        </column>
+        <column sm="4" class="hscp-additional-records">
+          {{item.email2}}
+        </column>
+      </row>
+      <row class="row-hscp-additional">
+        <column>
+          <h4>Training Venue Locations</h4>
+        </column>
+      </row>
+      <row class="hscp-additional-records">
+        <column v-if="item.trainingVenues.length" >
+          <ul>
+            <li v-for="(venue) in item.trainingVenues.split(',')" :key="venue.id">
+              {{venue}}
+            </li>
+          </ul> 
+        </column>
+        <column v-else-if="!item.trainingVenues.length">
+          <p>No training venues</p>
+        </column>
+      </row>
+      <row class="row-hscp-additional">
+        <column>
+          <h4>Training Courses</h4>
+        </column>
+      </row>
+      <row class="hscp-additional-records">
+        <column>
+          <ul>
+            <li v-for="(course) in item.courses.split(',')" :key="course.id">
+              {{course}}
+            </li>
+          </ul> 
+        </column>
+      </row>
+    </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}`
+    },
+  },
+  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 '../../../styles.scss';
+
+.row-hscp-additional {
+  margin-top: 20px;
+}
+
+.hscp-additional-records {
+  font-size: 16px;
+}
+
+.hscp-caret {
+  justify-content: end;
+  align-content: end;
+  max-width: 20px;
+  padding-right: 0px;
+  padding-bottom: 10px;
+  float:right;
+}
+.paragraph--directory__records--hscp {
+
+  padding-bottom: 20px !important;
+  
+  a {
+        color: $black;
+        text-decoration: none;
+      }
+      a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+
+  .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+  }
+  .address {
+    font-size: 15px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+  }
+  .coldata {
+    a {
+      color: inherit;
+    }
+  }
+  .label {
+      font-size: 16px;
+      font-weight: bold;
+  }
+  .longstring {
+    word-break: break-all;
+  }
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+}
+
+.paragraph--directory.hscp-filters {
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+  select {
+    -moz-appearance: none; /* Firefox */
+    -webkit-appearance: none; /* Safari and Chrome */
+    appearance: none;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 100%;
+    border: 1px solid $gray;
+    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    text-transform: capitalise;
+  }
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+      width: 50%;
+    }
+
+    @media (max-width: 539px) {
+      display: block;
+      width: 100%;
+      float: none;
+      margin-bottom: 16px;
+    }
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0px;
+    margin: 0;
+  }
+
+}
+</style>
+

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

@@ -0,0 +1,19 @@
+import Records from './index.vue'
+import { hscpData } from '../../../../../mock/course-provider'
+
+
+export default {
+    title: 'Paragraphs/Directory/HSCP/Records',
+    component: Records,
+    tags: ['autodocs'],
+    data() {
+        return {
+            hscpData
+        }
+      },
+      args: {
+        items: hscpData,
+      },
+}
+
+export const CourseProvider = {}

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

@@ -0,0 +1,348 @@
+<template>
+  <section-group class="paragraph--directory">
+    <div v-if="items.length" class="paragraph--directory__records">
+    <!-- Filters -->
+    <row class="paragraph--directory.hscp-filters">
+       <!-- Keyword Filters -->
+      <column class="colSearch" md="2" 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="Search organisation" class="search">
+      </column>
+      <column class="colSearch" md="2" 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="Search suburb" class="search">
+      </column>
+      <!-- Other Filters -->
+      <column class="colSearch" md="2" sm="6">
+        <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
+          <option class="placeholder" value="" disabled hidden selected>Search course type</option>
+          <option value="HSR Initial">HSR Initial</option>
+          <option value="HSR Refresher">HSR Refresher</option>
+        </select>
+      </column>
+      <column class="colSearch" md="4" sm="6" style="padding-left: 0px">
+        <select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
+          <option class="placeholder" value="" disabled hidden selected>Search theme</option>
+          <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </column>
+      <column>
+        <filter-button
+          v-if="!hideReset"
+          filter-button="!hideReset"
+          :is-reset="true"
+          class="filterButton__button filterButton__button--reset"
+          @clicked="reset"
+        />
+      </column>
+    </row>
+    <!-- HSCP Records -->
+    <div class="hscpRecords">
+      <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>
+    <h2 v-if="filteredRecords.length === 0">No records found</h2>
+  </div>
+  </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'
+
+export default {
+  name: 'HSCP',
+  components: {
+    hscpRecord,
+    SectionGroup,
+    FilterButton,
+    Pagination
+  },
+  data() {
+    return {
+      searchOrg: '',
+      searchSub: '',
+      searchCourse: '',
+      searchThemes: '',
+      filteredItems: null,
+      perPage: 10,
+      page: 0,
+      searchIcon,
+      hideReset: true,
+    }
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+ 
+  computed: {
+
+    themeOptions() {
+      // Requirement to remove certain values from original courses
+      let allThemes = this.flatRecords.map(a => a.courses)
+      allThemes = allThemes.join(',')
+      allThemes = allThemes.replace(/HSR initial/g, '')
+      allThemes = allThemes.replace(/HSR Initial/g, '')
+      allThemes = allThemes.replace(/HSR refresher - /g, '')
+      allThemes = allThemes.replace(/HSR Refresher - /g, '')
+      allThemes = allThemes.replace(/HSR refresher/g, '')
+      allThemes = allThemes.replace(/HSR Refresher/g, '')
+      allThemes = allThemes.trim()
+      allThemes = allThemes.split(',')
+      // Remove duplicates
+      let s = new Set(allThemes)
+      allThemes = [...s]
+      // Remove blank values - not completely successful
+      allThemes = allThemes.filter(n => n)
+      
+      // Sort the themes
+      let sortedThemes = allThemes.sort((a, b) => {
+        if (a.trim() < b.trim()) {
+          return -1;
+        }
+        if (a.trim() > b.trim()) {
+          return 1;
+        }
+        return 0;
+      })
+      if (sortedThemes[0].type === undefined) {
+        sortedThemes.splice(0, 1)
+      }
+      allThemes = sortedThemes
+      return allThemes
+    },
+
+    filteredRecords() {
+      let results = this.flatRecords
+      
+      if (this.searchOrg.length) {
+        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()))
+      }
+      if (this.searchCourse.length) {
+        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.courses.toLowerCase().includes(this.searchThemes.toLowerCase()))
+      }
+      this.filteredItems = results
+      return results
+    },
+  
+    flatRecords() {
+      let flatRecords = []
+      const sortedItems = this.items.sort((a, b) => {
+        if (a.Organisation < b.Organisation) {
+          return -1;
+        }
+        if (a.Organisation > b.Organisation) {
+          return 1;
+        }
+        return 0;
+      })
+     sortedItems.forEach((record) => {
+        flatRecords.push({
+          type: 'hscp',
+          title: record.Organisation,
+          fullAddress: record.Main_office_address,
+          orgAcronym: record.Organisation_acronym,
+          workPhone: record.Work_phone,
+          tollfreePhone: record.Toll_free_phone,
+          email: record.Email1,
+          website: this.formatWebsite(record.Website),
+          contact1: record.Contact_1,
+          email1: record.Contact_1_Email,
+          phone1: record.Contact_1_Phone,
+          contact2: record.Contact_2_Name,
+          email2: record.Contact_2_Email,
+          phone2: record.Contact_2_Phone,
+          courses: record.Training_courses.replace(/,$/, ''),
+          trainingVenues: record.Training_venues
+        })
+      })
+      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 'http://' + url
+      } else {
+        return url
+      }
+    },
+
+    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.hideReset = true
+      this.searchOrg = ''
+      this.searchCourse = ''
+      this.searchSub = ''
+      this.searchThemes = ''
+    },
+
+    pageChanged(ev) {
+      this.page = ev - 1
+      if (this.pageResultCount < this.perPage) {
+        console.log('scroll to records')
+        this.scrollToRecords()
+      }
+    },
+    scrollToRecords() {
+      if (this.$refs.records) {
+        const element = this.$refs.records
+        const top = element.offsetTop
+
+        const buttons = [...element.querySelectorAll('button')]
+        if (Array.isArray(buttons) && buttons.length > 0) {
+          buttons
+            .filter((button) => button.getAttribute('aria-expanded') === 'true')
+            .forEach((button) => button.click())
+
+          buttons[0].focus()
+        }
+
+        window.scrollTo({
+          top,
+          behavior: 'smooth',
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles.scss';
+.paragraph--directory.hscp-filters {
+
+  align-items: center !important;
+ 
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+      width: 50%;
+    }
+
+    @media (max-width: 539px) {
+      display: block;
+      width: 100%;
+      float: none;
+      margin-bottom: 16px;
+    }
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.filterButton__button--reset {
+  display: inline-block !important;
+  float: right;
+}
+
+.colSearch {
+  padding-right: 16px !important;
+}
+
+.hscpRecords {
+  padding-top: 16px;
+}
+
+  .input, 
+  .button, 
+  .select, 
+  .optgroup,
+  .selectClass {
+    display: inline-block;
+    height: 42px;
+    border-radius: 8px;
+    padding-right: 16px !important;
+    border: 1px solid $gray;
+  }
+
+  .search {
+  display: inline-block;
+  color: $black;
+  border: 1px solid $gray;
+  border-radius: 8px;
+  padding: 10px 12px;
+  height: 42px;
+  background-image: url('./../../../../../assets/icons/search.svg');
+  background-repeat: no-repeat !important;
+  background-position: 96% 12px;
+  margin-bottom: 16px;
+  transition: none;
+}
+
+</style>