Add page layout to all views

resources/js/components/Page/Layout.vue

@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <div class="grow flex flex-col">
+        <div :class="pageClass" class="grow flex flex-col">
             <slot></slot>
         </div>
     </div>
@@ -27,6 +27,14 @@
 import {menuStore} from '../../stores/menuStore.js';
 
 export default {
+    inheritAttrs: false,
+    props: {
+        pageClass: {
+            default: () => '',
+            required: false,
+            type: String,
+        },
+    },
     data: function () {
         return {
             menuStore: menuStore(),

resources/js/views/Initialize/VIndex.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <div class="p-6 grid h-full items-center justify-center">
             <div class="rounded border-primary-700 border border-solid p-6">
                 <div class="text-lg text-gray-200 text-sm">
@@ -8,18 +9,13 @@
                 </div>
                 <form @submit.prevent="submit" class="grid gap-3 mt-5">
                     <f-text v-model="values.mglnr" label="Mitgliedsnummer" name="mglnr" id="mglnr"></f-text>
-                <f-text
+                    <f-text v-model="values.password" type="password" label="Passwort" name="password" id="password"></f-text>
-                    v-model="values.password"
-                    type="password"
-                    label="Passwort"
-                    name="password"
-                    id="password"
-                ></f-text>
                     <f-text v-model="values.group_id" label="Gruppierungsnummer" name="group_id" id="group_id"></f-text>
                     <button type="submit" class="btn w-full btn-primary mt-6 inline-block">Jetzt initialisieren</button>
                 </form>
             </div>
         </div>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/activity/VForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <form id="actionform" class="grow p-3" @submit.prevent="submit">
             <popup heading="Neue Untertätigkeit" v-if="mode === 'edit' && currentSubactivity !== null" @close="currentSubactivity = null">
                 <subactivity-form class="mt-4" v-if="currentSubactivity" :value="currentSubactivity" @stored="reloadSubactivities" @updated="mergeSubactivity"></subactivity-form>
@@ -16,11 +17,21 @@
                     <a href="#" @click.prevent="currentSubactivity = option" class="transition hover:bg-yellow-600 group w-5 h-5 rounded-full flex items-center justify-center flex-none">
                         <svg-sprite src="pencil" class="text-yellow-800 w-3 h-3 group-hover:text-yellow-200 transition"></svg-sprite>
                     </a>
-                <f-switch inline size="sm" :key="option.id" v-model="inner.subactivities" name="subactivities[]" :id="`subactivities-${option.id}`" :value="option.id" :label="option.name"></f-switch>
+                    <f-switch
+                        inline
+                        size="sm"
+                        :key="option.id"
+                        v-model="inner.subactivities"
+                        name="subactivities[]"
+                        :id="`subactivities-${option.id}`"
+                        :value="option.id"
+                        :label="option.name"
+                    ></f-switch>
                 </div>
             </div>
             <save-button form="actionform"></save-button>
         </form>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/activity/VIndex.vue

@@ -1,10 +1,8 @@
 <template>
-    <div class="pb-6">
+    <page-layout page-class="pb-6">
         <popup heading="Bitte bestätigen" v-if="deleting !== null">
             <div>
-                <p class="mt-4">
+                <p class="mt-4">Diese Aktivität löschen?</p>
-                    Diese Aktivität löschen?
-                </p>
                 <div class="grid grid-cols-2 gap-3 mt-6">
                     <a href="#" @click.prevent="remove" class="text-center btn btn-danger">Löschen</a>
                     <a href="#" @click.prevent="deleting = null" class="text-center btn btn-primary">Abbrechen</a>
@@ -22,13 +20,7 @@
                 <td>
                     <div class="flex space-x-1">
                         <i-link :href="activity.links.edit" class="inline-flex btn btn-warning btn-sm" v-tooltip="`bearbeiten`"><svg-sprite src="pencil"></svg-sprite></i-link>
-                        <i-link
+                        <i-link href="#" @click.prevent="deleting = activity" class="inline-flex btn btn-danger btn-sm" v-tooltip="`Entfernen`"><svg-sprite src="trash"></svg-sprite></i-link>
-                            href="#"
-                            @click.prevent="deleting = activity"
-                            class="inline-flex btn btn-danger btn-sm"
-                            v-tooltip="`Entfernen`"
-                            ><svg-sprite src="trash"></svg-sprite
-                        ></i-link>
                     </div>
                 </td>
             </tr>
@@ -37,16 +29,14 @@
         <div class="px-6">
             <v-pages class="mt-4" :value="data.meta" :only="['data']"></v-pages>
         </div>
-
+    </page-layout>
-    </div>
 </template>
 
 <script>
 import indexHelpers from '../../mixins/indexHelpers';
 
 export default {
-
+    data: function () {
-    data: function() {
         return {
             deleting: null,
         };
@@ -60,9 +50,9 @@ export default {
                 onSuccess(page) {
                     _self.inner = page.props.data;
                     _self.deleting = null;
-                }
+                },
             });
-        }
+        },
     },
 
     components: {
@@ -70,6 +60,5 @@ export default {
     },
 
     mixins: [indexHelpers],
-
 };
 </script>

resources/js/views/allpayment/VForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <form class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
             <f-text id="year" v-model="inner.year" label="Jahr" required></f-text>
 
@@ -6,6 +7,7 @@
 
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/contribution/VIndex.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
             <f-text id="eventName" name="eventName" class="col-span-2" v-model="values.eventName" label="Veranstaltungs-Name" required></f-text>
             <f-text id="dateFrom" name="dateFrom" type="date" v-model="values.dateFrom" label="Datum von" required></f-text>
@@ -44,6 +45,7 @@
                 v-text="compiler.title"
             ></button>
         </form>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/dashboard/VIndex.vue

@@ -1,5 +1,5 @@
 <template>
-    <page-layout title="Dashboard">
+    <page-layout>
         <div class="gap-6 md:grid-cols-2 xl:grid-cols-4 grid p-6">
             <v-block v-for="(block, index) in blocks" :key="index" :title="block.title">
                 <v-component :data="block.data" :is="block.component"></v-component>

resources/js/views/member/ShowView.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <div class="p-3 grid gap-3 this-grid grow">
             <box heading="Stammdaten" class="area-stamm hidden xl:block">
                 <stamm :inner="inner"></stamm>
@@ -29,10 +30,7 @@
             <box class="area-membershipcourse hidden xl:block">
                 <tabs v-model="tabs.membershipcourse">
                     <courses v-show="tabs.membershipcourse.active === 'course'" :value="inner.courses"></courses>
-                <memberships
+                    <memberships v-show="tabs.membershipcourse.active === 'membership'" :value="inner.memberships"></memberships>
-                    v-show="tabs.membershipcourse.active === 'membership'"
-                    :value="inner.memberships"
-                ></memberships>
                 </tabs>
             </box>
             <box heading="Ausbildungen" class="area-courses xl:hidden">
@@ -50,6 +48,7 @@
                 <vmap :inner="inner"></vmap>
             </box>
         </div>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/member/VForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-layout>
         <form class="flex grow relative" id="memberedit" @submit.prevent="submit">
             <save-button form="memberedit"></save-button>
             <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
@@ -102,6 +103,7 @@
                 </box>
             </div>
         </form>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/member/VIndex.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="pb-6">
+    <page-layout page-class="pb-6">
         <div class="px-6 py-2 flex border-b border-gray-600 items-center space-x-3">
             <f-text :value="getFilter('search')" @input="setFilter('search', $event)" id="search" name="search" label="Suchen …" size="sm"></f-text>
             <f-switch v-show="hasModule('bill')" id="ausstand" @input="setFilter('ausstand', $event)" :items="getFilter('ausstand')" label="Nur Ausstände" size="sm"></f-switch>
@@ -109,7 +109,7 @@
             ></member-memberships>
             <member-courses v-if="single !== null && sidebar === 'courses.index'" @close="closeSidebar" :courses="courses" :value="data.data[single]"></member-courses>
         </transition>
-    </div>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/sendpayment/VForm.vue

@@ -1,29 +1,30 @@
 <template>
+    <page-layout>
         <div class="grid grid-cols-2">
-        <div class="p-6" v-for="type, index in types" :key="index">
+            <div class="p-6" v-for="(type, index) in types" :key="index">
-            <p class="text-white" v-for="paragraph, index in type.text" :key="index" v-text="paragraph"></p>
+                <p class="text-white" v-for="(paragraph, index) in type.text" :key="index" v-text="paragraph"></p>
                 <a :href="type.link.href" target="_BLANK" class="btn btn-primary mt-3 inline-block" v-text="type.link.label"></a>
             </div>
         </div>
+    </page-layout>
 </template>
 
 <script>
 export default {
-    data: function() {
+    data: function () {
         return {
             inner: {},
         };
     },
 
     props: {
-        types: {}
+        types: {},
     },
 
     methods: {
         submit() {
-            this.$inertia.post(`/allpayment`, this.inner)
+            this.$inertia.post(`/allpayment`, this.inner);
-        }
+        },
-    }
+    },
-
 };
 </script>

