From 71723810b2a2576248b2cbb811aa397e1b401adb Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Tue, 3 Oct 2023 13:06:34 +0200
Subject: [PATCH 01/17] fix: restore centered text in negotiation list

---
 src/assets/scss/bbmri.scss           |  2 +-
 src/components/ConfirmationModal.vue | 50 +++++++++++-----------------
 src/components/NegotiationList.vue   |  6 ++--
 3 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/assets/scss/bbmri.scss b/src/assets/scss/bbmri.scss
index 68da9f3..9ec2dc4 100644
--- a/src/assets/scss/bbmri.scss
+++ b/src/assets/scss/bbmri.scss
@@ -3,7 +3,7 @@ $theme-colors: (
     "secondary": #003674,
     "danger": #dc3545,
     "warning": #e95713,
-    "info": #017ffd,
+    "info": #3c3c3d,
     "light": #e7e7e7,
     "dark": #3c3c3d
 );
diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index c7b687c..34e5fc9 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -1,31 +1,31 @@
 
 <template>
-  <div
-    class="modal"
-  >
+  <div class="modal">
     <div class="modal-dialog">
       <div class="modal-content">
-        <h1 class="modal-header">
+        <h3 class="modal-header">
           Are you sure you want to abandon this Negotiation?
-        </h1>
+        </h3>
         <div class="modal-body">
           <p>
             This is means that you will not be able to access this negotiation again.
           </p>
-          <div class="modal-footer justify-content-center">
-            <button
-              class="btn btn-secondary"
-              @click="closeModal"
-            >
-              No
-            </button>
-            <button
-              class="btn btn-danger"
-              @click="closeModal; $emit('abandon-negotiation')"
-            >
-              Yes
-            </button>
-          </div>
+        </div>
+        <div class="modal-footer justify-content-center bg-primary">
+          <button
+            type="button"
+            class="btn btn-info"
+            data-bs-dismiss="modal"
+            @click="closeModal"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="btn btn-secondary"
+          >
+            Confirm
+          </button>
         </div>
       </div>
     </div>
@@ -41,16 +41,4 @@ export default {
     }
   }
 }
-
-
 </script>
