|
6 | 6 | <tr> |
7 | 7 | <th style="text-align: left" class="col col-sm-2" id="check-run-party-filter"> |
8 | 8 | <div class="d-flex align-items-center justify-between gap-2"> |
9 | | - <span class="party-onclick party-display"> |
10 | | - Party |
11 | | - </span> |
12 | | - <span class="filter-icon" style="cursor: pointer;" @click="show_party_filter = !show_party_filter"> |
| 9 | + <span class="party-onclick party-display"> Party </span> |
| 10 | + <span class="filter-icon" style="cursor: pointer" @click="show_party_filter = !show_party_filter"> |
13 | 11 | <svg class="icon icon-sm"> |
14 | 12 | <use class="" href="#icon-filter"></use> |
15 | 13 | </svg> |
16 | 14 | </span> |
17 | 15 | </div> |
18 | 16 | <div class="mt-2"> |
19 | | - <input |
20 | | - v-if="show_party_filter" |
21 | | - type="text" |
22 | | - class="form-control" |
23 | | - v-model="filters.party" |
24 | | - /> |
| 17 | + <input v-if="show_party_filter" type="text" class="form-control" v-model="filters.party" /> |
25 | 18 | </div> |
26 | 19 | </th> |
27 | 20 | <th class="col col-sm-2">Document</th> |
|
32 | 25 | </th> |
33 | 26 | <th class="col col-sm-2" style="white-space: nowrap; width: 12.49%"> |
34 | 27 | <div class="d-flex align-items-center justify-between gap-2"> |
35 | | - <span @click="update_sort('mode_of_payment')" class="flex-grow-1 check-run-sort-indicator" id="check-run-mop-sort"> |
| 28 | + <span |
| 29 | + @click="update_sort('mode_of_payment')" |
| 30 | + class="flex-grow-1 check-run-sort-indicator" |
| 31 | + id="check-run-mop-sort"> |
36 | 32 | Mode of Payment ⬍ |
37 | 33 | </span> |
38 | | - <span class="filter-icon" style="cursor: pointer;" @click="show_mop_filter = !show_mop_filter"> |
| 34 | + <span class="filter-icon" style="cursor: pointer" @click="show_mop_filter = !show_mop_filter"> |
39 | 35 | <svg class="icon icon-sm"> |
40 | 36 | <use href="#icon-filter"></use> |
41 | 37 | </svg> |
42 | 38 | </span> |
43 | 39 | </div> |
44 | 40 |
|
45 | 41 | <div v-if="show_mop_filter" class="mt-2"> |
46 | | - <select |
47 | | - class="form-control form-select form-select-sm" |
48 | | - v-model="filters.mode_of_payment_filter" |
49 | | - > |
| 42 | + <select class="form-control form-select form-select-sm" v-model="filters.mode_of_payment_filter"> |
50 | 43 | <option value="All">All</option> |
51 | 44 | <option v-for="mop in modes_of_payment" :key="mop" :value="mop"> |
52 | 45 | {{ mop === '' ? 'Not Set' : mop }} |
|
70 | 63 | style="text-align: left"> |
71 | 64 | <div class="d-flex align-items-center justify-between gap-2"> |
72 | 65 | <span>Pay</span> |
73 | | - <span class="filter-icon" style="cursor: pointer;" @click="show_paid_filter = !show_paid_filter"> |
| 66 | + <span class="filter-icon" style="cursor: pointer" @click="show_paid_filter = !show_paid_filter"> |
74 | 67 | <svg class="icon icon-sm"> |
75 | 68 | <use href="#icon-filter"></use> |
76 | 69 | </svg> |
77 | 70 | </span> |
78 | 71 | </div> |
79 | 72 |
|
80 | 73 | <div v-if="show_paid_filter" class="mt-2"> |
81 | | - <select |
82 | | - class="form-control form-select form-select-sm" |
83 | | - v-model="filters.paid_filter" |
84 | | - > |
| 74 | + <select class="form-control form-select form-select-sm" v-model="filters.paid_filter"> |
85 | 75 | <option value="All">All</option> |
86 | 76 | <option value="Paid">Paid</option> |
87 | 77 | <option value="Unpaid">Unpaid</option> |
@@ -189,35 +179,35 @@ let location = ref(window.location) |
189 | 179 | let paymentSelects = ref({}) |
190 | 180 |
|
191 | 181 | let orderedTransactions = computed(() => { |
192 | | - let arr = Object.values(transactions); |
193 | | -
|
194 | | - arr = arr.filter(item => { |
195 | | - if (!partyIsInFilter(item.party)) return false; |
196 | | -
|
197 | | - if (filters.mode_of_payment_filter === '') { |
198 | | - if (item.mode_of_payment) return false; |
199 | | - } else if ( |
200 | | - filters.mode_of_payment_filter && |
201 | | - filters.mode_of_payment_filter !== 'All' && |
202 | | - item.mode_of_payment !== filters.mode_of_payment_filter |
203 | | - ) { |
204 | | - return false; |
205 | | - } |
206 | | -
|
207 | | - if (filters.paid_filter && filters.paid_filter !== 'All') { |
208 | | - if (filters.paid_filter === 'Paid' && !item.pay) return false; |
209 | | - if (filters.paid_filter === 'Unpaid' && item.pay) return false; |
210 | | - } |
211 | | -
|
212 | | - return true; |
213 | | - }); |
214 | | -
|
215 | | - return arr.sort((a, b) => { |
216 | | - if (a[filters.key] > b[filters.key]) return filters[filters.key]; |
217 | | - if (a[filters.key] < b[filters.key]) return -filters[filters.key]; |
218 | | - return 0; |
219 | | - }); |
220 | | -}); |
| 182 | + let arr = Object.values(transactions) |
| 183 | +
|
| 184 | + arr = arr.filter(item => { |
| 185 | + if (!partyIsInFilter(item.party)) return false |
| 186 | +
|
| 187 | + if (filters.mode_of_payment_filter === '') { |
| 188 | + if (item.mode_of_payment) return false |
| 189 | + } else if ( |
| 190 | + filters.mode_of_payment_filter && |
| 191 | + filters.mode_of_payment_filter !== 'All' && |
| 192 | + item.mode_of_payment !== filters.mode_of_payment_filter |
| 193 | + ) { |
| 194 | + return false |
| 195 | + } |
| 196 | +
|
| 197 | + if (filters.paid_filter && filters.paid_filter !== 'All') { |
| 198 | + if (filters.paid_filter === 'Paid' && !item.pay) return false |
| 199 | + if (filters.paid_filter === 'Unpaid' && item.pay) return false |
| 200 | + } |
| 201 | +
|
| 202 | + return true |
| 203 | + }) |
| 204 | +
|
| 205 | + return arr.sort((a, b) => { |
| 206 | + if (a[filters.key] > b[filters.key]) return filters[filters.key] |
| 207 | + if (a[filters.key] < b[filters.key]) return -filters[filters.key] |
| 208 | + return 0 |
| 209 | + }) |
| 210 | +}) |
221 | 211 |
|
222 | 212 | let modes_of_payment = computed(() => { |
223 | 213 | return unref(window.check_run.modes_of_payment) |
|
0 commit comments