Create placeholder for empty page

src/components/NegotiationList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="!loading && negotiations.length > 0"
+    v-if="!loading"
     class="container"
   >
   <div
@@ -201,7 +201,7 @@
 
   <div>
     <div class="row row-cols-2 d-grid-row mt-3 ">
-      <p v-if="pagination.totalElements > 0">
+      <p>
         <span class="text-search-results-text"> <strong>Search results: </strong> </span> <br>
         <span class="text-muted">{{ pagination.totalElements }} Negotiations found</span>
       </p>
@@ -334,6 +334,19 @@
       </ul>
   </nav>
 
+  <div v-if="pagination.totalElements === 0" class="d-flex justify-content-center">
+      <div class="d-flex justify-content-center">
+        <h3 class="text-center mt-3">
+          <i style = "color: #7c7c7c;" class="bi bi-circle"></i>
+
+        <h4 class="mb-3 ms-3 mt-3">
+
+          There aren’t any negotiations.
+        </h4>
+      </h3>
+      </div>
+    </div>
+
   </div>
   <div
     v-else-if="loading"
@@ -358,7 +371,7 @@
     <div class="d-flex justify-content-center">
       <div class="d-flex justify-content-center">
         <h4 class="mb-3 ms-3">
-          No Negotiations found
+          No Negotiations found :(
         </h4>
       </div>
     </div>
@@ -481,7 +494,7 @@ export default {
     this.loadActiveFiltersFromURL()
     this.loadSortingFromURL()
     if(this.savedNegotiationsView === '') {
-      this.setSavedNegotiationsView({negotiationsView:'Card-one-column'})
+      this.setSavedNegotiationsView({negotiationsView:'Table'})
     }
   },
   methods: {

src/components/NegotiationPosts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="negotiation && negotiation.postsEnabled">
+  <div v-if="negotiation">
     <h5 class="text-primary">Comments</h5>
     <div
       v-for="post in posts"
@@ -50,13 +50,17 @@
         @removed="resetAttachment"
       />
       <div class="d-flex flex-row-reverse mt-3 mb-2">
+        <span      
+          data-bs-toggle="tooltip"
+          :data-bs-title="negotiation.postsEnabled ? '' : 'Messaging is unavailable until the request has been reviewed.' ">
         <button
           type="submit"
           :disabled="!readyToSend"
           class="btn btn-secondary ms-2"
         >
           Send message
         </button>
+      </span>
         <button
           type="submit"
           class="btn btn-attachment ms-2 border rounded"
@@ -99,6 +103,7 @@
 </template>
 
 <script>
+import { Tooltip } from 'bootstrap'
 import { mapActions, mapGetters } from "vuex"
 import { dateFormat, MESSAGE_STATUS, POST_TYPE } from "@/config/consts"
 import moment from "moment"
@@ -139,10 +144,15 @@ export default {
       attachment: undefined
     }
   },
+  mounted () {
+    new Tooltip(document.body, {
+      selector: "[data-bs-toggle='tooltip']",
+    })
+  },
   computed: {
     ...mapGetters(["oidcUser"]),
     readyToSend() {
-      return (this.message !== "" || this.attachment != undefined) && this.recipientId !== ""
+      return (this.message !== "" || this.attachment != undefined) && this.recipientId !== "" && this.negotiation.postsEnabled
     },
     recipientsById() {
       return this.recipients.reduce((obj, item) => Object.assign(obj, { [item.id]: { name: item.name } }), {})

src/views/NegotiationPage.vue

@@ -211,7 +211,7 @@
           </li>
         </ul>
         <NegotiationPosts
-          v-if="negotiation && negotiation.postsEnabled"
+          v-if="negotiation"
           :negotiation="negotiation"
           :user-role="userRole"
           :resources="resources"