429 lines
12 KiB
TypeScript
429 lines
12 KiB
TypeScript
import { appApi } from 'src/boot/axios';
|
|
import { ref, computed } from 'vue';
|
|
import type { Member, Members } from 'src/vueLib/models/member';
|
|
import { useNotify } from 'src/vueLib/general/useNotify';
|
|
import { i18n } from 'boot/lang';
|
|
import { useResponsibleTable } from '../responsible/ResponsibleTable';
|
|
import { appName } from 'src/vueLib/models/settings';
|
|
import { useGroupTable } from '../group/GroupTable';
|
|
import IconComponent from '../components/IconComponent.vue';
|
|
import SearchableSelectComponent from '../components/SearchableSelect.vue';
|
|
import ClickableComponent from '../components/ClickableComponent.vue';
|
|
import MenuComponent from '../components/MenuComponent.vue';
|
|
|
|
export function useMemberTable() {
|
|
const allMembers = ref<Members>([]);
|
|
const filteredMembers = ref<Members>([]);
|
|
const filterList = ref<
|
|
{
|
|
field: keyof Member;
|
|
keys: string[];
|
|
}[]
|
|
>();
|
|
const { responsibles, responsibleMember, updateResponsibles } = useResponsibleTable();
|
|
const { groups, updateGroups } = useGroupTable();
|
|
|
|
const pagination = ref({
|
|
sortBy: 'firstName',
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: 20,
|
|
});
|
|
|
|
//add enabling of each columns
|
|
const enabledColumns = ref<Record<string, boolean>>({
|
|
cake: true,
|
|
firstName: true,
|
|
lastName: true,
|
|
birthday: true,
|
|
age: true,
|
|
address: true,
|
|
comment: true,
|
|
town: true,
|
|
zip: true,
|
|
phone: true,
|
|
email: true,
|
|
group: true,
|
|
responsible: true,
|
|
firstVisit: true,
|
|
lastVisit: true,
|
|
option: true,
|
|
test: true,
|
|
});
|
|
|
|
const columns = computed(() =>
|
|
[
|
|
{
|
|
name: 'cake',
|
|
align: 'center' as const,
|
|
label: '',
|
|
field: 'cake',
|
|
icon: 'cake',
|
|
component: IconComponent,
|
|
},
|
|
{
|
|
name: 'firstName',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('prename'),
|
|
field: 'firstName',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'lastName',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('lastName'),
|
|
field: 'lastName',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'birthday',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('birthday'),
|
|
field: 'birthday',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'age',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('age'),
|
|
field: 'age',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'comment',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('comment'),
|
|
field: 'comment',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'address',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('address'),
|
|
field: 'address',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'town',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('town'),
|
|
field: 'town',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'zip',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('zipCode'),
|
|
field: 'zip',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'phone',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('phone'),
|
|
field: 'phone',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'email',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('email'),
|
|
field: 'email',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'group',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('group'),
|
|
field: 'group',
|
|
sortable: true,
|
|
component: SearchableSelectComponent,
|
|
},
|
|
{
|
|
name: 'responsible',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('responsible'),
|
|
field: 'responsible',
|
|
sortable: true,
|
|
component: SearchableSelectComponent,
|
|
},
|
|
{
|
|
name: 'firstVisit',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('firstVisit'),
|
|
field: 'firstVisit',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'lastVisit',
|
|
align: 'left' as const,
|
|
label: i18n.global.t('lastVisit'),
|
|
field: 'lastVisit',
|
|
sortable: true,
|
|
component: ClickableComponent,
|
|
},
|
|
{
|
|
name: 'option',
|
|
align: 'center' as const,
|
|
label: '',
|
|
field: 'option',
|
|
icon: 'option',
|
|
component: MenuComponent,
|
|
},
|
|
].filter((c) => enabledColumns.value[c.name]),
|
|
);
|
|
|
|
const { NotifyResponse } = useNotify();
|
|
|
|
const loading = ref(false);
|
|
|
|
function calculateAge(birthDateString: string) {
|
|
if (birthDateString === undefined) return 0;
|
|
const [day, month, year] = birthDateString.split('.').map(Number); // for format "1.2.2000"
|
|
if (year === undefined || month === undefined || day === undefined) return 0;
|
|
const birthDate = new Date(year, month - 1, day); // month is 0-based
|
|
|
|
const today = new Date();
|
|
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
|
|
// Check if birthday has occurred yet this year
|
|
const hasBirthdayPassed =
|
|
today.getMonth() > birthDate.getMonth() ||
|
|
(today.getMonth() === birthDate.getMonth() && today.getDate() >= birthDate.getDate());
|
|
|
|
if (!hasBirthdayPassed) {
|
|
age--;
|
|
}
|
|
|
|
return age;
|
|
}
|
|
|
|
//isThreeDaysBeforeAnnualDate check if upcoming date is less than 3 days from now
|
|
function isXDaysBeforeAnnualDate(dateString: string, before: number) {
|
|
if (dateString === undefined) return;
|
|
const [day, month] = dateString.split('.').map(Number);
|
|
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0);
|
|
|
|
const annualDate = new Date(today.getFullYear(), month ? month - 1 : 0, day);
|
|
annualDate.setHours(0, 0, 1);
|
|
|
|
const xDaysBefore = new Date(annualDate);
|
|
xDaysBefore.setDate(annualDate.getDate() - before);
|
|
|
|
return today >= xDaysBefore && today <= annualDate;
|
|
}
|
|
|
|
function getRowClass(row: Member) {
|
|
if (!row.birthday) return '';
|
|
if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
|
|
return 'bg-red-2 text-red-10';
|
|
} else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
|
|
return 'bg-green-2 text-green-10';
|
|
} else if (isXDaysBeforeAnnualDate(row.birthday, 8)) {
|
|
return 'bg-amber-2 text-amber-10';
|
|
}
|
|
return '';
|
|
}
|
|
|
|
//updates member list from database
|
|
async function updateMembers(filter?: Members, filterbyName?: boolean) {
|
|
loading.value = true;
|
|
|
|
await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
|
|
await updateGroups().catch((err) => NotifyResponse(err, 'error'));
|
|
await appApi
|
|
.get('members')
|
|
.then((resp) => {
|
|
if (resp.data === null) {
|
|
allMembers.value = [];
|
|
return;
|
|
}
|
|
allMembers.value = resp.data as Members;
|
|
if (allMembers.value === null) {
|
|
allMembers.value = [];
|
|
return;
|
|
}
|
|
allMembers.value.forEach((member) => {
|
|
// remove responsible of member if it does not exist in responsible list any longer
|
|
if (!responsibles.value.some((r) => r.id === member.responsible?.id)) {
|
|
delete member.responsible;
|
|
}
|
|
|
|
//calculte years if a birth date is entered
|
|
if (member.birthday) {
|
|
member.age = String(calculateAge(member.birthday));
|
|
}
|
|
});
|
|
})
|
|
|
|
.catch((err) => {
|
|
NotifyResponse(err, 'error');
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
//filter same members out so list is shorter
|
|
filteredMembers.value = allMembers.value;
|
|
if (filter) {
|
|
filteredMembers.value = filteredMembers.value.filter(
|
|
(m1) =>
|
|
!filter.some((m2) => {
|
|
if (filterbyName) {
|
|
return m1.firstName === m2.firstName && m1.lastName === m2.lastName;
|
|
}
|
|
return m1.id === m2.id;
|
|
}),
|
|
);
|
|
}
|
|
|
|
//second filter
|
|
const list = filterList.value ?? [];
|
|
if (filterList.value && filterList.value.length > 0) {
|
|
filteredMembers.value = filteredMembers.value.filter((member) =>
|
|
list.every((filterItem) => {
|
|
const keys = filterItem.keys ?? [];
|
|
if (keys.includes('null')) return true;
|
|
if (keys.length === 0) return true;
|
|
|
|
const value = member[filterItem.field];
|
|
|
|
if (value === undefined || value === null) {
|
|
return keys.includes('None');
|
|
}
|
|
if (typeof value === 'number') {
|
|
return keys.includes(value.toString());
|
|
}
|
|
if (typeof value === 'object') {
|
|
if ('name' in value) {
|
|
return keys.includes(value.name);
|
|
}
|
|
}
|
|
if (typeof value === 'string') {
|
|
return keys.includes(value);
|
|
}
|
|
return false;
|
|
}),
|
|
);
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
function setNewFilter(field: string, ...keys: string[]) {
|
|
filterList.value = [
|
|
{
|
|
field: field as keyof Member,
|
|
keys: keys.flat().map((k) => String(k)),
|
|
},
|
|
];
|
|
}
|
|
|
|
function disableColumns(...columns: string[]) {
|
|
columns.forEach((col) => {
|
|
if (col in enabledColumns.value) {
|
|
enabledColumns.value[col] = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function exportCsv() {
|
|
const comma = ';';
|
|
// Extract only columns that have a field (not icons/options)
|
|
const exportableColumns = columns.value.filter(
|
|
(col) => typeof col.field === 'string' && col.field !== 'cake' && col.field !== 'option',
|
|
) as { field: keyof Member; label: string }[];
|
|
|
|
// Build CSV header row
|
|
const header = exportableColumns.map((col) => col.field).join(comma);
|
|
|
|
// Build CSV rows
|
|
const data = allMembers.value.map((member) =>
|
|
exportableColumns
|
|
.map((col) => {
|
|
const value = member[col.field];
|
|
// handle nested objects (e.g. responsible)
|
|
if (typeof value === 'object' && value !== null) {
|
|
if (
|
|
'firstName' in value &&
|
|
'lastName' in value &&
|
|
typeof value.firstName === 'string' &&
|
|
typeof value.lastName === 'string'
|
|
)
|
|
return `"${value.firstName} ${value.lastName}"`;
|
|
return `"${JSON.stringify(value)}"`;
|
|
}
|
|
return `"${value ?? ''}"`;
|
|
})
|
|
.join(comma),
|
|
);
|
|
|
|
// Combine into CSV string
|
|
const csv = [header, ...data].join('\n');
|
|
|
|
// Create blob and trigger download
|
|
const BOM = '\uFEFF';
|
|
const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', i18n.global.t(appName.value) + '.csv');
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
return {
|
|
allMembers,
|
|
filteredMembers,
|
|
responsibles,
|
|
responsibleMember,
|
|
groups,
|
|
pagination,
|
|
columns,
|
|
loading,
|
|
getRowClass,
|
|
updateMembers,
|
|
setNewFilter,
|
|
isXDaysBeforeAnnualDate,
|
|
disableColumns,
|
|
exportCsv,
|
|
};
|
|
}
|
|
|
|
export async function getAllMembers(): Promise<Members> {
|
|
const { NotifyResponse } = useNotify();
|
|
|
|
const allMembers = ref<Members>([]);
|
|
|
|
await appApi
|
|
.get('members')
|
|
.then((resp) => {
|
|
if (resp.data === null) {
|
|
return [];
|
|
}
|
|
allMembers.value = resp.data as Members;
|
|
if (allMembers.value === null) {
|
|
return [];
|
|
}
|
|
})
|
|
|
|
.catch((err) => {
|
|
NotifyResponse(err, 'error');
|
|
});
|
|
|
|
return allMembers.value;
|
|
}
|