Implemented: initial UI for the app(#4)

src/App.vue

@@ -1,63 +1,56 @@
 <template>
   <ion-app>
-    <ion-router-outlet />
+    <ion-split-pane content-id="main-content">
+      <RouteMenu v-if="!isOnBrokeringRunPage"/>
+      <ion-router-outlet id="main-content" />
+    </ion-split-pane>
   </ion-app>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { IonApp, IonRouterOutlet, loadingController } from '@ionic/vue';
-import { useStore } from "./store";
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { IonApp, IonRouterOutlet, IonSplitPane, loadingController, onIonViewWillEnter } from '@ionic/vue';
 import emitter from "@/event-bus"
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  },
-  data() {
-    return {
-      loader: null as any
-    }
-  },
-  methods: {
-    async presentLoader() {
-      if (!this.loader) {
-        this.loader = await loadingController
-          .create({
-            message: this.$t("Click the backdrop to dismiss."),
-            translucent: true,
-            backdropDismiss: true
-          });
-      }
-      this.loader.present();
-    },
-    dismissLoader() {
-      if (this.loader) {
-        this.loader.dismiss();
-        this.loader = null as any;
-      }
-    }
-  },
-  async mounted() {
-    this.loader = await loadingController
+import RouteMenu from "@/components/RouteMenu.vue"
+import { useRouter } from 'vue-router';
+
+const loader = ref(null) as any
+const router = useRouter();
+
+async function presentLoader(message = "Click the backdrop to dismiss.") {
+  if (!loader.value) {
+    loader.value = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message,
         translucent: true,
         backdropDismiss: true
       });
-    emitter.on('presentLoader', this.presentLoader);
-    emitter.on('dismissLoader', this.dismissLoader);
-  },
-  unmounted() {
-    emitter.off('presentLoader', this.presentLoader);
-    emitter.off('dismissLoader', this.dismissLoader);
-  },
-  setup(){
-    const store = useStore();
-    return {
-      store,
-    }
-  },
-});
+  }
+  loader.value.present();
+}
+
+function dismissLoader() {
+  if (loader.value) {
+    loader.value.dismiss();
+    loader.value = null as any;
+  }
+}
+
+const isOnBrokeringRunPage = computed(() => router.currentRoute.value.fullPath === '/tabs/brokering')
+
+onMounted(async () => {
+  loader.value = await loadingController
+    .create({
+      message: "Click the backdrop to dismiss.",
+      translucent: true,
+      backdropDismiss: true
+    });
+  emitter.on('presentLoader', presentLoader);
+  emitter.on('dismissLoader', dismissLoader);
+})
+
+onUnmounted(() => {
+  emitter.off('presentLoader', presentLoader);
+  emitter.off('dismissLoader', dismissLoader);
+})
 </script>

