Add ActionButton in tables

resources/js/components/ui/ActionButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <a v-tooltip="tooltip" :href="href" :target="blank ? '_BLANK' : '_SELF'" class="inline-flex btn btn-sm">
+        <ui-sprite :src="icon"></ui-sprite>
+    </a>
+</template>
+
+<script setup>
+defineProps({
+    tooltip: {
+        required: true,
+        type: String,
+    },
+    href: {
+        type: String,
+        default: () => '#',
+        required: false,
+    },
+    blank: {
+        type: Boolean,
+        default: () => false,
+        required: false,
+    },
+    icon: {
+        type: String,
+        required: true,
+    },
+});
+</script>

resources/js/views/form/Index.vue

@@ -112,9 +112,11 @@
                     <div v-text="form.participants_count"></div>
                 </td>
                 <td>
-                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(form)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <div class="flex space-x-2">
-                    <a v-tooltip="`Teilnehmende anzeigen`" href="#" class="ml-2 inline-flex btn btn-info btn-sm" @click.prevent="showParticipants(form)"><ui-sprite src="user"></ui-sprite></a>
+                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(form)"></ui-action-button>
-                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = form"><ui-sprite src="trash"></ui-sprite></a>
+                        <ui-action-button tooltip="Teilnehmende anzeigen" class="btn-info" icon="user" @click.prevent="showParticipants(form)"></ui-action-button>
+                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = form"></ui-action-button>
+                    </div>
                 </td>
             </tr>
         </table>

resources/js/views/invoice/Index.vue

@@ -99,10 +99,12 @@
                     <div v-text="invoice.via"></div>
                 </td>
                 <td>
-                    <a v-tooltip="`Anschauen`" :href="invoice.links.pdf" target="_BLANK" class="inline-flex btn btn-info btn-sm"><ui-sprite src="eye"></ui-sprite></a>
+                    <div class="flex space-x-2">
-                    <a v-tooltip="`Erinnerung anschauen`" :href="invoice.links.rememberpdf" target="_BLANK" class="ml-2 inline-flex btn btn-info btn-sm"><ui-sprite src="document"></ui-sprite></a>
+                        <ui-action-button tooltip="Anschauen" :href="invoice.links.pdf" class="btn-info" icon="eye" blank></ui-action-button>
-                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(invoice)"><ui-sprite src="pencil"></ui-sprite></a>
+                        <ui-action-button tooltip="Erinnerung anschauen" :href="invoice.links.rememberpdf" class="btn-info" icon="document" blank></ui-action-button>
-                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = invoice"><ui-sprite src="trash"></ui-sprite></a>
+                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(invoice)"></ui-action-button>
+                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = invoice"></ui-action-button>
+                    </div>
                 </td>
             </tr>
         </table>