User edit and delete

This commit is contained in:
Juan Pablo Vial
2025-05-12 19:44:16 -04:00
parent 425b85e40d
commit d22480dcb8
2 changed files with 121 additions and 10 deletions

View File

@ -2,5 +2,9 @@
use Incoviba\Controller\API\Admin\Users;
$app->group('/users', function($app) {
$app->post('/add[/]', Users::class . ':add');
$app->post('/add[/]', [Users::class, 'add']);
});
$app->group('/user/{user_id}', function($app) {
$app->post('/edit[/]', [Users::class, 'edit']);
$app->delete('[/]', [Users::class, 'delete']);
});

View File

@ -14,15 +14,15 @@
</th>
</tr>
</thead>
<tbody>
<tbody id="users">
@foreach($users as $user)
<tr>
<tr data-user="{{ $user->id }}">
<td>{{ $user->name }}</td>
<td class="right aligned">
<button class="ui mini blue icon button">
<button class="ui mini blue icon button edit" data-user="{{ $user->id }}">
<i class="edit icon"></i>
</button>
<button class="ui mini red icon button">
<button class="ui mini red icon button remove" data-user="{{ $user->id }}">
<i class="trash icon"></i>
</button>
</td>
@ -50,6 +50,10 @@
<label>Contraseña</label>
<input type="password" name="password" placeholder="Contraseña">
</div>
<div class="field">
<label>Confirmar contraseña</label>
<input type="password" name="password_confirmation" placeholder="Confirmar contraseña">
</div>
</form>
</div>
<div class="actions">
@ -62,6 +66,45 @@
</div>
</div>
</div>
<div class="ui modal" id="edit-user-modal">
<i class="close icon"></i>
<div class="header">
Editar usuario
</div>
<div class="content">
<form class="ui form">
<input type="hidden" name="id" />
<div class="field">
<label>Contraseña Antigua</label>
<input type="password" name="old_password" placeholder="Contraseña Antigua">
</div>
<div class="field">
<label>Force Change?</label>
<div class="ui checkbox">
<input type="checkbox" name="force" >
<label>Yes</label>
</div>
</div>
<div class="field">
<label>Contraseña</label>
<input type="password" name="password" placeholder="Contraseña">
</div>
<div class="field">
<label>Confirmar contraseña</label>
<input type="password" name="password_confirmation" placeholder="Confirmar contraseña">
</div>
</form>
</div>
<div class="actions">
<div class="ui black deny button">
Cancelar
</div>
<div class="ui positive right labeled icon button">
Guardar
<i class="checkmark icon"></i>
</div>
</div>
</div>
@endsection
@include('layout.body.scripts.cryptojs')
@ -74,12 +117,20 @@
return [passphrase, encrypted.toString()].join('')
}
$(document).ready(function () {
$('#create-user-modal').modal({
const $createUserModal = $('#create-user-modal')
$createUserModal.modal({
onApprove: function() {
const form = document.querySelector('#create-user-modal form')
const password = form.querySelector('[name="password"]').value
const password_confirmation = form.querySelector('[name="password_confirmation"]').value
if (password !== password_confirmation) {
alert('Las contraseñas no coinciden')
return
}
const url = '{{$urls->api}}/admin/users/add'
const method = 'post'
const body = new FormData(document.querySelector('#create-user-modal form'))
body.set('password', encryptPassword(body.get('password')))
const body = new FormData(form)
body.set('password', encryptPassword(password))
fetchAPI(url, {method, body}).then(response => {
if (!response) {
return;
@ -92,8 +143,64 @@
})
}
})
$('#create-user-button').on('click', function () {
$('#create-user-modal').modal('show')
const $editUserModal = $('#edit-user-modal')
$editUserModal.modal({
onApprove: function() {
const form = document.querySelector('#edit-user-modal form')
const user_id = form.querySelector('[name="id"]').value
const old_password = form.querySelector('[name="old_password"]').value
const password = form.querySelector('[name="password"]').value
const password_confirmation = form.querySelector('[name="password_confirmation"]').value
if (password !== password_confirmation) {
alert('Las nuevas contraseñas no coinciden')
return
}
const url = `{{$urls->api}}/admin/user/${user_id}/edit`
const method = 'post'
const body = new FormData(form)
body.set('old_password', encryptPassword(old_password))
body.set('password', encryptPassword(password))
if (form.querySelector('[name="force"]').checked) {
body.set('force', 'true')
}
fetchAPI(url, {method, body}).then(response => {
if (!response) {
return;
}
response.json().then(result => {
if (result.success) {
location.reload()
}
})
})
}
})
document.getElementById('create-user-modal').addEventListener('submit', event => {
$createUserModal.modal('show')
})
document.querySelectorAll('.button.edit').forEach(button => {
button.addEventListener('click', clickEvent => {
const user_id = clickEvent.currentTarget.dataset.user
$editUserModal.find('input[name="id"]').val(user_id)
$editUserModal.modal('show')
})
})
document.querySelectorAll('.button.remove').forEach(button => {
button.addEventListener('click', clickEvent => {
const user_id = clickEvent.currentTarget.dataset.user
const url = `{{$urls->api}}/admin/user/${user_id}`
const method = 'delete'
fetchAPI(url, {method}).then(response => {
if (!response) {
return;
}
response.json().then(result => {
if (result.success) {
location.reload()
}
})
})
})
})
});
</script>