Implemented: UI for order test drive feature(hotwax#254)

ymaheshwari1 · Nov 6, 2024 · 6d4252c · 6d4252c
1 parent 89c281a
commit 6d4252c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -25,6 +25,10 @@
             <ion-icon slot="start" :icon="isRouteNameUpdating ? saveOutline : pencilOutline" />
             {{ isRouteNameUpdating ? translate("Save") : translate("Rename") }}
           </ion-button>
+          <ion-button class="ion-margin-start" color="medium" fill="outline" size="small">
+            <ion-icon slot="start" :icon="speedometerOutline" />
+            {{ translate("Test") }}
+          </ion-button>
           <!-- <ion-button color="medium" fill="outline" size="small">
             <ion-icon slot="start" :icon="copyOutline" />
             {{ translate("Clone") }}
@@ -217,6 +221,10 @@
                       <ion-icon slot="start" :icon="isRuleNameUpdating ? saveOutline : pencilOutline" />
                       {{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}
                     </ion-button>
+                    <ion-button fill="outline" size="small">
+                      <ion-icon slot="start" :icon="speedometerOutline" />
+                      {{ translate("Test") }}
+                    </ion-button>
                     <!-- <ion-button size="small" @click="cloneRule" fill="outline">
                       <ion-icon slot="start" :icon="copyOutline"/>
                       {{ translate("Clone") }}
@@ -400,7 +408,7 @@
 
 <script setup lang="ts">
 import { IonBackButton, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
-import { addCircleOutline, closeCircleOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
+import { addCircleOutline, closeCircleOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, speedometerOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, nextTick, ref } from "vue";
 import store from "@/store";

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
@@ -58,24 +58,40 @@
             </ion-card>
           </section>
           <section class="route-details">
-            <ion-card>
-              <ion-item lines="none">
-                <h2>{{ translate("Description") }}</h2>
-                <ion-button v-if="description || isDescUpdating" fill="clear" slot="end" @click="isDescUpdating ? updateGroupDescription() : editGroupDescription()">
-                  {{ translate(isDescUpdating ? "Save" : "Edit") }}
+            <div>
+              <ion-card>
+                <ion-item lines="none">
+                  <h2>{{ translate("Description") }}</h2>
+                  <ion-button v-if="description || isDescUpdating" fill="clear" slot="end" @click="isDescUpdating ? updateGroupDescription() : editGroupDescription()">
+                    {{ translate(isDescUpdating ? "Save" : "Edit") }}
+                  </ion-button>
+                </ion-item>
+                <ion-item class="ion-margin" v-show="description || isDescUpdating" :color="isDescUpdating ? 'light' : ''" lines="none">
+                  <!-- Used keydown event as ionic provides the keydown event to be overridden -->
+                  <ion-textarea ref="descRef" v-show="isDescUpdating" aria-label="description" v-model="description" @keydown.enter.exact.prevent="updateGroupDescription"></ion-textarea>
+                  <!-- Using regex to replace all \n with br tag to correctly display the user entered description -->
+                  <ion-label v-show="!isDescUpdating" v-html="description.replace(/(?:\n|\n)/g, '<br />')"></ion-label>
+                </ion-item>
+                <ion-button v-if="!description && !isDescUpdating" @click="editGroupDescription()" fill="outline" expand="block">
+                  {{ translate("Add") }}
+                  <ion-icon slot="end" :icon="addCircleOutline" />
                 </ion-button>
-              </ion-item>
-              <ion-item class="ion-margin" v-show="description || isDescUpdating" :color="isDescUpdating ? 'light' : ''" lines="none">
-                <!-- Used keydown event as ionic provides the keydown event to be overridden -->
-                <ion-textarea ref="descRef" v-show="isDescUpdating" aria-label="description" v-model="description" @keydown.enter.exact.prevent="updateGroupDescription"></ion-textarea>
-                <!-- Using regex to replace all \n with br tag to correctly display the user entered description -->
-                <ion-label v-show="!isDescUpdating" v-html="description.replace(/(?:\n|\n)/g, '<br />')"></ion-label>
-              </ion-item>
-              <ion-button v-if="!description && !isDescUpdating" @click="editGroupDescription()" fill="outline" expand="block">
-                {{ translate("Add") }}
-                <ion-icon slot="end" :icon="addCircleOutline" />
-              </ion-button>
-            </ion-card>
+              </ion-card>
+              <ion-card>
+                <ion-item lines="none">
+                  <h2>{{ translate("Test drive") }}</h2>
+                </ion-item>
+                <ion-item class="ion-margin" lines="none">
+                  <ion-label>
+                    {{ translate("Test drive your brokering run to see how specific orders are routed. Try different kind of orders to quickly verify if all flows are working as expected.") }}
+                  </ion-label>
+                </ion-item>
+                <ion-button fill="outline" expand="block">
+                  <ion-icon slot="start" :icon="speedometerOutline" />
+                  {{ translate("Test drive") }}
+                </ion-button>
+              </ion-card>
+            </div>
             <div>
               <ion-card>
                 <ion-item lines="none">
@@ -206,7 +222,7 @@
 
 <script setup lang="ts">
 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 { addCircleOutline, addOutline, archiveOutline, copyOutline, flashOutline, listOutline, pencilOutline, pulseOutline, refreshOutline, reorderTwoOutline, saveOutline, speedometerOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, nextTick, ref } from "vue";