ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor Styling Changes to Eventslots and enrollment functionality

This commit is contained in:
Dominik 2021-02-07 20:16:21 +01:00
parent 7fe59f67f5
commit af79a30497
6 changed files with 161 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/flaschengeist.d.ts vendored
View File

@ -15,7 +15,7 @@ declare namespace FG {
mail: string;
birthday?: Date;
roles: Array<string>;
permissions?: list;
permissions?: Array<string>;
avatar_url?: string;
}
type Permission = string;

28
src/plugins/schedule/components/overview/AgendaView.vue
View File

@ -31,10 +31,23 @@
<q-separator vertical />
<q-btn flat dense label="Next" @click="calendarNext" />
</div>
<!-- <q-space /> -->
<q-btn-toggle
class="row absolute-right"
v-model="calendarView"
flat
stretch
toggle-color=""
:options="[
{ label: 'Tag', value: 'day-agenda' },
{ label: 'Woche', value: 'week-agenda' }
]"
/>
</q-toolbar>
<q-calendar
v-model="selectedDate"
view="week-agenda"
:view="calendarView"
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
locale="de-de"
style="height: 100%; min-height: 400px;"
@ -92,15 +105,18 @@ export default defineComponent({
}
}
},
setup(_, { root }) {
const store = <Store<StateInterface>>root.$store;
const state = <ScheduleInterface>store.state.schedule;
const state = computed(() => <ScheduleInterface>store.state.schedule);
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
const proxyDate = ref('');
const calendarView = 'week-agenda';
const events2 = computed(() => {
console.log(state.events);
let agenda: Agendas = {};
state.events
// 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'));
@ -124,7 +140,6 @@ export default defineComponent({
onBeforeMount(() => {
void store.dispatch('schedule/getEvents');
// void store.dispatch('schedule/getJobTypes');
});
function getAgenda(this: any, day: { weekday: string }) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@ -156,7 +171,8 @@ export default defineComponent({
calendarPrev,
updateProxy,
saveNewSelectedDate,
proxyDate
proxyDate,
calendarView
};
}
});

122
src/plugins/schedule/components/overview/slots/EventSlot.vue
View File

@ -1,49 +1,76 @@
<template>
<q-card
class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%) justify-start content-center items-center "
class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%) justify-start content-center items-center rounded-borders border-primary shadow-5 q-mb-xs"
bordered
>
<header class="text-primary q-px-xs">
<div class="col text-weight-bolder ellipsis">
{{ event.type.name }}
</div>
<div v-if="event.description" class=" col-12 q-px-sm" style="font-size: 10px">
<div v-if="event.description" class=" col text-weight-medium " style="font-size: 10px">
Info
{{ event.description }}
</div>
</header>
<div v-for="(job, index) in event.jobs" v-bind:key="index">
<q-separator style="justify-start content-center" />
<div>{{ job.start | formatToHour }} - {{ job.end | formatToHour }}</div>
<div>
<div class="text-weight-medium q-px-xs">
{{ job.start | formatToHour }} - {{ job.end | formatToHour }}
</div>
<div class="q-px-xs">
{{ job.type.name }}
</div>
<div class="col-12 q-px-sm" style="font-size: 10px">
<div class="col-auto q-px-xs" style="font-size: 10px">
{{ job.comment }}
</div>
<div>
<q-select
filled
v-model="availableUsers"
v-model="job.services"
:option-label="opt => userDisplay(opt)"
multiple
:options="availableUsers"
disable
use-chips
stack-label
label="Dienste"
class="col-12 q-px-sm"
style="font-size: 10px "
class="col-auto q-px-xs"
style="font-size: 6px "
counter
:max-values="job.required_services"
:key="refreshKey"
>
</q-select>
<div class="row col-12 justify-end">
<q-btn v-if="false" />
<q-btn
v-if="!isUserEnrolled(job) && !jobFull(job)"
flat
color="primary"
label="Eintragen"
@click="enrollForJob(job)"
:key="refreshKey"
/>
<q-btn
v-if="isUserEnrolled(job)"
flat
color="negative"
label="Austragen"
@click="signOutFromJob(job)"
:key="refreshKey"
/>
</div>
</div>
</div>
</q-card>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../../store/schedule';
import { date } from 'quasar';
interface Props {
@ -65,18 +92,85 @@ export default defineComponent({
}
},
setup(props: Props, { root }) {
setup(props: Props, { root, emit }) {
const store = <Store<StateInterface>>root.$store;
const state = <ScheduleInterface>store.state.schedule;
const state = store.state.user;
const availableUsers = null;
const refreshKey = ref(0);
const users = ref(state.users);
function refresh() {
refreshKey.value += 1;
}
function isUserEnrolled(job: FG.Job) {
return (
job.services.filter(service => service.userid == state.currentUser?.userid).length >= 1
);
}
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;
}
function enrollForJob(this: any, 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: <number>this.event.id,
JobId: job.id,
service: newUserService
};
void store.dispatch('schedule/updateEvent', UpdateInformation).catch(error => {
console.warn(error);
});
}
refresh();
}
function signOutFromJob(this: any, 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: <number>this.event.id,
JobId: job.id,
service: newUserService
};
void store.dispatch('schedule/updateEvent', UpdateInformation).catch(error => {
console.warn(error);
});
}
refresh();
}
return {
refreshKey,
availableUsers
availableUsers,
enrollForJob,
state,
users,
isUserEnrolled,
signOutFromJob,
jobFull,
userDisplay,
refresh
};
}
});
</script>
<style></style>
<style scoped></style>

2
src/plugins/schedule/pages/Management.vue
View File

@ -70,7 +70,7 @@ export default defineComponent({
}
const tabs: Tab[] = [
{ name: 'create', label: 'Veranstantungen' },
{ name: 'create', label: 'Veranstaltungen' },
{ name: 'eventtypes', label: 'Veranstaltungsarten' },
{ name: 'jobtypes', label: 'Dienstarten' }
];

2
src/plugins/schedule/pages/Overview.vue
View File

@ -71,7 +71,7 @@ export default defineComponent({
}
const tabs: Tab[] = [
{ name: 'agendaView', label: 'Wochenkalendar' }
{ name: 'agendaView', label: 'Kalendar' }
// { name: 'eventtypes', label: 'Veranstaltungsarten' },
// { name: 'jobtypes', label: 'Dienstarten' }
];

25
src/plugins/schedule/store/schedule.ts
View File

@ -81,6 +81,10 @@ const mutations: MutationTree<ScheduleInterface> = {
},
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;
}
};
@ -165,7 +169,7 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
},
changeEventTypeName({ commit }, eventtype: { id: number; name: string; oldname: string }) {
axios
.put(`/schedule/event-types/${eventtype.oldname}`, eventtype)
.put(`/schedule/event-types/${eventtype.id}`, eventtype)
.then(() => {
commit('setEventType', eventtype);
})
@ -185,6 +189,22 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
});
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>) => {
commit('updateEvent', response.data);
})
.catch(err => {
console.warn(err);
});
},
getEvents({ commit }) {
axios
.get('/schedule/events')
@ -203,6 +223,9 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
const getters: GetterTree<ScheduleInterface, StateInterface> = {
jobTypes(state) {
return state.jobTypes;
},
events(state) {
return state.events;
}
};