admin_transporte_frontend/src/pages/personas/Form.svelte

86 lines
2.5 KiB
Svelte

<script>
import { getTiposPersona } from "$/services/tipos_persona";
export let form = {}
export let es_nuevo = true
let tipos_tratamiento = [];
let rut = '';
$: begin(es_nuevo)
$: !es_nuevo && (rut = `${form.rut || ''}-${form.dv || ''}`);
async function begin(es_nuevo) {
try {
tipos_tratamiento = await getTiposPersona()
} catch (error) {
globalThis.toast.success(error.detail || error)
}
}
function onChangeRut({ target: { value } }) {
const valorRut = value.replace(/[.|-]/,'');
const dv = valorRut.substring(valorRut.length -1)
const rut = valorRut.substring(0, valorRut.length -1)
form = { ...form, rut, dv }
}
</script>
<div class="row">
<div class="col-md mb-3">
RUT
<input type="text" value={rut} class="form-control" required disabled={!es_nuevo} on:input={onChangeRut}>
</div>
<div class="col-md mb-3">
Tipo Tratamiento
<select bind:value={form.id_tipo_tratamiento} class="form-select">
<option value=""></option>
{#each tipos_tratamiento as tipo}
<option value={tipo.id_tipo_tratamiento}>{tipo.tratamiento}</option>
{/each}
</select>
</div>
</div>
<div class="row">
<div class="col-md mb-3">
Nombres
<input type="text" bind:value={form.nombres} class="form-control" required>
</div>
<div class="col-md mb-3">
Apellido 1
<input type="text" bind:value={form.apellido_a} class="form-control" required>
</div>
<div class="col-md mb-3">
Apellido 2
<input type="text" bind:value={form.apellido_b} class="form-control">
</div>
</div>
<div class="row">
<div class="col-md mb-3">
Teléfono
<input type="tel" bind:value={form.fono} class="form-control">
</div>
<div class="col-md mb-3">
Email
<input type="email" bind:value={form.email} class="form-control" required>
</div>
<div class="col-md mb-3">
Fecha de nacimiento
<input type="date" bind:value={form.fecha_nacimiento} class="form-control">
</div>
</div>
<div class="row">
<div class="col-md mb-3">
Comuna
<select bind:value={form.id_comuna} class="form-select">
<option value=""></option>
</select>
</div>
<div class="col-md mb-3">
Dirección
<input type="text" bind:value={form.direccion} class="form-control">
</div>
</div>