@worksafevictoria/wcl7.5 1.18.1 → 1.19.0-beta.6

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

@@ -1,52 +1,52 @@
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { BModal, BFormInput } from 'bootstrap-vue-next'
 import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+import { PlannerToStorage } from './PlannersStorage.js'
 
-// props from parent
+/* -----------------------
+     Props / Emits
+  ------------------------ */
 const props = defineProps({
   modelValue: {
     type: Boolean,
-    default: false, // used by v-model on PlannerNameModal
-  },
-  value: {
-    type: String,
-    default: '', // used by v-model:value on PlannerNameModal
+    default: false,
   },
 })
 
-const emit = defineEmits([
-  'update:modelValue', // for v-model (show/hide)
-  'update:value', // for v-model:value (input text)
-  'onsubmit', // custom event to send value to parent
-])
+const emit = defineEmits(['update:modelValue', 'onsubmit'])
+
+/* -----------------------
+     State
+  ------------------------ */
+const inputValue = ref('')
 
-// proxy for v-model on <b-modal>
+/* -----------------------
+     Modal proxy
+  ------------------------ */
 const show = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
 
-// proxy for v-model on input (goes to parent)
-const inputValue = computed({
-  get: () => props.value,
-  set: (val) => emit('update:value', val),
-})
-
+/* -----------------------
+     Submit
+  ------------------------ */
 function handleSubmit() {
   const trimmed = inputValue.value.trim()
-  console.log('handle Submit', trimmed)
+  console.log('handleSubmit:', trimmed)
 
   if (!trimmed) return
 
-  // emit value to parent
-  emit('onsubmit', trimmed)
+  // ✅ Save to localStorage
+  const planner = PlannerToStorage(trimmed)
 
-  // close modal
-  emit('update:modelValue', false)
+  // notify parent
+  emit('onsubmit', planner)
 
-  // optional: clear input in parent
-  emit('update:value', '')
+  // reset + close
+  inputValue.value = ''
+  emit('update:modelValue', false)
 }
 </script>
 
@@ -59,30 +59,27 @@ function handleSubmit() {
     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-4 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-2">
-          Injured workers first name
-        </label>
-
-        <BFormInput
-          id="modal2CB"
-          name="modal2CB"
-          placeholder=""
-          v-model="inputValue"
-          class="mb-4 input__new-planner"
-          @keyup.enter="handleSubmit"
-        />
-
-        <CtaButton ref="calNextBtn" @click="handleSubmit">Next</CtaButton>
-      </div>
-    </template>
+    <div class="p-3">
+      <h3 class="fw-bold mb-3 modal-title__new-planner">Name your planner</h3>
+
+      <p class="mb-4 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-2">
+        Injured workers first name
+      </label>
+
+      <BFormInput
+        id="modal2CB"
+        v-model="inputValue"
+        class="mb-4 input__new-planner"
+        @keyup.enter="handleSubmit"
+      />
+
+      <CtaButton @click="handleSubmit">Next</CtaButton>
+    </div>
   </b-modal>
 </template>
 

package/src/components/Paragraphs/RTWPlanner/Planners/PlannersStorage.js

@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+
+const STORAGE_KEY = 'planners'
+
+export function getPlanners() {
+  const saved = localStorage.getItem(STORAGE_KEY)
+  return saved ? JSON.parse(saved) : []
+}
+
+export function savePlanners(planners) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(planners))
+}
+
+export function PlannerToStorage(name) {
+  if (!name.trim()) return null
+
+  const planners = getPlanners()
+
+  const planner = {
+    id: Date.now(),
+    name,
+    tasksCompleted: [],
+  }
+
+  planners.push(planner)
+  savePlanners(planners)
+
+  return planner
+}