Changeset View
Standalone View
src/resources/vue/Widgets/PaymentLog.vue
- This file was added.
| <template> | |||||
| <div> | |||||
| <table class="table table-sm m-0 payments"> | |||||
| <thead class="thead-light"> | |||||
| <tr> | |||||
| <th scope="col">Date</th> | |||||
| <th scope="col">Description</th> | |||||
| <th scope="col" class="price">Amount</th> | |||||
| <th scope="col">Status</th> | |||||
| <th scope="col"></th> | |||||
| <th scope="col"></th> | |||||
machniak: Redundant columns. | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody> | |||||
Not Done Inline ActionsThe list displays unfinished credit card/paypal payments. I'm not sure we should do this. I'm thinking about users having problem with payments. Soon after payment failes the return to the wallet page and see pending payments they could do not much about, and after a while (about 15 minutes) they will disappear which might be even more confusing. machniak: The list displays unfinished credit card/paypal payments. I'm not sure we should do this. I'm… | |||||
Done Inline ActionsBefore we just displayed nothing while the pending payment was not credited, so it seems not any worse to me at least, right? mollekopf: Before we just displayed nothing while the pending payment was not credited, so it seems not… | |||||
Not Done Inline ActionsIf a new feature adds to the confusion then it is worse. Isn't it? Maybe someone else should take a look at this part. Maybe not Jeroen, he's attitude is "let's push it and see" ;) machniak: If a new feature adds to the confusion then it is worse. Isn't it? Maybe someone else should… | |||||
Done Inline ActionsI think not having a placeholder while a payment is in flight is also confusing (since the old balance would still be reflected), so I think we should be listing all pending payments, not depending on the type. A failed payment should give some sort of feedback, but removing it from the pending payments list makes sense to me. A possible alternative is to mark it as failed in the list of pending payments, but then pending stops making sense. The Transactions log is also not ideal because I don't think we have a corresponding record anywhere. So maybe the way to address your concern is to add some sort of notifier that the last payment failed (similar to what we do for failed auto-payments)? I suppose this could be done using another api call that queries the payments. mollekopf: I think not having a placeholder while a payment is in flight is also confusing (since the old… | |||||
| <tr v-for="payment in payments" :id="'log' + payment.id" :key="payment.id"> | |||||
| <td class="datetime">{{ payment.createdAt }}</td> | |||||
| <td class="description">{{ payment.description }}</td> | |||||
| <td :class="'price ' + text-success">{{ amount(payment) }}</td> | |||||
Done Inline ActionsThis list will contain only positive values, maybe we should not use .text-success. machniak: This list will contain only positive values, maybe we should not use .text-success. | |||||
Done Inline ActionsIt looked better to me this way, and provides some consistency with other lists of currency amounts (where we might have negative values). mollekopf: It looked better to me this way, and provides some consistency with other lists of currency… | |||||
| <td>{{ payment.status }}</td> | |||||
Done Inline ActionsI'm not sure if the status gives much value here. It will be open or pending or authorized, right? machniak: I'm not sure if the status gives much value here. It will be open or pending or authorized… | |||||
| <td><a v-if="payment.checkoutUrl" v-bind:href="payment.checkoutUrl">Details</a></td> | |||||
Done Inline ActionsI don't like how the list looks like. Maybe amount should be the last column. Maybe Details should be an icon (like on transactions list). machniak: I don't like how the list looks like. Maybe amount should be the last column. Maybe Details… | |||||
Done Inline ActionsThe checkout URL is required for banktransfers. I agree the list doesn't look great and am open to further suggestions, but it's acceptable IMO with the details moved to the centre. mollekopf: The checkout URL is required for banktransfers. I agree the list doesn't look great and am open… | |||||
| </tr> | |||||
| </tbody> | |||||
Done Inline Actionsremoving "btn-lg" and adding "text-danger" works for me. bohlender: removing "btn-lg" and adding "text-danger" works for me.
Could be anchored to the right as… | |||||
| <tfoot class="table-fake-body"> | |||||
Done Inline Actionspayments -> pending payments. 5 -> 4. machniak: payments -> pending payments. 5 -> 4. | |||||
| <tr> | |||||
| <td :colspan="4">There are no payments for this account.</td> | |||||
| </tr> | |||||
Done Inline ActionsWrong number and colon is redundant. machniak: Wrong number and colon is redundant. | |||||
| </tfoot> | |||||
| </table> | |||||
| <div class="text-center p-3" id="payments-loader" v-if="hasMore"> | |||||
| <button class="btn btn-secondary" @click="loadLog(true)">Load more</button> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| props: { | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| payments: [], | |||||
| hasMore: false, | |||||
| page: 1 | |||||
| } | |||||
| }, | |||||
Done Inline ActionsWe do the request twice. Once when the wallet page is mounted, and second when user clicks on the Pending payments tab. I guess the other option would be to display the tab always, which might not be what we want. machniak: We do the request twice. Once when the wallet page is mounted, and second when user clicks on… | |||||
Done Inline ActionsYeah, this could be improved by adding an extra controller method that only checks if there are any payments at all, but I figured this is good enough. mollekopf: Yeah, this could be improved by adding an extra controller method that only checks if there are… | |||||
Done Inline ActionsThat would be nice. Especially this method could not have to connect to the payment provider. So, it would be faster just because of that. machniak: That would be nice. Especially this method could not have to connect to the payment provider. | |||||
| mounted() { | |||||
| this.loadLog() | |||||
| }, | |||||
| methods: { | |||||
| loadLog(more) { | |||||
| let loader = $(this.$el) | |||||
| let param = '' | |||||
| if (more) { | |||||
| param = '?page=' + (this.page + 1) | |||||
| loader = $('#payments-loader') | |||||
| } | |||||
| this.$root.addLoader(loader) | |||||
| axios.get('/api/v4/payments/pending' + param) | |||||
| .then(response => { | |||||
| this.$root.removeLoader(loader) | |||||
| // Note: In Vue we can't just use .concat() | |||||
| for (let i in response.data.list) { | |||||
| this.$set(this.payments, this.payments.length, response.data.list[i]) | |||||
| } | |||||
| this.hasMore = response.data.hasMore | |||||
| this.page = response.data.page || 1 | |||||
| }) | |||||
| .catch(error => { | |||||
| this.$root.removeLoader(loader) | |||||
| }) | |||||
| }, | |||||
| amount(payment) { | |||||
| return this.$root.price(payment.amount) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
Redundant columns.