Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/TransactionLog.vue
| <template> | <template> | ||||
| <div> | <div> | ||||
| <table class="table table-sm m-0 transactions"> | <table class="table table-sm m-0 transactions"> | ||||
| <thead class="thead-light"> | <thead class="thead-light"> | ||||
| <tr> | <tr> | ||||
| <th scope="col">Date</th> | <th scope="col">{{ $t('form.date') }}</th> | ||||
| <th scope="col" v-if="isAdmin">User</th> | <th scope="col" v-if="isAdmin">{{ $t('form.user') }}</th> | ||||
| <th scope="col"></th> | <th scope="col"></th> | ||||
| <th scope="col">Description</th> | <th scope="col">{{ $t('form.description') }}</th> | ||||
| <th scope="col" class="price">Amount</th> | <th scope="col" class="price">{{ $t('form.amount') }}</th> | ||||
| </tr> | </tr> | ||||
| </thead> | </thead> | ||||
| <tbody> | <tbody> | ||||
| <tr v-for="transaction in transactions" :id="'log' + transaction.id" :key="transaction.id"> | <tr v-for="transaction in transactions" :id="'log' + transaction.id" :key="transaction.id"> | ||||
| <td class="datetime">{{ transaction.createdAt }}</td> | <td class="datetime">{{ transaction.createdAt }}</td> | ||||
| <td class="email" v-if="isAdmin">{{ transaction.user }}</td> | <td class="email" v-if="isAdmin">{{ transaction.user }}</td> | ||||
| <td class="selection"> | <td class="selection"> | ||||
| <button class="btn btn-lg btn-link btn-action" title="Details" type="button" | <button class="btn btn-lg btn-link btn-action" title="Details" type="button" | ||||
| v-if="transaction.hasDetails" | v-if="transaction.hasDetails" | ||||
| @click="loadTransaction(transaction.id)" | @click="loadTransaction(transaction.id)" | ||||
| > | > | ||||
| <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"> | <tfoot class="table-fake-body"> | ||||
| <tr> | <tr> | ||||
| <td :colspan="isAdmin ? 5 : 4">There are no transactions for this account.</td> | <td :colspan="isAdmin ? 5 : 4">{{ $t('wallet.transactions-none') }}</td> | ||||
| </tr> | </tr> | ||||
| </tfoot> | </tfoot> | ||||
| </table> | </table> | ||||
| <div class="text-center p-3" id="transactions-loader" v-if="hasMore"> | <div class="text-center p-3" id="transactions-loader" v-if="hasMore"> | ||||
| <button class="btn btn-secondary" @click="loadLog(true)">Load more</button> | <button class="btn btn-secondary" @click="loadLog(true)">{{ $t('nav.more') }}</button> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| walletId: { type: String, default: null }, | walletId: { type: String, default: null }, | ||||
| ▲ Show 20 Lines • Show All 78 Lines • Show Last 20 Lines | |||||