@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

package/src/components/SubComponents/FormInstance/components/custom/rating-formio.js

@@ -0,0 +1,121 @@
+import { Formio } from '@formio/vue'
+import * as Vue from 'vue'
+import { generateUniqueId } from '../../models/form-utils'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const RatingsVueComponent = {
+  methods: {
+    handleClick(value, values) {
+      if (!this.component.disabled) {
+        values.forEach((option) => {
+          option.checked = false
+          option.id = generateUniqueId()
+          option.checked =
+            value !== this.instance.getValue() ? option.value <= value : false
+        })
+        this.instance.updateValue(value, {
+          modified: true
+        })
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const value = Number(this.instance.getValue())
+    if (!isNaN(value)) {
+      this.component.values.forEach((option) => {
+        option.id = generateUniqueId()
+        option.checked = option.value <= value
+      })
+    }
+  },
+  template: `
+    <fieldset>
+        <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+            <label :for="item.value" :title="item.value" @click="handleClick(item.value, component.values)" :class="{'checked': item.checked}"></label>
+        </div>
+    </fieldset>
+  `
+}
+
+const RadioComponent = Formio.Components.components.radio
+
+export class RatingFormIOComponent extends RadioComponent {
+  getCustomVueComponent() {
+    return RatingsVueComponent
+  }
+
+  attach(element) {
+    const parentStyleClass = this.component.customClass + '__optsContainer'
+    const styles = this.styling('.' + parentStyleClass)
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    const attachToElement = element.querySelector('.form-radio')
+    attachToElement.innerHTML = ""
+
+    let oProps ={
+      component: this.component,
+      styles,
+      instance: this,
+      parentStyleClass
+    }
+    
+    let vNode = Vue.createVNode(VueComponentClass, oProps); 
+    var oEl = Vue.render(vNode, attachToElement);
+
+
+    return super.attach(element)
+  }
+
+  styling(id) {
+    return `
+    ${id} {
+        float:left;
+    }
+    
+    ${id} > label {
+        float:right;
+        padding:0 .1em;
+        overflow:hidden;
+        white-space:nowrap;
+        cursor:pointer;
+        font-size:200%;
+        line-height:1.2;
+        color:#ddd;
+    }
+    
+    ${id} > label:before {
+        content: '★ ';
+    }
+    
+    ${id} > label:hover,
+    ${id} > label.checked{
+        color: gold;
+    }
+    
+    
+    ${id} > label:active {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+         -khtml-user-select: none; /* Konqueror HTML */
+           -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+    }
+
+    ${id}--disabled > label {
+        cursor: not-allowed !important
+    }
+
+      `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}

package/src/components/SubComponents/FormInstance/components/custom/scale-formio.js

@@ -0,0 +1,99 @@
+import { generateUniqueId } from '../../models/form-utils'
+import { RatingFormIOComponent } from './rating-formio'
+
+const ScaleVueComponent = {
+  methods: {
+    handleClick(value, skipUpdate) {
+      const currentValue = Number(this.instance.getValue())
+      if (!this.component.disabled) {
+        this.component.values.forEach((option) => {
+          option.checked = false
+          option.id = generateUniqueId()
+          option.checked =
+            value === option.value && currentValue !== option.value
+        })
+        if (!skipUpdate) {
+          this.instance.updateValue(value, {
+            modified: true
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const value = Number(this.instance.getValue())
+    if (!isNaN(value)) {
+      this.component.values.forEach((option) => {
+        option.id = generateUniqueId()
+        option.checked = value === option.value
+      })
+    }
+  },
+  template: `
+    <fieldset>
+      <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+          <label :for="item.value" :title="item.value" @click="handleClick(item.value)" :class="{'checked': item.checked}">{{ item.value }}</label>
+      </div>
+    </fieldset>
+  `
+}
+
+export class ScaleFormIOComponent extends RatingFormIOComponent {
+  getCustomVueComponent() {
+    return ScaleVueComponent
+  }
+
+  styling(id) {
+    return `
+    ${id} {
+      float:left;
+      margin-right: 5px;
+    }
+
+    ${id}:last-child{
+      margin-right: 0px;
+    }
+
+
+    ${id} > label {
+      display: inline-block;
+      width: 36px;
+      height: 36px;
+      line-height: 32px;
+      text-align: center;
+      color: #666;
+      border: 3px solid #ccc;
+      border-radius: 50%;
+      cursor: pointer
+    }
+
+    ${id} > label:hover,
+    ${id} > label.checked {
+      border-color: #0074bd;
+    }
+
+    ${id}--disabled > label {
+      cursor: not-allowed !important;
+      border-color: #ccc !important;
+    }
+
+    ${id} {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+        -khtml-user-select: none; /* Konqueror HTML */
+          -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+    }
+      `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}

package/src/components/SubComponents/FormInstance/components/custom/tableselect-formio.js

@@ -0,0 +1,200 @@
+// import { Formio } from 'vue-formio'
+import { Formio } from '@formio/vue'
+import * as Vue from 'vue'
+import { generateUniqueId } from '../../models/form-utils'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const TableSelectVueComponent = {
+  methods: {
+    handleClick(value, values) {
+      if (!this.component.disabled) {
+        const opt = values.find((option) => value === option.value)
+        opt.checked = !opt.checked
+
+        if (opt.checked) {
+          this.selections.push(value)
+        } else {
+          const optIndex = values.findIndex((option) => value === option.value)
+          if (optIndex > -1) {
+            this.selections.splice(optIndex, 1)
+          }
+        }
+
+        if (
+          opt.checked &&
+          this.component.numberOfSelections <
+            values.filter((option) => option.checked).length
+        ) {
+          const earliestSelected = this.selections.shift()
+          const earliestSelectedOpt = values.find(
+            (option) => earliestSelected === option.value
+          )
+          if (earliestSelectedOpt) {
+            earliestSelectedOpt.checked = false
+            earliestSelectedOpt.id = generateUniqueId()
+          }
+        }
+
+        const selections = values.filter((i) => i.checked).map((i) => i.value)
+        this.instance.updateValue(
+          { value: selections },
+          {
+            modified: true
+          }
+        )
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const selections = this.instance.getValue()
+    if (
+      typeof selections === 'object' &&
+      Array.isArray(selections.value) &&
+      selections.value.length > 0
+    ) {
+      this.selections = []
+      this.component.values.forEach((opt) => {
+        opt.checked = selections.value.includes(opt.value)
+        opt.id = generateUniqueId()
+        if (opt.checked) {
+          this.selections.push(opt.value)
+        }
+      })
+    } else {
+      this.selections = []
+    }
+  },
+  template: `
+    <fieldset>
+        <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+            <label :for="item.value" :title="item.value" @click="handleClick(item.value, component.values)">
+              <span>{{item.label}}</span>
+              <input type="checkbox" :checked="item.checked" :disabled="component.disabled" /> 
+            </label>
+           
+        </div>
+    </fieldset>
+  `
+}
+
+const RadioComponent = Formio.Components.components.radio
+
+export class TableSelectFormIOComponent extends RadioComponent {
+  getCustomVueComponent() {
+    return TableSelectVueComponent
+  }
+
+  attach(element) {
+    console.log("🚀 ~ TableSelectFormIOComponent ~ attach ~ element:", element)
+    const parentStyleClass = this.component.customClass + '__optsContainer'
+    const styles = this.styling('.' + parentStyleClass)
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    const attachToElement = element.querySelector('.form-radio')
+    attachToElement.innerHTML = ""
+
+    let oProps ={
+      component: this.component,
+      styles,
+      instance: this,
+      parentStyleClass
+    }
+    
+    let vNode = Vue.createVNode(VueComponentClass, oProps); 
+    var oEl = Vue.render(vNode, attachToElement);
+    return super.attach(element)
+  }
+
+  styling(id) {
+    return `
+      ${id} {
+        user-select: none;
+      }
+
+      ${id} label {
+        display: block;
+        font-size: 1rem;
+        line-height: 1.65;
+        border-bottom: solid #e7e7e7 2px;
+        padding: 1rem 0;
+      }
+
+      ${id} span {
+      }
+
+
+      ${id} input {
+        -webkit-appearance: none;
+        -webkit-tap-highlight-color: transparent;
+        position: relative;
+        border: 0;
+        outline: 0;
+        cursor: pointer;
+        float: right;
+        box-shadow: none;
+      }
+
+      ${id} input:after {
+        content: '';
+        width: 60px;
+        height: 28px;
+        display: inline-block;
+        background: rgba(196, 195, 195, 0.55);
+        border-radius: 18px;
+        clear: both;
+      }
+
+
+      ${id} input:before {
+        content: '';
+        width: 32px;
+        height: 32px;
+        display: block;
+        position: absolute;
+        left: 0;
+        top: -3px;
+        border-radius: 50%;
+        background: rgb(255, 255, 255);
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+      }
+
+      ${id} table td:nth-child(2) {
+        width: 40px;
+      }
+
+      
+      ${id} input:checked:before {
+        left: 32px;
+        box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
+      }
+
+      ${id} input:checked:after {
+        background: #16a085;
+      }
+
+      ${id} input,
+      ${id} input:before,
+      ${id} input:after,
+      ${id} input:checked:before,
+      ${id} input:checked:after {
+        transition: ease .3s;
+        -webkit-transition: ease .3s;
+        -moz-transition: ease .3s;
+        -o-transition: ease .3s;
+      }
+
+      ${id}--disabled input {
+        cursor: not-allowed !important
+      }
+    `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}

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

@@ -0,0 +1,208 @@
+<template>
+  <div ref="formhandler" class="formhandler">
+    <div v-if="loading">Loading...</div>
+    <div class="formhandler__messages">
+      <form-alert
+        v-if="alert"
+        :message="alert.message"
+        :fields="alert.fields"
+        :is-error="alert.isError"
+        :process-i-d="processID"
+        :sid="sid"
+      />
+    </div>
+    <form-renderer
+      v-if="form && !submitSuccess"
+      :formiodefinition="form.definition"
+      :options="form.options"
+      :override-c-s-s="form.css"
+      :process-i-d="processID"
+      @changed="changed"
+      @submitted="beforeSubmit"
+      @rendered="() => rendered('rendered')"
+      @nextPage="() => rendered('nextPage')"
+      @prevPage="() => rendered('prevPage')"
+    ></form-renderer>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import FormRenderer from '../renderer/index.vue'
+import FormAlert from '../alert/index.vue'
+import { FormCallbackQueue } from '../../models/form-callback-queue'
+import { FormRenderParser } from '../../services/form-render-parser'
+import { FormSubmitParser } from '../../services/form-submit-parser'
+import { FormApi } from '../../services/form-api'
+import { registerCustomComponents } from '../custom/custom-formio-registry.js'
+
+export default {
+  name: 'FormHandler',
+  components: {
+    FormRenderer,
+    FormAlert
+  },
+  props: {
+    formid: {
+      type: String,
+      required: true
+    },
+    contentApiUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    webFormJson: {
+      type: Object,
+      required: false,
+      default: () => null
+    },
+    preview: {
+      type: Boolean,
+      required: false
+    },
+    processID: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      form: undefined,
+      alert: null,
+      formApi: new FormApi(),
+      formRenderParser: new FormRenderParser(),
+      formSubmitParser: new FormSubmitParser(),
+      submitSuccess: false,
+      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>`
+    }
+  },
+  async mounted() {
+    registerCustomComponents()
+    this.initialiseHelpers()
+    const webFormJson =
+      this.webFormJson || (await this.formApi.fetchFormSchema())
+    this.form = this.formRenderParser.parse(webFormJson, this.getFormOptions())
+    if (!webFormJson || !this.form) {
+      this.setAlert(!webFormJson ? this.notFoundMessage : this.notFoundMessage)
+    }
+    this.scrollToTopOfForm()
+    this.loading = false
+  },
+  methods: {
+    setAlert(message, fields, isError, sid) {
+      this.alert = message
+        ? {
+            message,
+            isError: isError ?? true,
+            fields: fields ?? []
+          }
+        : null
+      if (sid) {
+        this.sid = sid
+      }
+    },
+    initialiseHelpers() {
+      this.formApi.initialise(
+        this.contentApiUrl,
+        this.formid,
+        this.$axios || axios
+      )
+      this.formSubmitParser.initialise(this.formid, this.$axios || axios)
+      this.formRenderParser.initialise(this.contentApiUrl, this.preview)
+    },
+    async submitForm(submission, formioinstance) {
+      this.setAlert(null)
+      this.loading = true
+      const submitPayload = this.formSubmitParser.parse(
+        submission,
+        this.form,
+        formioinstance
+      )
+      const isFormStandAlone = submitPayload && !submitPayload.webform_id
+      if (!isFormStandAlone) {
+        const {
+          submitted,
+          message,
+          fields,
+          sid
+        } = await this.formApi.submitForm(
+          submitPayload,
+          this.preview,
+          this.form.tree
+        )
+        if (!submitPayload) {
+          this.setAlert(this.submitErrorMessage)
+        } else if (!submitted) {
+          this.setAlert(`<h1>Error</h1><p>${message}</p>`, [])
+        } else if (!!submitted) {
+          this.submitSuccess = true
+          this.setAlert(this.successMessage, [], false, sid)
+        }
+      }
+
+      this.loading = false
+      this.scrollToTopOfForm()
+    },
+    rendered(eventName) {
+      Object.values(this.form.tree).forEach((element) =>
+        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"
+        )
+
+      let isSubmitDisabledWhileUpdating
+      let submitButton = getSubmitButton()
+      if (submitButton && !submitButton.disabled) {
+        submitButton.disabled = true
+        isSubmitDisabledWhileUpdating = true
+      }
+
+      FormCallbackQueue.enqueue(async () => {
+        const elementModel = this.form.tree[event.key]
+        if (elementModel) {
+          await elementModel.onchange(
+            event.component,
+            event.instance,
+            this.$axios || axios
+          )
+        }
+        submitButton = getSubmitButton()
+        if (isSubmitDisabledWhileUpdating && submitButton.disabled) {
+          submitButton.disabled = false
+          isSubmitDisabledWhileUpdating = false
+        }
+
+        this.$emit('changed', elementModel, event.instance)
+      })
+    },
+    scrollToTopOfForm() {
+      const el = this.$refs.formhandler
+      if (el && el.scrollIntoView) {
+        el.scrollIntoView({ behavior: 'smooth' })
+      }
+    },
+    beforeSubmit({ submission, formioinstance }) {
+      FormCallbackQueue.enqueue(async () => {
+        await this.submitForm(submission, formioinstance)
+        this.$emit('submitted', submission, formioinstance)
+      })
+    },
+    getFormOptions() {
+      return {
+        noAlerts: true
+      }
+    }
+  }
+}
+</script>