Skip to content

Commit d0333fa

Browse files
kshepherdkshepherd
committed
Update dynamic-onebox for solr suggest (not authority) lookup
1 parent e4a9a90 commit d0333fa

2 files changed

Lines changed: 115 additions & 65 deletions

File tree

‎src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html‎

Lines changed: 111 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
<ng-template #suggestrt let-listEntry="result" let-t="term">
2+
<ng-container
3+
[ngTemplateOutlet]="suggestrte"
4+
[ngTemplateOutletContext]="{entry: listEntry}">
5+
</ng-container>
6+
</ng-template>
7+
8+
<ng-template #suggestrte let-entry="entry">
9+
<ul class="list-unstyled mb=0">
10+
<li class="list-item text-truncate text-primary" [innerHTML]="(entry.term + ' (' + entry.weight + ')')"></li>
11+
</ul>
12+
</ng-template>
13+
114
<ng-template #rt let-listEntry="result" let-t="term">
215
<ng-container
316
[ngTemplateOutlet]="(listEntry.hasOtherInformation()) ? hasInfo : noInfo"
@@ -22,68 +35,105 @@
2235
</ul>
2336
</ng-template>
2437

25-
@if ((isHierarchicalVocabulary() | async) !== true) {
26-
<div class="position-relative right-addon">
27-
@if (searching || loadingInitialValue) {
28-
<i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
29-
}
30-
@if (!searching && !loadingInitialValue) {
31-
<i
32-
dsAuthorityConfidenceState
33-
class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
34-
aria-hidden="true"
35-
[authorityValue]="currentValue"
36-
(whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
37-
}
38+
@if (isSolrSuggest()) {
39+
40+
<div *ngIf="(model.vocabularyOptions?.type === 'suggest')" class="position-relative right-addon">
41+
<i *ngIf="searching || loadingInitialValue" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
42+
<i *ngIf="!searching && !loadingInitialValue"
43+
dsAuthorityConfidenceState
44+
class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
45+
aria-hidden="true"
46+
[authorityValue]="currentValue"
47+
(whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
3848
<input #instance="ngbTypeahead"
39-
class="form-control"
40-
[attr.aria-labelledby]="'label_' + model.id"
41-
[attr.autoComplete]="model.autoComplete"
42-
[attr.aria-label]="model.label | translate"
43-
[class.is-invalid]="showErrorMessages"
44-
[id]="model.id"
45-
[inputFormatter]="formatter"
46-
[name]="model.name"
47-
[ngbTypeahead]="search"
48-
[placeholder]="model.placeholder"
49-
[readonly]="model.readOnly"
50-
[disabled]="model.readOnly"
51-
[resultTemplate]="rt"
52-
[type]="model.inputType"
53-
[(ngModel)]="currentValue"
54-
(blur)="onBlur($event)"
55-
(focus)="onFocus($event)"
56-
(change)="onChange($event)"
57-
(input)="onInput($event)"
58-
(selectItem)="onSelectItem($event)">
59-
@if (searchFailed) {
60-
<div class="invalid-feedback">Sorry, suggestions could not be loaded.</div>
61-
}
49+
class="form-control"
50+
[attr.aria-labelledby]="'label_' + model.id"
51+
[attr.autoComplete]="model.autoComplete"
52+
[attr.aria-label]="model.label | translate"
53+
[class.is-invalid]="showErrorMessages || (this.model.errorMessages !== null)"
54+
[id]="model.id"
55+
[inputFormatter]="formatter"
56+
[name]="model.name"
57+
[ngbTypeahead]="searchSuggest"
58+
[placeholder]="model.placeholder"
59+
[readonly]="model.readOnly"
60+
[disabled]="model.readOnly"
61+
[resultTemplate]="suggestrt"
62+
[type]="model.inputType"
63+
[(ngModel)]="currentValue"
64+
(blur)="onBlur($event)"
65+
(focus)="onFocus($event)"
66+
(change)="onChange($event)"
67+
(input)="onInput($event)"
68+
(selectItem)="onSelectSuggestedTerm($event)">
69+
<div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
6270
</div>
63-
}
6471

65-
@if ((isHierarchicalVocabulary() | async)) {
66-
<div class="position-relative right-addon">
67-
<i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
68-
aria-hidden="true"></i>
69-
<input class="form-control"
70-
[attr.aria-labelledby]="'label_' + model.id"
71-
[attr.autoComplete]="model.autoComplete"
72-
[attr.aria-label]="model.label | translate"
73-
[class.is-invalid]="showErrorMessages"
74-
[class.tree-input]="!model.readOnly"
75-
[id]="id"
76-
[name]="model.name"
77-
[placeholder]="model.placeholder"
78-
[readonly]="true"
79-
[disabled]="model.readOnly"
80-
[type]="model.inputType"
81-
[value]="currentValue?.display"
82-
(focus)="onFocus($event)"
83-
(change)="onChange($event)"
84-
(click)="openTree($event)"
85-
(keydown)="$event.preventDefault()"
86-
(keypress)="$event.preventDefault()"
87-
(keyup)="$event.preventDefault()">
88-
</div>
72+
} @else {
73+
74+
@if ((isHierarchicalVocabulary() | async) !== true) {
75+
<div class="position-relative right-addon">
76+
@if (searching || loadingInitialValue) {
77+
<i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
78+
}
79+
@if (!searching && !loadingInitialValue) {
80+
<i
81+
dsAuthorityConfidenceState
82+
class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
83+
aria-hidden="true"
84+
[authorityValue]="currentValue"
85+
(whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
86+
}
87+
<input #instance="ngbTypeahead"
88+
class="form-control"
89+
[attr.aria-labelledby]="'label_' + model.id"
90+
[attr.autoComplete]="model.autoComplete"
91+
[attr.aria-label]="model.label | translate"
92+
[class.is-invalid]="showErrorMessages"
93+
[id]="model.id"
94+
[inputFormatter]="formatter"
95+
[name]="model.name"
96+
[ngbTypeahead]="search"
97+
[placeholder]="model.placeholder"
98+
[readonly]="model.readOnly"
99+
[disabled]="model.readOnly"
100+
[resultTemplate]="rt"
101+
[type]="model.inputType"
102+
[(ngModel)]="currentValue"
103+
(blur)="onBlur($event)"
104+
(focus)="onFocus($event)"
105+
(change)="onChange($event)"
106+
(input)="onInput($event)"
107+
(selectItem)="onSelectItem($event)">
108+
@if (searchFailed) {
109+
<div class="invalid-feedback">Sorry, suggestions could not be loaded.</div>
110+
}
111+
</div>
112+
}
113+
114+
@if ((isHierarchicalVocabulary() | async)) {
115+
<div class="position-relative right-addon">
116+
<i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
117+
aria-hidden="true"></i>
118+
<input class="form-control"
119+
[attr.aria-labelledby]="'label_' + model.id"
120+
[attr.autoComplete]="model.autoComplete"
121+
[attr.aria-label]="model.label | translate"
122+
[class.is-invalid]="showErrorMessages"
123+
[class.tree-input]="!model.readOnly"
124+
[id]="id"
125+
[name]="model.name"
126+
[placeholder]="model.placeholder"
127+
[readonly]="true"
128+
[disabled]="model.readOnly"
129+
[type]="model.inputType"
130+
[value]="currentValue?.display"
131+
(focus)="onFocus($event)"
132+
(change)="onChange($event)"
133+
(click)="openTree($event)"
134+
(keydown)="$event.preventDefault()"
135+
(keypress)="$event.preventDefault()"
136+
(keyup)="$event.preventDefault()">
137+
</div>
138+
}
89139
}

‎src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
NgIf,
66
NgTemplateOutlet,
77
} from '@angular/common';
8-
import { HttpClient } from '@angular/common/http';
98
import {
109
ChangeDetectorRef,
1110
Component,
@@ -95,6 +94,8 @@ import { DynamicOneboxModel } from './dynamic-onebox.model';
9594
FormsModule,
9695
BtnDisabledDirective,
9796
NgClass,
97+
NgIf,
98+
NgbTypeaheadModule,
9899
],
99100
standalone: true,
100101
})
@@ -129,7 +130,6 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
129130
protected layoutService: DynamicFormLayoutService,
130131
protected modalService: NgbModal,
131132
protected validationService: DynamicFormValidationService,
132-
protected http: HttpClient,
133133
protected searchService: SearchService,
134134
) {
135135
super(vocabularyService, layoutService, validationService);
@@ -163,15 +163,15 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
163163
tap(() => this.changeSearchingStatus(true)),
164164
switchMap((term) => {
165165
if (term === '' || term.length < this.model.minChars || this.model.vocabularyOptions.type !== 'suggest') {
166-
return observableOf({ list: [] });
166+
return of({ list: [] });
167167
} else {
168168
return this.searchService.getSuggestionsFor(term, this.model.vocabularyOptions.name).pipe(
169169
getFirstSucceededRemoteDataPayload(),
170170
tap(() => this.searchFailed = false),
171171

172172
catchError(() => {
173173
this.searchFailed = true;
174-
return observableOf(buildPaginatedList(new PageInfo(), []));
174+
return of(buildPaginatedList(new PageInfo(), []));
175175
}),
176176
map((data: any) => {
177177
return data.suggest[this.model.vocabularyOptions.name][term].suggestions;

0 commit comments

Comments
 (0)