wip with basic looks in place

frontend/src/components/AnalysisView/SupportingEvidence.vue

@@ -1,25 +1,36 @@
 <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);',
-      ]"
-    >
+    <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 class="section-content" :data-test="`supporting-evidence-${field}`">
+      <div class="supporting-evidence-content">
+        <span v-if="isDataUnavailable && this.editable" role="textbox" @input="onContentChanged($event)">
+          Attach
+        </span>
+        <span class="status-icon attachment-logo">
+          <font-awesome-icon :icon="typeIcon" size="lg" />
+        </span>
+        <div v-if="content.type == 'file'" @click="$emit('download', content)" target="_blank" rel="noreferrer noopener" class="attachment-data attachment-name">
+          {{ content.name }}
+        </div>
+        <a v-if="content.type == 'link'" :href="content.data" target="_blank" rel="noreferrer noopener" class="attachment-data attachment-name">
+          {{ content.name }}
+        </a>
+      </div>
+      <div class="action-items">
+        <button @click="$emit('edit', content)" data-test="edit-button">
+          <font-awesome-icon icon="pencil" size="xl" />
+        </button>
+        <button v-if="writePermissions" @click="$emit('delete', content)" data-test="delete-button">
+          <font-awesome-icon icon="xmark" size="xl" />
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -41,15 +52,22 @@ export default {
     },
   },
   computed: {
-    isDataUnavailable: function() {
+    isDataUnavailable: function () {
       return this.value == '.' || this.value == 'null' || this.value == null || this.value.length == 0;
     },
-    dataAvailabilityColour: function() {
+    dataAvailabilityColour: function () {
       return this.isDataUnavailable ? 'var(--rosalution-grey-300)' : 'var(--rosalution-black)';
     },
-    content: function() {
-      console.log(this.value);
+    typeIcon: function () {
+      if (this.isDataUnavailable) {
+        return undefined;
+      } else if (this.content.type === 'file') {
+        return ['far', 'file'];
+      }
 
+      return 'link';
+    },
+    content: function () {
       if (this.isDataUnavailable) {
         return {};
       }
@@ -84,22 +102,34 @@ export default {
 
 .section-content {
   display: flex;
-  flex-direction: column;
+  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);
 }
 
-.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);
+.attachment-name {
+  color: var(--rosalution-purple-300);
+  font-weight: bold;
+  cursor: pointer;
 }
 
-span:focus {
-  color: var(--rosalution-purple-300);
-  outline: none;
-  box-shadow: 0px 5px 5px var(--rosalution-grey-200);
+.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>