add new event and attendance table with automatic now timestamp

src/components/EditOneDialog.vue

@@ -1,17 +1,35 @@
 <template>
   <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
     <div class="row justify-center">
-      <q-input
-        autofocus
-        class="q-ml-md col-6"
-        :label="localTitle"
-        filled
-        v-model="value"
-        @keyup.enter="save"
-      ></q-input>
+      <q-input autofocus :label="localTitle" filled v-model="value" @keyup.enter="save">
+        <template v-if="['firstVisit', 'lastVisit', 'date'].includes(localField)" v-slot:prepend>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+              <q-date v-model="value" mask="YYYY-MM-DD HH:mm:ss">
+                <div class="row items-center justify-end">
+                  <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+        <template v-if="['firstVisit', 'lastVisit', 'date'].includes(localField)" v-slot:append>
+          <q-icon name="access_time" class="cursor-pointer">
+            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+              <q-time with-seconds v-model="value" mask="YYYY-MM-DD HH:mm:ss" format24h>
+                <div class="row items-center justify-end">
+                  <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
+                </div>
+              </q-time>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
     </div>
     <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
     </div>
   </DialogFrame>
 </template>
@@ -22,6 +40,7 @@ import { ref } from 'vue';
 import { appApi } from 'src/boot/axios';
 import type { Member } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
 
 const dialog = ref();
 const localMember = ref();
@@ -34,9 +53,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  queryId: {
-    type: Boolean,
-  },
 });
 
 const emit = defineEmits(['update']);
@@ -52,26 +68,24 @@ function open(label: string, field: string, member: Member) {
 }
 
 function save() {
-  let query = props.endpoint;
-  if (props.queryId) {
-    query += '?id=' + localMember.value.id;
-  }
   let payload = {};
 
   if (value.value === localMember.value[localField.value]) {
     dialog.value.close();
     return;
   }
-  payload = {
-    id: localMember.value.id,
-    [localField.value]: value.value,
-  };
+  payload = [
+    {
+      id: localMember.value.id,
+      [localField.value]: value.value,
+    },
+  ];
 
   appApi
-    .post(query, payload)
-    .then((resp) => {
+    .post(props.endpoint, payload)
+    .then(() => {
       emit('update');
-      NotifyResponse(resp.data);
+      NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })
     .catch((err) => {
@@ -79,5 +93,18 @@ function save() {
     });
 }
 
+function setTimeNow() {
+  const now = new Date();
+
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  value.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
 defineExpose({ open });
 </script>