@worksafevictoria/wcl7.5 1.5.0 → 1.7.0

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

@@ -12,11 +12,14 @@
       @nextPage="next($event)"
       @prevPage="prev($event)"
     ></formio>
+    <BModal centered v-model="modal" title="File Error" ok-only>
+      {{ fileMessage }}</BModal
+    >
   </div>
 </template>
 
 <script>
-// import { Form, Formio } from 'vue-formio'
+import { BModal } from 'bootstrap-vue-next'
 import { Form, Formio } from '@formio/vue'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import '@fortawesome/fontawesome-free/css/v4-shims.min.css'
@@ -24,29 +27,31 @@ import 'formiojs/dist/formio.builder.min.css'
 
 export default {
   name: 'FormRenderer',
-  components: { formio: Form },
+  components: { formio: Form, BModal },
   props: {
     formiodefinition: {
       type: Object,
-      required: true
+      required: true,
     },
     options: {
       type: Object,
-      required: true
+      required: true,
     },
     overrideCSS: {
       type: String,
       required: true,
-      default: ''
+      default: '',
     },
-    processID: { type: String, required: true }
+    processID: { type: String, required: true },
   },
   data() {
     return {
       debouncedChanges: this.debounce(this.changed, 250),
       debouncedSubmission: this.debounce(this.submit, 250),
       firstEl: null,
-      started: false
+      started: false,
+      modal: false,
+      fileMessage: '',
     }
   },
   mounted() {
@@ -55,7 +60,7 @@ export default {
     this.$el.appendChild(styleTag)
 
     const tooltips = document.getElementsByClassName(
-      'fa fa-question-circle text-muted'
+      'fa fa-question-circle text-muted',
     )
     if (tooltips.length) {
       ;[...tooltips].forEach((tt) => {
@@ -66,11 +71,11 @@ export default {
               category: 'form help',
               data: e.target.parentElement.innerText,
               label: 'tooltip',
-              processId: this.processID
+              processId: this.processID,
             }
             this.$gtm.push({
               event: 'custom.form.interaction.tooltip.show',
-              ...attrs
+              ...attrs,
             })
           }
         })
@@ -91,17 +96,63 @@ export default {
         let attrs = {
           group: document.title,
           label: ev.component.key,
-          data: ev._data[ev.component.key]
+          data: ev._data[ev.component.key],
         }
         if (this.$gtm) {
           this.$gtm.push({
             event: 'custom.form.progress.field.complete',
-            ...attrs
+            ...attrs,
           })
         }
       }
     },
-    changed(_e, event) {
+    async changed(_e, event) {
+      // File upload validation
+      if (event.changed?.component.type === 'file') {
+        const maxFiles = event.changed.component.fileMaxCount || 1
+        const convertToBytes = (size) => {
+          const units = {
+            KB: 1024,
+            MB: 1024 * 1024,
+            GB: 1024 * 1024 * 1024,
+          }
+          const match = size.match(/^(\d+(?:\.\d+)?)\s*(KB|MB|GB)$/i)
+          if (!match) {
+            throw new Error("Invalid size format. Use 'KB', 'MB', or 'GB'.")
+          }
+          const value = parseFloat(match[1])
+          const unit = match[2].toUpperCase()
+          return value * units[unit]
+        }
+        const maxTotalSize = event.changed.component.fileMaxSize
+        const maxTotalBytes = convertToBytes(maxTotalSize)
+        const files = event.changed.instance.dataValue || []
+        if (files.length > maxFiles) {
+          event.changed.instance.dataValue = files.slice(0, maxFiles)
+          this.fileMessage = `You have exceeded the maximum number of files allowed. Only the first ${maxFiles} files have been uploaded.`
+          this.modal = true
+
+          event.changed.instance.triggerChange()
+          event.changed.instance.triggerRedraw()
+        }
+        let totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0)
+        if (totalSize > maxTotalBytes) {
+          let limit = []
+          while (totalSize > maxTotalBytes) {
+            const file = files.pop()
+            limit.push(file.name)
+            totalSize -= file.size
+          }
+          event.changed.instance.dataValue = files //.slice(0, files.length - 1)
+          this.fileMessage = `You have exceeded the maximum total file size allowed. Only ${files.length} files have been uploaded.`
+          this.modal = true
+          console.log('🚀 ~ changed ~ limit.length:', limit.length)
+          event.changed.instance.triggerChange()
+          event.changed.instance.triggerRedraw()
+          return
+        }
+      }
+
       if (
         this.$gtm &&
         !this.started &&
@@ -115,7 +166,7 @@ export default {
           category: '',
           label: 'Start',
           targetElement: this.firstEl,
-          processId: this.processID
+          processId: this.processID,
         }
         this.$gtm.push({ event: 'custom.form.progress.start', ...attrs })
       }
@@ -133,11 +184,11 @@ export default {
           let attrs = {
             group: document.title,
             label: event.changed.component.key,
-            data: event.changed.value
+            data: event.changed.value,
           }
           this.$gtm.push({
             event: 'custom.form.progress.field.complete',
-            ...attrs
+            ...attrs,
           })
         }
       }
@@ -145,22 +196,22 @@ export default {
       if (event?.changed?.component) {
         this.$emit('changed', {
           ...event.changed,
-          key: event.changed.component.key
+          key: event.changed.component.key,
         })
       }
     },
     submit(submission) {
       this.$emit('submitted', {
         submission,
-        formioinstance: Object.values(Formio.forms)[0]
+        formioinstance: Object.values(Formio.forms)[0],
       })
     },
     debounce(func, wait, immediate) {
       let timeout
-      return function() {
+      return function () {
         const context = this,
           args = arguments
-        const later = function() {
+        const later = function () {
           timeout = null
           if (!immediate) func.apply(context, args)
         }
@@ -180,9 +231,9 @@ export default {
           step: {
             label: this.formiodefinition.components[ev.page - 1].title,
             stepNumber: ev.page + 1,
-            subStepNumber: undefined
+            subStepNumber: undefined,
           },
-          processId: this.processID
+          processId: this.processID,
         }
         this.$gtm.push({ event: 'custom.form.progress.step', ...attrs })
       }
@@ -195,9 +246,9 @@ export default {
           step: {
             label: this.formiodefinition.components[ev.page + 1].title,
             stepNumber: ev.page + 1,
-            subStepNumber: undefined
+            subStepNumber: undefined,
           },
-          processId: this.processID
+          processId: this.processID,
         }
         this.$gtm.push({ event: 'custom.form.progress.step', ...attrs })
       }
@@ -211,10 +262,10 @@ export default {
             {
               errorId: '',
               errorDetail: ev.messages[0].key,
-              errorMessage: ev.messages[0].message
-            }
-          ]
-        }
+              errorMessage: ev.messages[0].message,
+            },
+          ],
+        },
       }
       if (ev.messages[0].context?.validator === 'required') {
         attrs.event = 'custom.form.error.required'
@@ -230,8 +281,8 @@ export default {
       if (this.$gtm) {
         this.$gtm.push({ event: attrs.event, ...attrs.data })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss">

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

@@ -5,52 +5,50 @@ export class FileFormElement extends BaseFormElement {
     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
-  // }
+  async transformSubmissionValue(value, axios) {
+    const promises = await Promise.all(
+      value.map((file) => {
+        const base64Data = file.url.split(',')[1]
+        //const buffer = Buffer.from(base64Data, 'base64')
+        const binaryData = atob(base64Data)
+        const byteArray = new Uint8Array(binaryData.length)
+        for (let i = 0; i < binaryData.length; i++) {
+          byteArray[i] = binaryData.charCodeAt(i)
+        }
+        const blob = new Blob([byteArray], { type: 'text/plain' })
+
+        return axios.post(
+          `https://content-dev-v2.api.worksafe.vic.gov.au/webform_rest/${this.webformElement['#webform']}/upload/${this.webformElement['#webform_key']}`,
+          blob,
+          {
+            headers: {
+              'Content-Type': 'application/octet-stream',
+              'Content-Disposition': `file;filename="${file.name}"`,
+            },
+          },
+        )
+      }),
+    )
+    return promises.map((data) => data.data.fid[0].value)
+  }
 
   getCustomProperties() {
     return {
       storage: 'base64',
+      required: true,
       webcam: false,
-      fileTypes: [
-        {
-          label: '',
-          value: ''
-        }
-      ],
-      input: true,
+      multiple: true,
+      description: `No more than ${this.webformElement['#multiple']} files accepted. Maximum total size is ${this.webformElement['#max_filesize']}MB.`,
+      filePattern: this.webformElement['#file_extensions']
+        ? this.webformElement['#file_extensions']
+            .split(' ')
+            .map((ext) => `.${ext}`)
+            .join(',')
+        : '',
+
       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`
+      fileMaxSize: `${this.webformElement['#max_filesize']}MB`,
+      fileMaxCount: this.webformElement['#multiple'],
     }
   }
 }

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

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

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

@@ -132,7 +132,7 @@ export class RegisterFactory {
         factory: MarkupFormElement
       },
       {
-        isApplicable: ['disabled_managed_file'],
+        isApplicable: ['managed_file'],
         factory: FileFormElement
       },
       {

package/src/components/SubComponents/FormInstance/stories/fileupload.stories.js

@@ -0,0 +1,57 @@
+import FormInstance from '../index.vue'
+import fileupload from './mocks/fileupload.json'
+
+export default {
+    title: 'Form/File Upload',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-advanced-controls',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-advanced-controls',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+  
+    }
+  }
+
+export const FileUpload = {args : {
+    type: 'managed_file',
+    webFormJson: fileupload,
+  
+  }
+}

package/src/components/SubComponents/FormInstance/stories/mocks/fileupload.json

@@ -0,0 +1,25 @@
+{
+    "c1": {
+      "#type": "managed_file",
+      "#title": "file1",
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_id": "kitchen_sink_formio_v1--file1",
+      "#webform_key": "file1",
+      "#description": {
+        "#theme": "webform_html_editor_markup",
+        "#markup": "Sign above"
+      },
+      "#description_display": "after",
+      "#webform_element": true,
+      "#input": true,
+      "#markup": "",
+      "#required": false,
+      "#title_display": "before",
+      "#id": "edit-file1",
+      "#name": "file1",
+      "#value": "",
+      "#label_attributes": {
+        "webform-remove-for-attribute": true
+      }
+    }
+  }

package/src/components/SubComponents/FormInstance/style.scss

@@ -16,11 +16,11 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-weight: 700;
+  font-weight: 700 !important;
 }
 
 a {
-  color: inherit;
+  color: inherit !important;
   text-decoration: underline;
 }
 

package/src/components/SubComponents/FormInstance/tests/address.test.js

@@ -99,8 +99,8 @@ describe(`Form ${testComponent} parser`, () => {
     )
   })
 
-  it(`should return a submission value for manual mode`, () => {
-    const submission = FormTestUtils.handleSubmission(json, {
+  it(`should return a submission value for manual mode`, async () => {
+    const submission = await FormTestUtils.handleSubmission(json, {
       mode: 'manual',
       address: {
         address: 'a1',
@@ -123,8 +123,8 @@ describe(`Form ${testComponent} parser`, () => {
     })
   })
 
-  it(`should return a submission value for api mode`, () => {
-    const submission = FormTestUtils.handleSubmission(json, {
+  it(`should return a submission value for api mode`, async () => {
+    const submission = await FormTestUtils.handleSubmission(json, {
       mode: 'autocomplete',
       address: {
         description: '715 Sydney Rd, Brunswick VIC 3056, Australia',

package/src/components/SubComponents/FormInstance/tests/checkboxes.test.js

@@ -27,17 +27,17 @@ describe(`Form ${testComponent} parser`, () => {
           validate: { required: false },
           values: [
             { label: 'l1', value: 'value1' },
-            { label: 'value2', value: 'value2' }
-          ]
-        }
-      ])
+            { label: 'value2', value: 'value2' },
+          ],
+        },
+      ]),
     )
   })
 
-  it(`should return a submission value`, () => {
-    const submission = FormTestUtils.handleSubmission(json, {
+  it(`should return a submission value`, async () => {
+    const submission = await FormTestUtils.handleSubmission(json, {
       value1: false,
-      value2: true
+      value2: true,
     })
     expect(submission).toEqual({ checkboxes1: ['value2'] })
   })

package/src/components/SubComponents/FormInstance/tests/customcomposite.test.js

@@ -24,7 +24,7 @@ describe(`Form ${testComponent} parser`, () => {
               labelPosition: 'top',
               mask: false,
               type: 'textfield',
-              validate: {}
+              validate: {},
             },
             {
               attributes: { counter: 4 },
@@ -39,8 +39,8 @@ describe(`Form ${testComponent} parser`, () => {
               labelPosition: 'top',
               mask: false,
               type: 'checkbox',
-              validate: {}
-            }
+              validate: {},
+            },
           ],
           customClass: 'custom-formio-1',
           defaultValue: {},
@@ -53,34 +53,34 @@ describe(`Form ${testComponent} parser`, () => {
           labelPosition: 'top',
           mask: false,
           type: 'editgrid',
-          validate: { maxLength: 20, minLength: 0 }
-        }
-      ])
+          validate: { maxLength: 20, minLength: 0 },
+        },
+      ]),
     )
   })
 
-  it(`should return a submission value`, () => {
+  it(`should return a submission value`, async () => {
     const formioform = FormTestUtils.getParsedFormFromJSON(json)
-    const submission = FormTestUtils.getSubmissionValue(
+    const submission = await FormTestUtils.getSubmissionValue(
       {
         person: [
           {
             firstname: 'john',
-            coming: false
+            coming: false,
           },
           {
             firstname: 'james',
-            coming: true
-          }
-        ]
+            coming: true,
+          },
+        ],
       },
-      formioform
+      formioform,
     )
     expect(submission).toEqual({
       person: [
         { coming: false, firstname: 'john' },
-        { coming: true, firstname: 'james' }
-      ]
+        { coming: true, firstname: 'james' },
+      ],
     })
   })
 })

package/src/components/SubComponents/FormInstance/tests/date.test.js

@@ -15,7 +15,7 @@ describe(`Form ${testComponent} parser`, () => {
             disableFunction: 'date.getDay() === 5',
             disableWeekdays: false,
             disableWeekends: false,
-            enableTime: false
+            enableTime: false,
           },
           disabled: false,
           enableMaxDateInput: false,
@@ -46,17 +46,17 @@ describe(`Form ${testComponent} parser`, () => {
             noCalendar: false,
             time_24hr: false,
             type: 'calendar',
-            useLocaleSettings: false
-          }
-        }
-      ])
+            useLocaleSettings: false,
+          },
+        },
+      ]),
     )
   })
 
-  it(`should return a submission value`, () => {
-    const submission = FormTestUtils.handleSubmission(
+  it(`should return a submission value`, async () => {
+    const submission = await FormTestUtils.handleSubmission(
       json,
-      '2021-08-19T00:00:00+10:00'
+      '2021-08-19T00:00:00+10:00',
     )
     expect(submission).toEqual({ date1: '2021-08-19T00:00:00+10:00' })
   })