Skip to content

Commit ae0ac7f

Browse files
authored
General: Rework admin views icons and detail view (#1741)
1 parent 9b8fc04 commit ae0ac7f

File tree

6 files changed

+254
-70
lines changed

6 files changed

+254
-70
lines changed

src/main/webapp/app/usermanagement/research-group/research-group-admin-view/research-group-admin-view.component.html

Lines changed: 41 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,36 @@
11
<div class="page-container">
2+
<jhi-confirm-dialog
3+
#approveDialog
4+
[label]="'button.confirm' | translate"
5+
[header]="'researchGroup.adminView.confirmDialog.header' | translate"
6+
[message]="'researchGroup.adminView.confirmDialog.message' | translate"
7+
severity="success"
8+
confirmIcon="check"
9+
[showOpenButton]="false"
10+
(confirmed)="onConfirmApprove()"
11+
/>
12+
13+
<jhi-confirm-dialog
14+
#denyDialog
15+
[label]="'button.deny' | translate"
16+
[header]="'researchGroup.adminView.denyConfirmDialog.header' | translate"
17+
[message]="'researchGroup.adminView.denyConfirmDialog.message' | translate"
18+
severity="danger"
19+
confirmIcon="times"
20+
[showOpenButton]="false"
21+
(confirmed)="onConfirmDeny()"
22+
/>
23+
24+
<jhi-confirm-dialog
25+
#withdrawDialog
26+
[label]="'button.withdraw' | translate"
27+
[header]="'researchGroup.adminView.withdrawConfirmDialog.header' | translate"
28+
[message]="'researchGroup.adminView.withdrawConfirmDialog.message' | translate"
29+
severity="danger"
30+
confirmIcon="withdraw"
31+
[showOpenButton]="false"
32+
(confirmed)="onConfirmWithdraw()"
33+
/>
234
<div class="header-container">
335
<div class="page-header">
436
<h1 jhiTranslate="researchGroup.adminView.title" class="h1-text"></h1>
@@ -46,63 +78,15 @@ <h1 jhiTranslate="researchGroup.adminView.title" class="h1-text"></h1>
4678
variant="text"
4779
(click)="onViewResearchGroup(researchGroup.id)"
4880
/>
49-
@if (researchGroup.status !== 'DENIED') {
50-
<jhi-button
51-
icon="users"
52-
[ariaLabel]="'researchGroup.members.manageMembers'"
53-
[tooltip]="'researchGroup.members.manageMembers' | translate"
54-
severity="primary"
55-
variant="text"
56-
(click)="onManageMembers(researchGroup.id)"
57-
[shouldTranslate]="true"
58-
/>
59-
}
60-
@if (researchGroup.status === 'ACTIVE') {
61-
<jhi-confirm-dialog
62-
[label]="'button.withdraw' | translate"
63-
[iconOnly]="true"
64-
[header]="'researchGroup.adminView.withdrawConfirmDialog.header' | translate"
65-
[message]="'researchGroup.adminView.withdrawConfirmDialog.message' | translate"
66-
confirmIcon="withdraw"
67-
(confirmed)="onWithdrawResearchGroup(researchGroup.id)"
68-
severity="danger"
69-
[tooltip]="'button.withdraw' | translate"
70-
/>
71-
}
72-
@if (researchGroup.status === 'DRAFT') {
73-
<jhi-confirm-dialog
74-
[label]="'button.confirm' | translate"
75-
[iconOnly]="true"
76-
[header]="'researchGroup.adminView.confirmDialog.header' | translate"
77-
[message]="'researchGroup.adminView.confirmDialog.message' | translate"
78-
confirmIcon="check"
79-
(confirmed)="onApproveResearchGroup(researchGroup.id)"
80-
severity="success"
81-
[tooltip]="'button.confirm' | translate"
82-
/>
83-
<jhi-confirm-dialog
84-
[label]="'button.deny' | translate"
85-
[iconOnly]="true"
86-
[header]="'researchGroup.adminView.denyConfirmDialog.header' | translate"
87-
[message]="'researchGroup.adminView.denyConfirmDialog.message' | translate"
88-
confirmIcon="times"
89-
(confirmed)="onDenyResearchGroup(researchGroup.id)"
90-
severity="danger"
91-
[tooltip]="'button.deny' | translate"
92-
/>
93-
}
94-
@if (researchGroup.status === 'DENIED') {
95-
<jhi-confirm-dialog
96-
[label]="'button.confirm' | translate"
97-
[iconOnly]="true"
98-
[header]="'researchGroup.adminView.confirmDialog.header' | translate"
99-
[message]="'researchGroup.adminView.confirmDialog.message' | translate"
100-
confirmIcon="check"
101-
(confirmed)="onApproveResearchGroup(researchGroup.id)"
102-
severity="success"
103-
[tooltip]="'button.confirm' | translate"
104-
/>
105-
}
81+
<jhi-button
82+
icon="ellipsis-vertical"
83+
[tooltip]="getMenuItems()(researchGroup).length > 0 ? ('button.actions' | translate) : ('button.noFurtherActions' | translate)"
84+
severity="primary"
85+
variant="text"
86+
(click)="menu.toggle($event)"
87+
[disabled]="getMenuItems()(researchGroup).length === 0"
88+
/>
89+
<jhi-menu #menu [items]="getMenuItems()(researchGroup)" [shouldTranslate]="true" />
10690
</div>
10791
</ng-template>
10892

src/main/webapp/app/usermanagement/research-group/research-group-admin-view/research-group-admin-view.component.ts

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ResearchGroupAdminDTO } from 'app/generated/model/researchGroupAdminDTO
99
import { ToastService } from 'app/service/toast-service';
1010
import { ButtonColor, ButtonComponent } from 'app/shared/components/atoms/button/button.component';
1111
import { ConfirmDialog } from 'app/shared/components/atoms/confirm-dialog/confirm-dialog';
12+
import { JhiMenuItem, MenuComponent } from 'app/shared/components/atoms/menu/menu.component';
1213
import { Filter, FilterChange } from 'app/shared/components/atoms/filter-multiselect/filter-multiselect';
1314
import { Sort, SortOption } from 'app/shared/components/atoms/sorting/sorting';
1415
import { TagComponent } from 'app/shared/components/atoms/tag/tag.component';
@@ -21,7 +22,16 @@ const I18N_BASE = 'researchGroup.adminView';
2122

