102 lines
No EOL
4.7 KiB
Vue
102 lines
No EOL
4.7 KiB
Vue
<template>
|
|
<AsyncLoader :loaded="events.length > 0">
|
|
<ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events" :keyName="'slug'">
|
|
<template v-slot:header_actions>
|
|
<button class="btn btn-success" @click.prevent="openAddEventModal">
|
|
<font-awesome-icon icon="plus"/>
|
|
Create Event
|
|
</button>
|
|
</template>
|
|
<template v-slot:actions="{ item }">
|
|
<div class="btn-group">
|
|
<button class="btn btn-secondary" @click.stop="changeEvent(item)" style="white-space: nowrap;">
|
|
<font-awesome-icon icon="archive"/> use
|
|
</button>
|
|
<button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)" style="white-space: nowrap;">
|
|
<font-awesome-icon icon="trash"/> delete
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<template v-slot:detail="{id, item }">
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="date" class="form-control form-control-sm" title="Buildup Start"
|
|
v-model="item.pre_start" disabled style="opacity: 1"
|
|
:max="item.start" @focus="prepare_date_field">
|
|
</div>
|
|
<div class="col">
|
|
<input type="date" class="form-control form-control-sm" title="Official Event Start"
|
|
v-model="item.start" disabled style="opacity: 1"
|
|
:min="item.pre_start" :max="item.end" @focus="prepare_date_field">
|
|
</div>
|
|
<div class="col">
|
|
<input type="date" class="form-control form-control-sm" title="Official Event End"
|
|
v-model="item.end" disabled style="opacity: 1"
|
|
:min="item.start" :max="item.post_end" @focus="prepare_date_field">
|
|
</div>
|
|
<div class="col">
|
|
<input type="date" class="form-control form-control-sm" title="Teardown End"
|
|
v-model="item.post_end" disabled style="opacity: 1"
|
|
:min="item.end" @focus="prepare_date_field">
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<label class="mr-3">Addresses: </label>
|
|
<div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3"
|
|
@click.stop="deleteAddress(id, a_id)">
|
|
<button class="btn btn-secondary" disabled style="opacity: 1">
|
|
{{ address }}
|
|
</button>
|
|
<button class="btn btn-danger">
|
|
<font-awesome-icon icon="trash"/>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<input type="text" v-model="new_address[id]">
|
|
<button class="btn btn-secondary" @click.stop="addAddress(id)" style="white-space: nowrap;">
|
|
<font-awesome-icon icon="envelope"/> add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ExpandableTable>
|
|
</AsyncLoader>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapActions, mapMutations, mapState} from 'vuex';
|
|
import ExpandableTable from "@/components/ExpandableTable.vue";
|
|
import AsyncLoader from "@/components/AsyncLoader.vue";
|
|
|
|
export default {
|
|
name: 'Events',
|
|
components: {AsyncLoader, ExpandableTable},
|
|
computed: mapState(['events']),
|
|
data() {
|
|
return {new_address: []}
|
|
},
|
|
methods: {
|
|
...mapActions(['changeEvent', 'deleteEvent', 'updateEvent']),
|
|
...mapMutations(['openAddEventModal']),
|
|
safeDeleteEvent(id) {
|
|
if (confirm('do you want to completely delete this event and related data?')) {
|
|
this.deleteEvent(id)
|
|
}
|
|
},
|
|
addAddress(id) {
|
|
const a = this.new_address[id];
|
|
if (!this.events[id].addresses.includes(a))
|
|
this.events[id].addresses.push(a)
|
|
this.new_address[id] = ""
|
|
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
|
|
},
|
|
deleteAddress(id, a_id) {
|
|
this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id);
|
|
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |