From b7011637768d6201cdce0ffc38413a0126ac48b7 Mon Sep 17 00:00:00 2001
From: christianbeeznst <christian.fasanando@beeznest.com>
Date: Mon, 11 Mar 2024 13:31:33 -0500
Subject: [PATCH] User: Fix toolbar button in legal page - refs #5121

---
 .../components/basecomponents/BaseToolbar.vue | 24 +++++++++++++------
 assets/vue/views/terms/TermsList.vue          |  4 +++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/assets/vue/components/basecomponents/BaseToolbar.vue b/assets/vue/components/basecomponents/BaseToolbar.vue
index 9c24587c95..f996859e1d 100644
--- a/assets/vue/components/basecomponents/BaseToolbar.vue
+++ b/assets/vue/components/basecomponents/BaseToolbar.vue
@@ -1,9 +1,12 @@
 <template>
   <Toolbar :class="toolbarClass">
-    <template v-slot:start>
+    <template v-if="!hasStartSlot && !hasEndSlot" #start>
+      <slot></slot>
+    </template>
+    <template v-if="hasStartSlot" v-slot:start>
       <slot name="start"></slot>
     </template>
-    <template v-slot:end>
+    <template v-if="hasEndSlot" v-slot:end>
       <slot name="end"></slot>
     </template>
   </Toolbar>
@@ -11,7 +14,8 @@
 
 <script setup>
 import Toolbar from "primevue/toolbar"
-import { computed } from "vue"
+import { computed, onMounted, ref } from "vue"
+import { useSlots } from 'vue'
 
 const props = defineProps({
   showTopBorder: {
@@ -21,9 +25,15 @@ const props = defineProps({
 })
 
 const toolbarClass = computed(() => {
-  if (props.showTopBorder) {
-    return "pt-5 border-t border-b"
-  }
-  return "p-toolbar"
+  return props.showTopBorder ? "pt-5 border-t border-b" : "p-toolbar"
+})
+
+const slots = useSlots()
+const hasStartSlot = ref(false)
+const hasEndSlot = ref(false)
+
+onMounted(() => {
+  hasStartSlot.value = !!slots.start
+  hasEndSlot.value = !!slots.end
 })
 </script>
diff --git a/assets/vue/views/terms/TermsList.vue b/assets/vue/views/terms/TermsList.vue
index bf725bb525..4122b77bd9 100644
--- a/assets/vue/views/terms/TermsList.vue
+++ b/assets/vue/views/terms/TermsList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="terms-list-view mt-4">
-    <BaseToolbar>
+    <BaseToolbar showTopBorder>
         <BaseButton
           :label="t('Edit Terms and Conditions')"
           icon="edit"
@@ -45,6 +45,8 @@ import { useRouter } from "vue-router"
 import Message from "primevue/message"
 import languageService from "../../services/languageService"
 import legalService from "../../services/legalService"
+import Dropdown from "primevue/dropdown"
+import Button from "primevue/button"
 
 const { t } = useI18n()
 const router = useRouter()