@worksafevictoria/wcl7.5 1.5.0 → 1.7.0

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

@@ -0,0 +1,179 @@
+<!-- Copied from pagination used by ISP in the website repository - paginates a list in place instead of search for BE values. -->
+<template>
+  <div class="pagination">
+    <div>
+      {{ `${totalPages} ${pageOrPages} of results` }}
+    </div>
+    <ul>
+      <li v-if="!isFirstPage" class="pagination-item">
+        <button type="button" :disabled="isFirstPage" @click="onClickFirstPage">
+          First
+        </button>
+      </li>
+      <li v-if="!isFirstPage" class="pagination-item">
+        <button
+          type="button"
+          :disabled="isFirstPage"
+          @click="onClickPreviousPage"
+        >
+          Previous
+        </button>
+      </li>
+      <!-- Visible Buttons Start -->
+      <li v-for="(page, i) in pages" :key="i" class="pagination-item">
+        <button
+          type="button"
+          :disabled="page.isDisabled"
+          :class="{ active: isPageActive(page.name) }"
+          :aria-current="isPageActive(page.name) ? 'page' : false"
+          @click="onClickPage(page.name)"
+        >
+          {{ page.name }}
+        </button>
+      </li>
+      <!-- Visible Buttons End -->
+      <li v-if="!isLastPage" class="pagination-item">
+        <button type="button" :disabled="isLastPage" @click="onClickNextPage">
+          Next
+        </button>
+      </li>
+      <li v-if="!isLastPage" class="pagination-item">
+        <button type="button" :disabled="isLastPage" @click="onClickLastPage">
+          Last
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    maxVisibleButtons: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    totalPages: {
+      type: Number,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    perPage: {
+      type: Number,
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    startPage() {
+      // When on the first page
+      if (this.currentPage === 1) {
+        return 1
+      }
+      // When on the last page
+      if (this.currentPage === this.totalPages) {
+        return this.totalPages - 1
+      }
+      // When inbetween
+      return this.currentPage - 1
+    },
+    pages() {
+      const range = []
+      for (
+        let i = this.startPage;
+        i <=
+        Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages);
+        i++
+      ) {
+        range.push({
+          name: i,
+          isDisabled: i === this.currentPage
+        })
+      }
+      return range
+    },
+    isFirstPage() {
+      return this.currentPage === 1
+    },
+    isLastPage() {
+      return this.currentPage === this.totalPages
+    },
+    pageOrPages() {
+      return this.totalPages > 1 ? 'pages' : 'page'
+    }
+  },
+  methods: {
+    onClickFirstPage() {
+      this.$emit('pagechanged', 1)
+    },
+    onClickPreviousPage() {
+      this.$emit('pagechanged', this.currentPage - 1)
+    },
+    onClickPage(page) {
+      this.$emit('pagechanged', page)
+    },
+    onClickNextPage() {
+      this.$emit('pagechanged', this.currentPage + 1)
+    },
+    onClickLastPage() {
+      this.$emit('pagechanged', this.totalPages)
+    },
+    isPageActive(page) {
+      return this.currentPage === page
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../../includes/scss/all.scss';
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  ul {
+    display: flex;
+    margin: 16px 0;
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+    padding: 0;
+    margin-right: 6px;
+    margin-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+
+    button {
+      background: $white;
+      color: $black;
+      border: 1px solid $gray;
+      padding: 10px 12px;
+      font-weight: normal;
+      border-radius: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background: $lightgray;
+      }
+      &:disabled,
+      &[disabled] {
+        background: $black;
+        color: $white;
+        font-weight: 700;
+        border: 1px solid transparent;
+        cursor: default;
+      }
+    }
+  }
+}
+</style>

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

@@ -55,5 +55,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import '../styles.scss';
+@import '../../styles.scss';
 </style>

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

@@ -84,5 +84,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import '../styles.scss';
+@import '../../styles.scss';
 </style>

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

@@ -0,0 +1,34 @@
+import prsRecord from './index.vue'
+
+const cpData = {
+    id: '1',
+    title: 'Australian Nurses and Midwifery Federation - Victorian Branch',
+    meta: {
+        court: ['Federal Court of Australia'],
+        legislation: ['Work Health and Safety Act 2011'],
+        section: '21(1); 21(2)(a) & 5A(1)',
+        dateOutcome: '2023-09-15',
+        fine: '$10,000',
+        costs: '$2,000',
+        restitution: '$5,000',
+        datePublished: '2023-09-20',
+        appeal: 'None',
+        category: ['Workplace Safety']
+    },
+    field_prs_sentence: 'Company fined for OH&S breach.',
+    outcome: '<div><p><strong>Background</strong></p><p>Company found guilty of OH&S breach and fined.</p></div>',
+    attachment: 'case_details.pdf',
+    attachment_src: 'https://www.example.com/case_details.pdf'
+};
+
+export default {
+    title: 'Paragraphs/Directory/PRS',
+    component: prsRecord,
+    tags: ['autodocs']
+};
+
+export const CourseProvider = {};
+
+CourseProvider.args = {
+    item: cpData,    
+};

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

