<script setup>
import { useDialogPluginComponent } from 'quasar';
import DepartmentSummary from './DepartmentSummary.vue';

const $props = defineProps({
    id: {
        type: Number,
        required: true,
    },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>

<template>
    <QDialog ref="dialogRef" @hide="onDialogHide">
        <DepartmentSummary v-if="$props.id" :id="$props.id" />
    </QDialog>
</template>

<style lang="scss">
.q-dialog .summary .header {
    position: sticky;
    z-index: $z-max;
    top: 0;
}
</style>
