Supporting evidence row (#146)

* Wip for adding the supporting evidence row

* wip with basic looks in place

* Having the rendering working for the icons and the different types and beginning to connect the events to the existing components for attaching/updating/removing the supporting evidence attachment.

* Fixed the connections so that they make it back to the view

* Got everything hooked up

* integration on the go yo

* Updated the configuration to make the new compponent name

* Fixed indenting that got messed up by accident

etc/fixtures/initial-seed/analyses.json

@@ -217,18 +217,14 @@
                  ]
               },
               {
-                 "type":"supporting-evidence",
+                 "type":"section-supporting-evidence",
                  "field":"Veterinary Histology Report",
-                 "value":[
-
-                 ]
+                 "value":[]
               },
               {
-                 "type":"supporting-evidence",
-                 "field":"Veterinary Pathology Imaging",
-                 "value":[
-
-                 ]
+                "type":"section-supporting-evidence",
+                "field":"Veterinary Pathology Imaging",
+                "value":[]
               }
            ]
         },

etc/fixtures/migrations/migrate-insert-animal-model-systems.js

@@ -94,12 +94,12 @@ const animalModelSystemSection = {
             "value": []
         },
         {
-            "type": "supporting-evidence",
+            "type": "section-supporting-evidence",
             "field": "Veterinary Histology Report",
             "value": []
         },          
         {
-            "type": "supporting-evidence",
+            "type": "section-supporting-evidence",
             "field": "Veterinary Pathology Imaging",
             "value": []
         }

frontend/src/components/AnalysisView/SectionBox.vue

@@ -41,7 +41,8 @@
         :writePermissions="this.writePermissions"
         :data-test="contentRow.field"
         @update-annotation-image="this.onUpdateImageEmit"
-        @update:section-text="this.onContentChanged"
+        @update:section-content="this.onContentChanged"
+        @download="this.onDownload"
       />
     </div>
   </div>
@@ -50,13 +51,15 @@
 <script>
 import ImagesDataset from '@/components/AnnotationView/ImagesDataset.vue';
 import SectionText from '@/components/AnalysisView/SectionText.vue';
