add new event and attendance table with automatic now timestamp

src/components/AddToEvent.vue

@@ -0,0 +1,91 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="localTitle">
+    <div class="row justify-center">
+      <q-select
+        autofocus
+        class="q-ml-md col-6"
+        :label="$t('event')"
+        filled
+        :options="events"
+        option-label="name"
+        option-value="id"
+        v-model="selected"
+        @keyup.enter="save"
+        map-options
+        emit-value
+      ></q-select>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+import type { Event, Events } from 'src/vueLib/models/event';
+import type { Members } from 'src/vueLib/models/member';
+import { useAttendeesTable } from 'src/vueLib/tables/attendees/AttendeesTable';
+import { useEventTable } from 'src/vueLib/tables/events/EventsTable';
+
+const dialog = ref();
+const localTitle = ref('');
+const events = ref<Events>([{ id: -1, name: i18n.global.t('add'), attendees: [] }]);
+const selected = ref<Event>({ id: -1, name: i18n.global.t('add'), attendees: [] });
+const localMembers = ref<Members>([]);
+const { updateAttendees } = useAttendeesTable();
+const { updateEvents } = useEventTable();
+
+const props = defineProps({
+  endpoint: {
+    type: String,
+    required: true,
+  },
+  queryId: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update-event']);
+const { NotifyResponse } = useNotify();
+
+function open(title: string, members: Members) {
+  localTitle.value = title;
+  localMembers.value = members;
+
+  events.value = [{ id: -1, name: i18n.global.t('add'), attendees: [] }];
+  appApi
+    .get('events')
+    .then((resp) => {
+      events.value.push(...resp.data);
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+  dialog.value?.open();
+}
+
+async function save() {
+  await appApi
+    .post(props.endpoint, {
+      id: selected.value,
+      attendees: localMembers.value,
+    })
+    .then(() => {
+      emit('update-event', localMembers.value);
+      NotifyResponse(i18n.global.t('eventAdded'));
+      dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+  await updateAttendees();
+  updateEvents();
+}
+
+defineExpose({ open });
+</script>