#79: merge req failed due to conflicts. conflicts resolved now.

web/src/App.vue

@@ -21,7 +21,7 @@
     <the-nav-bar />
 
     <!--<h1>DD-CODE Development Project</h1>-->
-    <main class="flex flex-col">
+    <main>
       <router-view />
     </main>
 

web/src/components/Navigation/TheNavBar.vue

@@ -172,21 +172,33 @@
             </div>
 
             <!-- should uncomment later -->
-            <!-- <li
-            v-if="
-              userRole !== null &&
-                (userRole === 'Maintainer' ||
-                userRole === 'Contributor')
-            "
-            role="presentation"
-          >
-            <router-link
-              to="/addCondensate"
-              class="dropdown-item hover:no-underline h-16 pt-4"
-            >
-              <span class="text-2xl">Add New Condensate</span>
-            </router-link>
-          </li> -->
+            <div>
+              <router-link
+                v-if="
+                  userRole !== null &&
+                  (userRole === 'Maintainer' || userRole === 'Contributor')
+                "
+                to="/addCondensate"
+                class="rounded-lg"
+              >
+                <span
+                  class="
+                    px-4
+                    py-4
+                    text-white-base
+                    hover:text-pink-base
+                    flex
+                    items-center
+                    text-3xl
+                    font-medium
+                  "
+                  :class="
+                    $route.name === 'addCondensate' ? 'text-pink-base' : ''
+                  "
+                  >Add New Condensate</span
+                >
+              </router-link>
+            </div>
           </div>
         </div>
 

web/src/views/AddNewCondensate.vue

 <template>
   <div class="flex flex-wrap justify-center">
     <div class="w-5/6">
-      <base-toaster
-        :open="toasterIsOpen"
-        @close="hideDialog"
-      >
+      <base-toaster :open="toasterIsOpen" @close="hideDialog">
         <div class="flex justify-between items-center">
           <font-awesome-icon
             class="ml-3"
@@ -13,20 +10,14 @@
           />
 
           <h4>Request submitted successfully!</h4>
-          <button
-            class="btn btn-outline"
-            @click="hideDialog"
-          >
-            <font-awesome-icon
-              icon="fa-regular fa-circle-xmark"
-              size="2x"
-            />
+          <button class="btn btn-outline" @click="hideDialog">
+            <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" />
           </button>
         </div>
       </base-toaster>
 
       <div class="p-4">
-        <h2>New Condensate</h2>
+        <h2 class="font-bold">New Condensate</h2>
       </div>
 
       <add-novel-condensate
@@ -38,32 +29,32 @@
 </template>
 
 <script>
-import BaseToaster from '@/components/UI/BaseToaster';
-import {apiHost as host} from '@/components/js/const';
-import AddNovelCondensate from '@/components/AddNovelCondensate';
+import BaseToaster from "@/components/UI/BaseToaster";
+import { apiHost as host } from "@/components/js/const";
+import AddNovelCondensate from "@/components/AddNovelCondensate";
 
