Improved: UI to add empty states for runs, routes and rules page(#142)

src/locales/en.json

@@ -45,7 +45,7 @@
   "Failed to update group information": "Failed to update group information",
   "Failed to schedule service": "Failed to schedule service",
   "Fetching filters and inventory rules": "Fetching filters and inventory rules",
-  "Fetching groups": "Fetching groups",
+  "Fetching runs": "Fetching runs",
   "Fetching rules": "Fetching rules",
   "Fetching time zones": "Fetching time zones",
   "Filters": "Filters",

src/views/BrokeringRoute.vue

@@ -11,7 +11,7 @@
     <ion-content>
       <div>
         <div>
-          <ion-list>
+          <ion-list v-if="routingsForReorder.length">
             <ion-list-header>
               <ion-label>{{ translate("Order batches") }}</ion-label>
               <ion-button color="primary" fill="clear" @click="createOrderRoute">
@@ -53,6 +53,13 @@
               </ion-card>
             </ion-reorder-group>
           </ion-list>
+          <div class="empty-state">
+            <p>{{ translate("Create order batches for this Brokering Run to execute.") }}</p>
+            <ion-button @click="createOrderRoute">
+              <ion-icon slot="start" :icon="addOutline"></ion-icon>
+              {{ translate("Create order batch") }}
+            </ion-button>
+          </div>
           <div>
             <ion-item button lines="none" @click="openArchivedRoutingModal()">
               <ion-icon slot="start" :icon="archiveOutline" />
@@ -152,7 +159,7 @@
 
 <script setup lang="ts">
 import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, copyOutline, refreshOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { addCircleOutline, addOutline, archiveOutline, copyOutline, refreshOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, nextTick, ref } from "vue";

src/views/BrokeringRuns.vue

@@ -30,7 +30,7 @@
         <main v-if="isLoading">
           <ion-item lines="none">
             <ion-spinner name="crescent" slot="start" />
-            {{ translate("Fetching groups") }}
+            {{ translate("Fetching runs") }}
           </ion-item>
         </main>
         <main v-else-if="brokeringGroups.length">
@@ -67,8 +67,12 @@
             </ion-card>
           </section>
         </main>
-        <main v-else>
-          {{ translate("No runs scheduled") }}
+        <main class="empty-state" v-else>
+          <img src="../assets/images/BrokeringRunsEmptyState.png" />
+          <ion-button @click="addNewRun">
+            {{ translate("Create brokering run") }}
+            <ion-icon slot="end" :icon="arrowForwardOutline"></ion-icon>
+          </ion-button>
         </main>
       </div>
     </ion-content>
@@ -81,7 +85,7 @@ import { translate } from "@/i18n";
 import { Group } from "@/types";
 import { getDateAndTime, showToast } from "@/utils";
 import { IonBadge, IonButton, IonButtons, IonCard, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
-import { addOutline } from "ionicons/icons"
+import { addOutline, arrowForwardOutline } from "ionicons/icons"
 import { DateTime } from "luxon";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -170,6 +174,11 @@ async function redirect(group: Group) {
 </script>
 
 <style scoped>
+.empty-state {
+  align-items: center;
+  gap: 0px;
+}
+
 @media (min-width: 991px) {
   main {
     display: flex;