comparison client/src/components/importoverview/Filters.vue @ 2883:3473f3b72e21

client: importsoverview: filters: made code more compact
author Markus Kottlaender <markus@intevation.de>
date Mon, 01 Apr 2019 18:25:53 +0200
parents c40540889b53
children
comparison
equal deleted inserted replaced
2882:6538ee93df72 2883:3473f3b72e21
1 <template> 1 <template>
2 <div> 2 <div>
3 <button @click="setFilter('pending')" :class="pendingStyle"> 3 <button
4 @click="setFilter('pending')"
5 :class="'mr-1 btn btn-xs btn-' + (this.pending ? 'secondary' : 'light')"
6 >
4 <translate>pending</translate> 7 <translate>pending</translate>
5 </button> 8 </button>
6 <button @click="setFilter('failed')" :class="failedStyle"> 9 <button
10 @click="setFilter('failed')"
11 :class="'mr-1 btn btn-xs btn-' + (this.failed ? 'secondary' : 'light')"
12 >
7 <translate>failed</translate> 13 <translate>failed</translate>
8 </button> 14 </button>
9 <button @click="setFilter('accepted')" :class="acceptedStyle"> 15 <button
16 @click="setFilter('accepted')"
17 :class="'mr-1 btn btn-xs btn-' + (this.accepted ? 'secondary' : 'light')"
18 >
10 <translate>accepted</translate> 19 <translate>accepted</translate>
11 </button> 20 </button>
12 <button @click="setFilter('declined')" :class="declinedStyle"> 21 <button
22 @click="setFilter('declined')"
23 :class="'mr-1 btn btn-xs btn-' + (this.declined ? 'secondary' : 'light')"
24 >
13 <translate>declined</translate> 25 <translate>declined</translate>
14 </button> 26 </button>
15 <button @click="setFilter('warning')" :class="warningStyle"> 27 <button
28 @click="setFilter('warning')"
29 :class="'btn btn-xs btn-' + (this.warning ? 'secondary' : 'light')"
30 >
16 <translate>warning</translate> 31 <translate>warning</translate>
17 </button> 32 </button>
18 </div> 33 </div>
19 </template> 34 </template>
20 35
47 "pending", 62 "pending",
48 "failed", 63 "failed",
49 "accepted", 64 "accepted",
50 "warning", 65 "warning",
51 "declined" 66 "declined"
52 ]), 67 ])
53 pendingStyle() {
54 return {
55 btn: true,
56 "btn-xs": true,
57 "btn-light": !this.pending,
58 "btn-secondary": this.pending
59 };
60 },
61 failedStyle() {
62 return {
63 "ml-2": true,
64 btn: true,
65 "btn-xs": true,
66 "btn-light": !this.failed,
67 "btn-secondary": this.failed
68 };
69 },
70 declinedStyle() {
71 return {
72 "ml-2": true,
73 btn: true,
74 "btn-xs": true,
75 "btn-light": !this.declined,
76 "btn-secondary": this.declined
77 };
78 },
79 acceptedStyle() {
80 return {
81 "ml-2": true,
82 btn: true,
83 "btn-xs": true,
84 "btn-light": !this.accepted,
85 "btn-secondary": this.accepted
86 };
87 },
88 warningStyle() {
89 return {
90 "ml-2": true,
91 btn: true,
92 "btn-xs": true,
93 "btn-light": !this.warning,
94 "btn-secondary": this.warning
95 };
96 }
97 } 68 }
98 }; 69 };
99 </script> 70 </script>
100
101 <style lang="scss" scoped></style>