Skip to content

Commit 3786836

Browse files
Der-Alex-KDer-Alex-K
authored
DAVE 702 (#230)
* detektierte Verkehrsart als enum * Enum verkehrsart umbenannt * add searchfilter for Verkehrsart * use closeable chips
1 parent 4a5ce9c commit 3786836

File tree

8 files changed

+133
-11
lines changed

8 files changed

+133
-11
lines changed

‎frontend/src/components/search/filter/FilterMessstellePanel.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<v-expansion-panel-text>
3+
<panel-header
4+
font-size="0.875rem"
5+
font-weight="bold"
6+
header-text="Messstellen"
7+
/>
8+
<panel-header
9+
font-size="small"
10+
font-weight="normal"
11+
header-text="Welche Verkehrsarten sollen durchsucht werden?"
12+
/>
13+
<v-row
14+
align="start"
15+
justify="center"
16+
dense
17+
no-gutters
18+
>
19+
<v-col cols="6">
20+
<v-autocomplete
21+
v-model="searchAndFilterOptions.messstelleVerkehrsart"
22+
multiple
23+
:items="selectableVerkehrsarten"
24+
density="compact"
25+
chips
26+
closable-chips
27+
/>
28+
</v-col>
29+
<v-spacer />
30+
</v-row>
31+
</v-expansion-panel-text>
32+
</template>
33+
34+
<script lang="ts" setup>
35+
import type SearchAndFilterOptionsDTO from "@/types/suche/SearchAndFilterOptionsDTO";
36+
37+
import { computed } from "vue";
38+
39+
import PanelHeader from "@/components/common/PanelHeader.vue";
40+
import Verkehrsart from "@/domain/enums/Verkehrsart";
41+
42+
const searchAndFilterOptions = defineModel<SearchAndFilterOptionsDTO>({
43+
required: true,
44+
});
45+
46+
const selectableVerkehrsarten = computed<Array<unknown>>(() => {
47+
const result: Array<unknown> = [];
48+
result.push({
49+
title: `Kfz`,
50+
value: Verkehrsart.KFZ,
51+
});
52+
result.push({
53+
title: `Rad`,
54+
value: Verkehrsart.RAD,
55+
});
56+
result.push({
57+
title: `Unbekannt`,
58+
value: Verkehrsart.UNBEKANNT,
59+
});
60+
return result;
61+
});
62+
</script>

‎frontend/src/components/search/filter/FilterPanel.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<v-expansion-panel>
3+
<v-expansion-panel-title>
4+
<div>
5+
<v-icon
6+
start
7+
icon="mdi-filter-outline"
8+
/>
9+
Filtereinstellungen
10+
</div>
11+
</v-expansion-panel-title>
12+
<filter-messstelle-panel v-model="searchAndFilterOptions" />
13+
</v-expansion-panel>
14+
</template>
15+
16+
<script lang="ts" setup>
17+
import type SearchAndFilterOptionsDTO from "@/types/suche/SearchAndFilterOptionsDTO";
18+
19+
import FilterMessstellePanel from "@/components/search/filter/FilterMessstellePanel.vue";
20+
21+
const searchAndFilterOptions = defineModel<SearchAndFilterOptionsDTO>({
22+
required: true,
23+
});
24+
</script>

‎frontend/src/components/search/filter/SearchAndFilterIcon.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
width="24"
5+
height="24"
6+
viewBox="0 0 10 10"
7+
>
8+
<g
9+
id="search_and_filter"
10+
fill="currentColor"
11+
transform="translate(-5.000000,-30.00000)"
12+
>
13+
<path
14+
id="slash"
15+
d="M 5.0003447,39.99981 13.999881,30 15,30.0011 5.9994978,40 Z"
16+
/>
17+
<path
18+
id="magnify"
19+
d="m 6.6713721,30.000205 c 0.9230744,0 1.6713737,0.748258 1.6713737,1.671279 0,0.413965 -0.1517089,0.794503 -0.4011293,1.087621 l 0.069424,0.06941 h 0.203135 l 1.2856752,1.285606 -0.3857018,0.38568 -1.285672,-1.2856 v -0.203124 l -0.069424,-0.06942 C 7.4659192,33.191065 7.08536,33.342765 6.6713739,33.342765 5.7483004,33.342765 5,32.594506 5,31.671482 5,30.748459 5.7483004,30.000203 6.6713739,30.000203 m 0,0.514239 c -0.6428357,0 -1.1571042,0.51424 -1.1571042,1.157039 0,0.642801 0.5142685,1.157043 1.1571042,1.157043 0.6428364,0 1.1571052,-0.514242 1.1571052,-1.157043 0,-0.642799 -0.5142688,-1.157039 -1.1571052,-1.157039 z"
20+
/>
21+
<path
22+
id="filter"
23+
d="m 13.748902,39.718753 c 0.01,0.07497 -0.015,0.154964 -0.07248,0.207453 -0.09747,0.09748 -0.254935,0.09748 -0.35241,0 l -1.002247,-1.002273 c -0.05748,-0.05748 -0.08248,-0.134968 -0.07248,-0.207451 v -1.279711 l -1.197202,-1.532149 c -0.08497,-0.107476 -0.06499,-0.26494 0.0425,-0.349922 0.04749,-0.035 0.09997,-0.05498 0.154961,-0.05498 v 0 h 3.499109 v 0 c 0.05499,0 0.107471,0.02 0.154959,0.05498 0.107473,0.08497 0.127468,0.242445 0.0425,0.349922 l -1.197194,1.532149 v 2.281982 m -1.989492,-3.719155 0.989746,1.264712 v 1.379687 l 0.499873,0.499887 v -1.882073 l 0.989748,-1.262213 z"
24+
/>
25+
</g>
26+
</svg>
27+
</template>

‎frontend/src/components/search/filter/SearchAndFilterOptionsCard.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<template>
22
<v-card variant="flat">
33
<v-card-title>
4-
<v-icon start>mdi-filter-outline</v-icon>
5-
Sucheinstellungen
4+
<v-icon
5+
start
6+
icon="$searchAndFilter"
7+
/>
8+
Such- & Filtereinstellungen
69
</v-card-title>
710

811
<v-card-text>
@@ -16,6 +19,7 @@
1619
variant="accordion"
1720
>
1821
<search-panel v-model="searchAndFilterOptions" />
22+
<filter-panel v-model="searchAndFilterOptions" />
1923
</v-expansion-panels>
2024
</v-sheet>
2125
</v-card-text>
@@ -49,6 +53,7 @@ import type SearchAndFilterOptionsDTO from "@/types/suche/SearchAndFilterOptions
4953
import { computed, ref } from "vue";
5054
import { useDisplay } from "vuetify";
5155
56+
import FilterPanel from "@/components/search/filter/FilterPanel.vue";
5257
import SearchPanel from "@/components/search/filter/SearchPanel.vue";
5358
5459
interface Emits {

‎frontend/src/components/search/filter/SearchPanel.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<panel-header
1414
font-size="0.875rem"
1515
font-weight="bold"
16-
padding="10px 0 0 0"
16+
padding="10 0 0 0"
1717
header-text="Welche Erhebungsstellen sollen durchsucht werden?"
1818
/>
1919
<v-row
@@ -25,7 +25,6 @@
2525
<v-col cols="4">
2626
<v-checkbox
2727
v-model="searchAndFilterOptions.searchInMessstellen"
28-
class="mb-3"
2928
:label="'Messstellen'"
3029
hide-details
3130
color="quaternary"
@@ -35,16 +34,13 @@
3534
<v-col cols="4">
3635
<v-checkbox
3736
v-model="searchAndFilterOptions.searchInZaehlstellen"
38-
class="mb-3"
3937
:label="'Zählstellen'"
4038
hide-details
4139
color="quaternary"
4240
density="compact"
4341
/>
4442
</v-col>
45-
<v-col cols="4">
46-
<v-card variant="flat" />
47-
</v-col>
43+
<v-spacer />
4844
</v-row>
4945
</v-expansion-panel-text>
5046
</v-expansion-panel>

‎frontend/src/plugins/vuetify.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import zaehldauer13h from "@/components/icons/ZaehldauerIcons/Zaehldauer13hIcon.
2929
import zaehldauer16h from "@/components/icons/ZaehldauerIcons/Zaehldauer16hIcon.vue";
3030
import zaehldauer24h from "@/components/icons/ZaehldauerIcons/Zaehldauer24hIcon.vue";
3131
import zaehldauerSoZ from "@/components/icons/ZaehldauerIcons/ZaehldauerSoZIcon.vue";
32+
// SearchAndFilter
33+
import searchAndFilter from "@/components/search/filter/SearchAndFilterIcon.vue";
3234

3335
const theme = {
3436
themes: {
@@ -75,6 +77,8 @@ export default createVuetify({
7577
artR,
7678
artT,
7779
artTK,
80+
// SearchAndFilter
81+
searchAndFilter,
7882
},
7983
},
8084
locale: {

‎frontend/src/types/suche/SearchAndFilterOptionsDTO.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import type Verkehrsart from "@/domain/enums/Verkehrsart";
2-
import type MessstelleStatus from "@/types/enum/MessstelleStatus";
32

43
export default interface SearchAndFilterOptionsDTO {
54
searchInMessstellen: boolean;
65
searchInZaehlstellen: boolean;
76

8-
messstelleStatus: MessstelleStatus;
9-
messstelleVerkehrsart: Verkehrsart;
7+
messstelleVerkehrsart: Array<Verkehrsart>;
108
}

‎frontend/src/util/DefaultObjectCreator.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type ZaehlungDTO from "@/types/zaehlung/ZaehlungDTO";
99

1010
import { LatLng } from "leaflet";
1111

12+
import Verkehrsart from "@/domain/enums/Verkehrsart";
1213
import MessstelleStatus from "@/types/enum/MessstelleStatus";
1314
import Quelle from "@/types/enum/Quelle";
1415
import Status from "@/types/enum/Status";
@@ -99,6 +100,11 @@ export default class DefaultObjectCreator {
99100
return {
100101
searchInMessstellen: true,
101102
searchInZaehlstellen: true,
103+
messstelleVerkehrsart: [
104+
Verkehrsart.KFZ,
105+
Verkehrsart.RAD,
106+
Verkehrsart.UNBEKANNT,
107+
],
102108
} as SearchAndFilterOptionsDTO;
103109
}
104110

0 commit comments

Comments
 (0)