resources/img/svg/chevron-double.svg

@@ -1 +0,0 @@
-<svg height="393.982" viewBox="0 0 106.351 98.496" width="425.402" xmlns="http://www.w3.org/2000/svg"><path d="M.44 4.66a4.57 4.57 0 0 1 1.41-3.295c1.882-1.82 4.928-1.82 6.808 0l44.737 43.3 44.738-43.3c1.881-1.82 4.927-1.82 6.807 0a4.552 4.552 0 0 1 0 6.589L56.8 54.547c-1.881 1.82-4.927 1.82-6.807 0L1.85 7.954A4.57 4.57 0 0 1 .44 4.66Z" style="stroke-width:1.18403"/><path d="M0 47.242a4.57 4.57 0 0 1 1.41-3.294c1.882-1.82 4.928-1.82 6.808 0l44.737 43.3 44.738-43.3c1.881-1.82 4.927-1.82 6.807 0a4.552 4.552 0 0 1 0 6.589L56.36 97.13c-1.881 1.82-4.927 1.82-6.807 0L1.41 50.537A4.57 4.57 0 0 1 0 47.242Z" style="stroke-width:1.18403"/><path d="M.44 4.66a4.57 4.57 0 0 1 1.41-3.295c1.882-1.82 4.928-1.82 6.808 0l44.737 43.3 44.738-43.3c1.881-1.82 4.927-1.82 6.807 0a4.552 4.552 0 0 1 0 6.589L56.8 54.547c-1.881 1.82-4.927 1.82-6.807 0L1.85 7.954A4.57 4.57 0 0 1 .44 4.66Z" style="stroke-width:1.18403"/></svg>

resources/img/svg/chevron-down.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
+<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/img/svg/chevron.svg

@@ -1 +0,0 @@
-<svg height="223.651" viewBox="0 0 105.911 55.913" width="423.642" xmlns="http://www.w3.org/2000/svg"><path d="M0 4.66a4.57 4.57 0 0 1 1.41-3.295c1.882-1.82 4.928-1.82 6.808 0l44.737 43.3 44.738-43.3c1.881-1.82 4.927-1.82 6.807 0a4.552 4.552 0 0 1 0 6.589L56.36 54.547c-1.881 1.82-4.927 1.82-6.807 0L1.41 7.954A4.57 4.57 0 0 1 0 4.66Z" style="stroke-width:1.18403"/></svg>

resources/js/components/form/Multipleselect.vue

@@ -5,13 +5,14 @@
             <span v-show="required" class="text-red-800">&nbsp;*</span>
         </span>
         <div class="relative real-field-wrap" :class="`size-${size}`">
-            <div class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
-                @click="visible = !visible" v-text="`${modelValue.length} Einträge ausgewählt`"></div>
-            <div v-show="visible"
-                class="absolute w-[max-content] z-30 max-h-[31rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
-                <div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
-                    <f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)"
-                        :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
+            <div
+                @click="visible = !visible"
+                class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
+                v-text="`${modelValue.length} Einträge ausgewählt`"
+            ></div>
+            <div v-show="visible" class="absolute w-[max-content] z-30 max-h-[31rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
+                <div v-for="(option, index) in parsedOptions" class="flex items-center space-x-2" :key="index">
+                    <f-switch :id="`${id}-${index}`" size="sm" :modelValue="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
                     <div class="text-sm text-gray-200" v-text="option.name"></div>
                 </div>
             </div>
@@ -20,11 +21,11 @@
                 <div v-if="hint" v-tooltip="hint">
                     <ui-sprite src="info-button" class="info-button"></ui-sprite>
                 </div>
-                <div v-if="size != 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
+                <div class="px-1 relative" v-if="size != 'xs'">
+                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></ui-sprite>
                 </div>
-                <div v-if="size == 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
+                <div class="px-1 relative" v-if="size == 'xs'">
+                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></ui-sprite>
                 </div>
             </div>
         </div>
