Skip to content

Commit 3d6e036

Browse files
shawonshawon
shawon
authored and
shawon
committed
added new action menu trigger
1 parent b44b26a commit 3d6e036

File tree

6 files changed

+171
-136
lines changed

6 files changed

+171
-136
lines changed

‎eform-client/src/app/modules/advanced/advanced.module.ts‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,31 +38,35 @@ import {MatInputModule} from '@angular/material/input';
3838
import {MtxSelectModule} from '@ng-matero/extensions/select';
3939
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
4040
import {MatChipsModule} from '@angular/material/chips';
41+
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
4142

4243
@NgModule({
43-
imports: [
44-
AdvancedRoutingModule,
45-
CommonModule,
46-
TranslateModule,
47-
EformSharedModule,
48-
NgSelectModule,
49-
FormsModule,
50-
DragulaModule,
51-
EformImportedModule,
52-
ReactiveFormsModule,
53-
EformSharedTagsModule,
54-
MatSortModule,
55-
MatCardModule,
56-
MatIconModule,
57-
MatButtonModule,
58-
MatTooltipModule,
59-
MtxGridModule,
60-
MatDialogModule,
61-
MatInputModule,
62-
MtxSelectModule,
63-
MatSlideToggleModule,
64-
MatChipsModule,
65-
],
44+
imports: [
45+
AdvancedRoutingModule,
46+
CommonModule,
47+
TranslateModule,
48+
EformSharedModule,
49+
NgSelectModule,
50+
FormsModule,
51+
DragulaModule,
52+
EformImportedModule,
53+
ReactiveFormsModule,
54+
EformSharedTagsModule,
55+
MatSortModule,
56+
MatCardModule,
57+
MatIconModule,
58+
MatButtonModule,
59+
MatTooltipModule,
60+
MtxGridModule,
61+
MatDialogModule,
62+
MatInputModule,
63+
MtxSelectModule,
64+
MatSlideToggleModule,
65+
MatChipsModule,
66+
MatMenu,
67+
MatMenuItem,
68+
MatMenuTrigger,
69+
],
6670
declarations: [
6771
EntitySearchComponent,
6872
EntitySelectComponent,

‎eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,37 +45,43 @@
4545
(sortChange)="sortTable($event)">
4646
</mtx-grid>
4747
<ng-template #microtingUUIDTpl let-row let-i="index">
48-
<div class="entitySearchMUid" id="entitySearchMUid">{{row.microtingUUID}}</div>
48+
<div class="entitySearchMUid" id="entitySearchMUid">{{ row.microtingUUID }}</div>
4949
</ng-template>
5050
<ng-template #entitySelectNameTpl let-row let-i="index">
51-
<div class="entitySearchName" id="entitySearchName">{{row.name}}</div>
51+
<div class="entitySearchName" id="entitySearchName">{{ row.name }}</div>
5252
</ng-template>
5353
<ng-template #entitySelectDescriptionTpl let-row let-i="index">
54-
<div class="entitySelectDescription" id="entitySelectDescription">{{row.description}}</div>
54+
<div class="entitySelectDescription" id="entitySelectDescription">{{ row.description }}</div>
5555
</ng-template>
5656

57-
58-
<ng-template #actionsTpl let-row>
59-
<div *ngIf="(selectCurrentUserClaimsEntitySearchDelete$ | async) || (selectCurrentUserClaimsEntitySearchUpdate$ | async)">
60-
<button
61-
mat-icon-button
62-
id="entitySearchUpdateBtn"
63-
matTooltip="{{ 'Edit' | translate }}"
64-
[disabled]="(selectCurrentUserClaimsEntitySearchUpdate$ | async) === false"
65-
[routerLink]="['/advanced/entity-search/edit/' + row.microtingUUID]"
66-
>
67-
<mat-icon>edit</mat-icon>
68-
</button>
69-
<button
70-
mat-icon-button
71-
color="warn"
72-
id="entitySearchDeleteBtn"
73-
(click)="openModalSearchRemove(row)"
74-
matTooltip="{{ 'Remove' | translate }}"
75-
[disabled]="(selectCurrentUserClaimsEntitySearchDelete$ | async) === false || row.isLocked"
76-
>
77-
<mat-icon>delete</mat-icon>
57+
<ng-template #actionsTpl let-row let-i="index">
58+
<div id="action-items-{{i}}"
59+
*ngIf="(selectCurrentUserClaimsEntitySearchDelete$ | async) || (selectCurrentUserClaimsEntitySearchUpdate$ | async)">
60+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
61+
<mat-icon>more_vert</mat-icon>
7862
</button>
63+
64+
<mat-menu #menu="matMenu">
65+
<button
66+
mat-menu-item
67+
id="entitySearchUpdateBtn-{{i}}"
68+
[disabled]="(selectCurrentUserClaimsEntitySearchUpdate$ | async) === false"
69+
[routerLink]="['/advanced/entity-search/edit/' + row.microtingUUID]"
70+
>
71+
<mat-icon>edit</mat-icon>
72+
<span>{{ 'Edit' | translate }}</span>
73+
</button>
74+
75+
<button
76+
mat-menu-item
77+
id="entitySearchDeleteBtn-{{i}}"
78+
(click)="openModalSearchRemove(row)"
79+
[disabled]="(selectCurrentUserClaimsEntitySearchDelete$ | async) === false || row.isLocked"
80+
>
81+
<mat-icon color="warn">delete</mat-icon>
82+
<span>{{ 'Remove' | translate }}</span>
83+
</button>
84+
</mat-menu>
7985
</div>
8086
</ng-template>
8187

‎eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,29 +44,34 @@
4444
[sortDirection]="selectEntitySelectIsSortDsc$ | async"
4545
(sortChange)="sortTable($event)">
4646
</mtx-grid>
47-
<ng-template #actionsTpl let-row>
48-
<div *ngIf="(selectCurrentUserClaimsEntitySelectDelete$ | async) || (selectCurrentUserClaimsEntitySelectUpdate$ | async)">
49-
<button
50-
class="entitySelectEditBtn"
51-
mat-icon-button
52-
id="entitySelectEditBtn"
53-
matTooltip="{{ 'Edit' | translate }}"
54-
[disabled]="(selectCurrentUserClaimsEntitySelectUpdate$ | async) === false"
55-
[routerLink]="['/advanced/entity-select/edit/' + row.microtingUUID]"
56-
>
57-
<mat-icon>edit</mat-icon>
58-
</button>
59-
<button
60-
class="entitySelectDeleteBtn"
61-
mat-icon-button
62-
color="warn"
63-
id="entitySelectDeleteBtn"
64-
(click)="openModalSelectRemove(row)"
65-
matTooltip="{{ 'Remove' | translate }}"
66-
[disabled]="(selectCurrentUserClaimsEntitySelectDelete$ | async) === false || row.isLocked"
67-
>
68-
<mat-icon>delete</mat-icon>
47+
48+
<ng-template #actionsTpl let-row let-i="index">
49+
<div id="action-items-{{i}}" *ngIf="(selectCurrentUserClaimsEntitySelectDelete$ | async) || (selectCurrentUserClaimsEntitySelectUpdate$ | async)">
50+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
51+
<mat-icon>more_vert</mat-icon>
6952
</button>
53+
54+
<mat-menu #menu="matMenu">
55+
<button
56+
mat-menu-item
57+
id="entitySelectEditBtn-{{i}}"
58+
[disabled]="(selectCurrentUserClaimsEntitySelectUpdate$ | async) === false"
59+
[routerLink]="['/advanced/entity-select/edit/' + row.microtingUUID]"
60+
>
61+
<mat-icon>edit</mat-icon>
62+
<span>{{ 'Edit' | translate }}</span>
63+
</button>
64+
65+
<button
66+
mat-menu-item
67+
id="entitySelectDeleteBtn-{{i}}"
68+
(click)="openModalSelectRemove(row)"
69+
[disabled]="(selectCurrentUserClaimsEntitySelectDelete$ | async) === false || row.isLocked"
70+
>
71+
<mat-icon color="warn">delete</mat-icon>
72+
<span>{{ 'Remove' | translate }}</span>
73+
</button>
74+
</mat-menu>
7075
</div>
7176
</ng-template>
7277

‎eform-client/src/app/modules/advanced/components/units/units.component.html‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<!-- {{ 'Create unit' | translate }}-->
1010
<!-- </button>-->
1111
<!--</eform-new-subheader>-->
12-
<br />
12+
<br/>
1313
<!--Here you can choose approach as you like: container-row, or flex, or just element with required styles and markup-->
1414

1515

@@ -61,16 +61,23 @@
6161
disabled="true"
6262
></mat-slide-toggle>
6363
</ng-template>
64-
<ng-template #actionsTpl let-row let-index="index">
65-
<div>
66-
<button
67-
mat-icon-button
68-
color="warn"
69-
id="moveBtn_{{ index }}"
70-
matTooltip="{{ 'Move unit' | translate }}"
71-
(click)="openMoveModal(row)"
72-
>
73-
<mat-icon>trolley</mat-icon>
64+
65+
<ng-template #actionsTpl let-row let-i="index">
66+
<div class="device-user-actions" id="action-items-{{i}}">
67+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
68+
<mat-icon>more_vert</mat-icon>
7469
</button>
70+
71+
<mat-menu #menu="matMenu">
72+
<button
73+
mat-menu-item
74+
id="moveBtn_{{i}}"
75+
(click)="openMoveModal(row)"
76+
>
77+
<mat-icon color="warn">trolley</mat-icon>
78+
<span>{{ 'Move unit' | translate }}</span>
79+
</button>
80+
</mat-menu>
7581
</div>
7682
</ng-template>
83+

‎eform-client/src/app/modules/plugins-management/components/installed/installed-plugins-page/installed-plugins-page.component.html‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<eform-new-subheader>
2-
<!-- <button-->
3-
<!-- color="accent"-->
4-
<!-- mat-raised-button-->
5-
<!-- id="newSecurityGroupBtn"-->
6-
<!-- [routerLink]="['marketplace']"-->
7-
<!-- >-->
8-
<!-- {{ 'Marketplace' | translate }}-->
9-
<!-- </button>-->
2+
<!-- <button-->
3+
<!-- color="accent"-->
4+
<!-- mat-raised-button-->
5+
<!-- id="newSecurityGroupBtn"-->
6+
<!-- [routerLink]="['marketplace']"-->
7+
<!-- >-->
8+
<!-- {{ 'Marketplace' | translate }}-->
9+
<!-- </button>-->
1010
</eform-new-subheader>
1111

1212
<!--Here you can choose approach as you like: container-row, or flex, or just element with required styles and markup-->
@@ -21,47 +21,56 @@
2121
</mtx-grid>
2222

2323
<ng-template #idTpl let-row let-i="index">
24-
<div class="plugin-id" id="plugin-id{{i}}">{{row.id}}</div>
24+
<div class="plugin-id" id="plugin-id{{i}}">{{ row.id }}</div>
2525
</ng-template>
2626

2727
<ng-template #nameTpl let-row let-i="index">
28-
<div class="plugin-name" id="plugin-name{{i}}">{{row.name}}</div>
28+
<div class="plugin-name" id="plugin-name{{i}}">{{ row.name }}</div>
2929
</ng-template>
3030

3131
<ng-template #versionTpl let-row let-i="index">
32-
<div class="plugin-version" id="plugin-version{{i}}">{{row.version}}</div>
32+
<div class="plugin-version" id="plugin-version{{i}}">{{ row.version }}</div>
3333
</ng-template>
3434

35-
3635
<ng-template #actionsTpl let-row let-i="index">
37-
<div class="d-flex align-items-center">
38-
<button
39-
mat-icon-button
40-
color="{{row.status === statusEnum.Enabled ? 'accent' : ''}}"
41-
matTooltip="{{(row.status === statusEnum.Enabled ? 'Deactivate' : 'Activate') +' plugin' | translate}}"
42-
(click)="openPluginModal(row, row.status === statusEnum.Enabled ? statusEnum.Disabled : statusEnum.Enabled)"
43-
id="plugin-status-button{{i}}"
44-
>
45-
<mat-icon>{{row.status === statusEnum.Enabled ? 'toggle_on' : 'toggle_off'}}</mat-icon>
46-
</button>
47-
<button
48-
mat-icon-button
49-
color="accent"
50-
*ngIf="row.status == statusEnum.Enabled"
51-
matTooltip="{{ 'Edit Plugin Permissions' | translate }}"
52-
(click)="showPermissionsModal(row)"
53-
id="plugin-permissions-btn"
54-
>
55-
<mat-icon>lock_open</mat-icon>
36+
<div id="action-items-{{i}}">
37+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
38+
<mat-icon>more_vert</mat-icon>
5639
</button>
57-
<a
58-
mat-icon-button
59-
*ngIf="row.status == statusEnum.Enabled"
60-
matTooltip="{{ 'Plugin Settings Page' | translate }}"
61-
routerLink="/plugins/{{ row.baseUrl }}/settings"
62-
id="plugin-settings-link"
63-
>
64-
<mat-icon>settings</mat-icon>
65-
</a>
40+
41+
<mat-menu #menu="matMenu">
42+
43+
<button
44+
mat-menu-item
45+
(click)="openPluginModal(row, row.status === statusEnum.Enabled ? statusEnum.Disabled : statusEnum.Enabled)"
46+
id="plugin-status-button{{i}}"
47+
>
48+
<mat-icon
49+
color="{{row.status === statusEnum.Enabled ? 'accent' : ''}}">{{ row.status === statusEnum.Enabled ? 'toggle_on' : 'toggle_off' }}
50+
</mat-icon>
51+
<span>{{ (row.status === statusEnum.Enabled ? 'Deactivate' : 'Activate') + ' plugin' | translate }}</span>
52+
</button>
53+
54+
<button
55+
mat-menu-item
56+
*ngIf="row.status == statusEnum.Enabled"
57+
(click)="showPermissionsModal(row)"
58+
id="plugin-permissions-btn{{i}}"
59+
>
60+
<mat-icon color="accent">lock_open</mat-icon>
61+
<span>{{ 'Edit Plugin Permissions' | translate }}</span>
62+
</button>
63+
<a
64+
mat-menu-item
65+
*ngIf="row.status == statusEnum.Enabled"
66+
routerLink="/plugins/{{ row.baseUrl }}/settings"
67+
id="plugin-settings-link{{i}}"
68+
>
69+
<mat-icon>settings</mat-icon>
70+
<span>{{ 'Plugin Settings Page' | translate }}</span>
71+
</a>
72+
73+
</mat-menu>
6674
</div>
6775
</ng-template>
76+

‎eform-client/src/app/modules/plugins-management/plugins-management.module.ts‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,28 @@ import {MatTooltipModule} from '@angular/material/tooltip';
1919
import {MatIconModule} from '@angular/material/icon';
2020
import {MatDialogModule} from '@angular/material/dialog';
2121
import {MatCardModule} from '@angular/material/card';
22+
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
2223

2324
@NgModule({
24-
imports: [
25-
CommonModule,
26-
EformSharedModule,
27-
FormsModule,
28-
TranslateModule,
29-
PluginsManagementRouting,
30-
MatCheckboxModule,
31-
MatButtonModule,
32-
MtxGridModule,
33-
MatSlideToggleModule,
34-
MatTooltipModule,
35-
MatIconModule,
36-
MatDialogModule,
37-
MatCardModule,
38-
ReactiveFormsModule,
39-
],
25+
imports: [
26+
CommonModule,
27+
EformSharedModule,
28+
FormsModule,
29+
TranslateModule,
30+
PluginsManagementRouting,
31+
MatCheckboxModule,
32+
MatButtonModule,
33+
MtxGridModule,
34+
MatSlideToggleModule,
35+
MatTooltipModule,
36+
MatIconModule,
37+
MatDialogModule,
38+
MatCardModule,
39+
ReactiveFormsModule,
40+
MatMenu,
41+
MatMenuItem,
42+
MatMenuTrigger,
43+
],
4044
declarations: [
4145
InstalledPluginsPageComponent,
4246
InstalledPluginModalComponent,

0 commit comments

Comments
 (0)