Managing Adolescents: Registration and CRUD Operations

The Adolescentes module is the foundation of the UZDI platform. Every socio-educational case file (Expediente) and every measure (Medida) must be linked to an existing adolescent record. This module provides a complete CRUD interface for managing adolescent profiles, including personal data, socio-demographic context, and educational background.

Accessing the Module

Route: /app/adolescentes
Sidebar group: Gestión
Access: All authenticated users (tppr_id 1, 2, or 3) can view, search, create, edit, and delete records.

Table Features

The main table (AdolescentesView.vue) loads all records from GET /api/v1/adolescente on mount and applies all filtering and pagination client-side — no additional requests are made when you type in the search box or change a filter.

Feature	Detail
Rows per page	8 (`PAGE_SIZE = 8`)
Search	Matches on `nombre` (full name) or `cedula` (ID number), case-insensitive
Filter — Nacionalidad	Dropdown populated from the `nacionalidades` catalogue; default “Todas”
Columns	ID · Adolescente (name + canton) · Cédula · Edad · Nacionalidad · Ingreso · Acciones

The pagination control shows X–Y de Z registros and disables the previous/next buttons at the boundary pages. Changing the search query or any filter resets the current page to 1.

// AdolescentesView.vue — filtered computed
const filtered = computed(() => {
  const q = search.value.toLowerCase()
  return rows.value.filter(r => {
    const matchSearch = !q || r.nombre.toLowerCase().includes(q) || r.ced.includes(q)
    const matchNac    = filterNacionalidad.value === 'Todas' || r.nacionalidad === filterNacionalidad.value
    return matchSearch && matchNac
  })
})

Creating an Adolescent

Open the creation modal

Click the Nuevo adolescente button (top-right of the toolbar). An lg-size modal opens with two sections: Datos personales and Ubicación y contexto.

Fill the 16-field form

Complete all required fields (marked with a red asterisk). The Save button remains disabled until formValido returns true — all 10 required fields must have non-empty, non-zero values.Section 1 — Datos personales

Field	Input type	Required	Notes
Cédula de identidad	Text (max 20)	✅	National ID (`cedula`)
Nombres	Text	✅	Given names (`nombre`)
Apellidos	Text	✅	Family names (`apellido`)
Fecha de nacimiento	Date picker	✅	ISO 8601 date (`fecha_nac`)
Sexo	Select: M / F / O	✅	Masculino, Femenino, Otro (`sexo`)
Fecha de ingreso	Date picker	✅	System registration date (`fecha_ingr`)
Nacionalidad	Select from catalogue	✅	Loaded from `GET /api/v1/nacionalidad` (`nacn_id`)
Estado civil	Select from catalogue	✅	Loaded from `GET /api/v1/estado-civil` (`etcv_id`)
Etnia	Select from catalogue	✅	Loaded from `GET /api/v1/etnia` (`etna_id`)

Section 2 — Ubicación y contexto

Field	Input type	Required	Notes
Cantón	Select from catalogue	✅	Loaded from `GET /api/v1/canton` (`cntn_id`)
Nivel educativo (GDO)	Select from catalogue	❌	Academic grade; optional (`gdo_id`)
N.º de hijos	Number (min 0)	❌	Defaults to 0 (`hijos`)
Centro educativo	Text	❌	Name of the attending institution (`nved_nombre`)
Reincidente	Checkbox	❌	Check if adolescent has prior measures (`reincide`)
Hijo de PPL	Checkbox	❌	Check if parent is deprived of liberty (`hijoPpl`)
Observaciones	Textarea	❌	Free-text notes (`observaciones`)

Save the record

Click Guardar registro. The view calls adolescenteService.create(payload) which issues:

POST /api/v1/adolescente
Content-Type: application/json

{
  "cedula": "1720345678",
  "nombre": "Jorge",
  "apellido": "Morales",
  "fecha_nac": "2008-04-15",
  "sexo": "M",
  "fecha_ingr": "2024-01-10",
  "nacn_id": 1,
  "etcv_id": 2,
  "etna_id": 3,
  "cntn_id": 12,
  "gdo_id": 5,
  "hijos": 0,
  "reincide": false,
  "hijoPpl": false,
  "observaciones": "Primer ingreso al sistema."
}

On success the modal closes and the table refreshes by calling cargarAdolescentes().

