Skip to content

Commit c59d414

Browse files
Johaney-sxkureck
Johaney-s
authored and
xkureck
committed
feat(admin): paginated applications
* new component for dynamic table of applications for member, vo and group * generated latest openApi specification
1 parent 4d406eb commit c59d414

40 files changed

+1100
-298
lines changed

‎apps/admin-gui/src/app/shared/components/audit-messages-list/audit-messages-list.component.scss

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +0,0 @@
1-
.spinner-container {
2-
position: absolute;
3-
top: 0;
4-
left: 0;
5-
bottom: 56px;
6-
right: 0;
7-
background: rgba(0, 0, 0, 0.15);
8-
z-index: 1;
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
}

‎apps/admin-gui/src/app/vos/components/application-list-details/application-list-details.component.html

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,99 +9,73 @@
99
[pageSizeOptions]="pageSizeOptions">
1010
<table [dataSource]="dataSource" mat-table class="w-100">
1111
<ng-container matColumnDef="id">
12-
<th *matHeaderCellDef mat-header-cell>{{'VO_DETAIL.APPLICATION.TABLE_ID' | translate}}</th>
12+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.ID' | translate}}</th>
1313
<td *matCellDef="let application" class="static-column-size" mat-cell>
1414
{{application['id']}}
1515
</td>
1616
</ng-container>
1717
<ng-container matColumnDef="voId">
18-
<th *matHeaderCellDef mat-header-cell>
19-
{{'VO_DETAIL.APPLICATION.TABLE_VO_ID' | translate}}
20-
</th>
18+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.VO_ID' | translate}}</th>
2119
<td *matCellDef="let application" class="static-column-size" mat-cell>
2220
{{application['vo'].id}}
2321
</td>
2422
</ng-container>
2523
<ng-container matColumnDef="voName">
26-
<th *matHeaderCellDef mat-header-cell>
27-
{{'VO_DETAIL.APPLICATION.TABLE_VO_NAME' | translate}}
28-
</th>
24+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.VO_NAME' | translate}}</th>
2925
<td *matCellDef="let application" class="static-column-size" mat-cell>
3026
{{application['vo'].name}}
3127
</td>
3228
</ng-container>
3329
<ng-container matColumnDef="groupId">
34-
<th *matHeaderCellDef mat-header-cell>
35-
{{'VO_DETAIL.APPLICATION.TABLE_GROUP_ID' | translate}}
36-
</th>
30+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.GROUP_ID' | translate}}</th>
3731
<td *matCellDef="let application" class="static-column-size" mat-cell>
3832
{{application.group ? application.group.id : '' }}
3933
</td>
4034
</ng-container>
4135
<ng-container matColumnDef="groupName">
42-
<th *matHeaderCellDef mat-header-cell>
43-
{{'VO_DETAIL.APPLICATION.TABLE_GROUP_NAME' | translate}}
44-
</th>
36+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.GROUP_NAME' | translate}}</th>
4537
<td *matCellDef="let application" class="static-column-size" mat-cell>
4638
{{application.group ? application.group.name : '' }}
4739
</td>
4840
</ng-container>
4941
<ng-container matColumnDef="type">
50-
<th *matHeaderCellDef mat-header-cell>
51-
{{'VO_DETAIL.APPLICATION.TABLE_TYPE' | translate}}
52-
</th>
42+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.TYPE' | translate}}</th>
5343
<td *matCellDef="let application" mat-cell>{{application.type}}</td>
5444
</ng-container>
5545
<ng-container matColumnDef="state">
56-
<th *matHeaderCellDef mat-header-cell>
57-
{{'VO_DETAIL.APPLICATION.TABLE_STATE' | translate}}
58-
</th>
46+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.STATE' | translate}}</th>
5947
<td *matCellDef="let application" mat-cell>{{application.state}}</td>
6048
</ng-container>
6149
<ng-container matColumnDef="extSourceName">
62-
<th *matHeaderCellDef mat-header-cell>
63-
{{'VO_DETAIL.APPLICATION.TABLE_EXTSOURCENAME' | translate}}
64-
</th>
50+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.EXTSOURCENAME' | translate}}</th>
6551
<td *matCellDef="let application" mat-cell>{{application.extSourceName}}</td>
6652
</ng-container>
6753
<ng-container matColumnDef="extSourceType">
68-
<th *matHeaderCellDef mat-header-cell>
69-
{{'VO_DETAIL.APPLICATION.TABLE_EXTSOURCETYPE' | translate}}
70-
</th>
54+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.EXTSOURCETYPE' | translate}}</th>
7155
<td *matCellDef="let application" mat-cell>{{application.extSourceType}}</td>
7256
</ng-container>
7357
<ng-container matColumnDef="user">
74-
<th *matHeaderCellDef mat-header-cell>
75-
{{'VO_DETAIL.APPLICATION.TABLE_USER' | translate}}
76-
</th>
58+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.USER' | translate}}</th>
7759
<td *matCellDef="let application" mat-cell>
7860
{{application.user ? (application.user | userFullName) : 'null'}}
7961
</td>
8062
</ng-container>
8163
<ng-container matColumnDef="createdBy">
82-
<th *matHeaderCellDef mat-header-cell>
83-
{{'VO_DETAIL.APPLICATION.TABLE_CREATED_BY' | translate}}
84-
</th>
64+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.CREATED_BY' | translate}}</th>
8565
<td *matCellDef="let application" mat-cell>
8666
{{application.createdBy.slice(application.createdBy.lastIndexOf('=')+1, application.createdBy.length)}}
8767
</td>
8868
</ng-container>
8969
<ng-container matColumnDef="createdAt">
90-
<th *matHeaderCellDef mat-header-cell>
91-
{{'VO_DETAIL.APPLICATION.TABLE_CREATED_DATE' | translate}}
92-
</th>
70+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.CREATED_DATE' | translate}}</th>
9371
<td *matCellDef="let application" mat-cell>{{application.createdAt | date: 'd.M.y'}}</td>
9472
</ng-container>
9573
<ng-container matColumnDef="modifiedBy">
96-
<th *matHeaderCellDef mat-header-cell>
97-
{{'VO_DETAIL.APPLICATION.TABLE_MODIFIED_BY' | translate}}
98-
</th>
74+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.MODIFIED_BY' | translate}}</th>
9975
<td *matCellDef="let application" mat-cell>{{getFriendlyName(application.modifiedBy)}}</td>
10076
</ng-container>
10177
<ng-container matColumnDef="modifiedAt">
102-
<th *matHeaderCellDef mat-header-cell>
103-
{{'VO_DETAIL.APPLICATION.TABLE_MODIFIED_AT' | translate}}
104-
</th>
78+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.MODIFIED_AT' | translate}}</th>
10579
<td *matCellDef="let application" mat-cell>{{application.modifiedAt | date: 'd.M.y'}}</td>
10680
</ng-container>
10781

