Modifying view to use store

More changes

Author: johnsimons

src/Frontend/public/js/app.constants.js

@@ -4,4 +4,5 @@ window.defaultConfig = {
   service_control_url: 'http://localhost:33333/api/',
   monitoring_urls: ['http://localhost:33633/'],
   showPendingRetry: false,
+  showAllMessages: true,
 };

src/Frontend/src/components/CopyToClipboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tippy, TippyComponent } from "vue-tippy";
-import { useTemplateRef } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,14 +11,16 @@ const props = withDefaults(
 );
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
-let timeoutId: number;
+const timeoutId = ref(0);
 
 async function copyToClipboard() {
   await navigator.clipboard.writeText(props.value);
-  window.clearTimeout(timeoutId);
+
   tippyRef.value?.show();
-  timeoutId = window.setTimeout(() => tippyRef.value?.hide(), 3000);
+  timeoutId.value = window.setTimeout(() => tippyRef.value?.hide(), 3000);
 }
+
+watch(timeoutId, (_, previousTimeoutId) => window.clearTimeout(previousTimeoutId));
 </script>
 
 <template>

src/Frontend/src/components/EventLogItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../components/TimeSince.vue";
 import type EventLogItem from "@/resources/EventLogItem";
 // eslint-disable-next-line no-duplicate-imports
@@ -8,7 +8,6 @@ import routeLinks from "@/router/routeLinks";
 
 defineProps<{ eventLogItem: EventLogItem }>();
 const router = useRouter();
-const route = useRoute();
 
 function navigateToEvent(eventLogItem: EventLogItem) {
   switch (eventLogItem.category) {
@@ -27,7 +26,7 @@ function navigateToEvent(eventLogItem: EventLogItem) {
     case "MessageFailures":
       if (eventLogItem.related_to?.length && eventLogItem.related_to[0].search("message") > 0) {
         const messageId = eventLogItem.related_to[0].substring(9);
-        router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+        router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
       } else {
         router.push(routeLinks.failedMessage.root);
       }

src/Frontend/src/components/LoadingSpinner.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+</template>

src/Frontend/src/components/audit/AuditList.vue

@@ -101,7 +101,15 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.message.link(message.id), query: { back: route.path } }">
+              <RouterLink
+                v-if="message.status === MessageStatus.Successful"
+                class="hackToPreventSafariFromShowingTooltip"
+                aria-label="details-link"
+                :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id), query: { back: route.path } }"
+              >
+                {{ message.message_id }}
+              </RouterLink>
+              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">
                 {{ message.message_id }}
               </RouterLink>
             </tippy>

src/Frontend/src/components/failedmessages/EditRetryDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "../../composables/serviceFailedMessage";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage.ts";
 import MessageHeader from "./EditMessageHeader.vue";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
@@ -65,11 +65,7 @@ watch(messageBody, (newValue) => {
   if (newValue !== origMessageBody) {
     localMessage.value.isBodyChanged = true;
   }
-  if (newValue === "") {
-    localMessage.value.isBodyEmpty = true;
-  } else {
-    localMessage.value.isBodyEmpty = false;
-  }
+  localMessage.value.isBodyEmpty = newValue === "";
 });
 
 function close() {