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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="paragraph--directory__records--hscp">
+  <div class="paragraph--directory__records--dir">
     <!-- Main details -->
     <container>
       <row class="records">
@@ -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>
@@ -32,7 +33,7 @@
           </a>
         </column>
       </row>
-      <div class="hscp-caret" >
+      <div class="dir-caret" >
         <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
           <img
             :src="CaretUp"
@@ -56,76 +57,79 @@
       <div style="padding-top: 20px;">
         <hr>
       </div>
-      <row >
+      <!-- Contacts, if any -->
+      <div v-if="validContacts">
+        <row >
         <column >
           <h4>Contact Information</h4>
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.contact1 !== '' || item.contact2 !== ''">
+        <column sm="2" class="label" v-if="item.contact1 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.contact1 !== ''">
           {{item.contact1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.contact2 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.contact2 !== ''">
           {{item.contact2}}
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.phone1 !== '' || item.phone2 !== ''">
+        <column sm="2" class="label" v-if="item.phone1 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.phone1 !== ''">
           {{item.phone1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.phone2 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.phone2 !== ''">
           {{item.phone2}}
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.email1 !== '' || item.email2 !== ''">
+        <column sm="2" class="label" v-if="item.email1 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
           {{item.email1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.email2 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
           {{item.email2}}
         </column>
       </row>
-      <row class="row-hscp-additional">
+      </div>
+     <div v-if="item.trainingVenues.length">
+      <row class="row-dir-additional">
         <column>
           <h4>Training Venue Locations</h4>
         </column>
       </row>
-      <row class="hscp-additional-records">
-        <column v-if="item.trainingVenues.length" >
+      <row class="dir-additional-records">
+        <column  >
           <ul>
             <li v-for="(venue) in item.trainingVenues.split(',')" :key="venue.id">
               {{venue}}
             </li>
           </ul> 
         </column>
-        <column v-else-if="!item.trainingVenues.length">
-          <p>No training venues</p>
-        </column>
       </row>
-      <row class="row-hscp-additional">
+     </div>
+      
+      <row class="row-dir-additional">
         <column>
           <h4>Training Courses</h4>
         </column>
       </row>
-      <row class="hscp-additional-records">
+      <row class="dir-additional-records">
         <column>
           <ul>
             <li v-for="(course) in item.courses.split(',')" :key="course.id">
@@ -169,6 +173,13 @@ export default {
     gMapLink() {
       return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
     },
+    validContacts() {
+      if (this.item.contact1 === '' && this.item.contact2 === '' && this.item.phone1 === '' && this.item.phone2 === '' && this.item.email1 === '' && this.item.email2 === '') {
+        return false
+      } else {
+        return true
+      }
+    }
 
   },
   methods: {
@@ -190,133 +201,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles.scss';
-
-.row-hscp-additional {
-  margin-top: 20px;
-}
 
-.hscp-additional-records {
-  font-size: 16px;
-}
+@import './styles.scss'
 
-.hscp-caret {
-  justify-content: end;
-  align-content: end;
-  max-width: 20px;
-  padding-right: 0px;
-  padding-bottom: 10px;
-  float:right;
-}
-.paragraph--directory__records--hscp {
-
-  padding-bottom: 20px !important;
-  
-  a {
-        color: $black;
-        text-decoration: none;
-      }
-      a:hover {   
-          text-decoration: underline;
-        }
-      a:focus {
-          text-decoration: underline;
-        }
-
-  .name {
-        font-size: 1rem;
-        color: $black;
-        font-weight: 700;
-  }
-  .address {
-    font-size: 15px;
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-    a:hover {   
-          text-decoration: underline;
-        }
-      a:focus {
-          text-decoration: underline;
-        }
-  }
-  .coldata {
-    a {
-      color: inherit;
-    }
-  }
-  .label {
-      font-size: 16px;
-      font-weight: bold;
-  }
-  .longstring {
-    word-break: break-all;
-  }
-  .search {
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    transition: none;
-  }
-}
-
-.paragraph--directory.hscp-filters {
-  .search {
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    transition: none;
-  }
-  select {
-    -moz-appearance: none; /* Firefox */
-    -webkit-appearance: none; /* Safari and Chrome */
-    appearance: none;
-    height: 42px;
-    border-radius: 8px;
-    padding: 10px 12px;
-    width: 100%;
-    border: 1px solid $gray;
-    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
-    background-position: 95% 50%;
-    background-repeat: no-repeat;
-    text-transform: capitalise;
-  }
-  .grid-column {
-    display: inline-block;
-    width: 25%;
-
-    @media (max-width: 767px) {
-      width: 50%;
-    }
-
-    @media (max-width: 539px) {
-      display: block;
-      width: 100%;
-      float: none;
-      margin-bottom: 16px;
-    }
-  }
-  .right {
-    float: right;
-    position: relative;
-  }
-
-  .records {
-    padding: 0px;
-    margin: 0;
-  }
-
-}
 </style>
 

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/styles.scss

@@ -0,0 +1,127 @@
+@import '../../../styles.scss';
+
+.row-dir-additional {
+  margin-top: 20px;
+}
+
+.dir-additional-records {
+  font-size: 16px;
+}
+
+.dir-caret {
+  justify-content: end;
+  align-content: end;
+  max-width: 20px;
+  padding-right: 0px;
+  float:right;
+}
+.paragraph--directory__records--dir {
+
+  padding-bottom: 30px !important;
+  
+  a {
+        color: $black;
+        text-decoration: none;
+      }
+      a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+
+  .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+  }
+  .address {
+    font-size: 15px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+  }
+  .coldata {
+    a {
+      color: inherit;
+    }
+  }
+  .label {
+      font-size: 16px;
+      font-weight: bold;
+  }
+  .longstring {
+    word-break: break-all;
+  }
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+}
+
+.paragraph--directory.dir-filters {
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+  select {
+    -moz-appearance: none; /* Firefox */
+    -webkit-appearance: none; /* Safari and Chrome */
+    appearance: none;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 100%;
+    border: 1px solid $gray;
+    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    text-transform: capitalise;
+  }
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+      width: 50%;
+    }
+
+    @media (max-width: 539px) {
+      display: block;
+      width: 100%;
+      float: none;
+      margin-bottom: 16px;
+    }
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0px;
+    margin: 0;
+  }
+
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <section-group class="paragraph--directory hscp-filters">
+  <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
     <row style="column-gap: 16px;">
       <!-- Keyword Filters -->
@@ -42,7 +42,7 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="hscpRecords" >
+    <div class="dirRecords" >
       <template v-for="(item, index) in resultChunks[page]" >
         <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
       </template>
@@ -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
         })
       })
@@ -218,7 +214,7 @@ export default {
     formatWebsite(url) {
       let startUrl = url.slice(0, 3)
       if (startUrl.toLowerCase() === 'www') {
-        return 'http://' + url
+        return 'https://' + url
       } else {
         return url
       }
@@ -240,6 +236,7 @@ export default {
     },
     
     reset() {
+      this.collapseOrgs('No')
       this.hideReset = true
       this.searchOrg = ''
       this.searchCourse = ''
@@ -249,7 +246,18 @@ 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
+          // don't collapseOrgs
+        } else {
+          // set focus to top element - used instead of scrollTo
+          this.collapseOrgs('Yes')
+        } 
+    },
+
+    collapseOrgs(focusLink) {
+      // called by pageChanged and reset.  pageChanged called by filter and by pagination links
       const aLinks = document.getElementsByName('titleLink')
       // Convert nodelist to array
       let linksArr = Array.from(aLinks)
@@ -258,86 +266,32 @@ 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.')
+        if (focusLink === 'Yes') {
           linksArr[0].focus()
-        } 
+        }
       }
-    },
-  }
-}
-</script>
 
