@worksafevictoria/wcl7.5 1.1.0-beta.7 → 1.1.0-beta.70

package/src/components/SubComponents/FormInstance/index.test.js

@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import FormInstance from './index.vue'
+import {nextTick} from 'vue'
+import * as axios from 'axios'
+import scale from './stories/mocks/scale.json'
+import autocomplete from './stories/mocks/autocomplete.json'
+
+jest.mock('axios')
+describe('Form Instance', () => {
+
+  it('should create a scale form instance component', async () => {
+    axios.get.mockImplementation((path) => {
+      if (String(path).endsWith('/fields')) {
+        return Promise.resolve({ data: scale })
+      }
+      return Promise.reject({})
+    })
+    const wrapper = mount(FormInstance, {
+      propsData: {
+        preview: false,
+        formid: 'test',
+        contentApiUrl: '',
+        processID: 'xx12345xx'
+      }
+    })
+    await new Promise(process.nextTick);
+    expect(wrapper.find(`[ref="webform"]`).exists()).toBe(true)
+    expect(wrapper.find(`[type="submit"]`).exists()).toBe(true)
+    expect(wrapper.find(`.formio-component-scale1`).exists()).toBe(true)
+    expect(wrapper.find(`.col-form-label`).exists()).toBe(true)
+    expect(wrapper.find(`.col-form-label`).text()).toBe('scale1')
+
+    const scaleButton = wrapper.find('[title="4"]')
+    scaleButton.trigger('click')
+    await nextTick()
+    expect(wrapper.find(`.formalert`).exists()).toBe(false)
+  })
+
+  it('should create an autocomplete form instance component', async () => {
+    axios.get.mockImplementation((path) => {
+      if (String(path).endsWith('/fields')) {
+        return Promise.resolve({ data: autocomplete })
+      }
+      return Promise.reject({})
+    })
+    const wrapper = mount(FormInstance, {
+      propsData: {
+        preview: false,
+        formid: 'test',
+        contentApiUrl: '',
+        processID: 'xx12345xx'
+      }
+    })
+    await new Promise(process.nextTick);
+    expect(wrapper.find(`.formio-component-autocomplete1`).exists()).toBe(true)
+
+    const dropdown = wrapper.find('.form-control')
+    dropdown.trigger('click')
+    await nextTick()
+    expect(wrapper.findAll('.choices__item').length).toBe(1)
+    expect(wrapper.find(`.choices__item`).text()).toBe(
+      'No choices to choose from'
+    )
+  })
+})

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

@@ -1,14 +1,63 @@
 <template>
-  <div>
-    <h1>Form Instance</h1>
-  <p>
-    The .vue and .stories.js files for SubComponents/FormInstance (displayed in Storybook under Form) must be copied from current Storybook 6 branch when time to upgrade them.  They are causing errors preventing Storybook from being rendered and therefore tested.
-  </p>
+  <div class="webforms">
+    <form-handler
+      :formid="formid"
+      :web-form-json="webFormJson"
+      :content-api-url="contentApiUrl"
+      :preview="preview"
+      :process-i-d="processID"
+      @changed="(e, i) => $emit('changed', e, i)"
+      @submitted="(e, i) => $emit('submitted', e, i)"
+      @rendered="() => $emit('rendered')"
+      @nextPage="() => $emit('nextPage')"
+      @prevPage="() => $emit('prevPage')"
+    />
+    <i v-if="preview" class="fa fa-info-circle text-muted">
+      <span> preview mode. submission logged to console</span>
+    </i>
   </div>
 </template>
 
 <script>
+import FormHandler from './components/handler/index.vue'
+
 export default {
-    name: 'FormInstance'
+  name: 'FormInstance',
+  components: { FormHandler },
+  props: {
+    formid: {
+      type: String,
+      required: false,
+      default: null
+    },
+    webFormJson: {
+      type: Object,
+      required: false,
+      default: () => null
+    },
+    contentApiUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    preview: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    processID: {
+      type: String,
+      required: true
+    }
+  }
 }
 </script>
+<style scoped lang="scss">
+.webforms {
+  max-width: 800px;
+  margin: 0 auto;
+  :deep() {
+    @import './style.scss';
+  }
+}
+</style>

package/src/components/SubComponents/FormInstance/models/base-form-element.js

