deposit: add new file component

- Fixes missing spinner. - Adds legacy browsers support. - Refactors the deposit edition. - Splits the deposit editor component into serveral samller components. - Uses primeng component for the deposition. Co-Authored-by: Johnny Mariéthoz <[email protected]>
rero · Aug 28, 2024 · f292fc4 · f292fc4
1 parent ff4830e
commit f292fc4
Show file tree

Hide file tree

Showing 39 changed files with 1,285 additions and 1,634 deletions.
diff --git a/angular.json b/angular.json
@@ -23,7 +23,8 @@
               "projects/sonar/src/assets"
             ],
             "styles": [
-              "projects/sonar/src/styles.scss"
+              "projects/sonar/src/styles.scss",
+              "node_modules/ngx-spinner/animations/ball-zig-zag.css"
             ],
             "scripts": [],
             "preserveSymlinks": true,

diff --git a/projects/sonar/.browserslistrc b/projects/sonar/.browserslistrc
@@ -6,12 +6,11 @@
 #   npx browserslist
 
 last 2 Chrome versions
-last 2 ChromeAndroid versions
-
-last 2 Safari versions
-last 2 iOS versions
-
-last 2 Firefox versions
-last 2 FirefoxAndroid versions
-
-# last 2 Edge versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not dead
+> 0.2%
+not IE 9-11
diff --git a/projects/sonar/e2e/tsconfig.json b/projects/sonar/e2e/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es2018",
+    "target": "es2022",
     "types": [
       "jasmine",
       "node"

diff --git a/projects/sonar/src/app/_layout/admin/admin.component.html b/projects/sonar/src/app/_layout/admin/admin.component.html
@@ -48,7 +48,7 @@
                 Deposits
               </a>
               <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
-                <a class="dropdown-item" routerLink="/deposit/0/create" translate>Deposit a publication</a>
+                <a class="dropdown-item" routerLink="/deposit/create" translate>Deposit a publication</a>
                 <a class="dropdown-item" routerLink="/records/deposits" translate>Deposits</a>
               </div>
             </li>

diff --git a/projects/sonar/src/app/app-routing.module.ts b/projects/sonar/src/app/app-routing.module.ts
@@ -43,6 +43,7 @@ import { DetailComponent as ProjectDetailComponent } from './record/project/deta
 import { BriefViewComponent as SubdivisionBriefViewComponent } from './record/subdivision/brief-view/brief-view.component';
 import { UserComponent } from './record/user/user.component';
 import { UserService } from './user.service';
+import { MetadataComponent } from './deposit/metadata/metadata.component';
 
 const adminModeDisabled = (): Observable<ActionStatus> => {
   return of({
@@ -57,6 +58,11 @@ const routes: Routes = [
     component: AdminComponent,
     children: [
       { path: '', component: DashboardComponent },
+      {
+        path: 'deposit/create',
+        canActivate: mapToCanActivate([RoleGuard]),
+        component: UploadComponent,
+      },
       {
         path: 'deposit/:id',
         canActivate: mapToCanActivate([RoleGuard]),
@@ -65,7 +71,7 @@ const routes: Routes = [
         },
         children: [
           {
-            path: 'create',
+            path: 'files',
             component: UploadComponent
           },
           {
@@ -74,7 +80,7 @@ const routes: Routes = [
           },
           {
             path: ':step',
-            component: DepositEditorComponent
+            component: MetadataComponent
           }
         ]
       }

diff --git a/projects/sonar/src/app/app.component.html b/projects/sonar/src/app/app.component.html
@@ -14,5 +14,8 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ngx-spinner type="ball-spin-clockwise" size="medium" bdColor="rgba(51,51,51,0.3)" color="#000"></ngx-spinner>
+<ngx-spinner color="#fff" size="medium" type="ball-zig-zag" [fullScreen]="true">
+  <p class="text-white" translate>Loading…</p>
+</ngx-spinner>
 <router-outlet></router-outlet>
+<p-confirmDialog />
diff --git a/projects/sonar/src/app/app.module.ts b/projects/sonar/src/app/app.module.ts
@@ -36,8 +36,12 @@ import { DropdownModule } from 'primeng/dropdown';
 import { FileUploadModule } from 'primeng/fileupload';
 import { InputTextModule } from 'primeng/inputtext';
 import { OrderListModule } from 'primeng/orderlist';
-import { PanelModule } from 'primeng/panel';
 import { PaginatorModule } from 'primeng/paginator';
+import { PanelModule } from 'primeng/panel';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { StepsModule } from 'primeng/steps';
+import { TabViewModule } from 'primeng/tabview';
+import { ToolbarModule } from 'primeng/toolbar';
 import { AdminComponent } from './_layout/admin/admin.component';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
@@ -73,6 +77,11 @@ import { OtherFilesComponent } from './record/files/other-files/other-files.comp
 import { StatsFilesComponent } from './record/files/stats-files/stats-files.component';
 import { UploadFilesComponent } from './record/files/upload-files/upload-files.component';
 import { DetailComponent as HepvsProjectDetailComponent } from './record/hepvs/project/detail/detail.component';
+
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
+import { FilesComponent } from './deposit/files/files.component';
+import { MetadataComponent } from './deposit/metadata/metadata.component';
 import { IdentifierComponent } from './record/identifier/identifier.component';
 import { DetailComponent as OrganisationDetailComponent } from './record/organisation/detail/detail.component';
 import { OrganisationComponent } from './record/organisation/organisation.component';
@@ -82,6 +91,9 @@ import { BriefViewComponent as SubdivisionBriefViewComponent } from './record/su
 import { UserComponent } from './record/user/user.component';
 import { ValidationComponent } from './record/validation/validation.component';
 import { UserService } from './user.service';
+import { SwisscoveryComponent } from './deposit/editor/swisscovery/swisscovery.component';
+import { MessagesModule } from 'primeng/messages';
+
 
 export function appInitializerFactory(appInitializerService: AppInitializerService): () => Promise<any> {
   return () => appInitializerService.initialize().toPromise();
@@ -130,14 +142,20 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     OtherFilesComponent,
     FaIconClassPipe,
     StatsFilesComponent,
-    FieldDescriptionComponent
+    FieldDescriptionComponent,
+    MetadataComponent,
+    FilesComponent,
+    SwisscoveryComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,
     CollapseModule.forRoot(),
+    StepsModule,
+    ToolbarModule,
+    TabViewModule ,
     TabsModule.forRoot(),
     TooltipModule.forRoot(),
     ModalModule.forRoot(),
@@ -162,7 +180,11 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     PanelModule,
     DividerModule,
     CarouselModule,
-    PaginatorModule
+    PaginatorModule,
+    SplitButtonModule,
+    DialogModule,
+    ConfirmDialogModule,
+    MessagesModule
   ],
   providers: [
     {

diff --git a/projects/sonar/src/app/core/step/step.component.html b/projects/sonar/src/app/core/step/step.component.html
@@ -14,62 +14,9 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row mb-3 mb-sm-5">
-  <div class="col-12 col-sm-1 text-left text-sm-center mb-2 mb-sm-0">
-    <a href class="text-dark" (click)="doCancel($event)">
-      <span class="step d-inline-block rounded-circle bg-warning p-2 text-center mr-3 mr-sm-0">
-        <i class="fa fa-remove fa-lg"></i>
-      </span>
-      <span class="d-sm-block mt-sm-2">{{ 'Cancel' | translate }}</span>
-    </a>
-  </div>
-  <div class="col-sm-2"></div>
-  <div class="col-12 col-sm-9">
-    <div class="row justify-content-end">
-      <div
-        class="col-12 col-sm-2 text-left text-sm-center mb-2 mb-sm-0"
-        *ngFor="let step of steps; let i = index"
-      >
-        <a
-          href
-          class="text-dark"
-          [routerLink]="[linkPrefix, step]"
-          *ngIf="i <= maxStepIndex; else noLink"
-          [ngClass]="{ 'text-light': i <= currentStepIndex }"
-          (click)="click(step)"
-        >
-          <ng-container
-            *ngTemplateOutlet="
-              stepBadge;
-              context: { step: step, i: i, currentStepIndex: currentStepIndex }
-            "
-          ></ng-container>
-        </a>
-        <ng-template #noLink>
-          <ng-container
-            *ngTemplateOutlet="
-              stepBadge;
-              context: { step: step, i: i, currentStepIndex: currentStepIndex }
-            "
-          ></ng-container>
-        </ng-template>
-      </div>
-    </div>
-  </div>
-</div>
-
-<ng-template #stepBadge let-step="step" let-i="i" let-current="currentStepIndex">
-  <span
-    class="step rounded-circle p-2 text-light text-center mr-3 mr-sm-0 d-inline-block"
-    [ngClass]="{
-      'bg-primary text-light': i <= current,
-      'bg-light': i > current
-    }"
-  >
-    <i class="fa fa-check fa-lg" *ngIf="i < current; else number"></i>
-    <ng-template #number>
-      <strong>{{ i + 1 }}</strong>
-    </ng-template>
-  </span>
-  <span class="d-sm-block mt-sm-2">{{ ('step_' + step) | translate }}</span>
-</ng-template>
+<p-steps
+    [model]="items"
+    [readonly]="false"
+    [activeIndex]="0"
+ />
+ <p-divider />
diff --git a/projects/sonar/src/app/core/step/step.component.ts b/projects/sonar/src/app/core/step/step.component.ts
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'sonar-deposit-step',
@@ -23,9 +24,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 })
 export class StepComponent implements OnInit {
   /** Current step of the process */
-  @Input()
-  currentStep: string = null;
-
   /** Current max step, no link available for next steps. */
   @Input()
   maxStep: string = null;
@@ -34,66 +32,20 @@ export class StepComponent implements OnInit {
   @Input()
   steps: string[] = [];
 
-  /** Link prefix for building routes */
-  @Input()
-  linkPrefix = '';
-
-  /** Event emitted when a deposit is deleted. */
-  @Output()
-  cancel: EventEmitter<any> = new EventEmitter();
-
-  /** Event emitted when a step is clicked. */
-  @Output()
-  clicked: EventEmitter<any> = new EventEmitter();
+  items: MenuItem[] = [];
 
   ngOnInit() {
-    if (this.steps.length === 0) {
-      throw new Error('No steps defined');
-    }
-
-    if (!this.currentStep) {
-      this.currentStep = this.steps[0];
-    }
-
     if (!this.maxStep) {
       this.maxStep = this.steps[0];
     }
+    let disabled = false;
+    this.items = this.steps.map((item: string): MenuItem => {
+      const data =  {label: `step_${item}`, routerLink: ['..', item], disabled};
+      if (this.maxStep === item) {
+        disabled = true;
+      }
+      return data;
+    })
   }
 
-  /**
-   * Return index corresponding to the step parameter.
-   *
-   * @return Max step index
-   */
-  get maxStepIndex(): number {
-    return this.steps.findIndex(element => element === this.maxStep);
-  }
-
-  /**
-   * Return index corresponding to the step parameter.
-   *
-   * @return Current step index
-   */
-  get currentStepIndex(): number {
-    return this.steps.findIndex(element => element === this.currentStep);
-  }
-
-  /**
-   * Trigger a cancel on parent.
-   *
-   * @param event DOM event click
-   */
-  doCancel(event: Event) {
-    event.preventDefault();
-    this.cancel.emit();
-  }
-
-  /**
-   * Method triggered when a step is clicked.
-   *
-   * @param step Step clicked.
-   */
-  click(step: string) {
-    this.clicked.emit(step);
-  }
 }
diff --git a/projects/sonar/src/app/deposit/brief-view/brief-view.component.html b/projects/sonar/src/app/deposit/brief-view/brief-view.component.html
@@ -85,13 +85,13 @@ <h4>
   </div>
 
   <div *ngIf="canContinueProcess()">
-    <a href class="btn btn-primary btn-small" [routerLink]="['/deposit', record.id, 'create']" translate>
+    <a href class="btn btn-primary btn-small" [routerLink]="['/deposit', record.id, 'files']" translate>
       Continue process
     </a>
   </div>
 
   <div *ngIf="canReview()">
-    <a href class="btn btn-primary btn-small" [routerLink]="['/deposit', record.id, 'create']" translate>
+    <a href class="btn btn-primary btn-small" [routerLink]="['/deposit', record.id, 'files']" translate>
       Review deposit
     </a>
   </div>

diff --git a/projects/sonar/src/app/deposit/confirmation/confirmation.component.html b/projects/sonar/src/app/deposit/confirmation/confirmation.component.html
@@ -28,7 +28,7 @@ <h1>{{ 'Confirmation' | translate }}</h1>
       <a [href]="publicInterfaceLink" translate>Back to public interface</a>
     </li>
     <li>
-      <a routerLink="/deposit/0/create" translate>Deposit another publication</a>
+      <a routerLink="/deposit/create" translate>Deposit another publication</a>
     </li>
   </ul>
 </ng-container>
diff --git a/projects/sonar/src/app/deposit/confirmation/confirmation.component.ts b/projects/sonar/src/app/deposit/confirmation/confirmation.component.ts
@@ -62,7 +62,7 @@ export class ConfirmationComponent implements OnInit {
       map((result) => result.metadata),
       catchError(() => {
         this._toastr.error(this._translateService.instant('Deposit not found'));
-        this._router.navigate(['deposit', '0', 'create']);
+        this._router.navigate(['records', 'deposits']);
         return of(null);
       })
     );

diff --git a/projects/sonar/src/app/deposit/deposit.service.ts b/projects/sonar/src/app/deposit/deposit.service.ts
@@ -328,15 +328,17 @@ export class DepositService implements OnDestroy {
   extractPDFMetadata(deposit: any): Observable<any> {
     return this._httpClient
       .get(`${this.depositEndPoint}/${deposit.pid}/extract-pdf-metadata`)
-      .pipe(catchError(err => this._handleError(err)));
+      .pipe(
+        catchError(err => this._handleError(err))
+      );
   }
 
   /**
    * Error handling during api call process.
    * @param error - HttpErrorResponse
    */
   private _handleError(error: HttpErrorResponse) {
-    this._toastrService.error(error.error.message);
-    return throwError('Something bad happened; please try again later.');
+    this._toastrService.error(error.statusText);
+    return throwError(() => new Error('Something bad happened; please try again later.'));
   }
 }