@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="paragraph--directory__records--isp">
+    <container>
+      <row>
+        <column sm="6" class="title">
+          <span tabindex="0">{{ item.title }}</span>
+        </column>
+        <column class="address">
+          <a target="_blank" :href="gMapLink">
+            {{ item.address.suburb }}, {{ item.address.postcode }}
+          </a>
+        </column>
+        <column class="contact">
+          <div>Phone</div>
+          <a :href="`tel:${item.contact.mobile || item.contact.phone}`"
+            ><span class="sr-only">Phone number</span
+            >{{ item.contact.mobile || item.contact.phone }}</a
+          >
+        </column>
+        <column v-if="baseLocation && recordLocation" class="distance">
+          <div>Distance</div>
+          <div tabindex="0">
+            <span class="sr-only">Distance from your specified location</span>
+            {{
+              calcDistance(
+                baseLocation.lat,
+                baseLocation.lng,
+                recordLocation.lat,
+                recordLocation.lng,
+                'K'
+              )
+            }}
+            km
+          </div>
+        </column>
+      </row>
+    </container>
+  </div>
+</template>
+<script>
+import Container from '../../../../Containers/Container'
+import Row from '../../../../Containers/Row'
+import Column from '../../../../Containers/Column'
+import { calcDistance } from './distance'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    location: {
+      type: [Object, Boolean],
+      default: false
+    }
+  },
+  computed: {
+    gMapLink() {
+      return `https://google.com/maps?q=${this.item.title}%20${this.item.address.suburb},${this.item.address.postcode}`
+    },
+    baseLocation() {
+      return this.location
+        ? { lat: this.location?.lat, lng: this.location?.lng }
+        : false
+    },
+    recordLocation() {
+      let {
+        address: { map: { field_location: { lat, lng } } = {} } = {}
+      } = this.item
+      return {
+        lat,
+        lng
+      }
+    }
+  },
+  methods: {
+    calcDistance
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../styles.scss';
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="paragraph--directory__records--prs">
+    <b-button
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="`collapse-${item.id}`"
+      :aria-labelledby="`collapse-${item.id}`"
+      @click="handleClick(item.title)"
+    >
+      <record-details :item="item" />
+    </b-button>
+    <b-collapse
+      :id="`collapse-${item.id}`"
+      v-model="visible"
+      class="record-details"
+    >
+      <record-content :item="item" />
+    </b-collapse>
+  </div>
+</template>
+<script>
+import RecordDetails from './recordDetails'
+import RecordContent from './recordContent'
+export default {
+  components: {
+    RecordDetails,
+    RecordContent
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  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';
+</style>

package/src/components/Paragraphs/Directory/Records/PRS/recordContent.vue

@@ -0,0 +1,91 @@
+<template>
+  <!-- eslint-disable vue/no-v-html  -->
+  <container>
+    <row>
+      <column sm="9">
+        <div v-if="item.outcome" class="record-details__outcome">
+          <h3>Outcome</h3>
+          <div v-if="item.outcome" v-html="item.outcome"></div>
+        </div>
+      </column>
+      <column sm="3">
+        <ul class="record-meta">
+          <li v-for="(m, k, i) in itemMeta" :key="i">
+            <div class="meta-heading">
+              {{ k }}
+            </div>
+            <div v-html="processMeta(m)"></div>
+          </li>
+        </ul>
+      </column>
+      <column sm="9">
+        <div v-if="item.attachment" class="record-details__attachment">
+          <strong>Attachment</strong>
+          <div class="attachment_name">
+            <a target="_blank" :href="item.attachment_src" download>{{
+              item.attachment
+            }}</a>
+          </div>
+        </div>
+      </column>
+    </row>
+  </container>
+</template>
+<script>
+import Container from '../../../../Containers/Container'
+import Row from '../../../../Containers/Row'
+import Column from '../../../../Containers/Column'
+import { format } from 'date-fns'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    itemMeta() {
+      return {
+        Sentence: this.item.field_prs_sentence
+          ? this.item.field_prs_sentence
+          : 'n/a',
+        Fine: this.item.meta.fine ? this.item.meta.fine : 'n/a',
+        Costs: this.item.meta.costs ? this.item.meta.costs : 'n/a',
+        Restitution: this.item.meta.restitution
+          ? this.item.meta.restitution
+          : 'n/a',
+        Published: this.item.meta.datePublished
+          ? this.processDate(this.item.meta.datePublished)
+          : 'n/a',
+        Appeal: this.item.meta.appeal ? this.item.meta.appeal : 'n/a',
+        Category: this.item.meta.category?.length
+          ? this.item.meta.category
+          : 'n/a'
+      }
+    }
+  },
+  methods: {
+    processMeta(meta) {
+      if (Array.isArray(meta)) {
+        var str = '<ol>'
+        meta.forEach((m) => {
+          str += `<li>${m}</li>`
+        })
+        str += '</ol>'
+        return str
+      } else {
+        return meta
+      }
+    },
+    processDate(date) {
+      return format(new Date(date), 'dd MMM yy')
+    }
+  }
+}
+</script>

package/src/components/Paragraphs/Directory/Records/PRS/recordDetails.vue

@@ -0,0 +1,49 @@
+<template>
+  <container>
+    <row>
+      <column sm="3" class="title">
+        {{ item.title }}
+      </column>
+      <column v-if="item.meta.court" sm="3">
+        {{ item.meta.court.join(', ') }}
+      </column>
+      <column v-if="item.meta.legislation" sm="3">
+        {{ item.meta.legislation.join(', ') }}
+      </column>
+      <column>
+        <div v-if="item.meta.section">
+          <div>Section</div>
+          <div>{{ item.meta.section }}</div>
+        </div>
+      </column>
+      <column v-if="item.meta.dateOutcome">
+        {{ processDate(item.meta.dateOutcome) }}
+      </column>
+    </row>
+  </container>
+</template>
+<script>
+import Container from '../../../../Containers/Container'
+import Row from '../../../../Containers/Row'
+import Column from '../../../../Containers/Column'
+import { format } from 'date-fns'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    processDate(date) {
+      return format(new Date(date), 'dd MMM yy')
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,203 @@
+<template>
+  <div v-if="items.length" class="paragraph--directory__records">
+    <template v-for="(item, index) in flatRecords">
+      <prs-record v-if="item.type === 'prs'" :key="index" :item="item" />
+      <isp-record
+        v-if="item.type === 'isp'"
+        :key="index"
+        :item="item"
+        :location="baseLocation"
+      />
+      <cj-record v-if="item.type === 'cj'" :key="index" :item="item" />
+    </template>
+  </div>
+</template>
+<script>
+import PrsRecord from './PRS'
+import IspRecord from './ISP'
+import CjRecord from './CJ'
+
+export default {
+  components: {
+    PrsRecord,
+    IspRecord,
+    CjRecord
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    taxonomies: {
+      type: Array,
+      required: true
+    },
+    baseLocation: {
+      type: [Object, Boolean],
+      default: false
+    }
+  },
+  computed: {
+    flatRecords() {
+      let flatRecords = []
+      this.items.forEach((record) => {
+        if (record.record_type === 'prs') {
+          let {
+            record_id,
+            record_prs_acn,
+            record_changed,
+            record_created,
+            record_prs_dateoutcome,
+            record_prs_datepublished,
+            record_prs_court,
+            record_prs_category,
+            record_prs_legislation,
+            record_attachment,
+            record_prs_coram,
+            data: {
+              attributes: {
+                title,
+                field_body,
+                field_prs_investigator,
+                field_prs_lawyer,
+                field_prs_sentence,
+                prs, // other meta with the prs record
+                field_prs_dateoutcome,
+                field_prs_datepublished,
+                attachmentFormatted,
+                file_src_root,
+                file_src
+              } = {}
+            } = {}
+          } = record
+
+          if (record_attachment !== undefined) {
+            file_src_root = process.env.CONTENT_API_URL
+            file_src = file_src_root + record_attachment
+            attachmentFormatted = record_attachment
+              .split(/.*[\/|\\]/)[1]
+              .replace(/%20/g, ' ')
+          }
+
+          flatRecords.push({
+            id: record_id,
+            type: 'prs',
+            created: record_created,
+            changed: record_changed,
+            title,
+            outcome: record_prs_dateoutcome,
+            published: record_prs_datepublished,
+            acn: record_prs_acn,
+            outcome: field_body?.processed || '',
+            investigator: field_prs_investigator,
+            lawyer: field_prs_lawyer,
+            field_prs_sentence,
+            attachment: attachmentFormatted,
+            attachment_src: file_src,
+            meta: {
+              ...prs,
+              dateOutcome: field_prs_dateoutcome,
+              datePublished: field_prs_datepublished,
+              court: this.getTaxonomyLabelsByTid('Court', record_prs_court),
+              category: this.getTaxonomyLabelsByTid(
+                'Category',
+                record_prs_category
+              ),
+              legislation: this.getTaxonomyLabelsByTid(
+                'Legislation',
+                record_prs_legislation
+              )
+              // coram: this.getTaxonomyLabelsByTid(
+              //   'record_prs_coram',
+              //   record_prs_coram
+              // )
+            }
+          })
+        }
+        if (record.record_type === 'isp') {
+          let {
+            record_id,
+            data: {
+              attributes: {
+                title,
+                field_location,
+                isp: { suburb, postcode, phone_number, mobile_number } = {}
+              } = {}
+            } = {}
+          } = record
+          flatRecords.push({
+            id: record_id,
+            type: 'isp',
+            title,
+            contact: {
+              mobile: mobile_number,
+              phone: phone_number
+            },
+            address: {
+              suburb,
+              postcode,
+              map: {
+                field_location
+              }
+            }
+          })
+        }
+        if (record.record_type === 'cj') {
+          let {
+            record_id,
+            record_cj_appeal,
+            record_cj_judge,
+            record_cj_court,
+            record_title,
+            data: {
+              attributes: {
+                field_cj_datejudgement,
+                field_cj_datepublished
+              } = {}
+            } = {}
+          } = record
+          flatRecords.push({
+            id: record_id,
+            type: 'cj',
+            published: field_cj_datepublished,
+            title: record_title,
+            appeal: record_cj_appeal,
+            court: record_cj_court,
+            judge: record_cj_judge,
+            judgement: field_cj_datejudgement
+          })
+        }
+      })
+      return flatRecords
+    }
+  },
+  methods: {
+    getTaxonomyLabelsByTid(taxName, listOfIds) {
+      if (listOfIds && listOfIds.length > 0 && process.client) {
+        let foundTerms = []
+        if (this.taxonomies.length) {
+          // needs to be var
+          var termsOfTaxName = this.taxonomies.filter((cat) => {
+            return cat.name === taxName
+          })
+
+          if (termsOfTaxName.length === 1) {
+            termsOfTaxName = termsOfTaxName[0].terms
+          }
+        }
+        if (termsOfTaxName && Object.keys(termsOfTaxName.length > 0)) {
+          listOfIds.forEach((tid) => {
+            for (const [key, value] of Object.entries(termsOfTaxName)) {
+              // value.tid is a string and tid is a number
+              if (value.tid == tid) {
+                foundTerms.push(value.name)
+              }
+            }
+          })
+        }
+        return foundTerms
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,129 @@
+@import '../../../../includes/scss/all';
+
+@mixin itemStyle() {
+  text-align: left;
+  display: block;
+  width: 100%;
+  background-color: $white;
+  color: $black;
+  border: 1px solid $gray;
+  font-size: 14px;
+  padding: 16px;
+
+  :deep(.title) {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  :deep(.address a) {
+    text-decoration: underline;
+  }
+}
+
+@mixin defaultStyle() {
+  margin-bottom: 32px;
+  border-radius: 12px;
+}
+
+.paragraph--directory__records {
+  font-size: 16px;
+
+  &--isp,
+  &--cj {
+    @include defaultStyle();
+    @include itemStyle();
+  }
+  &--prs {
+    @include defaultStyle();
+    border: 1px solid $gray;
+    .col {
+      margin: 0;
+    }
+    button.collapsed {
+      border-radius: 12px;
+      &::after {
+        content: ' ';
+        position: absolute;
+        height: 12px;
+        width: 12px;
+        bottom: 8px;
+        right: 16px;
+        background-repeat: no-repeat;
+        background-image: url(../../../../../assets/icons/chev-down.svg);
+        background-size: 100%;
+      }
+    }
+    button {
+      position: relative;
+      border-radius: 12px 12px 0px 0px;
+      @include itemStyle();
+      border: none;
+      &::after {
+        content: ' ';
+        position: absolute;
+        height: 12px;
+        width: 12px;
+        bottom: 8px;
+        right: 16px;
+        background-repeat: no-repeat;
+        background-size: 100%;
+        background-image: url(../../../../../assets/icons/chev-up.svg);
+      }
+      &:active {
+        background-color: $white !important;
+        border-color: $gray !important;
+        color: $black !important;
+      }
+    }
+
+    .record-details {
+      font-size: 16px;
+      border-top: 2px solid $lightgray;
+      padding: 16px;
+
+      :deep(.attachment_name a) {
+        text-decoration: underline;
+        color: $black;
+      }
+
+      :deep(h3) {
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: 0px;
+        margin-bottom: 24px;
+        margin-top: 24px;
+      }
+
+      :deep(ul.record-meta) {
+        margin: {
+          top: 80px;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+        padding: 0;
+        > li {
+          list-style: none;
+          margin-bottom: 16px;
+        }
+
+        > li ol {
+          margin: 0;
+          padding: 0;
+        }
+
+        > li ol li {
+          list-style: none;
+          margin-bottom: 5px;
+        }
+
+        .meta-heading {
+          font-weight: bold;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+export const DIR_CONFIG = {
+  isp: {
+    taxonomies: [
+      {
+        name: 'Service Type',
+        id: 'isp_specialty',
+        record_id: 'record_isp_specialty'
+      }
+    ],
+    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: [
+      {
+        name: 'Category',
+        id: 'prs_category',
+        record_id: 'record_prs_category'
+      },
+      {
+        name: 'Legislation',
+        id: 'legislation',
+        record_id: 'record_prs_legislation'
+      },
+      {
+        name: 'Court',
+        id: 'court',
+        record_id: 'record_prs_court'
+      }
+      // {
+      //   name: 'Coram',
+      //   id: 'coram',
+      //   taxonomy_only: true
+      // }
+    ],
+    sorting: [
+      {
+        label: 'Date (newest first)',
+        field: 'record_prs_dateoutcome',
+        order: 'desc',
+        type: 'date'
+      },
+      {
+        label: 'Date (oldest first)',
+        field: 'record_prs_dateoutcome',
+        order: 'asc',
+        type: 'date'
+      },
+      {
+        label: 'Name A-Z',
+        field: 'record_title',
+        order: 'asc',
+        type: 'az'
+      },
+      {
+        label: 'Name Z-A',
+        field: 'record_title',
+        order: 'desc',
+        type: 'az'
+      }
+    ]
+  },
+  cj: {
+    taxonomies: [],
+    sorting: []
+  }
+}