Merge branch 'w2p-111638_Process-admin-UI-redesign_Overview-page-tables_PR-feedback' into process-admin-ui-redesign-8.0.0-next

Author: AAwouters

src/app/process-page/form/process-form.component.ts

@@ -7,8 +7,7 @@ import { ControlContainer, NgForm } from '@angular/forms';
 import { ScriptParameter } from '../scripts/script-parameter.model';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
-import { RequestService } from '../../core/data/request.service';
-import { Router } from '@angular/router';
+import { Router, NavigationExtras } from '@angular/router';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { RemoteData } from '../../core/data/remote-data';
 import { getProcessListRoute } from '../process-page-routing.paths';
@@ -57,7 +56,6 @@ export class ProcessFormComponent implements OnInit {
     private scriptService: ScriptDataService,
     private notificationsService: NotificationsService,
     private translationService: TranslateService,
-    private requestService: RequestService,
     private router: Router) {
   }
 
@@ -91,7 +89,7 @@ export class ProcessFormComponent implements OnInit {
           const title = this.translationService.get('process.new.notification.success.title');
           const content = this.translationService.get('process.new.notification.success.content');
           this.notificationsService.success(title, content);
-          this.sendBack();
+          this.sendBack(rd.payload);
         } else {
           const title = this.translationService.get('process.new.notification.error.title');
           const content = this.translationService.get('process.new.notification.error.content');
@@ -143,11 +141,17 @@ export class ProcessFormComponent implements OnInit {
     return this.missingParameters.length > 0;
   }
 
-  private sendBack() {
-    this.requestService.removeByHrefSubstring('/processes');
-    /* should subscribe on the previous method to know the action is finished and then navigate,
-    will fix this when the removeByHrefSubstring changes are merged */
-    this.router.navigateByUrl(getProcessListRoute());
+  /**
+   * Redirect the user to the processes overview page with the new process' ID,
+   * so it can be highlighted in the overview table.
+   * @param newProcess The newly created process
+   * @private
+   */
+  private sendBack(newProcess: Process) {
+    const extras: NavigationExtras = {
+      queryParams: { new_process_id: newProcess.processId },
+    };
+    void this.router.navigate([getProcessListRoute()], extras);
   }
 }
 

src/app/process-page/overview/process-overview.component.html

@@ -2,18 +2,7 @@
     <div class="d-flex">
         <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
     </div>
-    <div class="d-flex justify-content-end mb-2">
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary mr-2"
-                (click)="processBulkDeleteService.clearAllProcesses()"><i
-                class="fas fa-undo pr-2"></i>{{'process.overview.delete.clear' | translate }}
-        </button>
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-danger mr-2"
-                (click)="openDeleteModal(deleteModal)"><i
-                class="fas fa-trash pr-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
-        </button>
-        <button class="btn btn-success" routerLink="/processes/new"><i
-                class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>
-    </div>
+    <ng-container *ngTemplateOutlet="buttons"></ng-container>
 
     <div class="sections">
         <ds-process-overview-table
@@ -23,18 +12,37 @@ <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
         <ds-process-overview-table
                 [processStatus]="ProcessStatus.SCHEDULED"
                 [useAutoRefreshingSearchBy]="true"
-                [getInfoValueMethod]="processOverviewService.timeStarted"/>
+                [getInfoValueMethod]="processOverviewService.timeCreated"/>
         <ds-process-overview-table
                 [processStatus]="ProcessStatus.COMPLETED"
+                [sortField]="ProcessSortField.endTime"
                 [useAutoRefreshingSearchBy]="true"
                 [getInfoValueMethod]="processOverviewService.timeCompleted"/>
         <ds-process-overview-table
                 [processStatus]="ProcessStatus.FAILED"
+                [sortField]="ProcessSortField.endTime"
                 [useAutoRefreshingSearchBy]="true"
                 [getInfoValueMethod]="processOverviewService.timeCompleted"/>
     </div>
+
+    <ng-container *ngTemplateOutlet="buttons"></ng-container>
 </div>
 
+<ng-template #buttons>
+    <div class="d-flex justify-content-end mb-2">
+        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary mr-2"
+                (click)="processBulkDeleteService.clearAllProcesses()"><i
+            class="fas fa-undo pr-2"></i>{{'process.overview.delete.clear' | translate }}
+        </button>
+        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-danger mr-2"
+                (click)="openDeleteModal(deleteModal)"><i
+            class="fas fa-trash pr-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
+        </button>
+        <button class="btn btn-success" routerLink="/processes/new"><i
+            class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>
+    </div>
+</ng-template>
+
 <ng-template #deleteModal>
 
     <div>

src/app/process-page/overview/process-overview.component.spec.ts

@@ -3,86 +3,27 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, TemplateRef } from '@angular/core';
 import { ProcessDataService } from '../../core/data/processes/process-data.service';
