Add composable for index
This commit is contained in:
philipp lang
Philipp Lang
parent
69afeeda65
commit
1ac30202b1
|
|
@ -51,6 +51,7 @@ createInertiaApp({
|
|||
requireModules(import.meta.glob('./components/ui/*.vue'), app, 'ui');
|
||||
requireModules(import.meta.glob('./components/page/*.vue', {eager: true}), app, 'page');
|
||||
|
||||
app.provide('axios', app.config.globalProperties.axios);
|
||||
app.mount(el);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<Head :title="$page.props.title"></Head>
|
||||
<page-header :title="$page.props.title">
|
||||
<template #before-title>
|
||||
<a href="#" @click.prevent="menuStore.toggle()" class="mr-2 lg:hidden">
|
||||
<a href="#" class="mr-2 lg:hidden" @click.prevent="menuStore.toggle()">
|
||||
<ui-sprite src="menu" class="text-gray-100 w-5 h-5"></ui-sprite>
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
import {ref, computed} from 'vue';
|
||||
import {router} from '@inertiajs/vue3';
|
||||
|
||||
export function useIndex(props) {
|
||||
const rawProps = JSON.parse(JSON.stringify(props));
|
||||
const inner = {
|
||||
data: ref(rawProps.data),
|
||||
meta: ref(rawProps.meta),
|
||||
};
|
||||
|
||||
function toFilterString(data) {
|
||||
return btoa(encodeURIComponent(JSON.stringify(data)));
|
||||
}
|
||||
|
||||
const filterString = computed(() => toFilterString(inner.meta.value.filter));
|
||||
|
||||
function reload(resetPage = true) {
|
||||
var data = {
|
||||
filter: filterString.value,
|
||||
page: 1,
|
||||
};
|
||||
|
||||
data['page'] = resetPage ? 1 : inner.meta.value.current_page;
|
||||
|
||||
router.visit(window.location.pathname, {
|
||||
data,
|
||||
preserveState: true,
|
||||
onSuccess: (page) => {
|
||||
inner.data.value = page.props.data.data;
|
||||
inner.meta.value = page.props.data.meta;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function can(permission) {
|
||||
return inner.meta.value.can[permission];
|
||||
}
|
||||
|
||||
function getFilter(value) {
|
||||
return inner.meta.value.filter[value];
|
||||
}
|
||||
|
||||
function setFilter(key, value) {
|
||||
inner.meta.value.filter[key] = value;
|
||||
reload();
|
||||
}
|
||||
|
||||
function requestCallback(successMessage, failureMessage) {
|
||||
return {
|
||||
onSuccess: () => {
|
||||
this.$success(successMessage);
|
||||
reload(false);
|
||||
},
|
||||
onFailure: () => {
|
||||
this.$error(failureMessage);
|
||||
reload(false);
|
||||
},
|
||||
preserveState: true,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
data: inner.data,
|
||||
reload,
|
||||
can,
|
||||
getFilter,
|
||||
setFilter,
|
||||
requestCallback,
|
||||
meta: inner.meta,
|
||||
filterString,
|
||||
router,
|
||||
toFilterString,
|
||||
};
|
||||
}
|
||||
|
||||
const indexProps = {
|
||||
data: {
|
||||
default: () => {
|
||||
return {data: [], meta: {}};
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
};
|
||||
|
||||
export {indexProps};
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: {...this.data},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
},
|
||||
computed: {
|
||||
filterString() {
|
||||
return this.toFilterString(this.inner.meta.filter);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toFilterString(data) {
|
||||
return btoa(encodeURIComponent(JSON.stringify(data)));
|
||||
},
|
||||
reload(resetPage = true) {
|
||||
var _self = this;
|
||||
var data = {
|
||||
filter: this.filterString,
|
||||
page: 1,
|
||||
};
|
||||
|
||||
data['page'] = resetPage ? 1 : this.inner.meta.current_page;
|
||||
|
||||
this.$inertia.visit(window.location.pathname, {
|
||||
data,
|
||||
preserveState: true,
|
||||
onSuccess(page) {
|
||||
_self.inner = page.props.data;
|
||||
},
|
||||
});
|
||||
},
|
||||
can(permission) {
|
||||
return this.inner.meta.can[permission];
|
||||
},
|
||||
getFilter(value) {
|
||||
return this.inner.meta.filter[value];
|
||||
},
|
||||
setFilter(key, value) {
|
||||
this.inner.meta.filter[key] = value;
|
||||
this.reload();
|
||||
},
|
||||
requestCallback(successMessage, failureMessage) {
|
||||
return {
|
||||
onSuccess: () => {
|
||||
this.$success(successMessage);
|
||||
this.reload(false);
|
||||
},
|
||||
onFailure: () => {
|
||||
this.$error(failureMessage);
|
||||
this.reload(false);
|
||||
},
|
||||
preserveState: true,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<page-layout page-class="pb-6">
|
||||
<template #toolbar>
|
||||
<page-toolbar-button :href="data.meta.links.create" color="primary" icon="plus">Tätigkeit erstellen</page-toolbar-button>
|
||||
<page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Tätigkeit erstellen</page-toolbar-button>
|
||||
</template>
|
||||
<ui-popup heading="Bitte bestätigen" v-if="deleting !== null">
|
||||
<ui-popup v-if="deleting !== null" heading="Bitte bestätigen" @close="deleting = null">
|
||||
<div>
|
||||
<p class="mt-4">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>
|
||||
<a href="#" class="text-center btn btn-danger" @click.prevent="remove">Löschen</a>
|
||||
<a href="#" class="text-center btn btn-primary" @click.prevent="deleting = null">Abbrechen</a>
|
||||
</div>
|
||||
</div>
|
||||
</ui-popup>
|
||||
|
|
@ -18,46 +18,39 @@
|
|||
<th></th>
|
||||
</thead>
|
||||
|
||||
<tr v-for="(activity, index) in inner.data" :key="index">
|
||||
<tr v-for="(activity, index) in data" :key="index">
|
||||
<td v-text="activity.name"></td>
|
||||
<td>
|
||||
<div class="flex space-x-1">
|
||||
<i-link :href="activity.links.edit" class="inline-flex btn btn-warning btn-sm" v-tooltip="`bearbeiten`"><ui-sprite src="pencil"></ui-sprite></i-link>
|
||||
<i-link href="#" @click.prevent="deleting = activity" class="inline-flex btn btn-danger btn-sm" v-tooltip="`Entfernen`"><ui-sprite src="trash"></ui-sprite></i-link>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="px-6">
|
||||
<ui-pagination class="mt-4" :value="data.meta" :only="['data']"></ui-pagination>
|
||||
<ui-pagination class="mt-4" :value="meta" :only="['data']"></ui-pagination>
|
||||
</div>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexHelpers from '../../mixins/indexHelpers';
|
||||
<script setup>
|
||||
import {ref, defineProps} from 'vue';
|
||||
import {indexProps, useIndex} from '../../composables/useIndex.js';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
deleting: null,
|
||||
};
|
||||
},
|
||||
const props = defineProps(indexProps);
|
||||
const {router, data, meta} = useIndex(props.data);
|
||||
const deleting = ref(null);
|
||||
|
||||
methods: {
|
||||
remove() {
|
||||
var _self = this;
|
||||
this.$inertia.delete(this.deleting.links.destroy, {
|
||||
function remove() {
|
||||
router.delete(deleting.value.links.destroy, {
|
||||
preserveState: true,
|
||||
onSuccess(page) {
|
||||
_self.inner = page.props.data;
|
||||
_self.deleting = null;
|
||||
onSuccess: (page) => {
|
||||
data.value = page.props.data.data;
|
||||
meta.value = page.props.data.meta;
|
||||
deleting.value = null;
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [indexHelpers],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,60 +9,60 @@
|
|||
<form id="form" class="p-3 grid gap-3" @submit.prevent="submit">
|
||||
<ui-box heading="Metadatem">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<f-text id="name" name="name" v-model="model.name" label="Name" size="sm" required></f-text>
|
||||
<f-select id="gateway_id" name="gateway_id" :options="meta.gateways" v-model="model.gateway_id" label="Verbindung" size="sm" required></f-select>
|
||||
<f-text id="name" v-model="model.name" name="name" label="Name" size="sm" required></f-text>
|
||||
<f-select id="gateway_id" v-model="model.gateway_id" name="gateway_id" :options="meta.gateways" label="Verbindung" size="sm" required></f-select>
|
||||
</div>
|
||||
</ui-box>
|
||||
<ui-box heading="Filterregeln" v-if="members !== null">
|
||||
<ui-box v-if="members !== null" heading="Filterregeln">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<f-multipleselect
|
||||
id="activity_ids"
|
||||
v-model="model.filter.activity_ids"
|
||||
name="activity_ids"
|
||||
:options="members.meta.filterActivities"
|
||||
v-model="model.filter.activity_ids"
|
||||
@update:modelValue="reload(1)"
|
||||
label="Tätigkeit"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="subactivity_ids"
|
||||
v-model="model.filter.subactivity_ids"
|
||||
name="subactivity_ids"
|
||||
:options="members.meta.filterSubactivities"
|
||||
v-model="model.filter.subactivity_ids"
|
||||
@update:modelValue="reload(1)"
|
||||
label="Unterttätigkeit"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="include"
|
||||
v-model="model.filter.include"
|
||||
name="include"
|
||||
:options="members.meta.members"
|
||||
v-model="model.filter.include"
|
||||
@update:modelValue="reload(1)"
|
||||
label="Zusätzliche Mitglieder"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="exclude"
|
||||
v-model="model.filter.exclude"
|
||||
name="exclude"
|
||||
:options="members.meta.members"
|
||||
v-model="model.filter.exclude"
|
||||
@update:modelValue="reload(1)"
|
||||
label="Mitglieder ausschließen"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="groupIds"
|
||||
v-model="model.filter.group_ids"
|
||||
name="groupIds"
|
||||
:options="members.meta.groups"
|
||||
v-model="model.filter.group_ids"
|
||||
@update:modelValue="reload(1)"
|
||||
label="Gruppierungen"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
</div>
|
||||
</ui-box>
|
||||
<ui-box heading="Mitglieder" v-if="members !== null">
|
||||
<ui-box v-if="members !== null" heading="Mitglieder">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
|
||||
<thead>
|
||||
<th></th>
|
||||
|
|
@ -80,49 +80,46 @@
|
|||
<td v-text="member.email_parents"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<ui-pagination class="mt-4" @reload="reload" :value="members.meta" :only="['data']"></ui-pagination>
|
||||
<ui-pagination class="mt-4" :value="members.meta" :only="['data']" @reload="reload"></ui-pagination>
|
||||
</ui-box>
|
||||
</form>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexHelpers from '../../mixins/indexHelpers.js';
|
||||
import hasFlash from '../../mixins/hasFlash.js';
|
||||
<script setup>
|
||||
import {ref, inject, defineProps} from 'vue';
|
||||
import {useIndex} from '../../composables/useIndex.js';
|
||||
|
||||
export default {
|
||||
mixins: [indexHelpers, hasFlash],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
model: this.data === undefined ? {...this.meta.default_model} : {...this.data},
|
||||
members: null,
|
||||
};
|
||||
const props = defineProps({
|
||||
data: {
|
||||
default: () => undefined,
|
||||
type: Object,
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {},
|
||||
meta: {},
|
||||
meta: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
async reload(page) {
|
||||
this.members = (
|
||||
await this.axios.post('/api/member/search', {
|
||||
const {toFilterString, router} = useIndex({data: [], meta: {}});
|
||||
|
||||
const model = ref(props.data === undefined ? {...props.meta.default_model} : {...props.data});
|
||||
const members = ref(null);
|
||||
const axios = inject('axios');
|
||||
|
||||
async function reload(page) {
|
||||
members.value = (
|
||||
await axios.post('/api/member/search', {
|
||||
page: page || 1,
|
||||
filter: this.toFilterString(this.model.filter),
|
||||
filter: toFilterString(model.value.filter),
|
||||
})
|
||||
).data;
|
||||
},
|
||||
}
|
||||
|
||||
async submit() {
|
||||
this.model.id ? await this.axios.patch(this.model.links.update, this.model) : await this.axios.post('/maildispatcher', this.model);
|
||||
this.$inertia.visit(this.meta.links.index);
|
||||
},
|
||||
},
|
||||
reload();
|
||||
|
||||
async created() {
|
||||
this.reload();
|
||||
},
|
||||
};
|
||||
async function submit() {
|
||||
model.value.id ? await axios.patch(model.value.links.update, model.value) : await axios.post('/maildispatcher', model.value);
|
||||
router.visit(props.meta.links.index);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
<template>
|
||||
<page-layout>
|
||||
<template #toolbar>
|
||||
<page-toolbar-button @click.prevent="model = {...data.meta.default}" color="primary" icon="plus">Neue Verbindung</page-toolbar-button>
|
||||
<page-toolbar-button color="primary" icon="plus" @click.prevent="model = {...meta.default}">Neue Verbindung</page-toolbar-button>
|
||||
</template>
|
||||
<ui-popup :heading="model.id ? 'Verbindung bearbeiten' : 'Neue Verbindung'" v-if="model !== null" @close="model = null">
|
||||
<ui-popup v-if="model !== null" :heading="model.id ? 'Verbindung bearbeiten' : 'Neue Verbindung'" @close="model = null">
|
||||
<form @submit.prevent="submit">
|
||||
<section class="grid grid-cols-2 gap-3 mt-6">
|
||||
<f-text v-model="model.name" name="name" id="name" label="Bezeichnung" required></f-text>
|
||||
<f-text v-model="model.domain" name="domain" id="domain" label="Domain" required></f-text>
|
||||
<f-text id="name" v-model="model.name" name="name" label="Bezeichnung" required></f-text>
|
||||
<f-text id="domain" v-model="model.domain" name="domain" label="Domain" required></f-text>
|
||||
<f-select
|
||||
:modelValue="model.type.cls"
|
||||
@update:modelValue="
|
||||
id="type"
|
||||
:model-value="model.type.cls"
|
||||
label="Typ"
|
||||
name="type"
|
||||
:options="meta.types"
|
||||
:placeholder="''"
|
||||
required
|
||||
@update:model-value="
|
||||
model.type = {
|
||||
cls: $event,
|
||||
params: {...getType($event).defaults},
|
||||
}
|
||||
"
|
||||
label="Typ"
|
||||
name="type"
|
||||
id="type"
|
||||
:options="data.meta.types"
|
||||
:placeholder="''"
|
||||
required
|
||||
></f-select>
|
||||
<template v-for="(field, index) in getType(model.type.cls).fields">
|
||||
<f-text
|
||||
:key="index"
|
||||
v-if="field.type === 'text' || field.type === 'password' || field.type === 'email'"
|
||||
:id="field.name"
|
||||
:key="index"
|
||||
v-model="model.type.params[field.name]"
|
||||
:label="field.label"
|
||||
:type="field.type"
|
||||
:name="field.name"
|
||||
:id="field.name"
|
||||
v-model="model.type.params[field.name]"
|
||||
:required="field.is_required"
|
||||
></f-text>
|
||||
</template>
|
||||
</section>
|
||||
<section class="flex mt-4 space-x-2">
|
||||
<ui-button type="submit" class="btn-danger">Speichern</ui-button>
|
||||
<ui-button @click.prevent="model = null" class="btn-primary">Abbrechen</ui-button>
|
||||
<ui-button class="btn-primary" @click.prevent="model = null">Abbrechen</ui-button>
|
||||
</section>
|
||||
</form>
|
||||
</ui-popup>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<th>Aktion</th>
|
||||
</thead>
|
||||
|
||||
<tr v-for="(gateway, index) in inner.data" :key="index">
|
||||
<tr v-for="(gateway, index) in data" :key="index">
|
||||
<td v-text="gateway.name"></td>
|
||||
<td v-text="gateway.domain"></td>
|
||||
<td v-text="gateway.type_human"></td>
|
||||
|
|
@ -65,49 +65,36 @@
|
|||
></ui-boolean-display>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" v-tooltip="`Bearbeiten`" @click.prevent="model = {...gateway}" class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
<a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="model = {...gateway}"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="px-6">
|
||||
<ui-pagination class="mt-4" :value="data.meta" :only="['data']"></ui-pagination>
|
||||
<ui-pagination class="mt-4" :value="meta" :only="['data']"></ui-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</setting-layout>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {ref, inject} from 'vue';
|
||||
import {indexProps, useIndex} from '../../composables/useIndex.js';
|
||||
import SettingLayout from '../setting/Layout.vue';
|
||||
import indexHelpers from '../../mixins/indexHelpers.js';
|
||||
|
||||
export default {
|
||||
mixins: [indexHelpers],
|
||||
const props = defineProps(indexProps);
|
||||
const {meta, data, reload} = useIndex(props.data);
|
||||
const model = ref(null);
|
||||
const axios = inject('axios');
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
model: null,
|
||||
inner: {...this.data},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
},
|
||||
function getType(type) {
|
||||
return meta.value.types.find((t) => t.id === type);
|
||||
}
|
||||
async function submit() {
|
||||
await axios[model.value.id ? 'patch' : 'post'](model.value.id ? model.value.links.update : meta.value.links.store, model.value);
|
||||
|
||||
methods: {
|
||||
getType(type) {
|
||||
return this.data.meta.types.find((t) => t.id === type);
|
||||
},
|
||||
async submit() {
|
||||
await this.axios[this.model.id ? 'patch' : 'post'](this.model.id ? this.model.links.update : this.data.meta.links.store, this.model);
|
||||
|
||||
this.reload();
|
||||
this.model = null;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SettingLayout,
|
||||
},
|
||||
};
|
||||
reload();
|
||||
model.value = null;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,63 @@
|
|||
<template>
|
||||
<page-layout page-class="pb-6">
|
||||
<template #toolbar>
|
||||
<page-toolbar-button :href="data.meta.links.create" color="primary" icon="plus">Mitglied anlegen</page-toolbar-button>
|
||||
<page-toolbar-button :href="data.meta.links.allpayment" color="primary" icon="invoice" v-if="hasModule('bill')">Rechnungen erstellen</page-toolbar-button>
|
||||
<page-toolbar-button :href="data.meta.links.sendpayment" color="info" icon="envelope" v-if="hasModule('bill')">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 heading="Mitglied löschen?" v-if="deleting !== null" @close="deleting.reject()">
|
||||
<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 class="mt-5" type="warning" v-if="!deleting.member.has_nami"> Dieses Mitglied ist nicht in NaMi vorhanden und wird daher nur in der AdReMa gelöscht werden. </ui-note>
|
||||
<ui-note class="mt-5" type="danger" v-if="deleting.member.has_nami">
|
||||
<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.
|
||||
</ui-note>
|
||||
<div class="grid grid-cols-2 gap-3 mt-6">
|
||||
<a href="#" @click.prevent="deleting.resolve" class="text-center btn btn-danger">Mitglied loschen</a>
|
||||
<a href="#" @click.prevent="deleting.reject" class="text-center btn btn-primary">Abbrechen</a>
|
||||
<a href="#" class="text-center btn btn-danger" @click.prevent="deleting.resolve">Mitglied loschen</a>
|
||||
<a href="#" class="text-center btn btn-primary" @click.prevent="deleting.reject">Abbrechen</a>
|
||||
</div>
|
||||
</div>
|
||||
</ui-popup>
|
||||
<div class="px-6 py-2 flex border-b border-gray-600 items-center space-x-3">
|
||||
<f-text :modelValue="getFilter('search')" @update:modelValue="setFilter('search', $event)" id="search" name="search" label="Suchen …" size="sm"></f-text>
|
||||
<f-switch v-show="hasModule('bill')" id="ausstand" @update:modelValue="setFilter('ausstand', $event)" :modelValue="getFilter('ausstand')" label="Nur Ausstände" size="sm"></f-switch>
|
||||
<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"
|
||||
@update:modelValue="setFilter('group_ids', $event)"
|
||||
:options="data.meta.groups"
|
||||
:modelValue="getFilter('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')"
|
||||
name="billKinds"
|
||||
id="billKinds"
|
||||
@update:modelValue="setFilter('bill_kind', $event)"
|
||||
:options="data.meta.billKinds"
|
||||
:modelValue="getFilter('bill_kind')"
|
||||
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"
|
||||
@update:modelValue="setFilter('activity_ids', $event)"
|
||||
:options="data.meta.filterActivities"
|
||||
:modelValue="getFilter('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"
|
||||
@update:modelValue="setFilter('subactivity_ids', $event)"
|
||||
:options="data.meta.filterSubactivities"
|
||||
:modelValue="getFilter('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>
|
||||
|
|
@ -73,19 +73,21 @@
|
|||
<th class="hidden 2xl:table-cell">Ort</th>
|
||||
<th>Tags</th>
|
||||
<th class="hidden xl:table-cell">Alter</th>
|
||||
<th class="hidden xl:table-cell" v-show="hasModule('bill')">Rechnung</th>
|
||||
<th v-show="hasModule('bill')" class="hidden xl:table-cell">Rechnung</th>
|
||||
<th v-show="hasModule('bill')">Ausstand</th>
|
||||
<th></th>
|
||||
</thead>
|
||||
|
||||
<tr v-for="(member, index) in inner.data" :key="index">
|
||||
<tr v-for="(member, index) in data" :key="index">
|
||||
<td><ui-age-groups :member="member"></ui-age-groups></td>
|
||||
<td v-text="member.lastname"></td>
|
||||
<td v-text="member.firstname"></td>
|
||||
<td class="hidden 2xl:table-cell" v-text="member.full_address"></td>
|
||||
<td><tags :member="member"></tags></td>
|
||||
<td>
|
||||
<tags :member="member"></tags>
|
||||
</td>
|
||||
<td class="hidden xl:table-cell" v-text="member.age"></td>
|
||||
<td class="hidden xl:table-cell" v-show="hasModule('bill')">
|
||||
<td v-show="hasModule('bill')" class="hidden xl:table-cell">
|
||||
<ui-label :value="member.bill_kind_name" fallback="kein"></ui-label>
|
||||
</td>
|
||||
<td v-show="hasModule('bill')">
|
||||
|
|
@ -98,101 +100,82 @@
|
|||
</table>
|
||||
|
||||
<div class="md:hidden p-3 grid gap-3">
|
||||
<ui-box class="relative" :heading="member.fullname" v-for="(member, index) in data.data" :key="index">
|
||||
<div slot="in-title">
|
||||
<ui-box v-for="(member, index) in data.data" :key="index" class="relative" :heading="member.fullname">
|
||||
<template #in-title>
|
||||
<ui-age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></ui-age-groups>
|
||||
</div>
|
||||
</template>
|
||||
<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 class="text-gray-100 block" v-show="hasModule('bill')" :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>
|
||||
<div class="absolute right-0 top-0 h-full flex items-center mr-2">
|
||||
<i-link :href="member.links.show" v-tooltip="`Details`"><ui-sprite src="chevron-down" 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>
|
||||
|
||||
<div class="px-6">
|
||||
<ui-pagination class="mt-4" :value="data.meta" :only="['data']"></ui-pagination>
|
||||
<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"
|
||||
:subscriptions="data.meta.subscriptions"
|
||||
:statuses="data.meta.statuses"
|
||||
:value="data.data[single]"
|
||||
></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"
|
||||
:groups="data.meta.groups"
|
||||
:activities="data.meta.formActivities"
|
||||
:subactivities="data.meta.formSubactivities"
|
||||
:value="data.data[single]"
|
||||
></member-memberships>
|
||||
<member-courses v-if="single !== null && sidebar === 'courses.index'" @close="closeSidebar" :courses="data.meta.courses" :value="data.data[single]"></member-courses>
|
||||
<member-courses v-if="single !== null && sidebar === 'courses.index'" :courses="meta.courses" :value="data[single]" @close="closeSidebar"></member-courses>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import MemberPayments from './MemberPayments.vue';
|
||||
import MemberMemberships from './MemberMemberships.vue';
|
||||
import MemberCourses from './MemberCourses.vue';
|
||||
import indexHelpers from '../../mixins/indexHelpers.js';
|
||||
import hasModule from '../../mixins/hasModule.js';
|
||||
import Tags from './Tags.vue';
|
||||
import Actions from './index/Actions.vue';
|
||||
import {indexProps, useIndex} from '../../composables/useIndex.js';
|
||||
import {ref, defineProps} from 'vue';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
sidebar: null,
|
||||
single: null,
|
||||
deleting: null,
|
||||
};
|
||||
},
|
||||
const sidebar = ref(null);
|
||||
const single = ref(null);
|
||||
const deleting = ref(null);
|
||||
|
||||
mixins: [indexHelpers, hasModule],
|
||||
const props = defineProps(indexProps);
|
||||
var {router, data, meta, getFilter, setFilter, filterString} = useIndex(props.data);
|
||||
|
||||
components: {
|
||||
MemberMemberships,
|
||||
MemberPayments,
|
||||
MemberCourses,
|
||||
Tags,
|
||||
Actions,
|
||||
},
|
||||
function exportMembers() {
|
||||
window.open(`/member-export?filter=${filterString.value}`);
|
||||
}
|
||||
|
||||
methods: {
|
||||
exportMembers() {
|
||||
window.open(`/member-export?filter=${this.filterString}`);
|
||||
},
|
||||
async remove(member) {
|
||||
async function remove(member) {
|
||||
new Promise((resolve, reject) => {
|
||||
this.deleting = {resolve, reject, member};
|
||||
deleting.value = {resolve, reject, member};
|
||||
})
|
||||
.then(() => {
|
||||
this.$inertia.delete(`/member/${member.id}`);
|
||||
this.deleting = null;
|
||||
router.delete(`/member/${member.id}`);
|
||||
deleting.value = null;
|
||||
})
|
||||
.catch(() => {
|
||||
this.deleting = null;
|
||||
});
|
||||
},
|
||||
openSidebar(index, name) {
|
||||
this.single = index;
|
||||
this.sidebar = name;
|
||||
},
|
||||
closeSidebar() {
|
||||
this.single = null;
|
||||
this.sidebar = null;
|
||||
},
|
||||
},
|
||||
.catch(() => (deleting.value = null));
|
||||
}
|
||||
|
||||
props: {
|
||||
query: {},
|
||||
},
|
||||
};
|
||||
function openSidebar(index, name) {
|
||||
single.value = index;
|
||||
sidebar.value = name;
|
||||
}
|
||||
function closeSidebar() {
|
||||
single.value = null;
|
||||
sidebar.value = null;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue