Mercurial > gemma

comparison client/src/components/importoverview/Filters.vue @ 2579:5295a182b4a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>