add new event and attendance table with automatic now timestamp

src/vueLib/tables/members/MembersTable.ts

@@ -16,101 +16,122 @@ export function useMemberTable() {
     rowsPerPage: 20,
   });
 
-  const columns = computed(() => [
-    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
-    {
-      name: 'firstName',
-      align: 'left' as const,
-      label: i18n.global.t('prename'),
-      field: 'firstName',
-      sortable: true,
-    },
-    {
-      name: 'lastName',
-      align: 'left' as const,
-      label: i18n.global.t('lastName'),
-      field: 'lastName',
-      sortable: true,
-    },
-    {
-      name: 'birthday',
-      align: 'left' as const,
-      label: i18n.global.t('birthday'),
-      field: 'birthday',
-      sortable: true,
-    },
-    {
-      name: 'age',
-      align: 'left' as const,
-      label: i18n.global.t('age'),
-      field: 'age',
-      sortable: true,
-    },
-    {
-      name: 'address',
-      align: 'left' as const,
-      label: i18n.global.t('address'),
-      field: 'address',
-      sortable: true,
-    },
-    {
-      name: 'town',
-      align: 'left' as const,
-      label: i18n.global.t('town'),
-      field: 'town',
-      sortable: true,
-    },
-    {
-      name: 'zip',
-      align: 'left' as const,
-      label: i18n.global.t('zipCode'),
-      field: 'zip',
-      sortable: true,
-    },
-    {
-      name: 'phone',
-      align: 'left' as const,
-      label: i18n.global.t('phone'),
-      field: 'phone',
-      sortable: true,
-    },
-    {
-      name: 'email',
-      align: 'left' as const,
-      label: i18n.global.t('email'),
-      field: 'email',
-      sortable: true,
-    },
-    {
-      name: 'group',
-      align: 'left' as const,
-      label: i18n.global.t('group'),
-      field: 'group',
-      sortable: true,
-    },
-    {
-      name: 'responsiblePerson',
-      align: 'left' as const,
-      label: i18n.global.t('responsible'),
-      field: 'responsiblePerson',
-      sortable: true,
-    },
-    {
-      name: 'firstVisit',
-      align: 'left' as const,
-      label: i18n.global.t('firstVisit'),
-      field: 'firstVisit',
-      sortable: true,
-    },
-    {
-      name: 'lastVisit',
-      align: 'left' as const,
-      label: i18n.global.t('lastVisit'),
-      field: 'lastVisit',
-      sortable: true,
-    },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
-  ]);
+  //add enabling of each columns
+  const enabledColumns = ref<Record<string, boolean>>({
+    cake: true,
+    firstName: true,
+    lastName: true,
+    birthday: true,
+    age: true,
+    address: false,
+    town: true,
+    zip: true,
+    phone: true,
+    email: true,
+    group: true,
+    responsiblePerson: true,
+    firstVisit: true,
+    lastVisit: true,
+    option: true,
+  });
+
+  const columns = computed(() =>
+    [
+      { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+      {
+        name: 'firstName',
+        align: 'left' as const,
+        label: i18n.global.t('prename'),
+        field: 'firstName',
+        sortable: true,
+      },
+      {
+        name: 'lastName',
+        align: 'left' as const,
+        label: i18n.global.t('lastName'),
+        field: 'lastName',
+        sortable: true,
+      },
+      {
+        name: 'birthday',
+        align: 'left' as const,
+        label: i18n.global.t('birthday'),
+        field: 'birthday',
+        sortable: true,
+      },
+      {
+        name: 'age',
+        align: 'left' as const,
+        label: i18n.global.t('age'),
+        field: 'age',
+        sortable: true,
+      },
+      {
+        name: 'address',
+        align: 'left' as const,
+        label: i18n.global.t('address'),
+        field: 'address',
+        sortable: true,
+      },
+      {
+        name: 'town',
+        align: 'left' as const,
+        label: i18n.global.t('town'),
+        field: 'town',
+        sortable: true,
+      },
+      {
+        name: 'zip',
+        align: 'left' as const,
+        label: i18n.global.t('zipCode'),
+        field: 'zip',
+        sortable: true,
+      },
+      {
+        name: 'phone',
+        align: 'left' as const,
+        label: i18n.global.t('phone'),
+        field: 'phone',
+        sortable: true,
+      },
+      {
+        name: 'email',
+        align: 'left' as const,
+        label: i18n.global.t('email'),
+        field: 'email',
+        sortable: true,
+      },
+      {
+        name: 'group',
+        align: 'left' as const,
+        label: i18n.global.t('group'),
+        field: 'group',
+        sortable: true,
+      },
+      {
+        name: 'responsiblePerson',
+        align: 'left' as const,
+        label: i18n.global.t('responsible'),
+        field: 'responsiblePerson',
+        sortable: true,
+      },
+      {
+        name: 'firstVisit',
+        align: 'left' as const,
+        label: i18n.global.t('firstVisit'),
+        field: 'firstVisit',
+        sortable: true,
+      },
+      {
+        name: 'lastVisit',
+        align: 'left' as const,
+        label: i18n.global.t('lastVisit'),
+        field: 'lastVisit',
+        sortable: true,
+      },
+      { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+    ].filter((c) => enabledColumns.value[c.name]),
+  );
 
   const { NotifyResponse } = useNotify();
 
@@ -197,6 +218,13 @@ export function useMemberTable() {
       });
   }
 