-const $ = (window.jQuery = require('jquery'));
-const _ = require('lodash');
+const $ = (window.jQuery = require("jquery"));
+const _ = require("lodash");
 
 export default {
-  name: 'LandingPage',
+  name: "LandingPage",
   components: {
     BaseToaster,
-    AddNovelCondensate
+    AddNovelCondensate,
   },
 
   data() {
     return {
       showUpdateFunctionType: false,
       toasterIsOpen: false,
-      toasterMessage: '',
+      toasterMessage: "",
       updatedKey: 0,
-      isDev: process.env.NODE_ENV === 'development',
+      isDev: process.env.NODE_ENV === "development",
     };
   },
   computed: {
     getUserData() {
-      const userRole = this.$store.getters['User/userRole'];
+      const userRole = this.$store.getters["User/userRole"];
       return userRole;
     },
   },
@@ -74,24 +65,24 @@ export default {
     },
     hideDialog() {
       this.toasterIsOpen = false;
-      this.toasterMessage = '';
+      this.toasterMessage = "";
     },
     async addCondensate(response) {
-      if (this.condensate.name === '') {
-        this.uniprotIdErrorMsg = 'Condensate name should not be empty!';
+      if (this.condensate.name === "") {
+        this.uniprotIdErrorMsg = "Condensate name should not be empty!";
         this.isUniProtIdError = true;
         return;
       } else if (this.uniprotId.length < 6) {
-        this.uniprotIdErrorMsg = 'Uniprot ID should be minimum of 6 character.';
+        this.uniprotIdErrorMsg = "Uniprot ID should be minimum of 6 character.";
         this.isUniProtIdError = true;
         return;
       } else if (this.uniprotId.length > 10) {
         this.uniprotIdErrorMsg =
-          'Uniprot ID should be maximum of 10 character.';
+          "Uniprot ID should be maximum of 10 character.";
         this.isUniProtIdError = true;
         return;
       } else if (this.whitespaceRegex.test(this.uniprotId)) {
-        this.uniprotIdErrorMsg = 'Uniprot ID should not have space in between.';
+        this.uniprotIdErrorMsg = "Uniprot ID should not have space in between.";
         this.isUniProtIdError = true;
         return;
       }
@@ -100,45 +91,45 @@ export default {
         (u) => u.uniprot_id === this.uniprotId
       );
       if (findUniprotId) {
-        this.message = '';
-        this.uniprotIdErrorMsg = 'The Uniprot ID already exists!';
+        this.message = "";
+        this.uniprotIdErrorMsg = "The Uniprot ID already exists!";
         this.isUniProtIdError = true;
         return;
       }
 
       this.isError = false;
       if (this.isDev) {
-        host = require('../components/js/const').devApiHost;
+        host = require("../components/js/const").devApiHost;
       }
       let url = `${host}/api/update-items`;
       let data;
-      if (this.getUserData === 'Maintainer') {
+      if (this.getUserData === "Maintainer") {
         data = {
-          Entity: 'condensate',
+          Entity: "condensate",
           EntityId: response.data.canonical_id,
-          ChangeOperation: 'add',
-          Attribute: 'proteins',
+          ChangeOperation: "add",
+          Attribute: "proteins",
           Value: this.uniprotId,
           SubmissionComments:
-            'Maintainer do not need to provide a reason for such change at the moment!',
-          Status: 'accepted',
+            "Maintainer do not need to provide a reason for such change at the moment!",
+          Status: "accepted",
         };
       } else {
-        if (this.proteinComment === '' || this.proteinComment.length < 50) {
+        if (this.proteinComment === "" || this.proteinComment.length < 50) {
           this.proteinCommentErr = true;
           this.commentErrorMsg =
-            'Reason should not be empty or less than 50 characters!';
+            "Reason should not be empty or less than 50 characters!";
 
           return;
         }
         data = {
-          Entity: 'condensate',
+          Entity: "condensate",
           EntityId: response.data.canonical_id,
-          ChangeOperation: 'add',
-          Attribute: 'proteins',
+          ChangeOperation: "add",
+          Attribute: "proteins",
           Value: this.uniprotId,
           SubmissionComments: this.proteinComment,
-          Status: 'requested',
+          Status: "requested",
         };
       }
       this.isLoading = true;
@@ -158,10 +149,10 @@ export default {
 
         this.error = false;
         this.isSubmitted = true;
-        this.uniprotId = '';
-        this.comment = '';
+        this.uniprotId = "";
+        this.comment = "";
         this.proteinCommentErr = false;
-        this.commentErrorMsg = '';
+        this.commentErrorMsg = "";
         this.updatedKey += 1;
         setTimeout(() => {
           this.toasterIsOpen = false;
@@ -169,7 +160,7 @@ export default {
       } catch (e) {
         console.error(e);
         this.message =
-          e.message || 'Something went wrong, please try again later!';
+          e.message || "Something went wrong, please try again later!";
         this.isSubmitted = true;
         this.error = true;
       }
@@ -186,19 +177,18 @@ export default {
 /* Vue transition classes */
 /* enter classes */
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
-
 }
 
 a {
   color: #ef0087 !important;
 }
 
-
 @media (min-width: 768px) {
   #sidebar-wrapper {
     margin-left: 0;
@@ -213,5 +203,4 @@ a {
     margin-left: -15rem;
   }
 }
-
 </style>