@@ -35,6 +36,12 @@
 import map from 'lodash/map';
 
 export default {
+    emits: ['update:modelValue'],
+    data: function () {
+        return {
+            visible: false,
+        };
+    },
     props: {
         disabled: {
             type: Boolean,
@@ -76,12 +83,6 @@ export default {
             },
         },
     },
-    emits: ['update:modelValue'],
-    data: function () {
-        return {
-            visible: false,
-        };
-    },
     computed: {
         parsedOptions() {
             return Array.isArray(this.options)

resources/js/components/form/Select.vue

@@ -14,11 +14,11 @@
                 <div v-if="hint" v-tooltip="hint">
                     <ui-sprite src="info-button" class="info-button"></ui-sprite>
                 </div>
-                <div v-if="size != 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
+                <div class="px-1 relative" v-if="size != 'xs'">
+                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></ui-sprite>
                 </div>
-                <div v-if="size == 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
+                <div class="px-1 relative" v-if="size == 'xs'">
+                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></ui-sprite>
                 </div>
             </div>
         </div>
@@ -29,6 +29,7 @@
 import map from 'lodash/map';
 
 export default {
+    emits: ['update:modelValue'],
     props: {
         disabled: {
             type: Boolean,
@@ -79,7 +80,6 @@ export default {
             },
         },
     },
-    emits: ['update:modelValue'],
     computed: {
         parsedOptions() {
             return Array.isArray(this.options)
@@ -89,6 +89,14 @@ export default {
                   });
         },
     },
+    methods: {
+        trigger(v) {
+            this.$emit('update:modelValue', /^[0-9]+$/.test(v.target.value) ? parseInt(v.target.value) : v.target.value ? v.target.value : null);
+        },
+        clear() {
+            this.$emit('update:modelValue', null);
+        },
+    },
     mounted() {
         if (this.def !== -1 && typeof this.modelValue === 'undefined') {
             this.$emit('update:modelValue', this.def);
@@ -99,14 +107,6 @@ export default {
             this.$emit('update:modelValue', null);
         }
     },
-    methods: {
-        trigger(v) {
-            this.$emit('update:modelValue', /^[0-9]+$/.test(v.target.value) ? parseInt(v.target.value) : v.target.value ? v.target.value : null);
-        },
-        clear() {
-            this.$emit('update:modelValue', null);
-        },
-    },
 };
 </script>
 

resources/js/components/ui/Pagination.vue

@@ -1,32 +1,18 @@
 <template>
-    <div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
-        <div class="text-sm text-gray-500" v-text="desc"></div>
-        <div v-if="value.last_page > 1" class="items-center flex space-x-2">
-            <div class="hidden sm:flex text-gray-500 text-sm" v-text="pages"></div>
-            <button v-if="value.current_page !== 1" href="#"
-                class="rounded hidden sm:flex w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
-                @click.prevent="goto(1)">
-                <ui-sprite class="w-3 h-3 fill-current rotate-90" src="chevron-double"></ui-sprite>
-            </button>
-            <button v-if="value.current_page !== 1" href="#"
-                class="rounded !ml-0 sm:!ml-2 flex w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
-                @click.prevent="goto(value.current_page - 1)">
-                <ui-sprite class="w-3 h-3 fill-current rotate-90" src="chevron"></ui-sprite>
-            </button>
-            <button v-for="(button, index) in pageButtons" :key="index" href="#"
+    <div class="justify-between flex items-baseline">
+        <div class="text-sm text-gray-500" v-html="desc"></div>
+        <div class="-mx-1 items-baseline" :class="{hidden: value.last_page == 1, flex: value.last_page > 1}">
+            <div class="pl-1 pr-3 text-gray-500 text-sm">Seite:</div>
+            <div v-for="(link, index) in links" :key="index" class="px-1">
+                <button
+                    :key="index"
+                    href="#"
                     class="rounded text-sm w-8 h-8 text-primary-100 flex items-center justify-center leading-none shadow"
-                :class="{ 'bg-primary-700': button.current, 'bg-primary-900 hover:bg-primary-800': !button.current }"
-                @click.prevent="goto(button.page)" v-text="button.page"></button>
-            <button v-if="value.current_page !== value.last_page" href="#"
-                class="flex rounded text-sm w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
-                @click.prevent="goto(value.current_page + 1)">
-                <ui-sprite class="w-3 h-3 fill-current -rotate-90" src="chevron"></ui-sprite>
-            </button>
-            <button v-if="value.current_page !== value.last_page" href="#"
-                class="hidden sm:flex rounded text-sm w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
-                @click.prevent="goto(value.last_page)">
-                <ui-sprite class="w-3 h-3 fill-current -rotate-90" src="chevron-double"></ui-sprite>
-            </button>
+                    :class="{'bg-primary-700': link.current, 'bg-primary-900': !link.current}"
+                    @click.prevent="goto(link)"
+                    v-text="link.page"
+                ></button>
+            </div>
         </div>
     </div>
 </template>
@@ -48,23 +34,20 @@ export default {
     },
 
     computed: {
-        pageButtons() {
-            var buttons = [];
+        links() {
+            var links = [];
 
-            var from = Math.max(1, this.value.current_page - 2);
-            var to = Math.min(this.value.last_page, this.value.current_page + 2);
+            var from = Math.max(1, this.value.current_page - 3);
+            var to = Math.min(this.value.last_page, this.value.current_page + 3);
 
             for (var i = from; i <= to; i++) {
-                buttons.push({
+                links.push({
                     page: i,
                     current: i === this.value.current_page,
                 });
             }
 
-            return buttons;
-        },
-        pages() {
-            return `Seite ${this.value.current_page} von ${this.value.last_page}`;
+            return links;
         },
         desc() {
             return `${this.value.from} - ${this.value.to} von ${this.value.total} Einträgen`;
@@ -73,12 +56,12 @@ export default {
     methods: {
         goto(page) {
             if (this.$attrs.onReload) {
-                this.$emit('reload', page);
+                this.$emit('reload', page.page);
                 return;
             }
 
             var params = new URLSearchParams(window.location.search);
-            params.set('page', page);
+            params.set('page', page.page);
 
             this.$inertia.visit(window.location.pathname + '?' + params.toString(), {
                 only: this.only,

resources/js/views/activity/VIndex.vue

@@ -23,7 +23,7 @@
                 <td v-text="activity.name"></td>
                 <td>
                     <div class="flex space-x-1">
-                        <i-link v-tooltip="`Bearbeiten`" :href="activity.links.edit"
+                        <i-link v-tooltip="`bearbeiten`" :href="activity.links.edit"
                             class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></i-link>
                         <a v-tooltip="`Entfernen`" href="#" class="inline-flex btn btn-danger btn-sm"
                             @click.prevent="deleting = activity"><ui-sprite src="trash"></ui-sprite></a>

resources/js/views/member/Tags.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bool-row">
-        <ui-bool true-comment="In NaMi eingetragen" false-comment="Nicht in NaMi eingetragen" v-model="member.has_nami">N</ui-bool>
         <ui-bool true-comment="Mittendrin abonniert" false-comment="Mittendrin nicht abonníert" v-model="member.send_newspaper">M</ui-bool>
+        <ui-bool true-comment="In NaMi eingetragen" false-comment="Nicht in NaMi eingetragen" v-model="member.has_nami">N</ui-bool>
     </div>
 </template>
 

resources/js/views/member/VIndex.vue

@@ -1,23 +1,17 @@
 <template>
     <page-layout page-class="pb-6">
         <template #toolbar>
-            <page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Mitglied
-                anlegen</page-toolbar-button>
-            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.allpayment" color="primary"
-                icon="invoice">Rechnungen erstellen</page-toolbar-button>
-            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.sendpayment" color="info"
-                icon="envelope">Rechnungen versenden</page-toolbar-button>
+            <page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Mitglied anlegen</page-toolbar-button>
+            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.allpayment" color="primary" icon="invoice">Rechnungen erstellen</page-toolbar-button>
+            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.sendpayment" color="info" icon="envelope">Rechnungen versenden</page-toolbar-button>
         </template>
         <ui-popup v-if="deleting !== null" heading="Mitglied löschen?" @close="deleting.reject()">
             <div>
                 <p class="mt-4">Das Mitglied "{{ deleting.member.fullname }}" löschen?</p>
-                <p class="mt-2">Alle Zuordnungen (Ausbildungen, Rechnungen, Zahlungen, Tätigkeiten) werden ebenfalls
-                    entfernt.</p>
-                <ui-note v-if="!deleting.member.has_nami" class="mt-5" type="warning"> Dieses Mitglied ist nicht in NaMi
-                    vorhanden und wird daher nur in der AdReMa gelöscht werden. </ui-note>
+                <p class="mt-2">Alle Zuordnungen (Ausbildungen, Rechnungen, Zahlungen, Tätigkeiten) werden ebenfalls entfernt.</p>
+                <ui-note v-if="!deleting.member.has_nami" class="mt-5" type="warning"> Dieses Mitglied ist nicht in NaMi vorhanden und wird daher nur in der AdReMa gelöscht werden. </ui-note>
                 <ui-note v-if="deleting.member.has_nami" class="mt-5" type="danger">
-                    Dieses Mitglied ist in NaMi vorhanden und wird daher in NaMi abgemeldet werden. Sofern
-                    "Datenweiterverwendung" eingeschaltet ist, wird das Mitglied auf inaktiv gesetzt.
+                    Dieses Mitglied ist in NaMi vorhanden und wird daher in NaMi abgemeldet werden. Sofern "Datenweiterverwendung" eingeschaltet ist, wird das Mitglied auf inaktiv gesetzt.
                 </ui-note>
                 <div class="grid grid-cols-2 gap-3 mt-6">
                     <a href="#" class="text-center btn btn-danger" @click.prevent="deleting.resolve">Mitglied loschen</a>
@@ -26,22 +20,45 @@
             </div>
         </ui-popup>
         <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm"
-                @update:model-value="setFilter('search', $event)"></f-text>
-            <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände"
-                size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
-            <f-multipleselect id="group_ids" :options="meta.groups" :model-value="getFilter('group_ids')"
-                label="Gruppierungen" size="sm" name="group_ids"
-                @update:model-value="setFilter('group_ids', $event)"></f-multipleselect>
-            <f-select v-show="hasModule('bill')" id="billKinds" name="billKinds" :options="meta.billKinds"
-                :model-value="getFilter('bill_kind')" label="Rechnung" size="sm"
-                @update:model-value="setFilter('bill_kind', $event)"></f-select>
-            <f-multipleselect id="activity_ids" :options="meta.filterActivities" :model-value="getFilter('activity_ids')"
-                label="Tätigkeiten" size="sm" name="activity_ids"
-                @update:model-value="setFilter('activity_ids', $event)"></f-multipleselect>
-            <f-multipleselect id="subactivity_ids" :options="meta.filterSubactivities"
-                :model-value="getFilter('subactivity_ids')" label="Untertätigkeiten" size="sm" name="subactivity_ids"
-                @update:model-value="setFilter('subactivity_ids', $event)"></f-multipleselect>
+            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+            <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
+            <f-multipleselect
+                id="group_ids"
+                :options="meta.groups"
+                :model-value="getFilter('group_ids')"
+                label="Gruppierungen"
+                size="sm"
+                name="group_ids"
+                @update:model-value="setFilter('group_ids', $event)"
+            ></f-multipleselect>
+            <f-select
+                v-show="hasModule('bill')"
+                id="billKinds"
+                name="billKinds"
+                :options="meta.billKinds"
+                :model-value="getFilter('bill_kind')"
+                label="Rechnung"
+                size="sm"
+                @update:model-value="setFilter('bill_kind', $event)"
+            ></f-select>
+            <f-multipleselect
+                id="activity_ids"
+                :options="meta.filterActivities"
+                :model-value="getFilter('activity_ids')"
+                label="Tätigkeiten"
+                size="sm"
+                name="activity_ids"
+                @update:model-value="setFilter('activity_ids', $event)"
+            ></f-multipleselect>
+            <f-multipleselect
+                id="subactivity_ids"
+                :options="meta.filterSubactivities"
+                :model-value="getFilter('subactivity_ids')"
+                label="Untertätigkeiten"
+                size="sm"
+                name="subactivity_ids"
+                @update:model-value="setFilter('subactivity_ids', $event)"
+            ></f-multipleselect>
             <button class="btn btn-primary label mr-2" @click.prevent="exportMembers">
                 <ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite>
                 <span class="hidden xl:inline">Exportieren</span>
@@ -90,14 +107,11 @@
                 <div class="text-xs text-gray-200" v-text="member.full_address"></div>
                 <div class="flex items-center mt-1 space-x-4">
                     <tags :member="member"></tags>
-                    <ui-label v-show="hasModule('bill')" class="text-gray-100 block" :value="member.pending_payment"
-                        fallback=""></ui-label>
+                    <ui-label v-show="hasModule('bill')" class="text-gray-100 block" :value="member.pending_payment" fallback=""></ui-label>
                 </div>
-                <actions class="mt-2" :member="member" @sidebar="openSidebar(index, $event)" @remove="remove(member)">
-                </actions>
+                <actions class="mt-2" :member="member" @sidebar="openSidebar(index, $event)" @remove="remove(member)"> </actions>
                 <div class="absolute right-0 top-0 h-full flex items-center mr-2">
-                    <i-link v-tooltip="`Details`" :href="member.links.show"><ui-sprite src="chevron"
-                            class="w-6 h-6 text-teal-100 -rotate-90"></ui-sprite></i-link>
+                    <i-link v-tooltip="`Details`" :href="member.links.show"><ui-sprite src="chevron-down" class="w-6 h-6 text-teal-100 -rotate-90"></ui-sprite></i-link>
                 </div>
             </ui-box>
         </div>
@@ -106,13 +120,22 @@
             <ui-pagination class="mt-4" :value="meta" :only="['data']"></ui-pagination>
         </div>
 
-        <member-payments v-if="single !== null && sidebar === 'payment.index'" :subscriptions="meta.subscriptions"
-            :statuses="meta.statuses" :value="data[single]" @close="closeSidebar"></member-payments>
-        <member-memberships v-if="single !== null && sidebar === 'membership.index'" :groups="meta.groups"
-            :activities="meta.formActivities" :subactivities="meta.formSubactivities" :value="data[single]"
-            @close="closeSidebar"></member-memberships>
-        <member-courses v-if="single !== null && sidebar === 'courses.index'" :courses="meta.courses" :value="data[single]"
-            @close="closeSidebar"></member-courses>
+        <member-payments
+            v-if="single !== null && sidebar === 'payment.index'"
+            :subscriptions="meta.subscriptions"
+            :statuses="meta.statuses"
+            :value="data[single]"
+            @close="closeSidebar"
+        ></member-payments>
+        <member-memberships
+            v-if="single !== null && sidebar === 'membership.index'"
+            :groups="meta.groups"
+            :activities="meta.formActivities"
+            :subactivities="meta.formSubactivities"
+            :value="data[single]"
+            @close="closeSidebar"
+        ></member-memberships>
+        <member-courses v-if="single !== null && sidebar === 'courses.index'" :courses="meta.courses" :value="data[single]" @close="closeSidebar"></member-courses>
     </page-layout>
 </template>
 

resources/js/views/member/index/Actions.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex space-x-1">
         <i-link :href="member.links.show" class="inline-flex btn btn-primary btn-sm" v-tooltip="`Details`"><ui-sprite src="eye"></ui-sprite></i-link>
-        <i-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm" v-tooltip="`Bearbeiten`"><ui-sprite src="pencil"></ui-sprite></i-link>
+        <i-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm" v-tooltip="`bearbeiten`"><ui-sprite src="pencil"></ui-sprite></i-link>
         <a href="#" v-tooltip="`Zahlungen`" v-show="hasModule('bill')" @click.prevent="$emit('sidebar', 'payment.index')" class="inline-flex btn btn-info btn-sm"
             ><ui-sprite src="money"></ui-sprite
         ></a>