src/components/management/EventTypes.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <q-dialog v-model="dialogOpen">
+    <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" :rules="rules" ref="dialogInput" dense label="name" filled />
+          <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" :disable="!!dialogInput && !dialogInput.validate()" @click="saveChanges()" />
+          <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -19,17 +19,10 @@
       <q-card-section>
         <q-table title="Veranstaltungstypen" :rows="rows" row-key="jobid" :columns="columns">
           <template #top-right>
-            <q-input
-              v-model="newEventType"
-              ref="input"
-              :rules="rules"
-              dense
-              placeholder="Neuer Typ"
-            >
-              <slot name="after"
-                ><q-btn color="primary" icon="mdi-plus" title="Hinzufügen" @click="addType"
-              /></slot>
-            </q-input>
+            <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"> -->
@@ -50,10 +43,8 @@
 </template>
 
 <script lang="ts">
-import { isAxiosError } from '@flaschengeist/api';
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
 import { useScheduleStore } from '../../store';
-import { Notify, QInput } from 'quasar';
 
 export default defineComponent({
   name: 'EventTypes',
@@ -61,24 +52,15 @@ export default defineComponent({
   setup() {
     const store = useScheduleStore();
     const newEventType = ref('');
-    const dialogOpen = ref(false);
+    const edittype = ref(false);
     const emptyEvent: FG.EventType = { id: -1, name: '' };
     const actualEvent = ref(emptyEvent);
     const newEventName = ref('');
-    const input = ref<QInput>(null);
-    const dialogInput = ref<QInput>(null);
 
     onBeforeMount(async () => await store.getEventTypes());
 
     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 = [
       {
         name: 'name',
@@ -95,41 +77,29 @@ export default defineComponent({
       },
     ];
 
-    function addType() {
-      if (input.value === null || input.value.validate())
-        store
-          .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.',
-              });
-          });
+    async function addType() {
+      await store.addEventType(newEventType.value);
+      // if null then conflict with name
+      newEventType.value = '';
     }
 
     function editType(event: FG.EventType) {
-      dialogOpen.value = true;
+      edittype.value = true;
       actualEvent.value = event;
     }
 
-    function saveChanges() {
-      if (dialogInput.value === null || dialogInput.value.validate())
-        store.renameEventType(actualEvent.value.id, newEventName.value).then(() => discardChanges());
+    async function saveChanges() {
+      try {
+        await store.renameEventType(actualEvent.value.id, newEventName.value);
+      } finally {
+        discardChanges();
+      }
     }
 
     function discardChanges() {
       actualEvent.value = emptyEvent;
       newEventName.value = '';
-      dialogOpen.value = false;
+      edittype.value = false;
     }
 
     async function deleteType(id: number) {
@@ -137,19 +107,16 @@ export default defineComponent({
     }
 
     return {
-      actualEvent,
-      addType,
       columns,
-      deleteType,
-      dialogInput,
-      dialogOpen,
-      discardChanges,
-      editType,
-      input,
       rows,
-      rules,
+      addType,
       newEventType,
+      deleteType,
+      edittype,
+      editType,
+      actualEvent,
       newEventName,
+      discardChanges,
       saveChanges,
     };
   },

src/components/overview/AgendaView.vue

@@ -108,7 +108,7 @@ export default defineComponent({
     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)
+      calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
     );
     const events = ref<Agendas>({});
     const editor = ref<FG.Event | undefined>(undefined);

src/pages/Management.vue

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