Proyecto-Titulo/alai-server
3
0
Fork 0
Code Issues Pull Requests Releases Activity

minor fixes to Users,OS crud

Browse Source
This commit is contained in:
Martin Araneda 2023-02-14 18:23:22 -03:00
parent e26ed450fa
commit 3b03b4ba31
4 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/layout/AppTopbar.vue
View File

@ -8,7 +8,6 @@ import jwt_decode from 'jwt-decode';
import auth from '../utils/Auth'; import auth from '../utils/Auth';
const { onMenuToggle } = useLayout(); const { onMenuToggle } = useLayout();
const outsideClickListener = ref(null); const outsideClickListener = ref(null);
const topbarMenuActive = ref(false); const topbarMenuActive = ref(false);
const changePasswordDialog = ref(false); const changePasswordDialog = ref(false);
@ -58,8 +57,7 @@ const onClickPasswordChange = () => {
password: user.value.current_password, password: user.value.current_password,
new_password: user.value.new_password new_password: user.value.new_password
}; };
if (user.value.new_password != user.value.confirm_new_password) { if (user.value.new_password !== user.value.confirm_new_password) {
console.log("gola");
toast.add({ severity: 'error', summary: 'Error', detail: 'Passwords are not the same', life: 3000 }); toast.add({ severity: 'error', summary: 'Error', detail: 'Passwords are not the same', life: 3000 });
return; return;
} }
@ -67,6 +65,7 @@ const onClickPasswordChange = () => {
} }
async function savePassword(pass) { async function savePassword(pass) {
submitted.value = true;
var token = localStorage.getItem("token"); var token = localStorage.getItem("token");
var decoded = jwt_decode(token); var decoded = jwt_decode(token);
try { try {
@ -145,21 +144,23 @@ const isOutsideClicked = (event) => {
<Toast /> <Toast />
<div class="field"> <div class="field">
<label for="current_password">Current Password</label> <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 }" /> :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>
<div class="field"> <div class="field">
<label for="new_password">New Password</label> <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 }" /> :class="{ 'p-invalid': submitted && !user.new_password }" />
<small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small> <small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="confirm_new_password">Confirm new Password</label> <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 }" /> :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> required.</small>
</div> </div>
<template #footer> <template #footer>

38
frontend/src/views/Chart.vue
View File

@ -12,6 +12,7 @@ let textColor = documentStyle.getPropertyValue('--text-color');
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
let surfaceBorder = documentStyle.getPropertyValue('--surface-border'); let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
const time_elapsed = ref([]); const time_elapsed = ref([]);
const coins = ref([]);
const lineData = ref(null); const lineData = ref(null);
const lineOptions = ref(null); const lineOptions = ref(null);
@ -25,10 +26,12 @@ const setColorOptions = () => {
async function setChart() { async function setChart() {
try { try {
const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=4`); const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=4`);
//console.log(response.data); time_elapsed.value = response.data.map(frame => {
time_elapsed.value = response.data; return Math.floor(frame.elapsed_time / 1000);
time_elapsed.value = time_elapsed.value.filter(x => x = 1); });
console.log(time_elapsed.value); coins.value = response.data.map(frame => {
return frame.coins;
});
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
@ -37,23 +40,15 @@ async function setChart() {
///////////////////////////////// /////////////////////////////////
lineData.value = { lineData.value = {
labels: [0], labels: time_elapsed.value,
datasets: [ datasets: [
{ {
label: 'First Dataset', label: 'Game 4',
data: [65, 59, 80, 81, 56, 55, 40], data: coins.value,
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-500'), backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'), borderColor: documentStyle.getPropertyValue('--primary-500'),
tension: 0.4 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: { scales: {
x: { x: {
title: {
display: true,
text: "Time(s)"
},
ticks: { ticks: {
color: textColorSecondary color: textColorSecondary
}, },
@ -77,6 +77,10 @@ async function setChart() {
} }
}, },
y: { y: {
title: {
display: true,
text: "Coins"
},
ticks: { ticks: {
color: textColorSecondary color: textColorSecondary
}, },
@ -99,6 +103,7 @@ watch(
onMounted(() => { onMounted(() => {
checkAuth(); checkAuth();
setChart();
}) })
const checkAuth = () => { const checkAuth = () => {
@ -111,8 +116,6 @@ const checkAuth = () => {
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col-12 xl:col-2"> <div class="col-12 xl:col-2">
<span class="p-float-label"> <span class="p-float-label">
<!-- <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
<label for="dropdown">Dropdown</label> -->
</span> </span>
</div> </div>
</div> </div>
@ -122,7 +125,6 @@ const checkAuth = () => {
<div class="col-12 xl:col-6"> <div class="col-12 xl:col-6">
<div class="card"> <div class="card">
<h5>Linear Chart</h5> <h5>Linear Chart</h5>
<button @click="setChart">hola</button>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart> <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div> </div>
</div> </div>

101
frontend/src/views/OsCrud.vue
View File

@ -6,13 +6,13 @@ import axios from 'axios';
import auth from '../utils/Auth'; import auth from '../utils/Auth';
const toast = useToast(); const toast = useToast();
const products = ref(null); const users = ref(null);
const productDialog = ref(false); const userDialog = ref(false);
const productDialogChange = ref(false); const userDialogChange = ref(false);
const deleteProductDialog = ref(false); const deleteUserDialog = ref(false);
const deleteProductsDialog = ref(false); const deleteUsersDialog = ref(false);
const os = ref({}); const os = ref({});
const selectedProducts = ref(null); const selectedUsers = ref(null);
const dt = ref(null); const dt = ref(null);
const filters = ref({}); const filters = ref({});
const submitted = ref(false); const submitted = ref(false);
@ -20,11 +20,11 @@ const checkAuth = () => {
auth.checkToken(true); auth.checkToken(true);
}; };
async function onShowClick() { async function showTable() {
try { try {
const response = await axios.get(`http://localhost:3001/os`); const response = await axios.get(`http://localhost:3001/os`);
console.log(response.data); console.log(response.data);
products.value = response.data; users.value = response.data;
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
@ -45,7 +45,8 @@ async function onCreateClick() {
if (response.status === 204) { if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Created', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Created', life: 3000 });
productDialog.value = false; userDialog.value = false;
showTable();
} }
else { else {
console.error(response); console.error(response);
@ -62,28 +63,29 @@ onBeforeMount(() => {
}); });
onMounted(() => { onMounted(() => {
checkAuth(); checkAuth();
showTable();
}); });
const openNew = () => { const openNew = () => {
os.value = {}; os.value = {};
submitted.value = false; submitted.value = false;
productDialog.value = true; userDialog.value = true;
}; };
const hideDialog = () => { const hideDialog = () => {
productDialog.value = false; userDialog.value = false;
submitted.value = false; submitted.value = false;
}; };
const hideDialogChange = () => { const hideDialogChange = () => {
productDialogChange.value = false; userDialogChange.value = false;
submitted.value = false; submitted.value = false;
}; };
const editProduct = (editProduct) => { const editUser = (editUser) => {
os.value = { ...editProduct }; os.value = { ...editUser };
console.log(os.value.ID); console.log(os.value.ID);
productDialogChange.value = true; userDialogChange.value = true;
}; };
async function onChangeOS() { async function onChangeOS() {
var changeOS = var changeOS =
@ -96,7 +98,8 @@ async function onChangeOS() {
if (response.status === 204) { if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Modified', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Modified', life: 3000 });
productDialogChange.value = false; userDialogChange.value = false;
showTable();
} }
else { else {
console.error(response); console.error(response);
@ -107,33 +110,34 @@ async function onChangeOS() {
} }
} }
const confirmDeleteProduct = (editProduct) => { const confirmDeleteUser = (editUser) => {
os.value = editProduct; os.value = editUser;
deleteProductDialog.value = true; deleteUserDialog.value = true;
}; };
async function deleteProduct() { async function deleteUser() {
try { try {
const response = await axios.delete(`http://localhost:3001/os/` + os.value.ID, auth.getTokenHeader()); const response = await axios.delete(`http://localhost:3001/os/` + os.value.ID, auth.getTokenHeader());
if (response.status !== 204) { if (response.status !== 204) {
console.error(response); console.error(response);
} }
showTable();
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
} }
products.value = products.value.filter((val) => val.ID !== os.value.ID); users.value = users.value.filter((val) => val.ID !== os.value.ID);
deleteProductDialog.value = false; deleteUserDialog.value = false;
os.value = {}; os.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Deleted', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Deleted', life: 3000 });
}; };
const confirmDeleteSelected = () => { const confirmDeleteSelected = () => {
deleteProductsDialog.value = true; deleteUsersDialog.value = true;
}; };
const deleteSelectedProducts = () => { const deleteSelectedUsers = () => {
selectedProducts.value.forEach(element => { selectedUsers.value.forEach(element => {
try { try {
const response = axios.delete(`http://localhost:3001/os/` + element.ID, auth.getTokenHeader()); const response = axios.delete(`http://localhost:3001/os/` + element.ID, auth.getTokenHeader());
if (response.status !== 204) { 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)); users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
deleteProductsDialog.value = false; deleteUsersDialog.value = false;
selectedProducts.value = null; selectedUsers.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
}; };
const initFilters = () => { const initFilters = () => {
@ -169,25 +173,23 @@ const initFilters = () => {
<template v-slot:start> <template v-slot:start>
<div class="my-2"> <div class="my-2">
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <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" <Button label="Delete" icon="pi pi-trash" class="p-button-danger"
@click="confirmDeleteSelected" @click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
:disabled="!selectedProducts || !selectedProducts.length" />
</div> </div>
</template> </template>
</Toolbar> </Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID" <DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
:paginator="true" :rows="10" :filters="filters" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]" :rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
responsiveLayout="scroll"> responsiveLayout="scroll">
<template #header> <template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center"> <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"> <span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
@ -205,14 +207,14 @@ const initFilters = () => {
<Column headerStyle="min-width:10rem;"> <Column headerStyle="min-width:10rem;">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" <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" <Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteProduct(slotProps.data)" /> @click="confirmDeleteUser(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable> </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"> class="p-fluid">
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
@ -225,7 +227,7 @@ const initFilters = () => {
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="onCreateClick" /> <Button label="Save" icon="pi pi-check" class="p-button-text" @click="onCreateClick" />
</template> </template>
</Dialog> </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"> class="p-fluid">
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
@ -239,29 +241,26 @@ const initFilters = () => {
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
:modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <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> <span v-if="os">Are you sure you want to delete <b>{{ os.name }}</b>?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
@click="deleteProductDialog = false" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
:modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <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> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" <Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductsDialog = false" /> @click="deleteUsersDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
</template> </template>
</Dialog> </Dialog>
</div> </div>

80
frontend/src/views/UserCrud.vue
View File

@ -6,12 +6,12 @@ import axios from 'axios';
import auth from '../utils/Auth'; import auth from '../utils/Auth';
const toast = useToast(); const toast = useToast();
const products = ref(null); const users = ref(null);
const productDialog = ref(false); const productDialog = ref(false);
const deleteProductDialog = ref(false); const deleteUserDialog = ref(false);
const deleteProductsDialog = ref(false); const deleteUsersDialog = ref(false);
const user = ref({}); const user = ref({});
const selectedProducts = ref(null); const selectedUsers = ref(null);
const dt = ref(null); const dt = ref(null);
const filters = ref({}); const filters = ref({});
const submitted = ref(false); const submitted = ref(false);
@ -20,11 +20,10 @@ const checkAuth = () => {
auth.checkToken(true); auth.checkToken(true);
}; };
async function onShowClick() { async function showTable() {
try { try {
const response = await axios.get(`http://localhost:3001/user`, auth.getTokenHeader()); const response = await axios.get(`http://localhost:3001/user`, auth.getTokenHeader());
console.log(response.data); users.value = response.data;
products.value = response.data;
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
@ -54,6 +53,7 @@ async function onCreateClick() {
if (response.status === 204) { if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Created', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'User Created', life: 3000 });
productDialog.value = false; productDialog.value = false;
showTable();
} }
else { else {
console.error(response); console.error(response);
@ -70,6 +70,7 @@ onBeforeMount(() => {
}); });
onMounted(() => { onMounted(() => {
checkAuth(); checkAuth();
showTable();
}); });
const openNew = () => { const openNew = () => {
@ -88,9 +89,9 @@ const hideDialogChange = () => {
submitted.value = false; submitted.value = false;
}; };
const editProduct = (editProduct) => { const editUser = (editUser) => {
user.value = { ...editProduct }; user.value = { ...editUser };
console.log(user); console.log(user);
productDialogChange.value = true; productDialogChange.value = true;
}; };
@ -108,6 +109,7 @@ async function onChangeUser() {
if (response.status === 204) { if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Modified', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'User Modified', life: 3000 });
productDialogChange.value = false; productDialogChange.value = false;
showTable();
} }
else { else {
console.error(response); console.error(response);
@ -118,33 +120,34 @@ async function onChangeUser() {
} }
} }
const confirmDeleteProduct = (editProduct) => { const confirmDeleteUser = (editUser) => {
user.value = editProduct; user.value = editUser;
deleteProductDialog.value = true; deleteUserDialog.value = true;
}; };
async function deleteProduct() { async function deleteUser() {
try { try {
const response = await axios.delete(`http://localhost:3001/user/` + user.value.ID, auth.getTokenHeader()); const response = await axios.delete(`http://localhost:3001/user/` + user.value.ID, auth.getTokenHeader());
if (response.status !== 204) { if (response.status !== 204) {
console.error(response); console.error(response);
} }
showTable();
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
} }
products.value = products.value.filter((val) => val.ID !== user.value.ID); users.value = users.value.filter((val) => val.ID !== user.value.ID);
deleteProductDialog.value = false; deleteUserDialog.value = false;
user.value = {}; user.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Deleted', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'User Deleted', life: 3000 });
}; };
const confirmDeleteSelected = () => { const confirmDeleteSelected = () => {
deleteProductsDialog.value = true; deleteUsersDialog.value = true;
}; };
const deleteSelectedProducts = () => { const deleteSelectedUsers = () => {
selectedProducts.value.forEach(element => { selectedUsers.value.forEach(element => {
try { try {
const response = axios.delete(`http://localhost:3001/user/` + element.ID, auth.getTokenHeader()); const response = axios.delete(`http://localhost:3001/user/` + element.ID, auth.getTokenHeader());
if (response.status !== 204) { 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)); users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
deleteProductsDialog.value = false; deleteUsersDialog.value = false;
selectedProducts.value = null; selectedUsers.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
}; };
const initFilters = () => { const initFilters = () => {
@ -180,21 +183,19 @@ const initFilters = () => {
<template v-slot:start> <template v-slot:start>
<div class="my-2"> <div class="my-2">
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" /> <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" <Button label="Delete" icon="pi pi-trash" class="p-button-danger"
@click="confirmDeleteSelected" @click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
:disabled="!selectedProducts || !selectedProducts.length" />
</div> </div>
</template> </template>
</Toolbar> </Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID" <DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
:paginator="true" :rows="10" :filters="filters" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]" :rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
responsiveLayout="scroll"> responsiveLayout="scroll">
<template #header> <template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center"> <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;"> <Column headerStyle="min-width:10rem;">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" <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" <Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteProduct(slotProps.data)" /> @click="confirmDeleteUser(slotProps.data)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -287,29 +288,26 @@ const initFilters = () => {
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
:modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <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> <span v-if="user">Are you sure you want to delete <b>{{ user.name }}</b>?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
@click="deleteProductDialog = false" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
:modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <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> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" <Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductsDialog = false" /> @click="deleteUsersDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
</template> </template>
</Dialog> </Dialog>
</div> </div>