Merged in task/dspace-cris-2023_02_x/DSC-1932 (pull request DSpace#2279)

Task/dspace cris 2023 02 x/DSC-1932

Approved-by: Alisa Ismailati

Author: Simone-Ramundi

src/app/shared/entity-dropdown/entity-dropdown.component.html

@@ -13,12 +13,12 @@
       {{'submission.sections.general.no-entity' | translate}}
     </button>
   </li>
-  <li *ngFor="let listItem of searchListEntity" class="entity-item text-primary">
+  <li *ngFor="let listItem of searchListEntity | dsSort: 'translatedLabel'" class="entity-item text-primary">
     <button class="dropdown-item"
             role="menuitem"
-            title="{{ listItem.label }}"
+            title="{{ listItem.translatedLabel }}"
             (click)="onSelect(listItem)">
-      <span class="text-truncate font-weight-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</span>
+      <span class="text-truncate font-weight-bold">{{ listItem.translatedLabel }}</span>
     </button>
   </li>
   <li *ngIf="(isLoadingList | async)">

src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts

@@ -3,22 +3,16 @@ import { EntityDropdownComponent } from './entity-dropdown.component';
 import { getTestScheduler } from 'jasmine-marbles';
 import { createSuccessfulRemoteDataObject$ } from '../remote-data.utils';
 import { ItemType } from '../../core/shared/item-relationships/item-type.model';
-import { ChangeDetectorRef, NO_ERRORS_SCHEMA, Pipe, PipeTransform } from '@angular/core';
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
 import { EntityTypeDataService } from '../../core/data/entity-type-data.service';
 import { TestScheduler } from 'rxjs/testing';
 import { By } from '@angular/platform-browser';
 import { createPaginatedList } from '../testing/utils.test';
 import { ItemExportFormatService } from '../../core/itemexportformat/item-export-format.service';
 import { of } from 'rxjs/internal/observable/of';
 import { ItemExportFormat, ItemExportFormatMap } from '../../core/itemexportformat/model/item-export-format.model';
-
-// eslint-disable-next-line @angular-eslint/pipe-prefix
-@Pipe({ name: 'translate' })
-class MockTranslatePipe implements PipeTransform {
-  transform(value: string): string {
-    return value;
-  }
-}
+import { TranslateService } from '@ngx-translate/core';
+import { SortPipe } from '../utils/sort.pipe';
 
 const entities: ItemType[] = [
   Object.assign(new ItemType(), {
@@ -91,18 +85,23 @@ describe('EntityDropdownComponent', () => {
     byEntityTypeAndMolteplicity: jasmine.createSpy('byEntityTypeAndMolteplicity')
   });
 
-  let translatePipeSpy: jasmine.Spy;
+  const translateServiceMock: any = {
+    instant(name) {
+      return 'Statistics';
+    }
+  };
 
   const paginatedEntities = createPaginatedList(entities);
   const paginatedEntitiesRD$ = createSuccessfulRemoteDataObject$(paginatedEntities);
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [],
-      declarations: [EntityDropdownComponent, MockTranslatePipe],
+      declarations: [EntityDropdownComponent, SortPipe],
       providers: [
         { provide: EntityTypeDataService, useValue: entityTypeServiceMock },
         { provide: ItemExportFormatService, useValue: itemExportFormatServiceMock },
+        { provide: TranslateService, useValue: translateServiceMock },
         ChangeDetectorRef
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -119,15 +118,6 @@ describe('EntityDropdownComponent', () => {
     componentAsAny.entityTypeService.getAllAuthorizedRelationshipTypeImport.and.returnValue(paginatedEntitiesRD$);
     componentAsAny.itemExportFormatService.byEntityTypeAndMolteplicity.and.returnValue(of(entityFormatList));
     component.isSubmission = true;
-
-    translatePipeSpy = spyOn(MockTranslatePipe.prototype, 'transform');
-  });
-
-  it('should translate entries', () => {
-    scheduler.schedule(() => fixture.detectChanges());
-    scheduler.flush();
-
-    expect(translatePipeSpy).toHaveBeenCalledWith('entity_1.listelement.badge');
   });
 
   it('should init component with entities list', () => {

src/app/shared/entity-dropdown/entity-dropdown.component.ts

@@ -23,6 +23,7 @@ import {
 } from '../../core/itemexportformat/item-export-format.service';
 import { createSuccessfulRemoteDataObject } from '../remote-data.utils';
 import { FindListOptions } from '../../core/data/find-list-options.model';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-entity-dropdown',
@@ -91,12 +92,14 @@ export class EntityDropdownComponent implements OnInit, OnDestroy {
    * @param {EntityTypeDataService} entityTypeService
    * @param {ItemExportFormatService} itemExportFormatService
    * @param {ElementRef} el
+   * @param {TranslateService} translate
    */
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private entityTypeService: EntityTypeDataService,
     private itemExportFormatService: ItemExportFormatService,
-    private el: ElementRef
+    private el: ElementRef,
+    private translate: TranslateService
   ) { }
 
   /**
@@ -194,12 +197,21 @@ export class EntityDropdownComponent implements OnInit, OnDestroy {
     }
     this.searchListEntity$ = searchListEntity$.pipe(
       switchMap((entityType: RemoteData<PaginatedList<ItemType>>) => entityType.payload.page),
+      map((item: ItemType) => {
+          return {
+            ...item,
+            translatedLabel: this.translate.instant(`${item.label?.toLowerCase()}.listelement.badge`)
+          };
+        }
+      ),
       reduce((acc: any, value: any) => [...acc, value], []),
       startWith([])
     );
     this.subs.push(
       this.searchListEntity$.subscribe({
-        next: (result: ItemType[]) => { this.searchListEntity.push(...result); },
+        next: (result: ItemType[]) => {
+          this.searchListEntity = [...this.searchListEntity, ...result];
+        },
         complete: () => { this.hideShowLoader(false); this.changeDetectorRef.detectChanges(); }
       })
     );

src/app/shared/shared.module.ts

@@ -359,6 +359,7 @@ import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view/met
 import { MetadataLinkViewOrcidComponent } from './metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component';
 import { SwitchComponent } from './switch/switch.component';
 import {StickyPopoverDirective} from './metadata-link-view/sticky-popover.directive';
+import { SortPipe } from './utils/sort.pipe';
 
 const MODULES = [
   CommonModule,
@@ -405,7 +406,8 @@ const PIPES = [
   ConsolePipe,
   ObjNgFor,
   BrowserOnlyPipe,
-  ShortNumberPipe
+  ShortNumberPipe,
+  SortPipe,
 ];
 
 const COMPONENTS = [

src/app/shared/utils/sort.pipe.spec.ts

@@ -0,0 +1,65 @@
+import { SortPipe } from './sort.pipe';
+
+describe('SortPipe', () => {
+  let pipe: SortPipe;
+
+  beforeEach(() => {
+    pipe = new SortPipe();
+  });
+
+  it('should return the original value if value is null or undefined', () => {
+    expect(pipe.transform(null)).toBeNull();
+    expect(pipe.transform(undefined)).toBeUndefined();
+  });
+
+  it('should return the original value if no order is invalid', () => {
+    const inputArray = [3, 1, 2];
+    expect(pipe.transform(inputArray, '', null)).toEqual(inputArray);
+  });
+
+  it('should sort the array in ascending order if no column is provided', () => {
+    const inputArray = [3, 1, 2];
+    const sortedArray = [1, 2, 3];
+    expect(pipe.transform(inputArray, '')).toEqual(sortedArray);
+  });
+
+  it('should sort the array in descending order if no column is provided and order is desc', () => {
+    const inputArray = [3, 1, 2];
+    const sortedArray = [3, 2, 1];
+    expect(pipe.transform(inputArray, '', 'desc')).toEqual(sortedArray);
+  });
+
+  it('should return the original array if it contains one or fewer elements', () => {
+    const inputArray = [1];
+    expect(pipe.transform(inputArray)).toEqual(inputArray);
+    expect(pipe.transform([])).toEqual([]);
+  });
+
+  it('should sort the array by a specific column in ascending order', () => {
+    const inputArray = [
+      { label: 'banana' },
+      { label: 'apple' },
+      { label: 'cherry' }
+    ];
+    const sortedArray = [
+      { label: 'apple' },
+      { label: 'banana' },
+      { label: 'cherry' }
+    ];
+    expect(pipe.transform(inputArray, 'label')).toEqual(sortedArray);
+  });
+
+  it('should sort the array by a specific column in descending order', () => {
+    const inputArray = [
+      { label: 'banana' },
+      { label: 'apple' },
+      { label: 'cherry' }
+    ];
+    const sortedArray = [
+      { label: 'cherry' },
+      { label: 'banana' },
+      { label: 'apple' }
+    ];
+    expect(pipe.transform(inputArray, 'label', 'desc')).toEqual(sortedArray);
+  });
+});

src/app/shared/utils/sort.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import orderBy from 'lodash/orderBy';
+
+@Pipe({
+  name: 'dsSort'
+})
+export class SortPipe implements PipeTransform {
+
+  transform(value: any[], column: string = '', order: 'asc' | 'desc' = 'asc'): any[] {
+    if (!value || !order) {
+      return value;
+    }
+    if (!column || column === '') {
+      if (order === 'asc') {
+        return value.sort();
+      } else {
+        return value.sort().reverse();
+      }
+    }
+    if (value.length <= 1) {
+      return value;
+    }
+
+    return orderBy(value, [column], [order]);
+  }
+}