Skip to content

Commit 8d85e19

Browse files
michelu89michelu89
authored
Merge pull request #8 from bci-oss/feature/add-advanced-search-to-table
Add advanced search to search more detailed into Aspect Models
2 parents 33cf82d + f420412 commit 8d85e19

File tree

9 files changed

+243
-230
lines changed

9 files changed

+243
-230
lines changed

‎src/ng-generate/table/generators/html.generator.ts‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ export class HtmlGenerator {
7070
(removed)="removeFilter(filter)"
7171
>
7272
<div data-test="chip-text" class="chip-text"
73-
matTooltip="{{ filter.label }}">{{ filter.label }}</div>
73+
matTooltip="{{ filter.filterValue + filter.label }}">
74+
<b>{{filter.filterValue}}</b>{{ filter.label }}</div>
7475
<button *ngIf="filter.removable" matChipRemove data-test="mat-chip-remove">
7576
<mat-icon class="material-icons" data-test="remove-chip">cancel</mat-icon>
7677
</button>
@@ -391,67 +392,55 @@ export class HtmlGenerator {
391392
private getCommandBar(): string {
392393
return `
393394
<mat-toolbar data-test="toolbar" class="toolbar">
394-
<div data-test="toolbar-number-of-items" class="command-bar-number-of-items">{{ selection.selected.length > 0 ? (selection.selected.length + ' / ') : '' }}{{ totalItems }}</div>
395+
<div *ngIf="isMultipleSelectionEnabled" data-test="toolbar-number-of-items" class="command-bar-number-of-items">{{ selection.selected.length > 0 ? (selection.selected.length + ' / ') : '' }}{{ totalItems }}</div>
395396
${
396397
this.options.templateHelper.isAddCommandBarFunctionSearch(this.options.enabledCommandBarFunctions)
397398
? `<mat-form-field data-test="search-form-field" appearance="fill" floatLabel="never" class="search-input">
398399
<mat-label data-test="search-label">{{ 'search' | translate }}</mat-label>
399400
<input
400-
data-test="search-input"
401-
*ngIf="allowedCharacters && regexValidator"
402-
matInput
403-
[validateInput]="regexValidator"
404-
[stringColumns]="filterService.stringColumns"
405-
[selectedStringColumns]="filterService.selectedStringColumns"
406-
[formControl]="searchString"
407-
type="text"
408-
[(ngModel)]="filterService.searchString"
409-
[matAutocomplete]="auto"
410-
(keyup.enter)="reloadFilter()"
411-
(keyup)="filterService.searchStringChange($event)"
412-
(focus)="searchFocused = true"
413-
(blur)="searchFocused = false"
401+
#searchInput
402+
data-test="search-input"
403+
matInput
404+
[formControl]="filterService.searchString"
405+
type="text"
406+
(keyup.enter)="reloadFilter()"
407+
(focus)="searchFocused = true"
408+
(blur)="searchFocused = false"
414409
/>
415-
<input
416-
data-test="search-input"
417-
*ngIf="!allowedCharacters || !regexValidator"
418-
matInput
419-
type="text"
420-
validateInput=""
421-
[stringColumns]="filterService.stringColumns"
422-
[selectedStringColumns]="filterService.selectedStringColumns"
423-
[formControl]="searchString"
424-
[(ngModel)]="filterService.searchString"
425-
[matAutocomplete]="auto"
426-
(keyup.enter)="reloadFilter()"
427-
(keyup)="filterService.searchStringChange($event)"
428-
(focus)="searchFocused = true"
429-
(blur)="searchFocused = false"
430-
/>
431-
<mat-autocomplete #auto="matAutocomplete">
432-
<mat-option *ngFor="let searchField of filterService.stringColumns">
433-
<mat-checkbox [checked]="searchField.selected" (change)="toggleSelection(searchField)"
434-
(click)="$event.stopPropagation()">
435-
{{ searchField.columnName }}
436-
</mat-checkbox>
437-
</mat-option>
438-
</mat-autocomplete>
439-
440-
<mat-error
441-
*ngIf="allowedCharacters && regexValidator && searchString.errors && searchString.errors['blankSpace']">
410+
<mat-error *ngIf="filterService.searchString.errors && filterService.searchString.errors['blankSpace']">
442411
{{ 'validation.blankSpace' | translate }}
443412
</mat-error>
444-
<mat-error *ngIf="searchString.errors && searchString.errors['invalidInput']">
413+
<mat-error *ngIf="filterService.searchString.errors && filterService.searchString.errors['invalidInput']">
445414
{{ 'validation.invalidInput' | translate }} {{ allowedCharacters }}
446415
</mat-error>
447-
<mat-error *ngIf="searchString.errors && searchString.errors['emptyStringColumnsArray']">
416+
<mat-error *ngIf="!filterService.stringColumns || !filterService.stringColumns.length">
448417
{{'validation.empty_string_columns_array' | translate }}
449418
</mat-error>
419+
<mat-error *ngIf="filterService.searchString.errors && filterService.searchString.errors['minCharNo']">
420+
{{'validation.min_char_no' | translate }} {{ minNumberCharacters }}
421+
</mat-error>
422+
<mat-error *ngIf="filterService.searchString.errors && filterService.searchString.errors['maxCharNo']">
423+
{{'validation.max_char_no' | translate }} {{ maxNumberCharacters }}
424+
</mat-error>
450425
<mat-hint *ngIf="!searchFocused && !!searchHint">{{ searchHint }}</mat-hint>
451426
<button data-test="search-button" mat-icon-button matSuffix aria-label="search" (click)="reloadFilter()">
452427
<mat-icon data-test="search-icon" class="material-icons">search</mat-icon>
453428
</button>
454-
</mat-form-field>`
429+
</mat-form-field>
430+
<ng-container *ngIf="hasAdvancedSearch">
431+
<mat-form-field data-test="form-field-select" appearance="fill" floatLabel="never">
432+
<mat-label data-test="select-label">{{ 'advancedSearch' | translate }}</mat-label>
433+
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn">
434+
<mat-option [value]="filterService.advancedSearchAllValue">{{ 'allTextFields' | translate }}</mat-option>
435+
<mat-option *ngFor="let searchField of filterService.stringColumns" [value]="searchField">
436+
<span>{{ '${this.templateHelper.getTranslationPath(this.options)}' + searchField + '.preferredName' | translate }}</span>
437+
<span class="advanced-search-option-description">
438+
{{ '${this.templateHelper.getTranslationPath(this.options)}' + searchField + '.description' | translate }}</span>
439+
</mat-option>
440+
</mat-select>
441+
</mat-form-field>
442+
</ng-container>
443+
`
455444
: ''
456445
}
457446
${this.getPropertiesToCreateFilters()

‎src/ng-generate/table/generators/language.generator.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,9 @@ export class LanguageGenerator {
181181
private getBlockTransSearchBar(): string {
182182
if (this.hasSearchBar) {
183183
return `,
184-
"search": "Search"
184+
"search": "Search",
185+
"advancedSearch": "Advanced Search",
186+
"allTextFields": "All Text Fields"
185187
`;
186188
}
187189
return '';
@@ -225,7 +227,9 @@ export class LanguageGenerator {
225227
"validation": {
226228
"invalidInput": "Input can only contain",
227229
"blankSpace": "Input can only contain blank space between characters",
228-
"empty_string_columns_array": "You have to select at least one column to search in"
230+
"empty_string_columns_array": "You have to select at least one column to search in",
231+
"min_char_no": "Minimum number of characters is",
232+
"max_char_no": "Maximum number of characters is"
229233
}`;
230234
}
231235

‎src/ng-generate/table/generators/style.generator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,15 @@ export class StyleGenerator {
163163
}
164164
165165
::ng-deep {
166+
.advanced-search-option-description {
167+
position: relative;
168+
float: left;
169+
font-size: 10px;
170+
line-height: 1;
171+
top: -12px;
172+
white-space: break-spaces;
173+
}
174+
166175
& .resizing {
167176
-moz-user-select: none;
168177
-ms-user-select: none;

0 commit comments

Comments
 (0)