basic-erp/apps/web/src/app/features/documents/document-form.page.html

<sbo-toolbar bleed aria-label="Acciones del documento">
  <a class="tb" routerLink=".." title="Volver a la lista"><sbo-icon name="find" />Lista</a>
  <a class="tb" [routerLink]="isNew() ? '.' : '../nuevo'" title="Documento 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">
      @for (f of layout.header.left; track $index) {
        <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
      }
    </div>
    <div class="sbo-col">
      @for (f of layout.header.right; track $index) {
        <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
      }
    </div>
  </div>

  <sbo-lines-grid
    [columns]="columns"
    [lines]="lines()"
    (linesChange)="setLines($event)"
    (notice)="notify($event)"
    [readonly]="readOnly()"
    [newLine]="newLine"
    [recalc]="recalc"
    [multiAdd]="multi"
  />

  <div class="sbo-hdr" style="margin-top: 14px">
    <div class="sbo-col">
      @for (f of layout.footer.left; track $index) {
        <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
      }
    </div>
    <div class="sbo-col">
      @for (f of layout.footer.right; track $index) {
        <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
      }
    </div>
  </div>

  @if (!readOnly()) {
    <button sboActions class="btn main" type="button" [disabled]="saving() || loading()" (click)="save()">
      {{ isNew() ? 'Crear' : 'Actualizar' }}
    </button>
  }
  @if (conflict()) {
    <button sboActions class="btn" type="button" (click)="reload()">Recargar</button>
  }
  <a sboActions class="btn" routerLink="..">{{ readOnly() ? 'Cerrar' : 'Cancelar' }}</a>
  @if (partner && copyFromItems().length) {
    <sbo-menu-button sboActionsEnd label="Copiar de" [items]="copyFromItems()" (picked)="copyFrom($event)" />
  }
  @if (partner && copyToItems().length) {
    <sbo-menu-button sboActionsEnd label="Copiar a" [items]="copyToItems()" (picked)="copyTo($event)" />
  }
</sbo-window>

@if (copyListScreen(); as src) {
  <sbo-value-help
    [open]="true"
    [title]="'Copiar de: ' + copyListTitle()"
    [resource]="src.resource"
    [columns]="copyListColumns"
    [baseFilter]="copyListFilter()"
    orderby="DocEntry desc"
    rowKey="DocEntry"
    (selected)="copyPicked($event)"
    (closed)="copyListFor.set(null)"
  />
}

<ng-template #field let-f>
  @switch (f.type) {
    @case ('partner') {
      <sbo-lookup-field
        [label]="f.label"
        [required]="!!f.required"
        [readonly]="readOnly() || !isNew() || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="onPartnerText($event)"
        [lookup]="partnerLookup"
        resolveOnLeave
        (picked)="onPartner($event)"
      />
    }
    @case ('lookup') {
      <sbo-lookup-field
        [label]="f.label"
        [required]="!!f.required"
        [readonly]="readOnly() || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event)"
        [lookup]="f.lookup"
        resolveOnLeave
      />
    }
    @case ('warehouse') {
      <sbo-lookup-field
        [label]="f.label"
        [required]="!!f.required"
        [readonly]="readOnly() || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event)"
        [lookup]="warehouseLookup"
        resolveOnLeave
      />
    }
    @case ('date') {
      <sbo-date-field
        [label]="f.label"
        [required]="!!f.required"
        [readonly]="readOnly() || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event)"
      />
    }
    @case ('select') {
      <sbo-select-field
        [label]="f.label"
        [required]="!!f.required"
        [readonly]="readOnly() || locked(f)"
        [options]="f.options"
        placeholder=""
        [value]="str(header()[f.key]) || null"
        (valueChange)="setHeader(f.key, $event ?? '')"
      />
    }
    @case ('number') {
      <sbo-number-field
        [label]="f.label"
        [decimals]="f.decimals"
        [readonly]="readOnly() || locked(f)"
        [value]="+str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event ?? 0)"
      />
    }
    @case ('textarea') {
      <sbo-textarea-field
        [label]="f.label"
        [readonly]="readOnly() || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event)"
      />
    }
    @case ('folio') {
      <sbo-field [label]="f.label">
        <sbo-input
          width="90px"
          [maxlength]="10"
          [readonly]="readOnly() || locked(f)"
          [value]="str(header()[f.prefixKey])"
          (valueChange)="setHeader(f.prefixKey, $event)"
        />
        <sbo-input
          ariaLabel="Número de folio"
          [readonly]="readOnly() || locked(f)"
          [value]="str(header()[f.numberKey])"
          (valueChange)="setHeader(f.numberKey, $event)"
        />
      </sbo-field>
    }
    @case ('series') {
      <sbo-field [label]="f.label">
        <sbo-select
          width="170px"
          ariaLabel="Serie de numeración"
          placeholder="(por defecto)"
          [options]="seriesOptions()"
          [readonly]="readOnly() || !isNew() || locked(f)"
          [value]="seriesValue()"
          (valueChange)="setHeader(f.key, $event ?? '')"
        />
        <sbo-input readonly ariaLabel="Número del documento" [value]="str(doc()?.['DocNum'])" />
      </sbo-field>
    }
    @case ('freight') {
      <sbo-field [label]="f.label">
        <sbo-select
          width="150px"
          ariaLabel="Gasto adicional del flete"
          placeholder=""
          [options]="expenseOptions()"
          [readonly]="readOnly() || !freightEditable() || locked(f)"
          [value]="str(header()['FreightExpense']) || defaultExpense() || null"
          (valueChange)="setHeader('FreightExpense', $event ?? '')"
        />
        <sbo-number
          ariaLabel="Importe del flete"
          [decimals]="2"
          [readonly]="readOnly() || !freightEditable() || locked(f)"
          [value]="+str(header()['FreightAmount'])"
          (valueChange)="setHeader('FreightAmount', $event ?? 0)"
        />
      </sbo-field>
    }
    @case ('computed') {
      <sbo-text-field [label]="f.label" readonly [value]="computedValue(f.source)" />
    }
    @default {
      <sbo-text-field
        [label]="f.label"
        [readonly]="readOnly() || !!f.readonly || locked(f)"
        [value]="str(header()[f.key])"
        (valueChange)="setHeader(f.key, $event)"
      />
    }
  }
</ng-template>