minor fixes to Users,OS crud
This commit is contained in:
parent
6109a4dab7
commit
0210b40731
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user