@worksafevictoria/wcl7.5 1.5.0 → 1.6.0

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

@@ -0,0 +1,334 @@
+<template>
+  <div class="paragraph--directory__records--hscp">
+    <container>
+      <!-- Main details -->
+      <row>
+        <column class="title">
+          <a href="javascript:void(0)" @click="this.visible = !this.visible">
+            {{ item.title }}
+          </a>
+        </column>
+        <column class="address">
+          <a target="_blank" :href="gMapLink">
+            {{ item.fullAddress }}
+          </a>
+        </column>
+        <column class="contact">
+          <div class="label">Email</div>
+          <a target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
+            {{ item.email }}
+          </a>
+        </column>
+        <column class="contact">
+          <div class="label">Website</div>
+          <a target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
+            {{ item.website }}
+          </a>
+        </column>
+        <column class="contact">
+          <div class="label">Phone</div>
+          <a :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.tollfreePhone || item.workPhone }}
+          </a>
+        </column>
+        <column class="hscp-caret" sm="1">
+          <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
+            <img
+              style="float: right;"
+              :src="CaretUp"
+              height="12"
+              width="17"
+              alt="Expand Detail">
+          </a>
+          <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
+            <img
+              style="float: right;"
+              :src="CaretDown"
+              height="12"
+              width="17"
+              alt="Expand Detail">
+          </a>
+        </column>
+      </row>
+      <!-- Additional Content -->
+      <template v-if="this.visible">
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Contact Information</h4>
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Contact
+          </column>
+          <column sm="3">
+            {{item.contact1}}
+          </column>
+          <column sm="3" class="label">
+            Contact
+          </column>
+          <column sm="3">
+            {{item.contact2}}
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Phone
+          </column>
+          <column sm="3">
+            {{item.phone1}}
+          </column>
+          <column sm="3" class="label">
+            Phone
+          </column>
+          <column sm="3">
+            {{item.phone2}}
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Email
+          </column>
+          <column sm="3">
+            {{item.email1}}
+          </column>
+          <column sm="3" class="label">
+            Email
+          </column>
+          <column sm="3">
+            {{item.email2}}
+          </column>
+        </row>
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Training Venue Locations</h4>
+          </column>
+        </row>
+        <row>
+          <column>
+            <ul>
+              <li v-for="(venue) in item.trainingVenues" :key="venue.id">
+                {{venue}}
+              </li>
+            </ul> 
+          </column>
+        </row>
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Training Courses</h4>
+          </column>
+        </row>
+        <row>
+          <column>
+            <ul>
+              <li v-for="(course) in item.courses" :key="course.id">
+                {{course}}
+              </li>
+            </ul> 
+          </column>
+        </row>
+      </template>
+    </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-caret {
+  justify-content: end;
+  align-content: end;
+  border-radius: 0px;
+}
+.paragraph--directory__records--hscp {
+  
+  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;
+        }
+  }
+  .phone {
+    a {
+      color: inherit;
+    }
+  }
+  .label {
+      font-size: 15px;
+      font-weight: bold;
+  }
+}
+.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;
+  }
+
+  ul.records {
+    padding: 0;
+    margin: 0;
+
+    li {
+      text-align: left;
+      display: block;
+      width: 100%;
+      background: $white;
+      color: $black;
+      margin-bottom: 32px;
+      border: 1px solid $gray;
+      border-radius: 12px;
+      font-size: 14px;
+      padding: 16px;
+
+      .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+      }
+      .address {
+        font-size: 15px;
+        a {
+          color: inherit;
+        }
+      }
+      .phone {
+        a {
+          color: inherit;
+        }
+        .labl {
+          font-size: 15px;
+          font-weight: bold;
+        }
+      }
+
+      @media (max-width: 767px) {
+        .name,
+        .address,
+        .phone {
+          margin-bottom: 5px;
+          width: 100%;
+        }
+      }
+      .pagination-container {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
+

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

@@ -8,6 +8,7 @@
         :item="item"
         :location="baseLocation"
       />
+      <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item" />
       <cj-record v-if="item.type === 'cj'" :key="index" :item="item" />
     </template>
   </div>
@@ -16,26 +17,28 @@
 import PrsRecord from './PRS/index.vue'
 import IspRecord from './ISP/index.vue'
 import CjRecord from './CJ/index.vue'
+import HscpRecord from './HSCP/index.vue'
 
 export default {
   components: {
     PrsRecord,
     IspRecord,
-    CjRecord
+    CjRecord,
+    HscpRecord,
   },
   props: {
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     taxonomies: {
       type: Array,
-      required: true
+      required: true,
     },
     baseLocation: {
       type: [Object, Boolean],
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {
     flatRecords() {
@@ -66,13 +69,15 @@ export default {
                 field_prs_datepublished,
                 attachmentFormatted,
                 file_src_root,
-                file_src
-              } = {}
-            } = {}
+                file_src,
+              } = {},
+            } = {},
           } = record
 
           if (record_attachment !== undefined) {
-            file_src_root = process.env.CONTENT_API_URL
+            file_src_root = this.$config
+              ? this.$config.public.apiURL
+              : process.env.CONTENT_API_URL
             file_src = file_src_root + record_attachment
             attachmentFormatted = record_attachment
               .split(/.*[\/|\\]/)[1]
@@ -101,17 +106,17 @@ export default {
               court: this.getTaxonomyLabelsByTid('Court', record_prs_court),
               category: this.getTaxonomyLabelsByTid(
                 'Category',
-                record_prs_category
+                record_prs_category,
               ),
               legislation: this.getTaxonomyLabelsByTid(
                 'Legislation',
-                record_prs_legislation
-              )
+                record_prs_legislation,
+              ),
               // coram: this.getTaxonomyLabelsByTid(
               //   'record_prs_coram',
               //   record_prs_coram
               // )
-            }
+            },
           })
         }
         if (record.record_type === 'isp') {
@@ -121,9 +126,9 @@ export default {
               attributes: {
                 title,
                 field_location,
-                isp: { suburb, postcode, phone_number, mobile_number } = {}
-              } = {}
-            } = {}
+                isp: { suburb, postcode, phone_number, mobile_number } = {},
+              } = {},
+            } = {},
           } = record
           flatRecords.push({
             id: record_id,
@@ -131,15 +136,46 @@ export default {
             title,
             contact: {
               mobile: mobile_number,
-              phone: phone_number
+              phone: phone_number,
             },
             address: {
               suburb,
               postcode,
               map: {
-                field_location
-              }
-            }
+                field_location,
+              },
+            },
+          })
+        }
+        if (record.record_type === 'hscp') {
+          let {
+            record_id,
+            data: {
+              attributes: {
+                title,
+                hscp: {
+                  fulladdress,
+                  workphone,
+                  tollfreephone,
+                  email,
+                  website,
+                  courses,
+                  companyid,
+                } = {},
+              } = {},
+            } = {},
+          } = record
+          flatRecords.push({
+            id: record_id,
+            type: 'hscp',
+            title,
+            fulladdress,
+            workphone,
+            tollfreephone,
+            email,
+            website,
+            courses,
+            companyid,
           })
         }
         if (record.record_type === 'cj') {
@@ -152,9 +188,9 @@ export default {
             data: {
               attributes: {
                 field_cj_datejudgement,
-                field_cj_datepublished
-              } = {}
-            } = {}
+                field_cj_datepublished,
+              } = {},
+            } = {},
           } = record
           flatRecords.push({
             id: record_id,
@@ -164,12 +200,12 @@ export default {
             appeal: record_cj_appeal,
             court: record_cj_court,
             judge: record_cj_judge,
-            judgement: field_cj_datejudgement
+            judgement: field_cj_datejudgement,
           })
         }
       })
       return flatRecords
