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

src/assets/lang/de-CH.yaml

@@ -1,6 +1,6 @@
 language: Sprach
 prename: Vorname
-lastname: Nachname
+lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
@@ -46,3 +46,17 @@ resetColors: Farbe zrügsetze
 save: Spichere
 users: Benutzer
 roles: Rollen
+name: Name
+role: Rolle
+addNewUser: Füeg neue Benutzer hinzue
+expires: Ablouf
+selectUserOptions: Wähle Benutzer Optione
+prenameIsRequired: Vorname ist erforderlich
+lastNameIsRequired: Nachname ist erforderlich
+birthdayIsRequired: Geburtstag ist erforderlich
+userIsRequired: Benutzer ist erforderlich
+emailIsRequired: Email ist erforderlich
+roleIsRequired: Rolle ist erforderlich
+rights: Recht
+selectRoleOptions: Wähle Roue Optione
+addNewRole: Füeg neui Roue hinzue

src/assets/lang/de-DE.yaml

@@ -1,6 +1,6 @@
 language: Sprache
 prename: Vorname
-lastname: Nachname
+lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
@@ -46,3 +46,17 @@ resetColors: Farben zurücksetzen
 save: Speichern
 users: Benutzer
 roles: Rollen
+name: Name
+role: Rolle
+addNewUser: Füge neuen Benutzer hinzu
+expires: Ablauf
+selectUserOptions: Wähle Benutzer Optionen
+prenameIsRequired: Vorname ist erforderlich
+lastNameIsRequired: Nachname ist erforderlich
+birthdayIsRequired: Geburtstag ist erforderlich
+userIsRequired: Benutzer ist erforderlich
+emailIsRequired: Email ist erforderlich
+roleIsRequired: Rolle ist erforderlich
+rights: Rechte
+selectRoleOptions: Wähle Rollen Option
+addNewRole: Füge neue Rolle hinzu

src/assets/lang/en-US.yaml

@@ -1,6 +1,6 @@
 language: Language
 prename: Prename
-lastname: Name
+lastName: Name
 birthday: Birthday
 email: Email
 group: Group
@@ -46,3 +46,17 @@ resetColors: Reset Colors
 save: Save
 users: Users
 roles: Roles
+name: Name
+role: Role
+addNewUser: Add new User
+expires: Expires
+selectUserOptions: Select User Options
+prenameIsRequired: Fist Name is required
+lastNameIsRequired: Last Name is required
+birthdayIsRequired: Birthday is required
+userIsRequired: User is required
+emailIsRequired: Email is required
+roleIsRequired: Role is required
+rights: Rights
+selectRoleOptions: Select Role Options
+addNewRole: Add new Role

src/boot/auth.ts

@@ -14,7 +14,7 @@ export default boot(async ({ app }) => {
   await appApi
     .get('/login/me')
     .then((resp) => {
-      useStore.setUser({ username: resp.data.username, role: resp.data.role });
+      useStore.setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role });
       login.refresh().catch((err) => console.error(err));
     })
     .catch(() => {

src/boot/axios.ts

@@ -8,7 +8,7 @@ export const portApp = 9500;
 
 // Create axios instance
 export const appApi: AxiosInstance = axios.create({
-  baseURL: `http://${host}:${portApp}/api`,
+  baseURL: `https://${host}:${portApp}/api`,
   timeout: 10000,
   withCredentials: true,
 });

src/boot/quasar-global.ts

@@ -9,11 +9,17 @@ export default boot(({ app, router }) => {
   const $q = app.config.globalProperties.$q;
   setQuasarInstance($q);
 
-  Logo.value = localStorage.getItem('icon') ?? '';
-  databaseName.value = localStorage.getItem('databaseName') ?? '';
-  document.documentElement.style.setProperty('--q-primary', localStorage.getItem('primaryColor'));
-  document.documentElement.style.setProperty(
-    '--q-secondary',
-    localStorage.getItem('secondaryColor'),
-  );
+  Logo.value = localStorage.getItem('icon') ?? Logo.value;
+  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
+  let primaryColor = localStorage.getItem('primaryColor');
+  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
+    primaryColor = null;
+  }
+  let secondaryColor = localStorage.getItem('secondaryColor');
+  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
+    secondaryColor = null;
+  }
+
+  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
 });

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>

src/pages/UserSettings.vue

@@ -14,32 +14,25 @@
           <q-tab name="users" no-caps :label="$t('users')" />
           <q-tab name="roles" no-caps :label="$t('roles')" />
         </q-tabs>
