github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/inscrits/PanelMessages.vue (about)

     1  <template>
     2    <v-card>
     3      <v-card-title>Suivi de l'inscription</v-card-title>
     4      <v-card-text>
     5        <v-card
     6          shaped
     7          v-for="(message, i) in messages"
     8          :key="i"
     9          class="my-2"
    10          :color="color(message.kind)"
    11        >
    12          <v-card-subtitle class="py-2">
    13            <v-row no-gutters>
    14              <v-col class="font-weight-bold"> {{ message.label }} </v-col>
    15              <v-col class="text-right">
    16                {{ fmt.date_heure(message.created) }}</v-col
    17              >
    18            </v-row>
    19          </v-card-subtitle>
    20          <v-card-text v-if="message.contenu">
    21            <div v-for="(line, i) in message.contenu.split('\n')" :key="i">
    22              {{ line }}
    23            </div>
    24          </v-card-text>
    25        </v-card>
    26      </v-card-text>
    27    </v-card>
    28  </template>
    29  
    30  <script lang="ts">
    31  import Vue from "vue";
    32  import Component from "vue-class-component";
    33  import { ResumeMessage, MessageKind } from "@/logic/types";
    34  import { Formatter } from "@/logic/formatter";
    35  import { COULEUR_INFO } from "@/views/inscrits";
    36  
    37  const PanelMessagesProps = Vue.extend({
    38    props: {
    39      messages: Array as () => ResumeMessage[]
    40    }
    41  });
    42  
    43  @Component({})
    44  export default class PanelMessages extends PanelMessagesProps {
    45    fmt = Formatter;
    46  
    47    color(kind: MessageKind) {
    48      if (kind == MessageKind.MCentre) return "green";
    49      if (kind == MessageKind.MResponsable) return COULEUR_INFO;
    50      return "";
    51    }
    52  }
    53  </script>
    54  
    55  <style scoped></style>