med-appointments/src/components/Messages.vue

<template>
  <div v-if="!messages">
    <p>No messages available...</p>
  </div>

  <div v-else>
    <p>Messages:</p>
    <div
      v-for="(message, index) in messages"
      v-bind:key="index"
      class="message"
    >
      <p>🗨 {{ message.content }}</p>
      <small>
        <span style="display: none;"
          >{{ message.interactionId }} {{ message.eventId }}</span
        >
        {{ message.subject }} {{ message.date }}
      </small>

      <ul>
        <li v-for="(file, index) in message.attachments" v-bind:key="index">
          <FileDownload
            v-bind:endpoint="downloadService"
            v-bind:filename="file.filename"
            v-bind:id="file.id"
          ></FileDownload>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import FileDownload from "@/components/FileDownload.vue";
import { mapGetters } from "vuex";

export default {
  name: "Messages",
  components: {
    FileDownload
  },
  props: ["messages"],
  computed: {
    ...mapGetters(["api", "readonly"]),
    downloadService: function() {
      return this.api.download;
    }
  }
};
</script>

<style scoped>
.message {
  margin: 10px 0;
  padding: 0 10px;
}
.message p {
  background-color: #eeeeee;
  border-radius: 4px 10px;
  font-size: 120%;
}
.message small {
  margin-left: 2%;
  font-weight: bold;
}
.message ul {
  font-size: 85%;
  font-weight: bold;
}
</style>