Skip to content

Commit 97af90f

Browse files
johnsimonsjohnsimons
committed
Fixing formatting for filters
1 parent 66cde35 commit 97af90f

File tree

4 files changed

+122
-83
lines changed

4 files changed

+122
-83
lines changed

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

Lines changed: 3 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,15 @@ import { storeToRefs } from "pinia";
55
import Message, { MessageStatus } from "@/resources/Message";
66
import moment from "moment";
77
import { useRoute } from "vue-router";
8-
import FilterInput from "@/components/FilterInput.vue";
98
import ResultsCount from "@/components/ResultsCount.vue";
10-
import DropDown from "@/components/DropDown.vue";
11-
import { computed, ref, watch } from "vue";
129
import { dotNetTimespanToMilliseconds, formatDotNetTimespan, formatTypeName } from "@/composables/formatUtils.ts";
13-
import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
1410
import "@vuepic/vue-datepicker/dist/main.css";
15-
import DatePickerRange from "@/components/audit/DatePickerRange.vue";
11+
import FiltersPanel from "@/components/audit/FiltersPanel.vue";
1612
1713
const store = useAuditStore();
18-
const { messages, sortBy, totalCount, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
14+
const { messages, totalCount } = storeToRefs(store);
1915
const route = useRoute();
2016
21-
const endpointNames = computed(() => {
22-
return [...new Set(endpoints.value.map((endpoint) => endpoint.name))];
23-
});
24-
25-
const sortByItems = [
26-
{ text: "Latest sent", value: "time_sent,desc" },
27-
{ text: "Oldest sent", value: "time_sent,asc" },
28-
{ text: "Fastest processing", value: "processing_time,asc" },
29-
{ text: "Slowest processing", value: "processing_time,desc" },
30-
];
31-
const numberOfItemsPerPage = ["50", "100", "250", "500"];
32-
const selectedSortByItem = computed(() => sortByItems.find((item) => item.value === `${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`));
33-
const selectedItemsPerPage = ref(itemsPerPage.value.toString());
34-
35-
watch(selectedItemsPerPage, (newValue) => {
36-
itemsPerPage.value = Number(newValue);
37-
});
38-
39-
function setSortBy(item: { text: string; value: string }) {
40-
const strings = item.value.split(",");
41-
sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
42-
}
43-
4417
function statusToName(messageStatus: MessageStatus) {
4518
switch (messageStatus) {
4619
case MessageStatus.Successful:
@@ -99,23 +72,7 @@ function hasWarning(message: Message) {
9972
<template>
10073
<div>
10174
<div class="row">
102-
<div class="filters">
103-
<div class="text-search-container">
104-
<FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" />
105-
</div>
106-
<div>
107-
<ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" label="Show" default-empty-text="Any" :show-clear="false" :show-filter="false" />
108-
</div>
109-
<div>
110-
<ListFilterSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
111-
</div>
112-
<div>
113-
<DatePickerRange v-model="dateRange" />
114-
</div>
115-
<div>
116-
<DropDown label="Sort by" :callback="setSortBy" :select-item="selectedSortByItem" :items="sortByItems" />
117-
</div>
118-
</div>
75+
<FiltersPanel />
11976
</div>
12077
<div class="row">
12178
<ResultsCount :displayed="messages.length" :total="totalCount" />
@@ -165,20 +122,6 @@ function hasWarning(message: Message) {
165122
margin-bottom: 5rem;
166123
}
167124
168-
.text-search-container {
169-
width: 25rem;
170-
}
171-
172-
.filters {
173-
background-color: #f3f3f3;
174-
margin-top: 0.3125rem;
175-
border: #8c8c8c 1px solid;
176-
border-radius: 3px;
177-
padding: 0.3125rem;
178-
display: flex;
179-
gap: 1.1rem;
180-
}
181-
182125
.status {
183126
width: 5em;
184127
text-align: center;

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

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,11 @@ watch(internalModel, () => {
1717
</script>
1818

1919
<template>
20-
<div class="date-picker-range">
21-
<label>Dates:</label>
22-
<VueDatePicker v-model="internalModel" :range="{ partialRange: false }" :enable-seconds="true" :max-date="new Date()">
23-
<template #trigger>
24-
<a class="triggerLink">{{ displayDataRange }}</a>
25-
</template>
26-
</VueDatePicker>
27-
</div>
20+
<VueDatePicker v-model="internalModel" :range="{ partialRange: false }" :enable-seconds="true" :max-date="new Date()">
21+
<template #trigger>
22+
<button type="button" class="btn btn-dropdown dropdown-toggle">
23+
{{ displayDataRange }}
24+
</button>
25+
</template>
26+
</VueDatePicker>
2827
</template>
29-
30-
<style scoped>
31-
.triggerLink {
32-
margin-left: 0.3em;
33-
cursor: pointer;
34-
}
35-
.date-picker-range {
36-
display: flex;
37-
align-items: center;
38-
margin-left: 1em;
39-
}
40-
</style>

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<script setup lang="ts">
2+
import FilterInput from "@/components/FilterInput.vue";
3+
import { storeToRefs } from "pinia";
4+
import { useAuditStore } from "@/stores/AuditStore.ts";
5+
import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
6+
import { computed, ref, watch } from "vue";
7+
import DatePickerRange from "@/components/audit/DatePickerRange.vue";
8+
9+
const store = useAuditStore();
10+
const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
11+
const endpointNames = computed(() => {
12+
return [...new Set(endpoints.value.map((endpoint) => endpoint.name))];
13+
});
14+
const sortByItemsMap = new Map([
15+
["Latest sent", "time_sent,desc"],
16+
["Oldest sent", "time_sent,asc"],
17+
["Fastest processing", "processing_time,asc"],
18+
["Slowest processing", "processing_time,desc"],
19+
]);
20+
const numberOfItemsPerPage = ["50", "100", "250", "500"];
21+
const sortByItems = computed(() => [...sortByItemsMap.keys()]);
22+
23+
function findKeyByValue(searchValue: string) {
24+
for (const [key, value] of sortByItemsMap.entries()) {
25+
if (value === searchValue) {
26+
return key;
27+
}
28+
}
29+
return "";
30+
}
31+
32+
const r = `${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`;
33+
34+
const selectedSortByItem = ref(findKeyByValue(r)); //computed(() => sortByItemsMap.get(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`) || "time_sent,desc");
35+
const selectedItemsPerPage = ref(itemsPerPage.value.toString());
36+
37+
watch(selectedItemsPerPage, (newValue) => {
38+
itemsPerPage.value = Number(newValue);
39+
});
40+
watch(selectedSortByItem, (newValue) => {
41+
const item = sortByItemsMap.get(newValue);
42+
if (item) {
43+
const strings = item.split(",");
44+
sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
45+
} else {
46+
sortBy.value = { isAscending: true, property: "time_sent" };
47+
}
48+
});
49+
</script>
50+
51+
<template>
52+
<div class="filters">
53+
<div class="filter">
54+
<div class="filter-label"></div>
55+
<div class="filter-component text-search-container"><FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" /></div>
56+
</div>
57+
<div class="filter">
58+
<div class="filter-label">Endpoints:</div>
59+
<div class="filter-component">
60+
<ListFilterSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
61+
</div>
62+
</div>
63+
<div class="filter">
64+
<div class="filter-label">Dates:</div>
65+
<div class="filter-component">
66+
<DatePickerRange v-model="dateRange" />
67+
</div>
68+
</div>
69+
<div class="filter">
70+
<div class="filter-label">Show:</div>
71+
<div class="filter-component">
72+
<ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" default-empty-text="Any" :show-clear="false" :show-filter="false" />
73+
</div>
74+
</div>
75+
<div class="filter last-filter">
76+
<div class="filter-label">Sort:</div>
77+
<div class="filter-component">
78+
<ListFilterSelector :items="sortByItems" instructions="" v-model="selectedSortByItem" item-name="result" default-empty-text="Any" :show-clear="false" :show-filter="false" />
79+
</div>
80+
</div>
81+
</div>
82+
</template>
83+
84+
<style scoped>
85+
.last-filter {
86+
flex-grow: 1;
87+
place-content: flex-end;
88+
}
89+
.filters {
90+
background-color: #f3f3f3;
91+
border: #8c8c8c 1px solid;
92+
border-radius: 3px;
93+
padding: 0.3125rem;
94+
display: flex;
95+
gap: 1.1rem;
96+
}
97+
.filter {
98+
display: flex;
99+
align-items: center;
100+
}
101+
.filter-label {
102+
font-weight: bold;
103+
}
104+
105+
.filter-component {
106+
}
107+
.text-search-container {
108+
width: 25rem;
109+
}
110+
</style>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import FilterInput from "@/components/FilterInput.vue";
33
import { ref, watch } from "vue";
44
55
const selected = defineModel<string>({ required: true });
6-
const props = defineProps<{ items: string[]; instructions: string; itemName: string; label: string; defaultEmptyText: string; showClear: boolean; showFilter: boolean }>();
6+
const props = defineProps<{ items: string[]; instructions: string; itemName: string; defaultEmptyText: string; showClear: boolean; showFilter: boolean }>();
77
const filter = ref("");
88
const filteredItems = ref(props.items);
99
@@ -26,8 +26,7 @@ function onclick(item: string, isSelected: boolean) {
2626

2727
<template>
2828
<div class="dropdown">
29-
<label v-if="label" class="control-label" style="float: inherit">{{ label }}:</label>
30-
<button type="button" :aria-label="label ?? 'open dropdown menu'" class="btn btn-dropdown dropdown-toggle sp-btn-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
29+
<button type="button" aria-label="open dropdown menu" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3130
{{ selected ? selected : defaultEmptyText }}
3231
</button>
3332
<div class="dropdown-menu wrapper">

0 commit comments

Comments
 (0)