Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

Merge remote-tracking branch 'origin/next' into next

This commit is contained in:
Tim Gröger 2021-03-20 11:34:40 +01:00
parent e2d2a5cf9d 7e7f9c943d
commit c3e3a272dc
11 changed files with 128 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/boot/plugins.ts
View File

@ -33,8 +33,10 @@ interface Backend {
export { Backend };
function setPermissions(object: FG_Plugin.PluginRouteConfig) {
if (object.route.meta === undefined) object.route.meta = {};
object.route.meta['permissions'] = object.permissions;
if (object.permissions !== undefined) {
if (object.route.meta === undefined) object.route.meta = {};
object.route.meta['permissions'] = object.permissions;
}
}
function convertRoutes(parent: RouteRecordRaw, children?: FG_Plugin.PluginRouteConfig[]) {

12
src/flaschengeist.d.ts vendored
View File

@ -28,11 +28,11 @@ declare namespace FG {
id: number;
time: Date;
amount: number;
reversal_id: number;
sender_id?: string;
receiver_id?: string;
reversal_id?: number;
author_id?: string;
sender_id?: string;
original_id?: number;
receiver_id?: string;
}
interface Drink {
id: number;
@ -91,7 +91,7 @@ declare namespace FG {
start: Date;
end?: Date;
description?: string;
type: EventType;
type: EventType | number;
jobs: Array<Job>;
}
interface EventType {
@ -102,8 +102,8 @@ declare namespace FG {
id: number;
start: Date;
end?: Date;
comment: string;
type: JobType;
type: JobType | number;
comment?: string;
services: Array<Service>;
required_services: number;
}

56
src/plugins/schedule/components/management/CreateEvent.vue
View File

@ -43,13 +43,8 @@
<q-card-section v-for="(job, index) in event.jobs" :key="index">
<q-card class="q-my-auto">
<job
:job="job"
v-model="event.jobs[index]"
:job-can-delete="jobDeleteDisabled"
@set-start="setStart"
@set-required="setRequired"
@set-end="setEnd"
@set-comment="setComment"
@set-job-type="setJobType"
@remove-job="removeJob(index)"
/>
</q-card>
@ -78,59 +73,31 @@ export default defineComponent({
const eventtypes = computed(() => store.eventTypes);
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
const newJob = ref<FG.Job>(({
const newJob = ref<FG.Job>({
id: NaN,
start: undefined,
end: undefined,
comment: '',
start: new Date(),
end: date.addToDate(new Date(), { hours: 1 }),
services: [],
required_services: 2,
} as unknown) as FG.Job);
type: store.jobTypes[0],
});
const event = ref<FG.Event>({
id: NaN,
start: new Date(),
description: '',
jobs: [Object.assign({}, newJob.value)],
} as FG.Event);
type: store.eventTypes[0],
});
onBeforeMount(() => {
void store.getEventTypes();
void store.getJobTypes();
});
function setStart(data: { job: FG.Job; value: Date }) {
data.job.start = data.value;
}
function setEnd(data: { job: FG.Job; value: Date }) {
data.job.end = data.value;
}
function setComment(data: { job: FG.Job; value: string }) {
data.job.comment = data.value;
}
function setJobType(job: FG.Job, value: FG.JobType) {
job.type = value;
}
function setRequired(data: { job: FG.Job; value: number }) {
data.job.required_services = data.value;
}
function addJob() {
const addJob = Object.assign({}, newJob.value);
event.value.jobs.unshift(addJob);
event.value.jobs.push(Object.assign({}, newJob.value));
}
//function removeJob(id: number) {
// let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
// if (jobtoremove != undefined) {
// event.value.jobs.splice(jobtoremove, 1);
// }
//}
function removeJob(index: number) {
event.value.jobs.splice(index, 1);
}
@ -174,11 +141,6 @@ export default defineComponent({
reset,
event,
isAfterDate,
setStart,
setEnd,
setComment,
setJobType,
setRequired,
};
},
});

85
src/plugins/schedule/components/management/Job.vue
View File

@ -2,59 +2,52 @@
<q-card-section class="fit row justify-start content-center items-center">
<q-card-section class="fit row justify-start content-center items-center">
<IsoDateInput
v-model="job.start"
class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.start"
label="Beginn"
type="datetime"
:rules="[noValidDate, notEmpty]"
@input="setStart"
:rules="[notEmpty, noValidDate]"
/>
<IsoDateInput
ref="bla"
v-model="job.end"
class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.end"
label="Ende"
type="datetime"
:rules="[noValidDate, isAfterDate, notEmpty]"
@input="setEnd"
:rules="[notEmpty, noValidDate, isAfterDate]"
/>
</q-card-section>
<q-card-section class="row fit justify-start content-center items-center">
<q-select
:key="refreshKey"
v-model="job.type"
filled
use-input
label="Dienstart"
input-debounce="0"
class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.type"
:options="jobtypes"
option-label="name"
option-value="name"
option-value="id"
map-options
clearable
:rules="[notEmpty]"
@input="setJobType"
/>
<q-input
v-model="job.required_services"
filled
class="col-xs-12 col-sm-6 q-pa-sm"
label="Dienstanzahl"
type="number"
:value="job.required_services"
:rules="[notEmpty]"
@input="setRequired"
/>
</q-card-section>
<q-card-section class="fit row justify-start content-center items-center">
<q-input
v-model="job.comment"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Beschreibung"
type="textarea"
:value="job.comment"
filled
:rules="[notEmpty]"
@input="setComment"
/>
</q-card-section>
<q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
@ -63,7 +56,7 @@
<script lang="ts">
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
import { useScheduleStore } from '../../store';
import { date } from 'quasar';
@ -71,19 +64,15 @@ export default defineComponent({
name: 'Job',
components: { IsoDateInput },
props: {
job: {
modelValue: {
required: true,
type: Object as PropType<FG.Job>,
},
jobCanDelete: Boolean,
},
emits: {
'set-start': (d: Date) => !!d,
'remove-job': () => true,
'set-end': (d: Date) => !!d,
'set-comment': (c: string) => !!c,
'set-job-type': (jt: FG.JobType) => !!jt,
'set-required': (r: number) => isFinite(r),
'update:modelValue': (job: FG.Job) => !!job,
},
setup(props, { emit }) {
const store = useScheduleStore();
@ -91,27 +80,22 @@ export default defineComponent({
onBeforeMount(() => store.getJobTypes());
const jobtypes = computed(() => store.jobTypes);
const refreshKey = ref<number>(0);
function setStart(value: Date) {
emit('set-start', value);
}
function setEnd(value: Date) {
emit('set-end', value);
}
function setComment(value: string) {
emit('set-comment', value);
}
function setJobType(value: FG.JobType) {
emit('set-job-type', value);
}
function setRequired(value: number) {
emit('set-required', value);
}
const job = new Proxy(props.modelValue, {
get(target, prop) {
if (typeof prop === 'string') {
return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
}
},
set(obj, prop, value) {
console.log('...', obj, prop, value);
if (typeof prop === 'string') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
}
return true;
},
});
function removeJob() {
emit('remove-job');
@ -121,31 +105,20 @@ export default defineComponent({
return !!val || 'Feld darf nicht leer sein!';
}
function noValidDate(val: string) {
console.log(val);
return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
}
function isAfterDate(val: Date) {
console.log('isAfterDate', props.job.start, val);
return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
}
function refresh() {
refreshKey.value += 1;
function isAfterDate(val: string) {
return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
}
return {
job,
jobtypes,
setStart,
setEnd,
setComment,
setJobType,
setRequired,
removeJob,
notEmpty,
noValidDate,
isAfterDate,
refreshKey,
};
},
});

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

@ -47,14 +47,15 @@
<q-calendar-agenda
ref="calendar"
v-model="selectedDate"
:view="calendarView"
:view="calendarRealView"
:max-days="calendarDays"
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
locale="de-de"
style="height: 100%; min-height: 400px"
>
<template #day="{ scope: { timestamp } }" style="min-height: 200px">
<template v-if="!getAgenda(timestamp)" style="min-height: 200px"> </template>
<template v-for="agenda in getAgenda(timestamp)" :key="agenda.id">
<template v-if="!events[timestamp.weekday]" style="min-height: 200px"> </template>
<template v-for="agenda in events[timestamp.weekday]" :key="agenda.id">
<eventslot :event="agenda" />
</template>
</template>
@ -65,10 +66,11 @@
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue';
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
import { startOfWeek } from 'src/utils/datetime';
export default defineComponent({
name: 'AgendaView',
@ -76,10 +78,16 @@ export default defineComponent({
setup() {
const store = useScheduleStore();
const windowWidth = ref(window.innerWidth);
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
const proxyDate = ref('');
const calendar = ref<QCalendar.QCalendar>();
const calendarView = 'week';
const calendarView = ref('week');
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() =>
calendarView.value == 'day' ? 1 : windowWidth.value < 1000 ? 3 : 7
);
const events = ref<Agendas>({});
interface Agendas {
@ -87,35 +95,40 @@ export default defineComponent({
}
onBeforeMount(async () => {
let agenda: Agendas = {};
console.log('Hier Passiert was');
const list = await store.getEvents({ from: new Date(selectedDate.value) });
if (list)
list.forEach((event) => {
let day = event.start.getDay();
window.addEventListener('resize', () => {
windowWidth.value = window.innerWidth;
});
if (!agenda[day]) {
agenda[day] = [];
}
agenda[day].push(event);
});
console.log('finish agenda:', agenda);
events.value = agenda;
await loadAgendas();
});
function getAgenda(day: { weekday: string }) {
return events.value[parseInt(day.weekday, 10)];
async function loadAgendas() {
const selected = new Date(selectedDate.value);
const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
const end = date.addToDate(start, { days: calendarDays.value });
events.value = {};
const list = await store.getEvents({ from: start, to: end });
list.forEach((event) => {
const day = event.start.getDay();
if (!events.value[day]) {
events.value[day] = [];
}
events.value[day].push(event);
});
}
function calendarNext() {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
return calendar.value?.next();
calendar.value?.next();
void loadAgendas();
}
function calendarPrev() {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
return calendar.value?.prev();
calendar.value?.prev();
void loadAgendas();
}
function updateProxy() {
proxyDate.value = selectedDate.value;
}
@ -155,13 +168,14 @@ export default defineComponent({
calendar,
selectedDate,
events,
getAgenda,
calendarNext,
calendarPrev,
updateProxy,
saveNewSelectedDate,
proxyDate,
calendarDays,
calendarView,
calendarRealView,
};
},
});

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

@ -38,7 +38,7 @@
<Eventtypes />
</q-tab-panel>
<q-tab-panel name="jobtypes">
<JobTypes v-if="canEditRoles" />
<JobTypes v-if="canEditJobTypes" />
</q-tab-panel>
</q-tab-panels>
</q-page>
@ -58,7 +58,7 @@ export default defineComponent({
name: 'EventManagement',
components: { CreateEvent, Eventtypes, JobTypes },
setup() {
const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
const canEditJobTypes = computed(() => hasPermission(PERMISSIONS.JOB_TYPE));
interface Tab {
name: string;
@ -85,7 +85,7 @@ export default defineComponent({
const tab = ref<string>('create');
return {
canEditRoles,
canEditJobTypes,
showDrawer,
tab,
tabs,

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

@ -37,9 +37,6 @@
<q-tab-panel name="eventtypes">
<Eventtypes />
</q-tab-panel>
<q-tab-panel name="jobtypes">
<JobTypes v-if="canEditRoles" />
</q-tab-panel>
</q-tab-panels>
</q-page>
</div>
@ -48,26 +45,21 @@
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import Eventtypes from '../components/management/Eventtypes.vue';
import JobTypes from '../components/management/JobTypes.vue';
//import CreateEvent from '../components/management/CreateEvent.vue';
import AgendaView from '../components/overview/AgendaView.vue';
import { hasPermission } from 'src/utils/permission';
import { PERMISSIONS } from '../permissions';
import { Screen } from 'quasar';
export default defineComponent({
name: 'EventOverview',
components: { AgendaView, Eventtypes, JobTypes },
components: { AgendaView, Eventtypes },
setup() {
const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
interface Tab {
name: string;
label: string;
}
const tabs: Tab[] = [
{ name: 'agendaView', label: 'Kalendar' }
{ name: 'agendaView', label: 'Kalendar' },
// { name: 'eventtypes', label: 'Veranstaltungsarten' },
// { name: 'jobtypes', label: 'Dienstarten' }
];
@ -80,17 +72,16 @@ export default defineComponent({
},
set: (val: boolean) => {
drawer.value = val;
}
},
});
const tab = ref<string>('agendaView');
return {
canEditRoles,
showDrawer,
tab,
tabs
tabs,
};
}
},
});
</script>

24
src/plugins/schedule/permissions.ts
View File

@ -1,12 +1,16 @@
export const PERMISSIONS = {
// Kann andere Nutzer bearbeiten
EDIT_OTHER: 'users_edit_other',
// Kann Rollen von Nutzern setzen
SET_ROLES: 'users_set_roles',
// Kann Nutzer löschen
DELETE: 'users_delete_other',
// Kann neue Nutzer hinzufügen
REGISTER: 'users_register',
// Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
ROLES_EDIT: 'roles_edit',
// Can create events
CREATE: 'schedule_create',
// Can edit events
EDIT: 'schedule_edit',
// Can delete events
DELETE: 'schedule_delete',
// Can create and edit EventTypes
EVENT_TYPE: 'schedule_event_type',
// Can create and edit JobTypes
JOB_TYPE: 'schedule_job_type',
// Can self assign to jobs
ASSIGN: 'schedule_assign',
// Can assign other users to jobs
ASSIGN_OTHER: 'schedule_assign_other',
};

4
src/plugins/schedule/routes/index.ts
View File

@ -1,4 +1,5 @@
import { FG_Plugin } from 'src/plugins';
import { PERMISSIONS } from '../permissions';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
@ -14,9 +15,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
title: 'Dienstübersicht',
icon: 'mdi-account-group',
shortcut: true,
permissions: [],
route: {
path: 'schedule-overview',
name: 'schedule-overview',
@ -27,6 +26,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
title: 'Dienstverwaltung',
icon: 'mdi-account-details',
shortcut: false,
permissions: [PERMISSIONS.CREATE],
route: {
path: 'schedule-management',
name: 'schedule-management',

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

@ -27,14 +27,15 @@ export const useScheduleStore = defineStore({
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 getJobTypes(force = false) {
if (force || this.jobTypes.length == 0)
try {
const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
this.jobTypes = data;
} catch (error) {
throw error;
}
return this.jobTypes;
},
async addJobType(name: string) {

8
src/utils/datetime.ts
View File

@ -20,3 +20,11 @@ export function formatDateTime(
export function asHour(date?: Date) {
if (date) return formatDateTime(date, false, true);
}
export function startOfWeek(date: Date, startMonday = true) {
const start = new Date(date);
const day = date.getDay() || 7;
if (startMonday && day !== 1) start.setHours(-24 * (day - 1));
else if (!startMonday && day !== 7) start.setHours(-24 * day);
return start;
}