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

reformat usercrud

Browse Source
This commit is contained in:
Martin Araneda 2023-02-20 13:07:31 -03:00
parent be7707d5f7
commit bbd884d80c
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import auth from '../utils/Auth';
const toast = useToast(); const toast = useToast();
const users = ref(null); const users = ref(null);
const productDialog = ref(false); const userDialog = ref(false);
const deleteUserDialog = ref(false); const deleteUserDialog = ref(false);
const deleteUsersDialog = ref(false); const deleteUsersDialog = ref(false);
const user = ref({}); const user = ref({});
@ -15,7 +15,7 @@ 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);
const productDialogChange = ref(false); const userDialogChange = ref(false);
const checkAuth = () => { const checkAuth = () => {
auth.checkToken(true); auth.checkToken(true);
}; };
@ -52,7 +52,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; userDialog.value = false;
showTable(); showTable();
} }
else { else {
@ -76,16 +76,16 @@ onMounted(() => {
const openNew = () => { const openNew = () => {
user.value = {}; user.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;
}; };
@ -93,7 +93,7 @@ const editUser = (editUser) => {
user.value = { ...editUser }; user.value = { ...editUser };
console.log(user); console.log(user);
productDialogChange.value = true; userDialogChange.value = true;
}; };
async function onChangeUser() { async function onChangeUser() {
@ -108,7 +108,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; userDialogChange.value = false;
showTable(); showTable();
} }
else { else {
@ -183,8 +183,8 @@ 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="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="!selectedUsers || !selectedUsers.length" />
</div> </div>
</template> </template>
@ -195,8 +195,7 @@ const initFilters = () => {
: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} users" 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 Users</h5> <h5 class="m-0">Manage Users</h5>
@ -214,8 +213,7 @@ const initFilters = () => {
{{ slotProps.data.name }} {{ slotProps.data.name }}
</template> </template>
</Column> </Column>
<Column field="username" header="Username" :sortable="true" <Column field="username" header="Username" :sortable="true" headerStyle="width:14%; Fin-width:10rem;">
headerStyle="width:14%; Fin-width:10rem;">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Username</span> <span class="p-column-title">Username</span>
{{ slotProps.data.username }} {{ slotProps.data.username }}
@ -237,7 +235,7 @@ const initFilters = () => {
</Column> </Column>
</DataTable> </DataTable>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="New User" :modal="true" <Dialog v-model:visible="userDialog" :style="{ width: '450px' }" header="New User" :modal="true"
class="p-fluid"> class="p-fluid">
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
@ -262,8 +260,8 @@ 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 User" <Dialog v-model:visible="userDialogChange" :style="{ width: '450px' }" header="New User" :modal="true"
:modal="true" class="p-fluid"> class="p-fluid">
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="user.name" required="true" autofocus <InputText id="name" v-model.trim="user.name" required="true" autofocus
@ -305,8 +303,7 @@ const initFilters = () => {
<span v-if="user">Are you sure you want to delete the selected users?</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="deleteUsersDialog = false" />
@click="deleteUsersDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
</template> </template>
</Dialog> </Dialog>