+import SectionSupportingEvidence from '@/components/AnalysisView/SectionSupportingEvidence.vue';
 
 export default {
   name: 'section-box',
-  emits: ['update:contentRow', 'attach-image', 'update-image'],
+  emits: ['update:contentRow', 'attach-image', 'update-image', 'download'],
   components: {
     SectionText,
     ImagesDataset,
+    SectionSupportingEvidence,
   },
   props: {
     analysis_name: {
@@ -108,16 +111,19 @@ export default {
     },
   },
   methods: {
-    onContentChanged(sectionText) {
+    onContentChanged(sectionContent) {
       const contentRow = {
         header: this.header,
-        ...sectionText,
+        ...sectionContent,
       };
       this.$emit('update:contentRow', contentRow);
     },
     onUpdateImageEmit(imageId, field) {
       this.$emit('update-image', imageId, this.header, field);
     },
+    onDownload(content) {
+      this.$emit('download', content);
+    },
   },
 };
 </script>

frontend/src/components/AnalysisView/SectionSupportingEvidence.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="section-row">
+    <label class="section-field" v-bind:style="[
+      value.length === 0 && !this.editable
+        ? 'color: var(--rosalution-grey-300);'
+        : 'color: var(--rosalution-black);',
+    ]">
+      {{ field }}
+    </label>
+    <div class="section-content" :data-test="`supporting-evidence-${field}`">
+      <div class="supporting-evidence-content">
+        <button v-if="isDataUnavailable && this.editable && writePermissions"
+          @click="onContentChanged('attach', content)"
+          class="primary-button" :data-test="`attach-button-${field}`">
+          Attach
+        </button>
+        <font-awesome-icon v-if="!isDataUnavailable" :icon="typeIcon" size="lg" />
+        <div v-if="!isDataUnavailable && content.type == 'file'" @click="$emit('download', content)" target="_blank"
+          rel="noreferrer noopener" class="attachment-name">
+          {{ content.name }}
+        </div>
+        <a v-if="!isDataUnavailable && content.type == 'link'" :href="content.data" target="_blank"
+          rel="noreferrer noopener" class="attachment-name">
+          {{ content.name }}
+        </a>
+      </div>
+      <div class="action-items">
+        <button v-if="!isDataUnavailable && writePermissions" @click="onContentChanged('delete', content)"
+          data-test="delete-button">
+          <font-awesome-icon icon="xmark" size="xl" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'section-supporting-evidence',
+  emits: ['update:sectionContent', 'download'],
+  props: {
+    field: {
+      type: String,
+    },
+    value: {
+      type: Array,
+      required: false,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    writePermissions: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    isDataUnavailable: function() {
+      return this.value == '.' || this.value == 'null' || this.value == null || this.value.length == 0;
+    },
+    dataAvailabilityColour: function() {
+      return this.isDataUnavailable ? 'var(--rosalution-grey-300)' : 'var(--rosalution-black)';
+    },
+    typeIcon: function() {
+      if (this.isDataUnavailable) {
+        return undefined;
+      } else if (this.content.type === 'file') {
+        return ['far', 'file'];
+      }
+
+      return 'link';
+    },
+    content: function() {
+      if (this.isDataUnavailable) {
+        return {};
+      }
+
+      return this.value[0];
+    },
+  },
+  methods: {
+    onContentChanged(action, content) {
+      const contentRow = {
+        field: this.field,
+        type: 'supporting-evidence',
+        operation: action,
+        value: content,
+      };
+      this.$emit('update:sectionContent', contentRow);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.section-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--p-10);
+  padding: var(--p-1);
+}
+
+.section-field {
+  flex: 0 0 11.25rem;
+  font-weight: 600;
+}
+
+.section-content {
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 0;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--rosalution-grey-50);
+  border-radius: var(--content-border-radius);
+  padding: var(--p-10);
+}
+
+.attachment-name {
+  color: var(--rosalution-purple-300);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.supporting-evidence-content {
+  display: flex;
+  align-items: center;
+  gap: var(--p-10);
+}
+
+.action-items svg {
+  color: var(--rosalution-black);
+}
+
+.action-items>button {
+  border: none;
+  background: none;
+}
+</style>

frontend/src/components/AnalysisView/SectionText.vue

@@ -26,7 +26,7 @@
 <script>
 export default {
   name: 'section-text',
-  emits: ['update:sectionText'],
+  emits: ['update:sectionContent'],
   props: {
     field: {
       type: String,
@@ -62,7 +62,7 @@ export default {
         field: this.field,
         value: event.target.innerText.split('\n'),
       };
-      this.$emit('update:sectionText', contentRow);
+      this.$emit('update:sectionContent', contentRow);
     },
   },
 };

frontend/src/models/analyses.js

@@ -157,6 +157,62 @@ export default {
     };
     return await Requests.putForm(url, attachmentForm);
   },
+
+  async attachSectionSupportingEvidence(analysisName, section, field, evidence) {
+    let attachmentForm = null;
+    let url = `/rosalution/api/analysis/${analysisName}/section/attach`;
+
+    if (evidence.type == 'file') {
+      attachmentForm = {
+        'section_name': section,
+        'field_name': field,
+        'upload_file': evidence.data,
+        'comments': evidence.comments ? evidence.comments : '  ', /** Required for now, inserting empty string */
+      };
+      url += '/file';
+    } else if ( evidence.type == 'link') {
+      attachmentForm = {
+        'section_name': section,
+        'field_name': field,
+        'link_name': evidence.name,
+        'link': evidence.data,
+        'comments': evidence.comments ? evidence.comments : '  ', /** Required for now, inserting empty string */
+      };
+      url += '/link';
+    }
+
+    if (null == attachmentForm) {
+      throw new Error(`Evidence attachment ${evidence} type is invalid.`);
+    }
+
+    return await Requests.putForm(url, attachmentForm);
+  },
+
+  async removeSectionSupportingEvidenceFile(analysisName, section, field, attachmentId) {
+    const url = `/rosalution/api/analysis/${analysisName}/section/remove/file`;
+
+    const attachmentForm = {
+      'section_name': section,
+      'field_name': field,
+      'attachment_id': attachmentId,
+    };
+
+    const success = await Requests.putForm(url, attachmentForm);
+    return success;
+  },
+
+  async removeSectionSupportingEvidenceLink(analysisName, section, field) {
+    const url = `/rosalution/api/analysis/${analysisName}/section/remove/link`;
+
+    const attachmentForm = {
+      'section_name': section,
+      'field_name': field,
+    };
+
+    const success = await Requests.putForm(url, attachmentForm);
+    return success;
+  },
+
 };
 
 const annotationRenderingTemporary = [