resources/js/views/setting/Layout.vue

@@ -1,8 +1,10 @@
 <template>
+    <page-layout>
         <div class="flex grow relative">
             <v-tabs v-model="active" :entries="$page.props.setting_menu"></v-tabs>
             <slot></slot>
         </div>
+    </page-layout>
 </template>
 
 <script>

resources/js/views/subscription/SubscriptionForm.vue

@@ -1,58 +1,32 @@
 <template>
+    <page-layout>
         <form id="subedit" class="p-3 grid gap-3" @submit.prevent="submit">
             <save-button form="subedit"></save-button>
             <box heading="Beitrag">
                 <div class="grid gap-4 sm:grid-cols-2">
                     <f-text id="name" v-model="inner.name" label="Name" size="sm" required></f-text>
-                <f-select
+                    <f-select id="fee_id" name="fee_id" :options="fees" v-model="inner.fee_id" label="Nami-Beitrag" size="sm" required></f-select>
-                    id="fee_id"
-                    name="fee_id"
-                    :options="fees"
-                    v-model="inner.fee_id"
-                    label="Nami-Beitrag"
-                    size="sm"
-                    required
-                ></f-select>
                     <f-switch id="split" label="Rechnung aufsplitten" v-model="inner.split" size="sm"></f-switch>
