admin_transporte_frontend/src/pages/aplicaciones/ModalAplicacion.svelte

107 lines
3.7 KiB
Svelte

<script>
import Modal from "../../components/Modal.svelte";
import { getAplicacion, createAplicacion, updateAplicacion, deleteAplicacion } from "$/services/aplicaciones";
import { createEventDispatcher } from "svelte";
import { getPermisoPath } from "$/stores/global";
const dispatch = createEventDispatcher();
export let aplicacion = {}
let form = {}
let loading = false;
let permiso_app = getPermisoPath()
$: begin(aplicacion.id_aplicacion)
async function begin(id) {
try {
if (!id) return;
form = await getAplicacion(id) || {}
} catch (error) {
alert(error.detail || error)
}
}
async function onSave() {
try {
loading = true;
if (aplicacion.id_aplicacion) {
form = await updateAplicacion(form)
} else {
form = await createAplicacion(form)
}
alert('Se ha guardado la aplicación')
dispatch('refresh')
dispatch('close')
} catch (error) {
if (error.detail) {
alert(error.detail)
} else {
alert(JSON.stringify(error))
}
} finally {
loading = false;
}
}
async function onDelete() {
try {
if (!confirm('Eliminará el registro?')) return;
loading = true;
await deleteAplicacion(form.id_aplicacion)
alert('Se ha eliminado la aplicación')
dispatch('refresh')
dispatch('close')
} catch (error) {
alert(error.detail || error)
} finally {
loading = false;
}
}
</script>
<form action="" on:submit|preventDefault={onSave}>
<Modal title={'Aplicacion #' + (aplicacion.id_aplicacion || 'Nuevo')}
size="lg"
on:close={() => dispatch('close')}>
<div class={"form" + (permiso_app.escritura ? '' : ' disabled')}>
<div class="row mb-3">
<div class="col-md-3">ID</div>
<div class="col-md">
{#if aplicacion.id_aplicacion}
<input type="number" value={form.id_aplicacion} disabled class="form-control">
{:else}
<input type="number" bind:value={form.id_aplicacion} class="form-control">
{/if}
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">Nombre</div>
<div class="col-md">
<input type="text" bind:value={form.nombre_app} required class="form-control">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">Ruta URL</div>
<div class="col-md">
<input type="text" bind:value={form.path_app} required class="form-control">
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" bind:checked={form.vigente} role="switch" id="vigente">
<label class="form-check-label" for="vigente">Vigente</label>
</div>
</div>
</div>
<svelte:fragment slot="buttons">
{#if permiso_app.escritura}
<button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
<button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
{/if}
</svelte:fragment>
</Modal>
</form>
<style>
.disabled { pointer-events: none !important; }
</style>