[DSC-1932] Porting of "CST-16493"

Author: alisaismailati

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

@@ -12,12 +12,12 @@
     <button class="dropdown-item disabled" *ngIf="searchListEntity?.length == 0 && !(isLoadingList | async)">
       {{'submission.sections.general.no-entity' | translate}}
     </button>
-    <button *ngFor="let listItem of searchListEntity"
+    <button *ngFor="let listItem of searchListEntity | dsSort: 'label'"
             class="dropdown-item entity-item"
             title="{{ listItem.label }}"
             (click)="onSelect(listItem)">
       <ul class="list-unstyled mb-0">
-        <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</li>
+        <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.label }}</li>
       </ul>
     </button>
     <button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" >

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,
+            label: 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

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

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]);
+  }
+}