Implmented: UI for brokering query page(#4)

src/App.vue

@@ -1,65 +1,56 @@
 <template>
   <ion-app>
     <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, IonSplitPane, 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,158 @@
+<template>
+  <div class="route-menu">
+    <div v-if="isOnBrokeringRuleRoute">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>{{ "Order batches" }}</ion-label>
+          <ion-button color="primary" fill="clear">
+            {{ "New" }}
+            <ion-icon :icon="addCircleOutline" />
+          </ion-button>
+        </ion-list-header>
+        <ion-card ref="card" @click="router.push('query')">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip >{{ '1/4' }}</ion-chip>
+          </ion-item>
+          <ion-item ref="item">
+            <ion-badge>{{ 'BADGE' }}</ion-badge>
+            <ion-button fill="clear" color="medium" slot="end">
+              {{ 'Archive' }}
+            </ion-button>
+          </ion-item>
+        </ion-card>
+        <ion-card ref="card" @click="router.push('query')">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip >{{ '2/4' }}</ion-chip>
+          </ion-item>
+          <ion-item ref="item">
+            <ion-badge>{{ 'BADGE' }}</ion-badge>
+            <ion-button fill="clear" color="medium" slot="end">
+              {{ 'Archive' }}
+            </ion-button>
+          </ion-item>
+        </ion-card>
+        <ion-card ref="card" @click="router.push('query')">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip >{{ '3/4' }}</ion-chip>
+          </ion-item>
+          <ion-item ref="item">
+            <ion-badge>{{ 'BADGE' }}</ion-badge>
+            <ion-button fill="clear" color="medium" slot="end">
+              {{ 'Archive' }}
+            </ion-button>
+          </ion-item>
+        </ion-card>
+        <ion-card ref="card" @click="router.push('query')">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip >{{ '4/4' }}</ion-chip>
+          </ion-item>
+          <ion-item 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>
+        <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>
+    </div>
+    <div v-else>
+      <ion-list>
+        <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>
+        <ion-item-group>
+          <ion-item-divider color="medium">
+            <ion-label>{{ 'Sort' }}</ion-label>
+          </ion-item-divider>
+          <ion-item>
+            <ion-label>{{ 'Ship by' }}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ 'Ship after' }}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ 'Order date' }}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ 'Shipping method' }}</ion-label>
+          </ion-item>
+        </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, IonSelect, IonSelectOption, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
+import { addCircleOutline, archiveOutline } from "ionicons/icons";
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const isOnBrokeringRuleRoute = ref(true)
+const router = useRouter();
+
+onIonViewWillEnter(() => {
+  isOnBrokeringRuleRoute.value = router.currentRoute.value.fullPath.includes('/brokering/route')
+})
+</script>
+
+<style scoped>
+.route-menu > div {
+  width: 100%;
+}
+</style>

src/router/index.ts

@@ -41,6 +41,10 @@ const routes: Array<RouteRecordRaw> = [
         path: 'brokering/route',
         component: () => import('@/views/BrokeringRoute.vue')
       },
+      {
+        path: 'brokering/query',
+        component: () => import('@/views/BrokeringQuery.vue')
+      },
       {
         path: 'settings',
         component: () => import('@/views/Settings.vue')

src/views/BrokeringQuery.vue

@@ -0,0 +1,112 @@
+<template>
+  <ion-page>
+    <ion-split-pane content-id="query-content">
+      <ion-list>
+        <ion-item>
+          <ion-label>{{ "Warehouse only" }}</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>{{ "Warehouse and stores" }}</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>{{ "Any Location" }}</ion-label>
+        </ion-item>
+      </ion-list>
+      <ion-content id="query-content">
+        <section class="filters">
+          <ion-card>
+            <ion-item>
+              <ion-icon slot="start" :icon="filterOutline"/>
+              <ion-label>{{ "Filters" }}</ion-label>
+              <ion-icon :icon="optionsOutline"/>
+            </ion-item>
+            <ion-item>
+              <ion-select label="Group" value="East coast stores">
+                <ion-select-option value="East coast stores">{{ 'East coast stores' }}</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select label="Proximity" value="Zone 1">
+                <ion-select-option value="Zone 1">{{ 'Zone 1' }}</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Brokering safety stock" }}</ion-label>
+              <ion-chip>{{ "3" }}</ion-chip>
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-item>
+              <ion-icon :icon="swapVerticalOutline"/>
+              <ion-label>{{ "Sort" }}</ion-label>
+              <ion-icon :icon="optionsOutline"/>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Proximity" }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Order limit" }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Inventory balance" }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Custom Sequence" }}</ion-label>
+            </ion-item>
+          </ion-card>
+        </section>
+        <section class="actions">
+          <h2 class="ion-padding-start">{{ "Actions" }}</h2>
+          <ion-card>
+            <ion-item lines="none">
+              <ion-label>{{ "Fully available" }}</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-chip>{{ "Next rule" }}</ion-chip>
+              <ion-chip>{{ "Move to queue" }}</ion-chip>
+              <ion-chip>
+                <ion-icon :icon="checkMarkOutline"/>
+                {{ "Auto cancel days: 10" }}
+              </ion-chip>
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-item lines="none">
+              <ion-label>{{ "Partially available" }}</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-chip>
+                <ion-icon :icon="checkMarkOutline"/>
+                {{ "Allocate partial" }}
+              </ion-chip>
+              <ion-chip>{{ "Next rule" }}</ion-chip>
+              <ion-chip>{{ "Move to queue" }}</ion-chip>
+              <ion-chip>
+                <ion-icon :icon="checkMarkOutline"/>
+                {{ "Auto cancel days: 10" }}
+              </ion-chip>
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-item lines="none">
+              <ion-label>{{ "Not available" }}</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-chip>{{ "Move to queue" }}</ion-chip>
+              <ion-chip>{{ "Next rule" }}</ion-chip>
+              <ion-chip>
+                <ion-icon :icon="checkMarkOutline"/>
+                {{ "Auto cancel days: 10" }}
+              </ion-chip>
+            </ion-item>
+          </ion-card>
+        </section>
+      </ion-content>
+    </ion-split-pane>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
+import { checkMarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
+</script>