Merge branch 'dspace-cris-2023_02_x' into task/ux-plus-cris-2023_02_x/UXP-184

# Conflicts:
#	src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
#	src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts
#	src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
#	src/app/shared/shared.module.ts

Author: atarix83

src/app/bulk-import/bulk-import-page.component.html

@@ -22,7 +22,7 @@ <h2 class="mb-3">{{ 'bulk-import.title' | translate }}</h2>
           {{'bulk-import.submit' | translate}}
       </span>
     </button>
-    <button class="btn btn-outline-secondary float-right mr-2" (click)="goBack()">
+    <button type="button" class="btn btn-outline-secondary float-right mr-2" (click)="goBack()">
       {{'bulk-import.back' | translate}}
     </button>
 

src/app/shared/date.util.spec.ts

@@ -1,4 +1,11 @@
-import { dateToString, dateToNgbDateStruct, dateToISOFormat, isValidDate, yearFromString } from './date.util';
+import {
+  dateToString,
+  dateToNgbDateStruct,
+  dateToISOFormat,
+  isValidDate,
+  yearFromString,
+  localeDate
+} from './date.util';
 
 describe('Date Utils', () => {
 
@@ -104,4 +111,15 @@ describe('Date Utils', () => {
             expect(yearFromString('test')).toBeNull();
         });
     });
+
+    describe('localeDate', () => {
+      it('should return the date in the current locale', () => {
+        expect(localeDate('2022-06-03', 'en')).toEqual('June 3, 2022');
+        expect(localeDate('2022-06-03', 'it')).toEqual('3 giugno 2022');
+        expect(localeDate('2022-06', 'en')).toEqual('June 2022');
+        expect(localeDate('2022-06', 'it')).toEqual('giugno 2022');
+        expect(localeDate('2022', 'en')).toEqual('2022');
+        expect(localeDate('2022', 'it')).toEqual('2022');
+      });
+    });
 });

src/app/shared/date.util.ts

@@ -108,16 +108,19 @@ export function yearFromString(date: string) {
 }
 
 
-export function localeDate(date: string, locale?: string) {
+export function localeDate(date: string, locale?: string): string {
+  const parts = date.split('-').map(part => parseInt(part, 10));
+  const year = parts[0];
+  const month = parts.length > 1 ? parts[1] - 1 : 0; // Default to January if no month
+  const day = parts.length > 2 ? parts[2] : 1; // Default to the first day if no day
 
-  const tokens = date.split('-').length;
+  const dateObj = new Date(year, month, day);
 
-  const options: Intl.DateTimeFormatOptions  = {
+  const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
-    month: tokens >= 2 ? 'long' : undefined,
-    day: tokens >= 3 ? 'numeric' : undefined,
+    month: parts.length > 1 ? 'long' : undefined, // Show month only if provided
+    day: parts.length > 2 ? 'numeric' : undefined, // Show day only if provided
   };
 
-  return new Date(date).toLocaleDateString(locale, options);
-
+  return dateObj.toLocaleDateString(locale, options);
 }

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/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -1,21 +1,20 @@
 <ds-alert *ngIf="description" [content]="description" [type]="'alert-info'"></ds-alert>
-<div *ngIf="enabledSearch" class="treeview-header row  mb-1" data-test="search-field">
+<div *ngIf="enabledSearch" class="treeview-header row" data-test="search-field">
   <div class="col-12 d-flex">
     <div class="input-group">
-      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
-             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
+      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
       <div class="input-group-append" id="button-addon4">
-        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
-          {{'vocabulary-treeview.search.form.search' | translate}}
-        </button>
-        <button class="btn btn-outline-secondary" type="button" (click)="reset()">
-          {{'vocabulary-treeview.search.form.reset' | translate}}
-        </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
-          {{'vocabulary-treeview.search.form.add' | translate}}
+        <button class="btn btn-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
+          <span><i class="fas fa-search"></i> {{'vocabulary-treeview.search.form.search' | translate}}</span>
         </button>
       </div>
     </div>
+    <button class="btn btn-secondary ml-3 flex-shrink-0" type="button" (click)="reset()">
+      <span><i class="fas fa-eraser"></i> {{'vocabulary-treeview.search.form.reset' | translate}}</span>
+    </button>
+    <button *ngIf="showAdd && !this.vocabularyOptions.closed" class="btn btn-secondary ml-3 flex-shrink-0" type="button" (click)="add()">
+        <span><i class="fas fa-plus"></i> {{'vocabulary-treeview.search.form.add' | translate}}</span>
+    </button>
   </div>
 </div>
 <div class="treeview-container">
@@ -66,7 +65,7 @@ <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-ce
         <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
                 (click)="loadChildren(node)">
-          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
+          <span class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></span>
         </button>
 
           <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -15,6 +15,7 @@ import { VocabularyTreeFlattener } from './vocabulary-tree-flattener';
 import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
 import { FormFieldMetadataValueObject } from '../builder/models/form-field-metadata-value.model';
+import { AlertType } from '../../alert/alert-type';
 import { Metadata } from '../../../core/shared/metadata.utils';
 
 export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEntry | VocabularyEntryDetail;

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';
 import { CardsBrowseElementsComponent } from './browse-most-elements/cards-browse-elements/cards-browse-elements.component';
 import {
   ThemedCardsBrowseElementsComponent
@@ -409,7 +410,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);
+  });
+});