habitica/website/client/src/components/admin-panel/user-support/transactions.vue
Phillip Thelen d3b63abdd3
🧑‍💼🎛️ Overhaul (#15270)
* Add option to search for users by email or username in admin panel

* Make Admin panel design more consistent

* fix test

* fix width of items

* escape regex for searching users

* load own user when pressing enter on empty field

* add styling for warning buttons

* improve sub styling

* fix checkbox alignment in admin panel

* Unify date preview display

* Fix bottom button display

* admin panel display improvements

* remove autocannon file

* search improvements

* time travel button display fix

* fix loading spinner

* fix sorting

* Split email search into multiple queries

* fix email search

* remove console

* fix line break
2024-08-29 09:15:45 -05:00

69 lines
1.5 KiB
Vue

<template>
<div class="card mt-2">
<div class="card-header">
<h3
class="mb-0 mt-0"
:class="{'open': expand}"
@click="toggleTransactionsOpen"
>
Transactions
</h3>
</div>
<div
v-if="expand"
class="card-body"
>
<purchase-history-table
:gem-transactions="gemTransactions"
:hourglass-transactions="hourglassTransactions"
/>
</div>
</div>
</template>
<script>
import PurchaseHistoryTable from '../../ui/purchaseHistoryTable.vue';
import { userStateMixin } from '../../../mixins/userState';
export default {
components: {
PurchaseHistoryTable,
},
mixins: [userStateMixin],
props: {
hero: {
type: Object,
required: true,
},
resetCounter: {
type: Number,
required: true,
},
},
data () {
return {
expand: false,
gemTransactions: [],
hourglassTransactions: [],
};
},
watch: {
resetCounter () {
if (this.expand) {
this.expand = !this.expand;
this.toggleTransactionsOpen();
}
},
},
methods: {
async toggleTransactionsOpen () {
this.expand = !this.expand;
if (this.expand) {
const transactions = await this.$store.dispatch('members:getPurchaseHistory', { memberId: this.hero._id });
this.gemTransactions = transactions.filter(transaction => transaction.currency === 'gems');
this.hourglassTransactions = transactions.filter(transaction => transaction.currency === 'hourglasses');
}
},
},
};
</script>