Skip to content

Commit

Permalink
Add actions component (#413)
Browse files Browse the repository at this point in the history
* Add actions component

* Add tests
  • Loading branch information
minottic authored Nov 18, 2024
1 parent b68b0cf commit b23147f
Show file tree
Hide file tree
Showing 9 changed files with 105 additions and 61 deletions.
4 changes: 3 additions & 1 deletion scilog/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -135,7 +136,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
TaskComponent,
ResizedDirective,
OverviewTableComponent,
OverviewScrollComponent
OverviewScrollComponent,
ActionsMenuComponent
],
imports: [
BrowserModule,
Expand Down
18 changes: 18 additions & 0 deletions scilog/src/app/overview/actions-menu/actions-menu.component.html
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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);
});

});
35 changes: 35 additions & 0 deletions scilog/src/app/overview/actions-menu/actions-menu.component.ts
Original file line number Diff line number Diff line change
@@ -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);
}

}
23 changes: 3 additions & 20 deletions scilog/src/app/overview/logbook-cover/logbook-cover.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -54,7 +53,6 @@ describe('LogbookWidgetComponent', () => {
{provide: UserPreferencesService, useClass: UserPreferencesMock},
{provide: LogbookItemDataService, useValue: logbookItemDataSpy},
],
imports: [MatMenuModule],
declarations: [ LogbookWidgetComponent ]
})
.compileComponents();
Expand All @@ -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);
});

});
10 changes: 0 additions & 10 deletions scilog/src/app/overview/logbook-cover/logbook-cover.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -34,7 +32,6 @@ export class OverviewTableComponent implements OnInit {
constructor(
private dataService: LogbookDataService,
private router: Router,
protected isActionAllowed: IsAllowedService,
) {}

ngOnInit() {
Expand Down

0 comments on commit b23147f

Please sign in to comment.