Catalogues (nacionalidades, etnias, estados civiles, cantones, GDOs) are loaded once via useCatalogos() and cached for the session — they do not re-fetch each time you open a modal.

Editing an Adolescent

Click the edit icon

In the Acciones column of any table row, click the pencil icon. The modal opens in edit mode, pre-populated from row._raw.

Modify fields

All 16 fields are editable. The modal title changes to Editar adolescente · #ID where #ID is the adolescent’s database ID.

Save changes

Click Actualizar. This calls adolescenteService.update(id, payload):

PATCH /api/v1/adolescente/:id
Content-Type: application/json

{ ...same payload shape as POST... }

The table refreshes on success.

Deleting an Adolescent

Click the delete icon

Click the ban icon in the Acciones column. A small confirmation modal (sm size) opens.

Confirm deletion

The modal shows the adolescent’s full name and ID. Click Eliminar registro to confirm.

DELETE /api/v1/adolescente/:id

On success the modal closes and the record is removed from the table.

The delete action issues a hard DELETE at the API level. The confirmation modal warns: “El adolescente y sus expedientes asociados se eliminarán de forma permanente. Esta acción no se puede deshacer.” Verify the record before confirming.

Full Field Reference

Field (form key)	API key	Type	Required	Description
Cédula	`cedula`	`string` (max 20)	✅	National identity document number
Nombres	`nombre`	`string`	✅	Given names
Apellidos	`apellido`	`string`	✅	Family names
Fecha de nacimiento	`fecha_nac`	`string` (ISO date)	✅	Used to compute displayed age
Sexo	`sexo`	`'M' \| 'F' \| 'O'`	✅	Biological sex
Fecha de ingreso	`fecha_ingr`	`string` (ISO date)	✅	System registration date
Nacionalidad	`nacn_id`	`number` (FK)	✅	References `nacionalidad` catalogue
Estado civil	`etcv_id`	`number` (FK)	✅	References `estado_civil` catalogue
Etnia	`etna_id`	`number` (FK)	✅	References `etnia` catalogue
Cantón	`cntn_id`	`number` (FK)	✅	References `canton` catalogue
Nivel educativo (GDO)	`gdo_id`	`number` (FK)	❌	References `gdo` catalogue
N.º de hijos	`hijos`	`number`	❌	Defaults to `0`
Centro educativo	`nved_nombre`	`string`	❌	Name of school / institution
Reincidente	`reincide`	`boolean`	❌	Prior measures flag
Hijo de PPL	`hijoPpl`	`boolean`	❌	Parent deprived of liberty flag
Observaciones	`observaciones`	`string`	❌	Free-text notes

Service Layer Reference

All HTTP calls are delegated to adolescenteService (src/services/adolescente.service.ts):

// adolescente.service.ts
export const adolescenteService = {
  // GET /api/v1/adolescente
  async getAll(): Promise<AdolescenteRow[]>,

  // POST /api/v1/adolescente
  async create(payload: AdolescentePayload): Promise<AdolescenteDto>,

  // PATCH /api/v1/adolescente/:id
  async update(id: number, payload: AdolescentePayload): Promise<AdolescenteDto>,

  // DELETE /api/v1/adolescente/:id
  async remove(id: number): Promise<void>,
}

getAll() maps the raw DTO array into display rows, computing the full name (nombre + apellido), formatted ingreso date (DD/MM/YYYY), and age from fecha_nac. The raw DTO is preserved in _raw for the edit pre-fill logic.

The eye icon in the Acciones column navigates directly to /app/expedientes, where you can search by the adolescent’s name or cédula to find all their associated case files.

Using the Application

Reporting & Administration

Accessing the Module

Table Features

Creating an Adolescent

Editing an Adolescent

Deleting an Adolescent

Full Field Reference

Service Layer Reference

Build docs developers (and LLMs) love

Using the Application

Reporting & Administration

Documentation Index

​Accessing the Module

​Table Features

​Creating an Adolescent

​Editing an Adolescent

​Deleting an Adolescent

​Full Field Reference

​Service Layer Reference

​Viewing Related Expedientes

Build docs developers (and LLMs) love

Accessing the Module

Table Features

Creating an Adolescent

Editing an Adolescent

Deleting an Adolescent

Full Field Reference

Service Layer Reference

Viewing Related Expedientes