Add tooltip slot to sidebar header

resources/js/components/SidebarHeader.vue

@@ -2,25 +2,7 @@
     <div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
         <div class="flex items-center">
             <span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
-            <a
+            <slot name="toolbar"></slot>
-                v-for="(link, index) in links.filter((link) => link.icon === undefined)"
-                :key="index"
-                @click.prevent="$emit(link.event)"
-                href="#"
-                class="btn label btn-primary-light"
-            >
-                <span v-if="link.label" v-text="link.label"></span>
-                <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
-            </a>
-            <a
-                v-for="(link, index) in links.filter((link) => link.icon !== undefined)"
-                :key="index"
-                :href="link.href"
-                class="btn label icon btn-primary-light ml-1"
-            >
-                <span v-if="link.label" v-text="link.label"></span>
-                <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
-            </a>
         </div>
         <div class="flex ml-4">
             <a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
@@ -33,11 +15,6 @@
 <script>
 export default {
     props: {
-        links: {
-            default: function () {
-                return [];
-            },
-        },
         title: {
             default: function () {
                 return '';

resources/js/components/page/ToolbarButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <i-link :href="href" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
+    <i-link :href="href" v-on="$listeners" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
         <svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite>
         <span class="hidden xl:inline"><slot></slot></span>
     </i-link>

resources/js/views/member/MemberCourses.vue

@@ -1,25 +1,15 @@
 <template>
     <div class="sidebar flex flex-col">
-        <sidebar-header
+        <sidebar-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen">
-            :links="indexLinks"
+            <div class="flex" slot="toolbar">
-            @close="$emit('close')"
+                <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Ausbildung</page-toolbar-button>
-            @create="
+                <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
-                mode = 'create';
+            </div>
-                single = {};
+        </sidebar-header>
-            "
-            title="Ausbildungen"
-        ></sidebar-header>
 
         <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
             <f-text id="completed_at" type="date" v-model="single.completed_at" label="Datum" required></f-text>
-            <f-select
+            <f-select id="course_id" name="course_id" :options="courses" v-model="single.course_id" label="Baustein" required></f-select>
-                id="course_id"
-                name="course_id"
-                :options="courses"
-                v-model="single.course_id"
-                label="Baustein"
-                required
-            ></f-select>
             <f-text id="event_name" v-model="single.event_name" label="Veranstaltung" required></f-text>
             <f-text id="organizer" v-model="single.organizer" label="Veranstalter" required></f-text>
             <button type="submit" class="btn btn-primary">Absenden</button>
@@ -50,9 +40,7 @@
                             class="inline-flex btn btn-warning btn-sm"
                             ><svg-sprite src="pencil"></svg-sprite
                         ></a>
-                        <i-link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"
+                        <i-link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
-                            ><svg-sprite src="trash"></svg-sprite
-                        ></i-link>
                     </td>
                 </tr>
             </table>
@@ -80,6 +68,13 @@ export default {
     components: {SidebarHeader},
 
     methods: {
+        create() {
+            this.mode = 'create';
+            this.single = {};
+        },
+        cancel() {
+            this.mode = this.single = null;
+        },
         remove(payment) {
             this.$inertia.delete(`/member/${this.value.id}/course/${payment.id}`);
         },

resources/js/views/member/MemberMemberships.vue

@@ -1,34 +1,15 @@
 <template>
     <div class="sidebar flex flex-col">
-        <sidebar-header
+        <sidebar-header :links="links" @close="$emit('close')" title="Mitgliedschaften">
-            :links="links"
+            <div class="flex" slot="toolbar">
-            @create="
+                <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Mitgliedschaft</page-toolbar-button>
-                mode = 'create';
+                <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
-                single = {...def};
+            </div>
-            "
+        </sidebar-header>
-            @close="$emit('close')"
-            title="Mitgliedschaften"
-        ></sidebar-header>
 
         <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-            <f-select
+            <f-select id="group_id" name="group_id" :options="groups" v-model="single.group_id" label="Gruppierung" size="sm" required></f-select>
-                id="group_id"
+            <f-select id="activity_id" name="activity_id" :options="activities" v-model="single.activity_id" label="Tätigkeit" size="sm" required></f-select>
-                name="group_id"
-                :options="groups"
-                v-model="single.group_id"
-                label="Gruppierung"
-                size="sm"
-                required
-            ></f-select>
-            <f-select
-                id="activity_id"
-                name="activity_id"
-                :options="activities"
-                v-model="single.activity_id"
-                label="Tätigkeit"
-                size="sm"
-                required
-            ></f-select>
             <f-select
                 v-if="single.activity_id"
                 name="subactivity_id"
@@ -38,21 +19,8 @@
                 label="Untertätigkeit"
                 size="sm"
             ></f-select>
-            <f-switch
+            <f-switch id="has_promise" :items="single.promised_at !== null" @input="single.promised_at = $event ? '2000-02-02' : null" size="sm" label="Hat Versprechen"></f-switch>
-                id="has_promise"
+            <f-text v-show="single.promised_at !== null" type="date" id="promised_at" v-model="single.promised_at" label="Versprechensdatum" size="sm"></f-text>
-                :items="single.promised_at !== null"
-                @input="single.promised_at = $event ? '2000-02-02' : null"
-                size="sm"
-                label="Hat Versprechen"
-            ></f-switch>
-            <f-text
-                v-show="single.promised_at !== null"
-                type="date"
-                id="promised_at"
-                v-model="single.promised_at"
-                label="Versprechensdatum"
-                size="sm"
-            ></f-text>
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
@@ -79,9 +47,7 @@
                             class="inline-flex btn btn-warning btn-sm"
                             ><svg-sprite src="pencil"></svg-sprite
                         ></a>
-                        <i-link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"
+                        <i-link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
-                            ><svg-sprite src="trash"></svg-sprite
-                        ></i-link>
                     </td>
                 </tr>
             </table>
@@ -109,12 +75,19 @@ export default {
                 group_id: this.value.group_id,
                 activity_id: null,
                 subactivity_id: null,
-                promised_at: null
+                promised_at: null,
             };
-        }
+        },
     },
 
     methods: {
+        create() {
+            this.mode = 'create';
+            this.single = {...this.def};
+        },
+        cancel() {
+            this.mode = this.single = null;
+        },
         remove(membership) {
             this.$inertia.delete(`/member/${this.value.id}/membership/${membership.id}`);
         },

resources/js/views/member/MemberPayments.vue

@@ -1,33 +1,16 @@
 <template>
     <div class="sidebar flex flex-col">
-        <sidebar-header
+        <sidebar-header @close="$emit('close')" title="Zahlungen">
-            :links="indexLinks"
+            <div class="flex" slot="toolbar">
-            @close="$emit('close')"
+                <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Zahlung</page-toolbar-button>
-            @create="
+                <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
-                mode = 'create';
+            </div>
-                single = {};
+        </sidebar-header>
-            "
-            title="Zahlungen"
-        ></sidebar-header>
 
         <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
             <f-text id="nr" v-model="single.nr" label="Jahr" required></f-text>
-            <f-select
+            <f-select id="subscription_id" name="subscription_id" :options="subscriptions" v-model="single.subscription_id" label="Beitrag" required></f-select>
-                id="subscription_id"
+            <f-select id="status_id" name="status_id" :options="statuses" v-model="single.status_id" label="Status" required></f-select>
-                name="subscription_id"
-                :options="subscriptions"
-                v-model="single.subscription_id"
-                label="Beitrag"
-                required
-            ></f-select>
-            <f-select
-                id="status_id"
-                name="status_id"
-                :options="statuses"
-                v-model="single.status_id"
-                label="Status"
-                required
-            ></f-select>
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
@@ -54,16 +37,8 @@
                             class="inline-flex btn btn-warning btn-sm"
                             ><svg-sprite src="pencil"></svg-sprite
                         ></a>
-                        <i-link
+                        <i-link v-show="!payment.is_accepted" href="#" @click.prevent="accept(payment)" class="inline-flex btn btn-success btn-sm"><svg-sprite src="check"></svg-sprite></i-link>
-                            v-show="!payment.is_accepted"
+                        <i-link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
-                            href="#"
-                            @click.prevent="accept(payment)"
-                            class="inline-flex btn btn-success btn-sm"
-                            ><svg-sprite src="check"></svg-sprite
-                        ></i-link>
-                        <i-link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"
-                            ><svg-sprite src="trash"></svg-sprite
-                        ></i-link>
                     </td>
                 </tr>
             </table>
@@ -91,13 +66,19 @@ export default {
         return {
             mode: null,
             single: null,
-            indexLinks: [{event: 'create', label: 'Neue Zahlung'}],
         };
     },
 
     components: {SidebarHeader},
 
     methods: {
+        create() {
+            this.mode = 'create';
+            this.single = {};
+        },
+        cancel() {
+            this.mode = this.single = null;
+        },
         remove(payment) {
             this.$inertia.delete(`/member/${this.value.id}/payment/${payment.id}`);
         },