|
2579
|
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]);
|
|
2593
|
59 this.$store.commit("imports/setFilters", filters);
|
|
2579
|
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>
|
