@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.100

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

@@ -1,70 +1,90 @@
 <template>
-  <div class="wcl-search">
-    <b-input-group>
-      <label class="visually-hidden" for="site-search"
-        >Search by keyword (Typed keyword automatically filters below
-        results)</label
-      >
-      <b-form-input
-        id="site-search"
-        v-model="searchQuery"
-        aria-label="searchbar"
-        debounce="600"
-        autocomplete="off"
-        trim
-        @update="onChange"
-      ></b-form-input>
-      <b-input-group-append>
-        <b-button size="sm" @click="onSearch"
-          ><span class="not-extra-small-screen">Search</span>
-          <img alt="search icon" :src="searchIcon"
-        /></b-button>
-      </b-input-group-append>
-    </b-input-group>
-    <search-listing
-      v-if="searchResults || isLoading"
-      :class="{
-        [`wcl-search__typeahead`]: isTypeahead,
-        [`wcl-search__modal`]: isTypeahead
-      }"
-      :is-loading="isLoading"
-      :is-typeahead="isTypeahead"
-      :num-found="searchResults && searchResults.numFound"
-      :query="searchResults && searchResults.query"
-      :results="searchResults ? searchResults.results : []"
-      :offset="searchResults && searchResults.offset"
-      :page-limit="pageLimit"
-      :content-parser="contentParser"
-      @selected="$emit('selected')"
-      @pageChanged="pageChanged"
-    />
+  <div :class="searchClass">
+    <template v-if="searchType === 'google'">
+      <div class="wcl-google">
+        <div class="gcse-search"></div>
+      </div>
+    </template>
+    <template v-else>
+      <b-input-group>
+        <label class="visually-hidden" for="site-search"
+          >Search by keyword (Typed keyword automatically filters below
+          results)</label
+        >
+        <b-form-input
+          id="site-search"
+          v-model="searchQuery"
+          name="search"
+          aria-label="searchbar"
+          debounce="600"
+          autocomplete="off"
+          trim
+          @update="searchType !== 'googlerest' ? onChange : () => {}"
+          @keyup.enter="onChange"
+        ></b-form-input>
+        <template #append>
+          <b-button size="sm" class="search-button" @click="onSearch"
+            ><span class="not-extra-small-screen">Search</span>
+            <img alt="search icon" :src="searchIcon"
+          /></b-button>
+        </template>
+      </b-input-group>
+      <search-listing
+        v-if="loadSearchList && (searchResults || isLoading)"
+        :class="{
+          [`wcl-search__typeahead`]: isTypeahead,
+          [`wcl-search__modal`]: isTypeahead,
+        }"
+        :is-loading="isLoading"
+        :is-typeahead="isTypeahead"
+        :num-found="searchResults && searchResults.numFound"
+        :suggestion="searchResults && searchResults.suggestion"
+        :query="searchResults && searchResults.query"
+        :results="searchResults ? searchResults.results : []"
+        :offset="searchResults && searchResults.offset"
+        :page-limit="pageLimit"
+        :content-parser="contentParser"
+        :is-card-title-selectable="searchType === 'googlerest' ? true : false"
+        @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, BInputGroupAppend } from 'bootstrap-vue-next'
+import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
 
 export default {
-  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  components: { SearchListing, BButton, BInputGroup, BFormInput },
   props: {
     pageLimit: {
       type: Number,
-      required: true
+      required: true,
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     isTypeahead: {
       type: Boolean,
-      required: true
+      required: true,
     },
     initialSearchQuery: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'solar',
+    },
+    visibleSearchList: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -72,28 +92,177 @@ export default {
       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',
+      }
+    },
+  },
   mounted() {
-    if (this.initialSearchQuery) {
-      this.searchQuery = this.initialSearchQuery
-      this.onSearch()
-    }
-    if (this.isTypeahead && window) {
-      window.document.addEventListener('click', this.closeSearchResults)
+    if (this.searchType === 'google') {
+      this.setupGoogleStyle()
+    } else {
+      if (this.initialSearchQuery) {
+        this.searchQuery = this.initialSearchQuery
+        this.onSearch()
+      }
+      if (this.isTypeahead && window) {
+        window.document.addEventListener('click', this.closeSearchResults)
+      }
     }
   },
   beforeDestroy() {
-    if (this.isTypeahead && window) {
+    if (this.isTypeahead && window && document) {
       window.document.removeEventListener('click', this.closeSearchResults)
     }
   },
   methods: {
-    onSearch() {
-      this.resetSearchResults()
-      this.$emit('query', this.searchQuery)
-      this.performSearch(1, this.searchQuery, this.pageLimit)
+    async fetchSearchResults(apiKey, searchEngineId, query, start) {
+      try {
+        const response = await (this?.$axios || axios).get(
+          `https://www.googleapis.com/customsearch/v1`,
+          {
+            params: {
+              key: apiKey,
+              cx: searchEngineId,
+              q: query,
+              start: start,
+            },
+          },
+        )
+        return response
+      } catch (error) {
+        console.error('Error fetching search results:', error)
+        return []
+      }
+    },
+    async onGoogleSearch(pageNr = 1, searchQuery) {
+      this.$emit('loading', true)
+      this.isLoading = true
+
+      const apiKey = 'AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c'
+      const searchEngineId = '53b1506aa03c64160'
+
+      const start = (pageNr - 1) * this.pageLimit
+      let response = await this.fetchSearchResults(
+        apiKey,
+        searchEngineId,
+        searchQuery,
+        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
+      } else if (response?.data?.items) {
+        items = response?.data?.items
+      }
+      if (items.length > 0) {
+        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)
+
+          // Return the modified item with the updated title
+          return {
+            ...item,
+            title: modifiedTitle,
+          }
+        })
+
+        this.searchResults = {
+          offset: Number(pageNr === 1 ? pageNr - 1 : pageNr),
+          numFound: Number(totalResults),
+          query: this.searchQuery,
+          results: modifiedResults,
+          suggestion: suggest,
+        }
+      } else {
+        this.searchResults = {
+          offset: 0,
+          numFound: 0,
+          query: this.searchQuery ?? '',
+          results: [],
+          suggestion: suggest,
+        }
+      }
+      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,
+          label: this.searchQuery,
+          results: this.searchResults.numFound,
+        }
+        if (this.$gtm) {
+          this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+        }
+      }, 300)
+    },
+    pageChanged(newPageNumber) {
+      if (this.searchType === 'solar') {
+        // Reset search results before fetching new results
+        this.resetSearchResults()
+        this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
+      } else {
+        // Fetch new search results with the updated page number
+        this.onGoogleSearch(newPageNumber, this.searchQuery)
+      }
+    },
+    onSearch(e) {
+      const { path } = this.$route || {}
+
+      // Home page
+      if (
+        (e?.type === 'click' || e?.key === 'Enter') &&
+        this.searchQuery &&
+        this.searchQuery.length > 2 &&
+        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}`
+
+        // Uncomment below commented code when goes live
+        window.location.assign(URL)
+      } else {
+        this.resetSearchResults()
+        this.$emit('query', this.searchQuery)
+
+        if (this.searchType === 'solar') {
+          this.performSearch(1, this.searchQuery, this.pageLimit)
+        } else {
+          this.onGoogleSearch(1, this.searchQuery)
+        }
+      }
     },
     resetSearchResults() {
       this.searchResults = null
@@ -109,15 +278,11 @@ export default {
         this.$emit('query', null)
       }
     },
-    onChange() {
+    onChange(e) {
       if (this.searchQuery && this.searchQuery.length > 2) {
-        this.onSearch()
+        this.onSearch(e)
       }
     },
-    pageChanged(newPageNumber) {
-      this.resetSearchResults()
-      this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
-    },
     performSearch(pageNr = 1, searchQuery, pageLimit) {
       if (searchQuery) {
         this.$emit('loading', true)
@@ -126,21 +291,23 @@ export default {
           query: searchQuery,
           start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
           rows: pageLimit,
-          field_language: this.field_language
+          field_language: this.field_language,
         }).then((res) => {
           if (res.numFound) {
             this.searchResults = {
               offset: Number(res.offset),
               numFound: Number(res.numFound),
               query: searchQuery,
-              results: res.results
+              results: res.results,
+              suggestion: null,
             }
           } else {
             this.searchResults = {
               offset: 0,
               numFound: 0,
               query: this.searchQuery ?? '',
-              results: []
+              results: [],
+              suggestion: null,
             }
           }
           this.$emit('loading', false)
@@ -155,10 +322,10 @@ export default {
                 this.$route?.path === '/'
                   ? 'Homepage'
                   : this.$route?.path === '/search'
-                  ? 'Search Page'
-                  : this.$route?.path,
+                    ? 'Search Page'
+                    : this.$route?.path,
               label: this.searchQuery,
-              results: this.searchResults.numFound
+              results: this.searchResults.numFound,
             }
             if (this.$gtm) {
               this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
@@ -166,8 +333,63 @@ export default {
           }, 300)
         })
       }
-    }
-  }
+    },
+
+    // Method to customize google search style
+    setupGoogleStyle() {
+      if (this.googleSearchScript === false) {
+        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
+
+        // Create a new 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;}'
+        // Inject the style element into the head
+        document.head.appendChild(style)
+        // Set the text content of the style element to the CSS text
+        style.textContent = cssVar
+      }
+    },
+
+    // function to handle search result link titles
+    handleSearchResultLinkTitle(title) {
+      // Split the title by the '|' character
+      const titleParts = title.split('|')
+
+      // Remove any leading or trailing whitespace from each part
+      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 '|'
+
+      return modifiedTitle
+    },
+
+    handleKeyUp(event) {
+      if (event.key === 'Enter' || event.type === 'click') {
+        let keyword = event.key
+          ? event.target.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
+        }
+
+        this.setupPaginationEvent()
+      }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -234,5 +456,289 @@ export default {
       display: none;
     }
   }
+  // Google Search styling
+  &.wcl-search__google {
+    :deep(form.gsc-search-box) {
+      position: relative;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -ms-flex-align: stretch;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    :deep(.gsib_a) {
+      padding: 0 !important;
+      height: 56px;
+    }
+
+    :deep(.gsib_b) {
+      position: absolute;
+      right: 5px;
+      top: 15px;
+    }
+
+    :deep(.gcsc-more-maybe-branding-root) {
+      display: none;
+    }
+
+    :deep(table.gsc-input) {
+      position: relative;
+    }
+
+    :deep(td.gsc-input) {
+      border: none;
+      padding: 0;
+      width: 100%;
+    }
+
+    :deep(.gsc-input-box) {
+      border: none;
+    }
+
+    :deep(input.gsc-input) {
+      border-radius: 8px 0px 0px 8px;
+      border: 1px solid $gray !important;
+      border-right: 0 !important;
+      background: none !important;
+      color: #495057;
+      height: 56px !important;
+      position: relative;
+      -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+      padding: 0.375rem 0.75rem !important;
+
+      @media screen and (max-width: 320px) {
+        width: 220px;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    :deep(.gsc-search-button) {
+      display: -ms-flexbox;
+      display: flex;
+      margin-left: 0px;
+      height: 56px;
+      margin-top: 0px;
+    }
+
+    :deep(button.gsc-search-button) {
+      background: $orange;
+      border: none;
+      border-radius: 0px 8px 8px 0px;
+      color: $black;
+      display: flex;
+      align-items: center;
+      height: 56px !important;
+      font-size: 16px;
+      font-weight: 700;
+      padding-right: 32px;
+      padding-left: 32px;
+
+      &:before {
+        content: 'Search';
+      }
+
+      @media screen and (max-width: 767px) {
+        margin-top: 6px;
+      }
+
+      @media screen and (max-width: 320px) {
+        padding-right: 16px;
+        padding-left: 16px;
+      }
+
+      svg {
+        fill: black;
+        height: 18px;
+        width: 18px;
+        margin-left: 10px;
+      }
+
+      :focus {
+        box-shadow: 0px;
+      }
+    }
+
+    :deep(.gsst_a .gscb_a) {
+      color: #191919;
+    }
+
+    :deep(.gsc-result-info) {
+      color: #191919;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    :deep(.gsc-above-wrapper-area) {
+      padding: 20px 0;
+      border-bottom: none;
+    }
+
+    /* search list start */
+    :deep(.gsc-url-top) {
+      display: none;
+    }
+
+    :deep(.gsc-table-result) {
+      line-height: 1.6;
+      padding: 0 5px;
+      font-size: 16px;
+      font-weight: 400;
+      width: 80%;
+
+      b {
+        color: #191919;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+
+    :deep(.gsc-resultsRoot.gsc-tabData) {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      padding-left: 15px;
+      padding-right: 15px;
+
+      &:hover {
+        border: none;
+      }
+    }
+
+    :deep(.gs-bidi-start-align.gs-snippet) {
+      color: #191919 !important;
+      line-height: 24px;
+    }
+
+    :deep(.gsc-thumbnail-inside) {
+      position: relative;
+      padding: 0;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        height: 16px;
+        width: 11px;
+        top: 5px;
+        right: 16px;
+        background-repeat: no-repeat;
+        background-image: url(./../../../assets/icons/chev-right.svg);
+        background-size: 100%;
+      }
+
+      div.gs-title {
+        width: 90%;
+        margin-bottom: 12px;
+        overflow: visible;
+      }
+
+      a.gs-title {
+        color: #191919 !important;
+        font-weight: 700;
+        line-height: 24px;
+        font-size: 20px;
+        border: 3px solid transparent;
+        padding-left: 5px;
+        padding-right: 5px;
+        text-decoration: underline;
+
+        &:hover {
+          border: 3px solid #da47ff;
+          color: #006bff !important;
+
+          b {
+            color: #006bff !important;
+          }
+        }
+
+        b {
+          color: #191919 !important;
+          font-size: 20px;
+        }
+      }
+    }
+
+    :deep(.gsc-orderby-label) {
+      font-size: 16px;
+      font-weight: 700;
+      color: #191919;
+    }
+
+    :deep(.gsc-selected-option-container) {
+      background-color: white;
+      border-radius: 10px;
+      margin-top: 0px;
+      padding-top: 6px;
+      margin-right: 0;
+      margin-left: 4px;
+      padding-left: 20px;
+      padding-bottom: 6px;
+      height: 40px;
+
+      .gsc-selected-option {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-right: 20px;
+      }
+    }
+
+    :deep(.gsc-control-cse .gsc-option-selector) {
+      margin-top: 0;
+      margin-right: 10px;
+    }
+
+    :deep(.gsc-expansionArea > .gsc-webResult.gsc-result) {
+      border: 0;
+      flex: 0 0 100%;
+      max-width: 100%;
+      padding: 0;
+
+      &:first-child {
+        border-top: 1px solid #bababa;
+      }
+
+      > div {
+        border-bottom: 1px solid #bababa;
+        padding: 32px 0;
+      }
+    }
+
+    :deep(.gsc-results .gsc-cursor-box .gsc-cursor-current-page) {
+      background-color: lightgrey;
+    }
+
+    :deep(.gsc-results .gsc-cursor-box .gsc-cursor-page) {
+      border: 1px solid grey;
+      color: #333333;
+      padding: 10px 12px;
+      border-radius: 5px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    :deep(.gsc-results .gsc-cursor-box) {
+      margin-top: 50px;
+    }
+
+    /* search list end */
+    @include mq('xs') {
+      .not-extra-small-screen {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  :deep(.gssb_c) {
+    width: 85% !important;
+  }
 }
 </style>