first commit

src/components/EditOneDialog.vue

@@ -0,0 +1,207 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
+    <div class="row justify-center">
+      <q-input
+        autofocus
+        class="q-ml-md col-6"
+        :label="localTitle"
+        filled
+        v-model="value"
+        @keyup.enter="save"
+      ></q-input>
+    </div>
+    <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 dialog = ref();
+const localMember = ref();
+const localTitle = ref('');
+const localField = ref('');
+const value = ref();
+
+const emit = defineEmits(['update-member']);
+const { NotifyResponse } = useNotify();
+
+function open(label: string, field: string, member: Member) {
+  localTitle.value = label;
+  localField.value = field;
+  localMember.value = member;
+
+  switch (field) {
+    case 'firstName':
+      value.value = member.firstName;
+      break;
+    case 'lastName':
+      value.value = member.lastName;
+      break;
+    case 'birthday':
+      value.value = member.birthday;
+      break;
+    case 'address':
+      value.value = member.address;
+      break;
+    case 'town':
+      value.value = member.town;
+      break;
+    case 'zip':
+      value.value = member.zip;
+      break;
+    case 'phone':
+      value.value = member.phone;
+      break;
+    case 'email':
+      value.value = member.email;
+      break;
+    case 'group':
+      value.value = member.group;
+      break;
+    case 'responsiblePerson':
+      value.value = member.responsiblePerson;
+      break;
+    case 'firstVisit':
+      value.value = member.firstVisit;
+      break;
+    case 'lastVisit':
+      value.value = member.lastVisit;
+      break;
+  }
+  dialog.value?.open();
+}
+
+function save() {
+  const query = 'secure/members/edit?id=' + localMember.value.id;
+  let payload = {};
+
+  switch (localField.value) {
+    case 'firstName':
+      if (value.value === localMember.value.firstName) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        firstName: value.value,
+      };
+      break;
+    case 'lastName':
+      if (value.value === localMember.value.lastName) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        lastName: value.value,
+      };
+      break;
+    case 'birthday':
+      if (value.value === localMember.value.birthday) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        birthday: value.value,
+      };
+      break;
+    case 'address':
+      if (value.value === localMember.value.address) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        address: value.value,
+      };
+      break;
+    case 'town':
+      if (value.value === localMember.value.town) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        town: value.value,
+      };
+      break;
+    case 'zip':
+      if (value.value === localMember.value.zip) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        zip: value.value,
+      };
+      break;
+    case 'phone':
+      if (value.value === localMember.value.phone) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        phone: value.value,
+      };
+      break;
+    case 'email':
+      if (value.value === localMember.value.email) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        email: value.value,
+      };
+      break;
+    case 'group':
+      if (value.value === localMember.value.group) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        group: value.value,
+      };
+      break;
+    case 'responsiblePerson':
+      if (value.value === localMember.value.responsiblePerson) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        responsiblePerson: value.value,
+      };
+      break;
+    case 'firstVisit':
+      if (value.value === localMember.value.firstVisit) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        firstVisit: value.value,
+      };
+      break;
+    case 'lastVisit':
+      if (value.value === localMember.value.lastVisit) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        lastVisit: value.value,
+      };
+      break;
+  }
+  appApi
+    .post(query, payload)
+    .then(() => {
+      emit('update-member', '');
+      dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+}
+
+defineExpose({ open });
+</script>