@worksafevictoria/wcl7.5 1.2.0 → 1.2.2

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

@@ -47,63 +47,70 @@ export default {
   components: {
     CardGroup,
     DirectoryFilters,
-    Switcher
+    Switcher,
   },
   props: {
     background: {
       type: String,
-      default: 'grey'
+      default: 'grey',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     bundle: {
       type: Array,
-      default: () => ['']
+      default: () => [''],
     },
     columns: {
       type: Number,
-      default: 0
+      default: 0,
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0
+      default: 0,
     },
     fetchContent: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchFilters: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     enableBundleFilter: {
-      type: Boolean
+      type: Boolean,
     },
     getBundleAlias: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     showMore: {
-      type: Boolean
+      type: Boolean,
     },
     type: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     if (this.displayedCards.length === 0) {
       await this.loadFiltersAndContent()
     }
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
   data() {
     return {
       hasMorePages: false,
@@ -115,8 +122,8 @@ export default {
       filters: {
         taxonomies: [],
         selected: {},
-        availableBundles: []
-      }
+        availableBundles: [],
+      },
     }
   },
   fetchOnServer: true,
@@ -125,13 +132,13 @@ export default {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true)
+        this.loadMoreCards(true),
       ])
     },
     init() {
       this.allCards = {
         total: 0,
-        cards: []
+        cards: [],
       }
       this.displayLimit = 0
       this.hasMorePages = false
@@ -144,8 +151,8 @@ export default {
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
           bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index)
-          )
+            this.getBundle(bundle, addMoreBy, index),
+          ),
         )
         allCards = this.getShuffledCards(cardBundles)
 
