@worksafevictoria/wcl7.5 1.13.0 → 1.14.0-beta.10

package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue

@@ -1,7 +1,7 @@
 <template>
   <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
-    <row style="column-gap: 16px">
+    <row style="column-gap: 10px">
       <!-- Keyword Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
         <label class="col-form-label visually-hidden" for="keyword-search">
@@ -44,21 +44,21 @@
           <option class="placeholder" value="" disabled hidden selected>
             Service class
           </option>
-          <option value="Class A Asbestos Removalists">
-            Class A Asbestos Removalists
+          <option value="Class A - Friable and non-friable">
+            Class A - Friable and non-friable
           </option>
-          <option value="Class B Asbestos Removalists">
-            Class B Asbestos Removalists
+          <option value="Class B - Non-friable">
+            Class B - Non-friable
           </option>
-          <option value="Class A - Restricted - Asbestos Removalists">
+          <!-- <option value="Class A - Restricted - Asbestos Removalists">
             Class A - Restricted - Asbestos Removalists
           </option>
           <option value="Class B - Restricted - Asbestos Removalists">
             Class B - Restricted - Asbestos Removalists
-          </option>
+          </option> -->
         </select>
       </column>
-      <column xxl="2" xl="3" md="4" sm="6">
+      <!-- <column xxl="2" xl="3" md="4" sm="6">
         <label class="col-form-label visually-hidden" for="search-services">
           Search by suburb (typed suburb automatically filters below results)
         </label>
@@ -70,7 +70,7 @@
           aria-label="Search by suburb (typed suburb automatically filters below results)"
           class="search"
         />
-      </column>
+      </column> -->
       <column md="2">
         <filter-button
           v-if="!hideReset"
@@ -120,7 +120,7 @@ export default {
       searchRem: '',
       searchSub: '',
       searchClass: '',
-      searchServices: '',
+      // searchServices: '',
       filteredItems: null,
       perPage: 10,
       page: 0,
@@ -159,21 +159,21 @@ export default {
             .includes(this.searchClass.toLowerCase()),
         )
       }
-      if (this.searchServices.length) {
-        this.hideReset = false
-        results = results.filter((item) =>
-          item.services
-            .toLowerCase()
-            .includes(this.searchServices.toLowerCase()),
-        )
-      }
+      // if (this.searchServices.length) {
+      //   this.hideReset = false
+      //   results = results.filter((item) =>
+      //     item.services
+      //       .toLowerCase()
+      //       .includes(this.searchServices.toLowerCase()),
+      //   )
+      // }
       this.filteredItems = results
 
       if (
         this.searchRem.length ||
         this.searchSub.length ||
-        this.searchClass.length ||
-        this.searchServices.length
+        this.searchClass.length
+        // || this.searchServices.length
       ) {
         this.pageChanged(1)
       }
