@worksafevictoria/wcl7.5 1.7.3 → 1.8.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.7.3",
+  "version": "1.8.0-beta.2",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Common/CardGrid/index.vue

@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import Row from './../../Containers/Row/index.vue'
-import Column from './../../Containers/Column/index.vue'
-import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import { debounce } from 'lodash-es'
+import Row from "./../../Containers/Row/index.vue";
+import Column from "./../../Containers/Column/index.vue";
+import SectionGroup from "./../../Containers/SectionGroup/index.vue";
+import { debounce } from "lodash-es";
 
 export default {
-  name: 'CardGrid',
+  name: "CardGrid",
   components: { Row, Column, SectionGroup },
   props: {
     title: {
@@ -71,7 +71,7 @@ export default {
     },
     titleTag: {
       type: String,
-      default: 'h2',
+      default: "h2",
     },
     cards: {
       type: Array,
@@ -99,9 +99,9 @@ export default {
     },
     size: {
       type: String,
-      default: 'page',
+      default: "page",
       validator: (value) =>
-        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0,
+        ["half-content", "content", "page", "full"].indexOf(value) >= 0,
     },
     isSelectable: {
       type: Boolean,
@@ -112,23 +112,17 @@ export default {
     },
     backgroundVariant: {
       type: String,
-      default: 'none',
+      default: "none",
       validator: (value) =>
-        [
-          'none',
-          'light',
-          'dark',
-          'grey',
-          'yellow',
-          'white',
-          'lightblue',
-        ].indexOf(value) >= 0,
+        ["none", "light", "dark", "grey", "yellow", "white", "lightblue"].indexOf(
+          value
+        ) >= 0,
     },
     applyBackgroundOn: {
       type: String,
-      default: 'section',
+      default: "section",
       validator: (value) =>
-        ['content', 'block', 'container', 'section'].indexOf(value) >= 0,
+        ["content", "block", "container", "section"].indexOf(value) >= 0,
     },
     noPaddingTop: {
       type: Boolean,
@@ -138,8 +132,8 @@ export default {
     },
     rowSpacing: {
       type: String,
-      default: 'large',
-      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0,
+      default: "large",
+      validator: (value) => ["none", "small", "large"].indexOf(value) >= 0,
     },
     rowClasses: {
       type: String,
@@ -147,12 +141,12 @@ export default {
     },
     columnSpacing: {
       type: String,
-      default: 'default',
-      validator: (value) => ['default', 'none'].indexOf(value) >= 0,
+      default: "default",
+      validator: (value) => ["default", "none"].indexOf(value) >= 0,
     },
     contentClass: {
       type: String,
-      default: '',
+      default: "",
     },
     cardBrowseContent: {
       type: Boolean,
@@ -160,7 +154,7 @@ export default {
     },
     gridId: {
       type: String,
-      default: 'default',
+      default: "default",
     },
   },
   data() {
@@ -168,89 +162,88 @@ export default {
       childCards: [],
       redrawCounter: 0,
       setColumnSizeDebounce: debounce(this.setColumnSize, 500),
-    }
+    };
   },
   computed: {
     largeViewPort() {
       if (this.forceLgColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow
+        return 12 / this.forceLgColumnsPerRow;
       }
       return 12 / this.cards.length > 12 / (this.columnsPerRow || 3)
         ? 12 / this.cards.length
-        : 12 / this.columnsPerRow
+        : 12 / this.columnsPerRow;
     },
     mediumViewPort() {
       if (this.forceMdColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow
+        return 12 / this.forceLgColumnsPerRow;
       }
       if (this.largeViewPort === 6) {
-        return 6
+        return 6;
       }
-      return 4
+      return 4;
     },
     smallViewPort() {
       if (this.forceSmColumnsPerRow) {
-        return 12 / this.forceLgColumnsPerRow
+        return 12 / this.forceLgColumnsPerRow;
       }
-      return 6
+      return 6;
     },
   },
   watch: {
     cards: {
       handler: function () {
-        this.redrawCounter += 1
-        this.setColumnSizeDebounce()
+        this.redrawCounter += 1;
+        this.setColumnSizeDebounce();
       },
       deep: true,
     },
     columnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce()
+        this.setColumnSizeDebounce();
       },
     },
     forceSmColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce()
+        this.setColumnSizeDebounce();
       },
     },
     forceMdColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce()
+        this.setColumnSizeDebounce();
       },
     },
     forceLgColumnsPerRow: {
       handler: function () {
-        this.setColumnSizeDebounce()
+        this.setColumnSizeDebounce();
       },
     },
   },
   mounted() {
-    window.addEventListener('resize', this.setColumnSizeDebounce)
-    this.setColumnSizeDebounce()
+    window.addEventListener("resize", this.setColumnSizeDebounce);
+    this.setColumnSizeDebounce();
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setColumnSizeDebounce)
+    window.removeEventListener("resize", this.setColumnSizeDebounce);
   },
   methods: {
     cardTitleSelected(selectedCard, ev) {
-      this.clearCards()
-      selectedCard.selected = !!!selectedCard.selected
-      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+      this.clearCards();
+      selectedCard.selected = !!!selectedCard.selected;
+      const selectedCardModelIndex = this.getChildIndex(selectedCard);
 
-      this.$emit('selected-title', {
-        selectedCard: selectedCard.selected
-          ? this.cards[selectedCardModelIndex]
-          : null,
+      this.$emit("selected-title", {
+        selectedCard: selectedCard.selected ? this.cards[selectedCardModelIndex] : null,
         selectedCardModelIndex,
         ev,
-      })
+      });
     },
     cardSelected(selectedCard, ev) {
-      this.clearCards()
-      selectedCard.selected = !!!selectedCard.selected
-      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+      debugger;
+      this.clearCards();
+      selectedCard.selected = !!!selectedCard.selected;
+      const selectedCardModelIndex = this.getChildIndex(selectedCard);
 
-      this.$emit('selected', {
+      this.$emit("selected", {
         selectedCard: selectedCard.selected
           ? this.cardBrowseContent
             ? this.childCards[selectedCardModelIndex]
@@ -258,59 +251,59 @@ export default {
           : null,
         selectedCardModelIndex,
         ev,
-      })
+      });
     },
     clearCards(selectedCard) {
       this.childCards.forEach((card) => {
-        card.selected = false
+        card.selected = false;
         if (!selectedCard || selectedCard !== card) {
-          card.selected = false
+          card.selected = false;
         }
-      })
+      });
     },
     getChildIndex(selectedCard) {
-      return this.childCards.findIndex((item) => item === selectedCard)
+      return this.childCards.findIndex((item) => item === selectedCard);
     },
     registerChild(child) {
-      this.childCards.push(child)
-      this.setColumnSizeDebounce()
+      this.childCards.push(child);
+      this.setColumnSizeDebounce();
     },
     deregisterChild(child) {
-      const index = this.childCards.indexOf(child)
+      const index = this.childCards.indexOf(child);
       if (index > -1) {
-        this.childCards.splice(index, 1)
+        this.childCards.splice(index, 1);
       }
     },
     setColumnSize() {
       setTimeout(() => {
-        const columns = this.$refs.cardColumns
+        const columns = this.$refs.cardColumns;
         if (Array.isArray(columns) && columns.length > 0) {
-          const row = this.$refs.cardRow
-          const elementWidth = columns[0].$el.offsetWidth
-          const parentWidth = row.$el.offsetWidth
-          const gridColumnSize = parseInt(parentWidth / elementWidth)
-          const isMobileView = parentWidth < 480
-          const isTabletView = !isMobileView && parentWidth < 767
-          this.$emit('isMobileView', isMobileView)
-          this.$emit('isTabletView', isTabletView)
-          this.$emit('isDesktopView', !isTabletView && !isMobileView)
-          this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
-          this.$emit('gridColumnSize', gridColumnSize)
+          const row = this.$refs.cardRow;
+          const elementWidth = columns[0].$el.offsetWidth;
+          const parentWidth = row.$el.offsetWidth;
+          const gridColumnSize = parseInt(parentWidth / elementWidth);
+          const isMobileView = parentWidth < 480;
+          const isTabletView = !isMobileView && parentWidth < 767;
+          this.$emit("isMobileView", isMobileView);
+          this.$emit("isTabletView", isTabletView);
+          this.$emit("isDesktopView", !isTabletView && !isMobileView);
+          this.$emit("isMobileOrTabletView", isMobileView || isTabletView);
+          this.$emit("gridColumnSize", gridColumnSize);
           this.childCards.forEach((card) =>
-            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView),
-          )
+            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView)
+          );
         }
