@worksafevictoria/wcl7.5 1.1.11 → 1.1.12

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

@@ -0,0 +1,26 @@
+import { BaseFormElement } from '../base-form-element'
+import { htmlDecode } from '../form-utils'
+
+export class TextAreaFormElement extends BaseFormElement {
+  getType() {
+    return 'textarea'
+  }
+
+  getCustomProperties() {
+    if (this.webformElement['#type'] === 'value') {
+      let defaultValue
+      if (!this.isEmpty(this.webformElement['#value'])) {
+        defaultValue = htmlDecode(this.webformElement['#value'])
+      }
+      return {
+        editor: 'quill',
+        isUploadEnabled: false,
+        defaultValue
+      }
+    } else {
+      return {
+        autoExpand: true
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class TextFormatFormElement extends BaseFormElement {
+  getType() {
+    return 'textarea'
+  }
+
+  getCustomProperties() {
+    return {
+      wysiwyg: true
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class TimeFormElement extends BaseFormElement {
+  getType() {
+    return 'time'
+  }
+
+  getCustomProperties() {
+    return {
+      inputMask: '99:99'
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+import { BaseFormElement } from '../base-form-element'
+import { generateUniqueId, htmlDecode } from '../form-utils'
+
+export class TwigFormElement extends BaseFormElement {
+  getContent() {
+    let content = ''
+    const id = generateUniqueId('xxxxx')
+    const shouldHideLabel = this.shouldHideLabel()
+    if (!shouldHideLabel) {
+      content += `<label for="${id}" class="col-form-label">${this.getLabel()}</label>`
+    }
+
+    const tpl = this.showTokens()
+      ? this.getTokenContent()
+      : this.webformElement['#template']
+    if (!this.isEmpty(tpl)) {
+      content += htmlDecode(`<div id="${id}">${tpl}</div>`)
+    }
+
+    return content
+  }
+
+  isInput() {
+    return false
+  }
+
+  printTokens(form, data) {
+    form.components
+      .filter((el) => el.key !== 'action')
+      .reduce((prev, element) => {
+        const add = (cmp, parents) => {
+          if (!Array.isArray(cmp.components)) {
+            parents.push(cmp)
+            cmp.compositekey = parents
+              .filter((parent) => parent.type !== 'datagrid')
+              .map((parent) => parent.key)
+              .join('.')
+
+            prev.push(cmp)
+          } else {
+            if (cmp.type !== 'panel') {
+              parents.push(cmp)
+            }
+            cmp.components.forEach((subElement) =>
+              add(subElement, JSON.parse(JSON.stringify(parents)))
+            )
+          }
+        }
+        add(element, [])
+        return prev
+      }, [])
+      .filter((element) => element.input)
+      .map((element) => {
+        const index = function(obj, is, value) {
+          if (typeof is == 'string') return index(obj, is.split('.'), value)
+          else if (is.length == 1 && value !== undefined)
+            return (obj[is[0]] = value)
+          else if (is.length == 0) return obj
+          else return index(obj[is[0]], is.slice(1), value)
+        }
+        const dataElement = index(data, element.compositekey)
+        if (
+          dataElement !== null &&
+          dataElement !== undefined &&
+          dataElement !== ''
+        ) {
+          let value = dataElement
+          if (value === true || value === false) {
+            value = value === true ? 'Yes' : 'No'
+          } else if (Array.isArray(value)) {
+            value = value
+              .map((item) => {
+                if (!!item && item.constructor === Object) {
+                  return Object.values(item).join(', ')
+                } else {
+                  return item
+                }
+              })
+              .join(', ')
+          }
+          return element.label + ': ' + value
+        }
+        return undefined
+      })
+      .filter((tag) => !!tag)
+      .join('<br/>')
+  }
+
+  getTokenContent() {
+    const printFn = this.printTokens.toString()
+    const printFnBody = printFn.slice(
+      printFn.indexOf('{') + 1,
+      printFn.lastIndexOf(';')
+    )
+    return `
+    {{
+      ${printFnBody}
+    }} <br/><br/>`
+  }
+
+  showTokens() {
+    return (
+      this.webformElement['#webform_plugin_id'] === 'webform_computed_token'
+    )
+  }
+
+  getType() {
+    return 'htmlelement'
+  }
+
+  getCustomProperties() {
+    return {
+      tag: 'div',
+      content: this.getContent(),
+      refreshOnChange: true
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class UnknownFormElement extends BaseFormElement {
+  getType() {
+    return 'htmlelement'
+  }
+
+  isInput() {
+    return false
+  }
+
+  getLogic() {
+    return undefined
+  }
+
+  getCustomProperties() {
+    return {
+      content: `<span style="color: red">** Error: unhandled form element ${
+        this.webformElement['#type']
+      } >> ${this.getLabel() || this.getName()} **<s/pan>`,
+      refreshOnChange: false
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class URLFormElement extends BaseFormElement {
+  transformSubmissionValue(url) {
+    if (url) {
+      const pattern = /^((http|https|ftp):\/\/)/
+      if (!pattern.test(url)) {
+        url = 'http://' + url
+      }
+    }
+    return url
+  }
+}

package/src/components/SubComponents/FormInstance/services/convert-form-element.js

@@ -0,0 +1,49 @@
+export const converFormIOElementToJSON = (formioElement, formlogicList) => {
+  let formioElementJSON
+  if (formioElement.isCustomPropertiesAnArray()) {
+    formioElementJSON = formioElement.getCustomProperties()
+  } else {
+    formioElementJSON = Object.assign(
+      {
+        label: formioElement.getLabel(),
+        labelPosition: formioElement.getLabelPosition(),
+        autocomplete: formioElement.getAutoComplete(),
+        key: formioElement.getKey(),
+        id: formioElement.getId(),
+        type: formioElement.getType(),
+        input: formioElement.isInput(),
+        inputMask: formioElement.getInputMask(),
+        mask: formioElement.shouldHideInputText(),
+        description: formioElement.getDescription(),
+        tooltip: formioElement.getTooltip(),
+        placeholder: formioElement.getPlaceholder(),
+        prefix: formioElement.getPrefix(),
+        suffix: formioElement.getSuffix(),
+        validate: formioElement.getValidation(),
+        case: formioElement.getCasing(),
+        disabled: formioElement.isDisabled(),
+        hideLabel: formioElement.shouldHideLabel(),
+        clearOnHide: formioElement.shouldClearValuesWhenHidden(),
+        defaultValue: formioElement.getDefaultValue(),
+        customClass: formioElement.getCustomClass(),
+        attributes: {
+          instance: () => formioElement,
+          counter: formioElement.counter
+        }
+      },
+      formioElement.getCustomProperties()
+    )
+
+    Object.keys(formioElementJSON)
+      .filter((key) => formioElementJSON[key] === undefined)
+      .forEach((key) => delete formioElementJSON[key])
+  }
+  const logicList = formioElement.getLogic()
+  if (logicList && Array.isArray(logicList) && logicList.length > 0) {
+    formlogicList.push({
+      logicList,
+      sourceElement: formioElement
+    })
+  }
+  return { json: formioElementJSON, formlogicList }
+}

package/src/components/SubComponents/FormInstance/services/form-api.js

@@ -0,0 +1,47 @@
+export class FormApi {
+  initialise(baseUrl, formId, axios) {
+    this.baseUrl = baseUrl
+    this.formId = formId
+    this.axios = axios
+  }
+
+  fetchFormSchema = async () => {
+    try {
+      const formRestPath = `${this.baseUrl}/webform_rest/${this.formId}/fields`
+      const response = await this.axios.get(formRestPath)
+      return response?.data
+    } catch (e) {
+      return null
+    }
+  }
+
+  submitForm = async (payload, isPreview, tree) => {
+    if (isPreview) {
+      console.log('submission payload', payload)
+      return { submitted: true }
+    }
+    if (!payload) {
+      return { submitted: false }
+    }
+    try {
+      const formRestPath = `${this.baseUrl}/webform_rest/submit?_format=json`
+      let res = await this.axios.post(formRestPath, payload)
+      return { submitted: true, sid: res.data.sid }
+    } catch (e) {
+      const isValidationError =
+        typeof e === 'object' && e.response?.status === 400
+      if (isValidationError) {
+        return {
+          submitted: false,
+          message: e.response.data.error.message,
+          fields: Object.keys(e.response.data.error || {}).map((key) => ({
+            label: tree[key]?.getLabel() || key,
+            elementClass: tree[key]?.getCustomClass(),
+            error: e.response.data.error[key]
+          }))
+        }
+      }
+      return { submitted: false }
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/services/form-render-parser.js

@@ -0,0 +1,156 @@
+import { isEmpty } from '../models/form-utils'
+import { converFormIOElementToJSON } from './convert-form-element'
+import { updateConditionWithFormReferences } from './logic-linker'
+import { RegisterFactory } from './registry-factory'
+
+export class FormRenderParser {
+  initialise(contentApiUrl, isPreview) {
+    this.formSettingsMeta = { contentApiUrl }
+    this.isPreview = isPreview
+  }
+
+  parse = (webform, options) => {
+    if (!webform) {
+      return null
+    }
+    const webFormElementTree = {}
+    const formlogicList = []
+    try {
+      webform = this.preProcessWebForm(webform)
+      const formiodefinition = {
+        id: webform['#id'],
+        components: this.parseFormContainerComponents(
+          webform,
+          webFormElementTree,
+          null,
+          formlogicList
+        )
+      }
+
+      options.breadcrumbSettings = { clickable: false }
+      options.buttonSettings = { showCancel: false }
+
+      this.applyConditionsToForm(webFormElementTree, formlogicList)
+      const css = this.applyStylesToForm(webFormElementTree)
+
+      formiodefinition.display = this.getDisplay(webFormElementTree)
+      if (this.isPreview) {
+        console.log('drupal webform', webform)
+        console.log('formio definition', formiodefinition)
+      }
+      return {
+        definition: formiodefinition,
+        tree: webFormElementTree,
+        options,
+        css
+      }
+    } catch (e) {
+      console.error(e)
+      return null
+    }
+  }
+
+  parseFormContainerComponents = (
+    container,
+    webFormElementTree,
+    parent,
+    formlogicList
+  ) => {
+    return Object.keys(container)
+      .filter((i) => !i.startsWith('#'))
+      .map((i) => container[i])
+      .map((webFormElement) => {
+        return RegisterFactory.getFormIOElement(
+          webFormElement,
+          this.formSettingsMeta,
+          parent
+        )
+      })
+      .filter(
+        (formIOElement) => !!formIOElement && formIOElement.isRenderable()
+      )
+      .map((formIOElement) => {
+        // nested form logic
+        if (formIOElement.isLayoutComponent()) {
+          const subContainer = formIOElement.getContainerChildElements()
+          formIOElement.setComponents(
+            this.parseFormContainerComponents(
+              subContainer,
+              webFormElementTree,
+              formIOElement,
+              formlogicList
+            )
+          )
+        }
+
+        return formIOElement
+      })
+      .map((formIOElement) => {
+        // conversion logic
+        webFormElementTree[formIOElement.getKey()] = formIOElement
+        const formioElementJSON = converFormIOElementToJSON(
+          formIOElement,
+          formlogicList
+        ).json
+        formIOElement.setFormIOdefinitionForElement(formioElementJSON)
+        return formioElementJSON
+      })
+  }
+
+  preProcessWebForm = (webform) => {
+    const hasSubmitButton = !!webform.actions
+    if (!hasSubmitButton) {
+      webform.actions = {
+        '#type': 'webform_actions',
+        '#webform_id': 'form--actions',
+        '#webform_key': 'actions'
+      }
+    }
+    return webform
+  }
+
+  applyConditionsToForm = (webFormElementTree, formlogicList) => {
+    formlogicList.forEach(({ logicList, sourceElement }) => {
+      logicList.forEach((logic) =>
+        updateConditionWithFormReferences(
+          logic,
+          sourceElement,
+          webFormElementTree
+        )
+      )
+    })
+  }
+
+  applyStylesToForm = (webFormElementTree) => {
+    let css = ''
+    Object.values(webFormElementTree).forEach((element) => {
+      const overrides = element.getCustomCSS()
+
+      if (overrides) {
+        const addStyle = (style, selector) => {
+          if (!isEmpty(style)) {
+            css += `.${element.getCustomClass()} ${selector}{${style}}`
+          }
+        }
+        addStyle(overrides.label, 'label ')
+        addStyle(overrides.wrapper, '')
+        addStyle(overrides.element, '[ref=element] > *')
+
+        if (!isEmpty(overrides.additional)) {
+          css += overrides.additional
+        }
+      }
+    })
+    return css
+  }
+
+  getDisplay(webFormElementTree) {
+    const pageKeys = Object.keys(webFormElementTree).filter((elementKey) =>
+      webFormElementTree[elementKey].isPageComponent()
+    )
+    if (pageKeys.length > 0) {
+      return 'wizard'
+    }
+    return 'form'
+  }
+}

package/src/components/SubComponents/FormInstance/services/form-submit-parser.js

@@ -0,0 +1,61 @@
+export class FormSubmitParser {
+  initialise(formId, axios) {
+    this.formId = formId
+    this.axios = axios
+  }
+
+  parse = (submission, form, formioinstance) => {
+    try {
+      return {
+        webform_id: this.formId,
+        ...this.parseFormInstance(submission.data, form, formioinstance)
+      }
+    } catch (e) {
+      console.error(e)
+      return null
+    }
+  }
+
+  parseFormInstance = (formSubmissionMap, form, formioinstance) => {
+    return Object.keys(formSubmissionMap)
+      .filter((key) => key !== 'actions')
+      .filter((key) => !!form.tree[key])
+      .reduce((previous, key) => {
+        const formTreeElement = form.tree[key]
+        const value = formSubmissionMap[key]
+        const component = formioinstance.components.find(
+          (component) => component.originalComponent?.key === key
+        )
+        const isDisabled = component?.disabled
+        const ignore =
+          isDisabled || formTreeElement.shouldIgnoreSubmissionValue()
+        if (formTreeElement.isLayoutComponent() && ignore) {
+          const containerSubmissions = this.parseFormInstance(
+            value,
+            form,
+            formioinstance
+          )
+          previous = {
+            ...previous,
+            ...containerSubmissions
+          }
+        } else if (!ignore) {
+          const returnValue = formTreeElement.transformSubmissionValue(
+            value,
+            this.axios,
+            previous
+          )
+          if (typeof returnValue === 'object' && !Array.isArray(returnValue)) {
+            previous = {
+              ...previous,
+              ...returnValue
+            }
+          } else {
+            previous[key] = returnValue
+          }
+        }
+
+        return previous
+      }, {})
+  }
+}

package/src/components/SubComponents/FormInstance/services/logic-linker.js

@@ -0,0 +1,73 @@
+export function updateConditionWithFormReferences(
+  logic,
+  sourceElement,
+  webFormElementTree
+) {
+  const condition = logic.trigger.javascript
+  // check if condition references elements with nested parents
+  let match = getElementToReplace(condition)
+  updateSourceElement(sourceElement, logic)
+
+  if (match) {
+    // if yes then replace condition data.{text1} with data.container1.text1
+    const conditionReferenceToElement = webFormElementTree[match.to]
+    if (conditionReferenceToElement) {
+      const updatedCondition = updateConditionWithReference(
+        condition,
+        conditionReferenceToElement,
+        match.from
+      )
+      logic.trigger.javascript = updatedCondition
+      match = getElementToReplace(condition)
+      return match
+        ? updateConditionWithFormReferences(
+            logic,
+            sourceElement,
+            webFormElementTree
+          )
+        : updatedCondition
+    }
+  }
+  return condition
+}
+
+function updateSourceElement(sourceElement, logic) {
+  const formioElement = sourceElement.formIOdefinitionForElement
+  formioElement.logic = formioElement.logic || []
+  formioElement.logic.push(logic)
+  for (const key in logic.defaultProps) {
+    const defaults = logic.defaultProps[key]
+    if (typeof defaults === 'object') {
+      for (const defaultkey in defaults) {
+        formioElement[key] = formioElement[key] || {}
+        formioElement[key][defaultkey] = defaults[defaultkey]
+      }
+    } else {
+      formioElement[key] = defaults
+    }
+  }
+}
+
+function updateConditionWithReference(
+  condition,
+  elementToReplace,
+  elementKeyToReplace
+) {
+  const elementToReplaceParent = elementToReplace.getParent()
+  const formReferenceParentKey = elementToReplaceParent
+    ? elementToReplaceParent.getKey() + '.'
+    : ''
+  let updatedCondition = condition.replace(
+    elementKeyToReplace,
+    formReferenceParentKey + elementToReplace.getKey()
+  )
+  return updatedCondition
+}
+
+function getElementToReplace(condition) {
+  const match = condition.match(/{([^}]+)}/)
+  if (match) {
+    return { from: match[0], to: match[1] }
+  }
+  return null
+}