vaquant/src/components/RefundTransaction.vue

<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.userId === this.user.userId
  }

  public get toMe(): boolean {
    if (!this.user || !this.refund.to) {
      return false
    }
    return this.refund.to.userId === this.user.userId
  }
}
</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>