-        <q-seperator />
+        <q-separator />
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="users">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <UserTable />
           </q-tab-panel>
           <q-tab-panel name="roles">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <RoleTable />
           </q-tab-panel>
         </q-tab-panels>
       </q-card>
     </div>
   </div>
-
-  <q-btn no-caps color="primary" @click="console.log('save')">{{ $t('save') }}</q-btn>
 </template>
 
 <script setup lang="ts">
-import type { Users } from 'src/vueLib/models/users';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
+import UserTable from 'src/vueLib/tables/users/UserTable.vue';
+import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
 
 const tab = ref('users');
-
-const columns = computed(() => [
-  { name: 'name', align: 'center' as const, label: 'Name', field: 'name' },
-]);
-
-const users = ref<Users>([]);
 </script>

src/vueLib/login/useLogin.ts

@@ -26,7 +26,7 @@ export function useLogin() {
       });
 
       const resp = await appApi.get('/login/me');
-      userStore.setUser({ username: resp.data.user, role: resp.data.role });
+      userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
 
       startRefreshInterval();
       return true;
@@ -52,7 +52,7 @@ export function useLogin() {
         appApi
           .get('/login/me')
           .then((resp) => {
-            userStore.setUser({ username: resp.data.user, role: resp.data.role });
+            userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
             if (!intervalId) {
               startRefreshInterval();
             }

src/vueLib/login/userStore.ts

@@ -3,6 +3,7 @@ import { useGlobalRouter } from 'src/utils/globalRouter';
 import { useGlobalQ } from 'src/utils/globalQ';
 
 interface User {
+  id: number;
   username: string;
   role: string;
 }

src/vueLib/models/rights.ts

@@ -0,0 +1,8 @@
+export interface Right {
+  name: string;
+  read: boolean;
+  write: boolean;
+  delete: boolean;
+}
+
+export type Rights = Right[];

src/vueLib/models/roles.ts

@@ -0,0 +1,9 @@
+import type { Rights } from './rights';
+
+export interface Role {
+  id?: number;
+  role: string;
+  rights: Rights | null;
+}
+
+export type Roles = Role[];

src/vueLib/models/users.ts

@@ -1,6 +1,7 @@
 export interface User {
-  id: number;
-  name: string;
+  id?: number;
+  user: string;
+  email: string;
   role: string;
   expires: string;
 }

src/vueLib/tables/members/MembersTable.ts

@@ -28,7 +28,7 @@ export function useMemberTable() {
     {
       name: 'lastName',
       align: 'left' as const,
-      label: i18n.global.t('lastname'),
+      label: i18n.global.t('lastName'),
       field: 'lastName',
       sortable: true,
     },
@@ -196,6 +196,7 @@ export function useMemberTable() {
         loading.value = false;
       });
   }
+
   return {
     members,
     pagination,

src/vueLib/tables/members/MembersTable.vue

@@ -104,8 +104,8 @@
       </template>
     </q-table>
   </div>
-  <EditOneDialog ref="editOneDialog" v-on:update-member="updateMembers"></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update-member="updateMembers"></EditAllDialog>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateMembers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateMembers"></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -125,7 +125,7 @@ import { appApi } from 'src/boot/axios';
 import { ref, onMounted } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/EditAllDialog.vue';
+import EditAllDialog from 'src/components/MemberEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';

src/vueLib/tables/roles/RoleTable.ts

@@ -0,0 +1,79 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import type { Roles } from 'src/vueLib/models/roles';
+
+export const roles = ref<Roles>([]);
+
+export function useRoleTable() {
+  const pagination = ref({
+    sortBy: 'role',
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'id',
+      align: 'left' as const,
+      label: 'Id',
+      field: 'id',
+      sortable: true,
+      style: 'width: 50px; max-width: 50px;',
+    },
+    {
+      name: 'role',
+      align: 'left' as const,
+      label: i18n.global.t('role'),
+      field: 'role',
+      sortable: true,
+    },
+    {
+      name: 'rights',
+      align: 'left' as const,
+      label: i18n.global.t('rights'),
+      field: 'rights',
+      sortable: true,
+      style: 'width: 120px; max-width: 120px;',
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates user list from database
+  function updateRoles() {
+    loading.value = true;
+    appApi
+      .get('secure/roles')
+      .then((resp) => {
+        if (resp.data === null) {
+          roles.value = [];
+          return;
+        }
+        roles.value = resp.data as Roles;
+        if (roles.value === null) {
+          roles.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+  return {
+    roles,
+    pagination,
+    columns,
+    loading,
+    updateRoles,
+  };
+}

src/vueLib/tables/roles/RoleTable.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Roles"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :rows="roles"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+            <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+          </q-btn>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateRoles"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateRoles"></EditAllDialog>
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeRole(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Roles, Role } from 'src/vueLib/models/roles';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/RoleEditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useRoleTable } from './RoleTable';
+import { useLogin } from 'src/vueLib/login/useLogin';
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Roles>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+
+const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+  updateRoles();
+});
+
+// opens dialog for all role values
+function openSingleValueDialog(label: string, field: string, role: Role) {
+  editOneDialog.value?.open(label, field, role);
+}
+
+//opens dialog for one value
+function openAllValueDialog(role: Role | null) {
+  editAllDialog.value?.open(role);
+}
+
+//opens remove dialog
+function openRemoveDialog(...roles: Roles) {
+  if (roles.length === 1) {
+    deleteText.value = "'" + roles[0]?.role + "'";
+  } else {
+    deleteText.value = String(roles.length) + ' roles';
+  }
+  okDialog.value?.open(roles);
+}
+
+//remove role from database
+function removeRole(...removeRoles: Roles) {
+  const roles: string[] = [];
+
+  removeRoles.forEach((role: Role) => {
+    if (role.role) {
+      roles.push(role.role);
+    }
+  });
+
+  const login = useLogin();
+  const user = login.getUser();
+
+  appApi
+    .post('secure/roles/delete?role=' + user?.role, { roles: roles })
+    .then(() => {
+      updateRoles();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function getSelected(): Roles {
+  if (selected.value.length === 0) return [];
+  return selected.value;
+}
+defineExpose({
+  getSelected,
+});
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>

src/vueLib/tables/users/UserTable.ts

@@ -8,68 +8,26 @@ export function useUserTable() {
   const users = ref<Users>([]);
 
   const pagination = ref({
-    sortBy: 'firstName',
+    sortBy: 'user',
     descending: false,
     page: 1,
     rowsPerPage: 10,
   });
 
   const columns = computed(() => [
-    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
     {
-      name: 'firstName',
+      name: 'id',
       align: 'left' as const,
-      label: i18n.global.t('prename'),
-      field: 'firstName',
+      label: 'Id',
+      field: 'id',
       sortable: true,
+      style: 'width: 50px; max-width: 50px;',
     },
     {
-      name: 'lastName',
+      name: 'user',
       align: 'left' as const,
-      label: i18n.global.t('lastname'),
-      field: 'lastName',
-      sortable: true,
-    },
-    {
-      name: 'birthday',
-      align: 'left' as const,
-      label: i18n.global.t('birthday'),
-      field: 'birthday',
-      sortable: true,
-    },
-    {
-      name: 'age',
-      align: 'left' as const,
-      label: i18n.global.t('age'),
-      field: 'age',
-      sortable: true,
-    },
-    {
-      name: 'address',
-      align: 'left' as const,
-      label: i18n.global.t('address'),
-      field: 'address',
-      sortable: true,
-    },
-    {
-      name: 'town',
-      align: 'left' as const,
-      label: i18n.global.t('town'),
-      field: 'town',
-      sortable: true,
-    },
-    {
-      name: 'zip',
-      align: 'left' as const,
-      label: i18n.global.t('zipCode'),
-      field: 'zip',
-      sortable: true,
-    },
-    {
-      name: 'phone',
-      align: 'left' as const,
-      label: i18n.global.t('phone'),
-      field: 'phone',
+      label: i18n.global.t('user'),
+      field: 'user',
       sortable: true,
     },
     {
@@ -80,32 +38,12 @@ export function useUserTable() {
       sortable: true,
     },
     {
-      name: 'group',
+      name: 'role',
       align: 'left' as const,
-      label: i18n.global.t('group'),
-      field: 'group',
-      sortable: true,
-    },
-    {
-      name: 'responsiblePerson',
-      align: 'left' as const,
-      label: i18n.global.t('responsible'),
-      field: 'responsiblePerson',
-      sortable: true,
-    },
-    {
-      name: 'firstVisit',
-      align: 'left' as const,
-      label: i18n.global.t('firstVisit'),
-      field: 'firstVisit',
-      sortable: true,
-    },
-    {
-      name: 'lastVisit',
-      align: 'left' as const,
-      label: i18n.global.t('lastVisit'),
-      field: 'lastVisit',
+      label: i18n.global.t('role'),
+      field: 'role',
       sortable: true,
+      style: 'width: 120px; max-width: 120px;',
     },
     { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
@@ -119,7 +57,7 @@ export function useUserTable() {
     loading.value = true;
 
     appApi
-      .get('users')
+      .get('secure/users')
       .then((resp) => {
         if (resp.data === null) {
           users.value = [];

src/vueLib/tables/users/UserTable.vue

@@ -35,9 +35,6 @@
           >
             <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
           </q-btn>
-          <q-btn dense flat icon="upload" @click="openUploadDialog">
-            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-          </q-btn>
         </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
@@ -63,7 +60,11 @@
         </q-input>
       </template>
       <template v-slot:body-cell="props">
+        <q-td v-if="props.col.name === 'role'" :props="props">
+          <q-select dense v-model="props.row.role" :options="localRoles"></q-select>
+        </q-td>
         <q-td
+          v-else
           :props="props"
           @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
         >
@@ -72,30 +73,15 @@
       </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
+          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+          </q-btn>
         </q-td>
       </template>
     </q-table>
   </div>
-  <EditOneDialog ref="editOneDialog" v-on:update-member="updateUsers"></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update-member="updateUsers"></EditAllDialog>
+  <EditOneDialog ref="editOneDialog" v-on:update="updateUsers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateUsers"></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -107,27 +93,26 @@
     button-ok-color="red"
     v-on:update-confirm="(val) => removeUser(...val)"
   ></OkDialog>
-  <UploadDialog ref="uploadDialog" @update-upload="updateUsers"> </UploadDialog>
 </template>
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import type { Users, User } from 'src/vueLib/models/users';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/EditAllDialog.vue';
+import EditAllDialog from 'src/components/UserEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
-import UploadDialog from 'src/components/UploadDialog.vue';
-import { databaseName } from '../members/MembersTable';
 import { useUserTable } from './UserTable';
+import { useLogin } from 'src/vueLib/login/useLogin';
+import { roles } from '../roles/RoleTable';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
 const editAllDialog = ref();
-const uploadDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
+const localRoles = computed(() => roles.value.map((role) => role.role));
 const selectOption = ref(false);
 const selected = ref<Users>([]);
 const openSubmenu = ref(false);
@@ -138,17 +123,7 @@ const { users, pagination, loading, columns, updateUsers } = useUserTable();
 //load on mounting page
 onMounted(() => {
   loading.value = true;
-
-  appApi
-    .post('secure/database/open', { dbPath: databaseName.value, create: true })
-    .then(() => {
-      updateUsers();
-    })
-    .catch((err) => NotifyResponse(err, 'error'))
-
-    .finally(() => {
-      loading.value = false;
-    });
+  updateUsers();
 });
 
 // opens dialog for all user values
@@ -164,28 +139,28 @@ function openAllValueDialog(user: User | null) {
 //opens remove dialog
 function openRemoveDialog(...users: Users) {
   if (users.length === 1) {
-    deleteText.value = "'" + users[0]?.name + "'";
+    deleteText.value = "'" + users[0]?.user + "'";
   } else {
     deleteText.value = String(users.length) + ' users';
   }
   okDialog.value?.open(users);
 }
 
-//opens uploader dialog
-function openUploadDialog() {
-  uploadDialog.value?.open();
-}
-
 //remove user from database
 function removeUser(...removeUsers: Users) {
   const userIds: number[] = [];
 
   removeUsers.forEach((user: User) => {
-    userIds.push(user.id);
+    if (user.id) {
+      userIds.push(user.id);
+    }
   });
 
+  const login = useLogin();
+  const user = login.getUser();
+
   appApi
-    .post('users/delete', { ids: userIds })
+    .post('secure/users/delete?id=' + user?.id, { ids: userIds })
     .then(() => {
       updateUsers();
       selected.value = [];
@@ -196,17 +171,6 @@ function removeUser(...removeUsers: Users) {
     });
 }
 
-//const blinkingId = ref<number | null>(null);
-
-// function triggerBlink(id: number) {
-//   blinkingId.value = id;
-
-//   // Optional: stop blinking after 3 seconds
-//   setTimeout(() => {
-//     blinkingId.value = null;
-//   }, 3000);
-// }
-
 function getSelected(): Users {
   if (selected.value.length === 0) return [];
   return selected.value;

src/vueLib/types/vuedraggable.d.ts

@@ -0,0 +1,5 @@
+declare module 'vuedraggable' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}