frontend/src/views/Transaction.vue

<template>
  <div id="transactions">
    <section class="section">
      <div class="container" v-if="$store.state.user.username">
        <div class="columns is-centered">
          <div class="column is-6">
            <div class="box">
              <div class="title">Transaction Log</div>
              <hr />
              <NoItems v-if="!transactions.length" type="transactions"></NoItems>
              <b-table
                v-else
                :detail-key="'log-' + transactions.id"
                :data="transactions"
                :paginated="isPaginated"
                :per-page="perPage"
                :current-page.sync="currentPage"
                :pagination-simple="isPaginationSimple"
                :pagination-position="paginationPosition"
                :default-sort-direction="defaultSortDirection"
                :pagination-rounded="isPaginationRounded"
                :sort-icon="sortIcon"
                :opened-detailed="defaultOpenedDetails"
                :sort-icon-size="sortIconSize"
                default-sort="user.first_name"
                aria-next-label="Next page"
                aria-previous-label="Previous page"
                aria-page-label="Page"
              >
                <b-table-column
                  field="props.row.text"
                  label="Message"
                  sortable
                  v-slot="props"
                >
                  {{ props.row.text }}
                </b-table-column>

                <b-table-column
                  field="props.row.priceOfPurchase"
                  label="Price"
                  sortable
                  v-slot="props"
                >
                  {{ props.row.priceOfPurchase }}
                </b-table-column>

                <b-table-column
                  field="props.row.createdAt"
                  label="Date"
                  sortable
                  centered
                  v-slot="props"
                >
                  <span class="tag is-success">
                    {{ new Date(props.row.createdAt).toLocaleDateString() }}
                  </span>
                </b-table-column>
              </b-table>
            </div>
          </div>
        </div>
      </div>
      <div class="container" v-else>
        <div class="columns is-centered">
          <div class="column is-6">
            <div class="box has-text-centered">
              <i class="far fa-times-square large-icon"></i>
              <div class="subtitle">{{ $t("generic.notLoggedIn") }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import NoItems from "../components/NoItems";
export default {
  name: "Transactions",
  components: {
    NoItems,
  },
  data() {
    return {
      search: "",
      transactions: [],
      isPaginated: true,
      isPaginationSimple: false,
      isPaginationRounded: false,
      paginationPosition: "bottom",
      defaultSortDirection: "desc",
      sortIcon: "arrow-up",
      sortIconSize: "is-small",
      currentPage: 1,
      perPage: 30,
      defaultOpenedDetails: [1],
      showDetailIcon: true,

      loading: true,
      offset: 0,
      limit: 15,
      showTeamTab: 0,
      tcreateProd: {
        username: "",
        name: "",

        loading: false,

        errors: {
          username: "",
          name: "",
        },
      },

      roleOptions: [
        { name: "Admins", value: "admin" },
        { name: "transactions", value: "user" },
      ],
      roleSelected: ["admin", "user"],

      tableSort: {
        column: "username",
        sort: "desc",
      },
    };
  },
  methods: {
    fetchData() {
      if (this.offset === null) return;

      let url =
        process.env.VUE_APP_APIENDPOINT +
        process.env.VUE_APP_APIVERSION +
        `/` +
        `transactions?
					sort=${this.tableSort.column}
					&order=${this.tableSort.sort}
					&offset=${this.offset}
				`;
      if (this.roleSelected.length === 1) {
        url += "&role=" + this.roleSelected[0];
      }
      if (this.search.length) {
        url += "&search=" + encodeURIComponent(this.search.trim());
      }

      this.loading = true;
      this.axios
        .get(url)
        .then((res) => {
          this.transactions.push(...res.data);
          this.loading = /*loading =*/ false;

          //If returned data is less than the limit
          //then there must be no more pages to paginate
          if (res.data.length < this.limit) {
            this.offset = null;
          } else {
            this.offset += this.limit;
          }
        })
        .catch((e) => {
          AjaxErrorHandler(this.$store)(e);
          this.loading = /*loading =*/ false;
        });
    },
    resetFetchData() {
      this.offset = 0;
      this.transactions = [];

      this.fetchData();
    },
  },
  getNewertransactions() {
    this.loadingNewer = true;

    this.axios
      .get(
        process.env.VUE_APP_APIENDPOINT +
          process.env.VUE_APP_APIVERSION +
          "/" +
          "transactions" +
          "?limit=" +
          this.newtransactions
      )
      .then((res) => {
        this.loadingNewer = false;
        this.newtransactions = 0;

        this.threads.unshift(...res.data.Threads);
      })
      .catch((e) => {
        this.loadingNewer = false;
        AjaxErrorHandler(this.$store)(e);
      });
  },
  mounted() {
    if (this.$store.state.user.username) {
      this.fetchData();
    }
  },
};
</script>