@@ -113,9 +87,7 @@
11387
</ng-container>
11488

11589
<ng-container matColumnDef="fedInfo">
116-
<th *matHeaderCellDef mat-header-cell>
117-
{{'VO_DETAIL.APPLICATION.TABLE_FEDINFO' | translate}}
118-
</th>
90+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.FEDINFO' | translate}}</th>
11991
<td *matCellDef="let application" mat-cell>{{application.fedInfo}}</td>
12092
</ng-container>
12193

‎apps/admin-gui/src/app/vos/components/application-type-icon/application-type-icon.component.css

Whitespace-only changes.

‎apps/admin-gui/src/app/vos/components/application-type-icon/application-type-icon.component.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div>
2+
<div *ngIf="applicationType === 'INITIAL'">
3+
<mat-icon matTooltip="Initial" matTooltipPosition="above">arrow_right_alt</mat-icon>
4+
</div>
5+
<div *ngIf="applicationType === 'EXTENSION'">
6+
<mat-icon matTooltip="Extension" matTooltipPosition="above">restore</mat-icon>
7+
</div>
8+
<div *ngIf="applicationType === 'EMBEDDED'">
9+
<mat-icon matTooltip="Embedded" matTooltipPosition="above">nat</mat-icon>
10+
</div>
11+
</div>

‎apps/admin-gui/src/app/vos/components/application-type-icon/application-type-icon.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-application-type-icon',
5+
templateUrl: './application-type-icon.component.html',
6+
styleUrls: ['./application-type-icon.component.css'],
7+
})
8+
export class ApplicationTypeIconComponent {
9+
constructor() {}
10+
11+
@Input()
12+
applicationType: string;
13+
}

‎apps/admin-gui/src/app/vos/components/applications-dynamic-list/applications-dynamic-list.component.css

Whitespace-only changes.

