Implemented: support to display archived orderRoutings and added empt…

…y state for the same

src/components/ArchivedRoutingModal.vue

@@ -0,0 +1,52 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ "Archived Routes" }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="routing in props.archivedRoutings" :key="routing.orderRoutingId">
+        <ion-label>{{ routing.routingName }}</ion-label>
+        <ion-button slot="end" fill="outline" color="medium">{{ "Unarchive" }}</ion-button>
+      </ion-item>
+    </ion-list>
+    <p class="empty-state" v-if="!(props as any).archivedRoutings.length">
+      {{ "No archived routings" }}
+    </p>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps } from "vue";
+
+const props = defineProps({
+  archivedRoutings: {
+    required: true
+  }
+})
+
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+</script>

src/theme/variables.css

@@ -254,6 +254,23 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (prefers-color-scheme: dark) {
   ion-chip > ion-icon {
     color: var(--ion-color-dark);

src/views/BrokeringRoute.vue

@@ -41,7 +41,7 @@
             </ion-reorder-group>
           </ion-list>
           <div>
-            <ion-item lines="none">
+            <ion-item button lines="none" @click="openArchivedRoutingModal()">
               <ion-icon slot="start" :icon="archiveOutline" />
               <ion-label>{{ "Archive" }}</ion-label>
               <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ " rules" }}</ion-badge>
@@ -94,12 +94,13 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, onIonViewWillEnter, alertController } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
+import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
 
 const router = useRouter();
 const store = useStore();
@@ -243,6 +244,14 @@ function doReorder(event: CustomEvent) {
   routingsForReorder.value = updatedSeq
   routingsToUpdate.value = diffSeq
 }
+
+async function openArchivedRoutingModal() {
+  const archivedRoutingModal = await modalController.create({
+    component: ArchivedRoutingModal,
+    componentProps: { archivedRoutings: getArchivedOrderRoutings() }
+  })
+  archivedRoutingModal.present();
+}
 </script>
 
 <style scoped>