add new user and role table in app (in progress)

src/components/MemberEditAllDialog.vue

@@ -0,0 +1,186 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="
+      newMember ? $t('addNewMember') : '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 required"
+          :label="$t('birthday')"
+          :rules="[(val) => !!val || $t('birthdayIsRequired')]"
+          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-input
+          class="q-ml-md col-5"
+          :label="$t('group')"
+          filled
+          v-model="localMember.group"
+        ></q-input>
+        <q-input
+          class="q-ml-md col-5"
+          :label="$t('responsible')"
+          filled
+          v-model="localMember.responsiblePerson"
+        ></q-input>
+        <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">Save</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Member } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const form = ref();
+const newMember = ref(false);
+const localMember = ref<Member>({
+  id: 0,
+  firstName: '',
+  lastName: '',
+  birthday: '',
+  age: '',
+  address: '',
+  town: '',
+  zip: '',
+  phone: '',
+  email: '',
+  group: '',
+  responsiblePerson: '',
+  firstVisit: '',
+  lastVisit: '',
+});
+
+const emit = defineEmits(['update-member']);
+
+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: '',
+      birthday: '',
+      age: '',
+      address: '',
+      town: '',
+      zip: '',
+      phone: '',
+      email: '',
+      group: '',
+      responsiblePerson: '',
+      firstVisit: '',
+      lastVisit: '',
+    };
+    newMember.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'secure/members/edit?id=' + localMember.value.id;
+  if (newMember.value) {
+    query = 'secure/members/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localMember.value))
+    .then(() => {
+      emit('update-member');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>