The AOC Framework

Documentación

FRONTEND

`<aoc-grid-field>` #

Este componente es un campo más de un formulario destinado a gestionar listas (collections), como por ejemplo las línea de factura en una factura.

Es decir, para añadir modelos relacionados con el modelo que se está creando o editando.

Otro ejemplo puede ser un formulario de cliente, que dentro de él tiene un grid field de personas de contacto de ese cliente.

A nivel visual, se asemeja a un grid normal, aunque suele tener celdas editables, puede abrir subformularios, tiene unos indicadores de estado, y un botón para borrar.

Inputs #

Nombre	Tipo	Descripción
modelConfig	AocModelConfig	La instancia model-config que se usará internamente
columns	AocGridColumn[]	Array de columnas para definir el grid
relationField	string	Por defecto 'id'. El campo que se relaciona con el padre
relationMode	'direct' \| 'pivot'	Indica si comprobamos la relación ya existente en el modelo, o si comprobamos contra la base de datos
relationModel	AocModel	En 'pivot' comprobamos la relación contra un modelo. Si no, se usa el modelo del form principal
sortField	AocUiFieldPath	Campo de ordenación, solo para ordenación local. Si la ordenación es sobre una columna, es preferible usar la configuración de dicha columna
sortDir	'asc' \| 'desc'	Dirección de ordenación, por defecto 'asc'
autoExpand	boolean	Autoexpandir contenidos de la plantilla de expansión
groupConfig	AocGridGroupConfig	Agrupar los modelos por un criterio común, por ejemplo, clientes agrupados por tipo de cliente
rowNgStyle	AocGridRowNgStyle	Estilo para filas, puede ser una función
rowNgClass	AocGridRowNgClass	Clase para filas, puede ser una función
formGroupTemplate	AocGridFieldFormGroupTemplate	Define el form group de una fila, se crea una copia de cada modelo del grid. Permite editar campos extra no definidos en las columnas
modelChangeEventFiring	'real time' \| 'on edit complete'	Define cuándo se dispararán los eventos de cambio de modelo al editar un campo (por defecto 'on edit complete')
modelChangeFireInvalidValues	boolean	Define si se van a enviar eventos de cambio de modelo para valores inválidos (por defecto false)
enableDragAndDrop	boolean	Activa arrastrar y soltar de un elemento dentro de la lista (útil para reordenar)
dragAndDropHandler	keyof T \| AocDropHandler	Función que se llamará opcionalmente al depositar un elemento

Se han omitido otros inputs por brevedad.

Outputs #

Nombre	Tipo	Descripción
selectedChange	Array	Emite el cambio de la selección de modelos
modelsChange	AocGridFieldModelEvent	Emite el cambio de modelos

Ejemplo #

Un grid field para añadir contactos a un cliente (Additional contacts):

<aoc-grid-field [modelConfig]="modelConfig" [columns]="columns"></aoc-grid-field>

export class ContactGridFieldComponent {
  protected columns: AocGridColumn[] = [
    {
      header: 'Name',
      display: Contact.field.NAME,
      defaultSort: 'desc'
    },
    {
      header: 'Phone 1',
      display: Contact.field.PHONE1,
    },
    {
      header: 'Phone 2',
      display: Contact.field.PHONE2,
    },
    {
      header: 'Email',
      display: Contact.field.EMAIL,
    },
    {
      header: 'Fax',
      display: Contact.field.FAX,
    }
  ];

  constructor(
    protected modelConfig: ContactModelConfig
  ) {}
}

Ejemplo completo en quest-client/src/app/features/schemas/contacts/contact/contact-grid-field.component.ts