basic-erp/apps/web/src/app/features/finance/journal-form.page.html

<sbo-toolbar bleed aria-label="Acciones del asiento">
  <a class="tb" routerLink=".." title="Volver a la lista"><sbo-icon name="find" />Lista</a>
  <a class="tb" [routerLink]="isNew() ? '.' : '../nuevo'" title="Asiento nuevo"><sbo-icon name="new" />Nuevo</a>
  <span class="tb-sep"></span>
  <button class="tb" type="button" aria-label="Primero" (click)="go('first')"><sbo-icon name="first" /></button>
  <button class="tb" type="button" aria-label="Anterior" (click)="go('prev')"><sbo-icon name="prev" /></button>
  <button class="tb" type="button" aria-label="Siguiente" (click)="go('next')"><sbo-icon name="next" /></button>
  <button class="tb" type="button" aria-label="Último" (click)="go('last')"><sbo-icon name="last" /></button>
</sbo-toolbar>

<sbo-window [title]="windowTitle()" [badge]="badge()" [status]="status()">
  <div class="sbo-hdr">
    <div class="sbo-col">
      @if (isNew()) {
        <sbo-select-field label="Serie" dbName="Series" [options]="seriesOptions()" [value]="series()" (valueChange)="series.set($event === null ? null : +$event)" />
      } @else {
        <sbo-text-field label="Número" dbName="JdtNum" [value]="'' + (doc()?.['JdtNum'] ?? '')" readonly />
      }
      <sbo-text-field label="Comentarios" dbName="Memo" [value]="memo()" (valueChange)="set('memo', $event)" [readonly]="saved()" />
    </div>
    <div class="sbo-col">
      <sbo-date-field label="Fecha de contabilización" dbName="ReferenceDate" [(value)]="referenceDate" [readonly]="saved()" required />
      <sbo-date-field label="Fecha de vencimiento" dbName="DueDate" [value]="dueDate()" (valueChange)="onDueDate($event)" [readonly]="saved()" />
      <sbo-date-field label="Fecha del documento" dbName="TaxDate" [(value)]="taxDate" [readonly]="saved()" />
    </div>
  </div>
  <div class="sbo-hdr">
    <div class="sbo-col">
      <sbo-field label="Indicador / Folio" dbName="Indicator · FolioPrefixString · FolioNumber">
        <sbo-input width="80px" ariaLabel="Indicador" [readonly]="saved()" [value]="indicator()" (valueChange)="indicator.set($event)" />
        @if (!saved()) {
          <button type="button" class="sbo-btn" aria-label="Abrir la lista de indicadores" title="Lista de valores" (click)="indicatorOpen.set(true)">…</button>
        }
        <sbo-input width="90px" [maxlength]="10" ariaLabel="Prefijo del folio" [readonly]="saved()" [value]="folioPrefix()" (valueChange)="set('folioPrefix', $event)" />
        <sbo-input ariaLabel="Número de folio" [readonly]="saved()" [value]="folioNumber()" (valueChange)="set('folioNumber', $event)" />
      </sbo-field>
    </div>
    <div class="sbo-col">
      <sbo-text-field label="Referencia 1" dbName="Reference" [value]="reference()" (valueChange)="set('reference', $event)" [readonly]="saved()" />
      <sbo-text-field label="Referencia 2" dbName="Reference2" [value]="reference2()" (valueChange)="set('reference2', $event)" [readonly]="saved()" />
      <sbo-text-field label="Referencia 3" dbName="Reference3" [value]="reference3()" (valueChange)="set('reference3', $event)" [readonly]="saved()" />
    </div>
  </div>

  <h3>Líneas</h3>
  @for (p of pendingList(); track p.key) {
    <p class="ask" role="alert">
      ¿Poner también {{ p.label }} «{{ p.value }}» en las líneas?
      <button type="button" class="btn main" (click)="applyPending(p.key, true)">Sí, actualizar</button>
      <button type="button" class="btn" (click)="applyPending(p.key, false)">No, dejarlas</button>
    </p>
  }
  <sbo-rows-table [columns]="columns" [rows]="lines()" (rowsChange)="setLines($event)" [readonly]="saved()" [removable]="!saved()" emptyText="Sin líneas." />
  @if (!saved()) {
    <p class="row">
      <button type="button" class="btn" (click)="addLine()">+ Añadir línea</button>
      <button type="button" class="btn" [disabled]="totals().difference === 0" (click)="balance()">Cuadrar</button>
    </p>
  }

  <table class="totals">
    <tbody>
      <tr><td>Debe</td><td>{{ fmt(totals().debit) }}</td></tr>
      <tr><td>Haber</td><td>{{ fmt(totals().credit) }}</td></tr>
      <tr class="strong"><td>Diferencia</td><td>{{ fmt(totals().difference) }}</td></tr>
    </tbody>
  </table>

  @if (isNew()) {
    <button sboActions class="btn main" type="button" [disabled]="saving() || loading()" (click)="save()">Crear</button>
  } @else if (manual() && doc()) {
    @if (confirmCancel()) {
      <span sboActions class="confirm">¿Cancelar el asiento? Se generará su reverso.</span>
      <button sboActions class="btn main" type="button" [disabled]="saving()" (click)="cancelEntry()">Sí, cancelar</button>
      <button sboActions class="btn" type="button" (click)="confirmCancel.set(false)">No</button>
    } @else {
      <button sboActions class="btn" type="button" [disabled]="saving()" (click)="confirmCancel.set(true)">Cancelar asiento</button>
    }
  }
  <a sboActions class="btn" routerLink="..">{{ saved() ? 'Cerrar' : 'Descartar' }}</a>
</sbo-window>

@if (indicatorOpen()) {
  <sbo-value-help
    [open]="true"
    [title]="indicatorLookup.title"
    [resource]="indicatorLookup.resource"
    [columns]="indicatorLookup.columns"
    [orderby]="indicatorLookup.orderby"
    (selected)="indicatorPicked($event)"
    (closed)="indicatorOpen.set(false)"
  />
}