90 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			90 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
|     <div class="sidebar flex flex-col">
 | |
|         <sidebar-header :links="links" @create="mode = 'create'; single = {}" @close="$emit('close')" title="Mitgliedschaften"></sidebar-header>
 | |
| 
 | |
|         <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
 | |
|             <f-select id="activity_id" :options="activities" v-model="single.activity_id" label="Tätigkeit" required></f-select>
 | |
|             <f-select v-if="single.activity_id" :options="subactivities[single.activity_id]" id="subactivity_id" v-model="single.subactivity_id" label="Untertätigkeit"></f-select>
 | |
|             <button type="submit" class="btn btn-primary">Absenden</button>
 | |
|         </form>
 | |
| 
 | |
|         <div class="grow" v-else>
 | |
|             <table class="custom-table custom-table-light custom-table-sm text-sm">
 | |
|                 <thead>
 | |
|                     <th>Tätigkeit</th>
 | |
|                     <th>Untertätigkeit</th>
 | |
|                     <th>Datum</th>
 | |
|                     <th></th>
 | |
|                 </thead>
 | |
| 
 | |
|                 <tr v-for="membership, index in value.memberships">
 | |
|                     <td v-text="membership.activity_name"></td>
 | |
|                     <td v-text="membership.subactivity_name"></td>
 | |
|                     <td v-text="membership.human_date"></td>
 | |
|                     <td class="flex">
 | |
|                         <a href="#" @click.prevent="single = membership; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
 | |
|                         <Link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
 | |
|                     </td>
 | |
|                 </tr>
 | |
|             </table>
 | |
|         </div>
 | |
|     </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import SidebarHeader from '../../components/SidebarHeader.vue';
 | |
| 
 | |
| export default {
 | |
|     data: function() {
 | |
|         return {
 | |
|             mode: null,
 | |
|             single: null,
 | |
|             links: [
 | |
|                 { event: 'create', label: 'Neu' }
 | |
|             ]
 | |
|         };
 | |
|     },
 | |
| 
 | |
|     components: { SidebarHeader },
 | |
| 
 | |
|     methods: {
 | |
|         remove(membership) {
 | |
|             this.$inertia.delete(`/member/${this.value.id}/membership/${membership.id}`);
 | |
|         },
 | |
| 
 | |
|         accept(payment) {
 | |
|             this.$inertia.patch(`/member/${this.value.id}/payment/${payment.id}`, { ...payment, status_id: 3 });
 | |
|         },
 | |
| 
 | |
|         openLink(link) {
 | |
|             if (link.disabled) {
 | |
|                 return;
 | |
|             }
 | |
| 
 | |
|             window.open(link.href);
 | |
|         },
 | |
| 
 | |
|         submit() {
 | |
|             var _self = this;
 | |
| 
 | |
|             var options = {
 | |
|                 onFinish() {
 | |
|                     _self.single = null;
 | |
|                     _self.mode = null;
 | |
|                 }
 | |
|             };
 | |
| 
 | |
|             this.mode === 'create' 
 | |
|                 ? this.$inertia.post(`/member/${this.value.id}/membership`, this.single, options)
 | |
|                 : this.$inertia.patch(`/member/${this.value.id}/membership/${this.single.id}`, this.single, options);
 | |
|         }
 | |
|     },
 | |
| 
 | |
|     props: {
 | |
|         value: {},
 | |
|         activities: {},
 | |
|         subactivities: {},
 | |
|     }
 | |
| };
 | |
| </script>
 |