Skip to content

Commit bd5ef99

Browse files
Der-Alex-KDer-Alex-K
authored
DAVE 702 (#479)
* detektierte Verkehrsart als enum * Enum verkehrsart umbenannt * add searchfilter for Verkehrsart * use closeabe chips
1 parent b69b956 commit bd5ef99

File tree

8 files changed

+126
-8
lines changed

8 files changed

+126
-8
lines changed

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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 "@/types/enum/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+
return result;
57+
});
58+
</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>
@@ -47,6 +51,7 @@ import type SearchAndFilterOptionsDTO from "@/types/suche/SearchAndFilterOptions
4751
import { computed, ref } from "vue";
4852
import { useDisplay } from "vuetify";
4953
54+
import FilterPanel from "@/components/search/filter/FilterPanel.vue";
5055
import SearchPanel from "@/components/search/filter/SearchPanel.vue";
5156
5257
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
@@ -17,6 +17,8 @@ import { de } from "vuetify/locale";
1717
import achtPlusEins from "@/components/messstelle/icons/FahrzeugklasseIcons/AchtPlusEinsIcon.vue";
1818
import summeKfz from "@/components/messstelle/icons/FahrzeugklasseIcons/SummeKfzIcon.vue";
1919
import zweiPlusEins from "@/components/messstelle/icons/FahrzeugklasseIcons/ZweiPlusEinsIcon.vue";
20+
// SearchAndFilter
21+
import searchAndFilter from "@/components/search/filter/SearchAndFilterIcon.vue";
2022
// Zaehlart
2123
import artH from "@/components/zaehlstelle/icons/ArtIcons/ArtH.vue";
2224
import artN from "@/components/zaehlstelle/icons/ArtIcons/ArtN.vue";
@@ -87,6 +89,8 @@ export default createVuetify({
8789
achtPlusEins,
8890
summeKfz,
8991
zweiPlusEins,
92+
// SearchAndFilter
93+
searchAndFilter,
9094
},
9195
},
9296
locale: {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import type Verkehrsart from "@/types/enum/Verkehrsart";
2+
13
export default interface SearchAndFilterOptionsDTO {
24
searchInMessstellen: boolean;
35
searchInZaehlstellen: boolean;
6+
messstelleVerkehrsart: Array<Verkehrsart>;
47
}

‎frontend/src/util/DefaultObjectCreator.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,7 @@ export default class DefaultObjectCreator {
315315
return {
316316
searchInMessstellen: true,
317317
searchInZaehlstellen: true,
318+
messstelleVerkehrsart: [Verkehrsart.KFZ, Verkehrsart.RAD],
318319
} as SearchAndFilterOptionsDTO;
319320
}
320321

0 commit comments

Comments
 (0)