Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/despacho-frontend/llms.txt

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

The appointment booking form embedded in startComponent.vue lets any website visitor schedule a legal consultation at Lex Consultoría without creating an account or logging in. The form is rendered as a centered 650 px-wide q-card under the Reserva tu Consulta heading, and submits a single JSON payload to the reservations API via the browser’s native fetch. On success, Quasar’s Notify plugin surfaces a blue confirmation toast; on failure, the error is captured in a catch block and logged to the console.
This endpoint does not require authentication. No Authorization header is sent with the booking request — any visitor can submit a reservation.

​
API Endpoint

POST http://localhost:2101/api/form/reserve/create
Content-Type: application/json

​
Form Fields

All fields map directly to JSON keys in the request body. The preferred_hour value is assembled client-side from three separate selects before being sent.
​
full_name
string
required
The client’s full name. Bound to the nombre ref via v-model on a q-input (dense, outlined) with a Bootstrap Icons bi-person prepend icon.
​
email
string
required
The client’s email address. Bound to the email ref. Rendered in a col-6 column alongside phone.
​
phone
string
required
The client’s phone number. Bound to the telefono ref. Rendered in the right col-6 column with a bi-telephone prepend icon.
​
required_service
string
required
The legal service area the client needs. Bound to the servicio ref via a q-select with a bi-list-ul prepend icon. Must be one of the six options below.Allowed values:
  • Derecho civil
  • Derecho familiar
  • Derecho mercantil
  • Derecho penal
  • Derecho laboral
  • Derecho inmobiliario
​
preferred_date
string
required
The client’s preferred consultation date in YYYY-MM-DD format. Bound to the fecha ref via a q-input with a calendar icon that opens a q-popup-proxy containing a q-date picker.Date picker configuration:
<q-date v-model="fecha" mask="YYYY-MM-DD" color="primary" minimal />
The mask="YYYY-MM-DD" prop ensures the value is always stored and sent in ISO date format.
​
preferred_hour
string
required
The client’s preferred time, formatted as "H:MM AM/PM" (e.g., "9:30 AM", "2:00 PM"). This value is not a single input — it is composed from three separate q-select fields and concatenated in enviarReserva:
preferred_hour: `${horaSel.value}:${minSel.value} ${ampm.value}`
SelectRefOptions
HourhoraSel"1" through "12" (generated via Array(12))
MinutesminSel"00", "10", "20", "30", "40", "50"
Periodampm"AM", "PM"
​
additional_message
string
An optional free-text message the client can provide for context. Bound to the mensaje ref via a q-input with type="textarea" and a bi-chat-square-text prepend icon.

​
The enviarReserva Function

The submit handler enviarReserva is triggered by the ENVIAR RESERVA q-btn. It builds the request headers, assembles the JSON body, calls fetch, and handles the result: 
// src/components/users/start/startComponent.vue
const enviarReserva = async () => {
  const myHeaders = new Headers()
  myHeaders.append("Content-Type", "application/json")

  const raw = JSON.stringify({
    full_name: nombre.value,
    email: email.value,
    phone: telefono.value,
    required_service: servicio.value,
    preferred_date: fecha.value,
    preferred_hour: `${horaSel.value}:${minSel.value} ${ampm.value}`,
    additional_message: mensaje.value,
  })

  try {
    const res = await fetch("http://localhost:2101/api/form/reserve/create", {
      method: "POST",
      headers: myHeaders,
      body: raw,
    })

    const data = await res.json()
    console.log("Respuesta backend:", data)
    $q.notify({
      color: "blue-4",
      textColor: "white",
      icon: "las la-check",
      message: "Reserva realizada",
    })
  } catch (err) {
    console.error("Error enviando reserva:", err)
  }
}

​
Success Notification

On a successful HTTP response, Quasar’s $q.notify plugin displays a non-blocking toast with the following configuration:
PropertyValue
color"blue-4"
textColor"white"
icon"las la-check" (Line Awesome checkmark)
message"Reserva realizada"
The success notification fires as soon as the API returns a parseable JSON response. It does not validate the response body — if you need to surface server-side validation errors, extend the try block to inspect data before calling $q.notify.

​
Error Handling

Network failures and JSON parse errors are caught by the catch block: 
catch (err) {
  console.error("Error enviando reserva:", err)
}
The current implementation logs errors silently. There is no user-facing error toast for failed submissions. If the API is unreachable or returns a non-2xx status, the visitor will see no feedback. Consider adding a $q.notify({ color: 'negative', ... }) call inside the catch block for production deployments.

​
Date Picker Details

The date field uses a q-popup-proxy anchored to a calendar icon prepended to the q-input. Clicking the icon opens an inline q-date component in minimal mode: 
<q-input dense outlined v-model="fecha" label="Fecha">
  <template v-slot:prepend>
    <q-icon class="cursor-pointer bi bi-calendar">
      <q-popup-proxy transition-show="scale" transition-hide="scale">
        <q-date v-model="fecha" mask="YYYY-MM-DD" color="primary" minimal />
      </q-popup-proxy>
    </q-icon>
  </template>
</q-input>
The popup transitions use Quasar’s built-in scale animation. The minimal prop hides the navigation header, rendering a compact month grid directly.

​
Time Selection Details

Time is split across three adjacent col-2 columns within the same 12-column row as the date field: 
const horas = [...Array(12)].map((_, i) => (i + 1).toString())
// → ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
Bound to horaSel ref. No zero-padding — values are bare string integers.
const minutos = ["00", "10", "20", "30", "40", "50"]
Bound to minSel ref. Values are zero-padded two-digit strings, stepping every 10 minutes.
<q-select v-model="ampm" label="AM/PM" :options="['AM', 'PM']" />
Bound to ampm ref. The two options are declared inline — no separate constant needed.
The three values are joined at submission time: `${horaSel.value}:${minSel.value} ${ampm.value}` → e.g., "10:30 AM".

​
Example Request Payload

{
  "full_name": "María García López",
  "email": "maria@example.com",
  "phone": "+34 612 345 678",
  "required_service": "Derecho familiar",
  "preferred_date": "2025-09-15",
  "preferred_hour": "10:30 AM",
  "additional_message": "Necesito asesoría sobre un proceso de custodia."
}

Build docs developers (and LLMs) love

Get started for freeTalk to us