flaschengeist-frontend/src/plugins/schedule/store/schedule.ts

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'src/boot/axios';
import { AxiosResponse } from 'axios';

export interface JobType {
  id: number;
  name: string;
}

export interface EventType {
  id: number;
  name: string;
}

export interface ScheduleInterface {
  jobTypes: JobType[];
  eventTypes: EventType[];
}

const state: ScheduleInterface = {
  jobTypes: [],
  eventTypes: []
};

const mutations: MutationTree<ScheduleInterface> = {
  setJobTypes(state, jobTypes: JobType[]) {
    state.jobTypes = jobTypes;
  },
  addJobType(state, jobType: JobType) {
    state.jobTypes.unshift(jobType);
  },
  removeJobType(state, id: number) {
    const index = state.jobTypes.findIndex(item => item.id == id);
    state.jobTypes.splice(index, 1);
  },
  setJobType(state, jobType: JobType) {
    const _jobtype = state.jobTypes.find(item => item.id == jobType.id);
    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;
    }
  }
};

const actions: ActionTree<ScheduleInterface, StateInterface> = {
  getJobTypes({ commit }) {
    axios
      .get('/schedule/job-types')
      .then((response: AxiosResponse<JobType[]>) => {
        console.log('action:', response.data);
        commit('setJobTypes', response.data);
      })
      .catch(err => {
        console.warn(err);
      });
  },

  addJobType({ commit }, data) {
    axios
      .post('/schedule/job-types', data)
      .then((response: AxiosResponse<JobType>) => {
        commit('addJobType', response.data);
      })
      .catch(err => {
        console.warn(err);
      });
  },

  removeJobType({ commit }, data: number) {
    axios
      .delete(`/schedule/job-types/${data}`)
      .then(() => {
        commit('removeJobType', data);
      })
      .catch(err => {
        console.warn(err);
      });
  },

  changeJobTypeName({ commit }, jobtype: JobType) {
    axios
      .put(`/schedule/job-types/${jobtype.id}`, jobtype)
      .then(() => {
        commit('setJobType', jobtype);
      })
      .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);
      });
  }
};

const getters: GetterTree<ScheduleInterface, StateInterface> = {
  jobTypes(state) {
    return state.jobTypes;
  }
};

const schedule: Module<ScheduleInterface, StateInterface> = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

export default schedule;