[management] Improved eventtypes management

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" />
+            <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 #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() {
+    function addType() {
-      await store.addEventType(newEventType.value);
+      if (input.value === null || input.value.validate())
-      // if null then conflict with name
+        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() {
+    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() {
       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,
     };
   },