med-appointments/src/components/MessageForm.vue

<template>
  <div v-if="permission">
    <div v-if="external">
      <a
        :href="external"
        class="btn btn-lg btn-primary btn-block"
        target="_blank"
        rel="noopener"
      >
        <span>Add Message 🔗</span>
      </a>
      <br />
      <button
        type="button"
        class="btn btn-lg btn-primary btn-xs pull-right"
        @click="toggleForm()"
      >
        Add Message Form 📝
      </button>
    </div>
    <div v-else>
      <button
        type="button"
        class="btn btn-lg btn-primary btn-block"
        @click="toggleForm()"
      >
        Add Message 📝
      </button>
    </div>
    <div v-if="show === true">
      <form class="message-form" @submit.prevent="submitMessageForm()">
        <div class="alert alert-info">
          <p><strong>Add a message and files below.</strong></p>
        </div>

        <textarea
          class="form-control"
          v-model="message"
          placeholder="add your message here"
        ></textarea>
        <br />

        <label class="btn btn-default btn-block">
          <input type="file" multiple @change="handleFileChange($event)" />
        </label>
        <br />

        <button class="btn btn-lg btn-success btn-block">
          Save/Upload 💾
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageForm",
  props: ["external", "interactionId", "teamId", "permission"],
  computed: {
    displayForm: function() {
      return "mode_record_details";
    }
  },
  data: function() {
    return {
      attachment: "",
      message: "",
      show: false
    };
  },
  methods: {
    handleFileChange(event) {
      console.log(event.target.files);
      console.log("TODO");
    },
    submitMessageForm: function() {
      //interactionId, teamId, message, attachments
      console.log("TODO");
    },
    toggleForm: function() {
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    }
  }
};
</script>

<style scoped>
.message-form {
  margin-top: 10px;
}
</style>