Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/TransactionLog.vue
| Show All 20 Lines | <div> | ||||
| > | > | ||||
| <svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
| </button> | </button> | ||||
| </td> | </td> | ||||
| <td class="description">{{ description(transaction) }}</td> | <td class="description">{{ description(transaction) }}</td> | ||||
| <td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td> | <td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td> | ||||
| </tr> | </tr> | ||||
| </tbody> | </tbody> | ||||
| <tfoot class="table-fake-body"> | <list-foot :text="$t('wallet.transactions-none')" :colspan="isAdmin ? 5 : 4"></list-foot> | ||||
| <tr> | |||||
| <td :colspan="isAdmin ? 5 : 4">{{ $t('wallet.transactions-none') }}</td> | |||||
| </tr> | |||||
| </tfoot> | |||||
| </table> | </table> | ||||
| <div class="text-center p-3" id="transactions-loader" v-if="hasMore"> | <list-more v-if="hasMore" :on-click="loadLog"></list-more> | ||||
| <button class="btn btn-secondary" @click="loadLog(true)">{{ $t('nav.more') }}</button> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import ListTools from './ListTools' | |||||
| export default { | export default { | ||||
| mixins: [ ListTools ], | |||||
| props: { | props: { | ||||
| walletId: { type: String, default: null }, | walletId: { type: String, default: null }, | ||||
| isAdmin: { type: Boolean, default: false }, | isAdmin: { type: Boolean, default: false }, | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| transactions: [], | transactions: [] | ||||
| hasMore: false, | |||||
| page: 1 | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.loadLog() | this.loadLog({ reset: true }) | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| loadLog(more) { | loadLog(params) { | ||||
| if (!this.walletId) { | if (this.walletId) { | ||||
| return | this.listSearch('transactions', '/api/v4/wallets/' + this.walletId + '/transactions', params) | ||||
| } | |||||
| let loader = $(this.$el) | |||||
| let param = '' | |||||
| if (more) { | |||||
| param = '?page=' + (this.page + 1) | |||||
| loader = $('#transactions-loader') | |||||
| } | } | ||||
| this.$root.addLoader(loader) | |||||
| axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + 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.transactions, this.transactions.length, response.data.list[i]) | |||||
| } | |||||
| this.hasMore = response.data.hasMore | |||||
| this.page = response.data.page || 1 | |||||
| }) | |||||
| .catch(error => { | |||||
| this.$root.removeLoader(loader) | |||||
| }) | |||||
| }, | }, | ||||
| loadTransaction(id) { | loadTransaction(id) { | ||||
| let record = $('#log' + id) | let record = $('#log' + id) | ||||
| let cell = record.find('td.description') | let cell = record.find('td.description') | ||||
| let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell) | let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell) | ||||
| this.$root.addLoader(cell) | this.$root.addLoader(cell) | ||||
| axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id) | axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id) | ||||
| Show All 30 Lines | |||||