From 0210b40731d48f079cae3a58660008ab9c2a4c68 Mon Sep 17 00:00:00 2001
From: Martin Araneda <martix.araneda@gmail.com>
Date: Tue, 14 Feb 2023 18:23:22 -0300
Subject: [PATCH] minor fixes to Users,OS crud

---
 frontend/src/layout/AppTopbar.vue |  17 ++---
 frontend/src/views/Chart.vue      |  38 +++++------
 frontend/src/views/OsCrud.vue     | 101 +++++++++++++++---------------
 frontend/src/views/UserCrud.vue   |  80 ++++++++++++-----------
 4 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/frontend/src/layout/AppTopbar.vue b/frontend/src/layout/AppTopbar.vue
index 48ec746..61d22ec 100644
--- a/frontend/src/layout/AppTopbar.vue
+++ b/frontend/src/layout/AppTopbar.vue
@@ -8,7 +8,6 @@ import jwt_decode from 'jwt-decode';
 import auth from '../utils/Auth';
 
 const { onMenuToggle } = useLayout();
-
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
 const changePasswordDialog = ref(false);
@@ -58,8 +57,7 @@ const onClickPasswordChange = () => {
         password: user.value.current_password,
         new_password: user.value.new_password
     };
-    if (user.value.new_password != user.value.confirm_new_password) {
-        console.log("gola");
+    if (user.value.new_password !== user.value.confirm_new_password) {
         toast.add({ severity: 'error', summary: 'Error', detail: 'Passwords are not the same', life: 3000 });
         return;
     }
@@ -67,6 +65,7 @@ const onClickPasswordChange = () => {
 }
 
 async function savePassword(pass) {
+    submitted.value = true;
     var token = localStorage.getItem("token");
     var decoded = jwt_decode(token);
     try {
@@ -145,21 +144,23 @@ const isOutsideClicked = (event) => {
             <Toast />
             <div class="field">
                 <label for="current_password">Current Password</label>
-                <Password id="current_password" v-model.trim="user.current_password" required="true" autofocus
+                <Password id="current_password" v-model.trim="user.current_password" autofocus
                     :class="{ 'p-invalid': submitted && !user.current_password }" />
-                <small class="p-invalid" v-if="submitted && !user.current_password">Actual password is required.</small>
+                <small class="p-invalid" v-if="submitted && !user.current_password">Current password is
+                    required.</small>
             </div>
             <div class="field">
                 <label for="new_password">New Password</label>
-                <Password id="new_password" v-model.trim="user.new_password" required="true"
+                <Password id="new_password" v-model.trim="user.new_password"
                     :class="{ 'p-invalid': submitted && !user.new_password }" />
                 <small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small>
             </div>
             <div class="field">
                 <label for="confirm_new_password">Confirm new Password</label>
-                <Password id="confirm_new_password" v-model.trim="user.confirm_new_password" required="true"
+                <Password id="confirm_new_password" v-model.trim="user.confirm_new_password"
                     :class="{ 'p-invalid': submitted && !user.confirm_new_password }" />
-                <small class="p-invalid" v-if="submitted && !user.confirm_new_password">Confirm the new password is
+                <small class="p-invalid" v-if="submitted && !user.confirm_new_password">Confirm the new password
+                    is
                     required.</small>
             </div>
             <template #footer>
diff --git a/frontend/src/views/Chart.vue b/frontend/src/views/Chart.vue
index 7f69814..bbf7628 100644
--- a/frontend/src/views/Chart.vue
+++ b/frontend/src/views/Chart.vue
@@ -12,6 +12,7 @@ let textColor = documentStyle.getPropertyValue('--text-color');
 let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
 let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 const time_elapsed = ref([]);
+const coins = ref([]);
 
 const lineData = ref(null);
 const lineOptions = ref(null);
@@ -25,10 +26,12 @@ const setColorOptions = () => {
 async function setChart() {
     try {
         const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=4`);
-        //console.log(response.data);
-        time_elapsed.value = response.data;
-        time_elapsed.value = time_elapsed.value.filter(x => x = 1);
-        console.log(time_elapsed.value);
+        time_elapsed.value = response.data.map(frame => {
+            return Math.floor(frame.elapsed_time / 1000);
+        });
+        coins.value = response.data.map(frame => {
+            return frame.coins;
+        });
     }
     catch (error) {
         console.error(error);
@@ -37,23 +40,15 @@ async function setChart() {
 
     /////////////////////////////////
     lineData.value = {
-        labels: [0],
+        labels: time_elapsed.value,
         datasets: [
             {
-                label: 'First Dataset',
-                data: [65, 59, 80, 81, 56, 55, 40],
+                label: 'Game 4',
+                data: coins.value,
                 fill: false,
                 backgroundColor: documentStyle.getPropertyValue('--primary-500'),
                 borderColor: documentStyle.getPropertyValue('--primary-500'),
                 tension: 0.4
-            },
-            {
-                label: 'Second Dataset',
-                data: [28, 48, 40, 19, 86, 27, 90],
-                fill: false,
-                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
-                borderColor: documentStyle.getPropertyValue('--primary-200'),
-                tension: 0.4
             }
         ]
     };
@@ -67,7 +62,12 @@ async function setChart() {
             }
         },
         scales: {
+
             x: {
+                title: {
+                    display: true,
+                    text: "Time(s)"
+                },
                 ticks: {
                     color: textColorSecondary
                 },
@@ -77,6 +77,10 @@ async function setChart() {
                 }
             },
             y: {
+                title: {
+                    display: true,
+                    text: "Coins"
+                },
                 ticks: {
                     color: textColorSecondary
                 },
@@ -99,6 +103,7 @@ watch(
 
 onMounted(() => {
     checkAuth();
+    setChart();
 })
 
 const checkAuth = () => {
@@ -111,8 +116,6 @@ const checkAuth = () => {
         <div class="grid p-fluid">
             <div class="col-12 xl:col-2">
                 <span class="p-float-label">
-                    <!-- <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
-                    <label for="dropdown">Dropdown</label> -->
                 </span>
             </div>
         </div>
@@ -122,7 +125,6 @@ const checkAuth = () => {
             <div class="col-12 xl:col-6">
                 <div class="card">
                     <h5>Linear Chart</h5>
-                    <button @click="setChart">hola</button>
                     <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
                 </div>
             </div>
diff --git a/frontend/src/views/OsCrud.vue b/frontend/src/views/OsCrud.vue
index abca07a..3184d82 100644
--- a/frontend/src/views/OsCrud.vue
+++ b/frontend/src/views/OsCrud.vue
@@ -6,13 +6,13 @@ import axios from 'axios';
 import auth from '../utils/Auth';
 
 const toast = useToast();
-const products = ref(null);
-const productDialog = ref(false);
-const productDialogChange = ref(false);
-const deleteProductDialog = ref(false);
-const deleteProductsDialog = ref(false);
+const users = ref(null);
+const userDialog = ref(false);
+const userDialogChange = ref(false);
+const deleteUserDialog = ref(false);
+const deleteUsersDialog = ref(false);
 const os = ref({});
-const selectedProducts = ref(null);
+const selectedUsers = ref(null);
 const dt = ref(null);
 const filters = ref({});
 const submitted = ref(false);
@@ -20,11 +20,11 @@ const checkAuth = () => {
     auth.checkToken(true);
 };
 
-async function onShowClick() {
+async function showTable() {
     try {
         const response = await axios.get(`http://localhost:3001/os`);
         console.log(response.data);
-        products.value = response.data;
+        users.value = response.data;
     }
     catch (error) {
         console.error(error);
@@ -45,7 +45,8 @@ async function onCreateClick() {
 
         if (response.status === 204) {
             toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Created', life: 3000 });
-            productDialog.value = false;
+            userDialog.value = false;
+            showTable();
         }
         else {
             console.error(response);
@@ -62,28 +63,29 @@ onBeforeMount(() => {
 });
 onMounted(() => {
     checkAuth();
+    showTable();
 });
 
 const openNew = () => {
     os.value = {};
     submitted.value = false;
-    productDialog.value = true;
+    userDialog.value = true;
 };
 
 const hideDialog = () => {
-    productDialog.value = false;
+    userDialog.value = false;
     submitted.value = false;
 };
 
 const hideDialogChange = () => {
-    productDialogChange.value = false;
+    userDialogChange.value = false;
     submitted.value = false;
 };
 
-const editProduct = (editProduct) => {
-    os.value = { ...editProduct };
+const editUser = (editUser) => {
+    os.value = { ...editUser };
     console.log(os.value.ID);
-    productDialogChange.value = true;
+    userDialogChange.value = true;
 };
 async function onChangeOS() {
     var changeOS =
@@ -96,7 +98,8 @@ async function onChangeOS() {
 
         if (response.status === 204) {
             toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Modified', life: 3000 });
-            productDialogChange.value = false;
+            userDialogChange.value = false;
+            showTable();
         }
         else {
             console.error(response);
@@ -107,33 +110,34 @@ async function onChangeOS() {
     }
 }
 
-const confirmDeleteProduct = (editProduct) => {
-    os.value = editProduct;
-    deleteProductDialog.value = true;
+const confirmDeleteUser = (editUser) => {
+    os.value = editUser;
+    deleteUserDialog.value = true;
 };
 
-async function deleteProduct() {
+async function deleteUser() {
     try {
         const response = await axios.delete(`http://localhost:3001/os/` + os.value.ID, auth.getTokenHeader());
         if (response.status !== 204) {
             console.error(response);
         }
+        showTable();
     }
     catch (error) {
         console.error(error);
     }
-    products.value = products.value.filter((val) => val.ID !== os.value.ID);
-    deleteProductDialog.value = false;
+    users.value = users.value.filter((val) => val.ID !== os.value.ID);
+    deleteUserDialog.value = false;
     os.value = {};
     toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Deleted', life: 3000 });
 };
 
 
 const confirmDeleteSelected = () => {
-    deleteProductsDialog.value = true;
+    deleteUsersDialog.value = true;
 };
-const deleteSelectedProducts = () => {
-    selectedProducts.value.forEach(element => {
+const deleteSelectedUsers = () => {
+    selectedUsers.value.forEach(element => {
         try {
             const response = axios.delete(`http://localhost:3001/os/` + element.ID, auth.getTokenHeader());
             if (response.status !== 204) {
@@ -145,12 +149,12 @@ const deleteSelectedProducts = () => {
         }
 
     });
-    console.log(selectedProducts.value);
+    console.log(selectedUsers.value);
 
-    products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
-    deleteProductsDialog.value = false;
-    selectedProducts.value = null;
-    toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+    users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
+    deleteUsersDialog.value = false;
+    selectedUsers.value = null;
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
 };
 
 const initFilters = () => {
@@ -169,25 +173,23 @@ const initFilters = () => {
                     <template v-slot:start>
                         <div class="my-2">
                             <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                            <Button label="Show" icon="pi pi-eye" class="p-button-success mr-2" @click="onShowClick" />
                             <Button label="Delete" icon="pi pi-trash" class="p-button-danger"
-                                @click="confirmDeleteSelected"
-                                :disabled="!selectedProducts || !selectedProducts.length" />
+                                @click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
                         </div>
                     </template>
 
 
                 </Toolbar>
 
-                <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID"
-                    :paginator="true" :rows="10" :filters="filters"
+                <DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
+                    :rows="10" :filters="filters"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                     :rowsPerPageOptions="[5, 10, 25]"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
                     responsiveLayout="scroll">
                     <template #header>
                         <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-                            <h5 class="m-0">Manage Products</h5>
+                            <h5 class="m-0">Manage Users</h5>
                             <span class="block mt-2 md:mt-0 p-input-icon-left">
                                 <i class="pi pi-search" />
                                 <InputText v-model="filters['global'].value" placeholder="Search..." />
@@ -205,14 +207,14 @@ const initFilters = () => {
                     <Column headerStyle="min-width:10rem;">
                         <template #body="slotProps">
                             <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
-                                @click="editProduct(slotProps.data)" />
+                                @click="editUser(slotProps.data)" />
                             <Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
-                                @click="confirmDeleteProduct(slotProps.data)" />
+                                @click="confirmDeleteUser(slotProps.data)" />
                         </template>
                     </Column>
                 </DataTable>
 
-                <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="New OS" :modal="true"
+                <Dialog v-model:visible="userDialog" :style="{ width: '450px' }" header="New OS" :modal="true"
                     class="p-fluid">
                     <div class="field">
                         <label for="name">Name</label>
@@ -225,7 +227,7 @@ const initFilters = () => {
                         <Button label="Save" icon="pi pi-check" class="p-button-text" @click="onCreateClick" />
                     </template>
                 </Dialog>
-                <Dialog v-model:visible="productDialogChange" :style="{ width: '450px' }" header="New OS" :modal="true"
+                <Dialog v-model:visible="userDialogChange" :style="{ width: '450px' }" header="New OS" :modal="true"
                     class="p-fluid">
                     <div class="field">
                         <label for="name">Name</label>
@@ -239,29 +241,26 @@ const initFilters = () => {
                     </template>
                 </Dialog>
 
-                <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
-                    :modal="true">
+                <Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
                     <div class="flex align-items-center justify-content-center">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                         <span v-if="os">Are you sure you want to delete <b>{{ os.name }}</b>?</span>
                     </div>
                     <template #footer>
-                        <Button label="No" icon="pi pi-times" class="p-button-text"
-                            @click="deleteProductDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                        <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
                     </template>
                 </Dialog>
 
-                <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
-                    :modal="true">
+                <Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
                     <div class="flex align-items-center justify-content-center">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
-                        <span v-if="os">Are you sure you want to delete the selected products?</span>
+                        <span v-if="os">Are you sure you want to delete the selected users?</span>
                     </div>
                     <template #footer>
                         <Button label="No" icon="pi pi-times" class="p-button-text"
-                            @click="deleteProductsDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+                            @click="deleteUsersDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
                     </template>
                 </Dialog>
             </div>
diff --git a/frontend/src/views/UserCrud.vue b/frontend/src/views/UserCrud.vue
index 0b55955..472adf3 100644
--- a/frontend/src/views/UserCrud.vue
+++ b/frontend/src/views/UserCrud.vue
@@ -6,12 +6,12 @@ import axios from 'axios';
 import auth from '../utils/Auth';
 
 const toast = useToast();
-const products = ref(null);
+const users = ref(null);
 const productDialog = ref(false);
-const deleteProductDialog = ref(false);
-const deleteProductsDialog = ref(false);
+const deleteUserDialog = ref(false);
+const deleteUsersDialog = ref(false);
 const user = ref({});
-const selectedProducts = ref(null);
+const selectedUsers = ref(null);
 const dt = ref(null);
 const filters = ref({});
 const submitted = ref(false);
@@ -20,11 +20,10 @@ const checkAuth = () => {
     auth.checkToken(true);
 };
 
-async function onShowClick() {
+async function showTable() {
     try {
         const response = await axios.get(`http://localhost:3001/user`, auth.getTokenHeader());
-        console.log(response.data);
-        products.value = response.data;
+        users.value = response.data;
     }
     catch (error) {
         console.error(error);
@@ -54,6 +53,7 @@ async function onCreateClick() {
         if (response.status === 204) {
             toast.add({ severity: 'success', summary: 'Successful', detail: 'User Created', life: 3000 });
             productDialog.value = false;
+            showTable();
         }
         else {
             console.error(response);
@@ -70,6 +70,7 @@ onBeforeMount(() => {
 });
 onMounted(() => {
     checkAuth();
+    showTable();
 });
 
 const openNew = () => {
@@ -88,9 +89,9 @@ const hideDialogChange = () => {
     submitted.value = false;
 };
 
-const editProduct = (editProduct) => {
+const editUser = (editUser) => {
 
-    user.value = { ...editProduct };
+    user.value = { ...editUser };
     console.log(user);
     productDialogChange.value = true;
 };
@@ -108,6 +109,7 @@ async function onChangeUser() {
         if (response.status === 204) {
             toast.add({ severity: 'success', summary: 'Successful', detail: 'User Modified', life: 3000 });
             productDialogChange.value = false;
+            showTable();
         }
         else {
             console.error(response);
@@ -118,33 +120,34 @@ async function onChangeUser() {
     }
 }
 
-const confirmDeleteProduct = (editProduct) => {
-    user.value = editProduct;
-    deleteProductDialog.value = true;
+const confirmDeleteUser = (editUser) => {
+    user.value = editUser;
+    deleteUserDialog.value = true;
 };
 
-async function deleteProduct() {
+async function deleteUser() {
     try {
         const response = await axios.delete(`http://localhost:3001/user/` + user.value.ID, auth.getTokenHeader());
         if (response.status !== 204) {
             console.error(response);
         }
+        showTable();
     }
     catch (error) {
         console.error(error);
     }
-    products.value = products.value.filter((val) => val.ID !== user.value.ID);
-    deleteProductDialog.value = false;
+    users.value = users.value.filter((val) => val.ID !== user.value.ID);
+    deleteUserDialog.value = false;
     user.value = {};
     toast.add({ severity: 'success', summary: 'Successful', detail: 'User Deleted', life: 3000 });
 };
 
 
 const confirmDeleteSelected = () => {
-    deleteProductsDialog.value = true;
+    deleteUsersDialog.value = true;
 };
-const deleteSelectedProducts = () => {
-    selectedProducts.value.forEach(element => {
+const deleteSelectedUsers = () => {
+    selectedUsers.value.forEach(element => {
         try {
             const response = axios.delete(`http://localhost:3001/user/` + element.ID, auth.getTokenHeader());
             if (response.status !== 204) {
@@ -156,12 +159,12 @@ const deleteSelectedProducts = () => {
         }
 
     });
-    console.log(selectedProducts.value);
+    console.log(selectedUsers.value);
 
-    products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
-    deleteProductsDialog.value = false;
-    selectedProducts.value = null;
-    toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+    users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
+    deleteUsersDialog.value = false;
+    selectedUsers.value = null;
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
 };
 
 const initFilters = () => {
@@ -180,21 +183,19 @@ const initFilters = () => {
                     <template v-slot:start>
                         <div class="my-2">
                             <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                            <Button label="Show" icon="pi pi-eye" class="p-button-success mr-2" @click="onShowClick" />
                             <Button label="Delete" icon="pi pi-trash" class="p-button-danger"
-                                @click="confirmDeleteSelected"
-                                :disabled="!selectedProducts || !selectedProducts.length" />
+                                @click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
                         </div>
                     </template>
 
 
                 </Toolbar>
 
-                <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID"
-                    :paginator="true" :rows="10" :filters="filters"
+                <DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
+                    :rows="10" :filters="filters"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                     :rowsPerPageOptions="[5, 10, 25]"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
                     responsiveLayout="scroll">
                     <template #header>
                         <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
@@ -229,9 +230,9 @@ const initFilters = () => {
                     <Column headerStyle="min-width:10rem;">
                         <template #body="slotProps">
                             <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
-                                @click="editProduct(slotProps.data)" />
+                                @click="editUser(slotProps.data)" />
                             <Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
-                                @click="confirmDeleteProduct(slotProps.data)" />
+                                @click="confirmDeleteUser(slotProps.data)" />
                         </template>
                     </Column>
                 </DataTable>
@@ -287,29 +288,26 @@ const initFilters = () => {
                     </template>
                 </Dialog>
 
-                <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
-                    :modal="true">
+                <Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
                     <div class="flex align-items-center justify-content-center">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                         <span v-if="user">Are you sure you want to delete <b>{{ user.name }}</b>?</span>
                     </div>
                     <template #footer>
-                        <Button label="No" icon="pi pi-times" class="p-button-text"
-                            @click="deleteProductDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                        <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
                     </template>
                 </Dialog>
 
-                <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
-                    :modal="true">
+                <Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
                     <div class="flex align-items-center justify-content-center">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
-                        <span v-if="user">Are you sure you want to delete the selected products?</span>
+                        <span v-if="user">Are you sure you want to delete the selected users?</span>
                     </div>
                     <template #footer>
                         <Button label="No" icon="pi pi-times" class="p-button-text"
-                            @click="deleteProductsDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+                            @click="deleteUsersDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
                     </template>
                 </Dialog>
             </div>