From 26d7b0594305e31f551c2fa8706f0881a62c3dc3 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 14:18:42 +0200
Subject: [PATCH 1/8] WIP: handle file attachement in the negotiation creation

---
 src/components/NegotiationForm.vue | 11 +++++++++++
 src/store/actions.js               | 24 +++++++++++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 8b3f524..63190e9 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -56,6 +56,14 @@
             class="form-control"
             :required="criteria.required"
           />
+          <input
+            v-else-if="criteria.type === 'file'"
+            accept=".pdf"
+            class="form-control"
+            :required="criteria.required"
+            :type="criteria.type"
+            @change="handleFileUpload($event, section.name, criteria.name)"
+          >
           <input
             v-else
             v-model="negotiationCriteria[section.name][criteria.name]"
@@ -180,6 +188,9 @@ export default {
         } 
       })
     },
+    handleFileUpload(event, section, criteria) {
+      this.negotiationCriteria[section][criteria] = event.target.files[0]
+    },
     showNotification(variant, header, body) {
       this.notificationVariant = variant
       this.notificationHeader = header
diff --git a/src/store/actions.js b/src/store/actions.js
index 7a36b62..fc2ed65 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -45,12 +45,26 @@ export default {
 
   },
   createNegotiation({ state }, { data }) {
-    return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
+    const formData = new FormData()
+    
+    formData.append("file", data["payload"]["ethics-vote"]["ethics-vote-attachment"])
+
+    const uploadFileHeaders = {headers : getBearerHeaders(state.oidc.access_token)}
+    uploadFileHeaders["Content-type"] = "multipart/form-data"
+    return axios.post("/api/v3/attachments", 
+      formData, uploadFileHeaders)
       .then((response) => {
-        return response.data.id
-      })
-      .catch(() => {
-        return null
+        const attachmentId = response.data.id
+        data.attachments = [{
+          id: attachmentId
+        }]
+        return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
+          .then((response) => {
+            return response.data.id
+          })
+          .catch(() => {
+            return null
+          })
       })
   },
   retrieveNegotiationsByRole({ state, commit }, { userRole }) {

From 837c567b951ac6acd68f079fc6558ecc4ba39693 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 14:51:50 +0200
Subject: [PATCH 2/8] feat: adds code to create attachments in the negotiation

---
 src/components/NegotiationForm.vue |  8 ++++--
 src/store/actions.js               | 44 +++++++++++++++++-------------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 63190e9..b208f6a 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -138,6 +138,7 @@ export default {
       notificationBody: "",
       negotiationCriteria: {},
       accessCriteria: undefined,
+      files: []
     }
   },
   computed: {
@@ -178,7 +179,8 @@ export default {
       await this.createNegotiation({
         data: {
           requests: [this.requestId],
-          payload: this.negotiationCriteria
+          payload: this.negotiationCriteria,
+          files: this.files
         }
       }).then((negotiationId) => {
         if (negotiationId) {
@@ -188,8 +190,8 @@ export default {
         } 
       })
     },
-    handleFileUpload(event, section, criteria) {
-      this.negotiationCriteria[section][criteria] = event.target.files[0]
+    handleFileUpload(event) {
+      this.files.push(event.target.files[0])
     },
     showNotification(variant, header, body) {
       this.notificationVariant = variant
diff --git a/src/store/actions.js b/src/store/actions.js
index fc2ed65..cfd6eb0 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -44,28 +44,34 @@ export default {
       })
 
   },
-  createNegotiation({ state }, { data }) {
-    const formData = new FormData()
-    
-    formData.append("file", data["payload"]["ethics-vote"]["ethics-vote-attachment"])
+  async createNegotiation({ state, commit }, { data }) {
+    if (data.files.length > 0) {
+      const formData = new FormData()
+      formData.append("file", data.files[0])
+      const uploadFileHeaders = getBearerHeaders(state.oidc.access_token)
+
+      uploadFileHeaders["Content-type"] = "multipart/form-data"
+      const attachmentsIds = await axios.post("/api/v3/attachments", formData, uploadFileHeaders)
+        .then((response) => {
+          return [{
+            id: response.data.id
+          }]
+        })
+        .catch(() => {
+          commit("setNotification", "There was an error saving the attachment")
+          return null
+        })
+      data.attachments = attachmentsIds
+    }
 
-    const uploadFileHeaders = {headers : getBearerHeaders(state.oidc.access_token)}
-    uploadFileHeaders["Content-type"] = "multipart/form-data"
-    return axios.post("/api/v3/attachments", 
-      formData, uploadFileHeaders)
+    return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
-        const attachmentId = response.data.id
-        data.attachments = [{
-          id: attachmentId
-        }]
-        return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
-          .then((response) => {
-            return response.data.id
-          })
-          .catch(() => {
-            return null
-          })
+        return response.data.id
       })
+      .catch(() => {
+        commit("setNotification", "There was an error saving the Negotiation")
+      })
+
   },
   retrieveNegotiationsByRole({ state, commit }, { userRole }) {
     return axios.get(`${NEGOTIATION_PATH}`, {headers : getBearerHeaders(state.oidc.access_token), params : {userRole : userRole}})

From e65650ae7c9083a8dce313fda96071dfa46eace5 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 15:05:39 +0200
Subject: [PATCH 3/8] feat: adds support to no attachments

---
 src/store/actions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/actions.js b/src/store/actions.js
index cfd6eb0..8848c77 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -63,6 +63,7 @@ export default {
         })
       data.attachments = attachmentsIds
     }
+    data.files = undefined
 
     return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
       .then((response) => {

From 067d15539fc4c686358b5f0db83f05bb66cdb33d Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 16:41:34 +0200
Subject: [PATCH 4/8] feat: adds the attachments info into the access criteria
 field

---
 oidc_mock/config/clients.json      |  2 +-
 src/components/NegotiationForm.vue | 16 ++++++++----
 src/store/actions.js               | 42 ++++++++++++++++--------------
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/oidc_mock/config/clients.json b/oidc_mock/config/clients.json
index cccb0f4..cc7832d 100644
--- a/oidc_mock/config/clients.json
+++ b/oidc_mock/config/clients.json
@@ -7,7 +7,7 @@
     "AllowAccessTokensViaBrowser": true,
     "RedirectUris": ["http://localhost:8080/logged-in"],
     "AllowedScopes": ["openid", "profile", "email", "permissions"],
-    "IdentityTokenLifetime": 3600,
+    "IdentityTokenLifetime": 36000,
     "AccessTokenLifetime": 3600,
     "ClientClaimsPrefix": ""
   }
diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index b208f6a..25fefa1 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -86,7 +86,12 @@
             class="input-group mb-3"
           >
             <label class="me-2 fw-bold">{{ criteria.label }}:</label>
-            <span>{{ negotiationCriteria[section.name][criteria.name] }}</span>
+            <span v-if="isAttachment(negotiationCriteria[section.name][criteria.name])">
+              {{ negotiationCriteria[section.name][criteria.name].name }}
+            </span>
+            <span v-else>
+              {{ negotiationCriteria[section.name][criteria.name] }}
+            </span>
           </div>
         </div>
       </tab-content>
@@ -138,7 +143,6 @@ export default {
       notificationBody: "",
       negotiationCriteria: {},
       accessCriteria: undefined,
-      files: []
     }
   },
   computed: {
@@ -180,7 +184,6 @@ export default {
         data: {
           requests: [this.requestId],
           payload: this.negotiationCriteria,
-          files: this.files
         }
       }).then((negotiationId) => {
         if (negotiationId) {
@@ -190,8 +193,11 @@ export default {
         } 
       })
     },
-    handleFileUpload(event) {
-      this.files.push(event.target.files[0])
+    isAttachment(value) {
+      return value instanceof File || value instanceof Object
+    },
+    handleFileUpload(event, section, criteria) {
+      this.negotiationCriteria[section][criteria] = event.target.files[0]
     },
     showNotification(variant, header, body) {
       this.notificationVariant = variant
diff --git a/src/store/actions.js b/src/store/actions.js
index 8848c77..709b6fe 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -45,26 +45,30 @@ export default {
 
   },
   async createNegotiation({ state, commit }, { data }) {
-    if (data.files.length > 0) {
-      const formData = new FormData()
-      formData.append("file", data.files[0])
-      const uploadFileHeaders = getBearerHeaders(state.oidc.access_token)
-
-      uploadFileHeaders["Content-type"] = "multipart/form-data"
-      const attachmentsIds = await axios.post("/api/v3/attachments", formData, uploadFileHeaders)
-        .then((response) => {
-          return [{
-            id: response.data.id
-          }]
-        })
-        .catch(() => {
-          commit("setNotification", "There was an error saving the attachment")
-          return null
-        })
-      data.attachments = attachmentsIds
+    data.attachments = []
+    for (const [sectionName, criteriaList] of Object.entries(data.payload)) {
+      for (const [criteriaName, criteriaValue] of Object.entries(criteriaList)) {
+        if (criteriaValue instanceof File) {
+          const formData = new FormData()
+          formData.append("file", criteriaValue)
+          const uploadFileHeaders = getBearerHeaders(state.oidc.access_token)
+          uploadFileHeaders["Content-type"] = "multipart/form-data"
+          
+          const attachmentsIds = await axios.post("/api/v3/attachments", formData, uploadFileHeaders)
+            .then((response) => {
+              return response.data
+            })
+            .catch(() => {
+              commit("setNotification", "There was an error saving the attachment")
+              return null
+            })
+          
+          data.payload[sectionName][criteriaName] = attachmentsIds
+          data.attachments.push(attachmentsIds)
+        }
+      }
     }
-    data.files = undefined
-
+    console.log(data)
     return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data.id

From 6dfdec9b0bb374f4c7df3429367c089fbfbeea83 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 17:26:44 +0200
Subject: [PATCH 5/8] feat: adds attachmnet visualization in negotiation page

---
 src/components/NegotiationForm.vue |  6 +++---
 src/store/actions.js               |  6 +++++-
 src/views/NegotiationPage.vue      | 31 ++++++++++++++++--------------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 25fefa1..64f0cf7 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -38,7 +38,7 @@
         v-for="section in accessCriteria.sections"
         :key="section.name"
         :title="section.label"
-        class="form-step border rounded px-2 py-3 mb-2"
+        class="form-step border rounded-2 px-2 py-3 mb-2"
       >
         <div
           v-for="criteria in section.accessCriteria"
@@ -77,13 +77,13 @@
         <div
           v-for="section in accessCriteria.sections"
           :key="section.name"
-          class="border input-group p-3 mb-3"
+          class="border rounded-2 input-group ps-3 pe-3 pb-3 pt-2 mb-2 mb-3"
         >
           <span class="mb-4 fs-4 fw-bold text-secondary">{{ section.label }}</span>
           <div
             v-for="criteria in section.accessCriteria"
             :key="criteria.name"
-            class="input-group mb-3"
+            class="input-group mb-2"
           >
             <label class="me-2 fw-bold">{{ criteria.label }}:</label>
             <span v-if="isAttachment(negotiationCriteria[section.name][criteria.name])">
diff --git a/src/store/actions.js b/src/store/actions.js
index 709b6fe..596bb53 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -68,7 +68,6 @@ export default {
         }
       }
     }
-    console.log(data)
     return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data.id
@@ -128,8 +127,13 @@ export default {
         return null
       })
   },
+<<<<<<< HEAD
   retrieveNegotiationById({ state, commit }, { negotiationId }) {
     return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, {headers : getBearerHeaders(state.oidc.access_token)})
+=======
+  async retrieveNegotiationById({ state, commit }, { negotiationId }) {
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, getBearerHeaders(state.oidc.access_token))
+>>>>>>> 9ea582b (feat: adds attachmnet visualization in negotiation page)
       .then((response) => {
         return response.data
       })
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 44d0b7f..1bca41e 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -46,21 +46,26 @@
     <div
       v-for="(element, key) in negotiation.payload"
       :key="element"
-      class="border input-group p-3 mb-3"
+      class="border rounded-2 input-group ps-3 pe-3 pb-3 pt-2 mb-3"
     >
-      <span class="mb-3 fs-5 fw-bold text-secondary">
+      <span class="mb-2 fs-5 fw-bold text-secondary">
         {{ key.toUpperCase() }}</span>
       <div
         v-for="(subelement, subelementkey) in element"
         :key="subelement"
-        class="input-group mb-3"
+        class="input-group mb-2"
       >
         <label class="me-2 fw-bold">{{ subelementkey }}:</label>
-        <span> {{ subelement }}</span>
+        <span v-if="isAttachment(subelement)">
+          {{ subelement.name }}
+        </span>
+        <span v-else>
+          {{ subelement }}
+        </span>
       </div>
     </div>
     <div
-      class="border input-group p-3 mb-3"
+      class="border rounded-2 input-group p-3 mb-3"
     >
       <span class="mb-3 fs-5 fw-bold text-secondary">
         RESOURCE STATUS</span>
@@ -155,7 +160,7 @@
     </div>
   </div>
   <div
-    v-if="showLifecycleModal"
+    v-show="showLifecycleModal"
     class="modal"
   >
     <div class="modal-dialog">
@@ -264,9 +269,11 @@ export default {
     }
   },
   async beforeMount() {
+    console.log("Mounting")
     this.negotiation = await this.retrieveNegotiationById({
       negotiationId: this.negotiationId,
     }) 
+    console.log("Got negotiation")
     this.loadPossibleEvents()
   },
   methods: {
@@ -283,6 +290,9 @@ export default {
     computed: {
       ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
     },
+    isAttachment(value) {
+      return value instanceof Object
+    },
     printDate: function (date) {
       return moment(date).format(dateFormat)
     },
@@ -327,14 +337,7 @@ export default {
       }).then((data) => {
         this.responseOptions = data
       })
-    },
-    
-    interactNegotiationApprovalModal(negotiation) {
-      this.showNegotiationApprovalModal = true
-      this.negotiation = negotiation
-      this.loadPossibleEvents()
-    },
-
+    },    
     interactPrivatePostModal(resourceId) {
       this.showPrivatePostModal = true
       this.privatePostResourceId = resourceId

From 211ee17e625f0d9a9cbd40e4bfe309c0861560a7 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 3 Aug 2023 17:35:21 +0200
Subject: [PATCH 6/8] feat: minor ui changes

---
 src/components/NegotiationForm.vue | 4 ++--
 src/views/NegotiationPage.vue      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 64f0cf7..49262ec 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -77,9 +77,9 @@
         <div
           v-for="section in accessCriteria.sections"
           :key="section.name"
-          class="border rounded-2 input-group ps-3 pe-3 pb-3 pt-2 mb-2 mb-3"
+          class="border rounded-2 input-group p-3 mb-2 mb-3"
         >
-          <span class="mb-4 fs-4 fw-bold text-secondary">{{ section.label }}</span>
+          <span class="mb-3 fs-4 fw-bold text-secondary">{{ section.label.toUpperCase() }}</span>
           <div
             v-for="criteria in section.accessCriteria"
             :key="criteria.name"
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 1bca41e..a5f326b 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -46,9 +46,9 @@
     <div
       v-for="(element, key) in negotiation.payload"
       :key="element"
-      class="border rounded-2 input-group ps-3 pe-3 pb-3 pt-2 mb-3"
+      class="border rounded-2 input-group p-3 mb-3"
     >
-      <span class="mb-2 fs-5 fw-bold text-secondary">
+      <span class="mb-3 fs-5 fw-bold text-secondary">
         {{ key.toUpperCase() }}</span>
       <div
         v-for="(subelement, subelementkey) in element"

From f6427c3d3c59bf07095f848ae837db5268975618 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Mon, 18 Sep 2023 14:46:28 +0200
Subject: [PATCH 7/8] feat: adds download file button to negotiations

---
 .eslintrc.js                  |  5 ++++
 src/assets/scss/bbmri.scss    |  4 +++
 src/config/consts.js          |  2 +-
 src/main.js                   |  3 +-
 src/store/actions.js          | 56 +++++++++++++++++++++--------------
 src/views/NegotiationPage.vue | 50 ++++++++++---------------------
 6 files changed, 61 insertions(+), 59 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 130e66a..6984915 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,11 @@ module.exports = {
     "semi": [
       "error",
       "never"
+    ],
+    "key-spacing": [
+      "error", { 
+        "beforeColon": false 
+      }
     ]
   }
 }
