[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]
2025-07-31 17:38:28 +00:00 · 2018-11-09 17:55:08 +02:00
parent 4a420cc9f9
commit aeb8ddd1f2
9 changed files with 46 additions and 24 deletions
--- a/src/app/components/search/search-input-control/search-input-control.component.html
+++ b/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>
--- a/src/app/components/search/search-input-control/search-input-control.component.ts
+++ b/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;
+  }
 }
--- a/src/app/components/search/search-input/search-input.component.html
+++ b/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">
-        <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>
--- a/src/app/components/search/search-input/search-input.component.theme.scss
+++ b/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;
+}
--- a/src/app/components/search/search-input/search-input.component.ts
+++ b/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;
+  }
 }
--- a/src/app/components/search/search-libraries-results/search-libraries-results.component.html
+++ b/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>

--- a/src/app/components/search/search-results/search-results.component.html
+++ b/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>
--- a/src/assets/app.extensions.json
+++ b/src/assets/app.extensions.json
@@ -1272,9 +1272,9 @@
          "desktopOnly": false
        },
        {
-          "id": "app.libraries.id",
-          "key": "id",
-          "title": "APP.DOCUMENT_LIST.COLUMNS.ID",
+          "id": "app.libraries.role",
+          "key": "role",
+          "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
        }
      ]
    }
--- a/src/assets/i18n/en.json
+++ b/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",