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

package/src/components/SubComponents/Search/index.vue

@@ -8,8 +8,7 @@
     <template v-else>
       <b-input-group>
         <label class="visually-hidden" for="site-search"
-          >Search by keyword (Typed keyword automatically filters below
-          results)</label
+          >Search by keyword (Typed keyword automatically filters below results)</label
         >
         <b-form-input
           id="site-search"
@@ -18,7 +17,7 @@
           aria-label="searchbar"
           autocomplete="off"
           trim
-          @update="searchType !== 'googlerest' ? onChange : () => {}"
+          @update="onChange"
           @keyup.enter="onChange"
         ></b-form-input>
         <template #append>
@@ -43,20 +42,20 @@
         :offset="searchResults && searchResults.offset"
         :page-limit="pageLimit"
         :content-parser="contentParser"
-        :is-card-title-selectable="searchType === 'googlerest' ? true : false"
+        :google-search-flag="searchType"
+        :is-selectable="searchType === 'solar'"
+        :is-card-title-selectable="searchType !== 'solar'"
         @selected="$emit('selected')"
         @pageChanged="pageChanged"
       />
     </template>
   </div>
 </template>
-
 <script>
-import axios from 'axios'
-import searchIcon from '../../../assets/icons/search.svg?url'
-import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
-
+import axios from "axios";
+import searchIcon from "../../../assets/icons/search.svg?url";
+import SearchListing from "./SearchListing/index.vue";
+import { BButton, BInputGroup, BFormInput } from "bootstrap-vue-next";
 
 export default {
   components: { SearchListing, BButton, BInputGroup, BFormInput },
@@ -75,11 +74,11 @@ export default {
     },
     initialSearchQuery: {
       type: String,
-      default: '',
+      default: "",
     },
     googleSearchFlag: {
       type: String,
-      default: 'solar',
+      default: "solar",
     },
     visibleSearchList: {
       type: Boolean,
@@ -89,39 +88,39 @@ export default {
   data() {
     return {
       searchIcon,
-      searchQuery: '',
+      searchQuery: "",
       searchResults: null,
       isLoading: false,
-      field_language: '8671',
+      field_language: "8671",
       searchType: this.googleSearchFlag,
       googleSearchScript: false,
       loadSearchList: this.visibleSearchList,
-    }
+    };
   },
   computed: {
     searchClass() {
       return {
-        'wcl-search': true,
-        'wcl-search__google': this.searchType !== 'solar',
-      }
+        "wcl-search": true,
+        "wcl-search__google": this.searchType !== "solar",
+      };
     },
   },
   mounted() {
-    if (this.searchType === 'google') {
-      this.setupGoogleStyle()
+    if (this.searchType === "google") {
+      this.setupGoogleStyle();
     } else {
       if (this.initialSearchQuery) {
-        this.searchQuery = this.initialSearchQuery
-        this.onSearch()
+        this.searchQuery = this.initialSearchQuery;
+        this.onSearch();
       }
       if (this.isTypeahead && window) {
-        window.document.addEventListener('click', this.closeSearchResults)
+        window.document.addEventListener("click", this.closeSearchResults);
       }
     }
   },
   beforeDestroy() {
     if (this.isTypeahead && window && document) {
-      window.document.removeEventListener('click', this.closeSearchResults)
+      window.document.removeEventListener("click", this.closeSearchResults);
     }
   },
   methods: {
@@ -136,54 +135,54 @@ export default {
               q: query,
               start: start,
             },
-          },
-        )
-        return response
+          }
+        );
+        return response;
       } catch (error) {
-        console.error('Error fetching search results:', error)
-        return []
+        console.error("Error fetching search results:", error);
+        return [];
       }
     },
     async onGoogleSearch(pageNr = 1, searchQuery) {
-      this.$emit('loading', true)
-      this.isLoading = true
+      this.$emit("loading", true);
+      this.isLoading = true;
 
-      const apiKey = 'AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c'
-      const searchEngineId = '53b1506aa03c64160'
+      const apiKey = "AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c";
+      const searchEngineId = "53b1506aa03c64160";
 
-      const start = (pageNr - 1) * this.pageLimit
+      const start = (pageNr - 1) * this.pageLimit;
       let response = await this.fetchSearchResults(
         apiKey,
         searchEngineId,
         searchQuery,
-        start,
-      )
-      let items = []
-      let suggest = response?.data?.spelling?.correctedQuery || ''
+        start
+      );
+      let items = [];
+      let suggest = response?.data?.spelling?.correctedQuery || "";
       if (response?.data?.spelling?.correctedQuery) {
         response = await this.fetchSearchResults(
           apiKey,
           searchEngineId,
           response?.data?.spelling?.correctedQuery,
-          start,
-        )
-        items = response?.data?.items
+          start
+        );
+        items = response?.data?.items;
       } else if (response?.data?.items) {
-        items = response?.data?.items
+        items = response?.data?.items;
       }
       if (items.length > 0) {
-        const totalResults = response?.data?.searchInformation?.totalResults
+        const totalResults = response?.data?.searchInformation?.totalResults;
         // Loop through each item in the items array
         const modifiedResults = items.map((item) => {
           // Update the title using the handleSearchResultLinkTitle function
-          const modifiedTitle = this.handleSearchResultLinkTitle(item.title)
+          const modifiedTitle = this.handleSearchResultLinkTitle(item.title);
 
           // Return the modified item with the updated title
           return {
             ...item,
             title: modifiedTitle,
-          }
-        })
+          };
+        });
 
         this.searchResults = {
           offset: Number(pageNr === 1 ? pageNr - 1 : pageNr),
@@ -191,19 +190,19 @@ export default {
           query: this.searchQuery,
           results: modifiedResults,
           suggestion: suggest,
-        }
+        };
       } else {
         this.searchResults = {
           offset: 0,
           numFound: 0,
-          query: this.searchQuery ?? '',
+          query: this.searchQuery ?? "",
           results: [],
           suggestion: suggest,
-        }
+        };
       }
