@worksafevictoria/wcl7.5 1.1.0-beta.77 → 1.1.0-beta.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.77",
+  "version": "1.1.0-beta.79",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Common/CardGrid/index.vue

@@ -11,9 +11,7 @@
     :title-tag="titleTag"
     class="card-grid"
     :content-class="contentClass"
-    :class="{
-      [uniqueClass]: true,
-    }"
+    :class="`cardGrid-${$.uid}`"
     :card-browse-content="cardBrowseContent"
   >
     <template v-if="$slots.gridHeaderRight" v-slot:headerRight>
@@ -192,9 +190,6 @@ export default {
       }
       return 6
     },
-    uniqueClass() {
-      return `cardGrid-${Math.random().toString(36).slice(2, 11)}`
-    },
   },
   watch: {
     cards: {

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

@@ -5,7 +5,7 @@
         <single-taxonomy
           v-for="(t, i) in computedPropFilters"
           :key="i"
-          :ref="elRef[`${t.record_id}`]"
+          ref="items"
           :data="t"
           :results="filteredList.length"
           :loading="isFiltering"
@@ -62,7 +62,7 @@ import Row from '../../Containers/Row/index.vue'
 import FilterButton from '../../Common/FilterButton/index.vue' // Reset
 import SingleTaxonomy from '../../Global/DirectoryFilters/SingleTaxonomy/index.vue'
 import { BFormGroup, BFormSelect } from 'bootstrap-vue-next'
-import { defineProps, computed, toRefs, ref } from 'vue'
+import { defineProps, computed, toRefs, ref, useTemplateRef } from 'vue'
 
 const props = defineProps({
   statsData: { type: Array, default: () => [] },
@@ -83,7 +83,8 @@ const graphSelected = ref(null)
 const chartHeight = ref(
   chart.value.options.height ? chart.value.options.height : 600,
 )
-const elRef = ref({})
+
+const itemRefs = useTemplateRef('items')
 
 const graphOptions = computed(() => {
   return filterFields.value.slice(1).map((field) => {
@@ -161,11 +162,13 @@ const filteredList = computed(() => {
 
 const onFilter = (filterParam) => {
   hideReset.value = false
-  const allFiltersUnselected = Object.values(elRef.value).every((taxonomy) => {
-    return Object.values(taxonomy[0].selectedFilters).every(
-      (filter) => filter.filter((item) => !item.preselected).length === 0,
-    )
-  })
+  const allFiltersUnselected = Object.values(itemRefs.value).every(
+    (taxonomy) => {
+      return Object.values(taxonomy.selectedFilters).every(
+        (filter) => filter.filter((item) => !item.preselected).length === 0,
+      )
+    },
+  )
   if (allFiltersUnselected) {
     hideReset.value = true
   }
@@ -175,8 +178,8 @@ const onFilter = (filterParam) => {
 }
 const reset = () => {
   hideReset.value = true
-  Object.keys(elRef).forEach((key) => {
-    elRef[key][0].reset()
+  Object.keys(itemRefs.value).forEach((key) => {
+    itemRefs.value[key].reset()
   })
   filters.value.selected = {}
 }

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

@@ -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/SubComponents/FormInstance/components/handler/index.vue

@@ -39,31 +39,31 @@ export default {
   name: 'FormHandler',
   components: {
     FormRenderer,
-    FormAlert
+    FormAlert,
   },
   props: {
     formid: {
       type: String,
-      required: true
+      required: true,
     },
     contentApiUrl: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     webFormJson: {
       type: Object,
       required: false,
-      default: () => null
+      default: () => null,
     },
     preview: {
       type: Boolean,
-      required: false
+      required: false,
     },
     processID: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
@@ -77,7 +77,7 @@ export default {
       sid: '',
       successMessage: `<h1>Your submission has been successful.</h1><p>A confirmation email will be sent to the email account provided.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
       submitErrorMessage: `<h1>Unable to submit</h1><p>Unfortunately something has gone wrong when processing your submission. Please try again.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
-      notFoundMessage: `<h1>Unable to find form</h1><p>Unfortunately the form you are looking for cannot be found. Please try again or return to the our home page.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`
+      notFoundMessage: `<h1>Unable to find form</h1><p>Unfortunately the form you are looking for cannot be found. Please try again or return to the our home page.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
     }
   },
   async mounted() {
@@ -89,7 +89,7 @@ export default {
     if (!webFormJson || !this.form) {
       this.setAlert(!webFormJson ? this.notFoundMessage : this.notFoundMessage)
     }
-    this.scrollToTopOfForm()
+    // this.scrollToTopOfForm()
     this.loading = false
   },
   methods: {
@@ -98,7 +98,7 @@ export default {
         ? {
             message,
             isError: isError ?? true,
-            fields: fields ?? []
+            fields: fields ?? [],
           }
         : null
       if (sid) {
@@ -109,7 +109,7 @@ export default {
       this.formApi.initialise(
         this.contentApiUrl,
         this.formid,
-        this.$axios || axios
+        this.$axios || axios,
       )
       this.formSubmitParser.initialise(this.formid, this.$axios || axios)
       this.formRenderParser.initialise(this.contentApiUrl, this.preview)
@@ -120,20 +120,16 @@ export default {
       const submitPayload = this.formSubmitParser.parse(
         submission,
         this.form,
-        formioinstance
+        formioinstance,
       )
       const isFormStandAlone = submitPayload && !submitPayload.webform_id
       if (!isFormStandAlone) {
-        const {
-          submitted,
-          message,
-          fields,
-          sid
-        } = await this.formApi.submitForm(
-          submitPayload,
-          this.preview,
-          this.form.tree
-        )
+        const { submitted, message, fields, sid } =
+          await this.formApi.submitForm(
+            submitPayload,
+            this.preview,
+            this.form.tree,
+          )
         if (!submitPayload) {
           this.setAlert(this.submitErrorMessage)
         } else if (!submitted) {
@@ -152,13 +148,13 @@ export default {
         FormCallbackQueue.enqueue(async () => {
           await element.onRender(this.$refs.formhandler)
           this.$emit(eventName)
-        })
+        }),
       )
     },
     changed(event) {
       const getSubmitButton = () =>
         this.$refs.formhandler?.querySelector(
-          "button[type='submit'], .btn-wizard-nav-submit"
+          "button[type='submit'], .btn-wizard-nav-submit",
         )
 
       let isSubmitDisabledWhileUpdating
@@ -174,7 +170,7 @@ export default {
           await elementModel.onchange(
             event.component,
             event.instance,
-            this.$axios || axios
+            this.$axios || axios,
           )
         }
         submitButton = getSubmitButton()
@@ -200,9 +196,9 @@ export default {
     },
     getFormOptions() {
       return {
-        noAlerts: true
+        noAlerts: true,
       }
-    }
-  }
+    },
+  },
 }
 </script>