Improved: code by removing the redundant usage of ion-footer and declared the footer in the app file(#ew8pb0)

changelogs/unreleased/-ew8pb0.yml

@@ -0,0 +1,7 @@
+---
+title: 'Improved: code by removing the redundant usage of ion-footer and declared
+  the footer in the app file, also removed the requested tab'
+ticket_id: "#ew8pb0"
+merge_request: 2
+author: Yash Maheshwari
+type: fixed

src/App.vue

@@ -1,21 +1,35 @@
 <template>
   <ion-app>
-    <ion-router-outlet />
+    <ion-page>
+      <ion-content :fullscreen="true">
+        <ion-router-outlet />
+      </ion-content>
+      <ion-footer v-if="showFooter">
+        <ion-toolbar>
+          <tab-bar />
+        </ion-toolbar>
+      </ion-footer>
+    </ion-page>
   </ion-app>
 </template>
 
 <script lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import { IonApp, IonRouterOutlet, IonPage, IonFooter, IonToolbar, IonContent } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus"
-
+import TabBar from "./components/TabBar.vue"
 
 export default defineComponent({
   name: 'App',
   components: {
     IonApp,
-    IonRouterOutlet
+    IonRouterOutlet,
+    IonPage,
+    IonFooter,
+    IonToolbar,
+    TabBar,
+    IonContent
   },
   data() {
     return {
@@ -46,5 +60,11 @@ export default defineComponent({
     emitter.off('presentLoader', this.presentLoader);
     emitter.off('dismissLoader', this.dismissLoader);
   },
+  computed: {
+    showFooter () {
+      if (['/settings', '/search', '/upload'].includes(this.$route.path)) return true
+      return false
+    }
+  }
 });
 </script>

src/components/TabBar.vue

@@ -6,10 +6,6 @@
           <ion-icon :icon="search" />
           <ion-label>{{ $t("Search") }}</ion-label>
         </ion-tab-button>
-        <ion-tab-button tab="requested" href="/requested">
-          <ion-icon :icon="list" />
-          <ion-label>{{ $t("Requested") }}</ion-label>
-        </ion-tab-button>
         <ion-tab-button tab="upload" href="/upload">
           <ion-icon :icon="cloudUpload" />
           <ion-label>{{ $t("Upload") }}</ion-label>

src/locales/en.json

@@ -7,7 +7,6 @@
   "Logout": "Logout",
   "Product not found": "Product not found",
   "Remove": "Remove",
-  "Requested": "Requested",
   "Save":"Save",
   "Scan": "Scan",
   "Search": "Search",

src/views/Search.vue

@@ -29,17 +29,10 @@
         </ion-col>
       </ion-row>
     </ion-grid>
-
-    <ion-footer :translucent="true">
-      <ion-toolbar>
-        <tab-bar />
-      </ion-toolbar>
-    </ion-footer>
   </ion-page>
 </template>
 
 <script lang="ts">
-import TabBar from '@/components/TabBar.vue'
 import {
   IonPage,
   IonHeader,
@@ -52,7 +45,6 @@ import {
   IonGrid,
   IonRow,
   IonCol,
-  IonFooter,
   IonInfiniteScroll,
   IonInfiniteScrollContent,
   IonList,
@@ -79,12 +71,10 @@ export default defineComponent({
     IonGrid,
     IonRow,
     IonCol,
-    IonFooter,
     IonInfiniteScroll,
     IonInfiniteScrollContent,
     IonList,
     IonListHeader,
-    TabBar,
     ProductListItem
   },
   data (){

src/views/Settings.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { alertController, IonButton, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar } from '@ionic/vue';
+import { alertController, IonButton, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, IonList } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { ellipsisVertical, personCircleOutline, storefrontOutline} from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
@@ -48,7 +48,8 @@ export default defineComponent({
     IonSelect,
     IonSelectOption,
     IonTitle, 
-    IonToolbar
+    IonToolbar,
+    IonList
   },
   computed: {
     ...mapGetters({

src/views/Upload.vue

@@ -30,18 +30,12 @@
         </ion-item>
         <ion-button fill="clear" @click="removeItem(product.sku)">{{ $t( "Remove" ) }}</ion-button>
       </ion-card>
-      <ion-fab vertical="bottom"  horizontal="end" slot="fixed">
+      <ion-fab id="upload-button" vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button @click="upload()">
           <ion-icon :icon="cloudUploadOutline" />
         </ion-fab-button>
       </ion-fab>
     </ion-content>
-
-    <ion-footer :translucent="true">
-      <ion-toolbar>
-        <tab-bar />
-      </ion-toolbar>
-    </ion-footer>
   </ion-page>
 </template>
 
@@ -62,12 +56,10 @@ import {
   IonThumbnail,
   IonTitle,
   IonToolbar,
-  IonFooter
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { colorPaletteOutline, resize, cloudUploadOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
-import TabBar from '@/components/TabBar.vue'
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -87,9 +79,7 @@ export default defineComponent({
     IonPage,
     IonThumbnail,
     IonTitle,
-    IonToolbar,
-    IonFooter,
-    TabBar
+    IonToolbar
   },
   computed: {
     ...mapGetters({
@@ -129,3 +119,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+  #upload-button {
+    bottom: 70px;
+  }
+</style>