From 0f67c324739a0e5ae960d80052d03bf4c7759b33 Mon Sep 17 00:00:00 2001
From: Rabab Fatima <rfatima@uab.edu>
Date: Thu, 19 Dec 2024 14:20:56 -0600
Subject: [PATCH] Added the Rosalution/exisiting evidence tab. Debugging why
 the component is not rendering

---
 .../AnalysisView/DiscussionPost.vue           |  3 +++
 .../src/components/Dialogs/InputDialog.vue    | 20 ++++++++++++++++--
 .../InputDialogExistingAttachments.vue        | 21 +++++++++++++++++--
 frontend/src/inputDialog.js                   | 17 ++++++++-------
 frontend/src/views/AnalysisView.vue           |  3 ++-
 .../components/Dialogs/InputDialog.spec.js    | 10 +++++++++
 6 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/AnalysisView/DiscussionPost.vue b/frontend/src/components/AnalysisView/DiscussionPost.vue
index f2cd3ce2..7a21c048 100644
--- a/frontend/src/components/AnalysisView/DiscussionPost.vue
+++ b/frontend/src/components/AnalysisView/DiscussionPost.vue
@@ -79,6 +79,9 @@ export default {
     attachments: {
       type: Array,
     },
+    existingEvidence: {
+      type: Array,
+    },
     thread: {
       type: Array,
     },
diff --git a/frontend/src/components/Dialogs/InputDialog.vue b/frontend/src/components/Dialogs/InputDialog.vue
index 8eb3fa15..e6be2f81 100644
--- a/frontend/src/components/Dialogs/InputDialog.vue
+++ b/frontend/src/components/Dialogs/InputDialog.vue
@@ -18,6 +18,12 @@
             :icon="'file' == tab.icon ? ['far', 'file'] : tab.icon"
             size="2xl">
           </font-awesome-icon>
+          <img
+            v-if="tab.icon == 'rosalution'"
+            src="@/assets/rosalution-logo.svg"
+            class="rosalution-tab"
+            data-test="button-input-dialog-existing-attachments"
+          />
         </button>
       </div>
       <div v-if="dialog.state.message"
@@ -48,7 +54,7 @@
 <script>
 import InputDialogAttachUrl from '@/components/Dialogs/InputDialogAttachUrl.vue';
 import InputDialogUploadFile from '@/components/Dialogs/InputDialogUploadFile.vue';
-import InputDialogExistingEvidence from './InputDialogExistingAttachments.vue';
+import InputDialogExistingEvidence from '@/components/Dialogs/InputDialogExistingAttachments.vue';
 
 import dialog from '@/inputDialog.js';
 
@@ -90,7 +96,7 @@ export default {
 }
 
 .tab-button {
-  width: 2.5rem;
+  width: 3rem;
   background-color: var(--rosalution-white);
   border: none;
   padding-top: var(--p-10);
@@ -100,10 +106,12 @@ export default {
 .tab-header .tab-button:not(:first-child) {
   border-left: 2px var(--rosalution-grey-100) solid;
   padding-left: var(--p-8);
+  padding-right: var(--p-8);
 }
 
 .tab-button-active {
   color: var(--rosalution-blue-200) !important;
+  /* background-color: var(--rosalution-purple-200); */
 }
 
 .button-row {
@@ -124,4 +132,12 @@ export default {
   max-width: 25rem;
 }
 
+.rosalution-tab {
+  width: 2.65rem;
+}
+
+/* .tab-button-active  .rosalution-tab {
+  box-shadow: 0px 12px 22px 1px red;
+} */
+
 </style>
diff --git a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
index d3b10edf..5fe0a5bf 100644
--- a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
+++ b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
@@ -1,5 +1,18 @@
 <template>
-  <div class="attach-supporting-evidence">
+  <div class="attach-existing-evidence">
+    Existiing evidence list
+    <div class="existing-evidences" v-for="evidence in existingEvidence" v-bind:key="evidence.attachment_id">
+      Evidence here
+      <tr class="evidence-row">
+        <td class="evidence-logo">
+          <font-awesome-icon :icon="['far', 'file']" size="lg" v-if="evidence.type==='file'"/>
+          <font-awesome-icon icon="link" size="lg" v-else-if="evidence.type==='link'"/>
+        </td>
+        <td class="evidence-data">
+          {{ evidence.name }}
+        </td>
+      </tr>
+    </div>
   </div>
 </template>
 
@@ -12,7 +25,7 @@ export default {
       type: Object,
       required: true,
     },
-    existingAttachments: {
+    existingEvidence: {
       type: Array,
       default: () => {
         return [];
@@ -28,4 +41,8 @@ export default {
 
 <style scoped>
 
+.attach-existing-evidence {
+  width: 3rem;
+}
+
 </style>
diff --git a/frontend/src/inputDialog.js b/frontend/src/inputDialog.js
index 9570ccad..ecd8d0e5 100644
--- a/frontend/src/inputDialog.js
+++ b/frontend/src/inputDialog.js
@@ -91,21 +91,22 @@ export default {
     state.activeTabName = attachUrlInput.name;
     return this;
   },
-  existing(includeComments=false, includeIcon='rosalution') {
-    const fileInput = {
+  existing() {
+    console.log('Reaching the existing')
+    const existingEvidenceSelection = {
       name: 'input-dialog-existing-attachments',
-      icon: includeIcon,
+      icon: 'rosalution',
       input: {
         data: '',
-        ...(includeComments) && {comments: ''},
-        type: 'rosalution',
+        type: 'existing-evidence',
       },
       props: {
       },
     };
-
-    state.tabs.push(fileInput);
-    state.activeTabName = fileInput.name;
+    state.tabs.push(existingEvidenceSelection);
+    state.activeTabName = existingEvidenceSelection.name;
+    console.log(this)
+    console.log('existing state is pushed')
     return this;
   },
   edit(attachmentInput) {
diff --git a/frontend/src/views/AnalysisView.vue b/frontend/src/views/AnalysisView.vue
index 7b578571..63aa2656 100644
--- a/frontend/src/views/AnalysisView.vue
+++ b/frontend/src/views/AnalysisView.vue
@@ -42,6 +42,7 @@
       <DiscussionSection
         id="Discussion"
         :discussions="discussions"
+        :existingEvidence="attachments"
         :userClientId="clientId"
         :actions="discussionContextActions"
         @discussion:new-post="addDiscussionPost"
@@ -597,7 +598,7 @@ async function openDiscussionModal(postId) {
       .cancelText('Cancel')
       .file(includeComments, 'file', '.png, .jpg, .jpeg, .bmp')
       .url(includeComments, includeName)
-      .existing(includeComments, 'rosalution')
+      .existing()
       .prompt();
 
   if (!attachment) {
diff --git a/frontend/test/components/Dialogs/InputDialog.spec.js b/frontend/test/components/Dialogs/InputDialog.spec.js
index 7e3e1bfe..1961427a 100644
--- a/frontend/test/components/Dialogs/InputDialog.spec.js
+++ b/frontend/test/components/Dialogs/InputDialog.spec.js
@@ -8,6 +8,7 @@ import InputDialogUploadFile from '@/components/Dialogs/InputDialogUploadFile.vu
 import inputDialog from '@/inputDialog.js';
 
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import InputDialogExistingAttachments from '../../../src/components/Dialogs/InputDialogExistingAttachments.vue';
 
 describe('InputDialog.vue', () => {
   let wrapper;
@@ -32,6 +33,7 @@ describe('InputDialog.vue', () => {
           .cancelText('Cancel')
           .file(includeComments, 'file', '.pdf, .jpg, .jpeg, .png')
           .url(includeComments, includeName)
+          .existing()
           .message('Warning message')
           .prompt();
     });
@@ -76,6 +78,14 @@ describe('InputDialog.vue', () => {
       expect(uploadFileComponent.exists()).to.be.true;
     });
 
+    it.only('Should show the rosalution existing evidence tab when clicking the Rosalution tab', async () => {
+      const inputDialogRosalutionTab = wrapper.find('[data-test=button-input-dialog-existing-attachments]');
+      console.log(inputDialogRosalutionTab.html());
+      await inputDialogRosalutionTab.trigger('click');
+      const existingAttachmentsComponent = wrapper.findComponent(InputDialogExistingAttachments);
+      expect(existingAttachmentsComponent.exists()).to.be.true;
+    });
+
     it('Should show the warning message when one is set', async () => {
       const warningMessageElement = wrapper.find('[data-test=warning-message]');
       expect(warningMessageElement.exists()).to.be.true;