Fixed buttons in listing search page

src/components/AdvancedSearch.vue

@@ -80,14 +80,8 @@ export default {
     };
   },
   methods: {
-    setV2: function () {
-      this.$emit("setV2");
-    },
-    toggleListing: function () {
-      this.$emit("toggleListing");
-    },
     changeSearchForm: function () {
-      this.$emit("changeSearchForm");
+      this.$emit("changeFormToB");
     },
     validateInput: function () {
       this.errorMessages = [];

src/components/AdvancedSearchV2.vue

@@ -90,10 +90,10 @@ export default {
   },
   methods: {
     toggleListing: function () {
-      this.$emit("toggleListing");
+      this.$emit("changeFormToListing");
     },
     changeSearchForm: function () {
-      this.$emit("changeSearchForm");
+      this.$emit("changeFormToB");
     },
     validateInput: function () {
       this.errorMessages = [];

src/components/BasicSearch.vue

@@ -67,7 +67,7 @@
       <span id="advancedSearch"
         ><b-button
           data-testid="advanced"
-          @click="changeSearchForm()"
+          @click="changeFormToA()"
           title="Switch to the advanced search form which has more options"
           >Advanced Search</b-button
         ></span
@@ -103,11 +103,8 @@ export default {
     };
   },
   methods: {
-    changeSearchForm: function () {
-      this.$emit("changeSearchForm");
-    },
-    toggleListing: function () {
-      this.$emit("toggleListing");
+    changeFormToA: function () {
+      this.$emit("changeFormToA");
     },
     onSubmit: function () {
       // onSubmit is called when user inputs ENTER on search bar

src/components/BasicSearchV2.vue

@@ -84,15 +84,15 @@
         <p class="control">
           <b-button
             data-testid="advanced"
-            @click="changeSearchForm()"
+            @click="changeFormToA()"
             title="Switch to the advanced search form which has more options"
             >Advanced Search</b-button
           >
         </p>
         <p class="control">
           <b-button
             data-testid="beaconListing"
-            @click="toggleListing()"
+            @click="changeFormToListing()"
             title="Change to listings search"
             >Listing search</b-button
           >
@@ -139,11 +139,11 @@ export default {
     };
   },
   methods: {
-    toggleListing: function () {
-      this.$emit("toggleListing");
+    changeFormToListing: function () {
+      this.$emit("changeFormToListing");
     },
-    changeSearchForm: function () {
-      this.$emit("changeSearchForm");
+    changeFormToA: function () {
+      this.$emit("changeFormToA");
     },
     onSubmit: function () {
       // onSubmit is called when user inputs ENTER on search bar

src/components/ListingV2.vue

@@ -103,14 +103,24 @@
           >Example range query</b-button
         ></span
       >
-      <span id="basicSearch"
-        ><b-button
-          data-testid="basic"
-          @click="returnToPrevious()"
-          title="Switch back to the basic search bar"
-          >Return to previous page</b-button
-        ></span
-      >
+      <span class="field has-addons" id="advancedSearch">
+        <p class="control">
+          <b-button
+            data-testid="beaconListing"
+            @click="changeFormToB()"
+            title="Change to listings search"
+            >Basic search</b-button
+          >
+        </p>
+        <p class="control">
+          <b-button
+            data-testid="advanced"
+            @click="changeFormToA()"
+            title="Switch to the advanced search form which has more options"
+            >Advanced Search</b-button
+          >
+        </p>
+      </span>
     </div>
   </div>
 </template>
@@ -129,6 +139,12 @@ export default {
     };
   },
   methods: {
+    changeFormToA: function () {
+      this.$emit("changeFormToA");
+    },
+    changeFormToB: function () {
+      this.$emit("changeFormToB");
+    },
     pickSearchBySet: function (index) {
       const element = this.list[index];
       if (element.searchInInput === "individuals") {

src/views/Home.vue

@@ -13,9 +13,9 @@
       <component
         data-testid="component"
         v-bind:is="componentName"
-        @changeSearchForm="toggleForm"
-        @toggleListing="toggleListing"
-        @returnToPrevious="returnToPrevious"
+        @changeFormToA="setFormToA()"
+        @changeFormToB="setFormToB()"
+        @changeFormToListing="setFormToListing()"
       ></component>
       <b-switch v-model="toggleV2" id="v2Switch">
         {{
@@ -48,6 +48,7 @@ import BasicSearchV2 from "@/components/BasicSearchV2.vue";
 import AdvancedSearchV2 from "@/components/AdvancedSearchV2.vue";
 import ListingV2 from "@/components/ListingV2.vue";
 import VueCookies from "vue-cookies";
+import BasicSearchVue from "@/components/BasicSearch.vue";
 
 export default {
   name: "home",
@@ -76,34 +77,34 @@ export default {
   },
   methods: {
     toggleForm: function () {
+      if (this.componentName == BasicSearch) {
+        this.componentName = BasicSearchV2;
+      } else if (this.componentName == BasicSearchV2) {
+        this.componentName = BasicSearch;
+      } else if (this.componentName == AdvancedSearchV2) {
+        this.componentName = AdvancedSearch;
+      } else if (this.componentName == AdvancedSearch) {
+        this.componentName = AdvancedSearchV2;
+      }
+    },
+    setFormToA: function () {
       if (this.toggleV2) {
-        if (this.componentName === BasicSearch) {
-          this.componentName = BasicSearchV2;
-        } else if (this.componentName === AdvancedSearch) {
-          this.componentName = AdvancedSearchV2;
-        } else if (this.componentName === BasicSearchV2) {
-          this.componentName = AdvancedSearchV2;
-        } else {
-          this.componentName = BasicSearchV2;
-        }
+        this.componentName = AdvancedSearchV2;
       } else {
-        if (this.componentName === BasicSearchV2) {
-          this.componentName = BasicSearch;
-        } else if (this.componentName === AdvancedSearchV2) {
-          this.componentName = AdvancedSearch;
-        } else if (this.componentName === BasicSearch) {
-          this.componentName = AdvancedSearch;
-        } else {
-          this.componentName = BasicSearch;
-        }
+        this.componentName = AdvancedSearch;
       }
     },
-    returnToPrevious: function () {
-      this.componentName = this.previous;
+    setFormToB: function () {
+      if (this.toggleV2) {
+        this.componentName = BasicSearchV2;
+      } else {
+        this.componentName = BasicSearch;
+      }
     },
-    toggleListing: function () {
-      this.previous = this.componentName;
-      this.componentName = ListingV2;
+    setFormToListing: function () {
+      if (this.toggleV2) {
+        this.componentName = ListingV2;
+      }
     },
     cookieToast: function () {
       // Check if cookies have been accepted, if not, show toast regarding cookies