Skip to content

Commit f87f99e

Browse files
jasontaylordevjasontaylordev
committed
Refactor AuditList component to include new AuditListItem component
1 parent 0d4d417 commit f87f99e

File tree

2 files changed

+90
-71
lines changed

2 files changed

+90
-71
lines changed

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

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<script setup lang="ts">
2-
import routeLinks from "@/router/routeLinks";
32
import { FieldNames, useAuditStore } from "@/stores/AuditStore";
43
import { storeToRefs } from "pinia";
5-
import Message, { MessageStatus } from "@/resources/Message";
64
import { useRoute, useRouter } from "vue-router";
75
import ResultsCount from "@/components/ResultsCount.vue";
8-
import { formatDotNetTimespan } from "@/composables/formatUtils";
96
import FiltersPanel from "@/components/audit/FiltersPanel.vue";
10-
import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";
7+
import AuditListItem from "@/components/audit/AuditListItem.vue";
118
import { onBeforeMount, onUnmounted, ref, watch } from "vue";
129
import RefreshConfig from "../RefreshConfig.vue";
1310
import useAutoRefresh from "@/composables/autoRefresh";
@@ -37,15 +34,6 @@ onUnmounted(() => {
3734
dataRetriever.updateTimeout(null);
3835
});
3936
40-
function navigateToMessage(message: Message) {
41-
const query = router.currentRoute.value.query;
42-
43-
router.push({
44-
path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
45-
query: { ...query, ...{ back: route.path } },
46-
});
47-
}
48-
4937
const firstLoad = ref(true);
5038
5139
onBeforeMount(() => {
@@ -125,17 +113,7 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
125113
<div class="row results-table">
126114
<LoadingSpinner v-if="firstLoad" />
127115
<template v-for="message in messages" :key="message.id">
128-
<div class="item" @click="navigateToMessage(message)">
129-
<div class="status">
130-
<MessageStatusIcon :message="message" />
131-
</div>
132-
<div class="message-id">{{ message.message_id }}</div>
133-
<div class="message-type">{{ message.message_type }}</div>
134-
<div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(message.time_sent).toLocaleString() }}</div>
135-
<div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(message.critical_time) }}</div>
136-
<div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(message.processing_time) }}</div>
137-
<div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(message.delivery_time) }}</div>
138-
</div>
116+
<AuditListItem :message="message" />
139117
</template>
140118
</div>
141119
</div>
@@ -159,51 +137,4 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
159137
margin-bottom: 5rem;
160138
background-color: #ffffff;
161139
}
162-
.item {
163-
padding: 0.3rem 0.2rem;
164-
border: 1px solid #ffffff;
165-
border-bottom: 1px solid #eee;
166-
display: grid;
167-
grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
168-
grid-template-rows: 1fr 1fr;
169-
gap: 0.375rem;
170-
grid-template-areas:
171-
"status message-type message-type message-type time-sent"
172-
"status message-id processing-time critical-time delivery-time";
173-
}
174-
.item:not(:first-child) {
175-
border-top-color: #eee;
176-
}
177-
.item:hover {
178-
border-color: #00a3c4;
179-
background-color: #edf6f7;
180-
cursor: pointer;
181-
}
182-
.label-name {
183-
margin-right: 0.25rem;
184-
color: #777f7f;
185-
}
186-
.status {
187-
grid-area: status;
188-
}
189-
.message-id {
190-
grid-area: message-id;
191-
}
192-
.time-sent {
193-
grid-area: time-sent;
194-
}
195-
.message-type {
196-
grid-area: message-type;
197-
font-weight: bold;
198-
overflow-wrap: break-word;
199-
}
200-
.processing-time {
201-
grid-area: processing-time;
202-
}
203-
.critical-time {
204-
grid-area: critical-time;
205-
}
206-
.delivery-time {
207-
grid-area: delivery-time;
208-
}
209140
</style>

‎src/Frontend/src/components/audit/AuditListItem.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import routeLinks from "@/router/routeLinks";
3+
import Message, { MessageStatus } from "@/resources/Message";
4+
import { defineProps } from "vue";
5+
import { formatDotNetTimespan } from "@/composables/formatUtils";
6+
import { useRoute, useRouter } from "vue-router";
7+
import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";
8+
9+
const route = useRoute();
10+
const router = useRouter();
11+
12+
const props = defineProps<{
13+
message: Message;
14+
}>();
15+
16+
function navigateToMessage(message: Message) {
17+
const query = router.currentRoute.value.query;
18+
19+
router.push({
20+
path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
21+
query: { ...query, ...{ back: route.path } },
22+
});
23+
}
24+
</script>
25+
26+
<template>
27+
<div class="item" @click="navigateToMessage(props.message)">
28+
<div class="status">
29+
<MessageStatusIcon :message="props.message" />
30+
</div>
31+
<div class="message-id">{{ props.message.message_id }}</div>
32+
<div class="message-type">{{ props.message.message_type }}</div>
33+
<div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
34+
<div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
35+
<div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
36+
<div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
37+
</div>
38+
</template>
39+
40+
<style scoped>
41+
.item {
42+
padding: 0.3rem 0.2rem;
43+
border: 1px solid #ffffff;
44+
border-bottom: 1px solid #eee;
45+
display: grid;
46+
grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
47+
grid-template-rows: 1fr 1fr;
48+
gap: 0.375rem;
49+
grid-template-areas:
50+
"status message-type message-type message-type time-sent"
51+
"status message-id processing-time critical-time delivery-time";
52+
}
53+
.item:not(:first-child) {
54+
border-top-color: #eee;
55+
}
56+
.item:hover {
57+
border-color: #00a3c4;
58+
background-color: #edf6f7;
59+
cursor: pointer;
60+
}
61+
.label-name {
62+
margin-right: 0.25rem;
63+
color: #777f7f;
64+
}
65+
.status {
66+
grid-area: status;
67+
}
68+
.message-id {
69+
grid-area: message-id;
70+
}
71+
.time-sent {
72+
grid-area: time-sent;
73+
}
74+
.message-type {
75+
grid-area: message-type;
76+
font-weight: bold;
77+
overflow-wrap: break-word;
78+
}
79+
.processing-time {
80+
grid-area: processing-time;
81+
}
82+
.critical-time {
83+
grid-area: critical-time;
84+
}
85+
.delivery-time {
86+
grid-area: delivery-time;
87+
}
88+
</style>

0 commit comments

Comments
 (0)