Tópico 2: Customizando campos do formulário de edição

Para que os campos sejam customizáveis, foi criada uma nova propriedade do tipo objeto dentro de columns, com o nome de editProperties. Para maiores informações, consulte nossa interface ThfGridColumn. Mas dentro de editProperties existem diversas propriedades, pra escolher qual componente será nessa coluna, máximo ou mínimo de caracteres, opções para popular o select, mínimo e máximo para valores numéricos e etc.

Inicialmente, estamos liberando 9 componentes para utilizar no formulário de edição, sendo eles: 

Po-Input, Po-Number, Po-Datepicker, Po-Switch, Po-Select, Po-Combo, Po-Multiselect, Po-Decimal e Po-Checkbox.

Por padrão, o componente default de cada coluna será o Input, mas para utilizar os outros componentes deve-se passar a propriedade editProperties e dentro dela passar a propriedade componentEditable.

Segue um exemplo mais completo:

columns: Array<ThfGridColumn> = [
  {
    property: 'id',
    label: 'Id',
    editProperties: {
      readonly: true
    }
  },
  {
    property: 'email',
    label: 'Email',
    editProperties: {
      clean: true,
      errorMessage: 'Teste erro',
      required: true,
      icon: 'po-icon-bluetooth',
      placeholder: 'Placeholder input'
    }
  },
  {
    property: 'city',
    label: 'Cidade',
    type: 'number',
    editProperties: {
      componentEditable: 'number',
      clean: true,
      placeholder: 'Cidades',
      errorMessage: 'Erro number',
      icon: 'po-icon-bluetooth',
      minLength: 3,
      maxLength: 15,
      maxValue: 4401307,
      minValue: 150,
      required: true,
      step: 5
    }
  },
  {
    property: 'birthdate',
    label: 'Aniversário',
    editProperties: {
      componentEditable: 'datepicker',
      clean: true,
      errorMessage: 'Erro date',
      format: 'yyyy/mm/dd',
      maxValue: '2024/03/19',
      minValue: '1980/11/01',
      placeholder: 'Date place',
      required: true
    },
    width: 150
  },
  {
    property: 'status',
    label: 'Status',
    editProperties: {
      componentEditable: 'switch',
      formatModel: true,
      booleanTrue: 'active',
      booleanFalse: 'inactive'
    }
  },
  {
    property: 'genre',
    label: 'Genero',
    editProperties: {
      componentEditable: 'select',
      options: [
        { label: 'Male', value: 'male' },
        { label: 'Female', value: 'female' },
        { label: 'Other', value: 'other' }
      ]
    }
  },
  {
    property: 'genreDescription',
    label: 'Genero Descrição',
    editProperties: {
      componentEditable: 'select',
      fieldLabel: 'labelSelect',
      fieldValue: 'valueSelect',
      options: [],
      disabled: false
    }
  }
];