@worksafevictoria/wcl7.5 1.17.0-beta.10 → 1.17.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.17.0-beta.10",
+  "version": "1.17.0-beta.12",
   "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Containers/SectionGroup/index.vue

@@ -181,7 +181,6 @@ export default {
       }
       if (this.backgroundVariant) {
         let bgColour
-        console.log('this.backgroundVariant:-', this.backgroundVariant)
         switch (this.backgroundVariant) {
           case 'grey':
           case 'light':

package/src/components/Paragraphs/RTWPlanner/Injuries/index.vue

@@ -8,6 +8,7 @@ import CardGroup from './../../../SubComponents/CardGroup/index.vue'
 import Breadcrumb from './../../../SubComponents/Breadcrumb/index.vue'
 import RichText from './../../RichText/index.vue'
 import SelectableCards from './../../SelectableCards/index.vue'
+import PlannerNameModal from './../Planners/PlannerNameModal.vue'
 
 const props = defineProps({
   injuryPage: {
@@ -46,6 +47,7 @@ const props = defineProps({
 
 const screen = ref(1)
 const selectedCard = ref(null)
+const showModal = ref(false)
 
 // local copy of breadcrumb items allowed to mutate
 const breadcrumbItemsLocal = ref([...props.breadcrumbItems])
@@ -87,7 +89,9 @@ function onCrumbClick({ index }) {
   // you can add logic for index === 1 here, or just leave it as no-op.
 }
 
-function nextScreenAgent() {}
+function nextScreenAgent(card) {
+  showModal.value = true
+}
 </script>
 
 <template>
@@ -172,6 +176,8 @@ function nextScreenAgent() {}
         @nextScreen="nextScreenAgent"
       />
     </div>
+
+    <PlannerNameModal class="injuries-app__new-planner" v-model="showModal" />
   </div>
 </template>
 

package/src/components/Paragraphs/RTWPlanner/Planners/PlannerNameModal.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { BModal, BFormInput } from 'bootstrap-vue-next'
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+
+const inputValue = ref('')
+
+function handleSubmit() {
+  console.log('handle Submit', inputValue.value)
+  if (!inputValue.value.trim()) return
+}
+</script>
+
+<template>
+  <b-modal
+    aria-labelledby="injuries-app__modal"
+    no-close-on-backdrop
+    centered
+    no-footer
+    size="lg"
+  >
+    <template #default="{ close }">
+      <div class="p-3">
+        <h3 class="fw-bold mb-3 modal-title__new-planner">Name your planner</h3>
+        <p class="mb-2 modal-description__new-planner">
+          Give your planner a name so you can easily find it and pick up where
+          you left off.
+        </p>
+
+        <label for="modal2CB" class="fw-bold mb-4">
+          Injured workers first name
+        </label>
+
+        <BFormInput
+          id="modal2CB"
+          name="modal2CB"
+          placeholder=""
+          v-model="inputValue"
+          class="mb-4 input__new-planner"
+        />
+
+        <CtaButton ref="calNextBtn" @click="handleSubmit">Next</CtaButton>
+      </div>
+    </template>
+  </b-modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.modal-description__new-planner) {
+  width: 65%;
+}
+
+:deep(.input__new-planner) {
+  width: 60%;
+}
+</style>

package/src/components/SubComponents/FormInstance/models/base-form-element.js

@@ -54,7 +54,7 @@ export class BaseFormElement {
   getLabelPosition() {
     return this.getPosition(
       this.webformElement['#_title_display'] ??
-        this.webformElement['#title_display']
+        this.webformElement['#title_display'],
     )
   }
 
@@ -160,7 +160,7 @@ export class BaseFormElement {
       label: getStyle(this.webformElement['#label_attributes']),
       wrapper: getStyle(this.webformElement['#wrapper_attributes']),
       element: getStyle(this.webformElement['#attributes']),
-      additional: this.getAdditionalStyles(this.getCustomClass())
+      additional: this.getAdditionalStyles(this.getCustomClass()),
     }
     const hasOverride = Object.values(style).some((attr) => !this.isEmpty(attr))
     return hasOverride ? style : undefined
@@ -251,7 +251,8 @@ export class BaseFormElement {
     if (this.isEmpty(this.webformElement['#states'])) {
       return undefined
     } else {
-      return parseElementStates(this.webformElement)
+      // NEW: Pass the current instance (`this`) to the parser.
+      return parseElementStates(this.webformElement, this)
     }
   }
 

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

@@ -3,6 +3,39 @@ import { converFormIOElementToJSON } from './convert-form-element'
 import { updateConditionWithFormReferences } from './logic-linker'
 import { RegisterFactory } from './registry-factory'
 
+function extractWebformKeys(webformObject) {
+  const result = []
+
+  const isElement = (obj) => obj && typeof obj === 'object' && obj['#type']
+
+  const extract = (obj) => {
+    if (!obj || typeof obj !== 'object') return null
+
+    const type = obj['#type']
+
+    const key = obj['#webform_key'] || null
+    const node = key ? { key, children: [], type } : null
+
+    for (const [childKey, val] of Object.entries(obj)) {
+      if (childKey.startsWith('#')) continue
+      if (isElement(val)) {
+        const childNode = extract(val)
+        if (childNode && node) node.children.push(childNode)
+        else if (childNode) return childNode
+      }
+    }
+
+    return node
+  }
+
+  for (const [topKey, val] of Object.entries(webformObject)) {
+    if (typeof val === 'object' && val['#type']) {
+      const topNode = extract(val)
+      if (topNode) result.push(topNode)
+    }
+  }
+  return result
+}
 export class FormRenderParser {
   initialise(contentApiUrl, isPreview) {
     this.formSettingsMeta = { contentApiUrl }
@@ -17,14 +50,16 @@ export class FormRenderParser {
     const formlogicList = []
     try {
       webform = this.preProcessWebForm(webform)
+      const pathTree = extractWebformKeys(webform)
       const formiodefinition = {
         id: webform['#id'],
         components: this.parseFormContainerComponents(
           webform,
           webFormElementTree,
           null,
-          formlogicList
-        )
+          formlogicList,
+          pathTree,
+        ),
       }
 
       options.breadcrumbSettings = { clickable: false }
@@ -35,14 +70,12 @@ export class FormRenderParser {
 
       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
+        css,
       }
     } catch (e) {
       console.error(e)
@@ -54,7 +87,8 @@ export class FormRenderParser {
     container,
     webFormElementTree,
     parent,
-    formlogicList
+    formlogicList,
+    tree,
   ) => {
     return Object.keys(container)
       .filter((i) => !i.startsWith('#'))
@@ -63,11 +97,12 @@ export class FormRenderParser {
         return RegisterFactory.getFormIOElement(
           webFormElement,
           this.formSettingsMeta,
-          parent
+          parent,
+          tree,
         )
       })
       .filter(
-        (formIOElement) => !!formIOElement && formIOElement.isRenderable()
+        (formIOElement) => !!formIOElement && formIOElement.isRenderable(),
       )
       .map((formIOElement) => {
         // nested form logic
@@ -78,11 +113,11 @@ export class FormRenderParser {
               subContainer,
               webFormElementTree,
               formIOElement,
-              formlogicList
-            )
+              formlogicList,
+              tree,
+            ),
           )
         }
-
         return formIOElement
       })
       .map((formIOElement) => {
@@ -90,7 +125,7 @@ export class FormRenderParser {
         webFormElementTree[formIOElement.getKey()] = formIOElement
         const formioElementJSON = converFormIOElementToJSON(
           formIOElement,
-          formlogicList
+          formlogicList,
         ).json
         formIOElement.setFormIOdefinitionForElement(formioElementJSON)
         return formioElementJSON
@@ -103,7 +138,7 @@ export class FormRenderParser {
       webform.actions = {
         '#type': 'webform_actions',
         '#webform_id': 'form--actions',
-        '#webform_key': 'actions'
+        '#webform_key': 'actions',
       }
     }
     return webform
@@ -115,8 +150,8 @@ export class FormRenderParser {
         updateConditionWithFormReferences(
           logic,
           sourceElement,
-          webFormElementTree
-        )
+          webFormElementTree,
+        ),
       )
     })
   }
@@ -146,7 +181,7 @@ export class FormRenderParser {
 
   getDisplay(webFormElementTree) {
     const pageKeys = Object.keys(webFormElementTree).filter((elementKey) =>
-      webFormElementTree[elementKey].isPageComponent()
+      webFormElementTree[elementKey].isPageComponent(),
     )
     if (pageKeys.length > 0) {
       return 'wizard'

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

@@ -4,7 +4,7 @@ import {
   isEmpty,
 } from '../models/form-utils'
 
-export function parseElementStates(webformElement) {
+export function parseElementStates(webformElement, elementInstance) {
   const states = webformElement['#states'] || {}
   let logicList = []
   Object.keys(states)
@@ -21,9 +21,13 @@ export function parseElementStates(webformElement) {
       const state = states[sourceKey]
       let conditonal = `result = (`
       if (Array.isArray(state)) {
-        state.forEach((rule) => (conditonal += ruleToString(rule, conditonal)))
+        // Pass instance to ruleToString
+        state.forEach((rule) => {
+          return (conditonal += ruleToString(rule, elementInstance, conditonal))
+        })
       } else {
-        conditonal += ruleToString(state, conditonal)
+        // Pass instance to ruleToString
+        conditonal += ruleToString(state, elementInstance, conditonal)
       }
       conditonal += ')'
       logic.trigger.javascript = conditonal
@@ -54,10 +58,14 @@ function getLogicBasedOnCondition(elementCondition) {
   return null
 }
 
-function ruleToString(rule) {
+function ruleToString(rule, elementInstance) {
   if (typeof rule === 'object') {
     const conditions = Object.keys(rule).reduce((items, ruleKey) => {
-      const condition = ruleItemToString(rule[ruleKey], ruleKey)
+      const condition = ruleItemToString(
+        rule[ruleKey],
+        ruleKey,
+        elementInstance,
+      )
       if (!isEmpty(condition)) {
         items.push(condition)
       }
@@ -74,7 +82,7 @@ function ruleToString(rule) {
   return ''
 }
 
-function ruleItemToString(ruleItem, itemKey) {
+function ruleItemToString(ruleItem, itemKey, elementInstance) {
   // Regex 1: Matches standard selectors (name="foo"). Captures 'foo'.
   const standardMatch = itemKey.match(/name="([^"]+)"/)
   // Regex 2: Matches array selectors (name="foo[bar]"). Captures 'foo' and 'bar'.
@@ -98,7 +106,13 @@ function ruleItemToString(ruleItem, itemKey) {
   const conditions = Object.keys(ruleItem)
     .map((elementProp) =>
       formComponentID
-        ? getTrigger(formComponentID, ruleItem, elementProp, checkboxOptionKey)
+        ? getTrigger(
+            formComponentID,
+            ruleItem,
+            elementProp,
+            checkboxOptionKey,
+            elementInstance,
+          )
         : null,
     )
     .filter((trigger) => !!trigger)
@@ -143,12 +157,29 @@ function createNewLogic(actionName, actionValue) {
   }
 }
 
-function getTrigger(formComponentID, ruleItem, prop, checkboxOptionKey = null) {
+function getTrigger(
+  formComponentID,
+  ruleItem,
+  prop,
+  checkboxOptionKey = null,
+  elementInstance,
+) {
   if (ruleItem.hasOwnProperty(prop)) {
     const value = ruleItem[prop] ?? ''
 
     let variable = `data.{${formComponentID}}`
-    console.log('🚀 ~ getTrigger ~ variable:', variable)
+
+    try {
+      if (elementInstance && Array.isArray(elementInstance.tree)) {
+        const path = findPathInTree(elementInstance.tree, formComponentID)
+        if (path && path.length > 0) {
+          variable = buildDataAccessor(path, 'data')
+        }
+      }
+    } catch (e) {
+      let variable = `data.{${formComponentID}}`
+    }
+
     let valueDelimeter = typeof value === 'string' ? "'" : ''
     let expression = `${valueDelimeter}${value}${valueDelimeter}`
 
@@ -203,3 +234,44 @@ function getTrigger(formComponentID, ruleItem, prop, checkboxOptionKey = null) {
   }
   return null
 }
+
+function findPathInTree(tree, targetKey) {
+  if (!Array.isArray(tree) || !targetKey) return null
+
+  function dfs(nodes, path) {
+    for (const node of nodes) {
+      if (!node) continue
+      const nodeKey = node.key
+      const newPath =
+        nodeKey && node.type !== 'webform_wizard_page'
+          ? path.concat(nodeKey)
+          : path
+      if (nodeKey === targetKey) return newPath
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        const found = dfs(node.children, newPath)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  return dfs(tree, [])
+}
+
+function isIdentifier(key) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(String(key))
+}
+
+function buildDataAccessor(pathArray, rootName = 'data') {
+  if (!Array.isArray(pathArray) || pathArray.length === 0) return rootName
+  const parts = []
+  for (const key of pathArray) {
+    if (isIdentifier(key)) {
+      parts.push('.' + key)
+    } else {
+      const escaped = String(key).replace(/'/g, "\\'")
+      parts.push(`['${escaped}']`)
+    }
+  }
+  return rootName + parts.join('')
+}