@worksafevictoria/wcl7.5 1.1.0-beta.2 → 1.1.0

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

@@ -1,59 +1,47 @@
 <template>
-  <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>
-        <b-input-group-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>
-        </b-input-group-append>
-      </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 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>
 </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'
@@ -76,14 +64,6 @@ export default {
     initialSearchQuery: {
       type: String,
       default: ''
-    },
-    googleSearchFlag: {
-      type: String,
-      default: 'solar'
-    },
-    visibleSearchList: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -92,177 +72,28 @@ export default {
       searchQuery: '',
       searchResults: null,
       isLoading: false,
-      field_language: '8671',
-      searchType: this.googleSearchFlag,
-      googleSearchScript: false,
-      loadSearchList: this.visibleSearchList
-    }
-  },
-  computed: {
-    searchClass() {
-      return {
-        'wcl-search': true,
-        'wcl-search__google': this.searchType !== 'solar'
-      }
+      field_language: '8671'
     }
   },
   mounted() {
-    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)
-      }
+    if (this.initialSearchQuery) {
+      this.searchQuery = this.initialSearchQuery
+      this.onSearch()
+    }
+    if (this.isTypeahead && window) {
+      window.document.addEventListener('click', this.closeSearchResults)
     }
   },
   beforeDestroy() {
-    if (this.isTypeahead && window && document) {
+    if (this.isTypeahead && window) {
       window.document.removeEventListener('click', this.closeSearchResults)
     }
   },
   methods: {
-    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)
-        }
-      }
+    onSearch() {
+      this.resetSearchResults()
+      this.$emit('query', this.searchQuery)
+      this.performSearch(1, this.searchQuery, this.pageLimit)
     },
     resetSearchResults() {
       this.searchResults = null
@@ -278,11 +109,15 @@ export default {
         this.$emit('query', null)
       }
     },
-    onChange(e) {
+    onChange() {
       if (this.searchQuery && this.searchQuery.length > 2) {
-        this.onSearch(e)
+        this.onSearch()
       }
     },
+    pageChanged(newPageNumber) {
+      this.resetSearchResults()
+      this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
+    },
     performSearch(pageNr = 1, searchQuery, pageLimit) {
       if (searchQuery) {
         this.$emit('loading', true)
@@ -298,16 +133,14 @@ export default {
               offset: Number(res.offset),
               numFound: Number(res.numFound),
               query: searchQuery,
-              results: res.results,
-              suggestion: null
+              results: res.results
             }
           } else {
             this.searchResults = {
               offset: 0,
               numFound: 0,
               query: this.searchQuery ?? '',
-              results: [],
-              suggestion: null
+              results: []
             }
           }
           this.$emit('loading', false)
@@ -333,59 +166,6 @@ export default {
           }, 300)
         })
       }
-    },
-
-    // Method to customize google search style
-    setupGoogleStyle() {
-      if (this.googleSearchScript === false) {
-        const script = document.createElement('script')
-        script.async = true
-        script.src = 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()
-      }
     }
   }
 }
@@ -454,289 +234,5 @@ 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>