Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Edwin950821/BodegaX/llms.txt

Use this file to discover all available pages before exploring further.

The Settings page (/settings) is the primary user management dashboard for BodegaX administrators. When the page initializes, it automatically fetches every registered user from the backend and renders them in a scrollable table, giving admins a real-time view of who has access to the warehouse system. Three operations are available per user — create, edit, and delete — each backed by its own REST endpoint on the Spring Boot API running at http://localhost:8080.

​
How the User List Loads

Every time the Settings component mounts, ngOnInit triggers getUsers(), which issues a GET request to /admin/all and populates the usuarios array that drives the template table. 
ngOnInit(): void {
  this.getUsers();
}

getUsers() {
  this.http.get("http://localhost:8080/admin/all").subscribe((res: any) => {
    this.usuarios = res;
  });
}
After any edit or delete operation completes, getUsers() is called again so the table always reflects the current state of the database.

​
User Table Layout

The table rendered in settings.component.html has four columns: Estado (status checkbox), Cliente (user name), a spacer, and Accion (edit and delete icon buttons). The table is displayed inside a scrollable container capped at 200 px in height. 
<div style="max-height: 200px; overflow: auto; width: 400px;">
  <table>
    <tr>
      <th>Estado</th>
      <th>Cliente</th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
      <th>Accion</th>
    </tr>
    <tr *ngFor="let usuario of usuarios" class="center swhite checkbox">
      <div><input type="checkbox"></div>
      <td>{{ usuario.nombre }}</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <img src="/assets/edit.png"  class="s-img" (click)="editar(usuario)">
      <img src="/assets/trash.png" class="s-img" (click)="eliminar(usuario)">
    </tr>
  </table>
</div>

​
Creating a New User

Clicking the Crear Usuario button calls crear(), which opens UserFormDialog without any pre-filled data, signalling a new-user flow. Note that crear() does not subscribe to afterClosed() — to see the newly created user in the table, navigate away and back, or use the edit flow, which does trigger a refresh. 
crear() {
  this.dialog.open(UserFormDialog);
}
1

Open the Create Dialog

Click the Crear Usuario button at the top of the Settings page. The UserFormDialog modal appears with all fields blank.
2

Fill in the User Form

Complete the five fields presented by the dialog:
​
Nombre Del Negocio
string
required
Display name or business name for the user account (nombre field sent to the API).
​
Documento
string
required
National ID or document number (id field sent to the API).
​
Direccion
string
Physical address of the user or business location (direccion field sent to the API).
​
Contraseña
string
required
Account password. Autocomplete is set to new-password to prevent browser autofill.
​
Confirmar Contraseña
string
required
Must match Contraseña exactly; the dialog validates equality before sending the request.
3

Submit the Form

Click Registrarse. UserFormDialog.register() validates that no required field is empty and that both password fields match, then issues a POST request:
POST http://localhost:8080/admin/create
Content-Type: application/json

{
  "role":      "user",
  "nombre":    "ElMaster",
  "id":        "123456789",
  "password":  "s3cur3P@ss",
  "direccion": "Calle 45 # 12-30"
}
4

Success Confirmation

On a successful response, a MessageDialog appears with the message “Cliente Creado Con Exito” and UserFormDialog closes automatically (mydialog.close()).
The role field is always hard-coded to "user" when creating accounts through the Settings page or the self-registration form. To create an admin account, the role must be set directly in the PostgreSQL database or via a custom backend endpoint.

​
Editing an Existing User

Clicking the edit icon on a table row calls editar(user), which opens UserFormDialog with the selected user’s data pre-populated. Unlike crear(), editar() subscribes to afterClosed() and re-calls getUsers() when the dialog closes, so the table updates immediately. 
editar(user: any) {
  var res = this.dialog.open(UserFormDialog, {
    data: {
      username: user.nombre,
      id:       user.id,
      password: user.password,
      address:  user.direccion,
      uuid:     user.uuid
    }
  });
  res.afterClosed().subscribe(r => {
    this.getUsers();
  });
}
1

Click the Edit Icon

In the Accion column, click the pencil/edit icon next to the user you want to modify. editar(user) passes the following data object to UserFormDialog:
{
  username: user.nombre,
  id:       user.id,
  password: user.password,
  address:  user.direccion,
  uuid:     user.uuid
}
2

Modify the Fields

All five form fields are pre-filled with the existing values. Update whichever fields require changes. The uuid is carried silently — it is not displayed but is sent with the update request to identify the record.
3

Save Changes

