Stripped Dataset.vue

Dataset-stripped.vue

<script>
export default {
  name: "dataset",
  // ...
  data: () => ({
    newNote: "",
    // ...
    reviewChanged: false,
    // ...
    editingNoteDialog: false,
    editingNote: "",
    // ...
    editingSymptomsDialog: false,
    allSymptoms: ["bulging margin", "increased or enlarged opacity", "loss of air bronchogram", "ground glass opacity", "pleural effusion", "crandio-caudal growth", "lymph node enlargement"],
    editingSymptoms: [],
    // ...
    noteLastSaveTime: new Date().toISOString()
  }),
  computed: {
    // ...
    note() {
      // Forces Vue to update UI with latest note
      this.noteLastSaveTime;
      if (this.currentSession && this.currentSession.meta) {
        return this.currentSession.meta.note;
      } else {
        return "";
      }
    },
    noteSegments() {
        // Add \n if note has previous entries
    },
    lastNoteTruncated() {
        // For showing last entry inline controls
    },
    symptoms() {
      if (this.currentSession && this.currentSession.meta) {
        return this.currentSession.meta.symptoms;
      } else {
        return "";
      }
    },
  },
  // ...
  methods: {
    // ...
    async loadSessionMeta() {
      this.reviewChanged = false;
      var { data: folder } = await this.girderRest.get(
        `folder/${this.currentSession.folderId}`
      );
      var { meta } = folder;
      this.newNote = "";
      this.rating = folder.meta.rating;
      this.reviewer = folder.meta.reviewer;
      this.currentSession.meta = meta;
    },
    async save() {
      var user = this.girderRest.user;
      // ...
      var date = new Date().toISOString().slice(0, 10);
      var note = "";
      if (this.newNote.trim()) {
        note =
          (this.note ? this.note + "\n" : "") +
          `${initial}(${date}): ${this.newNote}`;
      } else {
        note = this.note;
    }
    var meta = {
      ...this.currentSession.meta,
      ...{
        note,
        rating: this.rating !== undefined ? this.rating : null,
        reviewer: user.firstName + " " + user.lastName
        }
    };
    await this.girderRest.put(
      `folder/${this.currentSession.folderId}/metadata?allowNull=true`,
        meta
    );
    this.newNote = "";
    this.currentSession.meta = meta;
    this.reviewer = meta.reviewer;
    this.reviewChanged = false;
    this.noteLastSaveTime = new Date().toISOString();
  },
  enableEditHistroy() {
    this.editingNoteDialog = true;
    this.editingNote = this.note;
  },
  async saveNoteHistory() {
    var meta = {
      ...this.currentSession.meta,
      ...{
        note: this.editingNote
      }
    };
    await this.girderRest.put(
      `folder/${this.currentSession.folderId}/metadata?allowNull=true`,
      meta
    );
    this.currentSession.meta = meta;
    this.editingNoteDialog = false
    this.noteLastSaveTime = new Date().toISOString();
  },
  async saveSymptoms() {
    var meta = {
      ...this.currentSession.meta,
      ...{
        symptoms: this.editingSymptoms
      }
    };
    await this.girderRest.put(
      `folder/${this.currentSession.folderId}/metadata?allowNull=true`,
      meta
    );
    this.currentSession.meta = meta;
    this.editingSymptomsDialog = false;
  },
  // ...
  setNote(e) {
    // Saves inline note.
  },
  showSymptomsDialog() { // Show Dialog Window
    this.editingSymptomsDialog = true;
    this.editingSymptoms = this.symptoms;
  },
  // ...
}
</script>

<template>
  <v-layout class="dataset" fill-height column>
    <!-- ... -->
    <template v-if="currentDataset">
      <!-- ... -->
      <v-flex shrink class="bottom">
        <v-container fluid grid-list-sm class="pa-2">
          <v-layout>
            <!-- ... -->
            <v-flex xs4 class="mx-2" id="ctrls-center">
              <v-container class="pa-0">
                <!-- ... -->
                <v-row id="ctrls-note">
                  <!-- ... -->
                  <v-col class="pb-1 pt-0" cols="1" id="ctrls-note-history-edit">
                    <v-btn
                      text
                      small
                      icon
                      class="ma-0"
                      :disabled="userLevel.value > 1"
                      @click="enableEditHistroy"
                      >
                        <v-icon style="font-size: 18px;">edit</v-icon>
                    </v-btn>
                  </v-col>
                </v-row>
                <!-- ... -->
                <v-row id="ctrls-center-bottom"
                  no-gutters
                  justify="space-between"
                  class="pb-1"
                  v-if="userLevel.value <= 2"
                >
                  <v-col cols="6" class="pb-1 pt-0" id="ctrls-rating-toggle">
                    <!-- ... -->
                    <v-btn
                        text
                        small
                        icon
                        class="ma-0"
                        @click="showSymptomsDialog"
                        ><v-icon style="font-size: 18px;">edit</v-icon></v-btn
                    >
                  </v-col>
                  <!-- ... -->
                </v-row>
              </v-container>
            </v-flex>
            <!-- ... -->
          </v-layout>
        </v-container>
      </v-flex>
    </template>
    <v-dialog v-model="editingNoteDialog" max-width="600">
        <!-- ... -->
    </v-dialog>
    <v-dialog v-model="editingSymptomsDialog" max-width="600">
    </v-dialog>
    <!-- ... -->
  </v-layout>
</template>