add form to create new event

web/src/views/admin/Events.vue

@@ -4,13 +4,19 @@
         :items="events"
         :keyName="'slug'"
     >
-        <template #actions="{ item }">
+        <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)">
                     <font-awesome-icon icon="archive"/>
                     use
                 </button>
-                <button class="btn btn-danger" @click.stop="">
+                <button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)">
                     <font-awesome-icon icon="trash"/>
                     delete
                 </button>
@@ -20,14 +26,22 @@
 </template>
 
 <script>
-import {mapActions, mapState} from 'vuex';
+import {mapActions, mapMutations, mapState} from 'vuex';
 import Table from '@/components/Table';
 
 export default {
     name: 'Events',
     components: {Table},
     computed: mapState(['events']),
-    methods: mapActions(['changeEvent']),
+    methods: {
+        ...mapActions(['changeEvent', 'deleteEvent']),
+        ...mapMutations(['openAddEventModal']),
+        safeDeleteEvent(id) {
+            if (confirm('do you want to completely delete this event and related data?')) {
+                this.deleteEvent(id)
+            }
+        },
+    },
 };
 </script>