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

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" />`
 })