Implemented static UI for purchase order page(#22c8vdc)

src/App.vue

@@ -1,11 +1,15 @@
 <template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
+  <IonApp>
+    <IonSplitPane content-id="main-content" when="lg">
+      <Menu />
+      <ion-router-outlet id="main-content"></ion-router-outlet>
+    </IonSplitPane>
+  </IonApp>
 </template>
 
 <script lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import Menu from '@/components/Menu.vue';
+import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { loadingController, alertController } from '@ionic/vue';
 import { useStore } from "./store";
@@ -14,7 +18,9 @@ export default defineComponent({
   name: 'App',
   components: {
     IonApp,
-    IonRouterOutlet
+    IonRouterOutlet,
+    IonSplitPane,
+    Menu
   },
   data() {
     return {

src/components/Menu.vue

@@ -0,0 +1,120 @@
+<template>
+    <ion-menu content-id="main-content" type="overlay" :disabled="!isUserAuthenticated">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ $t("Import")}}</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content>
+          <ion-list id="import-list">
+            <ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
+              <ion-item
+                button
+                @click="selectedIndex = i"
+                router-direction="root"
+                :router-link="p.url"
+                class="hydrated"
+                :class="{ selected: selectedIndex === i }"
+              >
+                <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
+                <ion-label>{{ p.title }}</ion-label>
+              </ion-item>
+            </ion-menu-toggle>
+          </ion-list>
+        </ion-content>
+      </ion-menu>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonIcon,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  IonMenu,
+  IonMenuToggle,
+} from "@ionic/vue";
+import { defineComponent, ref } from "vue";
+import { mapGetters } from "vuex";
+
+import { settings, calendar } from "ionicons/icons";
+import { useStore } from "@/store";
+
+export default defineComponent({
+  name: "Menu",
+  components: {
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonTitle,
+    IonLabel,
+    IonList,
+    IonToolbar,
+    IonMenu,
+    IonMenuToggle,
+  },
+  created() {
+    // When open any specific page it should show that page selected
+    // TODO Find a better way
+    this.selectedIndex = this.appPages.findIndex((page) => {
+      return page.url === this.$router.currentRoute.value.path;
+    })
+  },
+  computed: {
+    ...mapGetters({
+      isUserAuthenticated: 'user/isUserAuthenticated'
+    })
+  },
+  watch:{
+    $route (to) {
+      // When logout and login it should point to Oth index
+      // TODO Find a better way
+      if (to.path === '/login') {
+        this.selectedIndex = 0;
+      }
+    },
+  }, 
+  setup() {
+    const store = useStore();
+    const selectedIndex = ref(0);
+    const appPages = [
+      {
+        title: "Purchase order",
+        url: "/purchase-order",
+        iosIcon: calendar,
+        mdIcon: calendar
+      },
+      {
+        title: "Settings",
+        url: "/settings",
+        iosIcon: settings,
+        mdIcon: settings,
+      },
+    ];
+    return {
+      selectedIndex,
+      appPages,
+      calendar,
+      settings,
+      store
+    };
+  },
+});
+</script>
+<style scoped>
+
+ion-menu.md ion-item.selected ion-icon {
+  color: var(--ion-color-secondary);
+}
+
+ion-menu.ios ion-item.selected ion-icon {
+  color: var(--ion-color-secondary);
+}
+
+</style>

src/locales/en.json

@@ -1,30 +1,42 @@
 {
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
+  "Arrival date": "Arrival date",
   "Blank": "Blank",
   "Cancel": "Cancel",
   "Change": "Change",
   "Change time zone": "Change time zone",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Confirm": "Confirm",
   "Dismiss": "Dismiss",
+  "Import": "Import",
   "Instance Url": "Instance Url",
   "Login": "Login",
   "Logout": "Logout",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
+  "Order ID": "Order ID",
+  "Ordered quantity": "Ordered quantity",
   "Password":  "Password",
+  "Purchase order": "Purchase order",
+  "Purchase orders": "Purchase orders",
   "Ready to create an app?": "Ready to create an app?",
+  "REVIEW": "REVIEW",
   "Search time zones": "Search time zones",
   "Select time zone": "Select time zone",
+  "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
   "Something went wrong": "Something went wrong",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
+  "Select CSV": "Select CSV",
   "Settings": "Settings",
+  "Shopify product SKU": "Shopify product SKU",
+  "Shopify product UPC": "Shopify product UPC",
   "Start with Ionic": "Start with Ionic",
   "Store": "Store",
   "store name": "store name",
   "Time zone updated successfully": "Time zone updated successfully",
   "UI Components": "UI Components",
   "Update time zone": "Update time zone",
+  "Upload": "Upload",
   "Username": "Username",
   "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."
 }

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue'
+import PurchaseOrder from '@/views/PurchaseOrder.vue'
 import Login from '@/views/Login.vue'
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
@@ -27,9 +27,9 @@ const routes: Array<RouteRecordRaw> = [
     redirect: '/settings'
   },
   {
-    path: '/home',
-    name: 'Home',
-    component: Home,
+    path: '/purchase-order',
+    name: 'Purchase Order',
+    component: PurchaseOrder,
     beforeEnter: authGuard
   },
   {

src/views/PurchaseOrder.vue

@@ -0,0 +1,81 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/home" />
+        <ion-title>{{ $t("Purchase orders") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <div class="header">
+        <div class="fileInput">
+          <ion-item>
+            <ion-label for="inputFile">{{ $t("Purchase order") }}</ion-label>
+            <ion-input class="ion-hide" :placeholder="$t('Select CSV')" type="file" id="inputFile"/>
+            <ion-button slot="end" fill="outline">{{ $t("Upload") }}</ion-button>
+          </ion-item>
+        </div>
+        <div class="info">
+          <ion-note>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-note>
+          <ion-item>
+              <ion-label>{{ $t("Order ID") }}</ion-label>
+              <ion-select placeholder="Select"></ion-select>
+          </ion-item>
+          <ion-item>
+              <ion-label>{{ $t("Shopify product SKU") }}</ion-label>
+              <ion-select placeholder="Select"></ion-select>
+          </ion-item>
+          <ion-item>
+              <ion-label>{{ $t("Shopify product UPC") }}</ion-label>
+              <ion-select placeholder="Select"></ion-select>
+          </ion-item>
+          <ion-item>
+              <ion-label>{{ $t("Arrival date") }}</ion-label>
+              <ion-select placeholder="Select"></ion-select>
+          </ion-item>
+          <ion-item>
+              <ion-label>{{ $t("Ordered quantity") }}</ion-label>
+              <ion-select placeholder="Select"></ion-select>
+          </ion-item>
+          <ion-button color="dark" fill="solid" disabled="true" expand="block">{{ $t("REVIEW") }}</ion-button>
+        </div>
+      </div>     
+    </ion-content>    
+  </ion-page>
+</template>
+<script lang="ts">
+import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonItem, IonLabel, IonNote, IonInput, IonButton, IonSelect } from "@ionic/vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+    name: " purchase orders",
+    components: {
+      IonPage,
+      IonHeader,
+      IonToolbar,
+      IonBackButton,
+      IonTitle,
+      IonContent,
+      IonItem,
+      IonLabel,
+      IonInput,
+      IonButton,
+      IonSelect,
+      IonNote
+    }
+})
+</script>   
+<style scoped>
+
+.header {
+  max-width: 60%;
+  grid-gap: 16px;
+  padding: 16px;
+  margin-bottom: 16px;
+  margin: auto; 
+}
+
+.info{
+    padding-top: 40px;
+}
+</style>