Commit cce896db authored by Florent POITTEVIN's avatar Florent POITTEVIN
Browse files

feat: 1301 on searchable component highlight input value that bind on result item

parent 2aa2f9b9
......@@ -26,7 +26,9 @@ import {
} from "rxjs/operators";
import {
BaseResourceType,
isEmptyString,
isNotNullNorUndefined,
isNullOrUndefined,
MappingObjectUtil,
MemoizedUtil,
QueryParameters,
......@@ -194,6 +196,20 @@ export abstract class SharedSearchableAbstractContentPresentational<TResource ex
tap(list => this.list = list),
));
}
computeHighlightText(valueElement: string): string {
const fc = this.form.get(this.host.formDefinition.search);
if (isNullOrUndefined(fc)) {
return valueElement;
}
const value = fc.value;
if (isNullOrUndefined(value) || isEmptyString(value)) {
return valueElement;
}
return valueElement.replace(new RegExp(value, "gi"), match => {
return `<span class="highlight-text">${match}</span>`;
});
}
}
......
......@@ -33,14 +33,18 @@
[class.is-active]="isActive(value)"
(click)="select(value)"
>
<span class="label">{{host.labelCallback(value)}}</span>
<span class="label"
[innerHTML]="computeHighlightText(host.labelCallback(value))"
></span>
<span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
class="extra-info"
><img *ngIf="host.extraInfoImage"
[src]="'assets/images/'+ host.extraInfoImage"
[alt]="host.extraInfoImage"
>
{{value[host.extraInfoLabelKey]}}</span>
<dlcm-shared-icon *ngIf="host.extraInfoImage"
[iconName]="host.extraInfoImage"
class="sm"
></dlcm-shared-icon>
<span [innerHTML]="computeHighlightText(value[host.extraInfoLabelKey])"></span>
</span>
</li>
</ng-container>
</ul>
......
......@@ -35,7 +35,9 @@
(keydown.enter)="select(getFocusedResource())"
(click)="select(value)"
>
{{this.host.labelCallback(value)}}
<span class="label"
[innerHTML]="computeHighlightText(host.labelCallback(value))"
></span>
</li>
</ul>
</div>
......@@ -199,4 +199,9 @@ button[dlcmAlternativeButton] {
.icon {
@include icon-important($size);
}
}
.highlight-text {
color: $primary-color;
font-weight: bold;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment