twigfiddle.com - Fiddle wcf46v v6 - Created on August 5, 2022 13:47

File

Files:
COMPONENT - GRID
touch {{classfilename}}.component.ts {{classfilename}}.component.scss 
touch {{classfilename}}.component.html {{classfilename}}.module.ts
touch {{classfilename}}-columns.ts {{classfilename}}.model.ts

** {{classfilename}}.module.ts
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
    imports: [
        AgGridModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule],
  declarations: [{{classname}}Component],
  exports: [{{classname}}Component]
})
export class {{classname}}Module {}

** {{classfilename}}.component.ts
import {Component, OnDestroy, OnInit} from '@angular/core';
import {SubscriptionSink} from '@cluster-logistics/util-tools';
import {LoggerService} from '@frontend/shared/util-logger';
import {MessageService, TranslationService} from '@frontend/logfit/cors/ui-core';
import {SpinnerService} from '@cluster-logistics/ui-base';

// import {Inject, Injector} from '@angular/core';
// import {AgGridAngular} from '@ag-grid-community/angular';
// import {AllModules, ColDef, Module} from '@ag-grid-enterprise/all-modules';
// import {ViewChild} from '@angular/core';
// import {AbstractGrid} from '@cluster-logistics/ui-grid';
// import {Translation} from '@cluster-logistics/ui-base';

import {FormBuilder, Validators} from '@angular/forms';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {AbstractConfigService, BaseFormComponent, DeviceTypeService, SpinnerService} from '@cluster-logistics/ui-base';

import { {{classname}}Model} from './{{classfilename}}.model';

@Component({
  selector: 'cors-{{classfilename}}',
  templateUrl: './{{classfilename}}.component.html',
  styleUrls: ['./{{classfilename}}.component.scss']
})
export class {{classname}}Component extends BaseFormComponent, AbstractGrid implements OnInit, OnDestroy {
  /** Subscription sink to collect subscriptions */
  protected subscriptions: SubscriptionSink = new SubscriptionSink();

  /** translation keys */
  public readonly tx = {};
  /** form ids */
  public readonly formIds = {};

  // @Input()
  // public rowData!: {{classname}}Model[];
  // @ViewChild('grid') public grid!: AgGridAngular;
  // public gridModules: Module[] = AllModules;
  // public frameworkComponents: unknown; 
  // private colDefs: ColDef[] = [];

  public {{classname}}Model!: {{classname}}Model[];
  
   /**
   * creation with dependency injection
   * @param injector needed for AbstractGrid
   * @param deviceTypeService needed for AbstractGrid
   * @param configService  needed for AbstractGrid

   * @param messageService showing delete, edit ops. status messages
   * @param spinnerService showing spinner during the actions
   * @param loggerService to log messages of the dialog
   * @param matDialog to show dialog
   */
  public constructor(
    protected injector: Injector,
    private configService: AbstractConfigService,
    private deviceTypeService: DeviceTypeService,
    private translationService: TranslationService,
    
    private dialogRef: MatDialogRef<{{classname}}Component>,
    @Inject(MAT_DIALOG_DATA) public data: {{classname}}Model,
    private formBuilder: FormBuilder,
    
    private spinnerService: SpinnerService, 
    private loggerService: LoggerService,
    private messageService: MessageService) {
    // super(injector, deviceTypeService);
    super();
    
  }

  public ngOnInit(): void {
  super.ngOnInit();
  this.defaultFormGroup = this.formBuilder.group({
      '{{classname}}Ctrl': [['{{classname}}'], [Validators.required]],
    });
   
  // const {{classname}}ColDef = this.createTextColumn({{classname}}Columns.{{classname}}, this.tx.columns.{{classname}}, '', true);
  // this.colDefs = [{{classname}}ColDef];
  }
  
  public onCancelClick(): void {
      this.dialogRef.close(null);
  }
  public onOkClick(): void {
    const output: {{classname}}Model = {
        licenseText: this.defaultFormGroup.get('{{classname}}Ctrl')?.value
    }
    
    this.dialogRef.close(output);  
  }
  