+  function disableColumns(...columns: string[]) {
+    columns.forEach((col) => {
+      if (col in enabledColumns.value) {
+        enabledColumns.value[col] = false;
+      }
+    });
+  }
   return {
     members,
     pagination,
@@ -205,5 +233,6 @@ export function useMemberTable() {
     getRowClass,
     updateMembers,
     isXDaysBeforeAnnualDate,
+    disableColumns,
   };
 }

src/vueLib/tables/members/MembersTable.vue

@@ -9,7 +9,7 @@
       :no-data-label="$t('noDataAvailable')"
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
       :rows="members"
       :columns="columns"
       row-key="id"
@@ -24,7 +24,7 @@
       <template v-slot:top-left>
         <q-btn-group push flat style="color: grey">
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write')"
             dense
             flat
             icon="add"
@@ -33,7 +33,7 @@
             <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
             dense
             flat
             style="color: grey"
@@ -43,7 +43,7 @@
             <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write')"
             dense
             flat
             icon="upload"
@@ -53,9 +53,22 @@
           </q-btn>
         </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-btn
+            v-if="!inProps.addAttendees"
+            flat
+            dense
+            icon="more_vert"
+            @click="openSubmenu = true"
+          />
+          <q-btn v-else dense color="grey-7" flat icon="person" @click="addEventAttendees">
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          </q-btn>
           <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
+              $t('addToEvent')
+            }}</q-item>
             <q-item
+              v-if="user.isPermittedTo('members', 'delete')"
               clickable
               v-close-popup
               @click="openRemoveDialog(...selected)"
@@ -64,7 +77,7 @@
             >
           </q-menu>
         </div>
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
@@ -79,9 +92,9 @@
         <q-td
           :props="props"
           :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('userSettings', 'write') ? 'cursor: pointer' : ''"
+          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
           @click="
-            user.isPermittedTo('userSettings', 'write') &&
+            user.isPermittedTo('members', 'write') &&
             openSingleValueDialog(props.col.label, props.col.name, props.row)
           "
         >
@@ -100,10 +113,7 @@
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
           <q-btn
-            v-if="
-              user.isPermittedTo('userSettings', 'write') ||
-              user.isPermittedTo('userSettings', 'delete')
-            "
+            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
             flat
             dense
             icon="more_vert"
@@ -111,7 +121,7 @@
           />
           <q-menu v-if="openSubmenu" anchor="top right" self="top left">
             <q-item
