[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]

src/app/components/search/search-input-control/search-input-control.component.html

@@ -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>

src/app/components/search/search-input-control/search-input-control.component.ts

@@ -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;
+  }
 }

src/app/components/search/search-input/search-input.component.html

@@ -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">
+        <div matSuffix class="app-suffix-search-icon-wrapper">
-        <mat-icon>arrow_drop_down</mat-icon>
+            <mat-icon>arrow_drop_down</mat-icon>
-      </div>
+        </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>

src/app/components/search/search-input/search-input.component.theme.scss

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

src/app/components/search/search-input/search-input.component.ts

@@ -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;
+  }
 }

src/app/components/search/search-libraries-results/search-libraries-results.component.html

@@ -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>
 

src/app/components/search/search-results/search-results.component.html

@@ -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>

src/assets/app.extensions.json

@@ -1272,9 +1272,9 @@
           "desktopOnly": false
         },
         {
-          "id": "app.libraries.id",
+          "id": "app.libraries.role",
-          "key": "id",
+          "key": "role",
-          "title": "APP.DOCUMENT_LIST.COLUMNS.ID",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
           "type": "text",
           "sortable": true,
           "desktopOnly": true
@@ -1287,14 +1287,6 @@
           "sortable": true,
           "template": "app.columns.libraryStatus",
           "desktopOnly": true
-        },
-        {
-          "id": "app.libraries.role",
-          "key": "role",
-          "title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
-          "type": "text",
-          "sortable": true,
-          "desktopOnly": true
         }
       ]
     }

src/assets/i18n/en.json

@@ -128,6 +128,7 @@
             "SEARCH": {
                 "TITLE": "Search Results",
                 "FOUND_RESULTS": "{{ number }} results found",
+                "FOUND_ONE_RESULT": "{{ number }} result found",
                 "CUSTOM_ROW": {
                     "MODIFIED": "Modified",
                     "LOCATION": "Location",
@@ -137,7 +138,8 @@
             },
             "SEARCH_LIBRARIES": {
               "TITLE": "Libraries found...",
-              "FOUND_RESULTS": "{{ number }} results"
+              "FOUND_RESULTS": "{{ number }} results",
+              "FOUND_ONE_RESULT": "{{ number }} result"
             }
         },
         "ACTIONS": {
@@ -357,7 +359,8 @@
           "PLACEHOLDER": "Search everywhere",
           "FILES": "Files",
           "FOLDERS": "Folders",
-          "LIBRARIES": "Libraries"
+          "LIBRARIES": "Libraries",
+          "HINT": "Query ‘term’ is too short. Must have at least 2 alphanumeric chars"
         },
         "SORT": {
             "RELEVANCE": "Relevance",