Mercurial > gemma
comparison client/src/components/importoverview/Filters.vue @ 2579:5295a182b4a4
overview2 WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 11 Mar 2019 15:53:31 +0100 |
parents | |
children | 956b230c6062 |
comparison
equal
deleted
inserted
replaced
2578:3ad81357a57c | 2579:5295a182b4a4 |
---|---|
1 <template> | |
2 <div> | |
3 <button @click="setFilter('pending')" :class="pendingStyle"> | |
4 <translate>pending</translate> | |
5 </button> | |
6 <button @click="setFilter('failed')" :class="failedStyle"> | |
7 <translate>failed</translate> | |
8 </button> | |
9 <button @click="setFilter('accepted')" :class="acceptedStyle"> | |
10 <translate>accepted</translate> | |
11 </button> | |
12 <button @click="setFilter('declined')" :class="declinedStyle"> | |
13 <translate>declined</translate> | |
14 </button> | |
15 <button @click="setFilter('warning')" :class="warningStyle"> | |
16 <translate>warning</translate> | |
17 </button> | |
18 </div> | |
19 </template> | |
20 | |
21 <script> | |
22 export default { | |
23 name: "importfilters", | |
24 data() { | |
25 return { | |
26 failed: false, | |
27 pending: false, | |
28 accepted: false, | |
29 declined: false, | |
30 warning: false | |
31 }; | |
32 }, | |
33 methods: { | |
34 setFilter(name) { | |
35 if (this.loading) return; | |
36 this[name] = !this[name]; | |
37 const allSet = | |
38 this.failed && | |
39 this.pending && | |
40 this.accepted && | |
41 this.declined && | |
42 this.warning; | |
43 if (allSet) { | |
44 this.warning = false; | |
45 this.successful = false; | |
46 this.failed = false; | |
47 this.pending = false; | |
48 this.accepted = false; | |
49 this.declined = false; | |
50 this.$store.commit("imports/clearFilers"); | |
51 } | |
52 const filters = [ | |
53 "failed", | |
54 "pending", | |
55 "accepted", | |
56 "declined", | |
57 "warning" | |
58 ].filter(x => this[x]); | |
59 this.$store.commit("imports/setFilers", filters); | |
60 } | |
61 }, | |
62 computed: { | |
63 pendingStyle() { | |
64 return { | |
65 btn: true, | |
66 "btn-sm": true, | |
67 "btn-light": !this.pending, | |
68 "btn-secondary": this.pending | |
69 }; | |
70 }, | |
71 failedStyle() { | |
72 return { | |
73 "ml-2": true, | |
74 btn: true, | |
75 "btn-sm": true, | |
76 "btn-light": !this.failed, | |
77 "btn-secondary": this.failed | |
78 }; | |
79 }, | |
80 declinedStyle() { | |
81 return { | |
82 "ml-2": true, | |
83 btn: true, | |
84 "btn-sm": true, | |
85 "btn-light": !this.declined, | |
86 "btn-secondary": this.declined | |
87 }; | |
88 }, | |
89 acceptedStyle() { | |
90 return { | |
91 "ml-2": true, | |
92 btn: true, | |
93 "btn-sm": true, | |
94 "btn-light": !this.accepted, | |
95 "btn-secondary": this.accepted | |
96 }; | |
97 }, | |
98 warningStyle() { | |
99 return { | |
100 "ml-2": true, | |
101 btn: true, | |
102 "btn-sm": true, | |
103 "btn-light": !this.warning, | |
104 "btn-secondary": this.warning | |
105 }; | |
106 } | |
107 } | |
108 }; | |
109 </script> | |
110 | |
111 <style lang="scss" scoped></style> |