-
-<style scoped>
-.modal {
-  width: 400px;
-  padding: 20px;
-  margin: 100px auto;
-  border-radius: 10px;
-  z-index: 1;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index c4ca187..15b3e8c 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -3,7 +3,7 @@
   <div class="container">
     <div class="row">
       <div
-        class="col-9 d-flex"
+        class="col-9 d-flex justify-content-center"
       >
         <div
           v-if="negotiations.length > 0"
@@ -30,9 +30,9 @@
         <div
           v-else
         >
-          <h1 class="text-center">
+          <h2 class="text-center">
             No Negotiations found
-          </h1>
+          </h2>
         </div>
       </div>
       <div

From 0b878e2ea90c2abad3fd48052c0d5810da723142 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Tue, 3 Oct 2023 15:17:34 +0200
Subject: [PATCH 02/17] WIP: refactoring modals

---
 src/components/ConfirmationModal.vue | 43 ++++++++++++++++++++-------
 src/views/NegotiationPage.vue        | 44 +++++++---------------------
 2 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index 34e5fc9..6a8f717 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -1,14 +1,20 @@
 
 <template>
-  <div class="modal">
-    <div class="modal-dialog">
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="{{id}}Label"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
-        <h3 class="modal-header">
-          Are you sure you want to abandon this Negotiation?
-        </h3>
+        <h4 class="modal-header">
+          {{ title }}
+        </h4>
         <div class="modal-body">
           <p>
-            This is means that you will not be able to access this negotiation again.
+            {{ text }}
           </p>
         </div>
         <div class="modal-footer justify-content-center bg-primary">
@@ -16,28 +22,43 @@
             type="button"
             class="btn btn-info"
             data-bs-dismiss="modal"
-            @click="closeModal"
           >
             Cancel
           </button>
           <button
             type="button"
             class="btn btn-secondary"
+            data-bs-dismiss="modal"
+            @click="emitConfirm"
           >
             Confirm
           </button>
         </div>
       </div>
     </div>
-  </div>
+  </div> 
 </template>
 
 <script>
 export default {
-  emits: ["close-confirmation-modal", "abandon-negotiation"],
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["confirm"],
   methods: {
-    closeModal() {
-      this.$emit("close-confirmation-modal")
+    emitConfirm () {
+      this.$emit("confirm")
     }
   }
 }
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 680cfaa..0a0bc06 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -9,7 +9,14 @@
     <i class="bi-arrow-left" />
     Go back
   </button>
-  
+
+  <confirmation-modal
+    id="abandonModal"
+    title="Are you sure you want to abandon this Negotiation?"
+    text="Confirming, you will not be able to access this negotiation again."
+    @confirm="updateNegotiation('ABANDON')"
+  />
+
   <div
     v-if="isNegotiationLoaded"
     class="mt-4"
@@ -131,7 +138,8 @@
                 class="float-end"
                 type="button"
                 role="button"
-                @click="showConfirmationDialog"
+                data-bs-toggle="modal"
+                data-bs-target="#abandonModal"
               >
                 <i class="bi bi-trash" />
                 Abandon
@@ -265,11 +273,6 @@
       </div>
     </div>
   </div>
-  <confirmation-modal
-    v-if="showConfirmationModal"
-    @close-confirmation-modal="showConfirmationDialog"
-    @abandon-negotiation="updateNegotiation('ABANDON')"
-  />
 </template>
 
 <script>
@@ -307,8 +310,6 @@ export default {
       responseOptions: [],
       selectedItem: "",
       messageStatus: MESSAGE_STATUS,
-      showNegotiationApprovalModal: false,
-      showConfirmationModal: false,
       showPrivatePostModal: false,
       showLifecycleModal: false,
       privatePostResourceId: undefined,
@@ -396,9 +397,6 @@ export default {
       "updateResourceStatus",
       "downloadAttachment"
     ]),
-    showConfirmationDialog() {
-      this.showConfirmationModal = !this.showConfirmationModal
-    },
     async isRepresentativeForResource(resourceId) {
       return !!this.roles.includes(resourceId)
 
@@ -424,7 +422,6 @@ export default {
         negotiationId: this.negotiation.id,
         event: action
       })
-      this.showNegotiationApprovalModal = false
     },
     async updateResource() {
       await this.updateResourceStatus({
@@ -463,37 +460,16 @@ export default {
 </script>
 
 <style scoped>
-.modal {
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-.modal-title {
-  font-size: large;
-}
 .list-group-item {
   padding: 10px;
   margin-top: 5px;
   border: none;
   border-bottom: lightgray 1px solid;
 }
-.modal-content {
-  background-color: "$light";
-  margin: 15% auto;
-  padding: 20px;
-  border: 1px solid gray;
-  width: 80%;
-}
 h1 {
   font-family: Calibri, Arial, sans-serif;
   color: var(--bs-primary);
   font-weight: bolder;
   font-size: 60px;
 }
-.negotiation-list-table tbody tr:hover > td {
-  cursor: pointer;
-}
 </style>
\ No newline at end of file

From 420bf7a5c9829dcc8d4441167cfcb96cae08b181 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Tue, 3 Oct 2023 16:26:59 +0200
Subject: [PATCH 03/17] WIP: adding modals components. Update status

---
 src/views/NegotiationPage.vue | 71 +++++++++--------------------------
 1 file changed, 18 insertions(+), 53 deletions(-)

diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 0a0bc06..eecfdfd 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -17,6 +17,13 @@
     @confirm="updateNegotiation('ABANDON')"
   />
 
+  <update-status-modal
+    id="updateStatusModal"
+    :title="lifecycleResourceId"
+    :options="responseOptions"
+    @selected="updateResource"
+  />
+
   <div
     v-if="isNegotiationLoaded"
     class="mt-4"
@@ -86,8 +93,12 @@
                       <span>
                         {{ getStatusForCollection(collection) }}
                         <button
-                          v-if="userRole === 'REPRESENTATIVE' && negotiation.status === 'ONGOING' && isRepresentativeForResource(collection)"
-                          class="btn btn-secondary btn-sm me-2 mb-1  float-end order-first"
+                          v-if="userRole === 'REPRESENTATIVE' 
+                            && negotiation.status === 'ONGOING'
+                            && isRepresentativeForResource(collection)"
+                          class="btn btn-secondary btn-sm me-2 mb-1 float-end order-first"
+                          data-bs-toggle="modal"
+                          data-bs-target="#updateStatusModal"
                           @click.stop="interactLifecycleModal(collection)"
                         >
                           <i class="bi-gear" />
@@ -229,63 +240,20 @@
       </div>
     </div>
   </div>
-
-  <div
-    v-show="showLifecycleModal"
-    class="modal"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title">
-            Resource ID: {{ lifecycleResourceId }}
-          </h1>
-        </div>
-        <div class="modal-body">
-          <label for="actions">Respond:</label>
-          <select v-model="selectedItem">
-            <option
-              v-for="response in responseOptions"
-              :key="response"
-              :value="response"
-            >
-              {{ response }}
-            </option>
-          </select>
-          <p>Selected item: {{ selectedItem }}</p>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-danger"
-            @click="showLifecycleModal = false"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-secondary"
-            @click="updateResource"
-          >
-            Submit
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import NegotiationPosts from "@/components/NegotiationPosts.vue"
+import ConfirmationModal from "@/components/modals/ConfirmationModal.vue"
+import UpdateStatusModal from "@/components/modals/UpdateStatusModal.vue"
 import { MESSAGE_STATUS, ROLES, dateFormat } from "@/config/consts"
 import moment from "moment"
 import { mapActions, mapGetters } from "vuex"
-import ConfirmationModal from "@/components/ConfirmationModal.vue"
 
 export default {
   name: "NegotiationPage",
   components: {
-    ConfirmationModal, NegotiationPosts,
+    ConfirmationModal, UpdateStatusModal, NegotiationPosts,
   },
   props: {
     negotiationId: {
@@ -311,7 +279,6 @@ export default {
       selectedItem: "",
       messageStatus: MESSAGE_STATUS,
       showPrivatePostModal: false,
-      showLifecycleModal: false,
       privatePostResourceId: undefined,
       lifecycleResourceId: undefined,
       availableRoles: ROLES
@@ -423,13 +390,12 @@ export default {
         event: action
       })
     },
-    async updateResource() {
+    async updateResource(status) {
       await this.updateResourceStatus({
         negotiationId: this.negotiation.id,
         resourceId: this.lifecycleResourceId,
-        event: this.selectedItem,
+        event: status,
       })
-      this.showLifecycleModal = false
     },
     loadPossibleEventsForResource() {
       this.retrievePossibleEventsForResource({
@@ -451,7 +417,6 @@ export default {
       this.privatePostResourceId = resourceId
     },
     interactLifecycleModal(resourceId) {
-      this.showLifecycleModal = true
       this.lifecycleResourceId = resourceId
       this.loadPossibleEventsForResource()
     }

From 1d873ed1880f128c228c847955dae9a82caf5a69 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Tue, 3 Oct 2023 17:48:56 +0200
Subject: [PATCH 04/17] refactor: adds private post modal and moves all modals
 in one directory

---
 src/components/NegotiationPosts.vue           | 14 ++-
 .../{ => modals}/ConfirmationModal.vue        |  1 -
 src/components/modals/PrivatePostModal.vue    | 59 +++++++++++++
 src/components/modals/UpdateStatusModal.vue   | 87 +++++++++++++++++++
 src/views/NegotiationPage.vue                 | 71 +++++----------
 5 files changed, 176 insertions(+), 56 deletions(-)
 rename src/components/{ => modals}/ConfirmationModal.vue (99%)
 create mode 100644 src/components/modals/PrivatePostModal.vue
 create mode 100644 src/components/modals/UpdateStatusModal.vue

diff --git a/src/components/NegotiationPosts.vue b/src/components/NegotiationPosts.vue
index 1e1133b..1ee1f7e 100644
--- a/src/components/NegotiationPosts.vue
+++ b/src/components/NegotiationPosts.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="negotiation && negotiation.postsEnabled">
-    <h3>Comments</h3>
+    <h5>Comments</h5>
     <div
       v-for="post in posts"
       :key="post.id"
@@ -20,7 +20,11 @@
         {{ post.text }}
       </div>
     </div>
-    <h3>Send a {{ scope }} message</h3>
+    <hr
+      v-if="posts.length === 0"
+      class="my-3"
+    >
+    <h5>Send a {{ scope }} message</h5>
     <form
       class="mb-4"
       @submit.prevent="addMessage"
@@ -38,12 +42,6 @@
       </button>
     </form>
   </div>
-  <div v-else>
-    <h5>
-      Your request is waiting for approval by our team. No need to keep refreshing the page,
-      you will be notified of any changes via email.
-    </h5>
-  </div>
 </template>
 
 <script>
diff --git a/src/components/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
similarity index 99%
rename from src/components/ConfirmationModal.vue
rename to src/components/modals/ConfirmationModal.vue
index 6a8f717..a211737 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/modals/ConfirmationModal.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div
     :id="id"
diff --git a/src/components/modals/PrivatePostModal.vue b/src/components/modals/PrivatePostModal.vue
new file mode 100644
index 0000000..da83541
--- /dev/null
+++ b/src/components/modals/PrivatePostModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="{{id}}Label"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-scrollable modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">
+            Resource ID: {{ resourceId }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <NegotiationPosts 
+            :negotiation="negotiation"
+            :user-role="userRole"
+            scope="private"
+            :resource-id="resourceId"
+          />
+        </div>
+        <div class="modal-footer justify-content-center bg-primary">
+          <button
+            type="button"
+            class="btn btn-info"
+            data-bs-dismiss="modal"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div> 
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    resourceId: {
+      type: String,
+      required: true
+    },
+    negotiation: {
+      type: Object,
+      required: true
+    },
+    userRole: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/UpdateStatusModal.vue b/src/components/modals/UpdateStatusModal.vue
new file mode 100644
index 0000000..259be56
--- /dev/null
+++ b/src/components/modals/UpdateStatusModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="{{id}}Label"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header justify-content-center">
+          <h4 class="modal-title">
+            {{ title }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <label
+            class="form-label"
+          >Select new status: </label>
+          <select
+            v-model="selectedItem"
+            class="form-select"
+          >
+            <option
+              v-for="response in options"
+              :key="response"
+              :value="response"
+            >
+              {{ response }}
+            </option>
+          </select>
+        </div>
+        <div class="modal-footer justify-content-center bg-primary">
+          <button
+            type="button"
+            class="btn btn-info"
+            data-bs-dismiss="modal"
+          >
+            Close
+          </button>
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+            @click="emitSelected"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["selected"],
+  data() {
+    return {
+      selectedItem: "",
+    }
+  },
+  methods: {
+    emitSelected () {
+      this.$emit("selected", this.selectedItem)
+    }
+  }
+}
+</script>
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index eecfdfd..d8dcdee 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -24,11 +24,19 @@
     @selected="updateResource"
   />
 
+  <private-post-modal
+    v-if="negotiation"
+    id="privatePostModal"
+    :resource-id="privatePostResourceId"
+    :negotiation="negotiation"
+    :user-role="userRole"
+  />
+
   <div
     v-if="isNegotiationLoaded"
     class="mt-4"
   >
-    <h1>
+    <h1 class="text-primary fw-bold">
       {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
     </h1>
     <div class="row">
@@ -104,9 +112,12 @@
                           <i class="bi-gear" />
                         </button>
                         <button
+                          v-if="negotiation && negotiation.postsEnabled"
                           type="button"
                           class="btn btn-secondary btn-sm me-2 mb-1 float-end"
-                          @click.stop="interactPrivatePostModal(collection)"
+                          data-bs-target="#privatePostModal"
+                          data-bs-toggle="modal"
+                          @click.prevent="interactPrivatePostModal(collection)"
                         >
                           <i class="bi-chat-fill" />
                         </button>
@@ -119,10 +130,16 @@
           </li>
         </ul>
         <NegotiationPosts
+          v-if="negotiation && negotiation.postsEnabled"
           :negotiation="negotiation"
           :user-role="userRole"
           scope="public"
         />
+        <div v-else>
+          <h5>
+            Your request is waiting for approval by our team. You will be notified of any changes via email.
+          </h5>
+        </div>
       </div>
       <div
         class="col-4"
@@ -208,44 +225,13 @@
       </div>
     </div>
   </div>
-
-  <div
-    v-if="showPrivatePostModal"
-    class="modal"
-  >
-    <div class="modal-dialog modal-dialog-scrollable modal-lg">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title">
-            Resource ID: {{ privatePostResourceId }}
-          </h1>
-        </div>
-        <div class="modal-body">
-          <NegotiationPosts 
-            :negotiation="negotiation"
-            :user-role="userRole"
-            scope="private"
-            :resource-id="privatePostResourceId"
-          />
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-danger"
-            @click="showPrivatePostModal = false"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import NegotiationPosts from "@/components/NegotiationPosts.vue"
 import ConfirmationModal from "@/components/modals/ConfirmationModal.vue"
 import UpdateStatusModal from "@/components/modals/UpdateStatusModal.vue"
+import PrivatePostModal from "@/components/modals/PrivatePostModal.vue"
 import { MESSAGE_STATUS, ROLES, dateFormat } from "@/config/consts"
 import moment from "moment"
 import { mapActions, mapGetters } from "vuex"
@@ -253,7 +239,7 @@ import { mapActions, mapGetters } from "vuex"
 export default {
   name: "NegotiationPage",
   components: {
-    ConfirmationModal, UpdateStatusModal, NegotiationPosts,
+    ConfirmationModal, UpdateStatusModal, PrivatePostModal, NegotiationPosts,
   },
   props: {
     negotiationId: {
@@ -348,7 +334,9 @@ export default {
     this.negotiation = await this.retrieveNegotiationById({
       negotiationId: this.negotiationId,
     }) 
-    this.loadPossibleEvents()
+    this.responseOptions = await this.retrievePossibleEvents({
+      negotiationId: this.negotiation.id
+    })
     this.roles = await this.retrieveUserRoles()
   },
   methods: {
@@ -405,15 +393,7 @@ export default {
         this.responseOptions = data
       })
     },
-    loadPossibleEvents() {
-      this.retrievePossibleEvents({
-        negotiationId: this.negotiation.id
-      }).then((data) => {
-        this.responseOptions = data
-      })
-    },
     interactPrivatePostModal(resourceId) {
-      this.showPrivatePostModal = true
       this.privatePostResourceId = resourceId
     },
     interactLifecycleModal(resourceId) {
@@ -433,8 +413,5 @@ export default {
 }
 h1 {
   font-family: Calibri, Arial, sans-serif;
-  color: var(--bs-primary);
-  font-weight: bolder;
-  font-size: 60px;
 }
 </style>
\ No newline at end of file

From 39cddab211fa9818f867c8af315b1d29e34c6696 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Tue, 3 Oct 2023 18:14:32 +0200
Subject: [PATCH 05/17] refactor: adds template for NegotiationModal used by
 all the other modals

---
 src/components/NegotiationModal.vue         | 59 --------------
 src/components/modals/ConfirmationModal.vue | 65 +++++++--------
 src/components/modals/NegotiationModal.vue  | 48 +++++++++++
 src/components/modals/PrivatePostModal.vue  | 52 +++++-------
 src/components/modals/UpdateStatusModal.vue | 88 +++++++++------------
 src/views/NegotiationPage.vue               |  2 +-
 6 files changed, 136 insertions(+), 178 deletions(-)
 delete mode 100644 src/components/NegotiationModal.vue
 create mode 100644 src/components/modals/NegotiationModal.vue

diff --git a/src/components/NegotiationModal.vue b/src/components/NegotiationModal.vue
deleted file mode 100644
index 95ac5fe..0000000
--- a/src/components/NegotiationModal.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div
-    id="exampleModal"
-    class="modal fade"
-    tabindex="-1"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1
-            id="exampleModalLabel"
-            class="modal-title fs-5"
-          >
-            Modal title
-          </h1>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          />
-        </div>
-        <div class="modal-body">
-          ...
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-          >
-            Save changes
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "NegotiationModal",
-  props: {
-    modalActive: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
diff --git a/src/components/modals/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
index a211737..53be0d8 100644
--- a/src/components/modals/ConfirmationModal.vue
+++ b/src/components/modals/ConfirmationModal.vue
@@ -1,45 +1,38 @@
 <template>
-  <div
+  <NegotiationModal
     :id="id"
-    class="modal fade"
-    tabindex="-1"
-    aria-labelledby="{{id}}Label"
-    aria-hidden="true"
+    :title="title"
   >
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <h4 class="modal-header">
-          {{ title }}
-        </h4>
-        <div class="modal-body">
-          <p>
-            {{ text }}
-          </p>
-        </div>
-        <div class="modal-footer justify-content-center bg-primary">
-          <button
-            type="button"
-            class="btn btn-info"
-            data-bs-dismiss="modal"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-            @click="emitConfirm"
-          >
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  </div> 
+    <template #body>
+      <p>
+        {{ text }}
+      </p>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="btn btn-secondary"
+        data-bs-dismiss="modal"
+        @click="emitConfirm"
+      >
+        Confirm
+      </button>
+    </template>
+  </NegotiationModal>
 </template>
 
 <script>
+import NegotiationModal from "./NegotiationModal.vue"
+
 export default {
+  components: { NegotiationModal },
   props: {
     id: {
       type: String,
@@ -56,7 +49,7 @@ export default {
   },
   emits: ["confirm"],
   methods: {
-    emitConfirm () {
+    emitConfirm() {
       this.$emit("confirm")
     }
   }
diff --git a/src/components/modals/NegotiationModal.vue b/src/components/modals/NegotiationModal.vue
new file mode 100644
index 0000000..5c6bdb6
--- /dev/null
+++ b/src/components/modals/NegotiationModal.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="{{id}}Label"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <h4 class="modal-header">
+          {{ title }}
+        </h4>
+        <div class="modal-body">
+          <slot name="body" />
+        </div>
+        <div class="modal-footer justify-content-center bg-primary">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div> 
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["confirm"],
+  methods: {
+    emitConfirm () {
+      this.$emit("confirm")
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/PrivatePostModal.vue b/src/components/modals/PrivatePostModal.vue
index da83541..09d93b8 100644
--- a/src/components/modals/PrivatePostModal.vue
+++ b/src/components/modals/PrivatePostModal.vue
@@ -1,38 +1,26 @@
 <template>
-  <div
+  <NegotiationModal
     :id="id"
-    class="modal fade"
-    tabindex="-1"
-    aria-labelledby="{{id}}Label"
-    aria-hidden="true"
+    :title="`Resource: ${resourceId}`"
   >
-    <div class="modal-dialog modal-dialog-scrollable modal-lg">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h4 class="modal-title">
-            Resource ID: {{ resourceId }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <NegotiationPosts 
-            :negotiation="negotiation"
-            :user-role="userRole"
-            scope="private"
-            :resource-id="resourceId"
-          />
-        </div>
-        <div class="modal-footer justify-content-center bg-primary">
-          <button
-            type="button"
-            class="btn btn-info"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div> 
+    <template #body>
+      <NegotiationPosts 
+        :negotiation="negotiation"
+        :user-role="userRole"
+        scope="private"
+        :resource-id="resourceId"
+      />
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Close
+      </button>
+    </template>
+  </NegotiationModal>
 </template>
 
 <script>
diff --git a/src/components/modals/UpdateStatusModal.vue b/src/components/modals/UpdateStatusModal.vue
index 259be56..799ad59 100644
--- a/src/components/modals/UpdateStatusModal.vue
+++ b/src/components/modals/UpdateStatusModal.vue
@@ -1,55 +1,43 @@
 <template>
-  <div
+  <NegotiationModal
     :id="id"
-    class="modal fade"
-    tabindex="-1"
-    aria-labelledby="{{id}}Label"
-    aria-hidden="true"
+    :title="`Resource: ${resourceId}`"
   >
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header justify-content-center">
-          <h4 class="modal-title">
-            {{ title }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <label
-            class="form-label"
-          >Select new status: </label>
-          <select
-            v-model="selectedItem"
-            class="form-select"
-          >
-            <option
-              v-for="response in options"
-              :key="response"
-              :value="response"
-            >
-              {{ response }}
-            </option>
-          </select>
-        </div>
-        <div class="modal-footer justify-content-center bg-primary">
-          <button
-            type="button"
-            class="btn btn-info"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-            @click="emitSelected"
-          >
-            Submit
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+    <template #body>
+      <label
+        class="form-label"
+      >Select new status: </label>
+      <select
+        v-model="selectedItem"
+        class="form-select"
+      >
+        <option
+          v-for="response in options"
+          :key="response"
+          :value="response"
+        >
+          {{ response }}
+        </option>
+      </select>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Close
+      </button>
+      <button
+        type="button"
+        class="btn btn-secondary"
+        data-bs-dismiss="modal"
+        @click="emitSelected"
+      >
+        Submit
+      </button>
+    </template>
+  </NegotiationModal>
 </template>
 
 <script>
@@ -59,7 +47,7 @@ export default {
       type: String,
       required: true
     },
-    title: {
+    resourceId: {
       type: String,
       required: true
     },
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index d8dcdee..9266f4b 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -19,7 +19,7 @@
 
   <update-status-modal
     id="updateStatusModal"
-    :title="lifecycleResourceId"
+    :resource-id="lifecycleResourceId"
     :options="responseOptions"
     @selected="updateResource"
   />

From d841bf4f23211ffab992934f7c1da56e76960333 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Wed, 4 Oct 2023 13:25:46 +0200
Subject: [PATCH 06/17] refactor: changes modal for NegotiationCreationPage

---
 src/components/NegotiationForm.vue          | 63 ++++++++++-----------
 src/components/modals/ConfirmationModal.vue |  9 +--
 src/components/modals/PrivatePostModal.vue  |  4 +-
 src/components/modals/UpdateStatusModal.vue |  4 +-
 src/views/NegotiationPage.vue               |  4 +-
 5 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 49262ec..e763db7 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -1,4 +1,17 @@
 <template>
+  <button
+    ref="openModal"
+    hidden
+    data-bs-toggle="modal"
+    data-bs-target="#feedbackModal"
+  />
+  <feedback-modal
+    id="feedbackModal"
+    :title="notificationTitle"
+    :text="notificationText"
+    dismiss-button-text="Back to HomePage"
+    @dismiss="backToHomePage"
+  />
   <div
     v-if="loading"
     class="d-flex align-items-center justify-content-center"
@@ -13,21 +26,6 @@
     </h4>
   </div>
   <div v-else>
-    <b-modal 
-      id="negotiation-feedback"
-      v-model="notificationVisible"
-      :title="notificationHeader"
-      hide-footer="true"
-      :header-bg-variant="notificationVariant"
-      @hide.prevent
-    >
-      <p class="my-4">
-        {{ notificationBody }}
-      </p>
-      <b-button @click="closeNegotiation">
-        Back to Negotiations
-      </b-button>
-    </b-modal>
     <form-wizard
       v-if="accessCriteria"
       :start-index="0"
@@ -120,15 +118,17 @@
 </template>
 
 <script>
-import { mapActions } from "vuex"
+import FeedbackModal from "@/components/modals/FeedbackModal.vue"
 import { FormWizard, TabContent } from "vue3-form-wizard"
 import "vue3-form-wizard/dist/style.css"
+import { mapActions } from "vuex"
 
 export default {
   name: "NegotiationForm",
   components: {
     FormWizard,
     TabContent,
+    FeedbackModal
   },
   props: {
     requestId: {
@@ -138,22 +138,18 @@ export default {
   },
   data() {
     return {
-      notificationVariant: "light",
-      notificationHeader: "",
-      notificationBody: "",
+      notificationTitle: "",
+      notificationText: "",
       negotiationCriteria: {},
       accessCriteria: undefined,
     }
   },
   computed: {
-    notificationVisible() {
-      return this.notificationHeader !== ""
-    },
     loading() {
       if (this.accessCriteria !== undefined) {
         this.initNegotiationCriteria()
       }
-      return this.accessCriteria === undefined && !this.notificationVisible
+      return this.accessCriteria === undefined
     },
   },
   async mounted() {
@@ -162,13 +158,12 @@ export default {
     })
     if (result.code) {        
       if (result.code == 404) {
-        this.showNotification("danger", "Error", "Request not found")
+        this.showNotification("Error", "Request not found")
       } else {
-        this.showNotification("danger", "Error", "Error retrieving the request")
+        this.showNotification("Error", "Cannot contact the server to get request information")
       }
     } else if (result.negotiationId) {    
-      // if the negotiationId is present it means that the request is already associated to a negotiation
-      this.showNotification("danger", "Error", "Request already associated to a negotiation")
+      this.showNotification("Error", "Request already submitted")
     } else {
       await this.retrieveAccessCriteriaByResourceId({
         resourceId: result.resources[0].id
@@ -187,7 +182,7 @@ export default {
         }
       }).then((negotiationId) => {
         if (negotiationId) {
-          this.showNotification("light", 
+          this.showNotification(
             "Negotiation Created Correctly", 
             "You can follow the status of this negotiation in your researcher page")
         } 
@@ -199,13 +194,13 @@ export default {
     handleFileUpload(event, section, criteria) {
       this.negotiationCriteria[section][criteria] = event.target.files[0]
     },
-    showNotification(variant, header, body) {
-      this.notificationVariant = variant
-      this.notificationHeader = header
-      this.notificationBody = body
+    showNotification(header, body) {
+      this.$refs.openModal.click()
+      this.notificationTitle = header
+      this.notificationText = body
     },
-    closeNegotiation() {
-      this.$router.push("/researcher")
+    backToHomePage() {
+      this.$router.push("/")
     },
     initNegotiationCriteria() {
       for (var section of this.accessCriteria.sections) {
diff --git a/src/components/modals/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
index 53be0d8..ba3700d 100644
--- a/src/components/modals/ConfirmationModal.vue
+++ b/src/components/modals/ConfirmationModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <NegotiationModal
+  <NegotiatorModal
     :id="id"
     :title="title"
   >
@@ -25,14 +25,15 @@
         Confirm
       </button>
     </template>
-  </NegotiationModal>
+  </NegotiatorModal>
 </template>
 
 <script>
-import NegotiationModal from "./NegotiationModal.vue"
+
+import NegotiatorModal from "./NegotiatorModal.vue"
 
 export default {
-  components: { NegotiationModal },
+  components: { NegotiatorModal },
   props: {
     id: {
       type: String,
diff --git a/src/components/modals/PrivatePostModal.vue b/src/components/modals/PrivatePostModal.vue
index 09d93b8..b0c7995 100644
--- a/src/components/modals/PrivatePostModal.vue
+++ b/src/components/modals/PrivatePostModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <NegotiationModal
+  <NegotiatorModal
     :id="id"
     :title="`Resource: ${resourceId}`"
   >
@@ -20,7 +20,7 @@
         Close
       </button>
     </template>
-  </NegotiationModal>
+  </NegotiatorModal>
 </template>
 
 <script>
diff --git a/src/components/modals/UpdateStatusModal.vue b/src/components/modals/UpdateStatusModal.vue
index 799ad59..f2190ef 100644
--- a/src/components/modals/UpdateStatusModal.vue
+++ b/src/components/modals/UpdateStatusModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <NegotiationModal
+  <NegotiatorModal
     :id="id"
     :title="`Resource: ${resourceId}`"
   >
@@ -37,7 +37,7 @@
         Submit
       </button>
     </template>
-  </NegotiationModal>
+  </NegotiatorModal>
 </template>
 
 <script>
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 9266f4b..6e0b71b 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -21,6 +21,7 @@
     id="updateStatusModal"
     :resource-id="lifecycleResourceId"
     :options="responseOptions"
+    :visible="updateStatusVisible"
     @selected="updateResource"
   />
 
@@ -30,6 +31,7 @@
     :resource-id="privatePostResourceId"
     :negotiation="negotiation"
     :user-role="userRole"
+    :visible="privatePostVisible"
   />
 
   <div
@@ -325,7 +327,7 @@ export default {
   },
   watch: {
     negotiation(n) {
-      if(n) {
+      if (n) {
         this.isNegotiationLoaded = n
       }
     }

From 34b0e10e5330ddf4cf00075a5e44e952325ba6fb Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Wed, 4 Oct 2023 13:44:13 +0200
Subject: [PATCH 07/17] fix: adds missing files

---
 src/components/modals/FeedbackModal.vue       | 58 +++++++++++++++++++
 ...gotiationModal.vue => NegotiatorModal.vue} | 20 +++----
 2 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 src/components/modals/FeedbackModal.vue
 rename src/components/modals/{NegotiationModal.vue => NegotiatorModal.vue} (68%)

diff --git a/src/components/modals/FeedbackModal.vue b/src/components/modals/FeedbackModal.vue
new file mode 100644
index 0000000..d483040
--- /dev/null
+++ b/src/components/modals/FeedbackModal.vue
@@ -0,0 +1,58 @@
+<template> 
+  <NegotiatorModal
+    :id="id"
+    :title="title"
+    :fade="fade"
+  >
+    <template #body>
+      <p>
+        {{ text }}
+      </p>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+        @click="emitDismiss"
+      >
+        {{ dismissButtonText }}
+      </button>
+    </template>
+  </NegotiatorModal>
+</template>
+<script>
+import NegotiatorModal from "./NegotiatorModal.vue"
+
+export default {
+  components: { NegotiatorModal },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    },
+    dismissButtonText: {
+      type: String,
+      default: "OK"
+    }
+  },
+  emits: ["dismiss"],
+  methods: {
+    emitDismiss() {
+      this.$emit("dismiss")
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/NegotiationModal.vue b/src/components/modals/NegotiatorModal.vue
similarity index 68%
rename from src/components/modals/NegotiationModal.vue
rename to src/components/modals/NegotiatorModal.vue
index 5c6bdb6..3a1434d 100644
--- a/src/components/modals/NegotiationModal.vue
+++ b/src/components/modals/NegotiatorModal.vue
@@ -1,20 +1,21 @@
 <template>
   <div
     :id="id"
-    class="modal fade"
+    class="modal"
+    :class="{ fade: fade }"
     tabindex="-1"
-    aria-labelledby="{{id}}Label"
+    :aria-labelledby="`${id}Label`"
     aria-hidden="true"
   >
     <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
+      <div class="modal-content text-center">
         <h4 class="modal-header">
           {{ title }}
         </h4>
         <div class="modal-body">
           <slot name="body" />
         </div>
-        <div class="modal-footer justify-content-center bg-primary">
+        <div class="modal-footer justify-content-center bg-light">
           <slot name="footer" />
         </div>
       </div>
@@ -36,12 +37,11 @@ export default {
     text: {
       type: String,
       required: true
-    }
-  },
-  emits: ["confirm"],
-  methods: {
-    emitConfirm () {
-      this.$emit("confirm")
+    },
+    fade: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   }
 }

From 7e7a6724f05ed2acfdaa69a089001c33f7cb9576 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Wed, 4 Oct 2023 13:53:34 +0200
Subject: [PATCH 08/17] refactor: change spinner to remove font awesome

---
 src/components/NegotiationForm.vue      | 13 ++++++-------
 src/components/modals/FeedbackModal.vue |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index e763db7..39e7545 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -16,14 +16,13 @@
     v-if="loading"
     class="d-flex align-items-center justify-content-center"
   >
-    <h4>
-      Loading
-      <font-awesome-icon
-        class="ms-2"
-        icon="fa fa-spinner"
-        spin-pulse
-      />
+    <h4 class="me-2">
+      Loading...
     </h4>
+    <div
+      class="spinner-border"
+      role="status"
+    />
   </div>
   <div v-else>
     <form-wizard
diff --git a/src/components/modals/FeedbackModal.vue b/src/components/modals/FeedbackModal.vue
index d483040..a7c49bf 100644
--- a/src/components/modals/FeedbackModal.vue
+++ b/src/components/modals/FeedbackModal.vue
@@ -12,7 +12,7 @@
     <template #footer>
       <button
         type="button"
-        class="btn btn-info"
+        class="btn btn-secondary"
         data-bs-dismiss="modal"
         @click="emitDismiss"
       >

From 85923ef2b432575dbda5c0c5dc7c38c9ebba8386 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Wed, 4 Oct 2023 16:48:13 +0200
Subject: [PATCH 09/17] refactor: removes css from NegotiationPage

---
 src/views/NegotiationPage.vue | 101 ++++++++++++++++------------------
 1 file changed, 46 insertions(+), 55 deletions(-)

diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 6e0b71b..dbc9526 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -43,11 +43,11 @@
     </h1>
     <div class="row">
       <div class="col-8">
-        <ul class="border mt-3">
+        <ul class="list-group list-group-flush rounded border px-3 my-3">
           <li
             v-for="(element, key) in negotiation.payload"
             :key="element"
-            class="list-group-item border-bottom"
+            class="list-group-item border-bottom p-3"
           >
             <span class="fs-5 fw-bold text-secondary border-bottom mt-3">
               {{ key.toUpperCase() }}</span>
@@ -57,8 +57,7 @@
               class="mt-3"
             >
               <label
-                class="me-2 ml=fw-bold"
-                style="font-weight: bold"
+                class="me-2 fw-bold"
               >{{ subelementkey.toUpperCase() }}:</label>
               <span v-if="isAttachment(subelement)">
                 {{ subelement.name }}
@@ -75,59 +74,57 @@
               </span>
             </div>
           </li>
-          <li class="list-group-item ">
+          <li class="list-group-item p-3">
             <p
               type="button"
               data-bs-toggle="collapse"
-              data-bs-target="#collapseExample"
+              data-bs-target="#collectionsList"
               aria-expanded="false"
-              aria-controls="collapseExample"
+              aria-controls="collectionsList"
             >
               <span class="fs-5 fw-bold text-secondary border-bottom mt-3">
                 <i class="bi bi-card-list" />
-                Collections ({{ numberOfCollections }})
+                COLLECTIONS ({{ numberOfCollections }})
               </span>
             </p>
             <div
-              id="collapseExample"
+              id="collectionsList"
               class="collapse"
             >
-              <div class="card card-body border-0">
-                <ul>
-                  <li
-                    v-for="collection in collections"
-                    :key="collection"
-                  >
-                    <div class="me-auto p-2">
-                      <label class="me-2 fw-bold small">{{ collection }}</label>
-                      <span>
-                        {{ getStatusForCollection(collection) }}
-                        <button
-                          v-if="userRole === 'REPRESENTATIVE' 
-                            && negotiation.status === 'ONGOING'
-                            && isRepresentativeForResource(collection)"
-                          class="btn btn-secondary btn-sm me-2 mb-1 float-end order-first"
-                          data-bs-toggle="modal"
-                          data-bs-target="#updateStatusModal"
-                          @click.stop="interactLifecycleModal(collection)"
-                        >
-                          <i class="bi-gear" />
-                        </button>
-                        <button
-                          v-if="negotiation && negotiation.postsEnabled"
-                          type="button"
-                          class="btn btn-secondary btn-sm me-2 mb-1 float-end"
-                          data-bs-target="#privatePostModal"
-                          data-bs-toggle="modal"
-                          @click.prevent="interactPrivatePostModal(collection)"
-                        >
-                          <i class="bi-chat-fill" />
-                        </button>
-                      </span>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <ul>
+                <li
+                  v-for="collection in collections"
+                  :key="collection"
+                >
+                  <div class="me-auto p-2">
+                    <label class="me-2 fw-bold small">{{ collection }}</label>
+                    <span>
+                      {{ getStatusForCollection(collection) }}
+                      <button
+                        v-if="userRole === 'REPRESENTATIVE' 
+                          && negotiation.status === 'ONGOING'
+                          && isRepresentativeForResource(collection)"
+                        class="btn btn-secondary btn-sm me-2 mb-1 float-end order-first"
+                        data-bs-toggle="modal"
+                        data-bs-target="#updateStatusModal"
+                        @click.stop="interactLifecycleModal(collection)"
+                      >
+                        <i class="bi-gear" />
+                      </button>
+                      <button
+                        v-if="negotiation && negotiation.postsEnabled"
+                        type="button"
+                        class="btn btn-secondary btn-sm me-2 mb-1 float-end"
+                        data-bs-target="#privatePostModal"
+                        data-bs-toggle="modal"
+                        @click.prevent="interactPrivatePostModal(collection)"
+                      >
+                        <i class="bi-chat-fill" />
+                      </button>
+                    </span>
+                  </div>
+                </li>
+              </ul>
             </div>
           </li>
         </ul>
@@ -146,20 +143,20 @@
       <div
         class="col-4"
       >
-        <ul class="list-group">
-          <li class="list-group-item">
+        <ul class="list-group list-group-flush my-3">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Author:
             </div>
             <div>{{ authorName }}</div>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Negotiation ID:
             </div>
             <span> {{ negotiation ? negotiation.id : "" }}</span>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Status:
             </div>
@@ -407,12 +404,6 @@ export default {
 </script>
 
 <style scoped>
-.list-group-item {
-  padding: 10px;
-  margin-top: 5px;
-  border: none;
-  border-bottom: lightgray 1px solid;
-}
 h1 {
   font-family: Calibri, Arial, sans-serif;
 }

From d95dcd578a83f2d11323ef4448c4b7e12002234c Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 10:43:01 +0200
Subject: [PATCH 10/17] fix: fixes private post modal

---
 src/components/NegotiationPosts.vue |   5 +-
 src/views/NegotiationPage.vue       | 131 ++++++++++------------------
 2 files changed, 48 insertions(+), 88 deletions(-)

diff --git a/src/components/NegotiationPosts.vue b/src/components/NegotiationPosts.vue
index 1ee1f7e..cb804f4 100644
--- a/src/components/NegotiationPosts.vue
+++ b/src/components/NegotiationPosts.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex"
+import { mapActions } from "vuex"
 import { dateFormat, MESSAGE_STATUS } from "@/config/consts"
 import moment from "moment"
 
@@ -97,9 +97,6 @@ export default {
     resetForm() {
       this.message.text = ""
     },
-    computed: {
-      ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
-    },
     printDate: function (date) {
       return moment(date).format(dateFormat)
     },
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index dbc9526..f073411 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -1,47 +1,47 @@
 <template>
-  <button
-    type="button"
-    class="btn btn-secondary"
-    @click="
-      $router.go(-1)
-    "
+  <div
+    v-if="!loading"
   >
-    <i class="bi-arrow-left" />
-    Go back
-  </button>
+    <button
+      type="button"
+      class="btn btn-secondary"
+      @click="
+        $router.go(-1)
+      "
+    >
+      <i class="bi-arrow-left" />
+      Go back
+    </button>
 
-  <confirmation-modal
-    id="abandonModal"
-    title="Are you sure you want to abandon this Negotiation?"
-    text="Confirming, you will not be able to access this negotiation again."
-    @confirm="updateNegotiation('ABANDON')"
-  />
+    <confirmation-modal
+      id="abandonModal"
+      title="Are you sure you want to abandon this Negotiation?"
+      text="Confirming, you will not be able to access this negotiation again."
+      @confirm="updateNegotiation('ABANDON')"
+    />
 
-  <update-status-modal
-    id="updateStatusModal"
-    :resource-id="lifecycleResourceId"
-    :options="responseOptions"
-    :visible="updateStatusVisible"
-    @selected="updateResource"
-  />
+    <update-status-modal
+      id="updateStatusModal"
+      :resource-id="lifecycleResourceId"
+      :options="responseOptions"
+      :visible="updateStatusVisible"
+      @selected="updateResource"
+    />
 
-  <private-post-modal
-    v-if="negotiation"
-    id="privatePostModal"
-    :resource-id="privatePostResourceId"
-    :negotiation="negotiation"
-    :user-role="userRole"
-    :visible="privatePostVisible"
-  />
+    <private-post-modal
+      v-for="collection in collections"
+      :id="`privatePostModal${getElementIdFromCollectionId(collection)}`"
+      :key="collection"
+      :resource-id="collection"
+      :negotiation="negotiation"
+      :user-role="userRole"
+      :visible="privatePostVisible"
+    />
 
-  <div
-    v-if="isNegotiationLoaded"
-    class="mt-4"
-  >
-    <h1 class="text-primary fw-bold">
-      {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
-    </h1>
-    <div class="row">
+    <div class="row mt-4">
+      <h1 class="text-primary fw-bold">
+        {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
+      </h1>
       <div class="col-8">
         <ul class="list-group list-group-flush rounded border px-3 my-3">
           <li
@@ -115,7 +115,7 @@
                         v-if="negotiation && negotiation.postsEnabled"
                         type="button"
                         class="btn btn-secondary btn-sm me-2 mb-1 float-end"
-                        data-bs-target="#privatePostModal"
+                        :data-bs-target="`#privatePostModal${getElementIdFromCollectionId(collection)}`"
                         data-bs-toggle="modal"
                         @click.prevent="interactPrivatePostModal(collection)"
                       >
@@ -233,7 +233,7 @@ import UpdateStatusModal from "@/components/modals/UpdateStatusModal.vue"
 import PrivatePostModal from "@/components/modals/PrivatePostModal.vue"
 import { MESSAGE_STATUS, ROLES, dateFormat } from "@/config/consts"
 import moment from "moment"
-import { mapActions, mapGetters } from "vuex"
+import { mapActions } from "vuex"
 
 export default {
   name: "NegotiationPage",
@@ -259,7 +259,6 @@ export default {
         resourceId: undefined,
       },
       roles: [],
-      isNegotiationLoaded: false,
       responseOptions: [],
       selectedItem: "",
       messageStatus: MESSAGE_STATUS,
@@ -270,48 +269,18 @@ export default {
     }
   },  
   computed: {
-    organizations() {
-      const organizationNames = []
-
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          const organizationName = resource.id
-          organizationNames.push(organizationName)
-        }
-      }
-      return organizationNames
-    },
     collections() {
       const collections = []
 
       for (const request of this.negotiation.requests) {
         for (const resource of request.resources) {
-          const collection = resource.id
-          collections.push(collection)
+          collections.push(resource.id)
         }
       }
       return collections
     },
     numberOfCollections() {
-      let counter = 0
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          counter++
-        }
-      }
-      return counter
-
-    },
-    resourcesIds() {
-      const organizationNames = []
-
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          const organizationName = resource.id
-          organizationNames.push(organizationName)
-        }
-      }
-      return organizationNames
+      return this.collections.length
     },
     authorName() {
       for (const person of this.negotiation.persons) {
@@ -321,12 +290,8 @@ export default {
       }
       return ""
     },
-  },
-  watch: {
-    negotiation(n) {
-      if (n) {
-        this.isNegotiationLoaded = n
-      }
+    loading() {
+      return this.negotiation === undefined
     }
   },
   async beforeMount() {
@@ -343,8 +308,6 @@ export default {
       "retrieveNegotiationById",
       "retrievePostsByNegotiationId",
       "retrieveUserRoles",
-      "addMessageToNegotiation",
-      "markMessageAsRead",
       "retrievePossibleEvents",
       "retrievePossibleEventsForResource",
       "updateNegotiationStatus",
@@ -362,9 +325,6 @@ export default {
         return ""
       }
     },
-    computed: {
-      ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
-    },
     isAttachment(value) {
       return value instanceof Object
     },
@@ -398,6 +358,9 @@ export default {
     interactLifecycleModal(resourceId) {
       this.lifecycleResourceId = resourceId
       this.loadPossibleEventsForResource()
+    },
+    getElementIdFromCollectionId(collection) {
+      return collection.replaceAll(":", "_")
     }
   },
 }

From 613c9e51373f81ac72c7f1ff58ed8ea94d6931e1 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 13:05:25 +0200
Subject: [PATCH 11/17] refactor: dynamically configure sorting

---
 src/components/NegotiationCard.vue |  25 +++--
 src/components/NegotiationList.vue | 152 +++++++++--------------------
 src/views/NegotiationPage.vue      |   3 +-
 3 files changed, 57 insertions(+), 123 deletions(-)

diff --git a/src/components/NegotiationCard.vue b/src/components/NegotiationCard.vue
index 638f6e7..3746113 100644
--- a/src/components/NegotiationCard.vue
+++ b/src/components/NegotiationCard.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="card mb-2">
     <h5 class="card-header">
-      {{ negotiationTitle }}
+      {{ title }}
       <span class="badge rounded-pill bg-primary float-end">
-        {{ negotiationStatus }}
+        {{ status }}
       </span>
     </h5>
     <div class="card-body">
       <h6 class="card-subtitle mb-2 text-muted">
-        Negotiation ID: {{ negotiationId }}
+        Negotiation ID: {{ id }}
       </h6>
       <h6 class="card-subtitle mb-2 text-muted">
-        Created on: {{ negotiationCreationDate }}
+        Created on: {{ creationDate }}
       </h6>
       <h6 class="card-subtitle mb-2 text-muted">
-        Created by: {{ negotiationSubmitter }}
+        Created by: {{ submitter }}
       </h6>
     </div>
   </div>
@@ -25,31 +25,30 @@
 export default {
   name: "NegotiationCard",
   props: {
-    negotiationId: {
+    id: {
       type: String,
       default: ""
     }, 
-    negotiationTitle: {
+    title: {
       type: String,
       default: ""
     }, 
-    negotiationStatus: {
+    status: {
       type: String,
       default: ""
     },
-    negotiationSubmitter: {
+    submitter: {
       type: String,
       default: ""
     },
-    negotiationResources: {
+    resources: {
       type: Object,
       default: undefined
     },
-    negotiationCreationDate: {
+    creationDate: {
       type: Date,
       default: undefined
-    },
-
+    }
   }
 }
 </script>
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index 15b3e8c..a7916c2 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -11,13 +11,13 @@
         >
           <NegotiationCard
             v-for="item in filteredNegotiations"
+            :id="item.id"
             :key="item.id"
-            :negotiation-id="item.id"
-            :negotiation-title="item.payload.project.title"
-            :negotiation-status="item.status"
-            :negotiation-resources="['res1', 'res2', 'res3']"
-            :negotiation-submitter="item.persons[0].name"
-            :negotiation-creation-date="formatDate(item.creationDate)"
+            :title="item.payload.project.title"
+            :status="item.status"
+            :resources="['res1', 'res2', 'res3']"
+            :submitter="item.persons[0].name"
+            :creation-date="formatDate(item.creationDate)"
             class="cursor-pointer"
             @click="
               $router.push({
@@ -44,52 +44,24 @@
             Sort by
           </div>
           <div class="card-body">
-            <div class="form-check">
-              <input
-                id="title"
-                class="form-check-input"
-                type="radio"
-                name="sort"
-                value="title"
-                @change="sort($event.target.value)"
-              >
-              <label
-                class="form-check-label"
-                for="title"
-              >
-                Title
-              </label>
-            </div>
-            <div class="form-check">
-              <input
-                id="status"
-                class="form-check-input"
-                type="radio"
-                name="sort"
-                value="status"
-                @change="sort($event.target.value)"
-              >
-              <label
-                class="form-check-label"
-                for="status"
-              >
-                Status 
-              </label>
-            </div>
-            <div class="form-check">
+            <div
+              v-for="(value, name) in sortAttrs"
+              :key="name"
+              class="form-check"
+            >
               <input
-                id="creationDate"
+                :id="name"
                 class="form-check-input"
                 type="radio"
                 name="sort"
-                value="creationDate"
+                :value="name"
                 @change="sort($event.target.value)"
               >
               <label
                 class="form-check-label"
-                for="creationDate"
+                :for="name"
               >
-                Date of creation
+                {{ value.label }}
               </label>
             </div>
           </div>
@@ -212,26 +184,23 @@ export default {
   data() {
     return {
       headers: ["id", "title", "status"],
-      negotiation: [],
-      availableRoles: ROLES,
-      sorting: { "id": {
-        "func": this.sortById, 
-        "order": "asc"
-      }, 
-      "title": {
-        "func": this.sortByTitle, 
-        "order": "asc"
-      }, 
-      "status": {
-        "func": this.sortByStatus, 
-        "order": "asc"
-      }, 
-      "creationDate": {
-        "func": this.sortByCreationDate, 
-        "order": "desc"
-      }, 
-      }, 
-      previuosSortingColumn: "", 
+      sortAttrs: {
+        "title": {
+          label: "Title",
+          sortTransformation: (value) => value.payload.project.title,
+          sortOrder: "asc"
+        },
+        "status": {
+          label: "Status",
+          sortTransformation: (value) => value.status,
+          sortOrder: "asc"
+        },
+        "creationDate": {
+          label: "Date of creation",
+          sortTransformation: (value) => new Date(value.creationDate),
+          sortOrder: "desc"
+        }},      
+      availableRoles: ROLES, 
       filters: {
         "status": [],
         "dateStart": "",
@@ -260,56 +229,23 @@ export default {
         })     
       }
       return filterConditions.length == 0 ? this.negotiations : this.negotiations.filter(item => filterConditions.every(f => f(item)))
-
     }
-    
-
-
   },
   methods: {
-    abandonRequest() {
-      if (confirm("Are you sure you want to abandon this request?")) {
-        console.log("deleting")
-      }
-    },
-    sortByTitle(a, b) {
-      if (a.payload.project.title < b.payload.project.title) {
-        return this.sorting.title.order == "desc" ? 1 : -1
-      }
-      if (a.payload.project.title > b.payload.project.title) {
-        return this.sorting.title.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-    sortById(a, b) {
-      if (a.id < b.id) {
-        return this.sorting.id.order == "desc" ? 1 : -1
-      }
-      if (a.id > b.id) {
-        return this.sorting.id.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-    sortByStatus(a, b) {
-      if (a.status < b.status) {
-        return this.sorting.status.order == "desc" ? 1 : -1
-      }
-      if (a.status > b.status) {
-        return this.sorting.status.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-
-    sortByCreationDate(a, b){
-      const dateA = new Date(a.creationDate)
-      const dateB = new Date(b.creationDate)
-      return this.sorting.creationDate.order == "desc" ? dateB-dateA : dateA-dateB
-
-    },
-
     sort(column){
       let sortedNegotiations = this.negotiations
-      return sortedNegotiations.sort(this.sorting[column]["func"])
+
+      return sortedNegotiations.sort((a, b) => {
+        a = this.sortAttrs[column].sortTransformation(a)
+        b = this.sortAttrs[column].sortTransformation(b)
+        if (a < b) {
+          return this.sortAttrs[column].sortOrder == "desc" ? 1 : -1
+        }
+        if (a > b) {
+          return this.sortAttrs[column].sortOrder == "desc" ? -1 : 1 
+        }
+        return 0
+      })
     },
     formatDate(date){
       return moment(date).format("YYYY/MM/DD HH:mm")
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index f073411..b82edc9 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -206,8 +206,7 @@
         </div>
       </div>
     </div>
-  </div>
-  
+  </div>  
   <div
     v-else
     class="d-flex justify-content-center flex-row"

From b43bae630464d2a4059329dd12bf6d39ecae6e7b Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 13:51:07 +0200
Subject: [PATCH 12/17] refactor: adds padding to start end filters

---
 src/components/NegotiationList.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index a7916c2..a8c6a72 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -126,8 +126,11 @@
             Filter by date
           </div>
           <div class="card-body">
-            <div class="d-flex align-items-center  mb-2">
-              <label for="startDate">Start: </label>
+            <div class="d-flex align-items-center mb-2">
+              <label
+                class="pe-2 w-25"
+                for="startDate"
+              >Start:</label>
               <input
                 id="startDate"
                 v-model="selectedStartDate"
@@ -135,10 +138,12 @@
                 type="date"
                 @input="updateFilter('dateStart', selectedStartDate)"
               >
-              <span id="startDateSelected" />
             </div>
             <div class="d-flex align-items-center">
-              <label for="endDate">End:</label>
+              <label
+                for="endDate"
+                class="pe-2 w-25"
+              >End:</label>
               <input
                 id="endDate"
                 v-model="selectedEndDate"
@@ -146,7 +151,6 @@
                 type="date"
                 @input="updateFilter('dateEnd', selectedEndDate)"
               >
-              <span id="endDateSelected" />
             </div>
           </div>
         </div>
@@ -183,7 +187,7 @@ export default {
   },
   data() {
     return {
-      headers: ["id", "title", "status"],
+      availableRoles: ROLES,
       sortAttrs: {
         "title": {
           label: "Title",
@@ -200,7 +204,6 @@ export default {
           sortTransformation: (value) => new Date(value.creationDate),
           sortOrder: "desc"
         }},      
-      availableRoles: ROLES, 
       filters: {
         "status": [],
         "dateStart": "",

From ca983b8e9bd49c3949c44cfbab88c07d07ed5110 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 14:01:46 +0200
Subject: [PATCH 13/17] adds eslint rule

---
 .eslintrc.js                       |  8 ++++---
 src/components/NegotiationList.vue |  3 ++-
 src/store/actions.js               | 36 +++++++++++++-----------------
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6984915..c3dcf4b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -32,9 +32,11 @@ module.exports = {
       "never"
     ],
     "key-spacing": [
-      "error", { 
-        "beforeColon": false 
-      }
+      "error", { "beforeColon": false }
+    ],
+    "object-curly-spacing": [
+      "error",
+      "always"
     ]
   }
 }
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index a8c6a72..2e3a62f 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -203,7 +203,8 @@ export default {
           label: "Date of creation",
           sortTransformation: (value) => new Date(value.creationDate),
           sortOrder: "desc"
-        }},      
+        } 
+      },      
       filters: {
         "status": [],
         "dateStart": "",
diff --git a/src/store/actions.js b/src/store/actions.js
index d694a16..bb67c49 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -9,9 +9,7 @@ const USER_PATH = `${BASE_API_PATH}/users/roles`
 const ATTACHMENTS_PATH = `${BASE_API_PATH}/attachments`
 
 function getBearerHeaders(token) {
-  return {
-    Authorization: `Bearer ${token}`
-  }
+  return { Authorization: `Bearer ${token}` }
 }
 
 
@@ -21,9 +19,7 @@ export default {
       .then((response) => {
         // it handles the error when backend is unreachable but vite proxy strangely return 200
         if (response.data == "") {
-          return {
-            code: 500
-          }
+          return { code: 500 }
         } else {
           return response.data
         }
@@ -35,7 +31,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
       })
@@ -69,7 +65,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
       })
@@ -79,7 +75,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
       })
@@ -89,7 +85,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
@@ -100,7 +96,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
       })
@@ -109,7 +105,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
       })
@@ -118,7 +114,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
@@ -129,7 +125,7 @@ export default {
       })
   },
   async retrieveNegotiationById({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -139,8 +135,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
       })
@@ -149,7 +145,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
       })
@@ -158,7 +154,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
       })
@@ -169,7 +165,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
       })
@@ -178,7 +174,7 @@ 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
       })

From 3909ae9a965d561f92bab770747e56c1c859e64f Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 14:38:03 +0200
Subject: [PATCH 14/17] refactor: removes unused LoginPage

---
 src/router/index.js     |  1 -
 src/views/LoginPage.vue | 32 --------------------------------
 2 files changed, 33 deletions(-)
 delete mode 100644 src/views/LoginPage.vue

diff --git a/src/router/index.js b/src/router/index.js
index 471503d..ba7b7ca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,6 @@ import OidcCallback from "@/components/OidcCallback.vue"
 import HomePage from "../views/HomePage.vue"
 import NegotiationCreatePage from "../views/NegotiationCreatePage.vue"
 import NegotiationPage from "../views/NegotiationPage.vue"
-import Login from "@/views/LoginPage.vue"
 import store from "@/store"
 import { vuexOidcCreateRouterMiddleware } from "vuex-oidc"
 import UserPage from "@/views/UserPage.vue"
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
deleted file mode 100644
index 65108de..0000000
--- a/src/views/LoginPage.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="container pt-4">
-    <div class="row text-center">
-      <div class="col-3" />
-      <div class="col-6">
-        <div class="jumbotron">
-          <h1 class="display-4">
-            Please login before continuing
-          </h1>
-          <p class="lead">
-            You cannot access this page before logging in
-          </p>
-        </div>
-      </div>
-      <div class="col-3" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from "vuex"
-
-
-export default {
-  methods: {
-    ...mapActions([
-      "authenticateOidc"
-    ])
-  }
-}
-</script>
-

From bfc16eea77a5821c245aa66bba27fd905844c380 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 14:38:36 +0200
Subject: [PATCH 15/17] refactor: minor refactoring of negotiation page list

---
 src/components/NegotiationCard.vue |  4 ---
 src/components/NegotiationList.vue | 54 +++++++++++++-----------------
 2 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/components/NegotiationCard.vue b/src/components/NegotiationCard.vue
index 3746113..33f7d0a 100644
--- a/src/components/NegotiationCard.vue
+++ b/src/components/NegotiationCard.vue
@@ -41,10 +41,6 @@ export default {
       type: String,
       default: ""
     },
-    resources: {
-      type: Object,
-      default: undefined
-    },
     creationDate: {
       type: Date,
       default: undefined
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index 2e3a62f..ef2cd15 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -3,41 +3,33 @@
   <div class="container">
     <div class="row">
       <div
-        class="col-9 d-flex justify-content-center"
+        class="col-9"
       >
-        <div
-          v-if="negotiations.length > 0"
-          class="col-12"
+        <NegotiationCard
+          v-for="fn in filteredNegotiations"
+          :id="fn.id"
+          :key="fn.id"
+          :title="fn.payload.project.title"
+          :status="fn.status"
+          :submitter="fn.persons.filter(p => p.role === 'RESEARCHER')[0].name"
+          :creation-date="formatDate(fn.creationDate)"
+          class="cursor-pointer"
+          @click="
+            $router.push({
+              name: 'negotiation-page',
+              params: { negotiationId: fn.id, userRole: userRole },
+            })
+          "
+        />
+        <h2
+          v-if="negotiations.length == 0"
+          class="text-center"
         >
-          <NegotiationCard
-            v-for="item in filteredNegotiations"
-            :id="item.id"
-            :key="item.id"
-            :title="item.payload.project.title"
-            :status="item.status"
-            :resources="['res1', 'res2', 'res3']"
-            :submitter="item.persons[0].name"
-            :creation-date="formatDate(item.creationDate)"
-            class="cursor-pointer"
-            @click="
-              $router.push({
-                name: 'negotiation-page',
-                params: { negotiationId: item.id, userRole: userRole },
-              })
-            "
-          />
-        </div>
-        <div
-          v-else
-        >
-          <h2 class="text-center">
-            No Negotiations found
-          </h2>
-        </div>
+          No Negotiations found
+        </h2>
       </div>
       <div
-        class="
-          col-3"
+        class="col-3"
       >
         <div class="card mb-2">
           <div class="card-header">

From 438e9735fc07b897a9eed287d303169b16c42ed5 Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 14:40:42 +0200
Subject: [PATCH 16/17] refactor: removes login page

---
 src/router/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index ba7b7ca..95653c0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,11 +41,6 @@ const router = createRouter({
     component: UserPage,
     props: { userRole: "ADMIN" },
     meta: { isPublic: false }
-  }, {
-    path: "/login",
-    name: "login",
-    component: Login,
-    meta: { isPublic: true }
   }, {
     path: "/negotiations/:negotiationId/:userRole",
     name: "negotiation-page",

From a43a1c07bd45524070ff61344c3e0de70e20935b Mon Sep 17 00:00:00 2001
From: Vittorio Meloni <vittorio.meloni@crs4.it>
Date: Thu, 5 Oct 2023 15:24:09 +0200
Subject: [PATCH 17/17] feat: change button

---
 src/components/modals/ConfirmationModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
index ba3700d..281ce1c 100644
--- a/src/components/modals/ConfirmationModal.vue
+++ b/src/components/modals/ConfirmationModal.vue
@@ -18,7 +18,7 @@
       </button>
       <button
         type="button"
-        class="btn btn-secondary"
+        class="btn btn-danger"
         data-bs-dismiss="modal"
         @click="emitConfirm"
       >