<template>
  <q-page>
    <MembersTable />
    <DialogFrame ref="dialog" header-title="Test Frame">
      <MembersTable ref="memberDialog" />
      <q-btn @click="getSelection">Get Selected</q-btn>
    </DialogFrame>
    <DialogFrame ref="uploadDialog" header-title="Test Frame">
      <MembersTable ref="memberDialog" />
      <q-btn @click="getSelection">Get Selected</q-btn>
    </DialogFrame>
    <div class="row">
      <q-btn @click="open">Click Me</q-btn>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
import { ref } from 'vue';
import type { MemberDialog } from 'src/vueLib/tables/members/MembersTable.vue';

const dialog = ref();
const memberDialog = ref<MemberDialog>();

const open = () => dialog.value?.open();

function getSelection() {
  const selected = memberDialog.value?.getSelected();
  if (selected === undefined) return;
  console.log(65, selected[0]?.id);
}
</script>
