Merge pull request #45 from BBMRI-ERIC/refactor/use_boostrap_features

Refactor/use boostrap features
BBMRI-ERIC · Oct 5, 2023 · 753c180 · 753c180
2 parents 4ca0228 + a43a1c0
commit 753c180
Show file tree

Hide file tree

Showing 17 changed files with 544 additions and 624 deletions.
diff --git 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/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
diff --git 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,26 @@
 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: {
-      type: Object,
-      default: undefined
-    },
-    negotiationCreationDate: {
+    creationDate: {
       type: Date,
       default: undefined
-    },
-
+    }
   }
 }
 </script>
diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
@@ -1,33 +1,30 @@
 <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"
   >
-    <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>
-    <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 +117,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 +137,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 +157,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 +181,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 +193,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) {