Files
memberApp/src/vueLib/tables/events/EventsTable.ts
2025-11-29 15:55:44 +01:00

99 lines
2.1 KiB
TypeScript

import { appApi } from 'src/boot/axios';
import { ref, computed } from 'vue';
import type { Events } from 'src/vueLib/models/event';
import { useNotify } from 'src/vueLib/general/useNotify';
import { i18n } from 'boot/lang';
import MenuComponent from '../components/MenuComponent.vue';
import ClickableComponent from '../components/ClickableComponent.vue';
export function useEventTable() {
const Events = ref<Events>([]);
const pagination = ref({
sortBy: 'firstName',
descending: false,
page: 1,
rowsPerPage: 20,
});
const columns = computed(() => [
{
name: 'name',
align: 'left' as const,
label: i18n.global.t('name'),
field: 'name',
sortable: true,
component: ClickableComponent,
},
{
name: 'attendees',
align: 'center' as const,
label: i18n.global.t('attendees'),
field: 'attendees',
sortable: true,
},
{
name: 'day',
align: 'left' as const,
label: i18n.global.t('day'),
field: 'day',
sortable: true,
component: ClickableComponent,
},
{
name: 'date',
align: 'left' as const,
label: i18n.global.t('dateAndTime'),
field: 'date',
sortable: true,
component: ClickableComponent,
},
{
name: 'option',
align: 'center' as const,
label: '',
field: 'option',
icon: 'option',
component: MenuComponent,
},
]);
const { NotifyResponse } = useNotify();
const loading = ref(false);
//updates Event list from database
function updateEvents() {
loading.value = true;
appApi
.get('events')
.then((resp) => {
if (resp.data === null) {
Events.value = [];
return;
}
Events.value = resp.data as Events;
if (Events.value === null) {
Events.value = [];
return;
}
})
.catch((err) => {
NotifyResponse(err, 'error');
})
.finally(() => {
loading.value = false;
});
}
return {
Events,
pagination,
columns,
loading,
updateEvents,
};
}