2223
@Component({
2324
selector: 'jhi-research-group-admin-view',
24-
imports: [ButtonComponent, TagComponent, TranslateModule, TranslateDirective, SearchFilterSortBar, DynamicTableComponent, ConfirmDialog],
25+
imports: [
26+
ButtonComponent,
27+
MenuComponent,
28+
TagComponent,
29+
TranslateModule,
30+
TranslateDirective,
31+
SearchFilterSortBar,
32+
DynamicTableComponent,
33+
ConfirmDialog,
34+
],
2535
templateUrl: './research-group-admin-view.component.html',
2636
})
2737
export class ResearchGroupAdminView {
@@ -58,6 +68,12 @@ export class ResearchGroupAdminView {
5868
readonly buttonTemplate = viewChild.required<TemplateRef<unknown>>('actionTemplate');
5969
readonly stateTemplate = viewChild.required<TemplateRef<unknown>>('stateTemplate');
6070

71+
readonly approveDialog = viewChild.required<ConfirmDialog>('approveDialog');
72+
readonly denyDialog = viewChild.required<ConfirmDialog>('denyDialog');
73+
readonly withdrawDialog = viewChild.required<ConfirmDialog>('withdrawDialog');
74+
75+
currentResearchGroupId = signal<string | undefined>(undefined);
76+
6177
readonly selectedStatusFilters = signal<('DRAFT' | 'ACTIVE' | 'DENIED')[]>([]);
6278

6379
readonly columns = computed<DynamicTableColumn[]>(() => {
@@ -94,6 +110,83 @@ export class ResearchGroupAdminView {
94110
{ displayName: `${I18N_BASE}.tableColumn.requestedAt`, fieldName: 'createdAt', type: 'NUMBER' },
95111
];
96112

113+
readonly actionMenuItems = computed<Map<string, JhiMenuItem[]>>(() => {
114+
const menuMap = new Map<string, JhiMenuItem[]>();
115+
116+
for (const group of this.researchGroups()) {
117+
const groupId = group.id;
118+
if (!groupId) {
119+
continue;
120+
}
121+
const items: JhiMenuItem[] = [];
122+
123+
if (group.status !== 'DENIED') {
124+
items.push({
125+
label: 'researchGroup.members.manageMembers',
126+
icon: 'users',
127+
severity: 'primary',
128+
command: () => {
129+
this.onManageMembers(groupId);
130+
},
131+
});
132+
}
133+
134+
if (group.status === 'ACTIVE') {
135+
items.push({
136+
label: 'button.withdraw',
137+
icon: 'withdraw',
138+
severity: 'danger',
139+
command: () => {
140+
this.currentResearchGroupId.set(groupId);
141+
this.withdrawDialog().confirm();
142+
},
143+
});
144+
}
145+
146+
if (group.status === 'DRAFT') {
147+
items.push({
148+
label: 'button.confirm',
149+
icon: 'check',
150+
severity: 'success',
151+
command: () => {
152+
this.currentResearchGroupId.set(groupId);
153+
this.approveDialog().confirm();
154+
},
155+
});
156+
items.push({
157+
label: 'button.deny',
158+
icon: 'times',
159+
severity: 'danger',
160+
command: () => {
161+
this.currentResearchGroupId.set(groupId);
162+
this.denyDialog().confirm();
163+
},
164+
});
165+
}
166+
167+
if (group.status === 'DENIED') {
168+
items.push({
169+
label: 'button.confirm',
170+
icon: 'check',
171+
severity: 'success',
172+
command: () => {
173+
this.currentResearchGroupId.set(groupId);
174+
this.approveDialog().confirm();
175+
},
176+
});
177+
}
178+
179+
menuMap.set(groupId, items);
180+
}
181+
182+
return menuMap;
183+
});
184+
185+
readonly getMenuItems = computed(() => {
186+
const menuMap = this.actionMenuItems();
187+
return (group: ResearchGroupAdminDTO): JhiMenuItem[] => (group.id ? (menuMap.get(group.id) ?? []) : []);
188+
});
189+
97190
private toastService = inject(ToastService);
98191
private readonly translate = inject(TranslateService);
99192
private researchGroupService = inject(ResearchGroupResourceApiService);
@@ -189,6 +282,27 @@ export class ResearchGroupAdminView {
189282
}
190283
}
191284

285+
onConfirmApprove(): void {
286+
const researchGroupId = this.currentResearchGroupId();
287+
if (researchGroupId) {
288+
void this.onApproveResearchGroup(researchGroupId);
289+
}
290+
}
291+
292+
onConfirmDeny(): void {
293+
const researchGroupId = this.currentResearchGroupId();
294+
if (researchGroupId) {
295+
void this.onDenyResearchGroup(researchGroupId);
296+
}
297+
}
298+
299+
onConfirmWithdraw(): void {
300+
const researchGroupId = this.currentResearchGroupId();
301+
if (researchGroupId) {
302+
void this.onWithdrawResearchGroup(researchGroupId);
303+
}
304+
}
305+
192306
private mapTranslationKeysToEnumValues(translationKeys: string[]): ('DRAFT' | 'ACTIVE' | 'DENIED')[] {
193307
const keyMap = new Map(this.availableStatusOptions.map(option => [option.label, option.key]));
194308
return translationKeys.map(key => (keyMap.get(key) ?? key) as 'DRAFT' | 'ACTIVE' | 'DENIED');

src/main/webapp/app/usermanagement/research-group/research-group-admin-view/research-group-detail-view/research-group-detail-view.component.html

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<div class="page-container">
22
<div class="header-container">
33
<div class="page-header">
4-
<h1 jhiTranslate="researchGroup.detailView.title" class="h1-text"></h1>
4+
<h1 jhiTranslate="researchGroup.detailView.title"></h1>
55
</div>
6+
<jhi-button [label]="'button.save'" icon="save" [shouldTranslate]="true" [disabled]="!form.valid || isSaving()" (click)="onSave()" />
67
</div>
78

89
<div class="body">
@@ -15,16 +16,6 @@ <h1 jhiTranslate="researchGroup.detailView.title" class="h1-text"></h1>
1516
<jhi-info-box severity="primary" message="researchGroup.detailView.infoMessage" [shouldTranslate]="true" />
1617
</div>
1718

18-
<div style="display: flex; justify-content: flex-end; margin-bottom: 1rem">
19-
<jhi-button
20-
[label]="'button.save'"
21-
icon="save"
22-
[shouldTranslate]="true"
23-
[disabled]="!form.valid || isSaving()"
24-
(click)="onSave()"
25-
/>
26-
</div>
27-
2819
<!-- Basic information section -->
2920
<p-divider layout="horizontal">
3021
<span jhiTranslate="researchGroup.detailView.generalSection"></span>

src/main/webapp/app/usermanagement/research-group/research-group-admin-view/research-group-detail-view/research-group-detail-view.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ import { StringInputComponent } from 'app/shared/components/atoms/string-input/s
1515
import { SelectComponent, SelectOption } from 'app/shared/components/atoms/select/select.component';
1616
import { DividerModule } from 'primeng/divider';
1717
import { firstValueFrom } from 'rxjs';
18+
import { TranslateDirective } from 'app/shared/language';
1819

1920
@Component({
2021
selector: 'jhi-research-group-detail-view.component',
2122
imports: [
2223
TranslateModule,
24+
TranslateDirective,
2325
StringInputComponent,
2426
SelectComponent,
2527
ButtonComponent,

src/main/webapp/app/usermanagement/research-group/research-group-departments/research-group-departments.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ <h1 jhiTranslate="researchGroup.departments.header">Departments</h1>
2222
(sortOutput)="loadOnSortEmit($event)"
2323
[sortableFields]="sortableFields"
2424
/>
25+
2526
<div class="table-wrapper">
2627
<jhi-dynamic-table
2728
[columns]="columns()"

0 commit comments

Comments
 (0)