-import { Process } from '../processes/process.model';
-import { EPersonDataService } from '../../core/eperson/eperson-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
 import { By } from '@angular/platform-browser';
-import { ProcessStatus } from '../processes/process-status.model';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { createPaginatedList } from '../../shared/testing/utils.test';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { DatePipe } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
 import { ProcessBulkDeleteService } from './process-bulk-delete.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ProcessOverviewService } from './process-overview.service';
 
 describe('ProcessOverviewComponent', () => {
   let component: ProcessOverviewComponent;
   let fixture: ComponentFixture<ProcessOverviewComponent>;
 
   let processService: ProcessDataService;
-  let ePersonService: EPersonDataService;
-  let paginationService;
-
-  let processes: Process[];
-  let ePerson: EPerson;
 
   let processBulkDeleteService;
   let modalService;
 
-  const pipe = new DatePipe('en-US');
-
   function init() {
-    processes = [
-      Object.assign(new Process(), {
-        processId: 1,
-        scriptName: 'script-name',
-        startTime: '2020-03-19 00:30:00',
-        endTime: '2020-03-19 23:30:00',
-        processStatus: ProcessStatus.COMPLETED
-      }),
-      Object.assign(new Process(), {
-        processId: 2,
-        scriptName: 'script-name',
-        startTime: '2020-03-20 00:30:00',
-        endTime: '2020-03-20 23:30:00',
-        processStatus: ProcessStatus.FAILED
-      }),
-      Object.assign(new Process(), {
-        processId: 3,
-        scriptName: 'another-script-name',
-        startTime: '2020-03-21 00:30:00',
-        endTime: '2020-03-21 23:30:00',
-        processStatus: ProcessStatus.RUNNING
-      })
-    ];
-    ePerson = Object.assign(new EPerson(), {
-      metadata: {
-        'eperson.firstname': [
-          {
-            value: 'John',
-            language: null
-          }
-        ],
-        'eperson.lastname': [
-          {
-            value: 'Doe',
-            language: null
-          }
-        ]
-      }
-    });
-    processService = jasmine.createSpyObj('processService', {
-      findAll: createSuccessfulRemoteDataObject$(createPaginatedList(processes))
+    processService = jasmine.createSpyObj('processOverviewService', {
+      timeStarted: '2024-02-05 16:43:32',
     });
-    ePersonService = jasmine.createSpyObj('ePersonService', {
-      findById: createSuccessfulRemoteDataObject$(ePerson)
-    });
-
-    paginationService = new PaginationServiceStub();
 
     processBulkDeleteService = jasmine.createSpyObj('processBulkDeleteService', {
       clearAllProcesses: {},
@@ -96,11 +37,7 @@ describe('ProcessOverviewComponent', () => {
     });
 
     (processBulkDeleteService.isToBeDeleted as jasmine.Spy).and.callFake((id) => {
-      if (id === 2) {
-        return true;
-      } else {
-        return false;
-      }
+      return id === 2;
     });
 
     modalService = jasmine.createSpyObj('modalService', {
@@ -114,9 +51,7 @@ describe('ProcessOverviewComponent', () => {
       declarations: [ProcessOverviewComponent, VarDirective],
       imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       providers: [
-        { provide: ProcessDataService, useValue: processService },
-        { provide: EPersonDataService, useValue: ePersonService },
-        { provide: PaginationService, useValue: paginationService },
+        { provide: ProcessOverviewService, useValue: processService },
         { provide: ProcessBulkDeleteService, useValue: processBulkDeleteService },
         { provide: NgbModal, useValue: modalService },
       ],
@@ -165,21 +100,19 @@ describe('ProcessOverviewComponent', () => {
 
   describe('openDeleteModal', () => {
     it('should open the modal', () => {
-      component.openDeleteModal({});
+      component.openDeleteModal({} as TemplateRef<any>);
       expect(modalService.open).toHaveBeenCalledWith({});
     });
   });
 
   describe('deleteSelected', () => {
     it('should call the deleteSelectedProcesses method on the processBulkDeleteService and close the modal when processing is done', () => {
       spyOn(component, 'closeModal');
-      spyOn(component, 'setProcesses');
 
       component.deleteSelected();
 
       expect(processBulkDeleteService.deleteSelectedProcesses).toHaveBeenCalled();
       expect(component.closeModal).toHaveBeenCalled();
-      expect(component.setProcesses).toHaveBeenCalled();
     });
   });
 });

src/app/process-page/overview/process-overview.component.ts

@@ -1,19 +1,9 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { RemoteData } from '../../core/data/remote-data';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { Process } from '../processes/process.model';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { EPersonDataService } from '../../core/eperson/eperson-data.service';
-import { switchMap } from 'rxjs/operators';
-import { ProcessDataService } from '../../core/data/processes/process-data.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { FindListOptions } from '../../core/data/find-list-options.model';
+import { Component, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { ProcessBulkDeleteService } from './process-bulk-delete.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { hasValue } from '../../shared/empty.util';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
-import { ProcessOverviewService } from './process-overview.service';
+import { ProcessOverviewService, ProcessSortField } from './process-overview.service';
 import { ProcessStatus } from '../processes/process-status.model';
 
 @Component({
@@ -25,64 +15,25 @@ import { ProcessStatus } from '../processes/process-status.model';
  */
 export class ProcessOverviewComponent implements OnInit, OnDestroy {
 
+  // Enums are redeclared here so they can be used in the template
   protected readonly ProcessStatus = ProcessStatus;
+  protected readonly ProcessSortField = ProcessSortField;
 
-  /**
-   * List of all processes
-   */
-  processesRD$: Observable<RemoteData<PaginatedList<Process>>>;
-
-  /**
-   * The current pagination configuration for the page used by the FindAll method
-   */
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-
-  /**
-   * The current pagination configuration for the page
-   */
-  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'po',
-    pageSize: 20
-  });
-
-  /**
-   * Date format to use for start and end time of processes
-   */
-  dateFormat = 'yyyy-MM-dd HH:mm:ss';
-
-  processesToDelete: string[] = [];
   private modalRef: any;
 
   isProcessingSub: Subscription;
 
-  constructor(protected processService: ProcessDataService,
-              protected processOverviewService: ProcessOverviewService,
-              protected paginationService: PaginationService,
-              protected ePersonService: EPersonDataService,
+  constructor(protected processOverviewService: ProcessOverviewService,
               protected modalService: NgbModal,
               public processBulkDeleteService: ProcessBulkDeleteService,
-              protected dsoNameService: DSONameService,
   ) {
   }
 
   ngOnInit(): void {
-    this.setProcesses();
     this.processBulkDeleteService.clearAllProcesses();
   }
 
-  /**
-   * Send a request to fetch all processes for the current page
-   */
-  setProcesses() {
-    this.processesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-      switchMap((config) => this.processService.findAll(config, true, false))
-    );
-  }
-
   ngOnDestroy(): void {
-    this.paginationService.clearPagination(this.pageConfig.id);
     if (hasValue(this.isProcessingSub)) {
       this.isProcessingSub.unsubscribe();
     }
@@ -92,7 +43,7 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
    * Open a given modal.
    * @param content   - the modal content.
    */
-  openDeleteModal(content) {
+  openDeleteModal(content: TemplateRef<any>) {
     this.modalRef = this.modalService.open(content);
   }
 
@@ -118,7 +69,6 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
       .subscribe((isProcessing) => {
       if (!isProcessing) {
         this.closeModal();
-        this.setProcesses();
       }
     });
   }