• app.component.ts
• customer-grid.component.ts
• customer-form.component.ts

import { Component } from '@angular/core'; // etc...
import { AocUiDataMenu } from '@atlantis-of-code/aoc-client/ui/common/types';
import { meta } from './models/meta';

@Component({
  selector: 'app-root',
  template: `<aoc-app aocLogger [mainMenu]="mainMenu">
    <ng-template aocAppHeader="left">
      <img src="assets/app/app-logo.png"/>
    </ng-template>
  </aoc-app>`,
  standalone: true,
  imports: [ AocAppModule ]
})
export class AppComponent {
  mainMenu: AocUiDataMenu = [
    {
      label: 'Customers',
      icon: 'group',
      items: [
        { label: 'Customer Panel', routerLink: ['customers', 'customer', 'panel']
      ]
    }
  ];

  constructor(private logger: AocUiLoggerService) {
    this.logger.info('Starting your aoc application');
    AocModelManager.registerMeta(meta);
  }
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AocGridModule } from '@atlantis-of-code/aoc-client/components/aoc-grid';
import { AocGridColumn } from '@atlantis-of-code/aoc-client/core/types';
import { Customer } from '../models/customers/customer';

@Component({
    selector: 'app-customer-grid',
    template: `<aoc-grid [modelConfig]="modelConfig" [columns]="columns"></aoc-grid>`,
    standalone: true,
    imports: [ CommonModule, AocGridModule ]
})
export class CustomerGridComponent {
  columns: AocGridColumn[] = [
    { header: 'Code', display: Customer.field.CODE, align: 'right', size: '5rem' },
    { header: 'Name', display: Customer.field.FISCAL_NAME },
    { header: 'Customer Type', display: [ Customer.entity.CUSTOMER_TYPE, CustomerType.field.NAME ] }
  ];

  constructor(protected modelConfig: CustomerModelConfig) { }
}

import { Component } from '@angular/core'; // etc...

@Component({
  selector: 'app-customer-form',
  template: `<aoc-form [modelConfig]="modelConfig" [restOptions]="restOptions" [formGroup]="formGroup">
    <ng-template aocFormTemplate="body">
      <aoc-ui-form-page>
        <aoc-ui-form-row>
          <input aocUiInputText aocUiValueAsNumber aocUiFormField="Code" [formControlName]="Customer.field.CODE">
          <input aocUiInputText aocUiFormField="Name" [formControlName]="Customer.field.FISCAL_NAME">
          <app-customer-type-select aocUiFormField="Type" [formControlName]="Customer.entity.CUSTOMER_TYPE"></app-customer-type-select>
        </aoc-ui-form-row>
      </aoc-ui-form-page>
    </ng-template>
  </aoc-form>`,
  standalone: true,
  providers: [ AocFormController ],
  imports: [ CommonModule, ReactiveFormsModule, AocFormModule, AocUiFormModule ]
})
export class CustomerFormComponent {
  restOptions: AocRestOptions<Customer> = {
    populate: {
      customerType: true
    }
  };

  formGroup = new FormGroup<AocFormGroupType<Customer>>({
    code: new FormControl(0, AocUiValidators.positiveNumber(0)),
    fiscal_name: new FormControl(null, Validators.required)),
    customerType: new FormControl(null)
  };

  constructor(protected modelConfig: CustomerModelConfig) { }
}