[ACA-19] Search libraries improvements (#792)

* [ACA-19][ACA-1967] set Libraries columns

according to updated requirement

* [ACA-19] search term length hint & singular result translation

fixes also [ACA-1933]
This commit is contained in:
Suzana Dirla
2018-11-09 17:55:08 +02:00
committed by Denys Vuika
parent 4a420cc9f9
commit aeb8ddd1f2
9 changed files with 46 additions and 24 deletions

View File

@@ -13,9 +13,9 @@
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)">
<mat-placeholder class="placeholder" *ngIf="!searchTerm.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<mat-placeholder class="placeholder" *ngIf="!searchTerm.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<div matSuffix class="app-suffix-search-icon-wrapper">
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
</div>
</mat-form-field>

View File

@@ -85,4 +85,10 @@ export class SearchInputControlComponent implements OnDestroy {
this.searchTerm = '';
this.searchChange.emit('');
}
isTermTooShort() {
const alphanumericTerm = this.searchTerm.replace(/[^0-9a-z]/gi, '');
return this.searchTerm.length && alphanumericTerm.length < 2;
}
}

View File

@@ -2,7 +2,7 @@
<button mat-icon-button
class="app-search-button"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field">
<input matInput
@@ -10,11 +10,11 @@
[type]="'text'"
[disabled]="true"
[value]="searchedWord">
<mat-placeholder class="placeholder" *ngIf="!searchedWord.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<mat-placeholder class="placeholder" *ngIf="!searchedWord.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
</div>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
</div>
</mat-form-field>
</div>
@@ -24,14 +24,16 @@
(submit)="onSearchSubmit($event)"
(searchChange)="onSearchChange($event)">
</app-search-input-control>
<mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
<div id="search-options">
<mat-checkbox *ngFor="let option of searchOptions"
<mat-checkbox *ngFor="let option of searchOptions"
id="{{ option.id }}"
[(ngModel)]="option.value"
[disabled]="option.shouldDisable()"
(change)="onOptionChange()"
(click)="$event.stopPropagation()">
{{ option.key | translate }}
</mat-checkbox>
</mat-checkbox>
</div>
</mat-menu>

View File

@@ -88,3 +88,9 @@ $top-margin: 12px;
}
}
}
.app-search-hint {
position: absolute;
font-size: 12px;
padding-left: 17px;
}

View File

@@ -210,4 +210,11 @@ export class SearchInputComponent implements OnInit {
isContentChecked(): boolean {
return this.isFilesChecked() || this.isFoldersChecked();
}
hasLibraryConstraint(): boolean {
if (this.isLibrariesChecked()) {
return this.searchInputControl.isTermTooShort();
}
return false;
}
}

View File

@@ -21,7 +21,10 @@
</mat-progress-bar>
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
<div class="content__side--left">
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results--info-text"
*ngIf="totalResults !== 1">{{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results--info-text"
*ngIf="totalResults === 1">{{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_ONE_RESULT' | translate: { number: totalResults } }}</div>
</div>
</div>

View File

@@ -24,7 +24,10 @@
</mat-progress-bar>
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
<div class="content__side--left">
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results--info-text"
*ngIf="totalResults !== 1">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results--info-text"
*ngIf="totalResults === 1">{{ 'APP.BROWSE.SEARCH.FOUND_ONE_RESULT' | translate: { number: totalResults } }}</div>
<div class="adf-search-results__facets">
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>