diff --git a/src/assets/scss/bbmri.scss b/src/assets/scss/bbmri.scss
index bcf15a3..b00362d 100644
--- a/src/assets/scss/bbmri.scss
+++ b/src/assets/scss/bbmri.scss
@@ -15,4 +15,8 @@ $default-text-color: white;
 
 .btn-primary {
     color: white;
+}
+
+.cursor-pointer {
+   cursor: pointer; 
 }
\ No newline at end of file
diff --git a/src/config/consts.js b/src/config/consts.js
index 0aa83c8..907cc9a 100644
--- a/src/config/consts.js
+++ b/src/config/consts.js
@@ -12,4 +12,4 @@ const MESSAGE_STATUS = {
 }
 
 
-export { dateFormat, ROLES, MESSAGE_STATUS }
\ No newline at end of file
+export { MESSAGE_STATUS, ROLES, dateFormat }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e93ec6d..e297429 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import router from "./router"
 import store from "./store"
 import { sync } from "vuex-router-sync"
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faPencil, faSpinner, faTrash } from "@fortawesome/free-solid-svg-icons"
+import { faDownload, faPencil, faSpinner, faTrash } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap-vue-next/dist/bootstrap-vue-next.css"
@@ -13,6 +13,7 @@ import "bootstrap"
 library.add(faSpinner)
 library.add(faPencil)
 library.add(faTrash)