-                <f-switch
+                    <f-switch id="for_promise" label="Für Versprechen benutzen" v-model="inner.for_promise" size="sm"></f-switch>
-                    id="for_promise"
-                    label="Für Versprechen benutzen"
-                    v-model="inner.for_promise"
-                    size="sm"
-                ></f-switch>
                 </div>
             </box>
             <box heading="Positionen">
                 <div class="flex flex-col space-y-4">
                     <div v-for="(pos, index) in inner.children" :key="index" class="flex space-x-2 items-end">
                         <f-text :id="`name-${index}`" v-model="pos.name" label="Name" size="sm" required></f-text>
-                    <f-text
+                        <f-text :id="`amount-${index}`" v-model="pos.amount" label="Beitrag" size="sm" mode="area" required></f-text>
-                        :id="`amount-${index}`"
+                        <a href="#" @click.prevent="inner.children.splice(index, 1)" class="btn btn-sm btn-danger icon flex-none">
-                        v-model="pos.amount"
-                        label="Beitrag"
-                        size="sm"
-                        mode="area"
-                        required
-                    ></f-text>
-                    <a
-                        href="#"
-                        @click.prevent="inner.children.splice(index, 1)"
-                        class="btn btn-sm btn-danger icon flex-none"
-                    >
                             <svg-sprite src="trash" class="w-5 h-5"></svg-sprite>
                         </a>
                     </div>
-                <a
+                    <a href="#" @click.prevent="inner.children.push({name: '', amount: 0})" class="btn btn-sm flex btn-primary flex self-start mt-4">
-                    href="#"
-                    @click.prevent="inner.children.push({name: '', amount: 0})"
-                    class="btn btn-sm flex btn-primary flex self-start mt-4"
-                >
                         <svg-sprite src="plus" class="w-5 h-5"></svg-sprite>
                         Position hinzufügen
                     </a>
                 </div>
             </box>
         </form>
+    </page-layout>
 </template>
 
 <script>
@@ -71,9 +45,7 @@ export default {
 
     methods: {
         submit() {
-            this.mode === 'create'
+            this.mode === 'create' ? this.$inertia.post(`/subscription`, this.inner) : this.$inertia.patch(`/subscription/${this.inner.id}`, this.inner);
-                ? this.$inertia.post(`/subscription`, this.inner)
-                : this.$inertia.patch(`/subscription/${this.inner.id}`, this.inner);
         },
     },
 

resources/js/views/subscription/SubscriptionIndex.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <page-layout>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
             <thead>
                 <th>Name</th>
@@ -19,13 +19,11 @@
                     <div v-text="subscription.fee_name"></div>
                 </td>
                 <td>
-                    <i-link :href="`/subscription/${subscription.id}/edit`" class="inline-flex btn btn-warning btn-sm"
+                    <i-link :href="`/subscription/${subscription.id}/edit`" class="inline-flex btn btn-warning btn-sm"><svg-sprite src="pencil"></svg-sprite></i-link>
-                        ><svg-sprite src="pencil"></svg-sprite
-                    ></i-link>
                 </td>
             </tr>
         </table>
-    </div>
+    </page-layout>
 </template>
 
 <script>