memberApp/src/components/MemberEditAllDialog.vue

<template>
  <DialogFrame
    ref="dialog"
    :header-title="
      newMember
        ? $t('addNewMember')
        : $t('edit') + ' ' + localMember.firstName + ' ' + localMember.lastName
    "
    :height="600"
    :width="500"
  >
    <q-form ref="form">
      <div class="row justify-center q-gutter-md">
        <q-input
          class="q-ml-md col-5 required"
          :label="$t('prename')"
          filled
          :rules="[(val) => !!val || $t('prenameIsRequired')]"
          v-model="localMember.firstName"
          autofocus
        ></q-input>
        <q-input
          class="q-ml-md col-5 required"
          :label="$t('lastName')"
          filled
          :rules="[(val) => !!val || $t('lastNameIsRequired')]"
          v-model="localMember.lastName"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('birthday')"
          filled
          v-model="localMember.birthday"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('address')"
          filled
          v-model="localMember.address"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('town')"
          filled
          v-model="localMember.town"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('zipCode')"
          filled
          v-model="localMember.zip"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('phone')"
          filled
          v-model="localMember.phone"
        ></q-input>
        <q-input
          class="q-ml-md col-5"
          :label="$t('email')"
          filled
          v-model="localMember.email"
        ></q-input>
        <q-select
          class="q-ml-md col-5"
          :label="$t('group')"
          :options="props.group"
          filled
          emit-value
          map-options
          option-label="name"
          v-model="localMember.group"
        ></q-select>
        <q-select
          class="q-ml-md col-5"
          :label="$t('responsible')"
          filled
          :options="props.responsibles"
          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
          v-model="localMember.responsible"
        ></q-select>
        <q-input
          v-if="!newMember"
          class="q-ml-md col-11"
          :label="$t('firstVisit')"
          filled
          v-model="localMember.firstVisit"
        ></q-input>
        <q-input
          v-if="!newMember"
          class="q-ml-md col-11"
          :label="$t('lastVisit')"
          filled
          v-model="localMember.lastVisit"
        ></q-input>
      </div>
    </q-form>
    <div class="row justify-center">
      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
    </div>
  </DialogFrame>
</template>

<script setup lang="ts">
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
import { type PropType, ref } from 'vue';
import { appApi } from 'src/boot/axios';
import type { Member, Members } from 'src/vueLib/models/member';
import { useNotify } from 'src/vueLib/general/useNotify';
import { i18n } from 'src/boot/lang';
import type { Responsibles } from 'src/vueLib/models/responsible';

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

const props = defineProps({
  responsibles: {
    type: Object as PropType<Responsibles>,
  },
  group: {
    type: Object as PropType<Members>,
  },
});

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

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();
}

async function save() {
  const valid = await form.value.validate();
  if (!valid) {
    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
    return;
  }

  let query = 'members/edit';
  let payload = JSON.stringify([localMember.value]);
  if (newMember.value) {
    query = 'members/add';
    payload = JSON.stringify(localMember.value);
  }

  await appApi
    .post(query, payload)
    .then(() => {
      emit('update');
      NotifyResponse(i18n.global.t('memberUpdated'));
      dialog.value.close();
    })
    .catch((err) => NotifyResponse(err, 'error'));
}

defineExpose({ open });
</script>

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