@worksafevictoria/wcl7.5 1.1.0-beta.8 → 1.1.0-beta.81

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

@@ -0,0 +1,57 @@
+import { FlexboxFormElement } from './flexbox'
+
+// A composite is an element made up on many subelements but on submission, they must all map back into one value
+export class CompositeFormElement extends FlexboxFormElement {
+  isVertical() {
+    return true
+  }
+
+  setSubComponentTransformSubmissionValue(subcomponent, otherValue) {
+    const key = this.getKey()
+    const originalTransform = subcomponent.attributes.instance()
+      .transformSubmissionValue
+
+    const transformSubmissionValue = function(value, _axios, submissions) {
+      const subComponentValue = originalTransform(value)
+      if (this.isEmpty(subComponentValue)) {
+        return {}
+      } else {
+        if (Array.isArray(submissions[key])) {
+          submissions[key] = submissions[key].map(function(item) {
+            return item === otherValue ? value : item
+          })
+          return {}
+        }
+      }
+      return {
+        [key]: subComponentValue
+      }
+    }
+
+    subcomponent.attributes.instance().transformSubmissionValue = transformSubmissionValue
+  }
+
+  setSubComponentRules() {}
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    let columns = customProperties[this.getComponentsKey()]
+
+    if (Array.isArray(columns)) {
+      if (columns.length === 1) {
+        columns = columns[0].components[0][this.getComponentsKey()]
+      }
+
+      if (columns.length === 2) {
+        this.setSubComponentRules(
+          columns[0].components[0],
+          columns[1].components[0]
+        )
+      }
+    }
+
+    return {
+      ...customProperties
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class ContainerFormElement extends BaseFormElement {
+  getType() {
+    return 'container'
+  }
+
+  shouldHideLabel() {
+    return true
+  }
+
+  isLayoutComponent() {
+    return true
+  }
+
+  getContainerChildElements() {
+    return this.webformElement
+  }
+
+  shouldIgnoreSubmissionValue() {
+    return true
+  }
+
+  getComponentsKey() {
+    return 'components'
+  }
+
+  setComponents(components) {
+    this.components = components
+  }
+
+  getComponents() {
+    return this.components || []
+  }
+
+  addHtmlControl(content, components, descriptionDisplay, index) {
+    let position = 'unshift'
+    if (descriptionDisplay === 'after') {
+      position = 'push'
+    } else if (descriptionDisplay === 'invisible') {
+      content = null
+    }
+    if (!this.isEmpty(content)) {
+      return components[position]({
+        content,
+        refreshOnChange: false,
+        key: 'heading-' + index + this.getKey(),
+        type: 'htmlelement',
+        input: false,
+        tableView: false,
+        id: 'heading-' + index + this.getId()
+      })
+    }
+  }
+
+  isInput() {
+    return false
+  }
+
+  getCustomProperties() {
+    return {
+      [this.getComponentsKey()]: this.getComponents()
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class CurrencyFormElement extends BaseFormElement {
+  getType() {
+    return 'currency'
+  }
+
+  getCustomProperties() {
+    return {
+      delimiter: true,
+      truncateMultipleSpaces: false,
+      inputFormat: 'plain',
+      mask: false,
+      spellcheck: true
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import { ContainerFormElement } from './container'
+
+export class CustomCompositeFormElement extends ContainerFormElement {
+  getType() {
+    return 'editgrid'
+  }
+
+  shouldHideLabel() {
+    return false
+  }
+
+  shouldIgnoreSubmissionValue() {
+    return false
+  }
+
+  getContainerChildElements() {
+    const elements = JSON.parse(
+      JSON.stringify(this.webformElement['#webform_composite_elements'] ?? {})
+    )
+    Object.keys(elements).forEach((key) => {
+      elements[key]['#webform_key'] = key
+    })
+    return elements
+  }
+
+  getValidation() {
+    const validation = super.getValidation()
+    validation.minLength = this.webformElement['#min_items'] ?? 0
+    validation.maxLength = this.webformElement['#multiple'] ?? 20
+    return validation
+  }
+
+  transformSubmissionValue(value) {
+    if (!Array.isArray(value)) {
+      return undefined
+    }
+    return {
+      [this.getKey()]: value
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class DateFormElement extends BaseFormElement {
+  getType() {
+    return 'datetime'
+  }
+
+  getFormat() {
+    let format = 'dd-MM-yyyy'
+    if (this.showTime()) {
+      format = `${format} hh:mm a`
+    }
+    return format
+  }
+
+  parseStringToDate(dateStr) {
+    if (!dateStr || typeof dateStr !== 'string') {
+      return undefined
+    }
+    let date
+    if (dateStr === 'today') {
+      date = new Date()
+    } else if (
+      (dateStr.match(/\//g) || []).length > 0 ||
+      (dateStr.match(/-/g) || []).length > 0
+    ) {
+      const dateParts = dateStr.includes('/')
+        ? dateStr.split('/')
+        : dateStr.split('-')
+      if (dateParts.length >= 3) {
+        date = new Date(
+          +(dateParts[2].length === 2 ? `20${dateParts[2]}` : dateParts[2]),
+          dateParts[1] - 1,
+          +dateParts[0]
+        )
+      }
+    } else if (
+      dateStr.startsWith('+') ||
+      dateStr.startsWith('-') ||
+      /^\d/.test(dateStr)
+    ) {
+      date = new Date()
+      const changeBy = Number(dateStr.split(' ')[0]) || 0
+      if (dateStr.endsWith('days')) {
+        date.setDate(date.getDate() + changeBy)
+      } else if (dateStr.endsWith('months')) {
+        date.setMonth(date.getMonth() + changeBy)
+      } else if (dateStr.endsWith('years')) {
+        date.setFullYear(date.getFullYear() + changeBy)
+      }
+    } else {
+      date = new Date(dateStr)
+    }
+    return date && isNaN(date.getTime()) ? undefined : date.toISOString()
+  }
+
+  getMaxDate() {
+    return this.parseStringToDate(this.webformElement['#date_date_max'])
+  }
+
+  getMinDate() {
+    return this.parseStringToDate(this.webformElement['#date_date_min'])
+  }
+
+  getDisabledDays() {
+    const dateDaysAvailable = this.webformElement['#date_days']
+    if (Array.isArray(dateDaysAvailable)) {
+      let availableDayRule = ''
+      const disabledDays = ['0', '1', '2', '3', '4', '5', '6'].filter(
+        (day) => !dateDaysAvailable.includes(day)
+      )
+      disabledDays.forEach((day, index) => {
+        if (index > 0) {
+          availableDayRule += ' || '
+        }
+        availableDayRule += 'date.getDay() === ' + day
+      })
+      return availableDayRule
+    }
+    return undefined
+  }
+
+  showTime() {
+    return this.webformElement['#type'] === 'datetime'
+  }
+
+  getDateRange() {
+    return {
+      disableWeekends: false,
+      disableWeekdays: false,
+      minDate: this.getMinDate(),
+      maxDate: this.getMaxDate(),
+      disableFunction: this.getDisabledDays(),
+      enableTime: this.showTime()
+    }
+  }
+
+  getCustomProperties() {
+    const dateRange = this.getDateRange()
+    return {
+      format: this.getFormat(),
+      enableMinDateInput: !!dateRange.minDate,
+      datePicker: dateRange,
+      enableMaxDateInput: !!dateRange.maxDate,
+      enableTime: dateRange.enableTime,
+      widget: {
+        type: 'calendar',
+        displayInTimezone: 'viewer',
+        locale: 'en',
+        useLocaleSettings: false,
+        allowInput: true,
+        mode: 'single',
+        noCalendar: false,
+        format: this.getFormat(),
+        hourIncrement: 1,
+        minuteIncrement: 1,
+        time_24hr: false,
+        ...dateRange
+      }
+    }
+  }
+
+  transformSubmissionValue(value) {
+    return typeof value === 'string' ? value : ''
+  }
+}

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

@@ -0,0 +1,73 @@
+import { DateFormElement } from './date'
+
+export class DateListFormElement extends DateFormElement {
+  getType() {
+    return 'day'
+  }
+
+  getDatePart(datePart) {
+    const props = {}
+    const part = this.webformElement[datePart]
+
+    props.hide = this.isEmpty(part)
+    if (!props.hide) {
+      if (!this.isEmpty(part['#options'])) {
+        const range = Object.keys(part['#options']).filter(
+          (k) => !this.isEmpty(k) && !isNaN(k)
+        )
+        if (range.length > 0) {
+          props.minYear = Number(range[0])
+          props.maxYear = Number(range[range.length - 1])
+        }
+      }
+      if (part['#type'] === 'select') {
+        props.type = 'select'
+      }
+
+      props.required = this.webformElement['#required']
+    }
+    return props
+  }
+
+  getDefaultValue() {
+    return undefined
+  }
+
+  formatDate(date) {
+    if (!this.isEmpty(date) && date.includes('T')) {
+      var d = new Date(date),
+        month = '' + (d.getMonth() + 1),
+        day = '' + d.getDate(),
+        year = d.getFullYear()
+
+      if (month.length < 2) month = '0' + month
+      if (day.length < 2) day = '0' + day
+
+      return [year, day, month].join('-')
+    }
+    return undefined
+  }
+
+  getCustomProperties() {
+    const { maxDate, minDate, disableFunction } = this.getDateRange()
+    return {
+      dayFirst: true,
+      fields: {
+        day: this.getDatePart('day'),
+        month: this.getDatePart('month'),
+        year: this.getDatePart('year')
+      },
+      maxDate: !this.getDatePart('year').hide
+        ? this.formatDate(maxDate)
+        : undefined,
+      minDate: !this.getDatePart('year').hide
+        ? this.formatDate(minDate)
+        : undefined,
+      disableFunction
+    }
+  }
+
+  transformSubmissionValue(value) {
+    return typeof value === 'string' ? value : ''
+  }
+}

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

@@ -0,0 +1,38 @@
+import { ContainerFormElement } from './container'
+
+export class DetailFormElement extends ContainerFormElement {
+  getType() {
+    return 'panel'
+  }
+
+  shouldHideLabel() {
+    return false
+  }
+
+  getDescription() {
+    const label = !this.isEmpty(this.getHtmlText('#description'))
+      ? this.getHtmlText('#description')
+      : ''
+    return label
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    const description = !this.isEmpty(this.getHtmlText('#description'))
+      ? this.getHtmlText('#description')
+      : ''
+
+    this.addHtmlControl(
+      description,
+      customProperties[this.getComponentsKey()],
+      null,
+      'desc'
+    )
+    return {
+      ...customProperties,
+      collapsible: true,
+      collapsed: true,
+      title: this.webformElement['#title']
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/email-confirm.js

@@ -0,0 +1,12 @@
+import { CompositeFormElement } from './composite'
+
+export class EmailConfirmFormElement extends CompositeFormElement {
+  setSubComponentRules(primaryEmail, secondaryEmail) {
+    const primaryEmailValue = `data['${primaryEmail.key}']`
+    secondaryEmail.validate.custom = `valid = (input === ${primaryEmailValue}) ? true : \`email must match\`;`
+
+    secondaryEmail.validate.required = !!primaryEmail.validate.required
+    this.setSubComponentTransformSubmissionValue(primaryEmail)
+    this.setSubComponentTransformSubmissionValue(secondaryEmail)
+  }
+}

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

@@ -0,0 +1,7 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class EmailFormElement extends BaseFormElement {
+  getType() {
+    return 'email'
+  }
+}

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

@@ -0,0 +1,56 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class FileFormElement extends BaseFormElement {
+  getType() {
+    return 'file'
+  }
+
+  // async transformSubmissionValue(value, axios) {
+  //   const data = await value
+  //     .map(async (file) => {
+  //       return await axios({
+  //         method: 'post',
+  //         url: '/drupal_rest/file/upload/node/article/field_hero_image?_format=hal_json',
+  //         data: {
+  //           _links: {
+  //             type: {
+  //               href: this.baseApiUrl + '/rest/type/file/image'
+  //             }
+  //           },
+  //           filename: [
+  //             {
+  //               value: file.originalName
+  //             }
+  //           ],
+  //           data: [
+  //             {
+  //               value: file.url
+  //             }
+  //           ]
+  //         },
+  //         headers: {
+  //           'Content-Type': 'application/octet-stream',
+  //           'Content-Disposition': 'file;filename="test.jpg"'
+  //         }
+  //       })
+  //     })
+  //     .reduce(() => '')
+  //   return data
+  // }
+
+  getCustomProperties() {
+    return {
+      storage: 'base64',
+      webcam: false,
+      fileTypes: [
+        {
+          label: '',
+          value: ''
+        }
+      ],
+      input: true,
+      fileKey: `files[${this.webformElement['#name']}]`,
+      url: `${this.baseApiUrl}/webform/${this.webformElement['#webform']}?element_parents=elements/${this.webformElement['#name']}&textarea1=123&ajax_form=1&_wrapper_format=drupal_ajax`
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ContainerFormElement } from '../overrides/container'
+
+export class FlexboxFormElement extends ContainerFormElement {
+  getType() {
+    return 'columns'
+  }
+
+  getComponentsKey() {
+    return 'columns'
+  }
+
+  isVertical() {
+    return false
+  }
+
+  getColumns(columns) {
+    return columns.map((item) => {
+      return {
+        components: [item],
+        width: this.isVertical() ? 12 : 12 / columns.length
+      }
+    })
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    const columns = customProperties[this.getComponentsKey()]
+    return {
+      ...customProperties,
+      [this.getComponentsKey()]: this.getColumns(columns)
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class HiddenFormElement extends BaseFormElement {
+  getDynamicValues(str) {
+    const replacer = (_braces, value) => {
+      return '${' + value + '}'
+    }
+    return !this.isEmpty(str) ? str.replace(/{{(.+?)}}/gi, replacer) : str
+  }
+
+  getCustomProperties() {
+    const computedValues = this.getDynamicValues(this.webformElement['#value'])
+    let calculateValue
+    if (!this.isEmpty(computedValues)) {
+      calculateValue = `value = \`${computedValues}\`;`
+    }
+    const props = {
+      calculateValue,
+      type: 'hidden'
+    }
+
+    return props
+  }
+}

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

@@ -0,0 +1,40 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class LikertFormElement extends BaseFormElement {
+  getType() {
+    return 'survey'
+  }
+
+  getSurveyOptions(options, hasNotAvailableValue, naLabel, naValue) {
+    return Object.keys(options).map((key, index, array) => {
+      const values = key.split(' -- ')
+      let label = values.slice(-1)[0]
+      let value = key
+      if (hasNotAvailableValue && index === array.length - 1) {
+        label = naLabel || label
+        value = naValue || value
+      }
+      return {
+        label,
+        value
+      }
+    })
+  }
+
+  getCustomProperties() {
+    return {
+      questions: this.getSurveyOptions(
+        this.webformElement['#questions'],
+        false,
+        null,
+        null
+      ),
+      values: this.getSurveyOptions(
+        this.webformElement['#answers'],
+        this.webformElement['#na_answer'],
+        this.webformElement['#na_answer_text'] || 'N/A',
+        this.webformElement['#na_answer_value']
+      )
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import { BaseFormElement } from '../base-form-element'
+import { htmlDecode } from '../form-utils'
+
+export class MarkupFormElement extends BaseFormElement {
+  getContent() {
+    let content = ''
+    if (!this.isEmpty(this.webformElement['#markup'])) {
+      content = htmlDecode(this.webformElement['#markup'])
+    } else if (!this.isEmpty(this.webformElement['#text'])) {
+      if (this.webformElement['#format'] === 'simple_text') {
+        content = this.webformElement['#text'].replace(
+          /(?:\r\n|\r|\n)/g,
+          '<br>'
+        )
+      } else {
+        content = htmlDecode(this.webformElement['#text'])
+      }
+    } else if (this.webformElement['#type'] === 'webform_horizontal_rule') {
+      content = '<hr/>'
+    } else if (this.webformElement['#type'] === 'label') {
+      content = `<label class="col-form-label">${htmlDecode(
+        this.webformElement['#title']
+      )}</label>`
+    }
+
+    if (this.webformElement['#display_on'] === 'view') {
+      content = ''
+    }
+    return content
+  }
+
+  getType() {
+    return 'htmlelement'
+  }
+
+  isInput() {
+    return false
+  }
+
+  getCustomProperties() {
+    return {
+      tag: 'div',
+      content: this.getContent(),
+      refreshOnChange: false
+    }
+  }
+}