Merge pull request DSpace#1691 from 4Science/CST-6056

fix for filter suggestion issue and bitstream description issue

Author: tdonohue

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -50,3 +50,7 @@
     cursor: grabbing;
   }
 }
+
+:host ::ng-deep .larger-tooltip .tooltip-inner {
+  max-width: 500px;
+}

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html

@@ -9,9 +9,10 @@
   </div>
   <div class="{{columnSizes.columns[1].buildClasses()}} row-element d-flex align-items-center">
     <div class="w-100">
-      <span class="text-truncate">
-      {{ bitstream?.firstMetadataValue('dc.description') }}
-      </span>
+      <div class="text-truncate" [tooltipClass]="'larger-tooltip'" placement="bottom"
+           [ngbTooltip]="bitstream?.firstMetadataValue('dc.description')">
+        {{ bitstream?.firstMetadataValue('dc.description') }}
+      </div>
     </div>
   </div>
   <div class="{{columnSizes.columns[2].buildClasses()}} row-element d-flex align-items-center">

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html

@@ -27,7 +27,7 @@
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
       <div *ngFor="let suggestionOption of suggestions">
-        <a href="javascript:void(0);" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption.value)" #suggestion>
+        <a href="javascript:void(0);" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption)" #suggestion>
           <span [innerHTML]="suggestionOption.displayValue"></span>
         </a>
       </div>

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.spec.ts

@@ -51,7 +51,7 @@ describe('FilterInputSuggestionsComponent', () => {
       fixture.detectChanges();
     });
     it('should call onClickSuggestion() with the suggestion as a parameter', () => {
-      expect(comp.onClickSuggestion).toHaveBeenCalledWith(suggestions[clickedIndex].value);
+      expect(comp.onClickSuggestion).toHaveBeenCalledWith(suggestions[clickedIndex]);
     });
   });
 });

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts

@@ -32,8 +32,8 @@ export class FilterInputSuggestionsComponent extends InputSuggestionsComponent {
     this.submitSuggestion.emit(data);
   }
 
-  onClickSuggestion(data) {
-    this.value = data;
+  onClickSuggestion(data: InputSuggestion) {
+    this.value = data.value;
     this.clickSuggestion.emit(data);
     this.close();
     this.blockReopen = true;

src/app/shared/input-suggestions/input-suggestions.model.ts

@@ -7,6 +7,14 @@ export interface InputSuggestion {
    */
   displayValue: string;
 
+  /**
+   * The search query that can be used with filter suggestion.
+   * It contains the value within the operator :
+   *  - value,equals
+   *  - value,authority
+   */
+  query?: string;
+
   /**
    * The actual value of the suggestion
    */

src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html

@@ -24,7 +24,7 @@
                           [name]="filterConfig.paramName"
                           [(ngModel)]="filter"
                           (submitSuggestion)="onSubmit($event)"
-                          (clickSuggestion)="onSubmit($event)"
+                          (clickSuggestion)="onClick($event)"
                           (findSuggestions)="findSuggestions($event)"
                           ngDefaultControl></ds-filter-input-suggestions>
 </div>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -9,6 +9,6 @@
     </span>
   </label>
   <span class="float-right filter-value-count ml-auto">
-                        <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
-                    </span>
+    <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
+  </span>
 </a>

src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -234,33 +234,16 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
    * @param data The string from the input field
    */
   onSubmit(data: any) {
-    if (data.match(new RegExp(`^.+,(equals|query|authority)$`))) {
-      this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
-          if (isNotEmpty(data)) {
-            this.router.navigate(this.getSearchLinkParts(), {
-              queryParams:
-                {
-                  [this.filterConfig.paramName]: [
-                    ...selectedValues.map((facet) => this.getFacetValue(facet)),
-                    data
-                  ]
-                },
-              queryParamsHandling: 'merge'
-            });
-            this.filter = '';
-          }
-          this.filterSearchResults = observableOf([]);
-        }
-      );
-    }
+    this.applyFilterValue(data);
   }
 
   /**
-   * On click, set the input's value to the clicked data
-   * @param data The value of the option that was clicked
+   * Submits a selected filter value to the filter
+   * Take the query from the InputSuggestion object
+   * @param data The input suggestion selected
    */
-  onClick(data: any) {
-    this.filter = data;
+  onClick(data: InputSuggestion) {
+    this.applyFilterValue(data.query);
   }
 
   /**
@@ -296,6 +279,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
                   return rd.payload.page.map((facet) => {
                     return {
                       displayValue: this.getDisplayValue(facet, data),
+                      query: this.getFacetValue(facet),
                       value: stripOperatorFromFilterValue(this.getFacetValue(facet))
                     };
                   });
@@ -308,6 +292,31 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Build the filter query using the value given and apply to the search.
+   * @param data The string from the input field
+   */
+  protected applyFilterValue(data) {
+    if (data.match(new RegExp(`^.+,(equals|query|authority)$`))) {
+      this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
+        if (isNotEmpty(data)) {
+          this.router.navigate(this.getSearchLinkParts(), {
+            queryParams:
+              {
+                [this.filterConfig.paramName]: [
+                  ...selectedValues.map((facet) => this.getFacetValue(facet)),
+                  data
+                ]
+              },
+            queryParamsHandling: 'merge'
+          });
+          this.filter = '';
+        }
+        this.filterSearchResults = observableOf([]);
+      });
+    }
+  }
+
   /**
    * Retrieve facet value
    */

src/app/shared/search/search.utils.spec.ts

@@ -66,11 +66,11 @@ describe('Search Utils', () => {
 
   describe('addOperatorToFilterValue', () => {
     it('should add the operator to the value', () => {
-      expect(addOperatorToFilterValue('value', 'operator')).toEqual('value,operator');
+      expect(addOperatorToFilterValue('value', 'equals')).toEqual('value,equals');
     });
 
     it('shouldn\'t add the operator to the value if it already contains the operator', () => {
-      expect(addOperatorToFilterValue('value,operator', 'operator')).toEqual('value,operator');
+      expect(addOperatorToFilterValue('value,equals', 'equals')).toEqual('value,equals');
     });
   });