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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.7.3",
+  "version": "1.8.0-beta.1",
   "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/SubComponents/Search/SearchListing/index.vue

@@ -5,10 +5,7 @@
       v-if="!(isTypeahead && numFound > 0) && !isLoading"
       class="app-search-result__found"
     >
-      <span
-        >{{ numFound }} results found for
-        {{ !suggestion ? query : suggestion }}</span
-      >
+      <span>{{ numFound }} results found for {{ !suggestion ? query : suggestion }}</span>
     </p>
     <p
       v-if="results && results.length > 0 && suggestion"
@@ -21,7 +18,7 @@
       :force-lg-columns-per-row="1"
       :force-md-columns-per-row="1"
       :cards="results"
-      :is-selectable="false"
+      :is-selectable="isSelectable"
       :size="'full'"
       :row-spacing="'none'"
       :no-padding-top="true"
@@ -82,14 +79,14 @@
 </template>
 
 <script>
-import CardGrid from '../../../Common/CardGrid/index.vue'
-import CardGridItem from '../../../Common/CardGridItem/index.vue'
-import { navigateToPath } from '../../../../../lib/utility'
-import Pagination from '../../Pagination/index.vue'
-import Column from '../../../Containers/Column/index.vue'
+import CardGrid from "../../../Common/CardGrid/index.vue";
+import CardGridItem from "../../../Common/CardGridItem/index.vue";
+import { navigateToPath } from "../../../../../lib/utility";
+import Pagination from "../../Pagination/index.vue";
+import Column from "../../../Containers/Column/index.vue";
 
 export default {
-  name: 'SearchListing',
+  name: "SearchListing",
   components: { CardGrid, CardGridItem, Pagination, Column },
   props: {
     isTypeahead: {
@@ -109,7 +106,7 @@ export default {
     query: {
       type: String,
       required: false,
-      default: '',
+      default: "",
     },
     results: {
       type: Array,
@@ -132,49 +129,54 @@ export default {
       type: Boolean,
       default: false,
     },
+    isSelectable: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     onClickItem(event, item, index) {
-      this.$emit('select-item', event.target, item, index)
+      this.$emit("select-item", event.target, item, index);
     },
     truncate(value, limit) {
       if (value.length > limit) {
-        value = value.substring(0, limit - 3) + '...'
+        value = value.substring(0, limit - 3) + "...";
       }
-      return value
+      return value;
     },
     onSelectCardTitle(card) {
+      debugger;
       navigateToPath.call(
         this,
         card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // open link in current environment
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
-      )
-      this.$nextTick(() => this.$emit('selected-title'))
+        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+      );
+      this.$nextTick(() => this.$emit("selected-title"));
 
       if (this.$gtm) {
-        this.fireGTM(card)
+        this.fireGTM(card);
       }
     },
     onSelectResult(card) {
       navigateToPath.call(
         this,
         card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // title click is used for search result, but change also included here
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
-      )
-      this.$nextTick(() => this.$emit('selected'))
+        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+      );
+      this.$nextTick(() => this.$emit("selected"));
 
       if (this.$gtm) {
-        this.fireGTM(card)
+        this.fireGTM(card);
       }
     },
     fireGTM(card) {
       let attrs = {
         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.query,
         results: this.results.length,
         clickText: card.selectedCard.title,
@@ -184,20 +186,20 @@ export default {
         industry: card?.selectedCard?.industry,
         topic: card?.selectedCard?.topic,
         language: card?.selectedCard?.language,
-      }
-      this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
+      };
+      this.$gtm.push({ event: "custom.search.site.result", ...attrs });
     },
     showMoreResults() {
       if (this.$nuxt) {
-        this.$router.push('/search?q=' + this.query)
+        this.$router.push("/search?q=" + this.query);
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../includes/scss/all';
+@import "../../../../includes/scss/all";
 .app-search-result {
   &__found,
   &__suggestion {

package/src/components/SubComponents/Search/index.stories.js

@@ -37,8 +37,8 @@ const DefaultSearch = (args) => ({
   setup () {
     return { args }
   },
-  template: `<search 
-  v-bind="args" 
+  template: `<search
+  v-bind="args"
   ref="solrsearch" />`
 })
 

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

@@ -6,10 +6,10 @@
       </div>
     </template>
     <template v-else>
+      ELSE :- searchType :- {{ searchType }}
       <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"
@@ -19,7 +19,7 @@
           autocomplete="off"
           trim
           @update="searchType !== 'googlerest' ? onChange : () => {}"
-          @keyup.enter="onChange"
+          @keyup.enter="searchType === 'googlerest' ? onChange : () => {}"
         ></b-form-input>
         <template #append>
           <b-button size="sm" class="search-button" @click="onSearch"
@@ -28,6 +28,7 @@
           /></b-button>
         </template>
       </b-input-group>
+      searchType:- {{ searchType }} <br />
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
         :class="{
@@ -43,6 +44,7 @@
         :offset="searchResults && searchResults.offset"
         :page-limit="pageLimit"
         :content-parser="contentParser"
+        :is-selectable="searchType === 'googlerest' ? false : true"
         :is-card-title-selectable="searchType === 'googlerest' ? true : false"
         @selected="$emit('selected')"
         @pageChanged="pageChanged"
@@ -52,11 +54,10 @@
 </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 +76,11 @@ export default {
     },
     initialSearchQuery: {
       type: String,
-      default: '',
+      default: "",
     },
     googleSearchFlag: {
       type: String,
-      default: 'solar',
+      default: "solar",
     },
     visibleSearchList: {
       type: Boolean,
@@ -89,39 +90,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 +137,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 +192,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 +212,83 @@ 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 || {}
+      debugger;
+      console.log("this.searchType:- ", this.searchType);
 
-     
+      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 +302,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 +453,7 @@ export default {
     }
   }
 
-  @include mq('xs') {
+  @include mq("xs") {
     .not-extra-small-screen {
       display: none;
     }
@@ -546,7 +543,7 @@ export default {
       padding-left: 32px;
 
       &:before {
-        content: 'Search';
+        content: "Search";
       }
 
       @media screen and (max-width: 767px) {
@@ -626,7 +623,7 @@ export default {
       padding: 0;
 
       &::after {
-        content: ' ';
+        content: " ";
         position: absolute;
         height: 16px;
         width: 11px;
@@ -733,7 +730,7 @@ export default {
     }
 
     /* search list end */
-    @include mq('xs') {
+    @include mq("xs") {
       .not-extra-small-screen {
         display: none;
       }
@@ -746,4 +743,4 @@ export default {
     width: 85% !important;
   }
 }
-</style>
+</style>