@@ -159,8 +166,12 @@ export default {
       return allCards
     },
     async loadMoreCards(init) {
+      // Preference pinia
       const attrs = {
-        group: this.$store?.state?.page?.content?.title
+        group: this.$pinia?.state?.value?.page?.content?.title
+          ? this.$pinia?.state?.value?.page?.content?.title
+          : this.$store?.state?.page?.content?.title,
+        // group: this.$store?.state?.page?.content?.title ? this.$store?.state?.page?.content?.title : this.$pinia?.state?.page?.content?.title
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -179,7 +190,7 @@ export default {
         this.displayedCards,
         this.allCards,
         addMoreBy,
-        bundles
+        bundles,
       )
       this.hasMorePages = this.allCards.total > this.allCards.cards.length
       this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
@@ -191,11 +202,11 @@ export default {
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
-          numFound: 0
+          numFound: 0,
         },
         qs: {
-          start
-        }
+          start,
+        },
       })
 
       if (cache.qs.start === undefined) {
@@ -209,7 +220,7 @@ export default {
       const qs = {
         bundle,
         rows,
-        start
+        start,
       }
       return this.fetchContent(qs, this.filters.selected, index).then(
         (response) => {
@@ -217,14 +228,14 @@ export default {
           cache.response.numFound = response.numFound
           cache.response.results.push(...response.results)
           return cache.response
-        }
+        },
       )
     },
     getShuffledCards(cardBundles) {
       const shuffled = []
       const bundleWithMostCards = cardBundles.reduce(
         (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] }
+        { results: [] },
       ).results.length
 
       for (let i = 0; i < bundleWithMostCards; i++) {
@@ -273,8 +284,8 @@ export default {
         return new Date(b.dateSort) - new Date(a.dateSort)
       })
       return sorted
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -283,14 +294,17 @@ export default {
     align-items: flex-end;
     place-content: flex-end;
   }
+
   &.card_group__card--col-4 {
     :deep(.card-grid__column .card-grid-item__description) {
       display: none;
     }
   }
+
   :deep(.card_group__card--blue .card_item__desc p) {
     margin-top: 12px;
   }
+
   :deep(.card_group__card--red .card_item__desc p) {
     margin-top: 12px;
   }

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

@@ -62,30 +62,40 @@ export default {
     Records,
     Pagination,
     Loading,
-    SectionGroup
+    SectionGroup,
   },
   props: {
     options: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     fetchFilters: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchRecords: {
       type: Function,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     await this.loadFilters(
-      this.DIR_CONFIG[this.options.field_directory_type].taxonomies
+      this.DIR_CONFIG[this.options.field_directory_type].taxonomies,
     )
     this.loadSortOptions(
-      this.DIR_CONFIG[this.options.field_directory_type].sorting
+      this.DIR_CONFIG[this.options.field_directory_type].sorting,
     )
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   await this.loadFilters(
+  //     this.DIR_CONFIG[this.options.field_directory_type].taxonomies
+  //   )
+  //   this.loadSortOptions(
+  //     this.DIR_CONFIG[this.options.field_directory_type].sorting
+  //   )
+  // },
   fetchOnServer: true,
   fetchKey: 'ws-directory',
   data() {
@@ -93,25 +103,25 @@ export default {
       DIR_CONFIG,
       filters: {
         taxonomies: [],
-        sorting: []
+        sorting: [],
       },
       selectedFilters: {},
       qs: {
         record_type: this.options.field_directory_type,
         rows: this.options.field_directory_rows,
         start: 0,
-        ...this.defaultSortOrderOption(this.options.field_directory_type)
+        ...this.defaultSortOrderOption(this.options.field_directory_type),
       },
       records: [],
       total: 0,
-      loading: true
+      loading: true,
     }
   },
   computed: {
     apiUrl() {
       return Object.keys(this.qs)
         .map(
-          (k) => `${encodeURIComponent(k)}=${encodeURIComponent(this.qs[k])}`
+          (k) => `${encodeURIComponent(k)}=${encodeURIComponent(this.qs[k])}`,
         )
         .join('&')
     },
@@ -137,7 +147,7 @@ export default {
       return this.qs.lat && this.qs.lon
         ? { lat: this.qs.lat, lng: this.qs.lon }
         : false
-    }
+    },
   },
   watch: {
     apiUrl: {
@@ -145,7 +155,7 @@ export default {
       deep: false,
       handler() {
         this.getData()
-      }
+      },
     },
     selectedFilters: {
       immediate: false,
@@ -171,7 +181,7 @@ export default {
           this.qs.order = this.selectedFilters.sorting.order.value
         } else {
           const sortOrderDefaults = this.defaultSortOrderOption(
-            this.qs.record_type
+            this.qs.record_type,
           )
           this.qs.sort = sortOrderDefaults.sort
           this.qs.order = sortOrderDefaults.order
@@ -204,8 +214,8 @@ export default {
           this.$delete(this.qs, 'lat')
           this.$delete(this.qs, 'lon')
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     async getData() {
@@ -223,25 +233,25 @@ export default {
           const taxonomies = await this.fetchFilters(
             taxonomy.id,
             taxonomy.record_id,
-            taxonomy.name
+            taxonomy.name,
           )
           this.filters.taxonomies.push(taxonomies)
           return Promise.resolve(taxonomies)
-        })
+        }),
       )
     },
     loadSortOptions(sortingList) {
       let opts = {
         name: 'order',
         title: 'Sort by',
-        terms: []
+        terms: [],
       }
       sortingList.forEach((sortOption) => {
         opts.terms.push({
           title: sortOption.label,
           value: sortOption.order,
           field: sortOption.field,
-          parent: sortOption.type
+          parent: sortOption.type,
         })
       })
       this.filters.sorting.push(opts)
@@ -252,7 +262,7 @@ export default {
       } else {
         return {
           sort: 'record_title',
-          order: 'asc'
+          order: 'asc',
         }
       }
     },
@@ -301,14 +311,14 @@ export default {
 
         window.scrollTo({
           top,
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
     },
     resetSortLabels() {
       this.filters.sorting = []
       this.loadSortOptions(
-        this.DIR_CONFIG[this.options.field_directory_type].sorting
+        this.DIR_CONFIG[this.options.field_directory_type].sorting,
       )
     },
     resetSearchFilters() {
@@ -317,15 +327,16 @@ export default {
         record_type: this.options.field_directory_type,
         rows: this.options.field_directory_rows,
         start: 0,
-        ...this.defaultSortOrderOption(this.options.field_directory_type)
+        ...this.defaultSortOrderOption(this.options.field_directory_type),
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
+
 .paragraph--directory {
   &__loading-container {
     min-height: 250px;

package/src/components/Paragraphs/TabulatedData/index.stories.js

@@ -11,14 +11,14 @@ export default {
       fields,
       fieldsAr,
       items,
-      itemsAr
+      itemsAr,
     }
   },
   argTypes: {
     isFixedWidth: {
       control: 'boolean',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     rtl: false,
@@ -28,13 +28,13 @@ export default {
     fields: fields.links,
     rtlFields: fieldsAr.links,
     caption: 'The table caption',
-    initialSortBy: 'rank'
+    sortBy: 'rank',
   },
   template: `<tabulated-data
                 v-bind="args"
                 :items="rtl ? args.rtlItems : args.items"
                 :fields="rtl ? args.rtlFields : args.fields"
-              /> `
+              /> `,
 }
 
 export const Default = {}

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

@@ -7,23 +7,43 @@
     <div :class="isFluid ? 'table-scrolled' : ''">
       <b-table
         v-if="items"
-          :items="items"
-          :fields="fields"
-          :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
-          class="table border"
-          :striped="true"
-          :sort-by="sortBy"
-          :borderless="false"
-          :responsive="!isFluid"
-          :stacked="!isFluid ? 'sm' : false"
+        :items="items"
+        :fields="fields"
+        :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
+        class="table border"
+        :striped="true"
+        :sort-by="newSortBy"
+        :borderless="false"
+        :responsive="!isFluid"
+        :stacked="!isFluid ? 'sm' : false"
       >
         <template #head()="data">
-          <span class="iconHeader table-active" tabindex="0" @keypress.enter="accessSort(data.field)" scope="colgroup">
+          <span
+            class="iconHeader table-active"
+            tabindex="0"
+            @keypress.enter="accessSort(data.field)"
+            scope="colgroup"
+          >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-            <img v-if="data.field.thAttr['aria-sort'] === 'none'" :src="sortIconNeutral" alt="image indicating no sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-if="data.field.thAttr['aria-sort'] === 'ascending'" :src="sortIconAsc" alt="image indicating ascending sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-else-if="data.field.thAttr['aria-sort'] === 'descending'" :src="sortIconDesc" alt="image indicating descending sort" style="width: 0.55rem; height: 0.90rem;"/>
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'none'"
+                :src="sortIconNeutral"
+                alt="image indicating no sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'ascending'"
+                :src="sortIconAsc"
+                alt="image indicating ascending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
+                :src="sortIconDesc"
+                alt="image indicating descending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
             </span>
           </span>
         </template>
@@ -42,64 +62,67 @@ import { BTable } from 'bootstrap-vue-next'
 
 export default {
   name: 'TabulatedData',
-  components: { SectionGroup, RichText, BTable},
+  components: { SectionGroup, RichText, BTable },
   props: {
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     fields: {
       type: Array,
-      default: undefined
+      default: undefined,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFixedWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     caption: {
       type: String,
       default: '',
-      required: false
+      required: false,
     },
-    initialSortBy: {
+    sortBy: {
       type: String,
       default: undefined,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
-      sortBy: [{key:this.initialSortBy, order:'asc'}],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
       //sortDesc: false,
       sortIconNeutral:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconDesc:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
     }
   },
   computed: {
     isFluid() {
       return this.isFixedWidth
-    }
+    },
   },
   methods: {
-   accessSort(fieldVar) {
-    //this.sortBy = fieldVar.key
-      if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortBy = [{key:fieldVar.key, order:'asc'}]
+    accessSort(fieldVar) {
+      //this.sortBy = fieldVar.key
+      if (
+        fieldVar.thAttr['aria-sort'] === 'none' ||
+        fieldVar.thAttr['aria-sort'] === 'descending'
+      ) {
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
         //this.sortDesc = false
       } else {
-        this.sortBy = [{key:fieldVar.key, order:'desc'}]
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
         //this.sortDesc = true
-      }    
-    }
-  }
+      }
+    },
+  },
 }
 </script>
 
@@ -144,7 +167,7 @@ export default {
   }
 
   .b-table-sortable-column svg {
-    display:none;
+    display: none;
   }
 }
 </style>

package/src/components/SubComponents/FormInstance/models/overrides/address.js

@@ -26,7 +26,8 @@ export class AddresseFormElement extends BaseFormElement {
         key,
         type: 'textfield',
         input: true,
-        customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+        customConditional:
+          "show = _.get(instance, 'parent.manualMode', false);",
       }
     }
   }
@@ -40,23 +41,27 @@ export class AddresseFormElement extends BaseFormElement {
 
   getCustomProperties() {
     const autoCompletePath = '/places/api/v1/place/autocomplete/json'
-    const baseUrl = window.origin
+    // Uses WorkSafe PROD API for storybook site (ensure site is white listed)
+    const baseUrl =
+      window.origin.toLowerCase().indexOf('worksafe') === -1
+        ? 'https://www.worksafe.vic.gov.au'
+        : window.origin
     return {
       provider: 'custom',
       enableManualMode: this.webformElement['#flexbox'] !== '0',
       providerOptions: {
         params: {
           types: this.isFullAddressSearch() ? 'address' : '(regions)',
-          components: 'country:au'
+          components: 'country:au',
         },
         url: `${baseUrl}${autoCompletePath}`,
         queryProperty: 'input',
         displayValueProperty: 'description',
-        responseProperty: 'predictions'
+        responseProperty: 'predictions',
       },
       switchToManualModeLabel: "Can't find address? Switch to manual mode.",
       input: true,
-      components: this.getManualFields()
+      components: this.getManualFields(),
     }
   }
 
@@ -70,7 +75,7 @@ export class AddresseFormElement extends BaseFormElement {
       if (isAutoComplete) {
         const getVal = (key) =>
           value?.geocode?.address_components.find(
-            (item) => item?.types?.[0] === key
+            (item) => item?.types?.[0] === key,
           )?.long_name
         const address1 = getComponents('address')
         const city = getComponents('city')
@@ -84,12 +89,12 @@ export class AddresseFormElement extends BaseFormElement {
             [city?.key]: getVal('locality'),
             [state?.key]: getVal('administrative_area_level_1'),
             [postcode?.key]: getVal('postal_code'),
-            [country?.key]: getVal('country')
-          }
+            [country?.key]: getVal('country'),
+          },
         }
       } else if (value.mode === 'manual') {
         return {
-          [this.getKey()]: value.address
+          [this.getKey()]: value.address,
         }
       }
     }
@@ -106,7 +111,11 @@ export class AddresseFormElement extends BaseFormElement {
         value.geocode.formatted_address !== value.address.description)
     ) {
       const geocodePath = '/places/api/v1/geocode/json'
-      const baseUrl = window.origin
+      // Uses WorkSafe PROD API for storybook site (ensure site is white listed)
+      const baseUrl =
+        window.origin.toLowerCase().indexOf('worksafe') === -1
+          ? 'https://www.worksafe.vic.gov.au'
+          : window.origin
       const qs = `?place_id=${value.address.place_id}`
       const url = `${baseUrl}${geocodePath}${qs}`
 
@@ -114,11 +123,11 @@ export class AddresseFormElement extends BaseFormElement {
         const results = response?.data?.results
         if (Array.isArray(results) && results.length > 0) {
           const postcode = results[0].address_components.find((item) =>
-            item.types.find((type) => type === 'postal_code')
+            item.types.find((type) => type === 'postal_code'),
           )?.short_name
           const fullAddress = value.address.description.replace(
             /,(?=[^,]*$)/,
-            `, ${postcode}`
+            `, ${postcode}`,
           )
           value.address.description = fullAddress
           value.geocode = results[0]