@@ -0,0 +1,338 @@
+import { parseElementStates } from '../services/logic-parser'
+import { generateUniqueId, htmlDecode, isEmpty } from './form-utils'
+
+let counter = 0
+export class BaseFormElement {
+  constructor(webformElement, parent, moreInstance) {
+    counter = counter + 1
+    this.counter = counter
+    this.webformElement = webformElement
+    this.formIOdefinitionForElement = undefined
+    this.baseApiUrl = undefined
+    this.baseUiUrl = undefined
+    this.parent = parent
+    this.children = []
+    this.uniqueId = generateUniqueId()
+    this.moreInstance = moreInstance
+  }
+
+  getParent() {
+    return this.parent
+  }
+
+  isRenderable() {
+    // permissions this.webformElement['#access']
+    return true
+  }
+
+  getLabel() {
+    return this.webformElement['#title']
+  }
+
+  getCasing() {
+    const casing = this.webformElement['#input_mask']
+    if (casing === "'casing': 'upper'") {
+      return 'uppercase'
+    } else if (casing === "'casing': 'lower'") {
+      return 'lowercase'
+    }
+    return undefined
+  }
+
+  getAutoComplete() {
+    const autocomplete = this.webformElement['#autocomplete']
+    return autocomplete === '' ? 'off' : autocomplete
+  }
+
+  shouldHideLabel() {
+    return (
+      ['none', 'invisible'].includes(this.webformElement['#title_display']) ||
+      this.isEmpty(this.getLabel())
+    )
+  }
+
+  getLabelPosition() {
+    return this.getPosition(
+      this.webformElement['#_title_display'] ??
+        this.webformElement['#title_display']
+    )
+  }
+
+  getDescriptionPosition() {
+    return this.getPosition(this.webformElement['#description_display'])
+  }
+
+  getInputMask() {
+    const inputMask = this.webformElement['#input_mask']
+    if (!this.isEmpty(inputMask) && !inputMask.includes("': '")) {
+      return inputMask
+    }
+    return undefined
+  }
+
+  shouldHideInputText() {
+    return this.webformElement['#input_hide'] === true
+  }
+
+  getPosition(display) {
+    switch (display) {
+      case 'before':
+        return 'top'
+      case 'after':
+        return 'bottom'
+      case 'inline':
+        return 'left-left'
+      case 'none':
+      case 'invisible':
+        return undefined
+      default:
+        return 'top'
+    }
+  }
+
+  getId() {
+    return this.webformElement['#webform_id'] || this.uniqueId
+  }
+
+  getKey() {
+    return this.webformElement['#webform_key'] || this.uniqueId
+  }
+
+  getName() {
+    return this.webformElement['#name']
+  }
+
+  getType() {
+    return this.webformElement['#type']
+  }
+
+  isInput() {
+    return true
+  }
+
+  getHtmlText(markupElement) {
+    return this.webformElement[markupElement]?.['#markup']
+  }
+
+  getDescription() {
+    return this.webformElement['#description']
+  }
+
+  shouldClearValuesWhenHidden() {
+    if (!this.isEmpty(this.webformElement['#states_clear'])) {
+      return this.webformElement['#states_clear']
+    }
+    return true
+  }
+
+  isCustomPropertiesAnArray() {
+    return false
+  }
+
+  getCustomProperties() {
+    return {}
+  }
+
+  isLayoutComponent() {
+    return false
+  }
+
+  isPageComponent() {
+    return false
+  }
+
+  getCustomCSS() {
+    const getStyle = (obj) => {
+      return Object.keys(obj || {}).reduce((css, key) => {
+        if (key === 'style') {
+          css += `${obj[key]};`
+        } else {
+          const validCSS = !window.CSS || window.CSS.supports(key, obj[key])
+          if (validCSS) {
+            css += `${key}: ${obj[key]};`
+          }
+        }
+        return css
+      }, '')
+    }
+
+    const style = {
+      label: getStyle(this.webformElement['#label_attributes']),
+      wrapper: getStyle(this.webformElement['#wrapper_attributes']),
+      element: getStyle(this.webformElement['#attributes']),
+      additional: this.getAdditionalStyles(this.getCustomClass())
+    }
+    const hasOverride = Object.values(style).some((attr) => !this.isEmpty(attr))
+    return hasOverride ? style : undefined
+  }
+
+  getAdditionalStyles(_customCssClass) {
+    return ''
+  }
+
+  getTooltip() {
+    const stripHtml = (html) => {
+      const tmp = document.createElement('DIV')
+      tmp.innerHTML = html
+      return tmp.textContent || tmp.textContent || ''
+    }
+    const title = this.webformElement['#help_title']
+    const descriptionRaw = this.webformElement['#help']
+    const description = !this.isEmpty(descriptionRaw)
+      ? stripHtml(descriptionRaw)
+      : undefined
+
+    if (!this.isEmpty(title) && !this.isEmpty(description)) {
+      return `<strong>${title}</strong>\n${description}`
+    } else if (!this.isEmpty(title)) {
+      return `${title}`
+    } else if (!this.isEmpty(description)) {
+      return `${description}`
+    } else {
+      return undefined
+    }
+  }
+
+  getPlaceholder() {
+    return this.webformElement['#placeholder']
+  }
+
+  isEmpty(str) {
+    return isEmpty(str)
+  }
+
+  getPrefix() {
+    return this.webformElement['#field_prefix']
+  }
+
+  getSuffix() {
+    return this.webformElement['#field_suffix']
+  }
+
+  getValidation() {
+    if (this.isLayoutComponent()) {
+      return {}
+    }
+    const validation = {}
+
+    const addValidation = (webformProp, formIoProp) => {
+      if (!this.isEmpty(this.webformElement[webformProp])) {
+        validation[formIoProp] = this.webformElement[webformProp]
+      }
+    }
+    addValidation('#minlength', 'minLength')
+    addValidation('#maxlength', 'maxLength')
+
+    addValidation('#min', 'min')
+    addValidation('#max', 'max')
+
+    addValidation('#pattern', 'pattern')
+
+    addValidation('#required', 'required')
+    addValidation('#unique', 'unique')
+
+    if (this.webformElement['#counter_type'] === 'word') {
+      addValidation('#counter_minimum', 'minWords')
+      addValidation('#counter_maximum', 'maxWords')
+    }
+
+    addValidation('#required_error', 'customMessage')
+    addValidation('#pattern_error', 'customMessage')
+
+    const customValidation = this.webformElement['#validation']
+    if (!this.isEmpty(customValidation)) {
+      validation['custom'] = `valid = ${htmlDecode(customValidation)}`
+    }
+
+    return validation
+  }
+
+  getLogic() {
+    if (this.isEmpty(this.webformElement['#states'])) {
+      return undefined
+    } else {
+      return parseElementStates(this.webformElement)
+    }
+  }
+
+  isDisabled() {
+    return !!this.webformElement['#disabled'] || !!this.isReadOnly()
+  }
+
+  isReadOnly() {
+    return !!this.webformElement['#readonly']
+  }
+
+  shouldIgnoreSubmissionValue() {
+    return false
+  }
+
+  transformSubmissionValue(value) {
+    return value
+  }
+
+  setFormIOdefinitionForElement(def) {
+    this.formIOdefinitionForElement = def
+  }
+
+  setFormSettingsMeta(formSettingsMeta) {
+    this.formSettingsMeta = formSettingsMeta
+  }
+
+  getFormSettingsMeta() {
+    return this.formSettingsMeta
+  }
+
+  getDefaultValue() {
+    let defaultValue = !this.isEmpty(this.webformElement['#value'])
+      ? this.webformElement['#value']
+      : this.webformElement['#default_value']
+
+    if (defaultValue && typeof defaultValue === 'string') {
+      // the form loads with api worksafe user data loaded in the defaults
+      if (
+        defaultValue.startsWith('api_worksafe') ||
+        defaultValue.startsWith('api-worksafe')
+      ) {
+        defaultValue = undefined
+      }
+    } else if (defaultValue && typeof defaultValue === 'object') {
+      delete defaultValue.content
+      delete defaultValue.headers
+    }
+    return this.getPrepopulatedValue(defaultValue)
+  }
+
+  getPrepopulatedValue(defaultValue) {
+    if (this.webformElement['#prepopulate']) {
+      const urlParams = new URLSearchParams(window.location.search)
+      if (urlParams.has(this.getName())) {
+        return urlParams.get(this.getName()) ?? defaultValue
+      }
+    }
+    return defaultValue
+  }
+  onchange(_component, _instance, _axios) {
+    return Promise.resolve()
+  }
+
+  getCustomClass() {
+    return 'custom-formio-' + this.counter
+  }
+
+  onRender(formElement) {
+    if (this.moreInstance) {
+      const element = formElement.querySelector('#' + this.getId())
+      if (element) {
+        this.moreInstance.counter = this.counter + 1000
+        const text = this.moreInstance.getContent()
+
+        const div = document.createElement('div')
+        div.innerHTML = text
+        element.appendChild(div)
+        this.moreInstance.onRender(formElement)
+      }
+    }
+    return Promise.resolve()
+  }
+}

