MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

mat-autocomplete change

This commit is contained in:
Diamantis Tziotzios 2024-04-22 10:32:24 +03:00
parent ada4dcfe99
commit 378f3c957b
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
View File

@ -30,6 +30,8 @@ export interface MultipleAutoCompleteConfiguration {
valueAssign?: (selectedItem: any) => any; valueAssign?: (selectedItem: any) => any;
// Callback to provide equals function betwen the values // Callback to provide equals function betwen the values
uniqueAssign?: (selectedItem: any) => any; uniqueAssign?: (selectedItem: any) => any;
// Get selected items. Used when valueAssign is used so the full object can be retrieved for presentation.
canRemoveItem?: (selectedItem: any) => { canRemove: boolean, message: string };
// Property formating template // Property formating template
optionTemplate?: TemplateRef<any>; optionTemplate?: TemplateRef<any>;
// Property formatting component // Property formatting component
@ -39,8 +41,9 @@ export interface MultipleAutoCompleteConfiguration {
// Display icon that opens popup // Display icon that opens popup
popupItemActionIcon?: string; popupItemActionIcon?: string;
autoSelectFirstOptionOnBlur?: boolean; autoSelectFirstOptionOnBlur?: boolean;
appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[]; appendClassToItem?: { class: string, applyFunc: (item: any) => boolean }[];
} }

4
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -4,14 +4,14 @@
<div class="col-12"> <div class="col-12">
<mat-chip-grid #chipList ngDefaultControl class="chip-list"> <mat-chip-grid #chipList ngDefaultControl class="chip-list">
<ng-container *ngIf="value as values;"> <ng-container *ngIf="value as values;">
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row"> <mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="true" [ngClass]="computeClass(value)" class="chip-row">
<ng-container *ngIf="getSelectedItem(value) as selectedItem;"> <ng-container *ngIf="getSelectedItem(value) as selectedItem;">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
item: selectedItem item: selectedItem
}" /> }" />
<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span> <span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
</ng-container> </ng-container>
<button matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(getSelectedItem(value), $event)"> <button matChipRemove *ngIf="!disabled" [disabled]="_canRemoveItem(getSelectedItem(value))"[matTooltipDisabled]="_canRemoveItem(getSelectedItem(value))" [matTooltip]="_canRemoveItemMessage(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
</mat-chip-row> </mat-chip-row>

16
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -96,7 +96,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
_selectedItems: Map<string, any> = new Map<any, any>(); _selectedItems: Map<string, any> = new Map<any, any>();
_groupedItems: Observable<AutoCompleteGroup[]>; _groupedItems: Observable<AutoCompleteGroup[]>;
selectable = false; selectable = false;
removable = true;
selected: boolean = false; selected: boolean = false;
get empty() { get empty() {
@ -434,6 +433,21 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
this._items = null; this._items = null;
} }
_canRemoveItem(item: any): boolean {
if(this.configuration.canRemoveItem != null) {
return this.configuration.canRemoveItem(item).canRemove;
}
return true;
}
_canRemoveItemMessage(item: any): string {
if(this.configuration.canRemoveItem != null) {
const canRemoveResuslt = this.configuration.canRemoveItem(item);
if (canRemoveResuslt.canRemove) return canRemoveResuslt.message;
}
return null;
}
_removeSelectedItem(item: any, event: MouseEvent): void { _removeSelectedItem(item: any, event: MouseEvent): void {
if (event != null) { event.stopPropagation(); } if (event != null) { event.stopPropagation(); }
const valueToDelete = this._valueToAssign(item); const valueToDelete = this._valueToAssign(item);