ECS SaaS LCP NG CRUD UI Library

Angular UI library for building CRUD applications. Provides base components, automatic date handling, and reusable templates.

Installation

npm install ecs-saas-lcp-ng-crud-ui

import { EcsSaasLcpNgCrudUiModule } from 'ecs-saas-lcp-ng-crud-ui';

@NgModule({
  imports: [EcsSaasLcpNgCrudUiModule]
})
export class AppModule { }

Additional Setup

AI Chat Visibility

The library's AppComponent automatically handles AI chat visibility (hides on auth pages, shows elsewhere). No additional configuration needed.

Quick Start

See QUICK-START.md for complete examples.

1. Entity Class

import { ABaseEntity, DateField } from 'ecs-saas-lcp-ng-crud-ui';
import { IsNotEmpty, IsString } from 'class-validator';

export class MyEntity extends ABaseEntity<number> {
  @IsNotEmpty()
  @IsString()
  name: string;

  @DateField()  // Required for dates
  createdDate: Date;
}

2. Service

import { ABaseService } from 'ecs-saas-lcp-ng-crud-ui';

@Injectable({ providedIn: 'root' })
export class MyEntityService extends ABaseService<number, MyEntity> {
  constructor(router: Router, http: HttpClient, authService: AuthService) {
    super(router, http, authService, "my-entity", '', environment.apiUrl);
  }
}

3. Detail Component

import { BaseDetailViewComponent } from 'ecs-saas-lcp-ng-crud-ui';

@Component({
  selector: 'app-my-entity-detail',
  templateUrl: './my-entity-detail.component.html'
})
export class MyEntityDetailComponent 
  extends BaseDetailViewComponent<number, MyEntity, MyEntityService> {
  
  constructor(protected entityService: MyEntityService) {
    super();
    this.entity = new MyEntity();
  }

  populateUiWithLanguageContent() {
    this.getLanguageContent(
      () => 'ecs-tmp-view-my-entity-detail',
      () => ''
    );
  }
}

4. Detail Template

<lcp-base-entity-detail-template 
  [languageData]="languageData" 
  [submitted]="submitted"
  (save)="onSubmit()"
  (cancel)="onCancelClick()">
  
  <div class="field col-12 md:col-6">
    <label htmlFor="name">Name</label>
    <input pInputText id="name" [(ngModel)]="entity.name" required />
  </div>
  
</lcp-base-entity-detail-template>

5. Master Component

import { BaseMasterViewComponent } from 'ecs-saas-lcp-ng-crud-ui';

@Component({
  selector: 'app-my-entity-master',
  templateUrl: '../../../../../node_modules/ecs-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.html',
  styleUrls: ['../../../../../node_modules/ecs-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.scss']
})
export class MyEntityMasterComponent 
  extends BaseMasterViewComponent<number, MyEntity, MyEntityService> {
  
  constructor(protected entityService: MyEntityService) {
    super();
    this.cols = [
      { field: "name", type: "text", header: "Name" },
      { field: "createdDate", type: "date", header: "Created" }
    ];
    this.globalFilterFields = ['name'];
    this.selectedCols = ['name', 'createdDate'];
  }

  override loadData(event: LazyLoadEvent): Observable<void | ListRS<MyEntity>> {
    this.loading = true;
    if (!event) event = { first: 0, rows: 25 };
    this.entityService.getList(event, this.globalFilterFields).subscribe({
      next: (res) => {
        this.resDataRecords = res.data.list;
        this.totalRecords = res.data.totalRecords;
        this.loading = false;
      }
    });
    return of(null);
  }
}

Key Features

Automatic Date Conversion

• Add @DateField() decorator to date properties
• UTC ↔ Local conversion handled automatically
• No manual conversion code needed

Base Components

• BaseDetailViewComponent: CRUD logic, validation, date handling
• BaseMasterViewComponent: List views with pagination, filtering, sorting
• BaseAuditViewComponent: Audit trail views
• BaseEntityDetailTemplateComponent: Reusable form template

Template Slots

• Default: Form fields
• beforeForm: Alerts, warnings
• afterForm: Tables, summaries
• customButtons: Additional action buttons

Documentation

• QUICK-START.md: Complete examples and patterns
• MIGRATION.md: Migration guide from manual to automatic patterns
• QUICK-REFERENCE.md: API reference and common patterns

Template Paths

• Master: ../../../../../node_modules/ecs-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.html
• Master Kanban: ../../../../../node_modules/ecs-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master-kanban/base-entity-master-kanban.component.html
• Audit: ../../../../../node_modules/ecs-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-audit/base-entity-audit.component.html

Column Types

• text, number, date, datetime, currency, image
• Nested fields: "company.name" (dot notation)
• Date options: dateFormat: "dd-M-yy", showTime: true, hourFormat: "12"

Common Patterns

Custom Validation

override onSubmit(): void {
  if (!this.entity.customField) {
    this.messageService.add({ severity: 'error', detail: 'Required' });
    return;
  }
  super.onSubmit();
}

Custom Data Loading

override loadData(event: any): Observable<MyEntity> {
  return super.loadData(event).pipe(
    map(entity => {
      // Transform after load
      return entity;
    })
  );
}

Support

For detailed examples, see the CRM and Travel Voucher projects that use this library.