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

     1  <template>
     2    <b-card no-body :class="'bgKind-' + message.kind" header-class="py-1 px-2">
     3      <template v-slot:header>
     4        <b-row no-gutters>
     5          <b-col class="font-weight-bold pr-0">
     6            <b-row no-gutters wrap>
     7              <b-col md="auto" cols="7">
     8                <b-badge v-if="!message.vu" variant="info">Nouveau</b-badge>
     9                {{ message.label }}
    10              </b-col>
    11              <b-col class="align-self-center px-2">
    12                <b-badge
    13                  variant="primary"
    14                  :to="goTo"
    15                  v-if="goTo"
    16                  class="d-block"
    17                  style="max-width:70px;"
    18                  >Aller à</b-badge
    19                ></b-col
    20              >
    21            </b-row>
    22          </b-col>
    23          <b-col cols="5" class="text-right font-italic pl-0">
    24            <span v-b-tooltip.html :title="timeTooltip">{{ time }}</span>
    25          </b-col>
    26        </b-row>
    27      </template>
    28      <component
    29        class="py-2 px-3 w-100"
    30        v-if="contenuComponent"
    31        :is="contenuComponent"
    32        :message="message"
    33        :contenu="message.contenu"
    34        @edit="$emit('edit', $event)"
    35        @delete="$emit('delete', $event)"
    36      ></component>
    37    </b-card>
    38  </template>
    39  
    40  <script lang="ts">
    41  import Vue from "vue";
    42  import Component from "vue-class-component";
    43  import { PseudoMessage, MessageKind } from "@/shared/logic/types";
    44  import CPerso from "./CPerso.vue";
    45  import CDocuments from "./CDocuments.vue";
    46  import CPlaceLiberee from "./CPlaceLiberee.vue";
    47  import CAttestationPresence from "./CAttestationPresence.vue";
    48  import CAccuseReception from "./CAccuseReception.vue";
    49  import CFacture from "./CFacture.vue";
    50  import CFactureAcquittee from "./CFactureAcquittee.vue";
    51  import CSondage from "./CSondage.vue";
    52  
    53  import { formatDateTime, isNullDateString } from "@/shared/logic/utils";
    54  import { C } from "@/pages/espace_perso/logic/controller";
    55  import { UrlServerBase } from "@/shared/logic/controller";
    56  import {
    57    RoutePaiment,
    58    RouteDocuments,
    59    RouteParticipants
    60  } from "@/pages/espace_perso/router/routes";
    61  
    62  // à synchroniser avec le serveur
    63  const components: { [K in MessageKind]?: string } = {
    64    [MessageKind.MResponsable]: "CPerso",
    65    [MessageKind.MCentre]: "CPerso",
    66    [MessageKind.MAccuseReception]: "CAccuseReception",
    67    [MessageKind.MFacture]: "CFacture",
    68    [MessageKind.MDocuments]: "CDocuments",
    69    [MessageKind.MFactureAcquittee]: "CFactureAcquittee",
    70    [MessageKind.MAttestationPresence]: "CAttestationPresence",
    71    [MessageKind.MSondage]: "CSondage",
    72    [MessageKind.MPlaceLiberee]: "CPlaceLiberee"
    73  };
    74  
    75  const links: { [K in MessageKind]?: string } = {
    76    [MessageKind.MPaiement]: RoutePaiment,
    77    [MessageKind.MFactureAcquittee]: RoutePaiment,
    78    [MessageKind.MAttestationPresence]: RouteParticipants,
    79    [MessageKind.MFacture]: RoutePaiment
    80  };
    81  
    82  const MessageRowProps = Vue.extend({
    83    props: {
    84      message: Object as () => PseudoMessage
    85    }
    86  });
    87  @Component({
    88    components: {
    89      CPerso,
    90      CDocuments,
    91      CPlaceLiberee,
    92      CAttestationPresence,
    93      CAccuseReception,
    94      CFacture,
    95      CFactureAcquittee,
    96      CSondage
    97    }
    98  })
    99  export default class MessageRow extends MessageRowProps {
   100    get contenuComponent() {
   101      return components[this.message.kind];
   102    }
   103  
   104    get goTo() {
   105      const name = links[this.message.kind];
   106      if (name) {
   107        return { name };
   108      }
   109      return null;
   110    }
   111  
   112    private showTimeModified() {
   113      return (
   114        (this.message.kind == MessageKind.MCentre ||
   115          this.message.kind == MessageKind.MResponsable) &&
   116        !isNullDateString(this.message.modified)
   117      );
   118    }
   119    get time() {
   120      if (this.showTimeModified()) {
   121        return "modifié le " + formatDateTime(this.message.modified);
   122      }
   123      return formatDateTime(this.message.created);
   124    }
   125  
   126    get timeTooltip() {
   127      if (this.showTimeModified()) {
   128        return `message original : <b>${formatDateTime(
   129          this.message.created
   130        )}</b>`;
   131      }
   132      return "";
   133    }
   134  }
   135  </script>
   136  
   137  <style scoped>
   138  .bgKind-0 {
   139    border-color: #808080bb;
   140  }
   141  .bgKind-1 {
   142    border-color: #3cff6d8c;
   143  }
   144  .bgKind-2 {
   145    border-color: #1ce41cbb;
   146  }
   147  .bgKind-3 {
   148    border-color: #8b48c1a9;
   149  }
   150  .bgKind-4 {
   151    border-color: #fcb51eab;
   152  }
   153  .bgKind-5 {
   154    border-color: #33def5bb;
   155  }
   156  .bgKind-6 {
   157    border-color: #ead34cbb;
   158  }
   159  .bgKind-7 {
   160    border-color: #ead34cbb;
   161  }
   162  .bgKind-8 {
   163    border-color: #dc24cabb;
   164  }
   165  .bgKind-9 {
   166    border-color: #6565eebb;
   167  }
   168  .bgKind-10 {
   169    border-color: #f9ff1cbb;
   170  }
   171  .bgKind-11 {
   172    border-color: #ad9726bb;
   173  }
   174  </style>