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

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
+}

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

@@ -0,0 +1,173 @@
+import {
+  convertStringWithDotNotationToObject,
+  generateUniqueId,
+  isEmpty
+} from '../models/form-utils'
+
+export function parseElementStates(webformElement) {
+  const states = webformElement['#states'] || {}
+  let logicList = []
+  Object.keys(states)
+    .map((key) => {
+      let elementCondition = key
+      if (key.endsWith('-slide')) {
+        elementCondition = key.replace('-slide', '')
+      }
+      const logic = getLogicBasedOnCondition(elementCondition)
+      return { sourceKey: key, elementCondition, logic }
+    })
+    .filter(({ logic }) => !!logic)
+    .forEach(({ sourceKey, logic }) => {
+      const state = states[sourceKey]
+      let conditonal = `result = (`
+      if (Array.isArray(state)) {
+        state.forEach((rule) => (conditonal += ruleToString(rule, conditonal)))
+      } else {
+        conditonal += ruleToString(state, conditonal)
+      }
+      conditonal += ')'
+      logic.trigger.javascript = conditonal
+      logicList.push(logic)
+    })
+
+  return logicList
+}
+
+function getLogicBasedOnCondition(elementCondition) {
+  if (elementCondition === 'visible') {
+    return createNewLogic('hidden', false)
+  } else if (elementCondition === 'invisible') {
+    return createNewLogic('hidden', true)
+  } else if (elementCondition === 'disabled') {
+    return createNewLogic('disabled', true)
+  } else if (elementCondition === 'enabled') {
+    return createNewLogic('disabled', false)
+  } else if (elementCondition === 'readonly') {
+    return createNewLogic('disabled', true)
+  } else if (elementCondition === 'readwrite') {
+    return createNewLogic('disabled', false)
+  } else if (elementCondition === 'required') {
+    return createNewLogic('validate.required', true)
+  } else if (elementCondition === 'optional') {
+    return createNewLogic('validate.required', false)
+  }
+  return null
+}
+
+function ruleToString(rule) {
+  if (typeof rule === 'object') {
+    const conditions = Object.keys(rule).reduce((items, ruleKey) => {
+      const condition = ruleItemToString(rule[ruleKey], ruleKey)
+      if (!isEmpty(condition)) {
+        items.push(condition)
+      }
+      return items
+    }, [])
+    return `Boolean(${conditions.join(' && ')})`
+  } else if (rule === 'or') {
+    return ` || `
+  } else if (rule === 'and') {
+    return ` && `
+  } else if (rule === 'xor') {
+    return ` ^ `
+  }
+  return ''
+}
+
+function ruleItemToString(ruleItem, itemKey) {
+  const fieldName = itemKey.split(' ')[1] || itemKey.split(' ')[0]
+  const formElementID = fieldName?.match(/"([^']+)"/)[1]
+  const conditions = Object.keys(ruleItem)
+    .map((elementProp) =>
+      formElementID ? getTrigger(formElementID, ruleItem, elementProp) : null
+    )
+    .filter((trigger) => !!trigger)
+    .reduce((triggers, trigger) => {
+      triggers.push(trigger)
+      return triggers
+    }, [])
+  return conditions.join('')
+}
+
+function createNewLogic(actionName, actionValue) {
+  const defaultProps = {}
+  if (actionName.includes('.')) {
+    convertStringWithDotNotationToObject(
+      defaultProps,
+      actionName,
+      !!!actionValue
+    )
+  } else {
+    defaultProps[actionName] = !!!actionValue
+  }
+  return {
+    name: generateUniqueId(),
+    trigger: {
+      type: 'javascript',
+      javascript: ''
+    },
+    defaultProps,
+    actions: [
+      {
+        name: generateUniqueId(),
+        type: 'property',
+        property: {
+          label: generateUniqueId(),
+          value: actionName,
+          type: 'boolean'
+        },
+        state: actionValue
+      }
+    ]
+  }
+}
+
+function getTrigger(formElementID, ruleItem, prop) {
+  if (ruleItem.hasOwnProperty(prop)) {
+    const value = ruleItem[prop] ?? ''
+    let valueDelimeter = typeof value === 'string' ? "'" : ''
+    let expression = `${valueDelimeter}${value}${valueDelimeter}`
+    let variable = `data.{${formElementID}}`
+    if (typeof value !== 'object' && prop === 'value') {
+      return `${variable} === ${expression}`
+    } else if (typeof value === 'object' && prop === 'value') {
+      if (value.hasOwnProperty('pattern') || value.hasOwnProperty('!pattern')) {
+        const isPattern = value.hasOwnProperty('pattern')
+        const expression = isPattern ? value.pattern : value['!pattern']
+        const pattern = `(/${expression}/.test(${variable}))`
+        return isPattern ? pattern : `(!${pattern})`
+      } else if (value.hasOwnProperty('greater')) {
+        return `${variable} > ${value.greater}`
+      } else if (value.hasOwnProperty('greater_equal')) {
+        return `${variable} >= ${value['greater_equal']}`
+      } else if (value.hasOwnProperty('less')) {
+        return `${variable} < ${value.less}`
+      } else if (value.hasOwnProperty('less_equal')) {
+        return `${variable} <= ${value['less_equal']}`
+      } else if (
+        value.hasOwnProperty('between') ||
+        value.hasOwnProperty('!between')
+      ) {
+        const isBetween = value.hasOwnProperty('between')
+        const range = isBetween ? value.between : value['!between']
+        if (range) {
+          const rangeFrom = range.split(':')[0]
+          const rangeTo = range.split(':')[1]
+          const expression = `(${variable} >= ${rangeFrom} && ${variable} <= ${rangeTo})`
+          return isBetween ? expression : `(!${expression})`
+        }
+      }
+    } else if (typeof value !== 'object' && prop === '!value') {
+      return `${variable} !== ${expression}`
+    } else if (prop === 'filled') {
+      return `(${variable} !== null && ${variable} !== undefined && ${variable} !== '')`
+    } else if (prop === 'empty') {
+      return `!(${variable} !== null && ${variable} !== undefined && ${variable} !== '')`
+    } else if (prop === 'checked') {
+      return `(${variable} === ${value})`
+    } else if (prop === 'unchecked') {
+      return `(${variable} !== ${value})`
+    }
+  }
+  return null
+}