-<style lang="scss" scoped>
-@import '../../styles.scss';
-.paragraph--directory.hscp-filters {
+    },
 
-  .selectClass {
-    display:inline-block;
-    height: 42px;
-    border-radius: 8px;
-    padding: 10px 12px;
-    width: 200px;
-    border: 1px solid $gray;
-    margin-right: 16px;
-    margin-bottom: 16px;
+    toTitleCase(strVal) {
 
-  }
+      let retVal = strVal.trim()
 
-  .search {
-    display: inline-block;
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-image: url('./../../../../../assets/icons/search.svg');
-    background-repeat: no-repeat !important;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    margin-right: 16px;
-    transition: none;
-  }
- 
-  .grid-column {
-    display: inline-block;
-    width: 25%;
-
-    @media (max-width: 767px) {
-    width: 50%;
-  }
+      const firstChar = retVal.charAt(0)
+      const firstCharU = firstChar.toUpperCase()
+      const remChar = retVal.slice(1)
 
-  @media (max-width: 539px) {
-    display: block;
-    width: 100%;
-    float: none;
-    margin-bottom: 16px;
-  }
-   
-  }
-  .right {
-    float: right;
-    position: relative;
-  }
+      retVal = firstCharU + remChar
 
-  .records {
-    padding: 0;
-    margin: 0;
+      return retVal
+    },
   }
 }
+</script>
 
-.filterButton__button--reset {
-  display: inline-block !important;
-  float: right;
-}
-
-.hscpRecords {
-  padding-top: 16px;
-}
+<style lang="scss" scoped>
 
+@import '../styles.scss'
 
 
 </style>

package/src/components/Paragraphs/Directory/HSCP/styles.scss

@@ -0,0 +1,68 @@
+
+@import '../styles.scss';
+
+.paragraph--directory.dir-filters {
+
+  .selectClass {
+    display:inline-block;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 200px;
+    border: 1px solid $gray;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+  }
+
+  .search {
+    display: inline-block;
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-image: url('./../../../../../assets/icons/search.svg');
+    background-repeat: no-repeat !important;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    margin-right: 16px;
+    transition: none;
+    width: 200px;
+  }
+ 
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+    width: 50%;
+  }
+
+  @media (max-width: 539px) {
+    display: block;
+    width: 100%;
+    float: none;
+    margin-bottom: 16px;
+  }
+   
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.filterButton__button--reset {
+  display: inline-block !important;
+  float: right;
+}
+
+.dirRecords {
+  padding-top: 16px;
+}

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,    
 };

package/src/components/Paragraphs/Directory/styles.scss

@@ -30,6 +30,8 @@
 
   &--isp,
   &--hscp,
+  &--ar,
+  &--dir,
    &--cj {
     @include defaultStyle();
     @include itemStyle();