Click Registrarse. Because data.uuid is present, UserFormDialog.register() routes to the edit branch and issues a PUT request:
PUT http://localhost:8080/admin/edit
Content-Type: application/json

{
  "role":      "user",
  "nombre":    "ElMaster",
  "id":        "123456789",
  "password":  "newP@ss99",
  "direccion": "Carrera 10 # 5-20",
  "uuid":      "a1b2c3d4-e5f6-..."
}
4

Dialog Closes and List Refreshes

A success response triggers a MessageDialog with the message “Cliente editado Con Exito”, closes UserFormDialog, and the parent’s afterClosed() subscription refreshes the user table.

​
Deleting a User

Clicking the trash icon on a table row calls eliminar(user), which opens a ConfirmDialog before issuing any destructive request. 
eliminar(user: any) {
  var res = this.dialog.open(ConfirmDialog, {
    data: { title: "Estas seguro que desea eliminar este registro?" }
  });
  res.afterClosed().subscribe(r => {
    if (r == true) {
      this.http.delete("http://localhost:8080/admin/delete", { body: user })
        .subscribe((x: any) => {
          this.getUsers();
        });
    }
  });
}
1

Click the Delete Icon

In the Accion column, click the trash icon for the target user. A ConfirmDialog appears with the message: “Estas seguro que desea eliminar este registro?”
2

Confirm the Deletion

Click Confirm in the dialog. ConfirmDialog.confirm() closes the modal and returns true to the afterClosed() observer.
3

DELETE Request Fires

The Settings component checks that r == true and issues a DELETE request, sending the full user object in the request body:
DELETE http://localhost:8080/admin/delete
Content-Type: application/json

{
  "uuid":      "a1b2c3d4-e5f6-...",
  "nombre":    "ElMaster",
  "id":        "123456789",
  "password":  "...",
  "direccion": "...",
  "role":      "user"
}
4

List Refreshes

On a successful delete response, getUsers() is called and the removed user disappears from the table.
Deletion is permanent. BodegaX does not implement a soft-delete or recycle-bin mechanism — once confirmed, the record is removed from PostgreSQL immediately.

​
Self-Registration via /register

In addition to admin-created accounts, BodegaX exposes a public self-registration route at /register. This page is accessible without authentication and allows new warehouse clients to create their own user-role accounts.

Registration Fields

The /register form collects the same five fields as the admin dialog: Nombre Del Negocio (username), Documento (id), Dirección (address), Contraseña (password), and Confirmar Contraseña (conpassword).

Auto-Login After Registration

On a successful POST /admin/create response, RegisterComponent displays a success message, then immediately posts the new credentials to POST /admin/login and calls AppService.logIn(res), storing the session and navigating to / without requiring a separate login step.
The self-registration flow in register.component.ts: 
register() {
  // Step 1 – Validate fields
  if (this.username === '' || this.password === '' || this.conpassword === '' || this.id === '') {
    this.dialog.open(MessageDialog, { data: { title: "Por Favor Rellenar Todos Los Campos" } });
    return;
  }
  if (this.password !== this.conpassword) {
    this.dialog.open(MessageDialog, { data: { title: "La Contraseñas no coinciden" } });
    return;
  }

  // Step 2 – Create account
  this.http.post("http://localhost:8080/admin/create", {
    role:      "user",
    nombre:    this.username,
    id:        this.id,
    password:  this.password,
    direccion: this.address,
  }).subscribe(res => {
    if (res) {
      // Step 3 – Show success message
      this.dialog.open(MessageDialog, { data: { title: "Usuario Creado Con Exito" } });

      // Step 4 – Auto-login
      this.http.post("http://localhost:8080/admin/login", {
        username: this.username,
        password: this.password
      }).subscribe(res => {
        if (res) {
          this.appSvc.logIn(res); // Persists session, navigates to /
        }
      });
    }
  });
}
Encourage new warehouse clients to register through /register rather than having admins create accounts on their behalf. The auto-login flow means new users land directly on the dashboard after their account is created.

​
Form Validation Rules

Both UserFormDialog and RegisterComponent enforce the same client-side validation before any HTTP request is made:
RuleBehavior
Required fields emptyOpens MessageDialog — “Por Favor Rellenar Todos Los Campos”
Passwords do not matchOpens MessageDialog — “La Contraseñas no coinciden”
UUID presenceIf data.uuid exists → PUT /admin/edit; otherwise → POST /admin/create
There is no client-side format enforcement (such as regex or length rules) on the nombre, id, or direccion fields beyond the empty-field check. Any non-empty string is accepted by the frontend validation layer.

Build docs developers (and LLMs) love

Get started for freeTalk to us