Merge pull request #5233 from christianbeeznest/GH-5121-2

User: Fix toolbar button in legal page - refs #5121

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>

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()