‎apps/admin-gui/src/app/vos/components/applications-dynamic-list/applications-dynamic-list.component.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<div
2+
[hidden]="this.dataSource.allObjectCount === 0 && (dataSource.loading$ | async) === false"
3+
class="card mt-2">
4+
<perun-web-apps-table-wrapper
5+
(exportData)="exportData($event)"
6+
[dataLength]="dataSource.allObjectCount"
7+
[pageSizeOptions]="pageSizeOptions"
8+
[tableId]="tableId">
9+
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
10+
<mat-spinner class="ml-auto mr-auto"></mat-spinner>
11+
</div>
12+
<table
13+
[dataSource]="dataSource"
14+
class="w-100"
15+
mat-table
16+
matSort
17+
matSortActive="createdAt"
18+
matSortDirection="desc"
19+
matSortDisableClear>
20+
<ng-container matColumnDef="id">
21+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
22+
{{'APPLICATIONS_LIST.ID' | translate}}
23+
</th>
24+
<td *matCellDef="let application" mat-cell>{{application.id}}</td>
25+
</ng-container>
26+
<ng-container matColumnDef="createdAt">
27+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
28+
{{'APPLICATIONS_LIST.CREATED_DATE' | translate}}
29+
</th>
30+
<td *matCellDef="let application" mat-cell>{{application.createdAt | date: 'd.M.y'}}</td>
31+
</ng-container>
32+
<ng-container matColumnDef="voId">
33+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.VO_ID' | translate}}</th>
34+
<td *matCellDef="let application" mat-cell>{{application['vo'].id}}</td>
35+
</ng-container>
36+
<ng-container matColumnDef="voName">
37+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.VO_NAME' | translate}}</th>
38+
<td *matCellDef="let application" mat-cell>{{application['vo'].name}}</td>
39+
</ng-container>
40+
<ng-container matColumnDef="groupId">
41+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.GROUP_ID' | translate}}</th>
42+
<td *matCellDef="let application" mat-cell>
43+
{{application.group ? application.group.id : '' }}
44+
</td>
45+
</ng-container>
46+
<ng-container matColumnDef="groupName">
47+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.GROUP_NAME' | translate}}</th>
48+
<td *matCellDef="let application" mat-cell>
49+
{{application.group ? application.group.name : '' }}
50+
</td>
51+
</ng-container>
52+
<ng-container matColumnDef="type">
53+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
54+
{{'APPLICATIONS_LIST.TYPE' | translate}}
55+
</th>
56+
<td *matCellDef="let application" mat-cell>
57+
<app-application-type-icon
58+
[applicationType]="application.type"></app-application-type-icon>
59+
</td>
60+
</ng-container>
61+
<ng-container matColumnDef="state">
62+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
63+
{{'APPLICATIONS_LIST.STATE' | translate}}
64+
</th>
65+
<td *matCellDef="let application" mat-cell>
66+
<span [outerHTML]="application.state | applicationState"></span>
67+
</td>
68+
</ng-container>
69+
<ng-container matColumnDef="extSourceName">
70+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.EXTSOURCENAME' | translate}}</th>
71+
<td *matCellDef="let application" mat-cell>{{application.extSourceName}}</td>
72+
</ng-container>
73+
<ng-container matColumnDef="extSourceType">
74+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.EXTSOURCETYPE' | translate}}</th>
75+
<td *matCellDef="let application" mat-cell>{{application.extSourceType}}</td>
76+
</ng-container>
77+
<ng-container matColumnDef="user">
78+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
79+
{{'APPLICATIONS_LIST.USER' | translate}}
80+
</th>
81+
<td *matCellDef="let application" mat-cell>
82+
<div *ngIf="application.user === null; else name">
83+
{{application.createdBy.slice(application.createdBy.lastIndexOf('=') + 1, application.createdBy.length)}}
84+
</div>
85+
<ng-template #name>
86+
{{application.user | userFullName}}
87+
</ng-template>
88+
</td>
89+
</ng-container>
90+
<ng-container matColumnDef="createdBy">
91+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.CREATED_BY' | translate}}</th>
92+
<td *matCellDef="let application" mat-cell>
93+
{{application.createdBy.slice(application.createdBy.lastIndexOf('=') + 1, application.createdBy.length)}}
94+
</td>
95+
</ng-container>
96+
<ng-container matColumnDef="modifiedBy">
97+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
98+
{{'APPLICATIONS_LIST.MODIFIED_BY' | translate}}
99+
</th>
100+
<td *matCellDef="let application" mat-cell>{{getFriendlyName(application.modifiedBy)}}</td>
101+
</ng-container>
102+
<ng-container matColumnDef="modifiedAt">
103+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.MODIFIED_AT' | translate}}</th>
104+
<td *matCellDef="let application" mat-cell>{{application.modifiedAt | date: 'd.M.y'}}</td>
105+
</ng-container>
106+
<ng-container matColumnDef="fedInfo">
107+
<th *matHeaderCellDef mat-header-cell>{{'APPLICATIONS_LIST.FEDINFO' | translate}}</th>
108+
<td *matCellDef="let application" mat-cell>{{application.fedInfo}}</td>
109+
</ng-container>
110+
111+
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
112+
<tr
113+
*matRowDef="let application; columns: displayedColumns;"
114+
[class.cursor-pointer]="!disableRouting"
115+
[perunWebAppsMiddleClickRouterLink]="selectApplication(application)"
116+
[routerLink]="selectApplication(application)"
117+
class="dark-hover-list-item"
118+
mat-row></tr>
119+
</table>
120+
</perun-web-apps-table-wrapper>
121+
</div>
122+
123+
<app-alert
124+
*ngIf="this.dataSource.allObjectCount === 0 && (dataSource.loading$ | async) === false"
125+
[alert_type]="'warn'">
126+
{{'VO_DETAIL.APPLICATION.NO_APPLICATION_FOUND' | translate}}
127+
</app-alert>

0 commit comments

Comments
 (0)