123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <!--
- Copyright 2019 Hackware SpA <human@hackware.cl>
- This file is part of "Hackware Userland" and licensed under the terms
- of the GNU Affero General Public License version 3, or (at your option)
- a later version. You should have received a copy of this license along
- with the software. If not, see <https://www.gnu.org/licenses/>.
- -->
- <template>
- <div class="transactions">
- <h2>Mis transacciones</h2>
- <table>
- <thead>
- <tr>
- <th>Estado</th>
- <th>Emisión</th>
- <th>Descripción</th>
- <th>Monto</th>
- <th>Balance</th>
- </tr>
- </thead>
- <tbody
- v-for="transaction in transactions"
- :key="transaction.id"
- >
- <tr :class="`status-${transaction.status}`">
- <td>
- <i :class="statusIcon(transaction.status)" />
- <template v-if="transaction.status === 'ok'">
- {{ okWord() }}
- </template>
- <template v-else-if="transaction.status === 'due'">
- expira el {{ transaction.due_at | date }}
- </template>
- <template v-else>
- expiró el {{ transaction.due_at | date }}
- </template>
- </td>
- <td>{{ transaction.created_at | datetime }}</td>
- <td>{{ transaction.description }}</td>
- <td>{{ transaction.amount | currency }}</td>
- <td>{{ transaction.balance | currency }}</td>
- </tr>
- </tbody>
- </table>
- <VPagination
- v-if="totalPages"
- :total-pages="totalPages"
- />
- </div>
- </template>
- <script>
- import VPagination from '@/components/VPagination.vue';
- export default {
- name: 'Transactions',
- components: {
- VPagination,
- },
- data() {
- return {
- transactions: [],
- totalPages: null,
- };
- },
- created() {
- const page = ('page' in this.$route.query) ? Number(this.$route.query.page) : 1;
- this.fetchTransactions(page);
- },
- methods: {
- statusIcon(status) {
- let icon;
- switch (status) {
- case 'ok':
- icon = 'fas fa-check-circle';
- break;
- case 'due':
- icon = 'fas fa-exclamation-triangle';
- break;
- case 'expired':
- icon = 'fas fa-skull-crossbones';
- break;
- default:
- icon = 'fas fa-question';
- }
- return icon;
- },
- okWord() {
- const words = [
- 'cachi lupis', 'picho caluga', 'súper', 'OK', 'todo bien', 'no problemo',
- ];
- return words[Math.floor(Math.random() * words.length)];
- },
- determineStatus(dueAt) {
- if (!dueAt) return 'ok';
- const dueDate = new Date(dueAt);
- const currentDate = new Date();
- if (currentDate.getTime() < dueDate.getTime()) return 'due';
- return 'expired';
- },
- fetchTransactions(page) {
- this.$fetcher.haweseGet('/transactions', {
- user_uid: this.$auth.uid,
- page,
- limit: 10,
- sort: '-id',
- })
- .then((body) => {
- this.totalPages = body.meta.total_pages;
- this.transactions = body.data.map((transaction) => {
- const editedTransaction = transaction;
- editedTransaction.status = this.determineStatus(transaction.due_at);
- return editedTransaction;
- });
- });
- },
- },
- beforeRouteUpdate(to, from, next) {
- if (to.name === 'transactions') {
- this.fetchTransactions(to.query.page);
- }
- next();
- },
- };
- </script>
- <style lang="scss">
- @import "../assets/bootstrap/custom";
- .transactions {
- @extend .pt-3;
- > table {
- @extend .table;
- @extend .table-hover;
- @extend .table-borderless;
- @extend .table-striped;
- >tbody > tr {
- // &.status-ok { }
- &.status-due {
- @extend .table-warning;
- }
- &.status-expired {
- @extend .table-danger;
- }
- }
- }
- }
- </style>
|