58 lines
2.4 KiB
Vue
58 lines
2.4 KiB
Vue
<template>
|
|
<page-layout page-class="pb-6">
|
|
<template #toolbar>
|
|
<page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Tätigkeit erstellen</page-toolbar-button>
|
|
<page-toolbar-button :href="meta.links.membership_masslist" color="primary" icon="pencil">Mitgliedschaften zuweisen</page-toolbar-button>
|
|
</template>
|
|
<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="#" 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>
|
|
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm table">
|
|
<thead>
|
|
<th>Name</th>
|
|
<th></th>
|
|
</thead>
|
|
|
|
<tr v-for="(activity, index) in data" :key="index">
|
|
<td v-text="activity.name"></td>
|
|
<td>
|
|
<div class="flex space-x-1">
|
|
<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="meta" :only="['data']"></ui-pagination>
|
|
</div>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script lang="js" setup>
|
|
import { ref, defineProps } from 'vue';
|
|
import { indexProps, useIndex } from '../../composables/useIndex.js';
|
|
|
|
const props = defineProps(indexProps);
|
|
const { router, data, meta } = useIndex(props.data, 'activity');
|
|
const deleting = ref(null);
|
|
|
|
function remove() {
|
|
router.delete(deleting.value.links.destroy, {
|
|
preserveState: true,
|
|
onSuccess: (page) => {
|
|
data.value = page.props.data.data;
|
|
meta.value = page.props.data.meta;
|
|
deleting.value = null;
|
|
},
|
|
});
|
|
}
|
|
</script>
|