BULL-1572 | Remove search function

src/components/NavBar.vue

@@ -9,48 +9,6 @@
       <v-spacer></v-spacer>
       <v-toolbar-items v-show="!burgerMenu">
         <div class="navbar-nav my-auto">
-          <v-menu
-            v-show="!burgerMenu"
-            class=" mr-0"
-            v-model="searchMenu"
-            z-index="200"
-            bottom
-            offset-y
-            max-width="175"
-            nudge-right="13"
-          >
-            <template v-slot:activator="{ on }">
-              <v-text-field
-                style="width: 200px"
-                class="d-inline-block mr-4"
-                placeholder="search"
-                filled
-                rounded
-                dense
-                hide-details
-                v-model="searchValue"
-                append-icon="mdi-magnify"
-                @focus="on"
-              ></v-text-field>
-            </template>
-            <v-list
-              v-show="!burgerMenu"
-              v-if="searchMenu"
-              style="background-color: white"
-            >
-              <v-list-item
-                v-for="(item, index) in searchDropDown"
-                :key="index"
-                :to="item.path"
-                link
-              >
-                <v-list-item-title class="search-options">
-                  {{ item.title.toUpperCase() }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-
           <router-link class="nav-item" to="/" exact> HOME </router-link>
           <v-menu open-on-hover bottom offset-y>
             <template v-slot:activator="{ on, attrs }">
@@ -156,54 +114,12 @@
           CONTACT US
         </router-link>
         <v-divider class="mt-2 mb-4" />
-        <v-menu
-          v-model="searchMenu"
-          z-index="200"
-          bottom
-          offset-y
-          max-width="175"
-          nudge-right="25"
-        >
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              style="width: 200px"
-              class="d-inline-block mr-4"
-              placeholder="search"
-              filled
-              rounded
-              dense
-              hide-details
-              v-model="searchValue"
-              append-icon="mdi-magnify"
-              @focus="on"
-            ></v-text-field>
-          </template>
-          <v-list
-            v-show="burgerMenu"
-            v-if="searchMenu"
-            style="background-color: white"
-          >
-            <v-list-item
-              v-for="(item, index) in searchDropDown"
-              :key="index"
-              :to="item.path"
-              link
-            >
-              <v-list-item-title class="search-options">
-                {{ item.title.toUpperCase() }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
       </div>
     </v-navigation-drawer>
   </div>
 </template>
 <script>
 import YodaLogo from "@/assets/images/logos/Logo_P1_Yoda_Campfire-WH.svg";
-import { PageMeta } from "@/constants/PageMeta";
-import forEach from "lodash/forEach";
-import includes from "lodash/includes";
 
 export default {
   name: "NavBar",
@@ -222,10 +138,6 @@ export default {
     ],
     navigationDrawerBreakPoint: 1020,
     burgerMenu: false,
-
-    searchDropDown: [],
-    searchValue: "",
-    searchMenu: false,
   }),
   beforeDestroy() {
     if (typeof window === "undefined") return;
@@ -242,23 +154,6 @@ export default {
     onResize() {
       this.burgerMenu = window.innerWidth < 1020;
     },
-    onSearchChange() {
-      const search = this.searchValue;
-      let match = [];
-
-      forEach(PageMeta, (obj) => {
-        if (
-          (obj.title &&
-            includes(obj.title.toLowerCase(), search.toLowerCase())) ||
-          (obj.description &&
-            includes(obj.description.toLowerCase(), search.toLowerCase()))
-        ) {
-          match.push(obj);
-        }
-      });
-
-      this.searchDropDown = match.slice(0, 5);
-    },
   },
 
   watch: {
@@ -267,13 +162,6 @@ export default {
         this.menuVisible = false;
       }
     },
-
-    searchValue() {
-      this.onSearchChange();
-    },
-    searchDropDown(value) {
-      this.searchMenu = value && value.length > 0;
-    },
   },
 };
 </script>
@@ -286,14 +174,6 @@ export default {
   background-color: $dark-bg-color !important;
 }
 
