master: change repo

src/components/AccountTransactionList.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="account-transaction-list" v-if="account">
+    <div class="field has-addons has-addons-centered is-narrow" v-if="showFilter">
+      <div class="control" v-show="filteredBy">
+        <button type="submit" class="button" @click="filteredBy = ''">
+          <awe-icon icon="times" />
+        </button>
+      </div>
+      <div class="control">
+        <div class="select is-fullwidth">
+          <select v-model="filteredBy">
+            <option value>Tout le monde</option>
+            <option v-for="(user, k) in account.users" :key="k" :value="user.alias">{{ user.alias }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="table-container">
+      <table class="table is-hoverable is-striped">
+        <thead v-if="head">
+          <tr>
+            <th scope="col">
+              <awe-icon icon="minus" />
+            </th>
+            <th scope="col" class="align">
+              <awe-icon icon="user" />
+            </th>
+            <th scope="col" class="align">
+              <awe-icon icon="money-bill-wave" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(transaction, k) in filteredTransactions"
+            :key="k"
+            :data-index="k"
+            :id="transaction._id"
+          >
+            <td class="multiline">
+              <router-link
+                :to="{ name: 'transaction', params: { id: transaction._id } }"
+              >{{ transaction.name }}</router-link>
+              <br />
+              <span class="date">{{ transaction.date | date }}</span>
+            </td>
+            <td class="pay-by">{{ transaction.payBy }}</td>
+            <td class="numeric">{{ transaction.amount | moneypad(transaction.mainCurrency) }}</td>
+          </tr>
+        </tbody>
+        <tfoot v-if="foot">
+          <tr class="is-selected">
+            <td colspan="2" class="total">total</td>
+            <td class="numeric">{{ total | moneypad(account.mainCurrency) }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import IAccount from '@/models/IAccount'
+import ITransaction from '@/models/ITransaction'
+
+@Component
+export default class AccountTransactionList extends Vue {
+  @Prop({ type: Object, default: () => null })
+  public account!: IAccount | null
+  @Prop({ type: Array, required: true })
+  public transactions!: ITransaction[]
+  @Prop({ type: Boolean, default: true })
+  public filter!: boolean
+  @Prop({ type: Boolean, default: true })
+  public head!: boolean
+  @Prop({ type: Boolean, default: false })
+  public foot!: boolean
+  public filteredBy: string = ''
+
+  public get total(): number {
+    return this.transactions.reduce(
+      (a: number, transaction: ITransaction) => a + transaction.amount,
+      0
+    )
+  }
+
+  public get filteredTransactions(): ITransaction[] {
+    if (!this.filteredBy) {
+      return this.transactions
+    }
+    return this.transactions.filter(
+      (transaction: ITransaction) => transaction.payBy === this.filteredBy
+    )
+  }
+
+  public get isMultiUser(): boolean {
+    const payBy = new Set(
+      this.transactions.map((transaction: ITransaction) => transaction.payBy)
+    )
+    return payBy.size > 1
+  }
+
+  public get showFilter(): boolean {
+    return this.filter && this.isMultiUser
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.account-transaction-list {
+  margin: auto;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+table tr.is-selected {
+  background-color: var(--primary-color);
+  color: var(--primary-font-color);
+}
+
+.multiline {
+  line-height: 15px;
+}
+
+.date {
+  font-style: italic;
+  font-size: 14px;
+}
+
+th {
+  &.align {
+    text-align: center;
+  }
+}
+</style>