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';
|
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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user