Wip for adding the supporting evidence row

frontend/src/components/AnalysisView/SectionBox.vue

@@ -50,13 +50,15 @@
 <script>
 import ImagesDataset from '@/components/AnnotationView/ImagesDataset.vue';
 import SectionText from '@/components/AnalysisView/SectionText.vue';
+import SupportingEvidence from '@/components/AnalysisView/SupportingEvidence.vue';
 
 export default {
   name: 'section-box',
   emits: ['update:contentRow', 'attach-image', 'update-image'],
   components: {
     SectionText,
     ImagesDataset,
+    SupportingEvidence,
   },
   props: {
     analysis_name: {

frontend/src/components/AnalysisView/SupportingEvidence.vue

@@ -0,0 +1,105 @@
+<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>
+    <span class="section-content">
+      <span v-if="this.editable && " role="textbox" class="editable-section-content-values"
+        data-test="editable-value" @input="onContentChanged($event)"
+      >
+        Attach
+      </span>
+      <span :data-test="supporting-evidence{field}">
+        {{ content }}
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'supporting-evidence',
+  emits: ['update:evidence'],
+  props: {
+    field: {
+      type: String,
+    },
+    value: {
+      type: Array,
+      required: false,
+    },
+    editable: {
+      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)';
+    },
+    content: function() {
+      console.log(this.value);
+
+      if (this.isDataUnavailable) {
+        return {};
+      }
+
+      return this.value[0];
+    },
+  },
+  methods: {
+    onContentChanged(event) {
+      const contentRow = {
+        field: this.field,
+        value: event.target.innerText.split('\n'),
+      };
+      this.$emit('update:sectionText', 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: column;
+  flex: 1 0 0;
+}
+
+.editable-section-content-values {
+  overflow: hidden;
+  resize: both;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 2px solid var(--rosalution-purple-200);
+}
+
+span:focus {
+  color: var(--rosalution-purple-300);
+  outline: none;
+  box-shadow: 0px 5px 5px var(--rosalution-grey-200);
+}
+</style>

frontend/test/components/AnalysisView/SupportingEvidence.spec.js

@@ -0,0 +1,41 @@
+import {describe, it, beforeEach, expect} from 'vitest';
+import {shallowMount} from '@vue/test-utils';
+
+import SupplementalFormList from '@/components/AnalysisView/SupportingEvidence.vue';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+
+/**
+ * Helper mounts and returns the rendered component
+ * @param {props} props props for testing to overwrite default props
+ * @return {VueWrapper} returns a shallow mounted using props
+ */
+function getMountedComponent(props) {
+  const defaultPropsData = {
+    field: "Vetrinary Pathology Report",
+    value: [{
+        "name": "CPAM0046-NM_170707.3 (LMNA)_ c.745C_T (p.R249W) other 2.PDF",
+        "attachment_id": "64dbcfa43d243bf1e782499f",
+        "type": "file",
+        "comments": ""
+    } ]
+  };
+
+  return shallowMount(SupplementalFormList, {
+    props: {...defaultPropsData, ...props},
+    global: {
+      components: {
+        'font-awesome-icon': FontAwesomeIcon,
+      },
+    },
+  });
+}
+
+describe('SupportingEvidence.vue', () => {
+  let wrapper;
+
+  it('renders the supporting evidence when the value exists', async () => {
+    wrapper = getMountedComponent();
+
+    expect(wrapper.html()).to.include('CPAM0046');
+  });
+});