Skip to content

Commit

Permalink
Added the Rosalution/exisiting evidence tab. Debugging why the compon…
Browse files Browse the repository at this point in the history
…ent is not rendering
  • Loading branch information
fatimarabab committed Dec 19, 2024
1 parent 83572b9 commit 0f67c32
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 13 deletions.
3 changes: 3 additions & 0 deletions frontend/src/components/AnalysisView/DiscussionPost.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@ export default {
attachments: {
type: Array,
},
existingEvidence: {
type: Array,
},
thread: {
type: Array,
},
Expand Down
20 changes: 18 additions & 2 deletions frontend/src/components/Dialogs/InputDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand All @@ -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>
21 changes: 19 additions & 2 deletions frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -12,7 +25,7 @@ export default {
type: Object,
required: true,
},
existingAttachments: {
existingEvidence: {
type: Array,
default: () => {
return [];
Expand All @@ -28,4 +41,8 @@ export default {

<style scoped>
.attach-existing-evidence {
width: 3rem;
}
</style>
17 changes: 9 additions & 8 deletions frontend/src/inputDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Check failure on line 95 in frontend/src/inputDialog.js

View workflow job for this annotation

GitHub Actions / nodejs-ci (20.8)

Missing semicolon
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)

Check failure on line 108 in frontend/src/inputDialog.js

View workflow job for this annotation

GitHub Actions / nodejs-ci (20.8)

Missing semicolon
console.log('existing state is pushed')

Check failure on line 109 in frontend/src/inputDialog.js

View workflow job for this annotation

GitHub Actions / nodejs-ci (20.8)

Missing semicolon
return this;
},
edit(attachmentInput) {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/views/AnalysisView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<DiscussionSection
id="Discussion"
:discussions="discussions"
:existingEvidence="attachments"
:userClientId="clientId"
:actions="discussionContextActions"
@discussion:new-post="addDiscussionPost"
Expand Down Expand Up @@ -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) {
Expand Down
10 changes: 10 additions & 0 deletions frontend/test/components/Dialogs/InputDialog.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -32,6 +33,7 @@ describe('InputDialog.vue', () => {
.cancelText('Cancel')
.file(includeComments, 'file', '.pdf, .jpg, .jpeg, .png')
.url(includeComments, includeName)
.existing()
.message('Warning message')
.prompt();
});
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 0f67c32

Please sign in to comment.