-.search-options {
-  color: #002743;
-
-  &:hover {
-    color: #0056b3 !important;
-  }
-}
-
 .navbar-nav-list {
   background-color: $dark-bg-color !important;
 }

src/components/PageHeader.vue

@@ -70,18 +70,6 @@
         </div>
       </div>
     </div>
-    <div v-if="displaySearch" class="row justify-content-center">
-      <div class="col-xs-10 col-md-8 col-lg-6 col-xl-4">
-        <v-text-field
-          outlined
-          dense
-          append-icon="mdi-magnify"
-          backgroundColor="white"
-          class="mx-16 mx-5 mb-6"
-          v-on:input="onChangeSearchValue"
-        ></v-text-field>
-      </div>
-    </div>
 
     <div class="wave-divider">
       <svg viewBox="0 70 500 60" preserveAspectRatio="none">
@@ -108,8 +96,6 @@ export default {
     logoSource: String,
     logoSvg: Object,
     logoMaxWidth: String,
-    displaySearch: Boolean,
-    onChangeSearch: Function,
     hideBreadcrumbs: Boolean,
     subtextComponent: Object,
   },
@@ -119,13 +105,6 @@ export default {
       svgComponent: this.logoSvg,
     };
   },
-  methods: {
-    onChangeSearchValue(value) {
-      if (this.onChangeSearch) {
-        this.onChangeSearch(value);
-      }
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>

src/components/PartyBus/Onboarding/FAQs/FAQsSection.vue

@@ -98,27 +98,27 @@ import TextHighlight from "vue-text-highlight";
 export default {
   name: "FAQsSection",
   components: {
-    TextHighlight
+    TextHighlight,
   },
   props: {
-    searchText: String
+    searchText: String,
   },
   data() {
     return {
       tab: null,
       generalInfoPanels: [],
-      logisticsPanels: []
+      logisticsPanels: [],
     };
   },
   methods: {
     displayPanels() {
       console.log(this.generalInfoPanels);
-    }
+    },
   },
   computed: {
     generalInfo() {
       const searchText = new RegExp(this.currentSearchText, "i");
-      const generalInfo = GeneralInfo.map(o => {
+      const generalInfo = GeneralInfo.map((o) => {
         o.display = searchText.test(o.raw);
         return o;
       });
@@ -126,28 +126,28 @@ export default {
     },
     logistics() {
       const searchText = new RegExp(this.currentSearchText, "i");
-      const logistics = Logistics.map(o => {
+      const logistics = Logistics.map((o) => {
         o.display = searchText.test(o.raw);
         return o;
       });
       return logistics;
     },
     generalInfoDisplay() {
-      return this.generalInfo.filter(o => o.display);
+      return this.generalInfo.filter((o) => o.display);
     },
     logisticsDisplay() {
-      return this.logistics.filter(o => o.display);
+      return this.logistics.filter((o) => o.display);
     },
     currentSearchText() {
       return this.searchText;
-    }
+    },
   },
   watch: {
     currentSearchText() {
       this.generalInfoPanels = [];
       this.logisticsPanels = [];
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/PartyBusOnboardingFAQs.vue

 <template>
   <div class="party-bus-onboarding-faqs">
-    <PageHeader
-      :titleWithBreaks="titleWithBreaks"
-      subtext
-      description
-      displaySearch
-      :onChangeSearch="handleSearchChange"
-    />
+    <PageHeader :titleWithBreaks="titleWithBreaks" subtext description />
     <div class="container pt-0">
       <div class="row justify-content-center">
         <div class="col-xs-12 col-md-10 pt-0">
@@ -24,19 +18,14 @@ export default {
   name: "PartyBusOnboardingFAQs",
   components: {
     PageHeader,
-    FAQsSection
+    FAQsSection,
   },
   data() {
     return {
       searchText: "",
-      titleWithBreaks: ["PARTY BUS", "Onboarding FAQs"]
+      titleWithBreaks: ["PARTY BUS", "Onboarding FAQs"],
     };
   },
-  methods: {
-    handleSearchChange(value) {
-      this.searchText = value;
-    }
-  }
 };
 </script>
 <style lang="scss">