src/plugins/schedule/components/management/Eventtypes.vue

@@ -1,18 +1,42 @@
 <template>
   <div>
+    <q-dialog v-model="edittype">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Editere Diensttyp {{ actualEvent.name }}</div>
+        </q-card-section>
+        <q-card-section>
+          <q-input dense label="name" filled v-model="newEventName" />
+        </q-card-section>
+        <q-card-actions>
+          <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
+          <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
     <q-page padding>
       <q-card>
         <q-card-section>
-          <q-table title="Veranstaltungstypen" :data="rows" row-key="userid" :columns="columns">
+          <q-table title="Veranstaltungstypen" :data="rows" row-key="jobid" :columns="columns">
             <template v-slot:top-right>
-              <q-input dense v-model="newevent" placeholder="Neuer Typ" />
+              <q-input dense v-model="newEventType" placeholder="Neuer Typ" />
 
               <div></div>
-              <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" />
+              <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
+            </template>
+            <template v-slot:body-cell-actions="props">
+              <!-- <q-btn :label="item"> -->
+              <!-- {{ item.row.name }} -->
+              <q-td :props="props" align="right" :auto-width="true">
+                <q-btn
+                  round
+                  icon="mdi-pencil"
+                  @click="editType({ id: props.row.id, name: props.row.name })"
+                />
+                <q-btn round icon="mdi-delete" @click="deleteType(props.row.name)" />
+              </q-td>
             </template>
-            <!-- <template v-slot:top-right>
-                  <q-btn round color="primary" icon="mdi-plus"/>
-                </template> -->
           </q-table>
         </q-card-section>
       </q-card>
@@ -21,38 +45,91 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref, computed, onBeforeMount } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
+import { ScheduleInterface, EventType } from '../../store/schedule';
 export default defineComponent({
-  name: 'Eventtypes',
+  name: 'EventTypes',
   components: {},
   setup(_, { root }) {
     const store = <Store<StateInterface>>root.$store;
-    const user = ref<FG.User>({
-      userid: '',
-      display_name: '',
-      firstname: '',
-      lastname: '',
-      mail: '',
-      roles: []
+    const state = <ScheduleInterface>store.state.schedule;
+    const newEventType = ref('');
+    const edittype = ref(false);
+    const emptyEvent: EventType = { id: -1, name: '' };
+    const actualEvent = ref(emptyEvent);
+    const newEventName = ref('');
+
+    onBeforeMount(() => {
+      void store.dispatch('schedule/getEventTypes').then(() => {
+        console.log('eventTypes:', rows);
+      });
+      console.log(store);
     });
+
+    const rows = computed(() => state.eventTypes);
+
     const columns = [
       {
-        name: 'eventname',
-        label: 'Name',
-        field: 'eventname',
+        name: 'name',
+        label: 'Veranstaltungstyp',
+        field: 'name',
         align: 'left',
         sortable: true
       },
       {
         name: 'actions',
         label: 'Aktionen',
-        field: 'actions'
+        field: 'actions',
+        align: 'right'
       }
     ];
 
-    return { user, columns };
+    function addType() {
+      void store.dispatch('schedule/addEventType', { name: newEventType.value });
+      newEventType.value = '';
+    }
+
+    function editType(event: EventType) {
+      edittype.value = true;
+      actualEvent.value = event;
+    }
+
+    function saveChanges() {
+      void store
+        .dispatch('schedule/changeEventTypeName', {
+          id: actualEvent.value.id,
+          name: newEventName.value,
+          oldname: actualEvent.value.name
+        })
+        .finally(() => {
+          discardChanges();
+        });
+    }
+
+    function discardChanges() {
+      actualEvent.value = emptyEvent;
+      newEventName.value = '';
+      edittype.value = false;
+    }
+
+    function deleteType(name: string) {
+      void store.dispatch('schedule/removeEventType', name);
+    }
+    return {
+      columns,
+      rows,
+      addType,
+      newEventType,
+      deleteType,
+      edittype,
+      editType,
+      actualEvent,
+      newEventName,
+      discardChanges,
+      saveChanges
+    };
   }
 });
 </script>

src/plugins/schedule/components/management/JobTypes.vue

@@ -9,7 +9,7 @@
           <q-input dense label="name" filled v-model="newJobName" />
         </q-card-section>
         <q-card-actions>
-          <q-btn flat color="danger" label="Abbrechen" @click="discardChanes()" />
+          <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
           <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
         </q-card-actions>
       </q-card>

src/plugins/schedule/store/schedule.ts

@@ -8,16 +8,19 @@ export interface JobType {
   name: string;
 }
 
-export interface ScheduleInterface {
-  jobTypes: JobType[];
+export interface EventType {
+  id: number;
+  name: string;
 }
 
-// export interface StateInterfaceSchedule extends StateInterface {
-// //   balance: BalanceInterface;
-// }
+export interface ScheduleInterface {
+  jobTypes: JobType[];
+  eventTypes: EventType[];
+}
 
 const state: ScheduleInterface = {
-  jobTypes: []
+  jobTypes: [],
+  eventTypes: []
 };
 
 const mutations: MutationTree<ScheduleInterface> = {
@@ -36,6 +39,22 @@ const mutations: MutationTree<ScheduleInterface> = {
     if (_jobtype) {
       _jobtype.name = jobType.name;
     }
+  },
+  setEventTypes(state, eventTypes: EventType[]) {
+    state.eventTypes = eventTypes;
+  },
+  addEventType(state, eventType: EventType) {
+    state.eventTypes.unshift(eventType);
+  },
+  removeEventType(state, name: string) {
+    const index = state.eventTypes.findIndex(item => item.name == name);
+    state.eventTypes.splice(index, 1);
+  },
+  setEventType(state, eventType: EventType) {
+    const _eventtype = state.eventTypes.find(item => item.id == eventType.id);
+    if (_eventtype) {
+      _eventtype.name = eventType.name;
+    }
   }
 };
 
@@ -62,6 +81,7 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
         console.warn(err);
       });
   },
+
   removeJobType({ commit }, data: number) {
     axios
       .delete(`/schedule/job-types/${data}`)
@@ -82,6 +102,50 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
       .catch(err => {
         console.warn(err);
       });
+  },
+
+  getEventTypes({ commit }) {
+    axios
+      .get('/schedule/event-types')
+      .then((response: AxiosResponse<EventType[]>) => {
+        console.log('action:', response.data);
+        commit('setEventTypes', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+
+  addEventType({ commit }, data) {
+    console.log(data);
+    axios
+      .post('/schedule/event-types', data)
+      .then((response: AxiosResponse<EventType>) => {
+        commit('addEventType', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+  removeEventType({ commit }, data: string) {
+    axios
+      .delete(`/schedule/event-types/${data}`)
+      .then(() => {
+        commit('removeEventType', data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+  changeEventTypeName({ commit }, eventtype: { id: number; name: string; oldname: string }) {
+    axios
+      .put(`/schedule/event-types/${eventtype.oldname}`, eventtype)
+      .then(() => {
+        commit('setEventType', eventtype);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
   }
 };