[core] Moved source from main flaschengeist tree
This commit is contained in:
parent
3a0b9a770e
commit
1a63f350a2
|
|
@ -0,0 +1,75 @@
|
||||||
|
const { resolve } = require('path');
|
||||||
|
module.exports = {
|
||||||
|
// https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
|
||||||
|
// This option interrupts the configuration hierarchy at this file
|
||||||
|
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
|
||||||
|
root: true,
|
||||||
|
|
||||||
|
// https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
|
||||||
|
// Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
|
||||||
|
// `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
|
||||||
|
parserOptions: {
|
||||||
|
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
|
||||||
|
// https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
|
||||||
|
// Needed to make the parser take into account 'vue' files
|
||||||
|
extraFileExtensions: ['.vue'],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
project: resolve(__dirname, './tsconfig.json'),
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
|
||||||
|
sourceType: 'module' // Allows for the use of imports
|
||||||
|
},
|
||||||
|
|
||||||
|
env: {
|
||||||
|
browser: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// Rules order is important, please avoid shuffling them
|
||||||
|
extends: [
|
||||||
|
// Base ESLint recommended rules
|
||||||
|
// 'eslint:recommended',
|
||||||
|
|
||||||
|
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
|
||||||
|
// ESLint typescript rules
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
// consider disabling this class of rules if linting takes too long
|
||||||
|
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
||||||
|
|
||||||
|
// Uncomment any of the lines below to choose desired strictness,
|
||||||
|
// but leave only one uncommented!
|
||||||
|
// See https://eslint.vuejs.org/rules/#available-rules
|
||||||
|
// 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
|
||||||
|
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
|
||||||
|
'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
|
||||||
|
|
||||||
|
// https://github.com/prettier/eslint-config-prettier#installation
|
||||||
|
// usage with Prettier, provided by 'eslint-config-prettier'.
|
||||||
|
'prettier', //'plugin:prettier/recommended'
|
||||||
|
],
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
// required to apply rules which need type information
|
||||||
|
'@typescript-eslint',
|
||||||
|
|
||||||
|
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
|
||||||
|
// required to lint *.vue files
|
||||||
|
'vue',
|
||||||
|
|
||||||
|
// https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
|
||||||
|
// Prettier has not been included as plugin to avoid performance impact
|
||||||
|
// add it as an extension for your IDE
|
||||||
|
],
|
||||||
|
|
||||||
|
// add your custom rules here
|
||||||
|
rules: {
|
||||||
|
'prefer-promise-reject-errors': 'off',
|
||||||
|
|
||||||
|
// TypeScript
|
||||||
|
quotes: ['warn', 'single', { avoidEscape: true }],
|
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
|
||||||
|
// allow debugger during development only
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"version": "1.0.0-alpha.1",
|
||||||
|
"name": "@flaschengeist/schedule",
|
||||||
|
"author": "Ferdinand <rpm@fthiessen.de>",
|
||||||
|
"homepage": "https://flaschengeist.dev/Flaschengeist",
|
||||||
|
"description": "Flaschengeist schedule plugin",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-schedule"
|
||||||
|
},
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"valid": "tsc --noEmit",
|
||||||
|
"pretty": "prettier --config ./package.json --write '{,!(node_modules)/**/}*.ts'",
|
||||||
|
"lint": "eslint --ext .js,.ts,.vue ./src"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@quasar/quasar-ui-qcalendar": "^4.0.0-alpha.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@flaschengeist/api": "file:../flaschengeist-frontend/api",
|
||||||
|
"@flaschengeist/types": "git+https://flaschengeist.dev/ferfissimo/flaschengeist-types.git#develop",
|
||||||
|
"@quasar/app": "^3.0.0-beta.26",
|
||||||
|
"quasar": "^2.0.0-beta.18",
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"prettier": "^2.3.0",
|
||||||
|
"typescript": "^4.2.4",
|
||||||
|
"pinia": "^2.0.0-alpha.18",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^4.24.0",
|
||||||
|
"@typescript-eslint/parser": "^4.24.0",
|
||||||
|
"eslint": "^7.26.0",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
|
"eslint-plugin-vue": "^7.9.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@flaschengeist/api": "^1.0.0-alpha.1",
|
||||||
|
"@flaschengeist/users": "^1.0.0-alpha.1"
|
||||||
|
},
|
||||||
|
"prettier": {
|
||||||
|
"singleQuote": true,
|
||||||
|
"semi": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"arrowParens": "always"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<q-card class="row justify-center content-center" style="text-align: center">
|
||||||
|
<q-card-section>
|
||||||
|
<div class="text-h6 col-12">Dienste diesen Monat: {{ jobs }}</div>
|
||||||
|
<!--TODO: Filters are deprecated! -->
|
||||||
|
<!--<div class="text-h6 col-12">Nächster Dienst: {{ nextJob | date }}</div>-->
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DummyWidget',
|
||||||
|
setup() {
|
||||||
|
function randomNumber(start: number, end: number) {
|
||||||
|
return start + Math.floor(Math.random() * Math.floor(end));
|
||||||
|
}
|
||||||
|
const jobs = randomNumber(0, 5);
|
||||||
|
const nextJob = new Date(2021, randomNumber(1, 12), randomNumber(1, 31));
|
||||||
|
return { jobs, nextJob };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,245 @@
|
||||||
|
<template>
|
||||||
|
<q-card>
|
||||||
|
<q-form @submit="save()" @reset="reset">
|
||||||
|
<q-card-section class="fit row justify-start content-center items-center">
|
||||||
|
<div class="text-h6 col-xs-12 col-sm-6 q-pa-sm">
|
||||||
|
Veranstaltung <template v-if="modelValue">bearbeiten</template
|
||||||
|
><template v-else>erstellen</template>
|
||||||
|
</div>
|
||||||
|
<q-select
|
||||||
|
:model-value="template"
|
||||||
|
filled
|
||||||
|
label="Vorlage"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
:options="templates"
|
||||||
|
option-label="name"
|
||||||
|
map-options
|
||||||
|
clearable
|
||||||
|
:disable="templates.length == 0"
|
||||||
|
@update:modelValue="fromTemplate"
|
||||||
|
@clear="reset()"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-model="event.name"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Name"
|
||||||
|
type="text"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-model="event.type"
|
||||||
|
filled
|
||||||
|
use-input
|
||||||
|
label="Veranstaltungstyp"
|
||||||
|
input-debounce="0"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
:options="eventtypes"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
clearable
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<IsoDateInput
|
||||||
|
v-model="event.start"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Veranstaltungsbeginn"
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<IsoDateInput
|
||||||
|
v-model="event.end"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Veranstaltungsende"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-model="event.description"
|
||||||
|
class="col-12 q-pa-sm"
|
||||||
|
label="Beschreibung"
|
||||||
|
type="textarea"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section v-if="event.template_id === undefined && modelValue === undefined">
|
||||||
|
<q-btn-toggle
|
||||||
|
v-model="recurrent"
|
||||||
|
spread
|
||||||
|
no-caps
|
||||||
|
:options="[
|
||||||
|
{ label: 'Einmalig', value: false },
|
||||||
|
{ label: 'Wiederkehrend', value: true },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
<RecurrenceRule v-if="!!recurrent" v-model="recurrenceRule" />
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section>
|
||||||
|
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section v-for="(job, index) in event.jobs" :key="index">
|
||||||
|
<q-card class="q-my-auto">
|
||||||
|
<job
|
||||||
|
v-model="event.jobs[index]"
|
||||||
|
:job-can-delete="jobDeleteDisabled"
|
||||||
|
@remove-job="removeJob(index)"
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-actions align="around">
|
||||||
|
<q-card-actions align="left">
|
||||||
|
<q-btn v-if="!template" color="secondary" label="Neue Vorlage" @click="save(true)" />
|
||||||
|
<q-btn v-else color="negative" label="Vorlage löschen" @click="removeTemplate" />
|
||||||
|
</q-card-actions>
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn label="Zurücksetzen" type="reset" />
|
||||||
|
<q-btn color="primary" type="submit" label="Speichern" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
|
||||||
|
import { date, ModifyDateOptions } from 'quasar';
|
||||||
|
import { useScheduleStore } from '../../store';
|
||||||
|
import { notEmpty } from '@flaschengeist/api';
|
||||||
|
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
|
||||||
|
import Job from './Job.vue';
|
||||||
|
import RecurrenceRule from './RecurrenceRule.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'EditEvent',
|
||||||
|
components: { IsoDateInput, Job, RecurrenceRule },
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
required: false,
|
||||||
|
default: () => undefined,
|
||||||
|
type: Object as PropType<FG.Event | undefined>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
done: (val: boolean) => typeof val === 'boolean',
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
|
||||||
|
const emptyJob = {
|
||||||
|
id: NaN,
|
||||||
|
start: new Date(),
|
||||||
|
end: date.addToDate(new Date(), { hours: 1 }),
|
||||||
|
services: [],
|
||||||
|
required_services: 2,
|
||||||
|
type: store.jobTypes[0],
|
||||||
|
};
|
||||||
|
|
||||||
|
const emptyEvent = {
|
||||||
|
id: NaN,
|
||||||
|
start: new Date(),
|
||||||
|
jobs: [Object.assign({}, emptyJob)],
|
||||||
|
type: store.eventTypes[0],
|
||||||
|
is_template: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const templates = computed(() => store.templates);
|
||||||
|
const template = ref<FG.Event | undefined>(undefined);
|
||||||
|
const event = ref<FG.Event>(props.modelValue || Object.assign({}, emptyEvent));
|
||||||
|
const eventtypes = computed(() => store.eventTypes);
|
||||||
|
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
|
||||||
|
const recurrent = ref(false);
|
||||||
|
const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
void store.getEventTypes();
|
||||||
|
void store.getJobTypes();
|
||||||
|
void store.getTemplates();
|
||||||
|
});
|
||||||
|
|
||||||
|
function addJob() {
|
||||||
|
event.value.jobs.push(Object.assign({}, emptyJob));
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeJob(index: number) {
|
||||||
|
event.value.jobs.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fromTemplate(tpl: FG.Event) {
|
||||||
|
template.value = tpl;
|
||||||
|
event.value = Object.assign({}, tpl);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(template = false) {
|
||||||
|
event.value.is_template = template;
|
||||||
|
try {
|
||||||
|
await store.addEvent(event.value);
|
||||||
|
if (props.modelValue === undefined && recurrent.value && !event.value.is_template) {
|
||||||
|
let count = 0;
|
||||||
|
const options: ModifyDateOptions = {};
|
||||||
|
switch (recurrenceRule.value.frequency) {
|
||||||
|
case 'daily':
|
||||||
|
options['days'] = 1 * recurrenceRule.value.interval;
|
||||||
|
break;
|
||||||
|
case 'weekly':
|
||||||
|
options['days'] = 7 * recurrenceRule.value.interval;
|
||||||
|
break;
|
||||||
|
case 'monthly':
|
||||||
|
options['months'] = 1 * recurrenceRule.value.interval;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
while (true) {
|
||||||
|
event.value.start = date.addToDate(event.value.start, options);
|
||||||
|
if (event.value.end) event.value.end = date.addToDate(event.value.end, options);
|
||||||
|
event.value.jobs.forEach((job) => {
|
||||||
|
job.start = date.addToDate(job.start, options);
|
||||||
|
if (job.end) job.end = date.addToDate(job.end, options);
|
||||||
|
});
|
||||||
|
count++;
|
||||||
|
if (
|
||||||
|
count <= 120 &&
|
||||||
|
(!recurrenceRule.value.count || count <= recurrenceRule.value.count) &&
|
||||||
|
(!recurrenceRule.value.until || event.value.start < recurrenceRule.value.until)
|
||||||
|
)
|
||||||
|
await store.addEvent(event.value);
|
||||||
|
else break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reset();
|
||||||
|
emit('done', true);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeTemplate() {
|
||||||
|
if (template.value !== undefined) {
|
||||||
|
await store.removeEvent(template.value.id);
|
||||||
|
template.value = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
event.value = Object.assign({}, props.modelValue || emptyEvent);
|
||||||
|
template.value = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
jobDeleteDisabled,
|
||||||
|
addJob,
|
||||||
|
eventtypes,
|
||||||
|
templates,
|
||||||
|
removeJob,
|
||||||
|
notEmpty,
|
||||||
|
save,
|
||||||
|
reset,
|
||||||
|
recurrent,
|
||||||
|
fromTemplate,
|
||||||
|
removeTemplate,
|
||||||
|
template,
|
||||||
|
recurrenceRule,
|
||||||
|
event,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<q-dialog v-model="edittype">
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="text-h6">Editere Diensttyp {{ actualEvent.name }}</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section>
|
||||||
|
<q-input v-model="newEventName" dense label="name" filled />
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-actions>
|
||||||
|
<q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
|
||||||
|
<q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<q-table title="Veranstaltungstypen" :rows="rows" row-key="jobid" :columns="columns">
|
||||||
|
<template #top-right>
|
||||||
|
<q-input v-model="newEventType" dense placeholder="Neuer Typ" />
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
|
||||||
|
</template>
|
||||||
|
<template #body-cell-actions="props">
|
||||||
|
<!-- <q-btn :label="item"> -->
|
||||||
|
<!-- {{ item.row.name }} -->
|
||||||
|
<q-td :props="props" align="right" :auto-width="true">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
icon="mdi-pencil"
|
||||||
|
@click="editType({ id: props.row.id, name: props.row.name })"
|
||||||
|
/>
|
||||||
|
<q-btn round icon="mdi-delete" @click="deleteType(props.row.id)" />
|
||||||
|
</q-td>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
|
||||||
|
import { useScheduleStore } from '../../store';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'EventTypes',
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
const newEventType = ref('');
|
||||||
|
const edittype = ref(false);
|
||||||
|
const emptyEvent: FG.EventType = { id: -1, name: '' };
|
||||||
|
const actualEvent = ref(emptyEvent);
|
||||||
|
const newEventName = ref('');
|
||||||
|
|
||||||
|
onBeforeMount(async () => await store.getEventTypes());
|
||||||
|
|
||||||
|
const rows = computed(() => store.eventTypes);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
name: 'name',
|
||||||
|
label: 'Veranstaltungstyp',
|
||||||
|
field: 'name',
|
||||||
|
align: 'left',
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'actions',
|
||||||
|
label: 'Aktionen',
|
||||||
|
field: 'actions',
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
async function addType() {
|
||||||
|
await store.addEventType(newEventType.value);
|
||||||
|
// if null then conflict with name
|
||||||
|
newEventType.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function editType(event: FG.EventType) {
|
||||||
|
edittype.value = true;
|
||||||
|
actualEvent.value = event;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveChanges() {
|
||||||
|
try {
|
||||||
|
await store.renameEventType(actualEvent.value.id, newEventName.value);
|
||||||
|
} finally {
|
||||||
|
discardChanges();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function discardChanges() {
|
||||||
|
actualEvent.value = emptyEvent;
|
||||||
|
newEventName.value = '';
|
||||||
|
edittype.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteType(id: number) {
|
||||||
|
await store.removeEventType(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
rows,
|
||||||
|
addType,
|
||||||
|
newEventType,
|
||||||
|
deleteType,
|
||||||
|
edittype,
|
||||||
|
editType,
|
||||||
|
actualEvent,
|
||||||
|
newEventName,
|
||||||
|
discardChanges,
|
||||||
|
saveChanges,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<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"
|
||||||
|
label="Beginn"
|
||||||
|
type="datetime"
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<IsoDateInput
|
||||||
|
v-model="job.end"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Ende"
|
||||||
|
type="datetime"
|
||||||
|
:rules="[notEmpty, isAfterDate]"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-model="job.type"
|
||||||
|
filled
|
||||||
|
use-input
|
||||||
|
label="Dienstart"
|
||||||
|
input-debounce="0"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
:options="jobtypes"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
map-options
|
||||||
|
clearable
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-model="job.required_services"
|
||||||
|
filled
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Dienstanzahl"
|
||||||
|
type="number"
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-model="job.comment"
|
||||||
|
class="col-12 q-pa-sm"
|
||||||
|
label="Beschreibung"
|
||||||
|
type="textarea"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
<q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
|
||||||
|
</q-card-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
|
||||||
|
import { IsoDateInput } from '@flaschengeist/api/components';
|
||||||
|
import { notEmpty } from '@flaschengeist/api';
|
||||||
|
import { useScheduleStore } from '../../store';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Job',
|
||||||
|
components: { IsoDateInput },
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
required: true,
|
||||||
|
type: Object as PropType<FG.Job>,
|
||||||
|
},
|
||||||
|
jobCanDelete: Boolean,
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
'remove-job': () => true,
|
||||||
|
'update:modelValue': (job: FG.Job) => !!job,
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
|
||||||
|
onBeforeMount(() => store.getJobTypes());
|
||||||
|
|
||||||
|
const jobtypes = computed(() => store.jobTypes);
|
||||||
|
|
||||||
|
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) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
function isAfterDate(val: string) {
|
||||||
|
return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
job,
|
||||||
|
jobtypes,
|
||||||
|
removeJob,
|
||||||
|
notEmpty,
|
||||||
|
isAfterDate,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<q-dialog v-model="edittype">
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="text-h6">Editere Diensttyp {{ actualJob.name }}</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section>
|
||||||
|
<q-input v-model="newJobName" dense label="name" filled />
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-actions>
|
||||||
|
<q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
|
||||||
|
<q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<q-table title="Diensttypen" :rows="rows" row-key="jobid" :columns="columns">
|
||||||
|
<template #top-right>
|
||||||
|
<q-input v-model="newJob" dense placeholder="Neuer Typ" />
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
|
||||||
|
</template>
|
||||||
|
<template #body-cell-actions="props">
|
||||||
|
<!-- <q-btn :label="item"> -->
|
||||||
|
<!-- {{ item.row.name }} -->
|
||||||
|
<q-td :props="props" align="right" :auto-width="true">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
icon="mdi-pencil"
|
||||||
|
@click="editType({ id: props.row.id, name: props.row.name })"
|
||||||
|
/>
|
||||||
|
<q-btn round icon="mdi-delete" @click="deleteType(props.row.id)" />
|
||||||
|
</q-td>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
|
||||||
|
import { useScheduleStore } from '../../store';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'JobTypes',
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
const newJob = ref('');
|
||||||
|
const edittype = ref(false);
|
||||||
|
const emptyJob: FG.JobType = { id: -1, name: '' };
|
||||||
|
const actualJob = ref(emptyJob);
|
||||||
|
const newJobName = ref('');
|
||||||
|
|
||||||
|
onBeforeMount(() => store.getJobTypes());
|
||||||
|
|
||||||
|
const rows = computed(() => store.jobTypes);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
name: 'jobname',
|
||||||
|
label: 'Name',
|
||||||
|
field: 'name',
|
||||||
|
align: 'left',
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'actions',
|
||||||
|
label: 'Aktionen',
|
||||||
|
field: 'actions',
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
async function addType() {
|
||||||
|
await store.addJobType(newJob.value);
|
||||||
|
newJob.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function editType(job: FG.JobType) {
|
||||||
|
edittype.value = true;
|
||||||
|
actualJob.value = job;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveChanges() {
|
||||||
|
try {
|
||||||
|
await store.renameJobType(actualJob.value.id, newJobName.value);
|
||||||
|
} finally {
|
||||||
|
discardChanges();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function discardChanges() {
|
||||||
|
actualJob.value = emptyJob;
|
||||||
|
newJobName.value = '';
|
||||||
|
edittype.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteType(id: number) {
|
||||||
|
void store.removeJobType(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
rows,
|
||||||
|
addType,
|
||||||
|
newJob,
|
||||||
|
deleteType,
|
||||||
|
edittype,
|
||||||
|
editType,
|
||||||
|
actualJob,
|
||||||
|
newJobName,
|
||||||
|
discardChanges,
|
||||||
|
saveChanges,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template>
|
||||||
|
<q-card class="fit row justify-start content-center items-center">
|
||||||
|
<q-input
|
||||||
|
v-model="rule.interval"
|
||||||
|
filled
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Interval"
|
||||||
|
type="number"
|
||||||
|
:rules="[notEmpty]"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-model="rule.frequency"
|
||||||
|
filled
|
||||||
|
label="Wiederholung"
|
||||||
|
input-debounce="200"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
:options="freqTypes"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-model="rule.count"
|
||||||
|
filled
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Anzahl Wiederholungen"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
<IsoDateInput
|
||||||
|
v-model="rule.until"
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Wiederholen bis"
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
|
||||||
|
import { defineComponent, PropType } from 'vue';
|
||||||
|
import { notEmpty } from '@flaschengeist/api';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'RecurrenceRule',
|
||||||
|
components: { IsoDateInput },
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
required: true,
|
||||||
|
type: Object as PropType<FG.RecurrenceRule>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
'update:modelValue': (rule: FG.RecurrenceRule) => !!rule,
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const freqTypes = [
|
||||||
|
{ label: 'Täglich', value: 'daily' },
|
||||||
|
{ label: 'Wöchentlich', value: 'weekly' },
|
||||||
|
{ label: 'Monatlich', value: 'monthly' },
|
||||||
|
{ label: 'Jährlich', value: 'yearly' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const rule = new Proxy(props.modelValue, {
|
||||||
|
get(target, prop) {
|
||||||
|
if (typeof prop === 'string') {
|
||||||
|
return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set(target, prop, value) {
|
||||||
|
if (typeof prop === 'string') {
|
||||||
|
const obj = Object.assign({}, props.modelValue);
|
||||||
|
if (prop == 'frequency' && typeof value === 'string') obj.frequency = value;
|
||||||
|
else if (prop == 'interval') {
|
||||||
|
obj.interval = typeof value === 'string' ? parseInt(value) : <number>value;
|
||||||
|
} else if (prop == 'count') {
|
||||||
|
obj.until = undefined;
|
||||||
|
obj.count = typeof value === 'string' ? parseInt(value) : <number>value;
|
||||||
|
} else if (prop == 'until' && (value instanceof Date || value === undefined)) {
|
||||||
|
obj.count = undefined;
|
||||||
|
obj.until = <Date | undefined>value;
|
||||||
|
} else return false;
|
||||||
|
emit('update:modelValue', obj);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
rule,
|
||||||
|
notEmpty,
|
||||||
|
freqTypes,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,241 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog
|
||||||
|
:model-value="editor !== undefined"
|
||||||
|
persistent
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
>
|
||||||
|
<q-card>
|
||||||
|
<div class="column">
|
||||||
|
<div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
|
||||||
|
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
|
||||||
|
</div>
|
||||||
|
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
||||||
|
<edit-event v-model="editor" @done="editDone" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<q-page padding>
|
||||||
|
<q-card>
|
||||||
|
<div style="max-width: 1800px; width: 100%">
|
||||||
|
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
||||||
|
<div class="row justify-center items-center">
|
||||||
|
<q-btn flat dense label="Prev" @click="calendarPrev" />
|
||||||
|
<q-separator vertical />
|
||||||
|
<q-btn flat dense
|
||||||
|
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||||
|
<q-popup-proxy
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
@before-show="updateProxy"
|
||||||
|
>
|
||||||
|
<q-date v-model="proxyDate">
|
||||||
|
<div class="row items-center justify-end q-gutter-sm">
|
||||||
|
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||||
|
<q-btn
|
||||||
|
v-close-popup
|
||||||
|
label="OK"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
@click="saveNewSelectedDate(proxyDate)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-date>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-btn>
|
||||||
|
<q-separator vertical />
|
||||||
|
<q-btn flat dense label="Next" @click="calendarNext" />
|
||||||
|
</div>
|
||||||
|
<!-- <q-space /> -->
|
||||||
|
|
||||||
|
<q-btn-toggle
|
||||||
|
v-model="calendarView"
|
||||||
|
class="row absolute-right"
|
||||||
|
flat
|
||||||
|
stretch
|
||||||
|
toggle-color=""
|
||||||
|
:options="[
|
||||||
|
{ label: 'Tag', value: 'day' },
|
||||||
|
{ label: 'Woche', value: 'week' },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<q-calendar-agenda
|
||||||
|
v-model="selectedDate"
|
||||||
|
: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 } }">
|
||||||
|
<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"
|
||||||
|
@editEvent="edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-calendar-agenda>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
|
||||||
|
import { useScheduleStore } from '../../store';
|
||||||
|
import Eventslot from './slots/EventSlot.vue';
|
||||||
|
import { date } from 'quasar';
|
||||||
|
import { startOfWeek } from '@flaschengeist/api';
|
||||||
|
import EditEvent from '../management/EditEvent.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'AgendaView',
|
||||||
|
components: { Eventslot, EditEvent },
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
const windowWidth = ref(window.innerWidth);
|
||||||
|
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
||||||
|
const proxyDate = ref('');
|
||||||
|
const calendarView = ref('week');
|
||||||
|
|
||||||
|
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
|
||||||
|
const calendarDays = computed(() =>
|
||||||
|
// <= 1023 is the breakpoint for sm to md
|
||||||
|
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
|
||||||
|
);
|
||||||
|
const events = ref<Agendas>({});
|
||||||
|
const editor = ref<FG.Event | undefined>(undefined);
|
||||||
|
|
||||||
|
interface Agendas {
|
||||||
|
[index: number]: FG.Event[];
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
windowWidth.value = window.innerWidth;
|
||||||
|
});
|
||||||
|
|
||||||
|
await loadAgendas();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function edit(id: number) {
|
||||||
|
editor.value = await store.getEvent(id);
|
||||||
|
}
|
||||||
|
function editDone(changed: boolean) {
|
||||||
|
if (changed) void loadAgendas();
|
||||||
|
editor.value = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
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() {
|
||||||
|
selectedDate.value = date.formatDate(
|
||||||
|
date.addToDate(selectedDate.value, { days: calendarDays.value }),
|
||||||
|
'YYYY-MM-DD'
|
||||||
|
);
|
||||||
|
void loadAgendas();
|
||||||
|
}
|
||||||
|
|
||||||
|
function calendarPrev() {
|
||||||
|
selectedDate.value = date.formatDate(
|
||||||
|
date.subtractFromDate(selectedDate.value, { days: calendarDays.value }),
|
||||||
|
'YYYY-MM-DD'
|
||||||
|
);
|
||||||
|
void loadAgendas();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProxy() {
|
||||||
|
proxyDate.value = selectedDate.value;
|
||||||
|
}
|
||||||
|
function saveNewSelectedDate() {
|
||||||
|
proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
|
||||||
|
selectedDate.value = proxyDate.value;
|
||||||
|
}
|
||||||
|
function asMonth(value: string) {
|
||||||
|
if (value) {
|
||||||
|
return date.formatDate(new Date(value), 'MMMM', {
|
||||||
|
months: [
|
||||||
|
'Januar',
|
||||||
|
'Februar',
|
||||||
|
'März',
|
||||||
|
'April',
|
||||||
|
'Mai',
|
||||||
|
'Juni',
|
||||||
|
'Juli',
|
||||||
|
'August',
|
||||||
|
'September',
|
||||||
|
'Oktober',
|
||||||
|
'November',
|
||||||
|
'Dezember',
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function asYear(value: string) {
|
||||||
|
if (value) {
|
||||||
|
return date.formatDate(new Date(value), 'YYYY');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
asYear,
|
||||||
|
asMonth,
|
||||||
|
selectedDate,
|
||||||
|
edit,
|
||||||
|
editor,
|
||||||
|
editDone,
|
||||||
|
events,
|
||||||
|
calendarNext,
|
||||||
|
calendarPrev,
|
||||||
|
updateProxy,
|
||||||
|
saveNewSelectedDate,
|
||||||
|
proxyDate,
|
||||||
|
remove,
|
||||||
|
calendarDays,
|
||||||
|
calendarView,
|
||||||
|
calendarRealView,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<q-card
|
||||||
|
class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
|
||||||
|
bordered
|
||||||
|
>
|
||||||
|
<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="text-weight-medium" style="font-size: 1vw">
|
||||||
|
{{ event.description }}
|
||||||
|
</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">
|
||||||
|
<q-btn
|
||||||
|
v-if="canEdit"
|
||||||
|
color="secondary"
|
||||||
|
flat
|
||||||
|
label="Bearbeiten"
|
||||||
|
style="min-width: 95%"
|
||||||
|
@click="edit"
|
||||||
|
/>
|
||||||
|
<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 '@flaschengeist/api';
|
||||||
|
import { PERMISSIONS } from '../../../permissions';
|
||||||
|
import JobSlot from './JobSlot.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Eventslot',
|
||||||
|
components: { JobSlot },
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
required: true,
|
||||||
|
type: Object as PropType<FG.Event>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
'update:modelValue': (val: FG.Event) => !!val,
|
||||||
|
removeEvent: (val: number) => typeof val === 'number',
|
||||||
|
editEvent: (val: number) => !!val,
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
|
||||||
|
const canEdit = computed(
|
||||||
|
() =>
|
||||||
|
hasPermission(PERMISSIONS.EDIT) &&
|
||||||
|
(props.modelValue?.end || props.modelValue.start) > new Date()
|
||||||
|
);
|
||||||
|
const event = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (v) => emit('update:modelValue', v),
|
||||||
|
});
|
||||||
|
|
||||||
|
function remove() {
|
||||||
|
emit('removeEvent', props.modelValue.id);
|
||||||
|
}
|
||||||
|
function edit() {
|
||||||
|
emit('editEvent', props.modelValue.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
canDelete,
|
||||||
|
canEdit,
|
||||||
|
edit,
|
||||||
|
event,
|
||||||
|
remove,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<q-card bordered>
|
||||||
|
<div class="text-weight-medium q-px-xs">
|
||||||
|
{{ asHour(modelValue.start) }}
|
||||||
|
<template v-if="modelValue.end">- {{ asHour(modelValue.end) }}</template>
|
||||||
|
</div>
|
||||||
|
<div class="q-px-xs">
|
||||||
|
{{ modelValue.type.name }}
|
||||||
|
</div>
|
||||||
|
<div class="col-auto q-px-xs" style="font-size: 10px">
|
||||||
|
{{ modelValue.comment }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-select
|
||||||
|
:model-value="modelValue.services"
|
||||||
|
filled
|
||||||
|
:option-label="(opt) => userDisplay(opt)"
|
||||||
|
multiple
|
||||||
|
disable
|
||||||
|
use-chips
|
||||||
|
stack-label
|
||||||
|
label="Dienste"
|
||||||
|
class="col-auto q-px-xs"
|
||||||
|
style="font-size: 6px"
|
||||||
|
counter
|
||||||
|
:max-values="modelValue.required_services"
|
||||||
|
>
|
||||||
|
</q-select>
|
||||||
|
<div class="row col-12 justify-end">
|
||||||
|
<q-btn v-if="canEnroll" flat color="primary" label="Eintragen" @click="enrollForJob" />
|
||||||
|
<q-btn v-if="isEnrolled" flat color="negative" label="Austragen" @click="signOutFromJob" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onBeforeMount, computed, PropType } from 'vue';
|
||||||
|
import { Notify } from 'quasar';
|
||||||
|
import { asHour, useMainStore, useUserStore } from '@flaschengeist/api';
|
||||||
|
import { useScheduleStore } from '../../../store';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'JobSlot',
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
required: true,
|
||||||
|
type: Object as PropType<FG.Job>,
|
||||||
|
},
|
||||||
|
eventId: {
|
||||||
|
required: true,
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: { 'update:modelValue': (v: FG.Job) => !!v },
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const store = useScheduleStore();
|
||||||
|
const mainStore = useMainStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const availableUsers = null;
|
||||||
|
|
||||||
|
onBeforeMount(async () => userStore.getUsers());
|
||||||
|
|
||||||
|
function userDisplay(service: FG.Service) {
|
||||||
|
return userStore.findUser(service.userid)?.display_name || service.userid;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isEnrolled = computed(
|
||||||
|
() =>
|
||||||
|
props.modelValue.services.findIndex(
|
||||||
|
(service) => service.userid == mainStore.currentUser.userid
|
||||||
|
) !== -1
|
||||||
|
);
|
||||||
|
|
||||||
|
const canEnroll = computed(() => {
|
||||||
|
const is = isEnrolled.value;
|
||||||
|
let sum = 0;
|
||||||
|
props.modelValue.services.forEach((s) => (sum += s.value));
|
||||||
|
return sum < props.modelValue.required_services && !is;
|
||||||
|
});
|
||||||
|
|
||||||
|
async function enrollForJob() {
|
||||||
|
const newService: FG.Service = {
|
||||||
|
userid: mainStore.currentUser.userid,
|
||||||
|
is_backup: false,
|
||||||
|
value: 1,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
const job = await store.updateJob(props.eventId, props.modelValue.id, { user: newService });
|
||||||
|
emit('update:modelValue', job);
|
||||||
|
} 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' }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function signOutFromJob() {
|
||||||
|
const newService: FG.Service = {
|
||||||
|
userid: mainStore.currentUser.userid,
|
||||||
|
is_backup: false,
|
||||||
|
value: -1,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
const job = await store.updateJob(props.eventId, props.modelValue.id, {
|
||||||
|
user: newService,
|
||||||
|
});
|
||||||
|
emit('update:modelValue', job);
|
||||||
|
} 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' }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
availableUsers,
|
||||||
|
enrollForJob,
|
||||||
|
isEnrolled,
|
||||||
|
signOutFromJob,
|
||||||
|
canEnroll,
|
||||||
|
userDisplay,
|
||||||
|
asHour,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
declare namespace FG {
|
||||||
|
export interface RecurrenceRule {
|
||||||
|
frequency: string;
|
||||||
|
interval: number;
|
||||||
|
count?: number;
|
||||||
|
until?: Date;
|
||||||
|
weekdays?: Array<number>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { innerRoutes, privateRoutes } from './routes';
|
||||||
|
import { FG_Plugin } from '@flaschengeist/types';
|
||||||
|
import { defineAsyncComponent } from 'vue';
|
||||||
|
|
||||||
|
const plugin: FG_Plugin.Plugin = {
|
||||||
|
id: 'schedule',
|
||||||
|
name: 'Schedule',
|
||||||
|
innerRoutes,
|
||||||
|
internalRoutes: privateRoutes,
|
||||||
|
requiredModules: [['events']],
|
||||||
|
version: '0.0.1',
|
||||||
|
widgets: [
|
||||||
|
{
|
||||||
|
priority: 0,
|
||||||
|
name: 'stats',
|
||||||
|
permissions: [],
|
||||||
|
widget: defineAsyncComponent(() => import('./components/Widget.vue')),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default plugin;
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
|
||||||
|
<EditEvent v-model="event" />
|
||||||
|
</q-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { onBeforeMount, defineComponent, ref } from 'vue';
|
||||||
|
import EditEvent from '../components/management/EditEvent.vue';
|
||||||
|
import { useScheduleStore } from '../store';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { EditEvent },
|
||||||
|
setup() {
|
||||||
|
const route = useRoute();
|
||||||
|
const store = useScheduleStore();
|
||||||
|
const event = ref<FG.Event | undefined>(undefined);
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
if ('id' in route.params && typeof route.params.id === 'string')
|
||||||
|
event.value = await store.getEvent(parseInt(route.params.id));
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
event,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<q-tabs v-if="$q.screen.gt.sm" v-model="tab">
|
||||||
|
<q-tab
|
||||||
|
v-for="(tabindex, index) in tabs"
|
||||||
|
:key="'tab' + index"
|
||||||
|
:name="tabindex.name"
|
||||||
|
:label="tabindex.label"
|
||||||
|
/>
|
||||||
|
</q-tabs>
|
||||||
|
<div v-else class="fit row justify-end">
|
||||||
|
<q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
|
||||||
|
</div>
|
||||||
|
<q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
|
||||||
|
<q-list v-model="tab">
|
||||||
|
<q-item
|
||||||
|
v-for="(tabindex, index) in tabs"
|
||||||
|
:key="'tab' + index"
|
||||||
|
:active="tab == tabindex.name"
|
||||||
|
clickable
|
||||||
|
@click="tab = tabindex.name"
|
||||||
|
>
|
||||||
|
<q-item-label>{{ tabindex.label }}</q-item-label>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-drawer>
|
||||||
|
<q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="tab"
|
||||||
|
style="background-color: transparent"
|
||||||
|
class="q-ma-none q-pa-none fit row justify-center content-start items-start"
|
||||||
|
animated
|
||||||
|
>
|
||||||
|
<q-tab-panel name="create">
|
||||||
|
<EditEvent />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="eventtypes">
|
||||||
|
<EventTypes />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="jobtypes">
|
||||||
|
<JobTypes v-if="canEditJobTypes" />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-page>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, ref } from 'vue';
|
||||||
|
import EventTypes from '../components/management/EventTypes.vue';
|
||||||
|
import JobTypes from '../components/management/JobTypes.vue';
|
||||||
|
import EditEvent from '../components/management/EditEvent.vue';
|
||||||
|
import { hasPermission } from '@flaschengeist/api';
|
||||||
|
import { PERMISSIONS } from '../permissions';
|
||||||
|
import { Screen } from 'quasar';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'EventManagement',
|
||||||
|
components: { EditEvent, EventTypes, JobTypes },
|
||||||
|
setup() {
|
||||||
|
const canEditJobTypes = computed(() => hasPermission(PERMISSIONS.JOB_TYPE));
|
||||||
|
|
||||||
|
interface Tab {
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs: Tab[] = [
|
||||||
|
{ name: 'create', label: 'Veranstaltungen' },
|
||||||
|
{ name: 'eventtypes', label: 'Veranstaltungsarten' },
|
||||||
|
{ name: 'jobtypes', label: 'Dienstarten' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const drawer = ref<boolean>(false);
|
||||||
|
|
||||||
|
const showDrawer = computed({
|
||||||
|
get: () => {
|
||||||
|
return !Screen.gt.sm && drawer.value;
|
||||||
|
},
|
||||||
|
set: (val: boolean) => {
|
||||||
|
drawer.value = val;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const tab = ref<string>('create');
|
||||||
|
|
||||||
|
return {
|
||||||
|
canEditJobTypes,
|
||||||
|
showDrawer,
|
||||||
|
tab,
|
||||||
|
tabs,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<q-tabs v-if="$q.screen.gt.sm" v-model="tab">
|
||||||
|
<q-tab
|
||||||
|
v-for="(tabindex, index) in tabs"
|
||||||
|
:key="'tab' + index"
|
||||||
|
:name="tabindex.name"
|
||||||
|
:label="tabindex.label"
|
||||||
|
/>
|
||||||
|
</q-tabs>
|
||||||
|
<div v-else class="fit row justify-end">
|
||||||
|
<q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
|
||||||
|
</div>
|
||||||
|
<q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
|
||||||
|
<q-list v-model="tab">
|
||||||
|
<q-item
|
||||||
|
v-for="(tabindex, index) in tabs"
|
||||||
|
:key="'tab' + index"
|
||||||
|
:active="tab == tabindex.name"
|
||||||
|
clickable
|
||||||
|
@click="tab = tabindex.name"
|
||||||
|
>
|
||||||
|
<q-item-label>{{ tabindex.label }}</q-item-label>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-drawer>
|
||||||
|
<q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="tab"
|
||||||
|
style="background-color: transparent"
|
||||||
|
class="q-ma-none q-pa-none fit row justify-center content-start items-start"
|
||||||
|
animated
|
||||||
|
>
|
||||||
|
<q-tab-panel name="agendaView">
|
||||||
|
<AgendaView />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="eventtypes">
|
||||||
|
<EventTypes />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-page>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, ref } from 'vue';
|
||||||
|
import EventTypes from '../components/management/EventTypes.vue';
|
||||||
|
//import CreateEvent from '../components/management/CreateEvent.vue';
|
||||||
|
import AgendaView from '../components/overview/AgendaView.vue';
|
||||||
|
import { Screen } from 'quasar';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'EventOverview',
|
||||||
|
components: { AgendaView, EventTypes },
|
||||||
|
setup() {
|
||||||
|
interface Tab {
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs: Tab[] = [
|
||||||
|
{ name: 'agendaView', label: 'Kalendar' },
|
||||||
|
// { name: 'eventtypes', label: 'Veranstaltungsarten' },
|
||||||
|
// { name: 'jobtypes', label: 'Dienstarten' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const drawer = ref<boolean>(false);
|
||||||
|
|
||||||
|
const showDrawer = computed({
|
||||||
|
get: () => {
|
||||||
|
return !Screen.gt.sm && drawer.value;
|
||||||
|
},
|
||||||
|
set: (val: boolean) => {
|
||||||
|
drawer.value = val;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const tab = ref<string>('agendaView');
|
||||||
|
|
||||||
|
return {
|
||||||
|
showDrawer,
|
||||||
|
tab,
|
||||||
|
tabs,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<q-page padding>
|
||||||
|
<q-card>
|
||||||
|
<q-card-section class="row"> </q-card-section>
|
||||||
|
<q-card-section> </q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-page>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
export const PERMISSIONS = {
|
||||||
|
// Can create events
|
||||||
|
CREATE: 'events_create',
|
||||||
|
// Can edit events
|
||||||
|
EDIT: 'events_edit',
|
||||||
|
// Can delete events
|
||||||
|
DELETE: 'events_delete',
|
||||||
|
// Can create and edit EventTypes
|
||||||
|
EVENT_TYPE: 'events_event_type',
|
||||||
|
// Can create and edit JobTypes
|
||||||
|
JOB_TYPE: 'events_job_type',
|
||||||
|
// Can self assign to jobs
|
||||||
|
ASSIGN: 'events_assign',
|
||||||
|
// Can assign other users to jobs
|
||||||
|
ASSIGN_OTHER: 'events_assign_other',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import { FG_Plugin } from '@flaschengeist/types';
|
||||||
|
import { PERMISSIONS } from '../permissions';
|
||||||
|
|
||||||
|
export const innerRoutes: FG_Plugin.MenuRoute[] = [
|
||||||
|
{
|
||||||
|
title: 'Dienste',
|
||||||
|
icon: 'mdi-briefcase',
|
||||||
|
permissions: ['user'],
|
||||||
|
route: {
|
||||||
|
path: 'schedule',
|
||||||
|
name: 'schedule',
|
||||||
|
redirect: { name: 'schedule-overview' },
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: 'Dienstübersicht',
|
||||||
|
icon: 'mdi-account-group',
|
||||||
|
shortcut: true,
|
||||||
|
route: {
|
||||||
|
path: 'schedule-overview',
|
||||||
|
name: 'schedule-overview',
|
||||||
|
component: () => import('../pages/Overview.vue'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dienstverwaltung',
|
||||||
|
icon: 'mdi-account-details',
|
||||||
|
shortcut: false,
|
||||||
|
permissions: [PERMISSIONS.CREATE],
|
||||||
|
route: {
|
||||||
|
path: 'schedule-management',
|
||||||
|
name: 'schedule-management',
|
||||||
|
component: () => import('../pages/Management.vue'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dienstanfragen',
|
||||||
|
icon: 'mdi-account-switch',
|
||||||
|
shortcut: false,
|
||||||
|
route: {
|
||||||
|
path: 'schedule-requests',
|
||||||
|
name: 'schedule-requests',
|
||||||
|
component: () => import('../pages/Requests.vue'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
name: 'events-edit',
|
||||||
|
path: 'schedule/:id/edit',
|
||||||
|
component: () => import('../pages/Event.vue'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
//https://github.com/vuejs/vue-next/issues/3130
|
||||||
|
declare module '*.vue' {
|
||||||
|
import { ComponentOptions } from 'vue';
|
||||||
|
const component: ComponentOptions;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
import { api } from '@flaschengeist/api';
|
||||||
|
import { AxiosError } from 'axios';
|
||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
interface UserService {
|
||||||
|
user: FG.Service;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fixJob(job: FG.Job) {
|
||||||
|
job.start = new Date(job.start);
|
||||||
|
if (job.end) job.end = new Date(job.end);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fixEvent(event: FG.Event) {
|
||||||
|
event.start = new Date(event.start);
|
||||||
|
if (event.end) event.end = new Date(event.end);
|
||||||
|
|
||||||
|
event.jobs.forEach((job) => fixJob(job));
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useScheduleStore = defineStore({
|
||||||
|
id: 'schedule',
|
||||||
|
|
||||||
|
state: () => ({
|
||||||
|
jobTypes: [] as FG.JobType[],
|
||||||
|
eventTypes: [] as FG.EventType[],
|
||||||
|
templates: [] as FG.Event[],
|
||||||
|
}),
|
||||||
|
|
||||||
|
getters: {},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
async getJobTypes(force = false) {
|
||||||
|
if (force || this.jobTypes.length == 0)
|
||||||
|
try {
|
||||||
|
const { data } = await api.get<FG.JobType[]>('/events/job-types');
|
||||||
|
this.jobTypes = data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
return this.jobTypes;
|
||||||
|
},
|
||||||
|
|
||||||
|
async addJobType(name: string) {
|
||||||
|
await api.post<FG.JobType>('/events/job-types', { name: name });
|
||||||
|
//TODO: HAndle new JT
|
||||||
|
},
|
||||||
|
|
||||||
|
async removeJobType(id: number) {
|
||||||
|
await api.delete(`/events/job-types/${id}`);
|
||||||
|
//Todo Handle delete JT
|
||||||
|
},
|
||||||
|
|
||||||
|
async renameJobType(id: number, newName: string) {
|
||||||
|
await api.put(`/events/job-types/${id}`, { name: newName });
|
||||||
|
// TODO handle rename
|
||||||
|
},
|
||||||
|
|
||||||
|
async getEventTypes(force = false) {
|
||||||
|
if (force || this.eventTypes.length == 0)
|
||||||
|
try {
|
||||||
|
const { data } = await api.get<FG.EventType[]>('/events/event-types');
|
||||||
|
this.eventTypes = data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
return this.eventTypes;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 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>('/events/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 removeEvent(id: number) {
|
||||||
|
try {
|
||||||
|
await api.delete(`/events/${id}`);
|
||||||
|
const idx = this.templates.findIndex((v) => v.id === id);
|
||||||
|
if (idx !== -1) this.templates.splice(idx, 1);
|
||||||
|
} 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(`/events/event-types/${id}`);
|
||||||
|
// TODO handle delete
|
||||||
|
},
|
||||||
|
|
||||||
|
async renameEventType(id: number, newName: string) {
|
||||||
|
try {
|
||||||
|
await api.put(`/events/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 getTemplates(force = false) {
|
||||||
|
if (force || this.templates.length == 0) {
|
||||||
|
const { data } = await api.get<FG.Event[]>('/events/templates');
|
||||||
|
data.forEach((element) => fixEvent(element));
|
||||||
|
this.templates = data;
|
||||||
|
}
|
||||||
|
return this.templates;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getEvents(filter: { from?: Date; to?: Date } | undefined = undefined) {
|
||||||
|
try {
|
||||||
|
const { data } = await api.get<FG.Event[]>('/events', { params: filter });
|
||||||
|
data.forEach((element) => fixEvent(element));
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getEvent(id: number) {
|
||||||
|
try {
|
||||||
|
const { data } = await api.get<FG.Event>(`/events/${id}`);
|
||||||
|
fixEvent(data);
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateJob(eventId: number, jobId: number, service: FG.Service | UserService) {
|
||||||
|
try {
|
||||||
|
const { data } = await api.put<FG.Job>(`/events/${eventId}/jobs/${jobId}`, service);
|
||||||
|
fixJob(data);
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async addEvent(event: FG.Event) {
|
||||||
|
const { data } = await api.post<FG.Event>('/events', event);
|
||||||
|
if (data.is_template) this.templates.push(data);
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue