github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/paiements/RowPaiement.vue (about)

     1  <template>
     2    <b-row
     3      :class="{
     4        'mr-0': true,
     5        'ml-2': true,
     6        'text-success': paiement.is_remboursement,
     7        'text-warning': paiement.is_invalide
     8      }"
     9      :title="title"
    10      v-b-tooltip.html.top
    11    >
    12      <b-col cols="5"> {{ paiement.label_payeur }} </b-col>
    13      <b-col cols="3" class="text-right">le {{ dateReglement }}</b-col>
    14      <b-col cols="2" class="text-center"> {{ modePaiement }}</b-col>
    15      <b-col cols="2" class="text-right">
    16        <i>{{ paiement.valeur.toFixed(2) }}€</i>
    17      </b-col>
    18    </b-row>
    19  </template>
    20  
    21  <script lang="ts">
    22  import Vue from "vue";
    23  import Component from "vue-class-component";
    24  import { Paiement } from "@/shared/logic/types";
    25  import {
    26    formatDate,
    27    formatModePaiement,
    28    formatDateTime
    29  } from "@/shared/logic/utils";
    30  
    31  const RowPaiementProps = Vue.extend({
    32    props: {
    33      paiement: Object as () => Paiement
    34    }
    35  });
    36  
    37  @Component({})
    38  export default class RowPaiement extends RowPaiementProps {
    39    get title() {
    40      if (this.paiement.is_remboursement) {
    41        return "Ce paiement est un <b>remboursement</b> de l'ACVE en votre faveur.";
    42      }
    43      if (this.paiement.is_invalide) {
    44        return "Ce paiement est en cours de vérification par notre comptabilité. Pour l'instant, il n'est pas effectif.";
    45      }
    46      return "";
    47    }
    48  
    49    get dateReglement() {
    50      return formatDateTime(this.paiement.date_reglement);
    51    }
    52  
    53    get modePaiement() {
    54      return formatModePaiement(this.paiement.mode_paiement);
    55    }
    56  }
    57  </script>
    58  
    59  <style scoped></style>