@worksafevictoria/wcl7.5 1.5.0 → 1.7.0

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

@@ -1,84 +1,82 @@
 import WebformPara from './index.vue'
 
 export default {
-    title: 'Paragraphs/Webform',
-    component: WebformPara,
-    tags: ['autodocs'],
-    argTypes: {
-      preview: {
-        control: 'boolean',
-        table: {
-          disable: true
-        }
+  title: 'Paragraphs/Webform',
+  component: WebformPara,
+  tags: ['autodocs'],
+  argTypes: {
+    preview: {
+      control: 'boolean',
+      table: {
+        disable: true,
       },
-      processID: {
-        control: 'text',
-        table: {
-          disable: true
-        }
+    },
+    processID: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      formid: {
-        control: 'string',
-        table: {
-          disable: true
-        }
+    },
+    formid: {
+      control: 'text',
+    },
+    type: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      type: {
-        control: 'text',
-        table: {
-          disable: true
-        }
+    },
+    webFormJson: {
+      control: 'object',
+      table: {
+        disable: true,
       },
-      webFormJson: {
-        control: 'object',
-        table: {
-            disable: true
-          }
+    },
+    changed: {
+      table: {
+        disable: true,
       },
-      changed: {
-        table: {
-          disable: true
-        }
+    },
+    submitted: {
+      table: {
+        disable: true,
       },
-      submitted: {
-        table: {
-          disable: true
-        }
+    },
+    rendered: {
+      table: {
+        disable: true,
       },
-      rendered: {
-        table: {
-          disable: true
-        }
+    },
+    nextPage: {
+      table: {
+        disable: true,
       },
-      nextPage: {
-        table: {
-          disable: true
-        }
+    },
+    prevPage: {
+      table: {
+        disable: true,
       },
-      prevPage: {
-        table: {
-          disable: true
-        }
-      }
     },
-    args: {
-      preview: true,
-      type: 'api',
-      formid: 'review_of_an_agent_decision',
-      contentApiUrl: process.env.CONTENT_API_URL,
-      processID: `proc-id-form-api
+  },
+  args: {
+    preview: true,
+    type: 'api',
+    formid: 'review_of_an_agent_decision',
+    // contentApiUrl: process.env.CONTENT_API_URL,
+    contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+    processID: `proc-id-form-api
           .toLowerCase()
           .split(' ')
-          .join('-')}`
-    },
-  }
+          .join('-')}`,
+  },
+}
 
-  const Template = (args) => ({
-    components: { WebformPara },
-    setup() {
-      return { args }
-    },
-    template: `
+const Template = (args) => ({
+  components: { WebformPara },
+  setup() {
+    return { args }
+  },
+  template: `
       <div>
           <h2>This is a web page with embedded webform</h2>
           <p> Below is an example webform</p>
@@ -87,8 +85,23 @@ export default {
           <div style="background-color: lightgrey">
             <webform-para v-bind="args" />
           </div>
+          <b>Change contentApiUrl from "staging" to "dev" if form not found (file form may only exist in dev)</b>
       </div>
-      `
-  })
-  
-  export const Default = Template.bind({})
+      `,
+})
+
+export const Default = Template.bind({})
+
+export const Files = Template.bind()
+// export const Files = {}
+Files.args = {
+  preview: false,
+  type: 'api',
+  formid: 'bbtest_webform_file_upload',
+  // contentApiUrl: process.env.CONTENT_API_URL,
+  contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+  processID: `proc-id-form-api
+      .toLowerCase()
+      .split(' ')
+      .join('-')}`,
+}

package/src/components/SubComponents/Breadcrumb/index.vue

@@ -42,6 +42,10 @@ export default {
 
     .breadcrumb-item a {
       color: $black !important;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 

package/src/components/SubComponents/CardGroup/index.vue

@@ -179,7 +179,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', 'card-group')
           // this.$root.$emit('caretaker-open', card?.selectedCard?.link)

package/src/components/SubComponents/FormAddressPostcode/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="suburb-postcode-search">
     <input
-      :id="`suburb-postcode-search-input-${_uid}`"
+      :id="`suburb-postcode-search-input-${$.uid}`"
       v-model="suburb.text"
       autocomplete="no"
       :placeholder="inputPlaceholder"
@@ -10,7 +10,7 @@
       aria-controls="sp-suggestions"
       :class="{
         'suburb-postcode-search--show-shadow': showShadow,
-        [inputClassName]: true
+        [inputClassName]: true,
       }"
       @keyup.prevent="searchSuburbPostcodeDebounce($event)"
     />
@@ -41,7 +41,8 @@
 </template>
 <script>
 import axios from 'axios'
-import debounce from 'lodash/debounce'
+import { debounce } from 'lodash-es'
+
 import { detectBrowser } from '../../../../lib/detect-browser'
 import { BSpinner } from 'bootstrap-vue-next'
 
@@ -51,51 +52,51 @@ export default {
   props: {
     showShadow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     inputPlaceholder: {
       type: String,
-      default: 'Search for a suburb or postcode'
+      default: 'Search for a suburb or postcode',
     },
     showFullAddress: {
       type: Boolean,
-      default: false
+      default: false,
     },
     geocode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     reverseGeocode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     baseUrl: {
       type: String,
-      default: ''
+      default: '',
     },
     inputClassName: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   data() {
     return {
       suburb: {
         text: null,
         value: null,
-        location: null
+        location: null,
       },
       results: [],
       show: false,
       searchSuburbPostcodeDebounce: debounce(this.searchSuburbPostcode, 500, {
-        trailing: true
+        trailing: true,
       }),
       options: {
         enableHighAccuracy: true,
         timeout: 5000,
-        maximumAge: 0
+        maximumAge: 0,
       },
-      searchingAddress: false
+      searchingAddress: false,
     }
   },
   computed: {
@@ -105,7 +106,7 @@ export default {
     },
     isIE() {
       return window && navigator && this.detectBrowser(navigator) === 'IE'
-    }
+    },
   },
   watch: {
     suburb: {
@@ -115,8 +116,8 @@ export default {
         if (!this.suburb.location && this.suburb.text.length === 0) {
           this.$emit('cleared')
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     detectBrowser,
@@ -145,10 +146,9 @@ export default {
 
       try {
         const response = await (this?.$axios || axios).get(
-          `${this.baseUrl ||
-            window.origin}/places/api/v1/place/autocomplete/json?${
-            this.queryString
-          }`
+          `${
+            this.baseUrl || window.origin
+          }/places/api/v1/place/autocomplete/json?${this.queryString}`,
         )
         const predictions = response?.data?.predictions || []
         if (
@@ -182,28 +182,28 @@ export default {
     },
     async getLatLng(address) {
       const geocodedAddress = await (this.$axios || axios).get(
-        `${this.baseUrl}/places/api/v1/geocode/json?address=${address}&components=country:au&sensor=false`
+        `${this.baseUrl}/places/api/v1/geocode/json?address=${address}&components=country:au&sensor=false`,
       )
       if (geocodedAddress.data?.results[0]) {
         return Promise.resolve(
-          geocodedAddress.data.results[0].geometry.location
+          geocodedAddress.data.results[0].geometry.location,
         )
       }
     },
     async searchAddressByLatLng(lat, lng) {
       const geocodedAddress = await (this.$axios || axios).get(
-        `${this.baseUrl}/places/api/v1/geocode/json?latlng=${lat},${lng}`
+        `${this.baseUrl}/places/api/v1/geocode/json?latlng=${lat},${lng}`,
       )
       if (geocodedAddress.data?.results[0]) {
         return Promise.resolve(
-          geocodedAddress.data.results[0].formatted_address
+          geocodedAddress.data.results[0].formatted_address,
         )
       }
     },
     async updateValue(v) {
       this.suburb = {
         text: v.description,
-        value: v.structured_formatting.main_text
+        value: v.structured_formatting.main_text,
       }
       if (this.geocode && this.suburb.value) {
         this.suburb.location = await this.getLatLng(this.suburb.value)
@@ -213,10 +213,8 @@ export default {
       // Next tick is too fast
       // have to wait for DOM to update
       let self = this
-      setTimeout(function() {
-        document
-          .getElementById(`suburb-postcode-search-input-${_uid}`)
-          .focus()
+      setTimeout(function () {
+        document.getElementById(`suburb-postcode-search-input-${$.uid}`).focus()
       }, 100)
     },
     focusPrevious(e) {
@@ -236,7 +234,7 @@ export default {
         return navigator.geolocation.getCurrentPosition(
           self.findAndUpdateAddress,
           self.errorFindingLocation,
-          self.options
+          self.options,
         )
       } else {
         return false
@@ -244,7 +242,7 @@ export default {
     },
     async findAndUpdateAddress(pos) {
       let {
-        coords: { latitude, longitude }
+        coords: { latitude, longitude },
       } = pos
       let foundAddress = await this.searchAddressByLatLng(latitude, longitude)
       this.suburb = {
@@ -252,16 +250,16 @@ export default {
         value: foundAddress,
         location: {
           lat: latitude,
-          lng: longitude
-        }
+          lng: longitude,
+        },
       }
       this.searchingAddress = false
       this.$emit('suburbChange', this.suburb)
     },
     errorFindingLocation(err) {
       console.warn(err)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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)
@@ -117,23 +117,19 @@ export default {
     async submitForm(submission, formioinstance) {
       this.setAlert(null)
       this.loading = true
-      const submitPayload = this.formSubmitParser.parse(
+      const submitPayload = await 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>