The AOC Framework

Documentación

| Read in English Leer en Español

FRONTEND

`<aoc-master-detail>` #

Este componente permite crear disposiciones divididas y comunicar un modelo entre ellas.

Es decir, se usa para separar una vista en dos (ya sea vertical u horizontalmente) y comunicar datos entre ellas, como por ejemplo, para que la parte detail pueda recibir el modelo seleccionado en la parte master al hacer clic.

Internamente se usa la librería angular-split.

Inputs #

Nombre	Tipo	Descripción
masterModelConfig	AocModelConfig	La instancia model-config del maestro que se usará internamente
masterModelEmitter	AocModelEmitter	El emisor de modelo maestro al que se suscribirá internamente
detailWidthPercent	number	Ancho del detalle, por defecto 30%

Outputs #

Nombre	Tipo	Descripción
modelChange	T \| null	Emite el cambio de modelo

Ejemplo #

En este ejemplo dividimos con un separador vertical el panel de Clientes, en la parte izquierda tenemos el grid de clientes (master) y en la parte derecha tenemos el detalle del cliente seleccionado (aocDetail), con 3 pestañas (tabName).

  <aoc-master-detail [masterModelConfig]="modelConfig" [masterModelEmitter]="emitter" [detailWidthPercent]="45">
    <ng-template aocMaster>
      <app-customer-grid [emitter]="emitter"></app-customer-grid>
    </ng-template>
    <ng-template aocDetail tabName="Invoices">
      <app-invoice-grid [listener]="invoiceListener"></app-invoice-grid>
    </ng-template>
    <ng-template aocDetail tabName="Delivery notes">
      <app-delivery-note-grid [listener]="deliveryNoteListener"></app-delivery-note-grid>
    </ng-template>
    <ng-template aocDetail tabName="Budgets">
      <app-budget-grid [listener]="budgetListener"></app-budget-grid>
    </ng-template>
  </aoc-master-detail>

Ejemplo completo en quest-client/src/app/features/schemas/customers/customer/customer-panel.component.ts