detail view: allow the addition of buttons

projects/rero/ng-core/src/lib/record/detail/detail-button/IRecordEvent.interface.ts

@@ -0,0 +1,21 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2020-2023 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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/>.
+ */
+export interface IRecordEvent {
+  action: string;
+  record?: any;
+  url?: string;
+}

projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html

@@ -0,0 +1,59 @@
+<!--
+  RERO angular core
+  Copyright (C) 2020-2023 RERO
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  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/>.
+-->
+<a href class="d-inline-block mb-2" (click)="$event.preventDefault(); goBack()">
+  <i class="fa fa-arrow-left mr-1"></i> {{ 'Back' | translate }}
+</a>
+<div class="float-right ml-4 mt-2 mb-4" >
+  <ng-content select="[beforeButton]"></ng-content>
+  <ng-container *ngIf="record && adminMode.can">
+    <button *ngIf="useStatus && useStatus.can && useStatus.url"
+      id="detail-use-button"
+      class="btn btn-sm btn-primary ml-1"
+      [title]="'Use'|translate"
+      [ngClass]="{
+        'btn-outline-primary': !isPrimaryAction('use'),
+        'btn-primary': isPrimaryAction('use')
+      }"
+      (click)="useRecord()"
+    ><i class="fa fa-hand-o-right"></i> {{ 'Use' | translate }}</button>
+    <button *ngIf="updateStatus && updateStatus.can"
+      id="detail-edit-button"
+      class="btn btn-sm ml-1"
+      [title]="'Edit'|translate"
+      [ngClass]="{
+        'btn-outline-primary': !isPrimaryAction('edit'),
+        'btn-primary': isPrimaryAction('edit')
+      }"
+      (click)="updateRecord(record)"
+    ><i class="fa fa-pencil"></i> {{ 'Edit' | translate }}</button>
+    <button *ngIf="deleteStatus.can; else deleteMessageLink"
+      id="detail-delete-button"
+      class="btn btn-sm btn-outline-danger ml-1"
+      [title]="'Delete'|translate"
+      (click)="deleteRecord(record)"
+    ><i class="fa fa-trash"></i> {{ 'Delete' | translate }}</button>
+    <ng-template #deleteMessageLink>
+      <button *ngIf="deleteStatus.message"
+        id="detail-delete-button"
+        class="btn btn-sm btn-outline-danger ml-1 disabled"
+        [title]="'Delete'|translate"
+        (click)="showDeleteMessage(deleteStatus.message)"
+      ><i class="fa fa-trash mr-1"></i> {{ 'Delete' | translate }}</button>
+    </ng-template>
+  </ng-container>
+  <ng-content select="[afterButton]"></ng-content>
+</div>

projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.ts

@@ -0,0 +1,108 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2020-2023 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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/>.
+ */
+import { Location } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ActionStatus } from '../../action-status';
+import { IRecordEvent } from './IRecordEvent.interface';
+
+@Component({
+  selector: 'ng-core-detail-button',
+  templateUrl: './detail-button.component.html'
+})
+export class DetailButtonComponent {
+
+  /** Record */
+  @Input() record: any;
+
+  /** Record type */
+  @Input() type: string;
+
+  /** Admin mode for CRUD operations */
+  @Input() adminMode: ActionStatus = { can: false, message: '' };
+
+  /** Record can be used ? */
+  @Input() useStatus: ActionStatus = { can: false, message: '', url: '' };
+
+  /** Record can be updated ? */
+  @Input() updateStatus: ActionStatus = { can: false, message: '' };
+
+  /** Record can be deleted ? */
+  @Input() deleteStatus: ActionStatus = { can: false, message: '' };
+
+  /** Record event */
+  @Output() recordEvent = new EventEmitter<IRecordEvent>();
+
+  /** Delete record message event */
+  @Output() deleteMessageEvent = new EventEmitter<string>();
+
+  /**
+   * Constructor
+   * @param location - Location
+   */
+  constructor(private location: Location) { }
+
+  /**
+   * define if an action is the primary action for the resource
+   * @param actionName - string: the action name to check
+   * @return boolean
+   */
+  isPrimaryAction(actionName: string): boolean {
+    switch (actionName) {
+      case 'edit':
+      case 'update':
+        return this.updateStatus && this.updateStatus.can && (!this.useStatus || !this.useStatus.can);
+      case 'use':
+        return this.useStatus && this.useStatus.can;
+      default:
+        return false;
+    }
+  }
+
+  /** Use the record */
+  useRecord(): void {
+    this.recordEvent.emit({ action: 'use', url: this.updateStatus.url })
+  }
+
+  /**
+   * Update record event
+   * @param record - the current record
+   */
+  updateRecord(record: any): void {
+    this.recordEvent.emit({ action: 'update', record });
+  }
+
+  /**
+   * Delete record event
+   * @param record - the current record
+   */
+  deleteRecord(record: any): void {
+    this.recordEvent.emit({ action: 'delete', record });
+  }
+
+  /**
+   * Show a modal containing message given in parameter.
+   * @param message - message to display into modal
+   */
+  showDeleteMessage(message: string) {
+    this.deleteMessageEvent.emit(message);
+  }
+
+  /** Go back to previous page */
+  goBack() {
+    this.location.back();
+  }
+}