-    }
+    },
   },
   methods: {
     getTaxonomyLabelsByTid(taxName, listOfIds) {
@@ -197,7 +233,7 @@ export default {
         }
         return foundTerms
       }
-    }
-  }
+    },
+  },
 }
 </script>

package/src/components/Paragraphs/Directory/Records/styles.scss

@@ -29,6 +29,7 @@
   font-size: 16px;
 
   &--isp,
+  &--hscp,
   &--cj {
     @include defaultStyle();
     @include itemStyle();

package/src/components/Paragraphs/Directory/constants.js

@@ -22,6 +22,29 @@ export const DIR_CONFIG = {
       }
     ]
   },
+  hscp: {
+    taxonomies: [
+      {
+        name: 'Service Type',
+        id: 'hscp_services',
+        record_id: 'record_hscp_services'
+      }
+    ],
+    sorting: [
+      {
+        label: 'Name A-Z',
+        field: 'record_title',
+        order: 'asc',
+        type: 'az'
+      },
+      {
+        label: 'Name Z-A',
+        field: 'record_title',
+        order: 'desc',
+        type: 'az'
+      }
+    ]
+  },
   prs: {
     taxonomies: [
       {
@@ -39,11 +62,6 @@ export const DIR_CONFIG = {
         id: 'court',
         record_id: 'record_prs_court'
       }
-      // {
-      //   name: 'Coram',
-      //   id: 'coram',
-      //   taxonomy_only: true
-      // }
     ],
     sorting: [
       {

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

@@ -26,9 +26,9 @@
       <div v-else class="paragraph--directory__loading-container">
         <loading />
       </div>
-      <div v-if="showPagination" align="center">
+      <div v-if="showPagination" align-items="center">
         <pagination
-          align="center"
+          align-items="center"
           aria-label="Page navigation to load more records"
           :rows="qs.rows"
           :offset="qs.start"
@@ -39,7 +39,7 @@
           @pageClicked="loadByPageNumber($event)"
         />
       </div>
-      <div v-if="noResultsFound" align="center">
+      <div v-if="noResultsFound" align-items="center">
         <div>
           <p>No records found, please try a different search.</p>
         </div>
@@ -169,9 +169,9 @@ export default {
         // Check for search
         //
         if (this.selectedFilters.query) {
-          this.$set(this.qs, 'query', this.selectedFilters.query)
+          this.qs['query'] = this.selectedFilters.query
         } else {
-          this.$delete(this.qs, 'query')
+          delete this.qs['query']
         }
         //
         // Sort by Date and AZ
@@ -193,7 +193,7 @@ export default {
           Object.keys(this.selectedFilters.filters).forEach((filterName) => {
             if (Array.isArray(this.selectedFilters.filters[filterName])) {
               if (this.selectedFilters.filters[filterName]) {
-                this.$set(this.qs, filterName, [])
+                this.qs[filterName] = []
                 this.selectedFilters.filters[filterName].forEach((item) => {
                   if (item.tid) {
                     this.qs[filterName].push(item.tid)
@@ -208,11 +208,11 @@ export default {
         //
         if (this.selectedFilters.location?.location) {
           this.qs.sort = 'distance'
-          this.$set(this.qs, 'lat', this.selectedFilters.location.location.lat)
-          this.$set(this.qs, 'lon', this.selectedFilters.location.location.lng)
+          this.qs['lat'] = this.selectedFilters.location.location.lat
+          this.qs['lon'] = this.selectedFilters.location.location.lng
         } else {
-          this.$delete(this.qs, 'lat')
-          this.$delete(this.qs, 'lon')
+          delete this.qs['lat']
+          delete this.qs['lon']
         }
       },
     },
@@ -267,18 +267,18 @@ export default {
       }
     },
     updateFilters(opts) {
-      this.$set(this.selectedFilters, 'filters', opts)
+      this.selectedFilters['filters'] = opts
     },
     updateSort(opts) {
-      this.$set(this.selectedFilters, 'sorting', opts)
+      this.selectedFilters['sorting'] = opts
     },
     updateSearch(opts) {
-      this.$set(this.selectedFilters, 'query', opts)
+      this.selectedFilters['query'] = opts
     },
     updateLocation(opts) {
       this.filters.sorting[0].terms[0].title = 'Nearest'
       this.filters.sorting[0].terms[1].title = 'Farthest'
-      this.$set(this.selectedFilters, 'location', opts)
+      this.selectedFilters['location'] = opts
     },
     loadMore() {
       this.qs.start += this.qs.rows

package/src/components/Paragraphs/ListGroup/index.vue

@@ -136,7 +136,11 @@ export default {
     },
     selectedCard(card) {
       // Some custom logic for gov caretaker logic
-      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+      if (
+        (this.$config
+          ? this.$config.public.caretaker
+          : process.env.CARETAKER) === 'true'
+      ) {
         if (!isGovSite(card?.selectedCard?.link)) {
           // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
           // this.$root.$emit('caretaker-open', card?.selectedCard?.link)