Compare commits

...

2 Commits

3 changed files with 67 additions and 42 deletions

View File

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<q-dialog v-model="edittype"> <q-dialog v-model="dialogOpen">
<q-card> <q-card>
<q-card-section> <q-card-section>
<div class="text-h6">Editere Diensttyp {{ actualEvent.name }}</div> <div class="text-h6">Editere Diensttyp {{ actualEvent.name }}</div>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section>
<q-input v-model="newEventName" dense label="name" filled /> <q-input v-model="newEventName" :rules="rules" ref="dialogInput" dense label="name" filled />
</q-card-section> </q-card-section>
<q-card-actions> <q-card-actions>
<q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" /> <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
<q-btn flat color="primary" label="Speichern" @click="saveChanges()" /> <q-btn flat color="primary" label="Speichern" :disable="!!dialogInput && !dialogInput.validate()" @click="saveChanges()" />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
@ -19,10 +19,17 @@
<q-card-section> <q-card-section>
<q-table title="Veranstaltungstypen" :rows="rows" row-key="jobid" :columns="columns"> <q-table title="Veranstaltungstypen" :rows="rows" row-key="jobid" :columns="columns">
<template #top-right> <template #top-right>
<q-input v-model="newEventType" dense placeholder="Neuer Typ" /> <q-input
v-model="newEventType"
<div></div> ref="input"
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" /> :rules="rules"
dense
placeholder="Neuer Typ"
>
<slot name="after"
><q-btn color="primary" icon="mdi-plus" title="Hinzufügen" @click="addType"
/></slot>
</q-input>
</template> </template>
<template #body-cell-actions="props"> <template #body-cell-actions="props">
<!-- <q-btn :label="item"> --> <!-- <q-btn :label="item"> -->
@ -43,8 +50,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { isAxiosError } from '@flaschengeist/api';
import { defineComponent, ref, computed, onBeforeMount } from 'vue'; import { defineComponent, ref, computed, onBeforeMount } from 'vue';
import { useScheduleStore } from '../../store'; import { useScheduleStore } from '../../store';
import { Notify, QInput } from 'quasar';
export default defineComponent({ export default defineComponent({
name: 'EventTypes', name: 'EventTypes',
@ -52,15 +61,24 @@ export default defineComponent({
setup() { setup() {
const store = useScheduleStore(); const store = useScheduleStore();
const newEventType = ref(''); const newEventType = ref('');
const edittype = ref(false); const dialogOpen = ref(false);
const emptyEvent: FG.EventType = { id: -1, name: '' }; const emptyEvent: FG.EventType = { id: -1, name: '' };
const actualEvent = ref(emptyEvent); const actualEvent = ref(emptyEvent);
const newEventName = ref(''); const newEventName = ref('');
const input = ref<QInput>(null);
const dialogInput = ref<QInput>(null);
onBeforeMount(async () => await store.getEventTypes()); onBeforeMount(async () => await store.getEventTypes());
const rows = computed(() => store.eventTypes); const rows = computed(() => store.eventTypes);
const rules = [
(s: any) => !!s || 'Darf nicht leer sein!',
(s: string) =>
store.eventTypes.find((e) => e.name === s) === undefined ||
'Der Name wird bereits verwendet',
];
const columns = [ const columns = [
{ {
name: 'name', name: 'name',
@ -77,29 +95,41 @@ export default defineComponent({
}, },
]; ];
async function addType() { function addType() {
await store.addEventType(newEventType.value); if (input.value === null || input.value.validate())
// if null then conflict with name store
newEventType.value = ''; .addEventType(newEventType.value)
.then(() => {
newEventType.value = '';
})
.catch((e) => {
if (isAxiosError(e, 409))
Notify.create({
type: 'negative',
message: 'Der Name wird bereits verwendet',
});
else
Notify.create({
type: 'negative',
message: 'Unbekannter Fehler beim speichern.',
});
});
} }
function editType(event: FG.EventType) { function editType(event: FG.EventType) {
edittype.value = true; dialogOpen.value = true;
actualEvent.value = event; actualEvent.value = event;
} }
async function saveChanges() { function saveChanges() {
try { if (dialogInput.value === null || dialogInput.value.validate())
await store.renameEventType(actualEvent.value.id, newEventName.value); store.renameEventType(actualEvent.value.id, newEventName.value).then(() => discardChanges());
} finally {
discardChanges();
}
} }
function discardChanges() { function discardChanges() {
actualEvent.value = emptyEvent; actualEvent.value = emptyEvent;
newEventName.value = ''; newEventName.value = '';
edittype.value = false; dialogOpen.value = false;
} }
async function deleteType(id: number) { async function deleteType(id: number) {
@ -107,16 +137,19 @@ export default defineComponent({
} }
return { return {
columns,
rows,
addType,
newEventType,
deleteType,
edittype,
editType,
actualEvent, actualEvent,
newEventName, addType,
columns,
deleteType,
dialogInput,
dialogOpen,
discardChanges, discardChanges,
editType,
input,
rows,
rules,
newEventType,
newEventName,
saveChanges, saveChanges,
}; };
}, },

View File

@ -108,7 +108,7 @@ export default defineComponent({
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week')); const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() => const calendarDays = computed(() =>
// <= 1023 is the breakpoint for sm to md // <= 1023 is the breakpoint for sm to md
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7 calendarView.value == 'day' ? 1 : (windowWidth.value <= 1023 ? 3 : 7)
); );
const events = ref<Agendas>({}); const events = ref<Agendas>({});
const editor = ref<FG.Event | undefined>(undefined); const editor = ref<FG.Event | undefined>(undefined);

View File

@ -38,7 +38,7 @@
<EventTypes /> <EventTypes />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="jobtypes"> <q-tab-panel name="jobtypes">
<JobTypes v-if="canEditJobTypes" /> <JobTypes />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</q-page> </q-page>
@ -58,18 +58,11 @@ export default defineComponent({
name: 'EventManagement', name: 'EventManagement',
components: { EditEvent, EventTypes, JobTypes }, components: { EditEvent, EventTypes, JobTypes },
setup() { setup() {
const canEditJobTypes = computed(() => hasPermission(PERMISSIONS.JOB_TYPE)); const tabs = computed(() => [
interface Tab {
name: string;
label: string;
}
const tabs: Tab[] = [
{ name: 'create', label: 'Veranstaltungen' }, { name: 'create', label: 'Veranstaltungen' },
{ name: 'eventtypes', label: 'Veranstaltungsarten' }, ...(hasPermission(PERMISSIONS.JOB_TYPE) ? [{ name: 'jobtypes', label: 'Dienstarten' }] : []),
{ name: 'jobtypes', label: 'Dienstarten' }, ...(hasPermission(PERMISSIONS.EVENT_TYPE) ? [{ name: 'eventtypes', label: 'Veranstaltungsarten' }] : [])
]; ]);
const drawer = ref<boolean>(false); const drawer = ref<boolean>(false);
@ -85,7 +78,6 @@ export default defineComponent({
const tab = ref<string>('create'); const tab = ref<string>('create');
return { return {
canEditJobTypes,
showDrawer, showDrawer,
tab, tab,
tabs, tabs,