Add actions component (#413)

minottic · web-flow · commit b23147f14552 · 2024-11-18T16:30:40.000+01:00
* Add actions component

* Add tests
diff --git a/scilog/src/app/app.module.ts b/scilog/src/app/app.module.ts
@@ -88,6 +88,7 @@ import { OverviewTableComponent } from './overview/overview-table/overview-table
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { OverviewScrollComponent } from './overview/overview-scroll/overview-scroll.component';
+import { ActionsMenuComponent } from './overview/actions-menu/actions-menu.component';
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
     return () => appConfig.loadAppConfig();
@@ -135,7 +136,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
         TaskComponent,
         ResizedDirective,
         OverviewTableComponent,
-        OverviewScrollComponent
+        OverviewScrollComponent,
+        ActionsMenuComponent
     ],
     imports: [
         BrowserModule,
diff --git a/scilog/src/app/overview/actions-menu/actions-menu.component.html b/scilog/src/app/overview/actions-menu/actions-menu.component.html
@@ -0,0 +1,18 @@
+<button class="mat-fab-top-right" mat-icon-button aria-label="Actions" [matMenuTriggerFor]="menu"
+    [disabled]="isAllowedService.tooltips.edit" matTooltip="{{ isAllowedService.tooltips.edit }}">
+    <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+    <span [matTooltip]="isAllowedService.tooltips.update">
+        <button mat-menu-item (click)="editLogbook()" [disabled]="isAllowedService.tooltips.update">
+            <mat-icon>edit</mat-icon>
+            Edit
+        </button>
+    </span>
+    <span [matTooltip]="isAllowedService.tooltips.delete">
+        <button mat-menu-item (click)="deleteLogbook()" [disabled]="isAllowedService.tooltips.delete">
+            <mat-icon>delete</mat-icon>
+            Delete
+        </button>
+    </span>
+</mat-menu>
diff --git a/scilog/src/app/overview/actions-menu/actions-menu.component.spec.ts b/scilog/src/app/overview/actions-menu/actions-menu.component.spec.ts
@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ActionsMenuComponent } from './actions-menu.component';
+import { UserPreferencesService } from 'src/app/core/user-preferences.service';
+import { MatMenuModule } from '@angular/material/menu';
+
+class UserPreferencesMock {
+  userInfo = {
+    roles: ["roles"]
+
+  }
+}
+
+describe('ActionsMenuComponent', () => {
+  let component: ActionsMenuComponent;
+  let fixture: ComponentFixture<ActionsMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ActionsMenuComponent],
+      imports: [MatMenuModule],
+      providers: [
+        { provide: UserPreferencesService, useClass: UserPreferencesMock },
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should enableActions', () => {
+    const isAllowedSpy = spyOn(component['isAllowedService'], 'isAnyEditAllowed');
+    component['enableActions']();
+    expect(isAllowedSpy).toHaveBeenCalledTimes(1);
+  });
+
+});
diff --git a/scilog/src/app/overview/actions-menu/actions-menu.component.ts b/scilog/src/app/overview/actions-menu/actions-menu.component.ts
@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IsAllowedService } from '../is-allowed.service';
+import { Logbooks } from 'src/app/core/model/logbooks';
+
+@Component({
+  selector: 'actions-menu',
+  templateUrl: './actions-menu.component.html',
+  providers: [IsAllowedService],
+})
+export class ActionsMenuComponent implements OnInit {
+
+  @Input() logbook: Logbooks;
+  @Output() logbookEdit = new EventEmitter<Logbooks>();
+  @Output() logbookDelete = new EventEmitter<string>();
+
+  constructor(protected isAllowedService: IsAllowedService) {}
+  
+  ngOnInit(): void {
+    this.enableActions();
+  }
+
+  private enableActions() {
+    this.isAllowedService.snippet = this.logbook;
+    this.isAllowedService.isAnyEditAllowed();
+  }
+
+  editLogbook() {
+    this.logbookEdit.emit(this.logbook);
+  }
+
+  deleteLogbook() {
+    this.logbookDelete.emit(this.logbook.id);
+  }
+
+}
diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.html b/scilog/src/app/overview/logbook-cover/logbook-cover.component.html
@@ -2,29 +2,12 @@
   <mat-card-header>
     <mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
     <mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
-    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
-      class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
-      matTooltip="{{ isActionAllowed.tooltips.edit }}">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <span [matTooltip]="isActionAllowed.tooltips.update">
-        <button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
-          <mat-icon>edit</mat-icon>
-          <span>Edit</span>
-        </button>
-      </span>
-      <span [matTooltip]="isActionAllowed.tooltips.delete">
-        <button mat-menu-item (click)="deleteLogbook()" [disabled]="isActionAllowed.tooltips.delete">
-          <mat-icon>delete</mat-icon>
-          <span>Delete</span>
-        </button>
-      </span>
-    </mat-menu>
+    <actions-menu class="mat-fab-top-right" [logbook]="logbook" (logbookEdit)="editLogbook()"
+      (logbookDelete)="deleteLogbook()"></actions-menu>
   </mat-card-header>
   <div class="image-container">
     <img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
