From 6923f9dc7c65cecbb55726d1a5818e98c7dcfcf6 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jul 2024 14:37:52 +0530
Subject: [PATCH] Improved: UI as per the suggested changes(#243)

Changed dynamic header on routing and rule page to static page title
Changed color for draft status badge to medium
Fixed issue of singular/plural when displaying archived routings
Used ion-card specific syntax when displaying routing title and id
---
 src/locales/en.json          |  3 +++
 src/views/BrokeringQuery.vue |  4 ++--
 src/views/BrokeringRoute.vue | 20 ++++++++++----------
 src/views/BrokeringRuns.vue  |  2 +-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 34b51d6..3c08e28 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -122,8 +122,10 @@
   "Queue": "Queue",
   "queue": "queue",
   "Rename": "Rename",
+  "Routing": "Routing",
   "Routing history": "Routing history",
   "Routing group information updated": "Routing group information updated",
+  "Routing Run": "Routing Run",
   "Rule Status": "Rule Status",
   "Rule name": "Rule name",
   "Run Now": "Run Now",
@@ -131,6 +133,7 @@
   "Run time": "Run time",
   "Running this schedule now will not replace this schedule. A copy of this schedule will be created and run immediately. You may not be able to reverse this action.": "Running this schedule now will not replace this schedule. A copy of this schedule will be created and run immediately. You may not be able to reverse this action.",
   "route name": "route name",
+  "rule": " rule",
   "rules": " rules",
   "run name": "run name",
   "Sales Channel": "Sales Channel",
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index ee05742..03e9eb3 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -5,12 +5,12 @@
         <ion-buttons slot="start">
           <ion-back-button :default-href="`/tabs/brokering/${currentRoutingGroup.routingGroupId}/routes`" />
         </ion-buttons>
-        <ion-title>{{ currentRouting.routingName }}</ion-title>
+        <ion-title>{{ translate("Routing") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <main>
-        <section id="order-filters" class="menu">
+        <section id="order-filters" class="menu ion-padding-top">
           <ion-item lines="none">
             <ion-label>
               <h1 v-show="!isRouteNameUpdating">{{ currentRouting.routingName }}</h1>
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 6b074b9..87560e7 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -5,7 +5,7 @@
         <ion-buttons slot="start">
           <ion-back-button default-href="/tabs/brokering" />
         </ion-buttons>
-        <ion-title>{{ groupName }}</ion-title>
+        <ion-title>{{ translate("Routing Run") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -13,14 +13,14 @@
         <main>
           <section class="route-details">
             <ion-card class="info">
-              <div class="ion-padding">
-                <ion-label>
-                  <h1 v-show="!isGroupNameUpdating">{{ groupName }}</h1>
+              <div>
+                <ion-card-header>
+                  <ion-card-title v-show="!isGroupNameUpdating">{{ groupName }}</ion-card-title>
                   <!-- Added class as we can't change the background of ion-input with css property, and we need to change the background to show the user that now this value is editable -->
                   <ion-input ref="groupNameRef" :class="isGroupNameUpdating ? 'name' : ''" v-show="isGroupNameUpdating" aria-label="group name" v-model="groupName"></ion-input>
-                  <p>{{ currentRoutingGroup.routingGroupId }}</p>
-                </ion-label>
-                <div>
+                  <ion-card-subtitle>{{ currentRoutingGroup.routingGroupId }}</ion-card-subtitle>
+                </ion-card-header>
+                <div class="ion-padding">
                   <ion-button v-show="!isGroupNameUpdating" fill="outline" size="small" @click="editGroupName()">
                     <ion-icon slot="start" :icon="pencilOutline" />
                     {{ translate("Rename") }}
@@ -157,7 +157,7 @@
                     </ion-chip>
                   </ion-item>
                   <ion-item lines="none">
-                    <ion-badge class="pointer" :color="routing.statusId === 'ROUTING_ACTIVE' ? 'success' : ''" @click.stop="updateOrderRouting(routing, 'statusId', `${routing.statusId === 'ROUTING_DRAFT' ? 'ROUTING_ACTIVE' : 'ROUTING_DRAFT'}`)">{{ getStatusDesc(routing.statusId) }}</ion-badge>
+                    <ion-badge class="pointer" :color="routing.statusId === 'ROUTING_ACTIVE' ? 'success' : 'medium'" @click.stop="updateOrderRouting(routing, 'statusId', `${routing.statusId === 'ROUTING_DRAFT' ? 'ROUTING_ACTIVE' : 'ROUTING_DRAFT'}`)">{{ getStatusDesc(routing.statusId) }}</ion-badge>
                     <div slot="end">
                       <ion-button fill="clear" color="medium" @click.stop="cloneRouting(routing)">
                         <ion-icon slot="icon-only" :icon="copyOutline" />
@@ -173,7 +173,7 @@
             <ion-card v-if="getArchivedOrderRoutings().length">
               <ion-item button lines="none" @click="openArchivedRoutingModal()">
                 <ion-label>{{ translate("Archived") }}</ion-label>
-                <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ translate("rules") }}</ion-badge>
+                <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ translate(getArchivedOrderRoutings().length > 1 ? "rules" : "rule") }}</ion-badge>
               </ion-item>
             </ion-card>
           </ion-list>
@@ -201,7 +201,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
 import { addCircleOutline, addOutline, archiveOutline, copyOutline, flashOutline, listOutline, pencilOutline, pulseOutline, refreshOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { useStore } from "vuex";
diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
index 48efad5..af06157 100644
--- a/src/views/BrokeringRuns.vue
+++ b/src/views/BrokeringRuns.vue
@@ -59,7 +59,7 @@
                 <ion-label>
                   {{ group.schedule ? getDateAndTime(group.schedule.nextExecutionDateTime) : "-" }}
                 </ion-label>
-                <ion-badge slot="end" color="dark">{{ translate("Draft") }}</ion-badge>
+                <ion-badge slot="end" color="medium">{{ translate("Draft") }}</ion-badge>
               </ion-item>
               <ion-item lines="none">
                 {{ `Updated at ${getDateAndTime(group.lastUpdatedStamp)}` }}