Displaying existing attachments in the rosalution tab, styled the log…

…o and attachment name, checkbox styling is wip. Paired with Angelina for a good chunk of this.
uab-cgds-worthey · Dec 20, 2024 · 61b0a32 · 61b0a32
1 parent 0014991
commit 61b0a32
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 34 deletions.
diff --git a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="input-dialog-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 class="existing-attachments-list">
+    <div 
+      class="existing-attachments-list-row"
+      v-for="existingAttachment in existingAttachments" 
+      v-bind:key="existingAttachment.attachment_id"
+      data-test="existing-attachments-list"
+    >
+      <span class="existing-attachment-logo">
+        <font-awesome-icon :icon="['far', 'file']" size="lg" v-if="existingAttachment.type==='file'"/>
+        <font-awesome-icon icon="link" size="lg" v-else-if="existingAttachment.type==='link'"/>
+      </span>
+      <label for="existing-attachment-row" class="existing-attachment-name">{{ existingAttachment.name }}</label>
+      <input type="checkbox" class="existing-attachment-checkbox" name="existing-attachment-row"/>
+    </div>
   </div>
 </template>
 
@@ -31,25 +31,59 @@ const props = defineProps({
     type: Object,
     required: false,
   },
-  existingEvidence: {
+  existingAttachments: {
     type: Array,
     default: () => {
       return [];
     },
   },
 });
 
-console.log(props.existingEvidence);
+console.log(props.existingAttachments);
 
 onMounted(async () => {
   console.log('awhyyyyyyyyyyyy');
 });
 </script>
 
-<!-- <style scoped>
+<style scoped>
 
-.attach-existing-evidence {
-  width: 3rem;
+.existing-attachments-list {
+  background-color: var(--rosalution-white);
+  margin: auto;
+  border: 3px var(--rosalution-grey-100) solid;
+  border-radius: var(--input-border-radius);
+  padding: var(--p-8);
 }
 
-</style> -->
+.existing-attachments-list-row {
+  background-color: var(--rosalution-grey-50);
+  padding: var(--p-8);
+  margin: auto;
+  border: 5px var(--rosalution-white) solid;
+  border-radius: var(--input-border-radius);
+}
+
+.existing-attachment-logo {
+  padding: var(--p-8);
+  color: var(--rosalution-black);
+}
+
+.existing-attachment-name {
+  color: var(--rosalution-purple-300);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+/* .existing-attachment-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+} */
+
+.existing-attachment-checkbox {
+  display: flex;
+}
+</style>
diff --git a/frontend/src/inputDialog.js b/frontend/src/inputDialog.js
@@ -91,20 +91,19 @@ export default {
     state.activeTabName = attachUrlInput.name;
     return this;
   },
-  existing() {
+  existing(attachments=[]) {
     console.log('Reaching the existing');
-    const existingEvidenceSelection = {
+    const existingAttachmentsSelected = {
       name: 'input-dialog-existing-attachments',
       icon: 'rosalution',
       input: {
-        data: '',
-        type: 'existing-evidence',
       },
       props: {
+        existingAttachments: attachments,
       },
     };
-    state.tabs.push(existingEvidenceSelection);
-    state.activeTabName = existingEvidenceSelection.name;
+    state.tabs.push(existingAttachmentsSelected);
+    state.activeTabName = existingAttachmentsSelected.name;
     console.log(state.activeTabName);
     // console.log(this)
     // console.log('existing state is pushed')

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
@@ -35,7 +35,7 @@ html {
   --primary-background-color: #F3F5F9;
   --secondary-background-color: var(--rosalution-white);
 
-
+  --checkbox-border-radius: 5px;
   --content-border-radius: 10px;
   --input-border-radius: 15px;
   --button-border-radius: 25px;
@@ -122,6 +122,15 @@ textarea:focus {
   box-shadow:  0px 0 0 4px rgba(69, 28, 137, 0.10);
 }
 
+input[type=checkbox] {
+  appearance: none;
+  aspect-ratio: 1;
+  outline: 3px solid var(--rosalution-purple-300);
+  accent-color: var(--rosalution-grey-50);
+  border-radius: var(--checkbox-border-radius);
+  background-color: var(--rosalution-grey-50);
+}
+
 /** || Primary Grid Site Layout **/
 
 #app {

diff --git a/frontend/src/views/AnalysisView.vue b/frontend/src/views/AnalysisView.vue
@@ -42,7 +42,7 @@
       <DiscussionSection
         id="Discussion"
         :discussions="discussions"
-        :existingEvidence="attachments"
+        :existingAttachments="attachments"
         :userClientId="clientId"
         :actions="discussionContextActions"
         @discussion:new-post="addDiscussionPost"
@@ -592,13 +592,14 @@ async function openDiscussionModal(postId) {
   console.log('Doing something here');
   const includeComments = false;
   const includeName = true;
+
   // const defaultComments = 'This attachment is referenced in the Discussion attachment.';
   const attachment = await inputDialog
       .confirmText('Attach')
       .cancelText('Cancel')
       .file(includeComments, 'file', '.png, .jpg, .jpeg, .bmp')
       .url(includeComments, includeName)
-      .existing()
+      .existing(attachments)
       .prompt();
 
   if (!attachment) {

diff --git a/frontend/test/components/Dialogs/InputDialogExistingAttachments.spec.js b/frontend/test/components/Dialogs/InputDialogExistingAttachments.spec.js
@@ -5,14 +5,29 @@ import InputDialogExistingAttachments from '@/components/Dialogs/InputDialogExis
 
 describe('InputDialogExistingAttachments.vue', () => {
   let wrapper;
+  // const defaultExistingAttachment = {
+  //   data: 'fakeFiledData',
+  //   name: '/path/to/fakeFile.ext',
+  //   type: 'file',
+  // };
 
   beforeEach(() => {
     const defaultProps = {
-      userInput: {
-        'name': '',
-        'data': '',
-        'comments': '',
-      },
+      existingAttachments: [
+        {
+          'name': 'google',
+          'data': 'www.google.com',
+          'attachment_id': 'f45a7f81-53dc-4e77-9826-e45b779637a6',
+          'type': 'link',
+          'comments': 'test link attachment',
+        },
+        {
+          'name': 'Screenshot 2024-12-12 at 2.05.56 PM.png',
+          'attachment_id': '6765a3d392c28d5021f6f7be',
+          'type': 'file',
+          'comments': 'James graduating',
+        },
+      ],
     };
     wrapper = shallowMount(InputDialogExistingAttachments, {
       props: {
@@ -24,4 +39,11 @@ describe('InputDialogExistingAttachments.vue', () => {
   it('is showing the existing attachments', async () => {
     expect(wrapper.exists()).to.be.true;
   });
+
+  it('is displaying list of existing evidences', async () => {
+    const evidenceList = wrapper.find('[data-test=existing-attachments-list]');
+    console.log(evidenceList.html());
+    console.log('HELLOO');
+    expect(evidenceList.exists()).to.be.true;
+  });
 });