Skip to content

Commit 6c3a626

Browse files
minotticminottic
committed
Add actions component
1 parent b68b0cf commit 6c3a626

File tree

7 files changed

+61
-53
lines changed

7 files changed

+61
-53
lines changed

‎scilog/src/app/app.module.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ import { OverviewTableComponent } from './overview/overview-table/overview-table
8888
import { MatPaginatorModule } from '@angular/material/paginator';
8989
import { MatSortModule } from '@angular/material/sort';
9090
import { OverviewScrollComponent } from './overview/overview-scroll/overview-scroll.component';
91+
import { ActionsMenuComponent } from './overview/actions-menu/actions-menu.component';
9192

9293
const appConfigInitializerFn = (appConfig: AppConfigService) => {
9394
return () => appConfig.loadAppConfig();
@@ -135,7 +136,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
135136
TaskComponent,
136137
ResizedDirective,
137138
OverviewTableComponent,
138-
OverviewScrollComponent
139+
OverviewScrollComponent,
140+
ActionsMenuComponent
139141
],
140142
imports: [
141143
BrowserModule,

‎scilog/src/app/overview/actions-menu/actions-menu.component.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<button class="mat-fab-top-right" mat-icon-button aria-label="Actions" [matMenuTriggerFor]="menu"
2+
[disabled]="isAllowedService.tooltips.edit" matTooltip="{{ isAllowedService.tooltips.edit }}">
3+
<mat-icon>more_vert</mat-icon>
4+
</button>
5+
<mat-menu #menu="matMenu">
6+
<span [matTooltip]="isAllowedService.tooltips.update">
7+
<button mat-menu-item (click)="editLogbook()" [disabled]="isAllowedService.tooltips.update">
8+
<mat-icon>edit</mat-icon>
9+
Edit
10+
</button>
11+
</span>
12+
<span [matTooltip]="isAllowedService.tooltips.delete">
13+
<button mat-menu-item (click)="deleteLogbook()" [disabled]="isAllowedService.tooltips.delete">
14+
<mat-icon>delete</mat-icon>
15+
Delete
16+
</button>
17+
</span>
18+
</mat-menu>

‎scilog/src/app/overview/actions-menu/actions-menu.component.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { IsAllowedService } from '../is-allowed.service';
3+
import { Logbooks } from 'src/app/core/model/logbooks';
4+
5+
@Component({
6+
selector: 'actions-menu',
7+
templateUrl: './actions-menu.component.html',
8+
providers: [IsAllowedService],
9+
})
10+
export class ActionsMenuComponent implements OnInit {
11+
12+
@Input() logbook: Logbooks;
13+
@Output() logbookEdit = new EventEmitter<Logbooks>();
14+
@Output() logbookDelete = new EventEmitter<string>();
15+
16+
constructor(protected isAllowedService: IsAllowedService) {}
17+
18+
ngOnInit(): void {
19+
this.enableActions();
20+
}
21+
22+
private enableActions() {
23+
this.isAllowedService.snippet = this.logbook;
24+
this.isAllowedService.isAnyEditAllowed();
25+
}
26+
27+
editLogbook() {
28+
this.logbookEdit.emit(this.logbook);
29+
}
30+
31+
deleteLogbook() {
32+
this.logbookDelete.emit(this.logbook.id);
33+
}
34+
35+
}

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.html

+3-20
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,12 @@
22
<mat-card-header>
33
<mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
44
<mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
5-
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
6-
class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
7-
matTooltip="{{ isActionAllowed.tooltips.edit }}">
8-
<mat-icon>more_vert</mat-icon>
9-
</button>
10-
<mat-menu #menu="matMenu">
11-
<span [matTooltip]="isActionAllowed.tooltips.update">
12-
<button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
13-
<mat-icon>edit</mat-icon>
14-
<span>Edit</span>
15-
</button>
16-
</span>
17-
<span [matTooltip]="isActionAllowed.tooltips.delete">
18-
<button mat-menu-item (click)="deleteLogbook()" [disabled]="isActionAllowed.tooltips.delete">
19-
<mat-icon>delete</mat-icon>
20-
<span>Delete</span>
21-
</button>
22-
</span>
23-
</mat-menu>
5+
<actions-menu class="mat-fab-top-right" [logbook]="logbook" (logbookEdit)="editLogbook()"
6+
(logbookDelete)="deleteLogbook()"></actions-menu>
247
</mat-card-header>
258
<div class="image-container">
269
<img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
27-
*ngIf=" !isImageLoading">
10+
*ngIf="!isImageLoading">
2811
</div>
2912
<mat-card-content>
3013
<p>

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.ts

-10
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@ import { Component, OnInit, EventEmitter, Output, Input, ViewChild, ElementRef }
22
import { Logbooks } from '@model/logbooks';
33
import { LogbookInfoService } from '@shared/logbook-info.service';
44
import { LogbookItemDataService } from '@shared/remote-data.service';
5-
import { IsAllowedService } from '../is-allowed.service';
65
import { Router } from '@angular/router';
7-
import { MatCardType } from '../overview.component';
86

97
@Component({
108
selector: 'app-logbook-cover',
119
templateUrl: './logbook-cover.component.html',
1210
styleUrls: ['./logbook-cover.component.css'],
13-
providers: [IsAllowedService]
1411
})
1512
export class LogbookWidgetComponent implements OnInit {
1613

@@ -29,19 +26,12 @@ export class LogbookWidgetComponent implements OnInit {
2926
constructor(
3027
private logbookItemDataService: LogbookItemDataService,
3128
private logbookInfo: LogbookInfoService,
32-
protected isActionAllowed: IsAllowedService,
3329
private router: Router) { }
3430

3531
ngOnInit(): void {
3632
if (this.logbook?.thumbnail) {
3733
this.getImageFromService();
3834
}
39-
this.enableActions();
40-
}
41-
42-
private enableActions() {
43-
this.isActionAllowed.snippet = this.logbook;
44-
this.isActionAllowed.isAnyEditAllowed();
4535
}
4636

4737
ngAfterViewInit() {

‎scilog/src/app/overview/overview-table/overview-table.component.html

+2-19
Original file line numberDiff line numberDiff line change
@@ -48,25 +48,8 @@
4848

4949
<ng-container matColumnDef="actions">
5050
<th mat-header-cell *matHeaderCellDef class="mat-fab-top-right"></th>
51-
<td mat-cell *matCellDef="let row" class="mat-fab-top-right">
52-
<button mat-icon-button aria-label="Actions" [matMenuTriggerFor]="menu"
53-
[disabled]="isActionAllowed.tooltips.edit" matTooltip="{{ isActionAllowed.tooltips.edit }}">
54-
<mat-icon>more_vert</mat-icon>
55-
</button>
56-
<mat-menu #menu="matMenu">
57-
<span [matTooltip]="isActionAllowed.tooltips.update">
58-
<button mat-menu-item (click)="editLogbook(row)" [disabled]="isActionAllowed.tooltips.update">
59-
<mat-icon>edit</mat-icon>
60-
Edit
61-
</button>
62-
</span>
63-
<span [matTooltip]="isActionAllowed.tooltips.delete">
64-
<button mat-menu-item (click)="deleteLogbook(row.id)" [disabled]="isActionAllowed.tooltips.delete">
65-
<mat-icon>delete</mat-icon>
66-
Delete
67-
</button>
68-
</span>
69-
</mat-menu>
51+
<td mat-cell *matCellDef="let row">
52+
<actions-menu [logbook]="row" (logbookEdit)="editLogbook()" (logbookDelete)="deleteLogbook()"></actions-menu>
7053
</td>
7154
</ng-container>
7255

‎scilog/src/app/overview/overview-table/overview-table.component.ts

-3
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ import { Logbooks } from '../../core/model/logbooks';
77
import { WidgetItemConfig } from '../../core/model/config';
88
import { LogbookDataService } from '../../core/remote-data.service';
99
import { Router } from '@angular/router';
10-
import { IsAllowedService } from '../is-allowed.service';
1110

1211
@Component({
1312
selector: 'overview-table',
1413
templateUrl: './overview-table.component.html',
1514
styleUrls: ['./overview-table.component.scss'],
16-
providers: [IsAllowedService],
1715
})
1816
export class OverviewTableComponent implements OnInit {
1917

@@ -34,7 +32,6 @@ export class OverviewTableComponent implements OnInit {
3432
constructor(
3533
private dataService: LogbookDataService,
3634
private router: Router,
37-
protected isActionAllowed: IsAllowedService,
3835
) {}
3936

4037
ngOnInit() {

0 commit comments

Comments
 (0)