127 lines
3.7 KiB
Vue
127 lines
3.7 KiB
Vue
<template>
|
|
<DialogFrame
|
|
ref="dialog"
|
|
:header-title="$t('attendees')"
|
|
:width="700"
|
|
:height="600"
|
|
:inner-padding="0"
|
|
>
|
|
<q-card>
|
|
<!-- tabs declaration in header-->
|
|
<q-tabs
|
|
v-model="tab"
|
|
dense
|
|
class="text-grey"
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
align="justify"
|
|
narrow-indicator
|
|
>
|
|
<q-tab no-caps name="attendance" :label="$t('attendees')"
|
|
><q-badge color="primary" text-color="primary-text" floating transparent>{{
|
|
attendees.length
|
|
}}</q-badge></q-tab
|
|
>
|
|
|
|
<q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')"
|
|
><q-badge color="primary" text-color="primary-text" floating transparent>{{
|
|
missingAttendanceAmount
|
|
}}</q-badge></q-tab
|
|
>
|
|
</q-tabs>
|
|
|
|
<q-separator />
|
|
|
|
<!--tab of attenting members-->
|
|
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="attendance" style="padding: 0px">
|
|
<AttendeesTable
|
|
:event="localEvent!"
|
|
:event-array="eA"
|
|
v-on:update="(val) => updateTable(val)"
|
|
/>
|
|
</q-tab-panel>
|
|
<!--tab of missing attenting members-->
|
|
<q-tab-panel name="noneAttendees" style="padding: 0px">
|
|
<MembersTable
|
|
add-attendees
|
|
:compare-members="attendees"
|
|
v-on:update-event="(val) => updateTable(val)"
|
|
:event-id="localEvent?.id ?? 0"
|
|
/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</DialogFrame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// imports
|
|
import AttendeesTable from './AttendeesTable.vue';
|
|
import MembersTable from '../members/MembersTable.vue';
|
|
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
|
|
import type { Event } from 'src/vueLib/models/event';
|
|
import { ref } from 'vue';
|
|
import { useAttendeesTable } from './AttendeesTable';
|
|
import { useMemberTable } from '../members/MembersTable';
|
|
import { getLocalPageDefaults } from 'src/localstorage/localStorage';
|
|
|
|
//use constants and function of imports
|
|
const { attendees, updateAttendees } = useAttendeesTable();
|
|
const { setNewFilter, filteredMembers, updateMembers } = useMemberTable();
|
|
|
|
// declare emits
|
|
const emit = defineEmits(['update']);
|
|
|
|
// declarations
|
|
const dialog = ref();
|
|
const localEvent = ref<Event>();
|
|
const missingAttendanceAmount = ref(0);
|
|
const attendanceAmount = ref(0);
|
|
const eA = ref(0);
|
|
const tab = ref('attendance');
|
|
|
|
// opens attendace dialog of event
|
|
const open = async (eventArray: number, event: Event) => {
|
|
// local declarations
|
|
localEvent.value = event;
|
|
attendanceAmount.value = event.attendees.length ?? [];
|
|
eA.value = eventArray;
|
|
|
|
// get attendance
|
|
await updateAttendees(eventArray);
|
|
//get missing attendance from member updateTable
|
|
await updateMembers(event.attendees);
|
|
|
|
// set custom filter
|
|
const defaults = getLocalPageDefaults('attendance');
|
|
setNewFilter(defaults?.filteredColumn || '', ...(defaults?.filteredValue ?? []));
|
|
|
|
// set amount of missing attendace
|
|
missingAttendanceAmount.value = filteredMembers.value.length;
|
|
|
|
//open atttendance dialog
|
|
dialog.value.open();
|
|
};
|
|
|
|
//updates amount of table display and both tables
|
|
async function updateTable(amount?: number) {
|
|
// check wether amount is given and if it adds or substracts amount
|
|
if (amount && amount < 0) {
|
|
missingAttendanceAmount.value -= amount;
|
|
} else if (amount) {
|
|
missingAttendanceAmount.value = amount;
|
|
}
|
|
|
|
// update attendace table
|
|
await updateAttendees(eA.value);
|
|
// update for amoutn display in tab
|
|
if (localEvent.value) localEvent.value.attendees = attendees.value;
|
|
//emit to update event table
|
|
emit('update');
|
|
}
|
|
|
|
defineExpose({ open });
|
|
</script>
|