[permissions] Fixed permission parsing

src/components/management/EventTypes.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <q-dialog v-model="edittype">
+    <q-dialog v-model="dialogOpen">
       <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-input v-model="newEventName" :rules="rules" ref="dialogInput" 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-btn flat color="primary" label="Speichern" :disable="!!dialogInput && !dialogInput.validate()" @click="saveChanges()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -19,10 +19,17 @@
       <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" />
+            <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>
           </template>
           <template #body-cell-actions="props">
             <!-- <q-btn :label="item"> -->
@@ -43,8 +50,10 @@
 </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',
@@ -52,15 +61,24 @@ export default defineComponent({
   setup() {
     const store = useScheduleStore();
     const newEventType = ref('');
-    const edittype = ref(false);
+    const dialogOpen = 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',
@@ -77,29 +95,41 @@ export default defineComponent({
       },
     ];
 
-    async function addType() {
-      await store.addEventType(newEventType.value);
-      // if null then conflict with name
+    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.',
+              });
+          });
     }
 
     function editType(event: FG.EventType) {
-      edittype.value = true;
+      dialogOpen.value = true;
       actualEvent.value = event;
     }
 
-    async function saveChanges() {
-      try {
-        await store.renameEventType(actualEvent.value.id, newEventName.value);
-      } finally {
-        discardChanges();
-      }
+    function saveChanges() {
+      if (dialogInput.value === null || dialogInput.value.validate())
+        store.renameEventType(actualEvent.value.id, newEventName.value).then(() => discardChanges());
     }
 
     function discardChanges() {
       actualEvent.value = emptyEvent;
       newEventName.value = '';
-      edittype.value = false;
+      dialogOpen.value = false;
     }
 
     async function deleteType(id: number) {
@@ -107,16 +137,19 @@ export default defineComponent({
     }
 
     return {
-      columns,
-      rows,
-      addType,
-      newEventType,
-      deleteType,
-      edittype,
-      editType,
       actualEvent,
-      newEventName,
+      addType,
+      columns,
+      deleteType,
+      dialogInput,
+      dialogOpen,
       discardChanges,
+      editType,
+      input,
+      rows,
+      rules,
+      newEventType,
+      newEventName,
       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 v-if="canEditJobTypes" />
+          <JobTypes />
         </q-tab-panel>
       </q-tab-panels>
     </q-page>
@@ -58,18 +58,11 @@ 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[] = [
+    const tabs = computed(() => [
       { name: 'create', label: 'Veranstaltungen' },
-      { name: 'eventtypes', label: 'Veranstaltungsarten' },
-      { name: 'jobtypes', label: 'Dienstarten' },
-    ];
+      ...(hasPermission(PERMISSIONS.JOB_TYPE) ? [{ name: 'jobtypes', label: 'Dienstarten' }] : []),
+      ...(hasPermission(PERMISSIONS.EVENT_TYPE) ? [{ name: 'eventtypes', label: 'Veranstaltungsarten' }] : [])
+    ]);
 
     const drawer = ref<boolean>(false);
 
@@ -85,7 +78,6 @@ export default defineComponent({
     const tab = ref<string>('create');
 
     return {
-      canEditJobTypes,
       showDrawer,
       tab,
       tabs,