projects/rero/ng-core/src/lib/record/detail/detail.component.html

@@ -1,6 +1,6 @@
 <!--
   RERO angular core
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2023 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,52 +15,18 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="main-content">
-  <a href class="d-inline-block mb-2" (click)="$event.preventDefault(); goBack()">
-    <i class="fa fa-arrow-left mr-1"></i>
-    {{ 'Back' | translate }}
-  </a>
+  <ng-core-detail-button
+    *ngIf="record"
+    [record]="record"
+    [type]="type"
+    [adminMode]="adminMode"
+    [useStatus]="useStatus"
+    [updateStatus]="updateStatus"
+    [deleteStatus]="deleteStatus"
+    (recordEvent)="recordEvent($event)"
+    (deleteMessageEvent)="showDeleteMessage($event)"
+  ></ng-core-detail-button>
   <ng-core-error [error]="error" *ngIf="error"></ng-core-error>
-  <div class="float-right ml-4 mt-2 mb-4" *ngIf="record && adminMode.can">
-    <button *ngIf="useStatus && useStatus.can && useStatus.url"
-            id="detail-use-button"
-            class="btn btn-sm btn-primary ml-1"
-            [ngClass]="{
-               'btn-outline-primary': !isPrimaryAction('use'),
-               'btn-primary': isPrimaryAction('use')
-            }"
-            (click)="useRecord()"
-    >
-      <i class="fa fa-hand-o-right"></i>
-      {{ 'Use' | translate }}
-    </button>
-    <a *ngIf="updateStatus && updateStatus.can"
-       id="detail-edit-button"
-       href
-       class="btn btn-sm ml-1"
-       [ngClass]="{
-           'btn-outline-primary': !isPrimaryAction('edit'),
-           'btn-primary': isPrimaryAction('edit')
-       }"
-       [routerLink]="['../../edit', record.id]"
-      >
-      <i class="fa fa-pencil"></i>
-      {{ 'Edit' | translate }}
-    </a>
-
-    <ng-container *ngIf="deleteStatus">
-      <button id="detail-delete-button" class="btn btn-sm btn-outline-danger ml-1" [title]="'Delete'|translate" (click)="deleteRecord(record)"
-        *ngIf="deleteStatus.can; else deleteMessageLink">
-        <i class="fa fa-trash"></i>
-        {{ 'Delete' | translate }}
-      </button>
-      <ng-template #deleteMessageLink>
-        <button id="detail-delete-button" class="btn btn-sm btn-outline-danger ml-1 disabled" [title]="'Delete'|translate"
-          (click)="showDeleteMessage(deleteStatus.message)" *ngIf="deleteStatus.message">
-          <i class="fa fa-trash mr-1"></i>{{ 'Delete' | translate }}
-        </button>
-      </ng-template>
-    </ng-container>
-  </div>
   <ng-template ngCoreRecordDetail></ng-template>
   <ng-core-record-files [type]="type" [pid]="record.id"
     *ngIf="record && filesEnabled && updateStatus && updateStatus.can"></ng-core-record-files>

projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts

@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2023 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -126,11 +126,6 @@ describe('RecordDetailComponent', () => {
     expect(component.record).toEqual(detailRecord);
   });
 
-  it('should go back', () => {
-    component.goBack();
-    expect(loc.back).toHaveBeenCalledTimes(1);
-  });
-
   it('should raise exception when configuration not found for type', () => {
     const routeSpy = TestBed.inject(ActivatedRoute) as any;
     routeSpy.testParamMap = { type: 'test', pid: '1' };