med-appointments/src/views/Record.vue

<template>
  <div v-if="!record || !record.contact">Loading...</div>
  <div v-else class="record">
    <div class="headline-container">
      <Photo v-bind:photo="record.photo" class="headline-item"></Photo>
      <div class="headline-item">
        <h1>
          <span>Record: {{ record.contact.fullName }}</span>
        </h1>
        <p>{{ record.contact.badgeId }} &bull; {{ record.contact.email }}</p>
      </div>
    </div>

    <ul class="nav nav-tabs">
      <li id="tab_mode_record_details">
        <a @click="updateMode(modeDetails)">Details</a>
      </li>
      <li id="tab_mode_record_history">
        <a @click="updateMode(modeHistory)">History</a>
      </li>
      <li id="tab_mode_record_files">
        <a @click="updateMode(modeFiles)">Files</a>
      </li>
      <li
        v-show="numTeams > 0 && !readonly"
        id="tab_mode_record_create_appointment"
      >
        <a @click="updateMode(modeCreateAppointment)">Create Appointment</a>
      </li>
    </ul>

    <div v-if="mode === modeDetails" class="details-container">
      <ContactDetails
        v-bind:contact="record.contact"
        class="details-item"
      ></ContactDetails>
      <ScholarDetails
        v-bind:scholar="record.scholar"
        class="details-item"
      ></ScholarDetails>
      <div class="details-item">
        <InsuranceDetails
          v-bind:insurance="record.insurance"
        ></InsuranceDetails>
        <VaccinationDetails
          v-bind:vaccination="record.vaccination"
        ></VaccinationDetails>
      </div>
    </div>

    <div v-else-if="mode === modeHistory">
      <History v-bind:history="record.history"></History>
      <Entry
        v-if="id && entry_id && entry"
        v-bind:assignTo="entry.interaction.ownerName"
        v-bind:entry="entry"
        v-bind:entry_id="entry_id"
        v-bind:holds="record.scholar.hasAdvisingHolds"
        v-bind:id="id"
        v-bind:messages="entry.messages"
        v-bind:permissions="entry.permissions"
        v-bind:readonly="readonly"
        v-bind:state="entry.interaction.interactionState"
        v-bind:unfinished="entry.interaction.unfinished"
      ></Entry>
    </div>

    <div v-else-if="mode === modeFiles">
      <Files v-bind:files="record.files"></Files>
    </div>

    <div v-else-if="mode === modeCreateAppointment">
      <Followup v-bind:id="record.contact.id"></Followup>
    </div>

    <div v-else>Unknown mode: {{ mode }}</div>
  </div>
</template>

<script>
import ContactDetails from "@/components/ContactDetails.vue";
import Entry from "@/components/Entry.vue";
import Files from "@/components/Files.vue";
import Followup from "@/components/Followup.vue";
import History from "@/components/History.vue";
import InsuranceDetails from "@/components/InsuranceDetails.vue";
import Photo from "@/components/Photo.vue";
import ScholarDetails from "@/components/ScholarDetails.vue";
import VaccinationDetails from "@/components/VaccinationDetails.vue";
import { mapMutations, mapGetters } from "vuex";

export default {
  name: "Record",
  components: {
    ContactDetails,
    Entry,
    Files,
    Followup,
    History,
    InsuranceDetails,
    Photo,
    ScholarDetails,
    VaccinationDetails
  },
  props: ["id", "entry_id"],
  computed: {
    ...mapGetters(["api", "readonly"]),
    entry: function() {
      return this.runtimevals.entry;
    },
    record: function() {
      return this.runtimevals.record;
    },
    modesAvailable: function() {
      return [
        this.modeDetails,
        this.modeHistory,
        this.modeFiles,
        this.modeCreateAppointment
      ];
    },
    modeDetails: function() {
      return "mode_record_details";
    },
    modeHistory: function() {
      return "mode_record_history";
    },
    modeFiles: function() {
      return "mode_record_files";
    },
    modeCreateAppointment: function() {
      return "mode_record_create_appointment";
    }
  },
  data() {
    return {
      mode: "mode_record_details",
      numTeams: 1,
      loading: false,
      runtimevals: {
        record: "",
        entry: ""
      },
      errorPrompt: ""
    };
  },
  methods: {
    ...mapMutations(["updateErrorPrompt"]),
    updateMode: function(mode) {
      this.mode = mode;
    },
    getRecord: function() {
      function getData(endpoint, that, bucket, refs, errorPrompt) {
        that["loading"] = true;
        if (endpoint) {
          fetch(`${endpoint}?id=${that.id}`)
            .then(response => response.json())
            .then(json => {
              if (json) {
                that[bucket][refs] = json;
                that["loading"] = false;
              } else {
                that[errorPrompt] = "Response failed.";
                that["loading"] = false;
              }
            })
            .catch(error => {
              that[errorPrompt] = `Request failed. ${error}`;
              that["loading"] = false;
            });
        } else {
          that[errorPrompt] = "No configuration.";
          that["loading"] = false;
        }
      }

      getData(this.api.record, this, "runtimevals", "record", "errorPrompt");
    },
    getEntry: function() {
      function getData(endpoint, that, bucket, refs, errorPrompt) {
        that["loading"] = true;
        if (endpoint) {
          fetch(`${endpoint}?id=${that.entry_id}`)
            .then(response => response.json())
            .then(json => {
              if (json) {
                that[bucket][refs] = json;
                that["loading"] = false;
              } else {
                that[errorPrompt] = "Response failed.";
                that["loading"] = false;
              }
            })
            .catch(error => {
              that[errorPrompt] = `Request failed. ${error}`;
              that["loading"] = false;
            });
        } else {
          that[errorPrompt] = "No configuration.";
          that["loading"] = false;
        }
      }

      getData(this.api.entry, this, "runtimevals", "entry", "errorPrompt");
    }
  },
  mounted() {
    this.getRecord();
    if (this.entry_id) {
      this.updateMode(this.modeHistory);
      this.getEntry();
    }
  },
  watch: {
    entry_id() {
      this.runtimevals.entry = "";
      this.getEntry();
    }
  }
};
</script>

<style scoped>
.details-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #faffff;
}

.details-item {
  min-width: 300px;
  width: 30%;
  margin-bottom: 2%;
}

.headline-container {
  display: flex;
  flex-wrap: wrap;
}

.headline-item {
  padding-right: 2%;
}

.headline-item:last-of-type {
  min-width: 50%;
}
</style>