memberApp/src/components/ResponsibleEditAllDialog.vue

<template>
  <DialogFrame
    ref="dialog"
    :header-title="
      newMember
        ? $t('addNewResponsible')
        : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
    "
    :height="600"
    :width="500"
  >
    <q-form ref="form">
      <MembersTable add-responsible v-on:update-event="emit('updated')" />
    </q-form>
  </DialogFrame>
</template>

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

const dialog = ref();
const form = ref();
const newMember = ref(false);
const localMember = ref<Member>({
  id: 0,
  firstName: '',
  lastName: '',
});

const emit = defineEmits(['updated']);

function open(member: Member | null) {
  if (member === undefined) {
    return;
  }

  if (member !== null) {
    localMember.value = { ...member };
    newMember.value = false;
  } else {
    localMember.value = {
      id: 0,
      firstName: '',
      lastName: '',
    };
    newMember.value = true;
  }

  dialog.value?.open();
}

defineExpose({ open });
</script>

<style>
.required .q-field__label::after {
  content: ' *';
  color: red;
}
</style>