-              v-if="user.isPermittedTo('userSettings', 'write')"
+              v-if="user.isPermittedTo('members', 'write')"
               clickable
               v-close-popup
               @click="openAllValueDialog(props.row)"
@@ -119,7 +129,7 @@
               >{{ $t('edit') }}</q-item
             >
             <q-item
-              v-if="user.isPermittedTo('userSettings', 'delete')"
+              v-if="user.isPermittedTo('members', 'delete') && !inProps.addAttendees"
               clickable
               v-close-popup
               @click="openRemoveDialog(props.row)"
@@ -151,6 +161,11 @@
     v-on:update-confirm="(val) => removeMember(...val)"
   ></OkDialog>
   <UploadDialog ref="uploadDialog" @update-upload="updateMembers"> </UploadDialog>
+  <AddToEvent
+    ref="addToEventDialog"
+    endpoint="events/add/attendees"
+    v-on:update-event="(val) => updateMemberLastVisit(val)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -163,16 +178,22 @@ import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
 import UploadDialog from 'src/components/UploadDialog.vue';
+import AddToEvent from 'src/components/AddToEvent.vue';
 import { databaseName } from './MembersTable';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import { i18n } from 'src/boot/lang';
 
+const inProps = defineProps({ addAttendees: { type: Boolean }, eventId: { type: Number } });
 export interface MemberDialog {
   getSelected: () => Members;
 }
 
+const emit = defineEmits(['update-event']);
+
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
 const editAllDialog = ref();
+const addToEventDialog = ref();
 const uploadDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
@@ -190,10 +211,28 @@ const {
   getRowClass,
   updateMembers,
   isXDaysBeforeAnnualDate,
+  disableColumns,
 } = useMemberTable();
 
 //load on mounting page
 onMounted(() => {
+  if (inProps.addAttendees) {
+    selectOption.value = true;
+    disableColumns(
+      'birthday',
+      'age',
+      'town',
+      'zip',
+      'email',
+      'address',
+      'phone',
+      'group',
+      'responsiblePerson',
+      'firstVisit',
+      'lastVisit',
+    );
+  }
+
   loading.value = true;
 
   appApi
@@ -260,24 +299,62 @@ function removeMember(...removeMembers: Members) {
     });
 }
 
-//const blinkingId = ref<number | null>(null);
-
-// function triggerBlink(id: number) {
-//   blinkingId.value = id;
-
-//   // Optional: stop blinking after 3 seconds
-//   setTimeout(() => {
-//     blinkingId.value = null;
-//   }, 3000);
-// }
-
-function getSelected(): Members {
-  if (selected.value.length === 0) return [];
-  return selected.value;
+function addToEvent() {
+  addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
+}
+
+async function addEventAttendees() {
+  await appApi
+    .post('events/add/attendees', {
+      id: inProps.eventId,
+      attendees: [...selected.value],
+    })
+    .then(() => {
+      if (selected.value.length > 1) {
+        NotifyResponse(i18n.global.t('attendeeAdded'));
+      } else {
+        NotifyResponse(i18n.global.t('attendeesAdded'));
+      }
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+
+  console.log(56, selected.value);
+  await updateMemberLastVisit(selected.value);
+
+  //update member last last visit
+  console.log(57, selected.value);
+}
+
+async function updateMemberLastVisit(members: Members) {
+  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');
+
+  const dateTimeNow = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  members.forEach((mem) => {
+    mem.lastVisit = dateTimeNow;
+  });
+
+  await appApi
+    .post('members/edit', members)
+    .then(() => {
+      if (members.length > 1) {
+        NotifyResponse(i18n.global.t('membersUpdated'));
+      } else {
+        NotifyResponse(i18n.global.t('memberUpdated'));
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  emit('update-event');
 }
-defineExpose({
-  getSelected,
-});
 </script>
 
 <style>