-      this.$emit('loading', false)
-      this.isLoading = false
-      this.$emit('results', this.searchResults)
+      this.$emit("loading", false);
+      this.isLoading = false;
+      this.$emit("results", this.searchResults);
 
       // wait for the page title to be updated and then fire the search event
       setTimeout(() => {
@@ -211,87 +210,80 @@ export default {
           pageTitle: document.title,
           pageURL: this.$route?.fullPath,
           location:
-            this.$route?.path === '/'
-              ? 'Homepage'
-              : this.$route?.path === '/search'
-                ? 'Search Page'
-                : this.$route?.path,
+            this.$route?.path === "/"
+              ? "Homepage"
+              : this.$route?.path === "/search"
+              ? "Search Page"
+              : this.$route?.path,
           label: this.searchQuery,
           results: this.searchResults.numFound,
-        }
+        };
         if (this.$gtm) {
-          this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+          this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
         }
-      }, 300)
+      }, 300);
     },
     pageChanged(newPageNumber) {
-      if (this.searchType === 'solar') {
+      if (this.searchType === "solar") {
         // Reset search results before fetching new results
-        this.resetSearchResults()
-        this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
+        this.resetSearchResults();
+        this.performSearch(newPageNumber, this.searchQuery, this.pageLimit);
       } else {
         // Fetch new search results with the updated page number
-        this.onGoogleSearch(newPageNumber, this.searchQuery)
+        this.onGoogleSearch(newPageNumber, this.searchQuery);
       }
     },
     onSearch(e) {
-      // debugger
-      const { path } = this.$route || {}
-
-     
+      const { path } = this.$route || {};
 
       // Home page
       if (
-        (e?.type === 'click' || e?.key == 'Enter') &&
+        (e?.type === "click" || e?.key == "Enter") &&
         this.searchQuery &&
         this.searchQuery.length > 2 &&
-        path === '/'
+        path === "/"
       ) {
         // Search page
-        const searchQuery = encodeURIComponent(this.searchQuery)
-        const origin = window.location.origin
-        const hash = window.location.hash
-        const pathname = 'search'
-        const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`
+        const searchQuery = encodeURIComponent(this.searchQuery);
+        const origin = window.location.origin;
+        const hash = window.location.hash;
+        const pathname = "search";
+        const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`;
 
         // Uncomment below commented code when goes live
-        window.location.assign(URL)
+        window.location.assign(URL);
       } else {
-        this.resetSearchResults()
-        this.$emit('query', this.searchQuery)
+        this.resetSearchResults();
+        this.$emit("query", this.searchQuery);
 
-        if (this.searchType === 'solar') {
-          this.performSearch(1, this.searchQuery, this.pageLimit)
+        if (this.searchType === "solar") {
+          this.performSearch(1, this.searchQuery, this.pageLimit);
         } else {
-          this.onGoogleSearch(1, this.searchQuery)
+          this.onGoogleSearch(1, this.searchQuery);
         }
       }
     },
     resetSearchResults() {
-      this.searchResults = null
+      this.searchResults = null;
     },
     closeSearchResults(ev) {
-      if (
-        this.isTypeahead &&
-        this.searchResults &&
-        ev?.target?.id !== 'site-search'
-      ) {
-        this.resetSearchResults()
-        this.searchQuery = null
-        this.$emit('query', null)
+      if (this.isTypeahead && this.searchResults && ev?.target?.id !== "site-search") {
+        this.resetSearchResults();
+        this.searchQuery = null;
+        this.$emit("query", null);
       }
     },
     onChange(e) {
       //debugger
-      
+
       if (this.searchQuery && this.searchQuery.length > 2) {
-        this.onSearch(e)
+        this.onSearch(e);
       }
     },
     performSearch(pageNr = 1, searchQuery, pageLimit) {
       if (searchQuery) {
-        this.$emit('loading', true)
-        this.isLoading = true
+        this.$emit("loading", true);
+        this.isLoading = true;
         this.contentParser({
           query: searchQuery,
           start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
@@ -305,100 +297,100 @@ export default {
               query: searchQuery,
               results: res.results,
               suggestion: null,
-            }
+            };
           } else {
             this.searchResults = {
               offset: 0,
               numFound: 0,
-              query: this.searchQuery ?? '',
+              query: this.searchQuery ?? "",
               results: [],
               suggestion: null,
-            }
+            };
           }
-          this.$emit('loading', false)
-          this.isLoading = false
-          this.$emit('results', this.searchResults)
+          this.$emit("loading", false);
+          this.isLoading = false;
+          this.$emit("results", this.searchResults);
           // wait for the page title to be updated and then fire the search event
           setTimeout(() => {
             const attrs = {
               pageTitle: document.title,
               pageURL: this.$route?.fullPath,
               location:
-                this.$route?.path === '/'
-                  ? 'Homepage'
-                  : this.$route?.path === '/search'
-                    ? 'Search Page'
-                    : this.$route?.path,
+                this.$route?.path === "/"
+                  ? "Homepage"
+                  : this.$route?.path === "/search"
+                  ? "Search Page"
+                  : this.$route?.path,
               label: this.searchQuery,
               results: this.searchResults.numFound,
-            }
+            };
             if (this.$gtm) {
-              this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+              this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
             }
-          }, 300)
-        })
+          }, 300);
+        });
       }
     },
 
     // Method to customize google search style
     setupGoogleStyle() {
       if (this.googleSearchScript === false) {
-        const script = document.createElement('script')
-        script.async = true
+        const script = document.createElement("script");
+        script.async = true;
         script.src = this.$config
           ? this.$config.public.googleSearch
-          : process.env.GOOGLE__URL
-        document.head.appendChild(script)
-        this.googleSearchScript = true
+          : process.env.GOOGLE__URL;
+        document.head.appendChild(script);
+        this.googleSearchScript = true;
 
         // Create a new style element
-        const style = document.createElement('style')
-        style.id = 'searchStyle' // Assign an ID to the style element
+        const style = document.createElement("style");
+        style.id = "searchStyle"; // Assign an ID to the style element
         // The CSS we are going to inject
-        const cssVar = 'table.gssb_c {display: none !important;}'
+        const cssVar = "table.gssb_c {display: none !important;}";
         // Inject the style element into the head
-        document.head.appendChild(style)
+        document.head.appendChild(style);
         // Set the text content of the style element to the CSS text
-        style.textContent = cssVar
+        style.textContent = cssVar;
       }
     },
 
     // function to handle search result link titles
     handleSearchResultLinkTitle(title) {
       // Split the title by the '|' character
-      const titleParts = title.split('|')
+      const titleParts = title.split("|");
 
       // Remove any leading or trailing whitespace from each part
-      const cleanedTitleParts = titleParts.map((part) => part.trim())
+      const cleanedTitleParts = titleParts.map((part) => part.trim());
 
       // Join the cleaned title parts back together without the text after the '|' character
-      const modifiedTitle = cleanedTitleParts[0] // Take only the first part before '|'
+      const modifiedTitle = cleanedTitleParts[0]; // Take only the first part before '|'
 
-      return modifiedTitle
+      return modifiedTitle;
     },
 
     handleKeyUp(event) {
-      if (event.key === 'Enter' || event.type === 'click') {
+      if (event.key === "Enter" || event.type === "click") {
         let keyword = event.key
           ? event.target.value
-          : document.querySelector('input[name="search"]').value
+          : document.querySelector('input[name="search"]').value;
 
         // Check if the URL does not contain "/search"
-        if (keyword && !window.location.href.includes('/search')) {
-          let origin = window.location.origin
-          let hash = window.location.hash
-          let pathname = 'search'
-          let URL = origin + '/' + pathname + hash
+        if (keyword && !window.location.href.includes("/search")) {
+          let origin = window.location.origin;
+          let hash = window.location.hash;
+          let pathname = "search";
+          let URL = origin + "/" + pathname + hash;
         }
 
-        this.setupPaginationEvent()
+        this.setupPaginationEvent();
       }
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .wcl-search {
   position: relative;
@@ -456,7 +448,7 @@ export default {
     }
   }
 
-  @include mq('xs') {
+  @include mq("xs") {
     .not-extra-small-screen {
       display: none;
     }
@@ -546,7 +538,7 @@ export default {
       padding-left: 32px;
 
       &:before {
-        content: 'Search';
+        content: "Search";
       }
 
       @media screen and (max-width: 767px) {
@@ -626,7 +618,7 @@ export default {
       padding: 0;
 
       &::after {
-        content: ' ';
+        content: " ";
         position: absolute;
         height: 16px;
         width: 11px;
@@ -733,7 +725,7 @@ export default {
     }
 
     /* search list end */
-    @include mq('xs') {
+    @include mq("xs") {
       .not-extra-small-screen {
         display: none;
       }
@@ -746,4 +738,4 @@ export default {
     width: 85% !important;
   }
 }
-</style>
+</style>

package/src/index.js

@@ -31,6 +31,7 @@ import ListGroup from './components/Paragraphs/ListGroup/index.vue'
 import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
 import Directory from './components/Paragraphs/Directory/index.vue'
 import HscpDirectory from './components/Paragraphs/Directory/HSCP/Records/index.vue'
+import ArDirectory from './components/Paragraphs/Directory/Asbestos/Records/index.vue'
 import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
 import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
 import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
@@ -99,6 +100,7 @@ export {
   ScrollSpy,
   Directory,
   HscpDirectory,
+  ArDirectory,
   SelectableCards,
   Statistics,
   ProofPoints,