Implemented: used menu footer navigation component of dxp-components

hotwax · Sep 6, 2023 · 80dfd0e · 80dfd0e
1 parent 795361d
commit 80dfd0e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 42 deletions.
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -25,47 +25,13 @@
         </ion-menu-toggle>
       </ion-list>
     </ion-content>
-    <ion-footer>
-      <ion-toolbar>
-        <ion-item lines="none">
-          <ion-label class="ion-text-wrap">
-            <p class="overline">{{ instanceUrl }}</p>
-          </ion-label>
-          <ion-note slot="end">{{ userProfile?.userTimeZone }}</ion-note>
-        </ion-item>
-        <!-- showing product stores only when there are multiple options to choose from. -->
-        <ion-item v-if="userProfile?.stores?.length > 2" lines="none">
-          <ion-select interface="popover" :value="eComStore.productStoreId" @ionChange="setEComStore($event)">
-            <ion-select-option v-for="store in (userProfile?.stores ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName }}</ion-select-option>
-          </ion-select>
-        </ion-item>
-        <ion-item v-else lines="none">
-          <ion-label class="ion-text-wrap">
-            {{ currentEComStore.storeName }}
-          </ion-label>
-        </ion-item>
-        <!-- similarly, showing shopify configs only when there are multiple options to choose from 
-        but if both product store and config have multiple options, then only option to choose
-        product store will be visible -->
-        <ion-item v-if="shopifyConfigs?.length > 1 && userProfile?.stores?.length < 3" lines="none">
-          <ion-select interface="popover" :value="currentShopifyConfig?.shopifyConfigId" @ionChange="setShopifyConfig($event)">
-            <ion-select-option v-for="shopifyConfig in shopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId" >{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
-          </ion-select>
-        </ion-item>
-        <ion-item v-else lines="none">
-          <ion-label class="ion-text-wrap">
-           <p>{{ currentShopifyConfig.name ? currentShopifyConfig.name : currentShopifyConfig.shopifyConfigName }}</p> 
-          </ion-label>
-        </ion-item>
-      </ion-toolbar>
-    </ion-footer>
+    <MenuFooterNavigation @change-ecom-store="setEComStore($event)" @change-shopify-config="setShopifyConfig($event)" />
   </ion-menu>
 </template>
 
 <script lang="ts">
 import {
   IonContent,
-  IonFooter,
   IonHeader,
   IonIcon,
   IonItem,
@@ -74,9 +40,6 @@ import {
   IonList,
   IonMenu,
   IonMenuToggle,
-  IonNote,
-  IonSelect,
-  IonSelectOption,
   IonTitle,
   IonToolbar
 } from "@ionic/vue";
@@ -92,7 +55,6 @@ export default defineComponent({
   name: "Menu",
   components: {
     IonContent,
-    IonFooter,
     IonHeader,
     IonIcon,
     IonItem,
@@ -101,9 +63,6 @@ export default defineComponent({
     IonList,
     IonMenu,
     IonMenuToggle,
-    IonNote,
-    IonSelect,
-    IonSelectOption,
     IonTitle,
     IonToolbar
   },

diff --git a/vue.config.js b/vue.config.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 require("@hotwax/app-version-info")
 module.exports = {
   pluginOptions: {
@@ -12,5 +14,12 @@ module.exports = {
       enableInSFC: true
     }
   },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue: path.resolve('./node_modules/vue')
+      }
+    }
+  },
   runtimeCompiler: true
 }