package/src/components/SubComponents/FormInstance/models/form-callback-queue.js

@@ -0,0 +1,45 @@
+export class FormCallbackQueue {
+  static queue = []
+  static pendingPromise = false
+
+  static enqueue(promise) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({
+        promise,
+        resolve,
+        reject
+      })
+      this.dequeue()
+    })
+  }
+
+  static dequeue() {
+    if (this.workingOnPromise) {
+      return false
+    }
+    const item = this.queue.shift()
+    if (!item) {
+      return false
+    }
+    try {
+      this.workingOnPromise = true
+      item
+        .promise()
+        .then((value) => {
+          this.workingOnPromise = false
+          item.resolve(value)
+          this.dequeue()
+        })
+        .catch((err) => {
+          this.workingOnPromise = false
+          item.reject(err)
+          this.dequeue()
+        })
+    } catch (err) {
+      this.workingOnPromise = false
+      item.reject(err)
+      this.dequeue()
+    }
+    return true
+  }
+}

package/src/components/SubComponents/FormInstance/models/form-utils.js

@@ -0,0 +1,50 @@
+export function generateUniqueId() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+export function htmlDecode(input) {
+  const e = document.createElement('textarea')
+  e.innerHTML = input ?? ''
+  // handle case of empty input
+  return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue
+}
+
+export function isEmpty(str) {
+  if (str === null || str === undefined) {
+    return true
+  }
+  if (typeof str === 'string') {
+    return /^\s*$/.test(str)
+  }
+  return false
+}
+
+export function convertStringWithDotNotationToObject(obj, str, val) {
+  let keys, key
+  if (
+    !str ||
+    !str.length ||
+    Object.prototype.toString.call(str) !== '[object String]'
+  ) {
+    return false
+  }
+  if (obj !== Object(obj)) {
+    obj = {}
+  }
+  keys = str.split('.')
+  while (keys.length > 1) {
+    key = keys.shift()
+    if (obj !== Object(obj)) {
+      obj = {}
+    }
+    if (!(key in obj)) {
+      obj[key] = {}
+    }
+    obj = obj[key]
+  }
+  return (obj[keys[0]] = val)
+}

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

