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

src/components/EditAllDialog.vue

@@ -1,139 +0,0 @@
-<template>
-  <DialogFrame
-    ref="dialog"
-    :header-title="
-      newMember ? 'Add new Member' : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
-    "
-    :height="600"
-    :width="500"
-  >
-    <div class="row justify-center q-gutter-md">
-      <q-input
-        class="q-ml-md col-5"
-        label="First Name"
-        filled
-        v-model="localMember.firstName"
-        autofocus
-      ></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Last Name"
-        filled
-        v-model="localMember.lastName"
-      ></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Birthday"
-        filled
-        v-model="localMember.birthday"
-      ></q-input>
-      <q-input class="q-ml-md col-5" label="Address" filled v-model="localMember.address"></q-input>
-      <q-input class="q-ml-md col-5" label="Town" filled v-model="localMember.town"></q-input>
-      <q-input class="q-ml-md col-5" label="Zip Code" filled v-model="localMember.zip"></q-input>
-      <q-input class="q-ml-md col-5" label="Phone" filled v-model="localMember.phone"></q-input>
-      <q-input class="q-ml-md col-5" label="E-Mail" filled v-model="localMember.email"></q-input>
-      <q-input class="q-ml-md col-5" label="Group" filled v-model="localMember.group"></q-input>
-      <q-input
-        class="q-ml-md col-5"
-        label="Responsible"
-        filled
-        v-model="localMember.responsiblePerson"
-      ></q-input>
-      <q-input
-        v-if="!newMember"
-        class="q-ml-md col-11"
-        label="First Visit"
-        filled
-        v-model="localMember.firstVisit"
-      ></q-input>
-      <q-input
-        v-if="!newMember"
-        class="q-ml-md col-11"
-        label="Last Visit"
-        filled
-        v-model="localMember.lastVisit"
-      ></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 { NotifyResponse } = useNotify();
-const dialog = 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();
-}
-
-function save() {
-  let query = 'secure/members/edit?id=' + localMember.value.id;
-  if (newMember.value) {
-    query = 'ecure/members/add';
-  }
-
-  appApi
-    .post(query, JSON.stringify(localMember.value))
-    .then(() => {
-      emit('update-member', '');
-      dialog.value.close();
-    })
-    .catch((err) => NotifyResponse(err, 'error'));
-}
-
-defineExpose({ open });
-</script>

src/components/EditOneDialog.vue

@@ -27,9 +27,9 @@ const dialog = ref();
 const localMember = ref();
 const localTitle = ref('');
 const localField = ref('');
-const value = ref();
+const value = ref('');
 
-const emit = defineEmits(['update-member']);
+const emit = defineEmits(['update']);
 const { NotifyResponse } = useNotify();
 
 function open(label: string, field: string, member: Member) {
@@ -37,44 +37,7 @@ function open(label: string, field: string, member: Member) {
   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;
-  }
+  value.value = localMember.value[field];
   dialog.value?.open();
 }
 
@@ -82,120 +45,18 @@ 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;
+  if (value.value === localMember.value[localField.value]) {
+    dialog.value.close();
+    return;
   }
+  payload = {
+    [localField.value]: value.value,
+  };
+
   appApi
     .post(query, payload)
     .then(() => {
-      emit('update-member', '');
+      emit('update', '');
       dialog.value.close();
     })
     .catch((err) => {

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>

src/components/RoleEditAllDialog.vue

@@ -0,0 +1,83 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newRole ? $t('addNewRole') : 'Edit ' + localRole.role"
+    :height="600"
+    :width="500"
+  >
+    <div class="row justify-center q-gutter-md">
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('role')"
+        filled
+        :rules="[(val) => !!val || $t('roleIsRequired')]"
+        v-model="localRole.role"
+        autofocus
+      ></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 { Role } from 'src/vueLib/models/roles';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newRole = ref(false);
+const localRole = ref<Role>({
+  role: '',
+  rights: null,
+});
+
+const emit = defineEmits(['update-role']);
+
+function open(role: Role | null) {
+  if (role === undefined) {
+    return;
+  }
+
+  if (role !== null) {
+    localRole.value = role;
+    newRole.value = false;
+  } else {
+    localRole.value = {
+      role: '',
+      rights: null,
+    };
+    newRole.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+function save() {
+  let query = 'secure/roles/edit?id=' + localRole.value.id;
+  if (newRole.value) {
+    query = 'secure/roles/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localRole.value))
+    .then(() => {
+      emit('update-role');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>

src/components/UploadDialog.vue

@@ -4,7 +4,7 @@
       <div class="row">
         <q-uploader
           style="max-width: 300px"
-          :url="`http://localhost:` + portApp + `/api/members/import/csv`"
+          :url="`https://0.0.0.0:` + portApp + `/api/members/import/csv`"
           label="Import CSV"
           multiple
           accept=".csv"

src/components/UserEditAllDialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newUser ? $t('addNewUser') : 'Edit ' + localUser.user"
+    :height="600"
+    :width="500"
+  >
+    <div class="row justify-center q-gutter-md">
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('user')"
+        filled
+        :rules="[(val) => !!val || $t('userIsRequired')]"
+        v-model="localUser.user"
+        autofocus
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('email')"
+        filled
+        :rules="[(val) => !!val || $t('emailIsRequired')]"
+        v-model="localUser.email"
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5 required"
+        :label="$t('role')"
+        filled
+        :rules="[(val) => !!val || $t('roleIsRequired')]"
+        v-model="localUser.role"
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5"
+        :label="$t('expires')"
+        filled
+        v-model="localUser.expires"
+      ></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 { User } from 'src/vueLib/models/users';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newUser = ref(false);
+const localUser = ref<User>({
+  user: '',
+  email: '',
+  role: '',
+  expires: '',
+});
+
+const emit = defineEmits(['update-user']);
+
+function open(user: User | null) {
+  if (user === undefined) {
+    return;
+  }
+
+  if (user !== null) {
+    localUser.value = user;
+    newUser.value = false;
+  } else {
+    localUser.value = {
+      user: '',
+      email: '',
+      role: '',
+      expires: '',
+    };
+    newUser.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+function save() {
+  let query = 'secure/users/edit?id=' + localUser.value.id;
+  if (newUser.value) {
+    query = 'secure/users/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localUser.value))
+    .then(() => {
+      emit('update-user');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>