+library.add(faDownload)
 
 const app = createApp(App)
 
diff --git a/src/store/actions.js b/src/store/actions.js
index 596bb53..f8121db 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,11 +1,12 @@
-import axios from "axios"
 import { ROLES } from "@/config/consts"
+import axios from "axios"
 
 let BASE_API_PATH = "/api/v3"
 const ACCESS_CRITERIA_PATH = `${BASE_API_PATH}/access-criteria/`
 const REQUESTS_PATH = `${BASE_API_PATH}/requests`
 const NEGOTIATION_PATH = `${BASE_API_PATH}/negotiations`
 const USER_PATH = `${BASE_API_PATH}/users/roles`
+const ATTACHMENTS_PATH = `${BASE_API_PATH}/attachments`
 
 function getBearerHeaders(token) {
   return {
@@ -34,7 +35,7 @@ export default {
       })
   },
   retrieveAccessCriteriaByResourceId({ state, commit }, { resourceId }) {
-    return axios.get(`${ACCESS_CRITERIA_PATH}`, {headers : getBearerHeaders(state.oidc.access_token), params : {resourceId : resourceId}})
+    return axios.get(`${ACCESS_CRITERIA_PATH}`, {headers: getBearerHeaders(state.oidc.access_token), params: {resourceId: resourceId}})
       .then((response) => {
         return response.data
       })
@@ -51,7 +52,8 @@ export default {
         if (criteriaValue instanceof File) {
           const formData = new FormData()
           formData.append("file", criteriaValue)
-          const uploadFileHeaders = getBearerHeaders(state.oidc.access_token)
+          const uploadFileHeaders = { headers: getBearerHeaders(state.oidc.access_token) }
+            
           uploadFileHeaders["Content-type"] = "multipart/form-data"
           
           const attachmentsIds = await axios.post("/api/v3/attachments", formData, uploadFileHeaders)
@@ -68,7 +70,7 @@ export default {
         }
       }
     }
-    return axios.post(NEGOTIATION_PATH, data, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.post(NEGOTIATION_PATH, data, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data.id
       })
@@ -78,7 +80,7 @@ export default {
 
   },
   retrieveNegotiationsByRole({ state, commit }, { userRole }) {
-    return axios.get(`${NEGOTIATION_PATH}`, {headers : getBearerHeaders(state.oidc.access_token), params : {userRole : userRole}})
+    return axios.get(`${NEGOTIATION_PATH}`, {headers: getBearerHeaders(state.oidc.access_token), params: {userRole: userRole}})
       .then((response) => {
         return response.data
       })
@@ -88,7 +90,7 @@ export default {
       })
   },
   updateNegotiationStatus({ state, commit }, { negotiationId , event }) {
-    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle/${event}`, {}, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle/${event}`, {}, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         commit("setNotification", `Negotiation updated correctly with data ${response.data.id}`)
         return response.data
@@ -99,7 +101,7 @@ export default {
       })
   },
   retrievePossibleEvents({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle`, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle`, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
@@ -108,7 +110,7 @@ export default {
       })
   },
   retrievePossibleEventsForResource({ state, commit }, { negotiationId, resourceId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle`, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle`, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
@@ -117,7 +119,7 @@ export default {
       })
   },
   updateResourceStatus({ state, commit }, { negotiationId , resourceId, event }) {
-    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle/${event}`, {}, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle/${event}`, {}, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         commit("setNotification", `Negotiation updated correctly with data ${response.data.id}`)
         return response.data
@@ -127,13 +129,8 @@ export default {
         return null
       })
   },
