sasiedzi/src/main/webapp/app/entities/transaction/transaction.vue

<template>
  <div>
    <h2 id="page-heading" data-cy="TransactionHeading">
      <span id="transaction-heading">Transactions</span>
      <div class="d-flex justify-content-end">
        <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span>
        </button>
        <router-link
          :to="{ name: 'TransactionCreate' }"
          custom
          v-slot="{ navigate }"
          v-if="hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])"
        >
          <button
            @click="navigate"
            id="jh-create-entity"
            data-cy="entityCreateButton"
            class="btn btn-primary jh-create-entity create-transaction"
          >
            <font-awesome-icon icon="plus"></font-awesome-icon>
            <span>Create a new Transaction</span>
          </button>
        </router-link>
      </div>
    </h2>
    <br />
    <div class="alert alert-warning" v-if="!isFetching && transactions && transactions.length === 0">
      <span>No Transactions found</span>
    </div>
    <div class="table-responsive" v-if="transactions && transactions.length > 0">
      <table class="table table-striped" aria-describedby="transactions">
        <thead>
          <tr>
            <!--            <th/>-->
            <!--            <th/>-->
            <!--            <th/>-->
            <th />
            <th />

            <th class="rotate" scope="row" v-for="item in transactions[0].items">
              <div class="rotate">{{ item.userAccount?.name }}</div>
            </th>
            <th scope="row"></th>
          </tr>
          <tr>
            <!--            <th/>-->
            <!--            <th/>-->
            <!--            <th/>-->
            <th />
            <th>Saldo</th>
            <th v-for="amount in sums" class="border-left" :class="{ inplus: amount > 0, inminus: amount < 0 }">
              <span class="bold">{{ amount }}</span>
            </th>
          </tr>
          <tr>
            <!--            <th scope="row"><span>ID</span></th>-->
            <!--            <th scope="row"><span>Type</span></th>-->
            <th scope="row"><span>Date</span></th>
            <!--            <th scope="row"><span>Comment</span></th>-->

            <th scope="row"><span></span></th>
            <!--            <th scope="row"><span>Transactions:</span></th>-->
            <th scope="row" v-for="item in transactions[0].items" class="border-left">
              <span></span>
              <!--              <span>{{  item.userAccount?.name }}</span>-->
            </th>
            <th scope="row"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="transaction in transactions" :key="transaction.id" data-cy="entityTable">
            <td>
              <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }"
                >{{ transaction.date }} {{ transaction.type }}
              </router-link>
              <div v-if="transaction.comment">{{ transaction.comment }}</div>
            </td>
            <!--            <td>{{ transaction.type }}</td>-->
            <!--            <td>{{ transaction.date }}</td>-->
            <!--            <td>{{ transaction.comment }}</td>-->
            <td>
              <div v-if="transaction.event">
                <router-link :to="{ name: 'EventView', params: { eventId: transaction.event.id } }">{{
                  transaction.event.name
                }}</router-link>
              </div>
            </td>
            <td v-for="item in transaction.items" class="border-left">{{ item.amount }}</td>
            <td class="text-right">
              <div class="btn-group">
                <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }" custom v-slot="{ navigate }">
                  <button @click="navigate" class="btn btn-info btn-sm details" data-cy="entityDetailsButton">
                    <font-awesome-icon icon="eye"></font-awesome-icon>
                    <span class="d-none d-md-inline">View</span>
                  </button>
                </router-link>
                <router-link
                  :to="{ name: 'TransactionEdit', params: { transactionId: transaction.id } }"
                  custom
                  v-slot="{ navigate }"
                  v-if="hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])"
                >
                  <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
                    <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
                    <span class="d-none d-md-inline">Edit</span>
                  </button>
                </router-link>
                <b-button
                  @click="prepareRemove(transaction)"
                  variant="danger"
                  class="btn btn-sm"
                  data-cy="entityDeleteButton"
                  v-if="hasAnyAuthority('ROLE_ADMIN')"
                  v-b-modal.removeEntity
                >
                  <font-awesome-icon icon="times"></font-awesome-icon>
                  <span class="d-none d-md-inline">Delete</span>
                </b-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <b-modal ref="removeEntity" id="removeEntity">
      <template #modal-title>
        <span id="sasiedziApp.transaction.delete.question" data-cy="transactionDeleteDialogHeading">Confirm delete operation</span>
      </template>
      <div class="modal-body">
        <p id="jhi-delete-transaction-heading">Are you sure you want to delete Transaction {{ removeId }}?</p>
      </div>
      <template #modal-footer>
        <div>
          <button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
          <button
            type="button"
            class="btn btn-primary"
            id="jhi-confirm-delete-transaction"
            data-cy="entityConfirmDeleteButton"
            @click="removeTransaction()"
          >
            Delete
          </button>
        </div>
      </template>
    </b-modal>
  </div>
</template>

<script lang="ts" src="./transaction.component.ts"></script>