@@ -184,7 +184,7 @@ export default {
     flatRecords() {
       let flatRecords = []
       const sortedItems = this.items.sort((a, b) =>
-        a.ResourceName.localeCompare(b.ResourceName, 'en', {
+        a.Account.localeCompare(b.Account, 'en', {
           sensitivity: 'base',
         }),
       )
@@ -192,21 +192,22 @@ export default {
       sortedItems.forEach((record) => {
         flatRecords.push({
           type: 'ar',
-          title: record.ResourceName,
-          fullAddress: record.AddressLine2,
-          workPhone: record.Phone,
-          mobilePhone: record.CompanyMobile,
-          email: record.CompanyEmailDisp,
-          website: this.formatWebsite(record.CompanyWebURLDisp),
-          contact1: this.returnContact(
-            record.ContactFirstName,
-            record.ContactLastName,
-          ),
-          email1: record.ContactEmail,
-          phone1: record.ContactPhoneDisp,
-          mobile1: record.ContactMobileDisp,
-          services: record.ServicesAll.replace(/,$/, ''),
-          serviceCategory: record.ServiceAll,
+          title: record.Account,
+          fullAddress: record.Regbusinessaddresssuburb + ' ' + record.Regbusinessaddresspostcode,
+          // workPhone: record.Phone,
+          mobilePhone: record.PrimaryContactMobile,
+          email: record.PrimaryContactEmail,
+          website: record.Website ? this.formatWebsite(record.Website) : '',
+          // contact1: this.returnContact(
+          //   record.ContactFirstName,
+          //   record.ContactLastName,
+          // ),
+          contact1: record.PrimaryContactAccountName,
+          // email1: record.PrimaryContactEmail,
+          // phone1: record.ContactPhoneDisp,
+          // mobile1: record.PrimaryContactMobile,
+          // services: record.ServicesAll.replace(/,$/, ''),
+          serviceCategory: record.AsbestosClass,
         })
       })
       return flatRecords
@@ -245,10 +246,10 @@ export default {
       return returnUrl
     },
 
-    returnContact(firstN, lastN) {
-      let retContact = [firstN, lastN].filter(Boolean).join(' ')
-      return retContact
-    },
+    // returnContact(firstN, lastN) {
+    //   let retContact = [firstN, lastN].filter(Boolean).join(' ')
+    //   return retContact
+    // },
 
     chunkify(arr, n) {
       if (arr) {

package/src/components/Paragraphs/Directory/Records/PRS/recordContent.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable vue/no-v-html  -->
   <container>
+    <div>
+      <hr />
+    </div>
     <row>
       <column sm="9">
         <div v-if="item.outcome" class="record-details__outcome">
@@ -89,3 +92,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+  .record-details__outcome {
+    margin-left: 20px !important;
+  }
+
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <TextMedia
+      :media-type="'image'"
+      :title-text="textMedia.title"
+      :title-tag="textMedia.titleTag"
+      :content="textMedia.content"
+      :image="textMedia.image"
+      :rtl="textMedia.rtl"
+    />
+
+    <Container fluid class="my-4">
+      <h2>Select your injury</h2>
+
+      <TextMedia
+        :media-type="'icon'"
+        :title-text="'Physical injuries'"
+        :content="`<p>
+        Physical injuries include anything that occurs to an employees body.
+            This tool supports employers to manage the return to work process
+            for non-complex physical injuries only.
+      </p><p><a href=&quot;#&quot; class=&quot;cta-button&quot;>Continue to planner</a></p>`"
+        :glyph="PhysicalInjury"
+        :icon-alt="'PhysicalInjury icon'"
+        :glyph-height="60"
+        :glyph-width="60"
+      />
+
+      <TextMedia
+        :media-type="'icon'"
+        :title-text="'Mental injuries'"
+        :content="`<p>
+        Mental injuries are complex and require tailored information for
+            employers to support injured workers with their return to work. This
+            tool does not currently give guidance for mental injuries.
+      </p><p><a href=&quot;#&quot; class=&quot;cta-button white&quot;>Continue to planner</a></p>`"
+        :glyph="MentalInjury"
+        :icon-alt="'MentalInjury icon'"
+        :glyph-height="60"
+        :glyph-width="60"
+      />
+
+      <TextMedia
+        :media-type="'icon'"
+        :title-text="'Other'"
+        :content="`<p>
+        If you are unsure about the injury type of your employee, gaining
+            additional support, reach out to your agent to get more information.
+      </p><p><a href=&quot;#&quot; class=&quot;cta-button white&quot;>More information</a></p>`"
+        :glyph="OtherInjury"
+        :icon-alt="'Other icon'"
+        :glyph-height="60"
+        :glyph-width="60"
+      />
+    </Container>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+import Container from './../../../Containers/Container/index.vue'
+import TextMedia from './../../TextMedia/index.vue'
+import PhysicalInjury from './../../../../assets/icons/Physical-injury.svg?url'
+import MentalInjury from './../../../../assets/icons/Mental-injury.svg?url'
+import OtherInjury from './../../../../assets/icons/other.svg?url'
+const emit = defineEmits(['newPlan'])
+
+const props = defineProps({
+  textMedia: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.lightgrey-bg {
+  border-radius: 12px;
+  border: 4px solid #727272;
+  background: #f5f5f5;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <BNavbar variant="light" class="border-bottom bg-white pb-0">
+    <BNavbarBrand>
+      <ChevRightIcon
+        class="ws-yellow"
+        style="width: 32px; height: 32px"
+      ></ChevRightIcon>
+      <strong>Return to Work Planner</strong>
+    </BNavbarBrand>
+    <BNavbarToggle target="nav-collapse" />
+    <BNavbarNav class="ms-auto align-items-center">
+      <BNavItem href="/return-work-home">
+        <strong>Home</strong>
+      </BNavItem>
+      <BNavItem href="/return-work-poc">
+        <NotepadIcon class="me-2" style="width: 1em; height: 1em" />
+        <strong>My Planners</strong>
+      </BNavItem>
+    </BNavbarNav>
+  </BNavbar>
+</template>
+
+<script setup>
+import ChevRightIcon from './../icons/ChevRightIcon.vue'
+import NotepadIcon from './../icons/NotepadIcon.vue'
+import {
+  BNavbar,
+  BNavbarBrand,
+  BNavbarToggle,
+  BNavbarNav,
+  BNavItem,
+} from 'bootstrap-vue-next'
+</script>
+
+<style lang="scss" scoped>
+@import './../../../../includes/scss/all.scss';
+.active {
+  color: black !important;
+  border-bottom: 5px solid $yellow;
+}
+.ws-yellow {
+  color: $yellow;
+}
+</style>

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

@@ -0,0 +1,169 @@
+<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 } from '@worksafevictoria/wcl7.5'
+import TickCircleIcon from './icons/TickCircleIcon.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 toggleTask = (taskId, contentId) => {
+  const key = `${taskId}_${contentId}`
+  const updatedPlanner = {
+    ...props.activePlanner,
+    tasksCompleted: [...props.activePlanner.tasksCompleted]
+  }
+  const index = updatedPlanner.tasksCompleted.indexOf(key)
+  if (index === -1) {
+    updatedPlanner.tasksCompleted.push(key)
+  } else {
+    updatedPlanner.tasksCompleted.splice(index, 1)
+  }
+  emit('updatePlanner', updatedPlanner)
+}
+
+const isTaskCompleted = (taskId, contentId) => {
+  const key = `${taskId}_${contentId}`
+  return props.activePlanner.tasksCompleted.includes(key)
+}
+
+const setActiveContent = (task, content) => {
+  console.log('🚀 ~ setActiveContent ~ task:', task)
+  activeTask.value = task
+  activeContent.value = content
+  scrollTo(0, 0)
+}
+
+const getNextTask = () => {
+  for (const task of props.tasks) {
+    for (const content of task.content) {
+      if (activeContent.value.id === content.id) {
+        const currentTaskIndex = props.tasks.indexOf(task)
+        const currentContentIndex = task.content.indexOf(content)
+        if (currentContentIndex + 1 < task.content.length) {
+          return { task, content: task.content[currentContentIndex + 1] }
+        } else if (currentTaskIndex + 1 < props.tasks.length) {
+          const nextTask = props.tasks[currentTaskIndex + 1]
+          return { task: nextTask, content: nextTask.content[0] }
+        } else {
+          return null
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@worksafevictoria/wcl7.5/src/includes/scss/all.scss';
+.active {
+  color: black !important;
+  background-color: $yellow !important;
+}
+.active-done {
+  border-left: 10px solid $green !important;
+}
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>