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

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

@@ -9,6 +9,7 @@ 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'
+import HowTo from './HowTo.vue'
 
 const props = defineProps({
   injuryPage: {
@@ -43,15 +44,13 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  showModalOnButtonRole: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const screen = ref(1)
 const selectedCard = ref(null)
 const showModal = ref(false)
+const step = ref(1)
+const plannerId = ref(null)
 
 // local copy of breadcrumb items allowed to mutate
 const breadcrumbItemsLocal = ref([...props.breadcrumbItems])
@@ -96,6 +95,16 @@ function onCrumbClick({ index }) {
 function nextScreenAgent(card) {
   showModal.value = true
 }
+
+/* -----------------------
+     Modal submit
+  ------------------------ */
+function onSubmit(planner) {
+  if (!planner) return
+
+  plannerId.value = planner.id
+  step.value = 2
+}
 </script>
 
 <template>
@@ -123,7 +132,7 @@ function nextScreenAgent(card) {
         :titles="titles.physical"
         :cards="cards"
         :button-role="'modal-quest'"
-        :showModalOnButtonRole="showModalOnButtonRole"
+        :showModalOnButtonRole="true"
         @nextScreen="nextScreen"
       />
     </div>
@@ -172,22 +181,66 @@ function nextScreenAgent(card) {
     </div>
 
     <div v-if="injuryPage === 'selectAgent'">
-      <card-container
-        ref="selectAgentContainer"
-        :columns="4"
-        :title="titles.cardContactInformaton?.heading"
-        :cards="contactCards"
-        :button-role="'link'"
-        @nextScreen="nextScreenAgent"
-      />
+      <div v-if="step === 1">
+        <card-container
+          ref="selectAgentContainer"
+          :columns="4"
+          :title="titles.cardContactInformaton?.heading"
+          :cards="contactCards"
+          :button-role="'link'"
+          @nextScreen="nextScreenAgent"
+        />
+      </div>
+      <div v-if="step === 2">
+        <HowTo
+          mainTitle="How to use the Return to Work planner"
+          subTitle="Let's get started"
+          mainText="Read the information on a page, complete the actions and scroll to the bottom to tick off the task."
+          buttonText="Next"
+          skipLinkText=""
+          @next="step = 3"
+        />
+      </div>
+      <div v-if="step === 3">
+        <HowTo
+          mainTitle="How to use the Return to Work planner"
+          subTitle="Contact your employee"
+          mainText="Start at Task 1. Read the information and contact your employee. If you have already done this you then go onto the next screen."
+          buttonText="Step 1. Contact your employee"
+          skipLinkText="I've already contacted my employee"
+          :mock="2"
+          @next="emit('startPlanner', plannerId)"
+          @skip="emit('skipContact', plannerId)"
+        />
+      </div>
     </div>
 
-    <PlannerNameModal class="injuries-app__new-planner" v-model="showModal" />
+    <PlannerNameModal
+      class="injuries-app__new-planner"
+      v-model="showModal"
+      @onsubmit="onSubmit"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+$fuchsia: #ea338f;
+
 .injuries-app {
+  :deep(.control_selectcard .card-grid-item__card) {
+    border: 4px solid #d8d5d1;
+  }
+  :deep(.control_selectcard .card-grid-item__card:hover) {
+    background-color: white;
+    border: 4px solid #5664ac;
+    opacity: unset;
+    border-radius: 10px;
+  }
+  :deep(.control_selectcard .card-grid-item__card:focus) {
+    background-color: #e9ebf4;
+    border: 4px solid #5664ac;
+    outline: solid 3px $fuchsia !important;
+  }
   .wcl-hero-header {
     border: none;
   }

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

@@ -1,108 +1,80 @@
-<template>
-  <Container>
-    <Row>
-      <Column col="12">
-        <h2 class="fw-bold my-4">{{ props.activePlanner?.name }}'s planner</h2>
-      </Column>
-    </Row>
-    <Row>
-      <Column col="12" md="8">
-        <div class="card shadow-sm border-3 rounded-3 p-4">
-          <BCardText v-html="activeContent.html"></BCardText>
-          <CtaButton
-            :rtl="
-              isTaskCompleted(activeTask.id, activeContent.id) ? true : false
-            "
-            :workwell="
-              isTaskCompleted(activeTask.id, activeContent.id) ? true : false
-            "
-            @click="toggleTask(activeTask.id, activeContent.id)"
-            class="mt-1"
-          >
-            {{
-              isTaskCompleted(activeTask.id, activeContent.id)
-                ? 'Completed'
-                : 'Mark Done'
-            }}
-          </CtaButton>
-        </div>
-        <div
-          role="button"
-          class="card shadow-sm border-3 rounded-3 p-4 mt-4 text-end"
-          :class="getNextTask() ? '' : 'disabled'"
-          @click="setActiveContent(getNextTask().task, getNextTask().content)"
-        >
-          <h4 class="fw-bold mt-0 mb-3">Go to next task</h4>
-          <p class="text-muted mb-0">
-            <span class="text-decoration-underline">
-              {{
-                getNextTask() ? getNextTask().content.btnText : 'No more tasks'
-              }}
-            </span>
-          </p>
-        </div>
-      </Column>
-      <Column col="12" md="4">
-        <div class="card shadow-sm border-3 rounded-3 p-4">
-          <h4 class="fw-bold mb-3">All tasks</h4>
-          <div v-for="task in props.tasks" :key="task.id" class="mb-3">
-            <p class="fw-bold">{{ task.title }}</p>
-            <div v-for="content in task.content" :key="content.id">
-              <button
-                class="d-flex justify-content-between align-items-center w-100 border-0 rounded-2 p-2 mb-2 text-start"
-                :class="
-                  isTaskCompleted(task.id, content.id)
-                    ? activeContent.id === content.id
-                      ? 'bg-success-subtle text-dark fw-bold active-done'
-                      : 'bg-success-subtle text-dark fw-bold'
-                    : activeContent.id === content.id
-                      ? 'active'
-                      : 'bg-light text-muted'
-                "
-                @click="setActiveContent(task, content)"
-              >
-                <span class="text-decoration-underline">
-                  {{ content.btnText }}
-                </span>
-                <span
-                  v-if="isTaskCompleted(task.id, content.id)"
-                  class="text-success"
-                >
-                  <TickCircleIcon
-                    class="ms-2"
-                    style="width: 2em; height: 2em"
-                  />
-                </span>
-                <span v-else class="text-muted">
-                  <TickCircleIcon
-                    class="ms-2"
-                    style="width: 2em; height: 2em"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </Column>
-    </Row>
-  </Container>
-</template>
-
 <script setup>
-import { ref } from 'vue'
-// import { CtaButton, Row, Column, Container }
+import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { BCard, BCardText, BButton } from 'bootstrap-vue-next'
+import Column from './../../../Containers/Column/index.vue'
+import Container from './../../../Containers/Container/index.vue'
+import Row from './../../../Containers/Row/index.vue'
 import TickCircleIcon from './../icons/TickCircleIcon.vue'
+import ChevRightIcon from './../icons/ChevRightIcon.vue'
 
 const props = defineProps({
   activePlanner: { type: Object, required: true },
   tasks: { type: Array, required: true },
 })
 
-const emit = defineEmits(['updatePlanner'])
-const tasks = ref([])
-const activeTask = ref(props.tasks[0] || { id: '', title: '', content: [] })
-const activeContent = ref(
-  props.tasks[0]?.content[0] || { btnText: '', html: '' },
+const emit = defineEmits(['updatePlanner', 'taskResource', 'allCompleted'])
+
+const showTasksModal = ref(false)
+const isMobile = ref(false)
+
+let mq = null
+function handleMq(e) {
+  isMobile.value = e.matches
+  if (!isMobile.value) showTasksModal.value = false
+}
+
+onMounted(() => {
+  mq = window.matchMedia('(max-width: 767.98px)')
+  isMobile.value = mq.matches
+  if (mq.addEventListener) {
+    mq.addEventListener('change', handleMq)
+  } else {
+    mq.addListener(handleMq)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (!mq) return
+  if (mq.removeEventListener) {
+    mq.removeEventListener('change', handleMq)
+  } else {
+    mq.removeListener(handleMq)
+  }
+})
+
+function findFirstUncompleted() {
+  const completed = props.activePlanner?.tasksCompleted || []
+  for (const task of props.tasks || []) {
+    for (const content of task.content || []) {
+      const key = `${task.id}_${content.id}`
+      if (!completed.includes(key)) {
+        return { task, content }
+      }
+    }
+  }
+  const firstTask = props.tasks?.[0] || { id: '', title: '', content: [] }
+  const firstContent = firstTask.content?.[0] || {
+    id: '',
+    btnText: '',
+    html: '',
+  }
+  return { task: firstTask, content: firstContent }
+}
+
+const initial = findFirstUncompleted()
+const activeTask = ref(initial.task)
+const activeContent = ref(initial.content)
+
+watch(
+  activeContent,
+  (content) => {
+    if (content?.resources) {
+      emit('taskResource', content.resources)
+    } else {
+      emit('taskResource', null)
+    }
+  },
+  { immediate: true },
 )
 
 const toggleTask = (taskId, contentId) => {
@@ -112,11 +84,8 @@ const toggleTask = (taskId, contentId) => {
     tasksCompleted: [...props.activePlanner.tasksCompleted],
   }
   const index = updatedPlanner.tasksCompleted.indexOf(key)
-  if (index === -1) {
-    updatedPlanner.tasksCompleted.push(key)
-  } else {
-    updatedPlanner.tasksCompleted.splice(index, 1)
-  }
+  if (index === -1) updatedPlanner.tasksCompleted.push(key)
+  else updatedPlanner.tasksCompleted.splice(index, 1)
   emit('updatePlanner', updatedPlanner)
 }
 
@@ -126,12 +95,20 @@ const isTaskCompleted = (taskId, contentId) => {
 }
 
 const setActiveContent = (task, content) => {
-  console.log('🚀 ~ setActiveContent ~ task:', task)
   activeTask.value = task
   activeContent.value = content
-  scrollTo(0, 0)
+  window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
+const setActiveContentFromModal = (task, content) => {
+  setActiveContent(task, content)
+  if (isMobile.value) showTasksModal.value = false
+}
+
+const totalTaskCount = computed(() => {
+  return props.tasks.reduce((sum, task) => sum + (task.content?.length || 0), 0)
+})
+
 const getNextTask = () => {
   for (const task of props.tasks) {
     for (const content of task.content) {
@@ -149,12 +126,244 @@ const getNextTask = () => {
       }
     }
   }
+  return null
+}
+
+const handleNextTask = () => {
+  const next = getNextTask()
+
+  // ✅ No more tasks → emit completion
+  if (!next) {
+    emit('allCompleted')
+    return
+  }
+
+  // otherwise go to next task
+  setActiveContent(next.task, next.content)
 }
 </script>
 
+<template>
+  <Container>
+    <Row>
+      <Column cols="12">
+        <h2 class="fw-bold my-4">{{ props.activePlanner?.name }}'s planner</h2>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column cols="12" md="7">
+        <BCard class="shadow-sm border-3 rounded-3 p-1">
+          <Row class="mb-3 d-md-none">
+            <Column cols="7">
+              <h6 class="fw-bold mt-0 mb-0">
+                <span
+                  v-if="isTaskCompleted(activeTask.id, activeContent.id)"
+                  class="text-success"
+                >
+                  <TickCircleIcon style="width: 1em; height: 1em" />
+                </span>
+                <span v-else class="text-muted">
+                  <TickCircleIcon
+                    class="opacity-25"
+                    style="width: 1em; height: 1em"
+                  />
+                </span>
+                {{ activeTask.title }}
+              </h6>
+            </Column>
+            <Column cols="5" class="text-end">
+              <BButton
+                class="rounded-2"
+                @click="showTasksModal = true"
+                variant="outline-secondary"
+              >
+                View All tasks
+                <ChevRightIcon class="ms-2" style="width: 1em; height: 1em" />
+              </BButton>
+            </Column>
+          </Row>
+
+          <h4 class="fw-bold mt-0 mb-3 d-none d-md-block">
+            <span
+              v-if="isTaskCompleted(activeTask.id, activeContent.id)"
+              class="text-success"
+            >
+              <TickCircleIcon style="width: 1em; height: 1em" />
+            </span>
+            <span v-else class="text-muted">
+              <TickCircleIcon
+                class="opacity-25"
+                style="width: 1em; height: 1em"
+              />
+            </span>
+            {{ activeTask.title }}
+          </h4>
+
+          <BCardText v-html="activeContent.html"> </BCardText>
+          <BButton
+            class="task-btn w-100 d-flex justify-content-between align-items-center"
+            :class="{
+              completed: isTaskCompleted(activeTask.id, activeContent.id),
+            }"
+            @click="toggleTask(activeTask.id, activeContent.id)"
+          >
+            <span>
+              {{
+                isTaskCompleted(activeTask.id, activeContent.id)
+                  ? "You've completed this task"
+                  : 'Mark this task as completed'
+              }}
+            </span>
+
+            <span
+              v-if="isTaskCompleted(activeTask.id, activeContent.id)"
+              class="completed"
+            >
+              <TickCircleIcon class="ms-2" style="width: 2em; height: 2em" />
+            </span>
+            <span v-else class="text-muted">
+              <TickCircleIcon
+                class="ms-2 opacity-25"
+                style="width: 2em; height: 2em"
+              />
+            </span>
+          </BButton>
+        </BCard>
+
+        <BButton
+          v-show="getNextTask()"
+          class="next-task card w-100 d-flex shadow-sm border-3 rounded-3 p-4 mt-4 text-end"
+          :class="{
+            completed: isTaskCompleted(activeTask.id, activeContent.id),
+          }"
+          @click="handleNextTask"
+        >
+          <h4 class="fw-bold mt-0 mb-3">
+            Go to next task
+            <ChevRightIcon style="width: 1em; height: 1em" />
+          </h4>
+          <p class="mb-0">
+            <span class="text-decoration-underline">
+              <strong>
+                {{
+                  getNextTask()
+                    ? getNextTask().content.btnText
+                    : 'No more tasks'
+                }}
+              </strong>
+            </span>
+          </p>
+        </BButton>
+      </Column>
+
+      <Column cols="12" md="5" class="d-none d-md-block">
+        <BCard class="shadow-sm border-3 rounded-3 p-1">
+          <h4 class="fw-bold mb-3">All tasks</h4>
+
+          <div v-for="task in props.tasks" :key="task.id" class="mb-3">
+            <h5 class="fw-bold">{{ task.title }}</h5>
+            <div v-for="content in task.content" :key="content.id">
+              <BButton
+                class="task-list-btn d-flex justify-content-between align-items-center w-100 border-0 rounded-2 p-2 mb-2 text-start text-dark fw-bold"
+                :class="
+                  isTaskCompleted(task.id, content.id)
+                    ? activeContent.id === content.id
+                      ? 'bg-success-subtle active-done'
+                      : 'bg-success-subtle fw-bold'
+                    : activeContent.id === content.id
+                      ? 'active'
+                      : 'bg-light'
+                "
+                @click="setActiveContent(task, content)"
+              >
+                <span class="text-decoration-underline">
+                  {{ content.btnText }}
+                </span>
+                <span
+                  v-if="isTaskCompleted(task.id, content.id)"
+                  class="text-success"
+                >
+                  <TickCircleIcon
+                    class="ms-2"
+                    style="width: 1.5em; height: 1.5em"
+                  />
+                </span>
+                <span v-else class="text-muted">
+                  <TickCircleIcon
+                    class="ms-2 opacity-25"
+                    style="width: 1.5em; height: 1.5em"
+                  />
+                </span>
+              </BButton>
+            </div>
+          </div>
+        </BCard>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column>
+        <BModal
+          v-if="showTasksModal"
+          v-model="showTasksModal"
+          title="All tasks"
+          size="xl"
+          no-footer
+        >
+          <div>
+            <div v-for="task in props.tasks" :key="'m-' + task.id" class="mb-3">
+              <h5 class="fw-bold">{{ task.title }}</h5>
+              <div
+                v-for="content in task.content"
+                :key="'mcontent-' + content.id"
+              >
+                <BButton
+                  class="task-list-btn d-flex justify-content-between align-items-center w-100 border-0 rounded-2 p-2 mb-2 text-start text-dark fw-bold"
+                  :class="
+                    isTaskCompleted(task.id, content.id)
+                      ? activeContent.id === content.id
+                        ? 'bg-success-subtle active-done'
+                        : 'bg-success-subtle fw-bold'
+                      : activeContent.id === content.id
+                        ? 'active'
+                        : 'bg-light'
+                  "
+                  @click="setActiveContentFromModal(task, content)"
+                >
+                  <span class="text-decoration-underline">
+                    {{ content.btnText }}
+                  </span>
+                  <span
+                    v-if="isTaskCompleted(task.id, content.id)"
+                    class="text-success"
+                  >
+                    <TickCircleIcon
+                      class="ms-2"
+                      style="width: 1.5em; height: 1.5em"
+                    />
+                  </span>
+                  <span v-else class="text-muted">
+                    <TickCircleIcon
+                      class="ms-2 opacity-25"
+                      style="width: 1.5em; height: 1.5em"
+                    />
+                  </span>
+                </BButton>
+              </div>
+            </div>
+          </div>
+        </BModal>
+      </Column>
+    </Row>
+  </Container>
+</template>
+
 <style lang="scss" scoped>
 @import './../../../../includes/scss/all.scss';
 
+$fuchsia: #ea338f;
+
 .active {
   color: black !important;
   background-color: $yellow !important;
@@ -162,9 +371,103 @@ const getNextTask = () => {
 .active-done {
   border-left: 10px solid $green !important;
 }
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
+// .disabled {
+//   pointer-events: none;
+//   opacity: 0.5;
+//   cursor: not-allowed;
+// }
+:deep(span.blockquote) {
+  display: block;
+  font-style: italic;
+  color: #222;
+  background-color: #f6f6f6;
+  border-left: 4px solid #ccc;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.next-task {
+  background-color: #fff; // default gray background
+  color: #000;
+  font-weight: 600;
+  padding: 1rem;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+
+  /* Active/completed state */
+  &.completed {
+    background-color: #f6f6f6;
+  }
+
+  /* Hover state */
+  &:hover {
+    background-color: #fff;
+    border-color: #222;
+    border-width: 3px;
+  }
+
+  /* Focus state */
+  &:focus {
+    background-color: #fff;
+    border-color: #222;
+    border-width: 3px;
+  }
+}
+
+.task-btn {
+  background-color: #f2f1f5; // default gray background
+  color: #000;
+  font-weight: 600;
+  border: 2px solid transparent;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+
+  /* Hover state */
+  &:hover {
+    background-color: #fff;
+    border-color: #222;
+    border-width: 2px;
+  }
+
+  /* Focus state */
+  &:focus {
+    background-color: #fff;
+    border-color: #222;
+    border-width: 3px;
+    outline: solid 3px $fuchsia !important;
+    outline-offset: 3px;
+    border-radius: 0.5rem !important;
+    box-shadow: none !important;
+  }
+
+  /* Active/completed state */
+  &.completed {
+    background-color: #4b8750;
+    color: #fff;
+    border-color: #4b8750;
+    border-width: 3px;
+    outline: solid 3px transparent !important;
+    outline-offset: 3px;
+  }
+}
+
+.task-list-btn {
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+  &:hover {
+    background: #5562a9 !important;
+    color: #fff !important;
+    border-color: transparent;
+
+    svg {
+      color: #fff !important;
+    }
+  }
 }
 </style>