refactor: in NegotiationList removes unnecessary ul litags

BBMRI-ERIC · Oct 3, 2023 · 277888c · 277888c
1 parent 28d3bf5
commit 277888c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 39 deletions.
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
@@ -1,35 +1,32 @@
 <template>
-  <hr class="mt-10 mb-10">
+  <hr class="my-4">
   <div class="container">
     <div class="row">
       <div
-        class="col-9"
-        style="display: flex; justify-content: center"
+        class="col-9 d-flex"
       >
-        <ul
+        <div
           v-if="negotiations.length > 0"
           class="col-12"
         >
-          <li
+          <NegotiationCard
             v-for="item in filteredNegotiations"
             :key="item.id"
-          >
-            <NegotiationCard
-              :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)"
-              @click="
-                $router.push({
-                  name: 'negotiation-page',
-                  params: { negotiationId: item.id, userRole: userRole },
-                })
-              "
-            />
-          </li>
-        </ul>
+            :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)"
+            class="cursor-pointer"
+            @click="
+              $router.push({
+                name: 'negotiation-page',
+                params: { negotiationId: item.id, userRole: userRole },
+              })
+            "
+          />
+        </div>
         <div
           v-else
         >
@@ -187,8 +184,8 @@
 </template>
 
 <script>
+import NegotiationCard from "@/components/NegotiationCard.vue"
 import { ROLES } from "@/config/consts"
-import  NegotiationCard  from "@/components/NegotiationCard.vue"
 import moment from "moment"
 
 
@@ -243,19 +240,19 @@ export default {
     }
   }, 
   computed: {
-    filteredNegotiations: function(){
+    filteredNegotiations: function() {
       let filterConditions = []
-      if (this.filters.status.length > 0){
+      if (this.filters.status.length > 0) {
         filterConditions.push(item => this.filters["status"].includes(item.status))
       }
-      if(this.filters.dateStart != ""){
+      if (this.filters.dateStart != "") {
         const startDate = new Date(this.filters["dateStart"])
         filterConditions.push(item => {
           const eventDate = new Date(item.creationDate)
           return eventDate >= startDate
         })     
       }
-      if(this.filters.dateEnd != ""){
+      if (this.filters.dateEnd != "") {
         const endDate = new Date(this.filters["dateEnd"])
         filterConditions.push(item => {
           const eventDate = new Date(item.creationDate)
@@ -334,12 +331,3 @@ export default {
   
 }
 </script>
-
-<style scoped>
-.negotiation-list-table tbody tr:hover > td {
-    cursor: pointer;
-}
-ul li:hover {
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
@@ -9,9 +9,10 @@
     <i class="bi-arrow-left" />
     Go back
   </button>
+
   <div
     v-if="isNegotiationLoaded"
-    style="margin-top: 20px"
+    class="mt-4"
   >
     <h1>
       {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
@@ -22,7 +23,7 @@
           <li
             v-for="(element, key) in negotiation.payload"
             :key="element"
-            class="list-group-item  border-bottom"
+            class="list-group-item border-bottom"
           >
             <span class="fs-5 fw-bold text-secondary border-bottom mt-3">
               {{ key.toUpperCase() }}</span>
@@ -171,6 +172,7 @@
       </div>
     </div>
   </div>
+
   <div
     v-else
     class="d-flex justify-content-center flex-row"
@@ -459,6 +461,7 @@ export default {
   },
 }
 </script>
+
 <style scoped>
 .modal {
   display: block;
@@ -486,7 +489,7 @@ export default {
 }
 h1 {
   font-family: Calibri, Arial, sans-serif;
-  color: rgb(233,87,19);
+  color: var(--bs-primary);
   font-weight: bolder;
   font-size: 60px;
 }