package/src/components/SubComponents/FormInstance/services/registry-factory.js

@@ -0,0 +1,284 @@
+import { AddresseFormElement } from '../models/overrides/address'
+import { AutoCompleteFormElement } from '../models/overrides/autocomplete'
+import { CheckboxFormElement } from '../models/overrides/checkbox'
+import { CheckboxesFormElement } from '../models/overrides/checkboxes'
+import { CodeFormElement } from '../models/overrides/code'
+import { ContainerFormElement } from '../models/overrides/container'
+import { CurrencyFormElement } from '../models/overrides/currency'
+import { CustomCompositeFormElement } from '../models/overrides/customcomposite'
+import { DateFormElement } from '../models/overrides/date'
+import { DateListFormElement } from '../models/overrides/datelist'
+import { DetailFormElement } from '../models/overrides/detail'
+import { EmailFormElement } from '../models/overrides/email'
+import { EmailConfirmFormElement } from '../models/overrides/email-confirm'
+import { FileFormElement } from '../models/overrides/file'
+import { FlexboxFormElement } from '../models/overrides/flexbox'
+import { HiddenFormElement } from '../models/overrides/hidden'
+import { LikertFormElement } from '../models/overrides/likert'
+import { MarkupFormElement } from '../models/overrides/markup'
+import { MessageFormElement } from '../models/overrides/message'
+import { MoreTextFormElement } from '../models/overrides/moretext'
+import { MultipleFormElement } from '../models/overrides/multiple'
+import { NumberFormElement } from '../models/overrides/number'
+import { OptionsOtherFormElement } from '../models/overrides/options-other'
+import { PageFormElement } from '../models/overrides/page'
+import { PhoneNumberFormElement } from '../models/overrides/phonenumber'
+import { RadioFormElement } from '../models/overrides/radio'
+import { RangeFormElement } from '../models/overrides/range'
+import { RatingFormElement } from '../models/overrides/rating'
+import { TestingFormElement } from '../models/overrides/testing' // Matt testing
+import { ScaleFormElement } from '../models/overrides/scale'
+import { SectionFormElement } from '../models/overrides/section'
+import { SelectFormElement } from '../models/overrides/select'
+import { SignatureFormElement } from '../models/overrides/signature'
+import { SubmitFormElement } from '../models/overrides/submit'
+import { TableFormElement } from '../models/overrides/table'
+import { TableRowFormElement } from '../models/overrides/tablerow'
+import { TableSelectFormElement } from '../models/overrides/tableselect'
+import { TextFormElement } from '../models/overrides/text'
+import { TextAreaFormElement } from '../models/overrides/textarea'
+import { TextFormatFormElement } from '../models/overrides/textformat'
+import { TimeFormElement } from '../models/overrides/time'
+import { TwigFormElement } from '../models/overrides/twig'
+import { UnknownFormElement } from '../models/overrides/unknown'
+import { URLFormElement } from '../models/overrides/url'
+
+export class RegisterFactory {
+  static getFormIOElement(webformElement, formSettingsMeta, parent) {
+    const matchingElements = [
+      {
+        isApplicable: (webformElement, type) =>
+          type === 'textfield' &&
+          webformElement['#input_mask']?.includes(`'alias': 'currency`),
+        factory: CurrencyFormElement
+      },
+      {
+        isApplicable: (webformElement, type) =>
+          type === 'email' ||
+          webformElement['#input_mask']?.includes(`'alias': 'email`),
+        factory: EmailFormElement
+      },
+      {
+        isApplicable: 'tel',
+        factory: PhoneNumberFormElement
+      },
+      {
+        isApplicable: 'select',
+        factory: SelectFormElement
+      },
+      {
+        isApplicable: [
+          'webform_select_other',
+          'webform_checkboxes_other',
+          'webform_radios_other'
+        ],
+        factory: OptionsOtherFormElement
+      },
+      {
+        isApplicable: 'radios',
+        factory: RadioFormElement
+      },
+      {
+        isApplicable: ['datelist'],
+        factory: DateListFormElement
+      },
+      {
+        isApplicable: ['date', 'datetime'],
+        factory: DateFormElement
+      },
+      {
+        isApplicable: 'webform_time',
+        factory: TimeFormElement
+      },
+      {
+        isApplicable: 'number',
+        factory: NumberFormElement
+      },
+      {
+        isApplicable: 'range',
+        factory: RangeFormElement
+      },
+      {
+        isApplicable: 'webform_likert',
+        factory: LikertFormElement
+      },
+      {
+        isApplicable: 'tableselect',
+        factory: TableSelectFormElement
+      },
+      {
+        isApplicable: 'webform_multiple',
+        factory: MultipleFormElement
+      },
+      {
+        isApplicable: 'webform_custom_composite',
+        factory: CustomCompositeFormElement
+      },
+      {
+        isApplicable: 'webform_signature',
+        factory: SignatureFormElement
+      },
+      {
+        isApplicable: ['webform_message'],
+        factory: MessageFormElement
+      },
+      {
+        isApplicable: [
+          'webform_markup',
+          'processed_text',
+          'webform_horizontal_rule',
+          'label'
+        ],
+        factory: MarkupFormElement
+      },
+      {
+        isApplicable: ['managed_file'],
+        factory: FileFormElement
+      },
+      {
+        isApplicable: ['textformat'],
+        factory: TextFormatFormElement
+      },
+      {
+        isApplicable: 'url',
+        factory: URLFormElement
+      },
+      {
+        isApplicable: ['checkbox', 'webform_same'],
+        factory: CheckboxFormElement
+      },
+      {
+        isApplicable: ['checkboxes'],
+        factory: CheckboxesFormElement
+      },
+      {
+        isApplicable: 'webform_autocomplete',
+        factory: AutoCompleteFormElement
+      },
+      {
+        isApplicable: 'webform_more',
+        factory: MoreTextFormElement
+      },
+      {
+        isApplicable: ['hidden'],
+        factory: HiddenFormElement
+      },
+      {
+        isApplicable: 'webform_address',
+        factory: AddresseFormElement
+      },
+      {
+        isApplicable: ['textfield'],
+        factory: TextFormElement
+      },
+      {
+        isApplicable: ['value', 'textarea'],
+        factory: TextAreaFormElement
+      },
+      {
+        isApplicable: 'webform_rating',
+        factory: RatingFormElement
+      },
+      // Matt testing
+      {
+        isApplicable: 'webform_testing',
+        factory: TestingFormElement
+      },
+
+      // end Matt testing
+      {
+        isApplicable: 'webform_scale',
+        factory: ScaleFormElement
+      },
+      {
+        isApplicable: 'webform_actions',
+        factory: SubmitFormElement
+      },
+      {
+        isApplicable: (webformElement) =>
+          webformElement['#webform_plugin_id'] === 'webform_wizard_page',
+        factory: PageFormElement
+      },
+      {
+        isApplicable: 'details',
+        factory: DetailFormElement
+      },
+      {
+        isApplicable: 'container',
+        factory: ContainerFormElement
+      },
+      {
+        isApplicable: 'webform_table',
+        factory: TableFormElement
+      },
+      {
+        isApplicable: 'webform_table_row',
+        factory: TableRowFormElement
+      },
+      {
+        isApplicable: 'item',
+        factory: TwigFormElement
+      },
+      {
+        isApplicable: ['fieldset', 'webform_section'],
+        factory: SectionFormElement
+      },
+      {
+        isApplicable: 'webform_flexbox',
+        factory: FlexboxFormElement
+      },
+      {
+        isApplicable: 'webform_email_confirm',
+        factory: EmailConfirmFormElement
+      },
+      {
+        isApplicable: 'webform_codemirror',
+        factory: CodeFormElement
+      }
+    ]
+
+    const matchingElement = matchingElements.find((item) => {
+      const type = webformElement?.['#type']
+      if (Array.isArray(item.isApplicable)) {
+        return item.isApplicable.includes(type)
+      } else if (typeof item.isApplicable === 'string') {
+        return item.isApplicable === type
+      } else if (item.isApplicable) {
+        return item.isApplicable(webformElement, type)
+      }
+      return false
+    })
+
+    const ElementFactory = matchingElement?.factory
+    const moreElement = RegisterFactory.getMoreTextInstance(
+      webformElement,
+      parent
+    )
+    const elementInstance = matchingElement
+      ? new ElementFactory(webformElement, parent, moreElement)
+      : new UnknownFormElement(webformElement, parent, moreElement)
+
+    if (parent) {
+      parent.children.push(elementInstance)
+    }
+
+    elementInstance.setFormSettingsMeta(formSettingsMeta)
+    return elementInstance
+  }
+
+  static getMoreTextInstance(webFormElement, parent) {
+    let moreElement
+    if (webFormElement['#more'] || webFormElement['#more_title']) {
+      moreElement = new MoreTextFormElement(
+        {
+          ...webFormElement,
+          '#type': 'webform_more',
+          '#webform_id': 'webform_more' + webFormElement['#webform_id'],
+          '#webform_key': 'webform_more' + webFormElement['#webform_key']
+        },
+        parent
+      )
+    }
+    return moreElement
+  }
+}