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

[events]: Added removal of events + minor optical improvement

This commit is contained in:
Ferdinand Thiessen 2021-03-22 03:25:59 +01:00
parent 851ce3aa8b
commit f2610b8e84
5 changed files with 91 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
deps/quasar-ui-qcalendar vendored

@ -1 +1 @@
Subproject commit d0e503b1bfc65f64216042d0fe39daf5377b7901
Subproject commit ac6d0693a062f60d539d7f6d8fdee00fbcc528c7

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

@ -53,11 +53,15 @@
locale="de-de"
style="height: 100%; min-height: 400px"
>
<template #day="{ scope: { timestamp } }" style="min-height: 200px">
<template v-if="!events[timestamp.weekday]" style="min-height: 200px"> </template>
<template v-for="(agenda, index) in events[timestamp.weekday]" :key="agenda.id">
<eventslot v-model="events[timestamp.weekday][index]" />
</template>
<template #day="{ scope: { timestamp } }">
<div itemref="" class="q-pb-sm" style="min-height: 200px">
<eventslot
v-for="(agenda, index) in events[timestamp.weekday]"
:key="index"
v-model="events[timestamp.weekday][index]"
@removeEvent="remove"
/>
</div>
</template>
</q-calendar-agenda>
</div>
@ -86,7 +90,8 @@ export default defineComponent({
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() =>
calendarView.value == 'day' ? 1 : windowWidth.value < 1000 ? 3 : 7
// <= 1023 is the breakpoint for sm to md
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
);
const events = ref<Agendas>({});
@ -102,6 +107,22 @@ export default defineComponent({
await loadAgendas();
});
async function remove(id: number) {
if (await store.removeEvent(id)) {
// Successfull removed
for (const idx in events.value) {
const i = events.value[idx].findIndex((event) => event.id === id);
if (i !== -1) {
events.value[idx].splice(i, 1);
break;
}
}
} else {
// Not found, this means our eventa are outdated
await loadAgendas();
}
}
async function loadAgendas() {
const selected = new Date(selectedDate.value);
console.log(selected);
@ -180,6 +201,7 @@ export default defineComponent({
updateProxy,
saveNewSelectedDate,
proxyDate,
remove,
calendarDays,
calendarView,
calendarRealView,

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

@ -1,26 +1,52 @@
<template>
<q-card
class="justify-start content-center items-center rounded-borders border-primary shadow-5 q-mb-xs"
class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
bordered
>
<header class="text-primary q-px-xs">
<div class="col text-weight-bolder">
<q-card-section class="text-primary q-pa-xs">
<div class="text-weight-bolder text-center" style="font-size: 1.5vw">
{{ event.type.name }}
<template v-if="event.name"
>: <span style="font-size: 1.2vw">{{ event.name }}</span>
</template>
</div>
<div v-if="event.description" class="col text-weight-medium" style="font-size: 10px">
Info
<div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
{{ event.description }}
</div>
</header>
<div v-for="(job, index) in event.jobs" :key="index">
<q-separator style="justify-start content-center" />
<JobSlot v-model="event.jobs[index]" :event-id="event.id" />
</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pa-xs">
<!-- Jobs -->
<JobSlot
v-for="(job, index) in event.jobs"
:key="index"
v-model="event.jobs[index]"
class="col q-my-xs"
:event-id="event.id"
/>
</q-card-section>
<q-card-actions v-if="canEdit || canDelete" vertical align="center">
<router-link v-if="canEdit" :to="{ name: 'events-edit', params: { id: event.id } }">
<template #default>
<q-btn color="secondary" flat label="Bearbeiten" style="min-width: 95%" />
</template>
</router-link>
<q-btn
v-if="canDelete"
color="negative"
flat
label="Löschen"
style="min-width: 95%"
@click="remove"
/>
</q-card-actions>
</q-card>
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
import { hasPermission } from 'src/utils/permission';
import { PERMISSIONS } from 'src/plugins/schedule/permissions';
import JobSlot from './JobSlot.vue';
export default defineComponent({
@ -32,13 +58,26 @@ export default defineComponent({
type: Object as PropType<FG.Event>,
},
},
emits: { 'update:modelValue': (val: FG.Event) => !!val },
emits: {
'update:modelValue': (val: FG.Event) => !!val,
removeEvent: (val: number) => typeof val === 'number',
},
setup(props, { emit }) {
const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
const canEdit = computed(() => hasPermission(PERMISSIONS.EDIT));
const event = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
function remove() {
emit('removeEvent', props.modelValue.id);
}
return {
canDelete,
canEdit,
remove,
event,
};
},

4
src/plugins/schedule/components/overview/slots/JobSlot.vue
View File

@ -1,5 +1,5 @@
<template>
<q-card-section>
<q-card bordered>
<div class="text-weight-medium q-px-xs">
{{ asHour(modelValue.start) }}
<template v-if="modelValue.end">- {{ asHour(modelValue.end) }}</template>
@ -31,7 +31,7 @@
<q-btn v-if="isEnrolled" flat color="negative" label="Austragen" @click="signOutFromJob" />
</div>
</div>
</q-card-section>
</q-card>
</template>
<script lang="ts">

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

@ -85,6 +85,16 @@ export const useScheduleStore = defineStore({
throw error;
}
},
async removeEvent(id: number) {
try {
await api.delete(`/schedule/events/${id}`);
} catch (e) {
const error = <AxiosError>e;
if (error.response && error.response.status === 404) return false;
throw e;
}
return true;
},
async removeEventType(id: number) {
await api.delete(`/schedule/event-types/${id}`);