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

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;