master: change repo

src/components/RefundTransaction.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="refund-transaction card">
+    <div class="card-content">
+      <div class="content" v-if="refunded">Somme remboursée...</div>
+      <div class="content" v-else>
+        <span v-if="toMe">
+          <span class="people">{{ refund.from.alias }}</span>
+          vous doit
+          <span class="numeric">{{ refund.amount | money(account.mainCurrency) }}</span>
+        </span>
+        <span v-else-if="fromMe">
+          Vous devez
+          <span class="numeric">{{ refund.amount | money(account.mainCurrency) }}</span>
+          à
+          <span class="people">{{ refund.to.alias }}</span>
+        </span>
+        <span v-else>
+          <span class="people">{{ refund.from.alias }}</span>
+          doit
+          <span class="numeric">{{ refund.amount | money(account.mainCurrency) }}</span>
+          à
+          <span class="people">{{ refund.to.alias }}</span>
+        </span>
+      </div>
+    </div>
+    <footer class="card-footer" v-if="canRefund && !refunded">
+      <confirm-button class="is-text is-fullwidth" @confirm="refundTo">Rembourser</confirm-button>
+    </footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import bus, { SYNC } from '@/utils/bus-event'
+import ClickOutside from 'vue-click-outside'
+import transactionService from '@/services/TransactionService'
+import IAccount from '@/models/IAccount'
+import ICurrency from '@/models/ICurrency'
+import IRefund from '@/models/IRefund'
+import ITransaction from '@/models/ITransaction'
+import IUser from '@/models/IUser'
+import TransactionTag from '@/enums/TransactionTag'
+import TransactionType from '@/enums/TransactionType'
+import exchangeService from '@/services/ExchangeService'
+import { confirmation } from '@/utils'
+
+@Component({
+  directives: {
+    ClickOutside
+  },
+  components: {
+    'confirm-button': () => import('@/components/ConfirmButton.vue')
+  }
+})
+export default class RefundTransaction extends Vue {
+  @Getter
+  public user!: IUser | null
+  @Prop({ type: Object, required: true })
+  public refund!: IRefund
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
+  public firstTap: boolean = true
+  public refunded: boolean = false
+  public resetTap(): void {
+    this.firstTap = true
+  }
+
+  public async refundTo(done: any): Promise<void> {
+    if (!this.account._id) {
+      done()
+      return
+    }
+    const date: Date = new Date()
+    const currencies: string[] = this.account.currencies.map(
+      (c: ICurrency) => c.code
+    )
+    const transaction: ITransaction = {
+      accountId: this.account._id,
+      name: 'Remboursement',
+      date,
+      tag: TransactionTag.None,
+      amount: this.refund.amount || 0,
+      payBy: this.refund.from.alias || '',
+      payFor: [
+        {
+          alias: this.refund.to.alias || '',
+          weight: 1
+        }
+      ],
+      userIds: this.account.userIds,
+      mainCurrency: this.account.mainCurrency,
+      currencies: this.account.currencies,
+      transactionType: TransactionType.refund,
+      exchange: await exchangeService.get(
+        this.account.mainCurrency.code,
+        date,
+        currencies
+      )
+    }
+    const response: PouchDB.Core.Response = await transactionService.add(
+      this.account._id,
+      transaction
+    )
+    if (response.ok) {
+      this.refunded = true
+      confirmation('Remboursement effectué avec succès')
+    }
+    bus.$emit(SYNC)
+    done()
+  }
+
+  public get canRefund(): boolean {
+    if (!this.user || !this.account.admin) {
+      return true
+    }
+    const emails: string[] = [this.account.admin.email, this.refund.from.email]
+    return emails.includes(this.user.email)
+  }
+
+  public get fromMe(): boolean {
+    if (!this.user || !this.refund.from) {
+      return false
+    }
+    return this.refund.from.email === this.user.email
+  }
+
+  public get toMe(): boolean {
+    if (!this.user || !this.refund.to) {
+      return false
+    }
+    return this.refund.to.email === this.user.email
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.people {
+  font-size: 12pt;
+  font-weight: bold;
+  &.to-me {
+    font-style: italic;
+    &:after {
+      font-style: normal;
+      content: ' (🤗)';
+    }
+  }
+  &.from-me {
+    font-style: italic;
+    &:after {
+      font-style: normal;
+      content: ' (🤨)';
+    }
+  }
+}
+</style>