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 ScheduleInterface {
  jobTypes: JobType[];
}

// export interface StateInterfaceSchedule extends StateInterface {
// //   balance: BalanceInterface;
// }

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

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;
    }
  }
};

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);
      });
  }
};

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

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

export default schedule;