[Pinia] Use pinia for schedule
This commit is contained in:
		
							parent
							
								
									e347129ba9
								
							
						
					
					
						commit
						76978e8883
					
				|  | @ -67,17 +67,15 @@ | |||
| import { defineComponent, ref, onBeforeMount, computed } from 'vue'; | ||||
| import IsoDateInput from 'src/components/utils/IsoDateInput.vue'; | ||||
| import Job from './Job.vue'; | ||||
| import { mapGetters, useStore } from 'vuex'; | ||||
| import { StateInterface } from 'src/store'; | ||||
| import { date } from 'quasar'; | ||||
| import { useScheduleStore } from '../../store'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|   name: 'CreateEvent', | ||||
|   components: { IsoDateInput, Job }, | ||||
|   setup() { | ||||
|     const store = useStore<StateInterface>(); | ||||
|     const scheduleGetters = mapGetters('schedule', ['eventTypes']); | ||||
|     const eventtypes = computed(() => <FG.EventType[]>scheduleGetters.eventTypes()); | ||||
|     const store = useScheduleStore(); | ||||
|     const eventtypes = computed(() => store.eventTypes); | ||||
|     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2); | ||||
| 
 | ||||
|     const newJob = ref<FG.Job>(({ | ||||
|  | @ -97,8 +95,8 @@ export default defineComponent({ | |||
|     } as FG.Event); | ||||
| 
 | ||||
|     onBeforeMount(() => { | ||||
|       void store.dispatch('schedule/getEventTypes'); | ||||
|       void store.dispatch('schedule/getJobTypes'); | ||||
|       void store.getEventTypes(); | ||||
|       void store.getJobTypes(); | ||||
|     }); | ||||
| 
 | ||||
|     function setStart(data: { job: FG.Job; value: Date }) { | ||||
|  | @ -137,11 +135,14 @@ export default defineComponent({ | |||
|       event.value.jobs.splice(index, 1); | ||||
|     } | ||||
| 
 | ||||
|     function save() { | ||||
|     async function save() { | ||||
|       console.log('Event:', event); | ||||
|       store.dispatch('schedule/addEvent', event.value).catch((error) => { | ||||
|         console.warn(error); | ||||
|       }); | ||||
|       try { | ||||
|         await store.addEvent(event.value); | ||||
|         reset(); | ||||
|       } catch (error) { | ||||
|         console.error(error); | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     function reset() { | ||||
|  |  | |||
|  | @ -46,30 +46,22 @@ | |||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent, ref, computed, onBeforeMount } from 'vue'; | ||||
| import { mapGetters, Store, useStore } from 'vuex'; | ||||
| import { StateInterface } from 'src/store'; | ||||
| import { EventType } from '../../store/schedule'; | ||||
| import { useScheduleStore } from '../../store'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|   name: 'EventTypes', | ||||
|   components: {}, | ||||
|   setup() { | ||||
|     //const store = <Store<StateInterface>>root.$store; | ||||
|     const store = useStore<Store<StateInterface>>(); | ||||
|     const scheduleGetters = mapGetters('schedule', ['eventTypes']); | ||||
|     const store = useScheduleStore(); | ||||
|     const newEventType = ref(''); | ||||
|     const edittype = ref(false); | ||||
|     const emptyEvent: EventType = { id: -1, name: '' }; | ||||
|     const emptyEvent: FG.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); | ||||
|     }); | ||||
|     onBeforeMount(() => store.getEventTypes()); | ||||
| 
 | ||||
|     const rows = computed(() => <FG.EventType[]>scheduleGetters.eventTypes()); | ||||
|     const rows = computed(() => store.eventTypes); | ||||
| 
 | ||||
|     const columns = [ | ||||
|       { | ||||
|  | @ -87,26 +79,23 @@ export default defineComponent({ | |||
|       }, | ||||
|     ]; | ||||
| 
 | ||||
|     function addType() { | ||||
|       void store.dispatch('schedule/addEventType', { name: newEventType.value }); | ||||
|     async function addType() { | ||||
|       await store.addEventType(newEventType.value); | ||||
|       // if null then conflict with name | ||||
|       newEventType.value = ''; | ||||
|     } | ||||
| 
 | ||||
|     function editType(event: EventType) { | ||||
|     function editType(event: FG.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(); | ||||
|         }); | ||||
|     async function saveChanges() { | ||||
|       try { | ||||
|         await store.renameEventType(actualEvent.value.id, newEventName.value); | ||||
|       } finally { | ||||
|         discardChanges(); | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     function discardChanges() { | ||||
|  | @ -115,9 +104,10 @@ export default defineComponent({ | |||
|       edittype.value = false; | ||||
|     } | ||||
| 
 | ||||
|     function deleteType(id: number) { | ||||
|       void store.dispatch('schedule/removeEventType', id); | ||||
|     async function deleteType(id: number) { | ||||
|       await store.removeEventType(id); | ||||
|     } | ||||
| 
 | ||||
|     return { | ||||
|       columns, | ||||
|       rows, | ||||
|  |  | |||
|  | @ -62,9 +62,9 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent, computed, ref, PropType } from 'vue'; | ||||
| import IsoDateInput from 'src/components/utils/IsoDateInput.vue'; | ||||
| import { mapGetters } from 'vuex'; | ||||
| import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue'; | ||||
| import { useScheduleStore } from '../../store'; | ||||
| import { date } from 'quasar'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|  | @ -86,8 +86,12 @@ export default defineComponent({ | |||
|     'set-required': (r: number) => isFinite(r), | ||||
|   }, | ||||
|   setup(props, { emit }) { | ||||
|     const scheduleGetters = mapGetters('schedule', ['jobTypes']); | ||||
|     const jobtypes = computed(() => <FG.JobType[]>scheduleGetters.jobTypes()); | ||||
|     const store = useScheduleStore(); | ||||
| 
 | ||||
|     onBeforeMount(() => store.getJobTypes()); | ||||
| 
 | ||||
|     const jobtypes = computed(() => store.jobTypes); | ||||
|     const refreshKey = ref<number>(0); | ||||
| 
 | ||||
|     function setStart(value: Date) { | ||||
|       emit('set-start', value); | ||||
|  | @ -126,8 +130,6 @@ export default defineComponent({ | |||
|       return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen'; | ||||
|     } | ||||
| 
 | ||||
|     const refreshKey = ref(0); | ||||
| 
 | ||||
|     function refresh() { | ||||
|       refreshKey.value += 1; | ||||
|     } | ||||
|  |  | |||
|  | @ -46,27 +46,22 @@ | |||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent, ref, computed, onBeforeMount } from 'vue'; | ||||
| import { mapGetters, Store, useStore } from 'vuex'; | ||||
| import { StateInterface } from 'src/store'; | ||||
| import { JobType } from '../../store/schedule'; | ||||
| import { useScheduleStore } from '../../store'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|   name: 'JobTypes', | ||||
|   components: {}, | ||||
|   setup() { | ||||
|     //const store = <Store<StateInterface>>root.$store; | ||||
|     const store = useStore<Store<StateInterface>>(); | ||||
|     const scheduleGetters = mapGetters('schedule', ['jobTypes']); | ||||
|     const store = useScheduleStore(); | ||||
|     const newJob = ref(''); | ||||
|     const edittype = ref(false); | ||||
|     const emptyJob: JobType = { id: -1, name: '' }; | ||||
|     const emptyJob: FG.JobType = { id: -1, name: '' }; | ||||
|     const actualJob = ref(emptyJob); | ||||
|     const newJobName = ref(''); | ||||
| 
 | ||||
|     onBeforeMount(() => { | ||||
|       void store.dispatch('schedule/getJobTypes'); | ||||
|     }); | ||||
|     onBeforeMount(() => store.getJobTypes()); | ||||
| 
 | ||||
|     const rows = computed(() => <FG.JobType[]>scheduleGetters.jobTypes()); | ||||
|     const rows = computed(() => store.jobTypes); | ||||
| 
 | ||||
|     const columns = [ | ||||
|       { | ||||
|  | @ -84,22 +79,22 @@ export default defineComponent({ | |||
|       }, | ||||
|     ]; | ||||
| 
 | ||||
|     function addType() { | ||||
|       void store.dispatch('schedule/addJobType', { name: newJob.value }); | ||||
|     async function addType() { | ||||
|       await store.addJobType(newJob.value); | ||||
|       newJob.value = ''; | ||||
|     } | ||||
| 
 | ||||
|     function editType(job: JobType) { | ||||
|     function editType(job: FG.JobType) { | ||||
|       edittype.value = true; | ||||
|       actualJob.value = job; | ||||
|     } | ||||
| 
 | ||||
|     function saveChanges() { | ||||
|       void store | ||||
|         .dispatch('schedule/changeJobTypeName', { id: actualJob.value.id, name: newJobName.value }) | ||||
|         .finally(() => { | ||||
|           discardChanges(); | ||||
|         }); | ||||
|     async function saveChanges() { | ||||
|       try { | ||||
|         await store.renameJobType(actualJob.value.id, newJobName.value); | ||||
|       } finally { | ||||
|         discardChanges(); | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     function discardChanges() { | ||||
|  | @ -109,8 +104,9 @@ export default defineComponent({ | |||
|     } | ||||
| 
 | ||||
|     function deleteType(id: number) { | ||||
|       void store.dispatch('schedule/removeJobType', id); | ||||
|       void store.removeJobType(id); | ||||
|     } | ||||
| 
 | ||||
|     return { | ||||
|       columns, | ||||
|       rows, | ||||
|  |  | |||
|  | @ -65,9 +65,8 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { computed, defineComponent, onBeforeMount, ref } from 'vue'; | ||||
| import { useStore } from 'vuex'; | ||||
| import { ScheduleInterface } from '../../store/schedule'; | ||||
| import { defineComponent, onBeforeMount, ref } from 'vue'; | ||||
| import { useScheduleStore } from '../../store'; | ||||
| import Eventslot from './slots/EventSlot.vue'; | ||||
| import { date } from 'quasar'; | ||||
| 
 | ||||
|  | @ -76,25 +75,23 @@ export default defineComponent({ | |||
|   components: { Eventslot }, | ||||
| 
 | ||||
|   setup() { | ||||
|     const store = useStore(); | ||||
|     // That looks evil | ||||
|     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access | ||||
|     const state = computed(() => <ScheduleInterface>store.state.schedule); | ||||
|     const store = useScheduleStore(); | ||||
|     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD')); | ||||
|     const proxyDate = ref(''); | ||||
|     const calendar = ref(); | ||||
|     const calendarView = 'week-agenda'; | ||||
|     const events2 = computed(() => { | ||||
|     const events = ref<Agendas>({}); | ||||
| 
 | ||||
|     interface Agendas { | ||||
|       [index: number]: FG.Event[]; | ||||
|     } | ||||
| 
 | ||||
|     onBeforeMount(async () => { | ||||
|       let agenda: Agendas = {}; | ||||
|       // eslint-disable-next-line @typescript-eslint/no-unsafe-call | ||||
|       console.log('Hier Passiert was'); | ||||
|       state.value.events | ||||
|         .filter(event => { | ||||
|           const thisWeek = date.formatDate(new Date(selectedDate.value), 'w'); | ||||
|           console.log(thisWeek, date.formatDate(event.start, 'w')); | ||||
|           return date.formatDate(event.start, 'w') == thisWeek; | ||||
|         }) | ||||
|         .forEach(event => { | ||||
|       const list = await store.getEvents({ from: new Date(selectedDate.value) }); | ||||
|       if (list) | ||||
|         list.forEach((event) => { | ||||
|           let day = event.start.getDay(); | ||||
|           console.log('event', event, day, !agenda[day]); | ||||
|           if (!agenda[day]) { | ||||
|  | @ -103,18 +100,11 @@ export default defineComponent({ | |||
|           agenda[day].push(event); | ||||
|         }); | ||||
|       console.log('finish agenda:', agenda); | ||||
|       return agenda; | ||||
|       events.value = agenda; | ||||
|     }); | ||||
| 
 | ||||
|     interface Agendas { | ||||
|       [index: number]: FG.Event[]; | ||||
|     } | ||||
| 
 | ||||
|     onBeforeMount(() => { | ||||
|       void store.dispatch('schedule/getEvents'); | ||||
|     }); | ||||
|     function getAgenda(day: { weekday: string }) { | ||||
|       return events2.value[parseInt(day.weekday, 10)]; | ||||
|       return events.value[parseInt(day.weekday, 10)]; | ||||
|     } | ||||
| 
 | ||||
|     function calendarNext() { | ||||
|  | @ -148,8 +138,8 @@ export default defineComponent({ | |||
|             'September', | ||||
|             'Oktober', | ||||
|             'November', | ||||
|             'Dezember' | ||||
|           ] | ||||
|             'Dezember', | ||||
|           ], | ||||
|         }); | ||||
|       } | ||||
|     } | ||||
|  | @ -164,16 +154,16 @@ export default defineComponent({ | |||
|       asMonth, | ||||
|       calendar, | ||||
|       selectedDate, | ||||
|       events2, | ||||
|       events, | ||||
|       getAgenda, | ||||
|       calendarNext, | ||||
|       calendarPrev, | ||||
|       updateProxy, | ||||
|       saveNewSelectedDate, | ||||
|       proxyDate, | ||||
|       calendarView | ||||
|       calendarView, | ||||
|     }; | ||||
|   } | ||||
|   }, | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -68,10 +68,11 @@ | |||
| /* eslint-disable @typescript-eslint/no-unsafe-member-access */ | ||||
| import { defineComponent, ref, onBeforeMount, PropType } from 'vue'; | ||||
| import { useRouter } from 'vue-router'; | ||||
| import { useStore } from 'vuex'; | ||||
| import { StateInterface } from 'src/store'; | ||||
| import { date } from 'quasar'; | ||||
| import { asHour } from '../../../../../utils/datetime'; | ||||
| import { date, Notify } from 'quasar'; | ||||
| import { asHour } from 'src/utils/datetime'; | ||||
| import { useUserStore } from 'src/plugins/user/store'; | ||||
| import { useMainStore } from 'src/store'; | ||||
| import { useScheduleStore } from 'src/plugins/schedule/store'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|   name: 'Eventslot', | ||||
|  | @ -91,72 +92,72 @@ export default defineComponent({ | |||
|   }, | ||||
| 
 | ||||
|   setup(props) { | ||||
|     const store = useStore<StateInterface>(); | ||||
|     const state = store.state.users; | ||||
|     const store = useScheduleStore(); | ||||
|     const mainStore = useMainStore(); | ||||
|     const userStore = useUserStore(); | ||||
|     const router = useRouter(); | ||||
|     const availableUsers = null; | ||||
|     const refreshKey = ref<number>(0); | ||||
| 
 | ||||
|     const users = ref(state.users); | ||||
|     onBeforeMount(async () => userStore.getUsers()); | ||||
| 
 | ||||
|     function refresh() { | ||||
|       router.go(0); | ||||
|       refreshKey.value += 1; | ||||
|     } | ||||
|     onBeforeMount(() => { | ||||
|       store.dispatch('user/getUsers').catch((error) => { | ||||
|         console.warn(error); | ||||
|       }); | ||||
|     }); | ||||
| 
 | ||||
|     function isUserEnrolled(job: FG.Job) { | ||||
|       return ( | ||||
|         job.services.filter((service) => service.userid == state.currentUser?.userid).length >= 1 | ||||
|         job.services.findIndex((service) => service.userid == mainStore.currentUser.userid) >= 0 | ||||
|       ); | ||||
|     } | ||||
| 
 | ||||
|     function jobFull(job: FG.Job) { | ||||
|       console.log('jobFull', job.services.length >= job.required_services); | ||||
|       return job.services.length >= job.required_services; | ||||
|     } | ||||
| 
 | ||||
|     function userDisplay(userid: string) { | ||||
|       return state.users.find((user) => (user.userid = userid))?.display_name; | ||||
|       return userStore.users.find((user) => (user.userid = userid))?.display_name; | ||||
|     } | ||||
| 
 | ||||
|     function enrollForJob(job: FG.Job) { | ||||
|       console.log(job.services); | ||||
|       if (state.currentUser) { | ||||
|         const newService: FG.Service = { | ||||
|           userid: state.currentUser?.userid, | ||||
|           value: 1, | ||||
|         }; | ||||
| 
 | ||||
|         const newUserService = { user: newService }; | ||||
|         const UpdateInformation = { | ||||
|           eventId: props.event.id, | ||||
|           JobId: job.id, | ||||
|           service: newUserService, | ||||
|         }; | ||||
|         void store.dispatch('schedule/updateEvent', UpdateInformation).catch((error) => { | ||||
|           console.warn(error); | ||||
|     async function enrollForJob(job: FG.Job) { | ||||
|       const newService: FG.Service = { | ||||
|         userid: mainStore.currentUser.userid, | ||||
|         value: 1, | ||||
|       }; | ||||
|       try { | ||||
|         await store.updateEvent(props.event.id, job.id, { user: newService }); | ||||
|       } catch (error) { | ||||
|         console.warn(error); | ||||
|         Notify.create({ | ||||
|           group: false, | ||||
|           type: 'negative', | ||||
|           message: 'Fehler beim Eintragen als Dienst', | ||||
|           timeout: 10000, | ||||
|           progress: true, | ||||
|           actions: [{ icon: 'mdi-close', color: 'white' }], | ||||
|         }); | ||||
|       } | ||||
|       refresh(); | ||||
|     } | ||||
|     function signOutFromJob(job: FG.Job) { | ||||
|       console.log(job.services); | ||||
|       if (state.currentUser) { | ||||
|         const newService: FG.Service = { | ||||
|           userid: state.currentUser?.userid, | ||||
|           value: -1, | ||||
|         }; | ||||
|     async function signOutFromJob(job: FG.Job) { | ||||
|       const newService: FG.Service = { | ||||
|         userid: mainStore.currentUser.userid, | ||||
|         value: -1, | ||||
|       }; | ||||
| 
 | ||||
|         const newUserService = { user: newService }; | ||||
|         const UpdateInformation = { | ||||
|           eventId: props.event.id, | ||||
|           JobId: job.id, | ||||
|           service: newUserService, | ||||
|         }; | ||||
|         void store.dispatch('schedule/updateEvent', UpdateInformation).catch((error) => { | ||||
|           console.warn(error); | ||||
|       try { | ||||
|         await store.updateEvent(props.event.id, job.id, { user: newService }); | ||||
|       } catch (error) { | ||||
|         console.warn(error); | ||||
|         Notify.create({ | ||||
|           group: false, | ||||
|           type: 'negative', | ||||
|           message: 'Fehler beim Austragen als Dienst', | ||||
|           timeout: 10000, | ||||
|           progress: true, | ||||
|           actions: [{ icon: 'mdi-close', color: 'white' }], | ||||
|         }); | ||||
|       } | ||||
|       refresh(); | ||||
|  | @ -166,8 +167,6 @@ export default defineComponent({ | |||
|       refreshKey, | ||||
|       availableUsers, | ||||
|       enrollForJob, | ||||
|       state, | ||||
|       users, | ||||
|       isUserEnrolled, | ||||
|       signOutFromJob, | ||||
|       jobFull, | ||||
|  |  | |||
|  | @ -24,24 +24,17 @@ | |||
| import { computed, defineComponent } from 'vue'; | ||||
| import EssentialLink from 'src/components/navigation/EssentialLink.vue'; | ||||
| import mainRoutes from 'src/plugins/schedule/routes'; | ||||
| import { mapGetters } from 'vuex'; | ||||
| import setLoadingBar from 'src/utils/loading'; | ||||
| import { useRoute } from 'vue-router'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
|   // name: 'PageName' | ||||
|   components: { EssentialLink }, | ||||
|   setup() { | ||||
|     const balanceGetters = mapGetters('balance', ['loading']); | ||||
|     const route = useRoute(); | ||||
|     const loading = computed(() => { | ||||
|       return balanceGetters.loading() > 0; | ||||
|     }); | ||||
|     const checkMain = computed(() => { | ||||
|       return route.matched.length == 2; | ||||
|     }); | ||||
| 
 | ||||
|     setLoadingBar(loading); | ||||
| 
 | ||||
|     return { checkMain, mainRoutes }; | ||||
|   }, | ||||
| }); | ||||
|  |  | |||
|  | @ -1,9 +1,6 @@ | |||
| import { Module } from 'vuex'; | ||||
| import { defineAsyncComponent } from 'vue'; | ||||
| import mainRoutes from './routes'; | ||||
| import { FG_Plugin } from 'src/plugins'; | ||||
| import { StateInterface } from 'src/store'; | ||||
| import store, { ScheduleInterface } from './store/schedule'; | ||||
| 
 | ||||
| const plugin: FG_Plugin.Plugin = { | ||||
|   name: 'Schedule', | ||||
|  | @ -11,7 +8,6 @@ const plugin: FG_Plugin.Plugin = { | |||
|   requiredModules: ['User'], | ||||
|   requiredBackendModules: ['schedule'], | ||||
|   version: '0.0.1', | ||||
|   store: new Map<string, Module<ScheduleInterface, StateInterface>>([['schedule', store]]), | ||||
|   widgets: [ | ||||
|     { | ||||
|       priority: 0, | ||||
|  |  | |||
|  | @ -0,0 +1,125 @@ | |||
| import { api } from 'src/boot/axios'; | ||||
| import { AxiosError } from 'axios'; | ||||
| import { defineStore } from 'pinia'; | ||||
| 
 | ||||
| interface UserService { | ||||
|   user: FG.Service; | ||||
| } | ||||
| 
 | ||||
| function fixEvent(event: FG.Event) { | ||||
|   event.start = new Date(event.start); | ||||
|   event.end = new Date(event.end); | ||||
| } | ||||
| 
 | ||||
| export const useScheduleStore = defineStore({ | ||||
|   id: 'schedule', | ||||
| 
 | ||||
|   state: () => ({ | ||||
|     jobTypes: [] as FG.JobType[], | ||||
|     eventTypes: [] as FG.EventType[], | ||||
|   }), | ||||
| 
 | ||||
|   getters: {}, | ||||
| 
 | ||||
|   actions: { | ||||
|     async getJobTypes() { | ||||
|       try { | ||||
|         const { data } = await api.get<FG.JobType[]>('/schedule/job-types'); | ||||
|         this.jobTypes = data; | ||||
|         return this.jobTypes; | ||||
|       } catch (error) { | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
| 
 | ||||
|     async addJobType(name: string) { | ||||
|       await api.post<FG.JobType>('/schedule/job-types', { name: name }); | ||||
|       //TODO: HAndle new JT
 | ||||
|     }, | ||||
| 
 | ||||
|     async removeJobType(id: number) { | ||||
|       await api.delete(`/schedule/job-types/${id}`); | ||||
|       //Todo Handle delete JT
 | ||||
|     }, | ||||
| 
 | ||||
|     async renameJobType(id: number, newName: string) { | ||||
|       await api.put(`/schedule/job-types/${id}`, { name: newName }); | ||||
|       // TODO handle rename
 | ||||
|     }, | ||||
| 
 | ||||
|     async getEventTypes() { | ||||
|       try { | ||||
|         const { data } = await api.get<FG.EventType[]>('/schedule/event-types'); | ||||
|         this.eventTypes = data; | ||||
|       } catch (error) { | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
| 
 | ||||
|     /** Add new EventType | ||||
|      * | ||||
|      * @param name Name of new EventType | ||||
|      * @returns EventType object or null if name already exists | ||||
|      * @throws Exception if requests fails because of an other reason | ||||
|      */ | ||||
|     async addEventType(name: string) { | ||||
|       try { | ||||
|         const { data } = await api.post<FG.EventType>('/schedule/event-types', { name: name }); | ||||
|         return data; | ||||
|       } catch (error) { | ||||
|         if ('response' in error) { | ||||
|           const ae = <AxiosError>error; | ||||
|           if (ae.response && ae.response.status == 409 /* CONFLICT */) return null; | ||||
|         } | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
| 
 | ||||
|     async removeEventType(id: number) { | ||||
|       await api.delete(`/schedule/event-types/${id}`); | ||||
|       // TODO handle delete
 | ||||
|     }, | ||||
| 
 | ||||
|     async renameEventType(id: number, newName: string) { | ||||
|       try { | ||||
|         await api.put(`/schedule/event-types/${id}`, { name: newName }); | ||||
|         // TODO handle rename
 | ||||
|         return true; | ||||
|       } catch (error) { | ||||
|         if ('response' in error) { | ||||
|           const ae = <AxiosError>error; | ||||
|           if (ae.response && ae.response.status == 409 /* CONFLICT */) return false; | ||||
|         } | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
| 
 | ||||
|     async getEvents(filter: { from?: Date; to?: Date } | undefined = undefined) { | ||||
|       try { | ||||
|         const { data } = await api.get<FG.Event[]>('/schedule/events', { params: filter }); | ||||
|         data.forEach((element) => fixEvent(element)); | ||||
|         return data; | ||||
|       } catch (error) { | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
|     async updateEvent(eventId: number, jobId: number, service: FG.Service | UserService) { | ||||
|       try { | ||||
|         const { data } = await api.put<FG.Event>( | ||||
|           `/schedule/events/${eventId}/jobs/${jobId}`, | ||||
|           service | ||||
|         ); | ||||
|         fixEvent(data); | ||||
|         return data; | ||||
|       } catch (error) { | ||||
|         throw error; | ||||
|       } | ||||
|     }, | ||||
| 
 | ||||
|     async addEvent(event: FG.Event) { | ||||
|       const { data } = await api.post<FG.Event>('/schedule/events', event); | ||||
|       return data; | ||||
|       //TODO: Handle add event}
 | ||||
|     }, | ||||
|   }, | ||||
| }); | ||||
|  | @ -1,245 +0,0 @@ | |||
| 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[]; | ||||
|   events: FG.Event[]; | ||||
| } | ||||
| 
 | ||||
| const state: ScheduleInterface = { | ||||
|   jobTypes: [], | ||||
|   eventTypes: [], | ||||
|   events: [], | ||||
| }; | ||||
| 
 | ||||
| interface Event { | ||||
|   start: Date; | ||||
|   end?: Date; | ||||
|   description: string; | ||||
|   type: EventType; | ||||
|   jobs: Job[]; | ||||
| } | ||||
| 
 | ||||
| interface Job { | ||||
|   id: number; | ||||
|   start: Date | null; | ||||
|   end?: Date | null; | ||||
|   comment: string; | ||||
|   type: FG.JobType | null; | ||||
|   services: Array<FG.Service>; | ||||
|   required_services: number; | ||||
| } | ||||
| 
 | ||||
| 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, id: number) { | ||||
|     const index = state.eventTypes.findIndex((item) => item.id == id); | ||||
|     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; | ||||
|     } | ||||
|   }, | ||||
|   addEvent(state, event: FG.Event) { | ||||
|     state.events.unshift(event); | ||||
|   }, | ||||
|   setEvents(state, events: FG.Event[]) { | ||||
|     state.events = events; | ||||
|   }, | ||||
|   updateEvent(state, event: FG.Event) { | ||||
|     /*let eventToChange = state.events.find(ev => ev.id == event.id); | ||||
|     eventToChange = event; */ | ||||
|     const index = state.events.findIndex((ev) => ev.id == event.id); | ||||
|     if (index > -1) { | ||||
|       state.events[index] = event; | ||||
|     } | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| 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: number) { | ||||
|     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.id}`, eventtype) | ||||
|       .then(() => { | ||||
|         commit('setEventType', eventtype); | ||||
|       }) | ||||
|       .catch((err) => { | ||||
|         console.warn(err); | ||||
|       }); | ||||
|   }, | ||||
| 
 | ||||
|   addEvent({ commit }, event: Event) { | ||||
|     axios | ||||
|       .post('/schedule/events', event) | ||||
|       .then((response: AxiosResponse<Event>) => { | ||||
|         commit('addEvent', response.data); | ||||
|       }) | ||||
|       .catch((err) => { | ||||
|         console.warn(err); | ||||
|       }); | ||||
|     console.log('Events: ', state.events); | ||||
|   }, | ||||
|   updateEvent( | ||||
|     { commit }, | ||||
|     updateInformation: { eventId: number; JobId: number; service: FG.Service } | ||||
|   ) { | ||||
|     axios | ||||
|       .put( | ||||
|         `/schedule/events/${updateInformation.eventId}/jobs/${updateInformation.JobId}`, | ||||
|         updateInformation.service | ||||
|       ) | ||||
|       .then((response: AxiosResponse<FG.Event>) => { | ||||
|         response.data.start = new Date(response.data.start); | ||||
|         commit('updateEvent', response.data); | ||||
|       }) | ||||
|       .catch((err) => { | ||||
|         console.warn(err); | ||||
|       }); | ||||
|   }, | ||||
|   getEvents({ commit }) { | ||||
|     axios | ||||
|       .get('/schedule/events') | ||||
|       .then((response: AxiosResponse<Event[]>) => { | ||||
|         console.log('action:', response.data); | ||||
|         response.data.forEach((event) => { | ||||
|           event.start = new Date(event.start); | ||||
|         }); | ||||
|         commit('setEvents', response.data); | ||||
|       }) | ||||
|       .catch((err) => { | ||||
|         console.warn(err); | ||||
|       }); | ||||
|   }, | ||||
| }; | ||||
| const getters: GetterTree<ScheduleInterface, StateInterface> = { | ||||
|   jobTypes(state) { | ||||
|     return state.jobTypes; | ||||
|   }, | ||||
|   events(state) { | ||||
|     return state.events; | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| const schedule: Module<ScheduleInterface, StateInterface> = { | ||||
|   namespaced: true, | ||||
|   state, | ||||
|   mutations, | ||||
|   actions, | ||||
|   getters, | ||||
| }; | ||||
| 
 | ||||
| export default schedule; | ||||
		Loading…
	
		Reference in New Issue