From 4db87082a12fb0d38379cb704c0331f01823a8d0 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Sun, 31 Dec 2023 21:31:55 +0530
Subject: [PATCH] Implmented: UI for brokering query page(#4)

---
 src/App.vue                  |  93 ++++++++++-----------
 src/components/RouteMenu.vue | 158 +++++++++++++++++++++++++++++++++++
 src/router/index.ts          |   4 +
 src/views/BrokeringQuery.vue | 112 +++++++++++++++++++++++++
 src/views/BrokeringRoute.vue |  17 ++--
 5 files changed, 323 insertions(+), 61 deletions(-)
 create mode 100644 src/components/RouteMenu.vue
 create mode 100644 src/views/BrokeringQuery.vue

diff --git a/src/App.vue b/src/App.vue
index 4b8f16d..b3e60e0 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/RouteMenu.vue b/src/components/RouteMenu.vue
new file mode 100644
index 0000000..da36241
--- /dev/null
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 249fffa..2005626 100644
--- a/src/router/index.ts
+++ b/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')
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
new file mode 100644
index 0000000..bdd864c
--- /dev/null
+++ b/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>
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 61ac34d..f8bc40f 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -7,7 +7,7 @@
     </ion-header>
 
     <ion-content>
-      <section>
+      <section class="ion-padding">
         <main>
           <ion-item lines="none">
             {{ "Description" }}
@@ -15,9 +15,11 @@
               {{ "Edit" }}
             </ion-button>
           </ion-item>
-          <ion-label>
-            {{ "This is what a long description of the routing rule that the user has created looks like. This also includes an edit button where the user can edit their description inline" }}
-          </ion-label>
+          <ion-item lines="none">
+            <ion-label>
+              {{ "This is what a long description of the routing rule that the user has created looks like. This also includes an edit button where the user can edit their description inline" }}
+            </ion-label>
+          </ion-item>
         </main>
         <aside>
           <ion-card>
@@ -55,17 +57,12 @@ import { timeOutline, timerOutline } from "ionicons/icons"
 </script>
 
 <style scoped>
-ion-content {
-  display: grid;
-  grid-template-rows: repeat(2, 1fr);
-}
-
 section {
   display: flex;
   justify-content: space-between;
 }
 
 section > * {
-  max-width: 50ch;
+  min-width: 40ch;
 }
 </style>