-      *ngIf=" !isImageLoading">
+      *ngIf="!isImageLoading">
   </div>
   <mat-card-content>
     <p>
diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.spec.ts b/scilog/src/app/overview/logbook-cover/logbook-cover.component.spec.ts
@@ -4,7 +4,6 @@ import { LogbookItemDataService } from '@shared/remote-data.service';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { of } from 'rxjs';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { Logbooks } from '@model/logbooks';
 
 class UserPreferencesMock {
@@ -54,7 +53,6 @@ describe('LogbookWidgetComponent', () => {
         {provide: UserPreferencesService, useClass: UserPreferencesMock},
         {provide: LogbookItemDataService, useValue: logbookItemDataSpy},
       ],
-      imports: [MatMenuModule],
       declarations: [ LogbookWidgetComponent ]
     })
     .compileComponents();
@@ -72,10 +70,4 @@ describe('LogbookWidgetComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should test enableActions', () => {
-    const isAnyEditAllowedSpy = spyOn(component['isActionAllowed'], 'isAnyEditAllowed');
-    component['enableActions']();
-    expect(isAnyEditAllowedSpy).toHaveBeenCalledTimes(1);
-  });
-
 });
diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.ts b/scilog/src/app/overview/logbook-cover/logbook-cover.component.ts
@@ -2,15 +2,12 @@ import { Component, OnInit, EventEmitter, Output, Input, ViewChild, ElementRef }
 import { Logbooks } from '@model/logbooks';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { LogbookItemDataService } from '@shared/remote-data.service';
-import { IsAllowedService } from '../is-allowed.service';
 import { Router } from '@angular/router';
-import { MatCardType } from '../overview.component';
 
 @Component({
   selector: 'app-logbook-cover',
   templateUrl: './logbook-cover.component.html',
   styleUrls: ['./logbook-cover.component.css'],
-  providers: [IsAllowedService]
 })
 export class LogbookWidgetComponent implements OnInit {
 
@@ -29,19 +26,12 @@ export class LogbookWidgetComponent implements OnInit {
   constructor(
     private logbookItemDataService: LogbookItemDataService,
     private logbookInfo: LogbookInfoService,
-    protected isActionAllowed: IsAllowedService,
     private router: Router) { }
 
   ngOnInit(): void {
     if (this.logbook?.thumbnail) {
       this.getImageFromService();
     }
-    this.enableActions();
-  }
-
-  private enableActions() {
-    this.isActionAllowed.snippet = this.logbook;
-    this.isActionAllowed.isAnyEditAllowed();
   }
 
   ngAfterViewInit() {
diff --git a/scilog/src/app/overview/overview-table/overview-table.component.html b/scilog/src/app/overview/overview-table/overview-table.component.html
@@ -48,25 +48,8 @@
 
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef class="mat-fab-top-right"></th>
-      <td mat-cell *matCellDef="let row" class="mat-fab-top-right">
-        <button mat-icon-button aria-label="Actions" [matMenuTriggerFor]="menu"
-          [disabled]="isActionAllowed.tooltips.edit" matTooltip="{{ isActionAllowed.tooltips.edit }}">
-          <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu">
-          <span [matTooltip]="isActionAllowed.tooltips.update">
-            <button mat-menu-item (click)="editLogbook(row)" [disabled]="isActionAllowed.tooltips.update">
-              <mat-icon>edit</mat-icon>
-              Edit
-            </button>
-          </span>
-          <span [matTooltip]="isActionAllowed.tooltips.delete">
-            <button mat-menu-item (click)="deleteLogbook(row.id)" [disabled]="isActionAllowed.tooltips.delete">
-              <mat-icon>delete</mat-icon>
-              Delete
-            </button>
-          </span>
-        </mat-menu>
+      <td mat-cell *matCellDef="let row">
+        <actions-menu [logbook]="row" (logbookEdit)="editLogbook()" (logbookDelete)="deleteLogbook()"></actions-menu>
       </td>
     </ng-container>
 
diff --git a/scilog/src/app/overview/overview-table/overview-table.component.ts b/scilog/src/app/overview/overview-table/overview-table.component.ts
@@ -7,13 +7,11 @@ import { Logbooks } from '../../core/model/logbooks';
 import { WidgetItemConfig } from '../../core/model/config';
 import { LogbookDataService } from '../../core/remote-data.service';
 import { Router } from '@angular/router';
-import { IsAllowedService } from '../is-allowed.service';
 
 @Component({
   selector: 'overview-table',
   templateUrl: './overview-table.component.html',
   styleUrls: ['./overview-table.component.scss'],
-  providers: [IsAllowedService],
 })
 export class OverviewTableComponent implements OnInit {
 
@@ -34,7 +32,6 @@ export class OverviewTableComponent implements OnInit {
   constructor(
     private dataService: LogbookDataService,
     private router: Router,
-    protected isActionAllowed: IsAllowedService,
   ) {}
 
   ngOnInit() {
