The AOC Framework

Documentation

FRONTEND

`<aoc-grid-field>` #

This component is another field within a form designed to manage lists (collections), such as invoice lines in an invoice.

That is, to add models related to the model being created or edited.

Another example could be a customer form, which includes a grid field for contact persons of that customer.

Visually, it resembles a normal grid, although it usually has editable cells, can open subforms, has status indicators, and a delete button.

Inputs #

Name	Type	Description
modelConfig	AocModelConfig	The model-config instance that will be used internally
columns	AocGridColumn[]	Array of columns to define the grid
relationField	string	Default 'id'. The field that relates to the parent
relationMode	'direct' \| 'pivot'	Indicates whether to check the existing relationship in the model, or against the database
relationModel	AocModel	In 'pivot', the relationship is checked against a model. Otherwise, the main form's model is used
sortField	AocUiFieldPath	Sorting field, only for local sorting. If sorting on a column, it's preferable to use the column's settings
sortDir	'asc' \| 'desc'	Sorting direction, default 'asc'
autoExpand	boolean	Automatically expand contents of the expansion template
groupConfig	AocGridGroupConfig	Group models by a common criterion, for example, customers grouped by type of customer
rowNgStyle	AocGridRowNgStyle	Style for rows, can be a function
rowNgClass	AocGridRowNgClass	Class for rows, can be a function
formGroupTemplate	AocGridFieldFormGroupTemplate	Defines the form group of a row, a copy is created for each model in the grid. Allows editing extra fields not defined in the columns
modelChangeEventFiring	'real time' \| 'on edit complete'	Defines when model change events will be triggered while editing a field (default is 'on edit complete')
modelChangeFireInvalidValues	boolean	Defines whether model change events will be sent for invalid values (default is false)
enableDragAndDrop	boolean	Enables drag and drop of an element within the list (useful for reordering)
dragAndDropHandler	keyof T \| AocDropHandler	Function that will optionally be called when an element is dropped

Other inputs have been omitted for brevity.

Outputs #

Name	Type	Description
selectedChange	Array	Emits the change in the selection of models
modelsChange	AocGridFieldModelEvent	Emits the change in models

Example #

A grid field to add contacts to a customer (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
  ) {}
}

Complete example at quest-client/src/app/features/schemas/contacts/contact/contact-grid-field.component.ts