From bfaabb44946c4b5dbd5a8133abfb43747d9d4aed Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:56:48 +0100
Subject: [PATCH] Refactor nested button links

---
 resources/js/components/AppBanner.vue | 25 ++++++++++++++++-----
 resources/js/views/MeetingsIndex.vue  | 32 ++++++++++++---------------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/AppBanner.vue b/resources/js/components/AppBanner.vue
index a0b332c43..1e5d5897f 100644
--- a/resources/js/components/AppBanner.vue
+++ b/resources/js/components/AppBanner.vue
@@ -27,22 +27,27 @@
       <p class="m-0 whitespace-pre-wrap">
         {{ message }}
       </p>
-      <!-- TODO Refactor -->
-      <a v-if="link" :href="link" :target="`_${linkTarget}`">
+      <div>
         <Button
+          v-if="link"
+          as="a"
+          :href="link"
+          :target="`_${linkTarget}`"
           :link="linkStyle === 'link'"
-          :style="linkStyle === 'link' ? { color: color } : {}"
-          :class="linkStyle === 'link' ? 'p-0 underline' : ''"
+          :style="buttonStyle"
+          :class="buttonClass"
           :severity="linkStyle"
           :label="linkText ? linkText : link"
         />
-      </a>
+      </div>
     </div>
   </Message>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   background: {
     type: String,
     default: null,
@@ -88,6 +93,14 @@ defineProps({
     default: null,
   },
 });
+
+const buttonClass = computed(() => {
+  return props.linkStyle === "link" ? "p-0 underline" : "";
+});
+
+const buttonStyle = computed(() => {
+  return props.linkStyle === "link" ? { color: props.color } : {};
+});
 </script>
 <style scoped>
 .banner-message {
diff --git a/resources/js/views/MeetingsIndex.vue b/resources/js/views/MeetingsIndex.vue
index 47fddfa27..a2ac1e575 100644
--- a/resources/js/views/MeetingsIndex.vue
+++ b/resources/js/views/MeetingsIndex.vue
@@ -198,28 +198,24 @@
           <Column :style="{ width: '100px' }" :header="$t('app.actions')">
             <template #body="slotProps">
               <div class="flex justify-between">
-                <!-- TODO Refactor -->
-                <router-link
+                <Button
+                  v-tooltip="
+                    $t('meetings.view_room', {
+                      name: slotProps.data.room.name,
+                    })
+                  "
                   :to="{
                     name: 'rooms.view',
                     params: { id: slotProps.data.room.id },
                   }"
-                  :disabled="true"
-                >
-                  <Button
-                    v-tooltip="
-                      $t('meetings.view_room', {
-                        name: slotProps.data.room.name,
-                      })
-                    "
-                    :aria-label="
-                      $t('meetings.view_room', {
-                        name: slotProps.data.room.name,
-                      })
-                    "
-                    icon="fa-solid fa-eye"
-                  />
-                </router-link>
+                  as="router-link"
+                  :aria-label="
+                    $t('meetings.view_room', {
+                      name: slotProps.data.room.name,
+                    })
+                  "
+                  icon="fa-solid fa-eye"
+                />
               </div>
             </template>
           </Column>