result page: add tooltip on delete button

* Adds tooltip on delete button to indicate the reasons. Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
rero · Oct 26, 2020 · d7df874 · d7df874
1 parent dc11280
commit d7df874
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 18 deletions.
diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts
@@ -120,7 +120,7 @@ const permissions = (record: any) => {
     }),
     canDelete: of({
         can: perms.delete,
-        message: ''
+        message: 'This record cannot be deleted.'
     })
   };
 };

diff --git a/projects/rero/ng-core/src/lib/record/record.module.ts b/projects/rero/ng-core/src/lib/record/record.module.ts
@@ -25,6 +25,7 @@ import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { CoreModule } from '../core.module';
@@ -98,6 +99,7 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
     ReactiveFormsModule,
     RecordRoutingModule,
     TooltipModule.forRoot(),
+    PopoverModule.forRoot(),
     TypeaheadModule.forRoot(),
     PaginationModule.forRoot(),
     CollapseModule.forRoot(),

diff --git a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html
@@ -48,15 +48,18 @@
             <i class="fa fa-trash"></i>
         </button>
         <ng-template #deleteMessageLink>
-            <button id="result-delete-button"
-                    disabled
-                    class="btn btn-sm btn-outline-danger"
+            <button *ngIf="deleteStatus.message"
+                    id="result-delete-button"
+                    class="btn btn-sm btn-outline-danger disabled"
                     [title]="'Delete'|translate"
                     [name]="'Delete'|translate"
-                    (click)="showDeleteMessage(deleteStatus.message)" *ngIf="deleteStatus.message">
+                    [popover]="tolTemplate" triggers="mouseenter:mouseleave">
                 <i class="fa fa-trash"></i>
             </button>
         </ng-template>
+        <ng-template #tolTemplate>
+          <div [innerHtml]="deleteInfoMessage | nl2br"></div>
+        </ng-template>
     </span>
 </div>
 <ng-template ngCoreRecordSearchResult></ng-template>
diff --git a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.spec.ts b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.spec.ts
@@ -21,7 +21,10 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ToastrModule } from 'ngx-toastr';
+import { CoreModule } from '../../../core.module';
 import { JsonComponent } from './item/json.component';
 import { RecordSearchResultComponent } from './record-search-result.component';
 import { RecordSearchResultDirective } from './record-search-result.directive';
@@ -44,7 +47,10 @@ describe('RecordSearchResultComponent', () => {
           loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
         }),
         ToastrModule.forRoot(),
-        HttpClientModule
+        HttpClientModule,
+        TooltipModule.forRoot(),
+        PopoverModule.forRoot(),
+        CoreModule
       ],
       schemas: [ NO_ERRORS_SCHEMA ]
     })

diff --git a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.ts b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.ts
@@ -15,13 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, ComponentFactoryResolver, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { ActionStatus } from '../../action-status';
-import { RecordUiService } from '../../record-ui.service';
 import { JsonComponent } from './item/json.component';
 import { ResultItem } from './item/result-item';
 import { RecordSearchResultDirective } from './record-search-result.directive';
-import { Router} from '@angular/router';
 
 
 @Component({
@@ -121,16 +120,22 @@ export class RecordSearchResultComponent implements OnInit {
    */
   @ViewChild(RecordSearchResultDirective, { static: true }) searchResultItem: RecordSearchResultDirective;
 
+
+  /**
+   * Return a message containing the reasons why the item cannot be deleted
+   */
+  get deleteInfoMessage(): string {
+    return this.deleteStatus.message;
+  }
+
   /**
    * Constructor.
    *
    * @param _componentFactoryResolver Component factory resolver.
-   * @param _recordUiService Record UI service.
    * @param _router: Router
    */
   constructor(
     private _componentFactoryResolver: ComponentFactoryResolver,
-    private _recordUiService: RecordUiService,
     private _router: Router
   ) {
     this.currentUrl = window.location.href;
@@ -204,12 +209,4 @@ export class RecordSearchResultComponent implements OnInit {
   useRecord() {
     this._router.navigateByUrl(this.useStatus.url);
   }
-
-  /**
-   * Show dialog with the reason why record cannot be deleted.
-   * @param message - string, message to display
-   */
-  showDeleteMessage(message: string) {
-    this._recordUiService.showDeleteMessage(message);
-  }
 }