  // public onGridReady(event: GridReadyEvent): void {
  //   super.onGridReady(event);
  //   this.autoSizeAllColumns();
  //   this.loggerService.debug("{{classname}}.onGridReady - event:", event)
  // }
  //
  // public onRowDataChanged(event: RowDataChangedEvent): void {
  //   super.onRowDataChanged(event);
  //   this.autoSizeAllColumns();
  //   this.loggerService.debug("{{classname}}.onRowDataChanged - event:", event)
  // }
  //
  // public onCellValueChanged(event: CellValueChangedEvent): void {
  //   super.onCellValueChanged(event);
  //   this.loggerService.debug("{{classname}}.onCellValueChanged - event:", event)
  // }
  // /**
  //  * Abstract-grid overrides
  //  * @returns AbstractConfigService
  //  */
  // protected getConfigService(): AbstractConfigService {
  //   return this.configService;
  // }
  //
  // /**
  //  * Abstract-grid overrides
  //  * @returns Translation service
  //  */
  // protected getTranslationService(): Translation {
  //   return this.translationService;
  // }


  public ngOnDestroy(): void {
    super.ngOnDestroy();
    this.subscriptions.unsubscribe();
  }  
}


** {{classfilename}}.component.html

<div>
  <form [formGroup]="defaultFormGroup">
      <input formControlName="{{classname}}Ctrl"></input>
  </form>
</div>
<div>
  <div class="buttons action-buttons-right">
    <button (click)="onOkClick()" [keys]="[formIds.ok]" color="primary"
            mat-raised-button>ok
    </button>
  </div>
  <div>
  <ag-grid-angular
                     [modules]="gridModules"
                     [keys]="formIds.grid"
                     [pagination]="true"
                     [paginationPageSize]="20"
                     [domLayout]="'autoHeight'"
                     [frameworkComponents]="frameworkComponents"
                     [rowData]="rowData" #grid>
    </ag-grid-angular>
  </div>
</div>  

** where to use dialog
import {Component, OnDestroy, OnInit} from '@angular/core';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {BaseFormComponent, SpinnerService} from '@cluster-logistics/ui-base';
import {SubscriptionSink} from '@cluster-logistics/util-tools';
import {MessageService} from '@frontend/logfit/cors/ui-core';
import {LoggerService} from '@frontend/shared/util-logger';
import { {{classname}}Model} from './{{classfilename}}.model';

public constructor (private matDialog: MatDialog,
    private spinnerService: SpinnerService, 
    private loggerService: LoggerService,
    private messageService: MessageService) {}


public openDialog(model: {{classname}}Model):void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.id = 'modal-{{classfilename}}';
    dialogConfig.width = '80%';
    dialogConfig.data = model;
    const dialogRef = this.matDialog.open({{classname}}Component, dialogConfig);
    dialogRef.afterClosed().subscribe(result => {
    this.spinnerService.showSpinner();
    if (result.isOk()) {
        this.messageService.showInfoMessage("dialog ok");
        this.loggerService.debug('success, result', result);
    } else {
        this.messageService.showInfoMessage("dialog ok");
        this.loggerService.debug('error, result', result);
    }
    this.spinnerService.hideSpinner();
    })
    
    
  }
  
** {{classfilename}}.model.ts
export interface {{classname}}Model { licenseText:string }
** {{classfilename}}-columns.ts
export enum {{classname}}Columns { LicenseText = 'licenseText' }
{#
** Api response
@ApiResponse(responseCode = "200", description = "", content = @Content(schema = @Schema(implementation = {{apiresponseclass}})))
@ApiResponse(responseCode = "200", description = "", content = @Content(array = @ArraySchema(schema = @Schema(implementation = {{apiresponseclass}}))))

** gettersetter
private _{{gettersettername}};

public get {{gettersettername}}(): {{gettersettertype}} {
    console.log('get {{gettersettername}}:' + this._{{gettersettername}});
    return this._{{gettersettername}};
}

public set {{gettersettername}}(newVal: {{gettersettertype}}) {
    this._{{gettersettername}}=newVal;
    console.log('set {{gettersettername}}:' + newVal);
}


** gettersetterforform
public get {{gettersettername}}(): {{gettersettertype}} {
    return this.defaultFormGroup.get(this.formIds.{{gettersettername}})?.value;
}

public set {{gettersettername}}(newVal: {{gettersettertype}}) {
    this.defaultFormGroup.get(this.formIds.{{gettersettername}})?.setValue(newVal);
}
#}

Format

# -grid, -dialog
classname=CustomerNumberGrid
classfilename=customer-numbers-grid

apiresponseclass=java.lang.Long

gettersettername=dealers
gettersettertype=string