-<<<<<<< HEAD
-  retrieveNegotiationById({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, {headers : getBearerHeaders(state.oidc.access_token)})
-=======
   async retrieveNegotiationById({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, getBearerHeaders(state.oidc.access_token))
->>>>>>> 9ea582b (feat: adds attachmnet visualization in negotiation page)
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
@@ -143,8 +140,8 @@ export default {
   },
   retrievePostsByNegotiationId({ state, commit }, { negotiationId, type, resourceId }) {
     let url = `${NEGOTIATION_PATH}/${negotiationId}/posts`
-    let params = resourceId ? {type: type, resource: resourceId} : {type : type}
-    return axios.get(url, {headers : getBearerHeaders(state.oidc.access_token), params: params})
+    let params = resourceId ? {type: type, resource: resourceId} : {type: type}
+    return axios.get(url, {headers: getBearerHeaders(state.oidc.access_token), params: params})
       .then((response) => {
         return response.data
       })
@@ -153,7 +150,7 @@ export default {
       })
   },
   addMessageToNegotiation({ state, commit }, { data }) {
-    return axios.post(`${NEGOTIATION_PATH}/${data.negotiationId}/posts`, data, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.post(`${NEGOTIATION_PATH}/${data.negotiationId}/posts`, data, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
@@ -162,7 +159,7 @@ export default {
       })
   },
   markMessageAsRead({ state }, { data }) {
-    return axios.put(`${NEGOTIATION_PATH}/${data.negotiationId}/posts/${data.postId}`, data, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${data.negotiationId}/posts/${data.postId}`, data, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data.id
       })
@@ -173,7 +170,7 @@ export default {
   getUnreadMessagesByRole({ state }, { data }) {
     //the role shoud be complementary in relation of the one from the user 
     let complementaryRole = data.Rolename == ROLES.RESEARCHER ? ROLES.REPRESENTATIVE : ROLES.RESEARCHER
-    return axios.get(`${NEGOTIATION_PATH}/${data.negotiationId}/${complementaryRole}/posts`, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${data.negotiationId}/${complementaryRole}/posts`, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
@@ -182,13 +179,28 @@ export default {
       })
   },
   retrieveUserRoles({ state, commit }) {
-    return axios.get(USER_PATH, {headers : getBearerHeaders(state.oidc.access_token)})
+    return axios.get(USER_PATH, {headers: getBearerHeaders(state.oidc.access_token)})
       .then((response) => {
         return response.data
       })
       .catch(() => {
         commit("setNotification", "Error sending message")      
       })
-    
+  },
+  downloadAttachment({ state }, { id, name }) {
+    axios.get(`${ATTACHMENTS_PATH}/${id}`, { headers: getBearerHeaders(state.oidc.access_token), responseType: "blob" })
+      .then((response) => {
+        const href = window.URL.createObjectURL(response.data)
+
+        const anchorElement = document.createElement("a")
+        anchorElement.href = href
+        anchorElement.download = name
+
+        document.body.appendChild(anchorElement)
+        anchorElement.click()
+
+        document.body.removeChild(anchorElement)
+        window.URL.revokeObjectURL(href)
+      })
   }
 }
\ No newline at end of file
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index a5f326b..c158e0d 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -58,6 +58,13 @@
         <label class="me-2 fw-bold">{{ subelementkey }}:</label>
         <span v-if="isAttachment(subelement)">
           {{ subelement.name }}
+          <font-awesome-icon
+            v-if="isAttachment(subelement)"
+            class="ms-1 cursor-pointer"
+            icon="fa fa-download"
+            fixed-width
+            @click.prevent="downloadAttachment({id: subelement.id, name: subelement.name})"
+          />
         </span>
         <span v-else>
           {{ subelement }}
@@ -83,13 +90,9 @@
           <button
             v-if="userRole === 'REPRESENTATIVE' && negotiation.status === 'ONGOING'"
             type="button"
-            class="btn btn-secondary btn-sm me-2 mb-1 order-first"
+            class="btn btn-secondary btn-sm me-2 mb-2 order-first"
             @click.stop="interactLifecycleModal(key)"
           >
-            <font-awesome-icon
-              icon="fa fa-pencil"
-              fixed-width
-            />
             Update State
           </button>
           <button
@@ -97,10 +100,6 @@
             class="btn btn-secondary btn-sm me-2 mb-1 order-last"
             @click.stop="interactPrivatePostModal(key)"
           >
-            <font-awesome-icon
-              icon="fa fa-pencil"
-              fixed-width
-            />
             Private posts
           </button>
         </div>
@@ -205,10 +204,10 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex"
-import { dateFormat, MESSAGE_STATUS, ROLES } from "@/config/consts"
+import NegotiationPosts from "@/components/NegotiationPosts.vue"
+import { MESSAGE_STATUS, ROLES, dateFormat } from "@/config/consts"
 import moment from "moment"
-import  NegotiationPosts  from "@/components/NegotiationPosts.vue"
+import { mapActions, mapGetters } from "vuex"
 
 export default {
   name: "NegotiationPage",
@@ -232,20 +231,18 @@ export default {
         text: "",
         resourceId: undefined,
       },
-      isNegotiationLoaded:false,
+      isNegotiationLoaded: false,
       responseOptions: [],
       selectedItem: "",
       messageStatus: MESSAGE_STATUS,
       showNegotiationApprovalModal: false,
-      showModal: false,
       showPrivatePostModal: false,
       showLifecycleModal: false,
       privatePostResourceId: undefined,
       lifecycleResourceId: undefined,
       availableRoles: ROLES
     }
-  },
-  
+  },  
   computed: {
     requestor() {
       return this.getRole(ROLES.RESEARCHER)
@@ -269,11 +266,9 @@ export default {
     }
   },
   async beforeMount() {
-    console.log("Mounting")
     this.negotiation = await this.retrieveNegotiationById({
       negotiationId: this.negotiationId,
     }) 
-    console.log("Got negotiation")
     this.loadPossibleEvents()
   },
   methods: {
@@ -286,6 +281,7 @@ export default {
       "retrievePossibleEventsForResource",
       "updateNegotiationStatus",
       "updateResourceStatus",
+      "downloadAttachment"
     ]),
     computed: {
       ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
@@ -346,7 +342,7 @@ export default {
       this.showLifecycleModal = true
       this.lifecycleResourceId = resourceId
       this.loadPossibleEventsForResource()
-    },
+    }
   },
 }
 </script>
@@ -371,20 +367,4 @@ export default {
   border: 1px solid gray;
   width: 80%;
 }
-
-.close {
-  color: gray;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-.close:hover,
-.close:focus {
-  color: "$black";
-  text-decoration: none;
-  cursor: pointer;
-}
-.negotiation-list-table tbody tr:hover > td {
-  cursor: pointer;
-}
 </style>
\ No newline at end of file

From 18436d77d8662fb99817ac4609b577acba3ed33d Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Mon, 25 Sep 2023 15:35:07 +0200
Subject: [PATCH 8/8] feat: revert attachment creation to be performed before
 negotiation

---
 src/store/actions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/actions.js b/src/store/actions.js
index f8121db..d694a16 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -64,7 +64,6 @@ export default {
               commit("setNotification", "There was an error saving the attachment")
               return null
             })
-          
           data.payload[sectionName][criteriaName] = attachmentsIds
           data.attachments.push(attachmentsIds)
         }