64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
|
|
<q-card>
|
|
<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-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
|
|
</q-tabs>
|
|
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="attendance">
|
|
<AttendeesTable :event="localEvent!" v-on:update="updateTable" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="noneAttendees">
|
|
<MembersTable
|
|
add-attendees
|
|
:compare-members="attendees"
|
|
v-on:update-event="updateTable"
|
|
:event-id="localEvent?.id ?? 0"
|
|
/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</DialogFrame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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';
|
|
|
|
const emit = defineEmits(['update']);
|
|
|
|
const dialog = ref();
|
|
const localEvent = ref<Event>();
|
|
const tab = ref('attendance');
|
|
const { attendees, updateAttendees } = useAttendeesTable();
|
|
|
|
const open = (event: Event) => {
|
|
localEvent.value = event;
|
|
attendees.value = event.attendees ?? [];
|
|
dialog.value.open();
|
|
};
|
|
|
|
async function updateTable() {
|
|
await updateAttendees();
|
|
emit('update');
|
|
}
|
|
|
|
defineExpose({ open });
|
|
</script>
|