summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/EventModuleEventList.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2019-03-24 17:02:18 +0100
committerChristian Hofmaier2019-03-24 17:02:18 +0100
commit1ee0e6c1d7484930387438b7ebb15340595b5383 (patch)
treecff87a96c777b9fee0c3e066d1bd6d88763f1915 /webapp/src/components/EventModuleEventList.vue
parent[webapp] small design fixes (diff)
downloadbas-1ee0e6c1d7484930387438b7ebb15340595b5383.tar.gz
bas-1ee0e6c1d7484930387438b7ebb15340595b5383.tar.xz
bas-1ee0e6c1d7484930387438b7ebb15340595b5383.zip
[eventmanager] Add module and functionality
- list to show all events, buttons to create/delete events - can add groups/clients to event - can add blacklist to event
Diffstat (limited to 'webapp/src/components/EventModuleEventList.vue')
-rw-r--r--webapp/src/components/EventModuleEventList.vue85
1 files changed, 85 insertions, 0 deletions
diff --git a/webapp/src/components/EventModuleEventList.vue b/webapp/src/components/EventModuleEventList.vue
new file mode 100644
index 0000000..fe2ac1a
--- /dev/null
+++ b/webapp/src/components/EventModuleEventList.vue
@@ -0,0 +1,85 @@
+<i18n>
+{
+ "en": {
+ "create-event": "Create Event",
+ "delete-event": "Delete {0} Event | Delete {0} Events",
+ "name": "Name",
+ "description": "Description",
+ "config": "Configuration",
+ "times": "Times"
+ },
+ "de": {
+ "create-event": "Veranstaltung erstellen",
+ "delete-event": "Lösche {0} Veranstaltung | Lösche {0} Veranstaltungen",
+ "name": "Name",
+ "description": "Beschreibung",
+ "config": "Konfiguration",
+ "times": "Zeiten"
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-card>
+ <data-table v-model="selectedEvents" :headers="headers" :items="events">
+ <div slot="action" slot-scope="row" style="text-align: right">
+ <v-btn flat icon color="primary" @click.stop="editEvent(row.item)"><v-icon>edit</v-icon></v-btn>
+ </div>
+ </data-table>
+ </v-card>
+ <div class="text-xs-right">
+ <v-btn color="error" flat @click="deleteEvent" :disabled="selectedEvents.length === 0">
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-event', selectedEvents.length, [selectedEvents.length]) }}
+ </v-btn>
+ <v-btn color="success" flat @click="createEvent">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('create-event') }}
+ </v-btn>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import DataTable from '@/components/DataTable'
+
+export default {
+ name: 'EventModuleEventList',
+ components: {
+ DataTable
+ },
+ data () {
+ return {
+ selectedEvents: []
+ }
+ },
+ computed: {
+ headers () {
+ return [
+ { text: this.$t('name'), key: 'name' },
+ { text: this.$t('description'), key: 'description' },
+ { text: this.$t('config'), key: 'config' },
+ { sortable: false, key: 'action', width: '60px' }
+ ]
+ },
+ ...mapState('events', ['events'])
+ },
+ methods: {
+ ...mapMutations('events', ['setDialog']),
+ createEvent () {
+ this.setDialog({ show: true, type: 'edit', info: {} })
+ },
+ deleteEvent () {
+ this.setDialog({ show: true, type: 'delete', info: this.selectedEvents })
+ },
+ editEvent (event) {
+ this.setDialog({ show: true, type: 'edit', info: event })
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>