-      })
+      });
     },
     handleFocus(ev) {
-      this.$emit('focussed', ev)
+      this.$emit("focussed", ev);
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 .card-grid {
   &__column {
     &--default {

package/src/components/Common/CardGridItem/index.vue

@@ -402,6 +402,8 @@ export default {
   },
   methods: {
     cardClicked(ev) {
+      debugger;
+      console.log("cardClicked this.isSelectable :- ", this.isSelectable);
       if (this.isSelectable) {
         this.parentGrid.cardSelected(this, ev);
       }
@@ -411,6 +413,7 @@ export default {
       }
     },
     cardTitleClicked(ev) {
+      debugger;
       if (this.isCardTitleSelectable) {
         this.parentGrid.cardTitleSelected(this, ev);
       }

package/src/components/Global/AppHeader/ModalSearch/index.vue

@@ -13,6 +13,7 @@
       <label class="app-search__label font-weight-bold" for="app-search--search-input-box"
         >Search WorkSafe</label
       >
+      googleSearchFlag:- {{ googleSearchFlag }}
       <search
         ref="searchInputBox"
         :google-search-flag="googleSearchFlag"

package/src/components/Global/AppHeaderNew/ModalSearch/index.vue

@@ -10,7 +10,9 @@
       <img class="app-search__close-icon" width="22" height="18" :src="Close" />
     </button>
     <form @submit.prevent>
-      <label class="app-search__label font-weight-bold" for="app-search--search-input-box"
+      <label
+        class="app-search__label font-weight-bold"
+        for="app-search--search-input-box"
         >Search WorkSafe</label
       >
       <search
@@ -30,40 +32,40 @@
 </template>
 
 <script>
-import Close from "../../../../assets/icons/close.svg?url";
-import Search from "../../../SubComponents/Search/index.vue";
+import Close from '../../../../assets/icons/close.svg?url'
+import Search from '../../../SubComponents/Search/index.vue'
 
 export default {
-  name: "ModalSearch",
+  name: 'ModalSearch',
   components: { Search },
   props: {
     searchQuery: {
       type: String,
-      default: "",
+      default: ''
     },
     contentParser: {
       type: Function,
-      required: true,
+      required: true
     },
     googleSearchFlag: {
       type: String,
-      default: "solar",
-    },
+      default: 'googlerest'
+    }
   },
   data() {
     return {
       pageLimit: 20,
       pageNumber: 1,
       searchResults: null,
-      Close,
-    };
+      Close
+    }
   },
   mounted() {
-    this.$refs.searchInputBox.$el.querySelector("input").focus();
-  },
-};
+    this.$refs.searchInputBox.$el.querySelector('input').focus()
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./styles";
+@import './styles';
 </style>

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue

@@ -9,6 +9,7 @@
           </a>
         </column>
         <column md="2" sm="12" class="address" >
+          <div class="label">Office address</div>
           <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
             {{ item.fullAddress }}
           </a>

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

@@ -101,23 +101,20 @@ export default {
   computed: {
 
     themeOptions() {
-      // Requirement to remove certain values from original courses
-      let allThemes = this.flatRecords.map(a => a.courses)
+      // Concatenate all themes, remove duplicates, sort and use for a drop-down list
+      let allThemes = this.flatRecords.map(a => a.themes)
       allThemes = allThemes.join(',')
-      allThemes = allThemes.replace(/HSR initial/g, '')
-      allThemes = allThemes.replace(/HSR Initial/g, '')
-      allThemes = allThemes.replace(/HSR refresher - /g, '')
-      allThemes = allThemes.replace(/HSR Refresher - /g, '')
-      allThemes = allThemes.replace(/HSR refresher/g, '')
-      allThemes = allThemes.replace(/HSR Refresher/g, '')
       allThemes = allThemes.trim()
       allThemes = allThemes.split(',')
+      // Change all themes to title case
+      for (var i = 0; i < allThemes.length; i++) {
+        let newVal = this.toTitleCase(allThemes[i])
+        allThemes[i] = newVal
+      }
       // Remove duplicates
       let s = new Set(allThemes)
       allThemes = [...s]
-      // Remove blank values - not completely successful
-      allThemes = allThemes.filter(n => n)
-      
+
       // Sort the themes
       let sortedThemes = allThemes.sort((a, b) => {
         if (a.trim() < b.trim()) {
@@ -128,10 +125,8 @@ export default {
         }
         return 0;
       })
-      if (sortedThemes[0].type === undefined) {
-        sortedThemes.splice(0, 1)
-      }
       allThemes = sortedThemes
+
       return allThemes
     },
 
@@ -152,7 +147,7 @@ export default {
       }
       if (this.searchThemes.length) {
         this.hideReset = false
-        results = results.filter(item => item.courses.toLowerCase().includes(this.searchThemes.toLowerCase()))
+        results = results.filter(item => item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()))
       }
       this.filteredItems = results
 
@@ -191,6 +186,7 @@ export default {
           email2: record.Contact_2_Email,
           phone2: record.Contact_2_Phone,
           courses: record.Training_courses.replace(/,$/, ''),
+          themes: record.Themes.replace(/,$/, ''),
           trainingVenues: record.Training_venues
         })
       })
@@ -240,6 +236,7 @@ export default {
     },
     
     reset() {
+      this.collapseOrgs('')
       this.hideReset = true
       this.searchOrg = ''
       this.searchCourse = ''
@@ -249,7 +246,17 @@ export default {
 
     pageChanged(ev) {
       this.page = ev - 1
-      
+
+      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
+          // don't set focus
+          this.collapseOrgs('')
+        } else {
+          // set focus to top element - used instead of scrollTo
+          this.collapseOrgs('Yes')
+        } 
+    },
+
+    collapseOrgs(focusLink) {
       const aLinks = document.getElementsByName('titleLink')
       // Convert nodelist to array
       let linksArr = Array.from(aLinks)
@@ -258,14 +265,24 @@ export default {
           .filter((link) => link.getAttribute('aria-expanded') === 'true')
           .forEach((link) => link.click())
 
-        if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-          // don't set focus
-        } else {
-          // set focus to top element - used instead of scrollTo
-          console.log('setting focus.')
-          linksArr[0].focus()
-        } 
+          if (focusLink === 'Yes') {
+            linksArr[0].focus()
+          }
       }
+
+    },
+
+    toTitleCase(strVal) {
+
+      let retVal = strVal.trim()
+
+      const firstChar = retVal.charAt(0)
+      const firstCharU = firstChar.toUpperCase()
+      const remChar = retVal.slice(1)
+
+      retVal = firstCharU + remChar
+
+      return retVal
     },
   }
 }
@@ -300,6 +317,7 @@ export default {
     margin-bottom: 16px;
     margin-right: 16px;
     transition: none;
+    width: 200px;
   }
  
   .grid-column {

package/src/components/Paragraphs/Directory/Records/PRS/index.stories.js

@@ -27,8 +27,8 @@ export default {
     tags: ['autodocs']
 };
 
-export const CourseProvider = {};
+export const PRS = {};
 
-CourseProvider.args = {
+PRS.args = {
     item: cpData,    
 };