@@ -0,0 +1,141 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class AddresseFormElement extends BaseFormElement {
+  getType() {
+    return 'address'
+  }
+
+  isFullAddressSearch() {
+    const composite = this.getCompositeFields()
+    return composite['address'] && composite['address']['#access'] !== false
+  }
+
+  getCompositeFields() {
+    return this.webformElement['#webform_composite_elements'] || {}
+  }
+
+  getManualField(key, composite) {
+    if (composite[key] && composite[key]['#access'] !== false) {
+      return {
+        label: (composite[key]['#title'] || '')
+          .replace('ZIP/', '')
+          .replace('/Province', '')
+          .replace('City/Town', 'Suburb')
+          .replace('Postal Code', 'Postcode'),
+        tableView: false,
+        key,
+        type: 'textfield',
+        input: true,
+        customConditional:
+          "show = _.get(instance, 'parent.manualMode', false);",
+      }
+    }
+  }
+
+  getManualFields() {
+    const composite = this.getCompositeFields()
+    return Object.keys(composite)
+      .map((field) => this.getManualField(field, composite))
+      .filter((field) => !!field)
+  }
+
+  getCustomProperties() {
+    const autoCompletePath = '/places/api/v1/place/autocomplete/json'
+    // 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',
+        },
+        url: `${baseUrl}${autoCompletePath}`,
+        queryProperty: 'input',
+        displayValueProperty: 'description',
+        responseProperty: 'predictions',
+      },
+      switchToManualModeLabel: "Can't find address? Switch to manual mode.",
+      input: true,
+      components: this.getManualFields(),
+    }
+  }
+
+  transformSubmissionValue(value) {
+    const getComponents = (key) =>
+      this.getManualFields().find((field) => key === field.key)
+    if (value) {
+      const isAutoComplete =
+        value.mode === 'autocomplete' &&
+        Array.isArray(value?.geocode?.address_components)
+      if (isAutoComplete) {
+        const getVal = (key) =>
+          value?.geocode?.address_components.find(
+            (item) => item?.types?.[0] === key,
+          )?.long_name
+        const address1 = getComponents('address')
+        const city = getComponents('city')
+        const state = getComponents('state_province')
+        const postcode = getComponents('postal_code')
+        const country = getComponents('country')
+
+        return {
+          [this.getKey()]: {
+            [address1?.key]: value.address?.structured_formatting?.main_text,
+            [city?.key]: getVal('locality'),
+            [state?.key]: getVal('administrative_area_level_1'),
+            [postcode?.key]: getVal('postal_code'),
+            [country?.key]: getVal('country'),
+          },
+        }
+      } else if (value.mode === 'manual') {
+        return {
+          [this.getKey()]: value.address,
+        }
+      }
+    }
+    return value
+  }
+
+  onchange(_element, formioInstance, axios) {
+    const value = formioInstance.getValue()
+    if (
+      value?.mode !== 'manual' &&
+      value?.address?.place_id &&
+      value.address.description &&
+      (!value.geocode ||
+        value.geocode.formatted_address !== value.address.description)
+    ) {
+      const geocodePath = '/places/api/v1/geocode/json'
+      // 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}`
+
+      return axios.get(url).then((response) => {
+        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'),
+          )?.short_name
+          const fullAddress = value.address.description.replace(
+            /,(?=[^,]*$)/,
+            `, ${postcode}`,
+          )
+          value.address.description = fullAddress
+          value.geocode = results[0]
+          value.mode = 'autocomplete'
+          return Promise.resolve(value)
+        }
+      })
+    }
+    return Promise.resolve()
+  }
+}