@@ -21,8 +21,12 @@
 <script>
 import RecordDetails from './recordDetails.vue'
 import RecordContent from './recordContent.vue'
+import { BButton, BCollapse } from 'bootstrap-vue-next'
+
 export default {
   components: {
+    BButton, 
+    BCollapse,
     RecordDetails,
     RecordContent
   },
@@ -55,5 +59,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import '../styles.scss';
+@import '../../styles.scss';
 </style>

package/src/components/Paragraphs/Directory/Records/index.storieshide.js

@@ -0,0 +1,47 @@
+import Records from './index.vue'
+import { hscpData } from '../../../../mock/course-provider'
+
+const hscpOptions =
+  {
+    field_directory_exposefilters: 'full',
+    field_directory_rows: 15,
+    field_directory_type: 'hscp'
+  }
+
+const hscpTaxonomies = [
+  {
+    name: 'Service Type',
+    record_id: 'record_hscp_course',
+    terms: ['HSR Iniitial', 'HSR Refresher']
+  } 
+]
+
+export default {
+  title: 'Paragraphs/Directory/Records',
+  component: Records,
+  tags: ['autodocs'],
+  data() {
+    return {
+        hscpData
+    }
+  },
+  argTypes: {
+    fetchRecords: {
+      control: 'function',
+      table: { disable: true }
+    },
+    fetchFilters: {
+      control: 'function',
+      table: { disable: true }
+    }
+  },
+}
+
+export const CourseProvider = {
+  args: {
+    options: hscpOptions,
+    items: hscpData,
+    taxonomies: hscpTaxonomies,
+    showFilters: true
+  }
+}

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

@@ -2,12 +2,8 @@
   <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"
-      />
+      <hscp-record v-if="item.type === 'hscp'" :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>
@@ -16,26 +12,28 @@
 import PrsRecord from './PRS/index.vue'
 import IspRecord from './ISP/index.vue'
 import CjRecord from './CJ/index.vue'
+import HscpRecord from './../HSCP/Records/SingleRecord/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 +64,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 +101,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 +121,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 +131,34 @@ export default {
             title,
             contact: {
               mobile: mobile_number,
-              phone: phone_number
+              phone: phone_number,
             },
             address: {
               suburb,
               postcode,
               map: {
-                field_location
-              }
-            }
+                field_location,
+              },
+            },
+          })
+        }
+        if (record.type === 'hscp') {
+          flatRecords.push({
+            type: 'hscp',
+            title: record.title,
+            fullAddress: record.fullAddress,
+            workPhone: record.workPhone,
+            tollfreePhone: record.tollfreePhone,
+            email: record.email,
+            website: record.website,
+            contact1: record.contact1,
+            email1: record.email1,
+            phone1: record.phone1,
+            contact2: record.contact2,
+            email2: record.email2,
+            phone2: record.phone2,
+            courses: record.courses,
+            trainingVenues: record.trainingVenues
           })
         }
         if (record.record_type === 'cj') {
@@ -152,9 +171,9 @@ export default {
             data: {
               attributes: {
                 field_cj_datejudgement,
-                field_cj_datepublished
-              } = {}
-            } = {}
+                field_cj_datepublished,
+              } = {},
+            } = {},
           } = record
           flatRecords.push({
             id: record_id,
@@ -164,12 +183,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 +216,7 @@ export default {
         }
         return foundTerms
       }
-    }
-  }
+    },
+  },
 }
 </script>

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/Directory/{Records/styles.scss → styles.scss}

@@ -1,4 +1,4 @@
-@import '../../../../includes/scss/all';
+@import '../../../includes/scss/all.scss';
 
 @mixin itemStyle() {
   text-align: left;
@@ -29,10 +29,12 @@
   font-size: 16px;
 
   &--isp,
-  &--cj {
+  &--hscp,
+   &--cj {
     @include defaultStyle();
     @include itemStyle();
   }
+ 
   &--prs {
     @include defaultStyle();
     border: 1px solid $gray;
@@ -80,6 +82,7 @@
       font-size: 16px;
       border-top: 2px solid $lightgray;
       padding: 16px;
+    }
 
       :deep(.attachment_name a) {
         text-decoration: underline;
@@ -123,7 +126,6 @@
           font-weight: bold;
           margin-bottom: 5px;
         }
-      }
     }
   }
 }

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)