@eqproject/eqp-lookup v3.0.0

Table of contents

• Getting started
• API
• Use Cases
• Credits

Required

• Angular Material installed and imported

• ng-select installed and imported (v. 10.0.4)

Getting started

Step 1: Install eqp-lookup:

NPM

npm install  --save  @eqproject/eqp-lookup

Step 2: Import the EqpLookupModule:

import { EqpLookupModule } from  '@eqproject/eqp-lookup';

  

@NgModule({
    declarations: [AppComponent],
    imports: [EqpLookupModule],
    bootstrap: [AppComponent]
})

export class AppModule {}

Step 3: Import ng-select styling:

Style.scss

@import  "~@ng-select/ng-select/themes/material.theme.css";

API

Inputs

Outputs

Use cases

Case 1: Lookup with initial items :

<eqp-lookup
	placeholder="Lookup with initial items"
	[entityType]="'Question'"
	[initialItems]="questionInitialItems"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithInitialItems'"
	(formControlChange)="lookupChange($event)"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

lookupFormGroup : FormGroup | undefined;

...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithInitialItems: [null, Validators.required],
	})
}

...

this.http.post<LookupDTO[]>(url, config).subscribe(res  => {
	this.questionInitialItems = res;
})

...

lookupChange(event: any) {
	// body
}

Case 2: Lookup with HTTP call and ngModelInput :

Define component selector in HTML

<eqp-lookup
	placeholder="Lookup with HTTP call"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[(ngModelInput)]="lookupWithHttpCall"
	(ngModelInputChange)="lookupChange($event)"
	[isMultiline]="true"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupWithHttpCall: LookupDTO | undefined;

...

lookupChange(event: any) {
	// body
}

Case 3: Lookup with HTTP call and Form :

Define component selector in HTML

<eqp-lookup
	placeholder="Lookup with aform"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithForm'"
	(formControlChange)="lookupChange($event)"
	[isMultiline]="true"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;
...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithForm: [null, Validators.required],
	})
}

...

lookupChange(event: any) {
	// body
}

Case 4: Lookup with HTTP call and extra configs :

Define component selector in HTML

<eqp-lookup
	[entityType]="'City'"
	placeholder="Città"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithExtraConfigs'"
	(formControlChange)="lookupChange($event)"
	[dataFilter]="[{PropertyFilters: [{PropertyName: 'FK_Province', PropertyValue: 10, RelationType: 1}]}]"
	[customConfig]="{LabelProperties: ['Name', 'Code', 'ID'], IncludeFullObject: true}"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;

...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithExtraConfigs: [null, Validators.required],
	})
}

...

lookupChange(event: any) {
	// body
}

Case 5: Editable Lookup :

Define component selector in HTML

<eqp-lookup
	placeholder="Editable lookup"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[genericAddComponent]="{componentSelector: addQuestionComponent, idLookupEntity: getNumber(getFormControls('editableLookup').value), isEditable: true, disableRedirectAfterSave: true}"
	[isVirtualScroll]="true"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'editableLookup'"
	(formControlChange)="lookupChange($event)"
	[isMultiline]="true"
	[isEditable]="true"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;
addQuestionComponent = AddQuestionComponent;
...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		editableLookup: [null, Validators.required],
	})
}

...

getNumber(element: number | string | undefined | null): number | null {
	if (element != null)
		return  Number(element);
	else
		return  <null><unknown>  element;
}

...

getFormControls(control: string) {
	return  this.lookupFormGroup.controls[control];
}

...

lookupChange(event: any) {
	// body
}

Case 6: Lookup with select all :

Define component selector in HTML

<eqp-lookup
	placeholder="Lookup with select all"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[isVirtualScroll]="true"
	(formControlChange)="lookupChange($event)"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithSelectAll'"
	[isMultiline]="true"
	[isEditable]="true"
	[selectAll]="true"
	[isMultiple]="true"
	[selectableGroupAsModel]="true"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;
...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithSelectAll: [null, Validators.required],
	})
}

...

lookupChange(event: any) {
	// body
}

Case 7: Lookup with groups :

Define component selector in HTML

<eqp-lookup
	placeholder="Lookup with groups"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[isVirtualScroll]="true"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithGroups'"
	(formControlChange)="lookupChange($event)"
	[isMultiline]="true"
	[groupBy]="groupByFn"
	[groupValue]="groupValueFn"
	[groupByProperty]="'FullObject.FK_QuestionCategory'"
	[isMultiple]="true"
	[selectableGroup]="true"
	[selectableGroupAsModel]="true"
></eqp-lookup>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;
groupByFn = (item: any) =>  item.FullObject.FK_QuestionCategory
groupValueFn = (groupKey: string, children: any[]) => ({Key:  groupKey, Label:  groupKey, Total:  children.length});
...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithGroups: [null, Validators.required],
	})
}

...

lookupChange(event: any) {
	// body
}

NB: It's possible to change the Label displayed for groups passing some values or using the groupKey to access the selected properties inside an array.

Case 8: Lookup with data manipulation and custom templates :

Define component selector in HTML

<eqp-lookup
	placeholder="Lookup with function and custom templates"
	[entityType]="'Question'"
	[fullUrlHttpCall]="fullUrlHttpCall"
	[formGroupInput]="lookupFormGroup"
	[formControlNameInput]="'lookupWithFunctionAndCustomTemplates'"
	(formControlChange)="lookupChange($event)"
	[isMultiline]="true"
	[selectAll]="true"
	[customOption]="customOptionTemplate"
	[customLabel]="customLabelTemplate"
	[manipulateDataFn]="manipulateData"
></eqp-lookup>

Define custom templates in HTML

<!-- Template for option inside the dropdown panel -->
<ng-template  #customOptionTemplate  ng-option-tmp  let-item="item"  let-index="index"  let-search="searchTerm">
	<div class="card">
		<div  class="card-body">
			<h5  class="card-title">{{item.Label}}</h5>
			<h6  class="card-subtitle mb-2 text-muted">Card subtitle</h6>
			<p  class="card-text">
				Some quick example text to build
			</p>
			<div>
				<a  href="#"  class="card-link">Card link</a>
				<a  href="#"  class="card-link">Another link</a>
			</div>
		</div>
	</div>
</ng-template>

<!-- Selected items' Label template -->
<ng-template  #customLabelTemplate  ng-label-tmp  let-item="item"  let-clear="clear">
	<span  title="{{item.Label}}">Custom template:  {{item.Label}}</span>
	<span  *ngIf="item.Total"  class="ml-1 badge badge-secondary"  style="color: black !important">{{item.Total}}</span>
	<span  class="ng-value-icon right"  (click)="clear(item)"  aria-hidden="true"> x </span>
</ng-template>

Define properties and functions in Typescript (or Javascript) file

fullUrlHttpCall = environment.apiFullUrl + '/lookup/GetLookupEntities';
lookupFormGroup : FormGroup | undefined;
@ViewChild("customOptionTemplate") customOptionTemplate: TemplateRef<any>;
@ViewChild("customLabelTemplate") customLabelTemplate: TemplateRef<any>;
...

createForm() {
	this.lookupFormGroup = this.formBuilder.group({
		lookupWithFunctionAndCustomTemplates: [null, Validators.required],
	})
}

manipulateData(items: any) : LookupDTO[] {
	let  res: LookupDTO[] = [];
	for(let  item  of  items) {
		item.Label += " added later";
		res.push(item)
	}
	return  res;
}

...

lookupChange(event: any) {
	// body
}

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it