src/components/RouteMenu.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="route-menu">
+    <div>
+      <ion-list>
+        <ion-list-header ref="listHeader">
+          <ion-label>{{ "Order batches" }}</ion-label>
+          <ion-button color="primary" fill="clear">
+            {{ "New" }}
+            <ion-icon :icon="addCircleOutline" />
+          </ion-button>
+        </ion-list-header>
+        <ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click.prevent="animate">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip>{{ `${card}/4` }}</ion-chip>
+          </ion-item>
+          <ion-item v-show="isOnBrokeringRulePage" ref="item">
+            <ion-badge>{{ 'BADGE' }}</ion-badge>
+            <ion-button fill="clear" color="medium" slot="end">
+              {{ 'Archive' }}
+            </ion-button>
+          </ion-item>
+        </ion-card>
+      </ion-list>
+      <ion-footer v-show="isOnBrokeringRulePage">
+        <ion-toolbar>
+          <ion-item lines="none">
+            <ion-buttons>
+              <ion-button>
+                <ion-icon :icon="archiveOutline"/>
+                {{ "Archive" }}
+              </ion-button>
+            </ion-buttons>
+            <ion-badge slot="end">
+              {{ "4 rules" }}
+            </ion-badge>
+          </ion-item>
+        </ion-toolbar>
+      </ion-footer>
+      <ion-list v-show="!isOnBrokeringRulePage">
+        <ion-item-group>
+          <ion-item-divider color="medium">
+            <ion-label>{{ 'Filters' }}</ion-label>
+          </ion-item-divider>
+          <ion-item>
+            <ion-select label="Queue" value="Brokering Queue">
+              <ion-select-option value="Brokering Queue">{{ 'Brokering Queue' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Shipping method" value="Next Day">
+              <ion-select-option value="Next Day">{{ 'Next Day' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Order priority" value="High">
+              <ion-select-option value="High">{{ 'High' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ 'Promise date' }}</ion-label>
+            <ion-chip>{{ 'select date' }}</ion-chip>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Queue" value="Brokering Queue">
+              <ion-select-option value="Brokering Queue">{{ 'Brokering Queue' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-item-group>
+      </ion-list>
+      <ion-list v-show="!isOnBrokeringRulePage">
+        <ion-item-group>
+          <ion-item-divider color="medium">
+            <ion-label>{{ 'Sort' }}</ion-label>
+          </ion-item-divider>
+          <ion-reorder-group :disabled="false">
+            <ion-item>
+              <ion-label>{{ 'Ship by' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Ship after' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Order date' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Shipping method' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+          </ion-reorder-group>
+        </ion-item-group>
+      </ion-list>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToolbar, createAnimation } from '@ionic/vue';
+import { addCircleOutline, archiveOutline } from "ionicons/icons";
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const cards = ref([])
+const listHeader = ref(null) as any
+const item = ref(null) as any
+const moveTop = ref(0)
+
+const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
+
+function animate(e: Event) {
+  if(isOnBrokeringRulePage.value) {
+    routeForward(e)
+  } else {
+    routeBackward(e)
+  }
+}
+
+function routeForward(e: Event) {
+  const element = e.currentTarget as HTMLElement
+  const hideCards = cards.value.map((card: any) => {
+    if(element != card.$el) {
+      return card.$el
+    }
+  }).filter(card => card)
+
+
+  createAnimation()
+    .addElement(listHeader.value.$el)
+    .addElement(item.value.$el)
+    .addElement(hideCards)
+    .duration(1000)
+    .fromTo('opacity', '1', '0')
+    .to('display', 'none').play()
+
+  moveTop.value = element.getBoundingClientRect().top
+
+  createAnimation()
+    .addElement(element)
+    .duration(1000)
+    .fromTo('transform', 'translateY(0px)', `translateY(-${moveTop.value}px)`).play()
+
+  router.push('query')
+}
+
+function routeBackward(e: Event) {
+  const showCards = cards.value.map((card: any) => {
+    if(e.currentTarget != card.$el) {
+      return card.$el
+    }
+  }).filter(card => card)
+  const element = e.currentTarget as HTMLElement
+
+  createAnimation()
+  .addElement(listHeader.value.$el)
+  .addElement(item.value.$el)
+  .addElement(showCards)
+  .duration(1000)
+  .fromTo('opacity', '0', '1')
+  .to('display', 'block').play()
+
+  createAnimation()
+    .addElement(element)
+    .duration(1000)
+    .fromTo('transform', `translateY(-${moveTop.value}px)`, 'translateY(0px)').play();
+
+  router.go(-1)
+}
+
+</script>
+
+<style scoped>
+.route-menu > div {
+  width: 100%;
+}
+</style>

src/router/index.ts

@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue'
 import Login from '@/views/Login.vue'
-import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import Tabs from '@/views/Tabs.vue'
 
@@ -25,49 +23,41 @@ const loginGuard = (to: any, from: any, next: any) => {
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/home'
+    redirect: '/tabs/brokering'
   },
   {
     path: '/tabs',
     component: Tabs,
     children: [
       {
         path: '',
-        redirect: '/home'
+        redirect: '/brokering'
       },
       {
-        path: 'home',
-        component: () => import('@/views/Home.vue')
+        path: 'brokering',
+        component: () => import('@/views/BrokeringRuns.vue')
+      },
+      {
+        path: 'brokering/route',
+        component: () => import('@/views/BrokeringRoute.vue')
+      },
+      {
+        path: 'brokering/query',
+        component: () => import('@/views/BrokeringQuery.vue')
       },
       {
         path: 'settings',
         component: () => import('@/views/Settings.vue')
-      },
+      }
     ],
     beforeEnter: authGuard
   },
-  {
-    path: '/',
-    redirect: '/settings'
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: Home,
-    beforeEnter: authGuard
-  },
   {
     path: '/login',
     name: 'Login',
     component: Login,
     beforeEnter: loginGuard
   },
-  {
-    path: "/settings",
-    name: "Settings",
-    component: Settings,
-    beforeEnter: authGuard
-  }
 ]
 
 const router = createRouter({