Skip to content
This repository was archived by the owner on Sep 30, 2022. It is now read-only.

Commit 386e0b2

Browse files
author
Dominik František Bučík
authored
Merge pull request #206 from dBucik/external_services
feat: 🎸 Display also external services
2 parents 2363a6e + 15841de commit 386e0b2

File tree

20 files changed

+642
-234
lines changed

20 files changed

+642
-234
lines changed

‎gui/package.json

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,51 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "~12.2.11",
16-
"@angular/cdk": "~12.2.11",
17-
"@angular/common": "~12.2.11",
18-
"@angular/compiler": "~12.2.11",
19-
"@angular/core": "~12.2.11",
20-
"@angular/forms": "~12.2.11",
21-
"@angular/localize": "~12.2.11",
22-
"@angular/material": "~12.2.11",
23-
"@angular/platform-browser": "~12.2.11",
24-
"@angular/platform-browser-dynamic": "~12.2.11",
25-
"@angular/router": "~12.2.11",
26-
"@fortawesome/angular-fontawesome": "~0.9.0",
27-
"@fortawesome/fontawesome-svg-core": "~1.2.36",
28-
"@fortawesome/free-solid-svg-icons": "~5.15.4",
29-
"@ngx-translate/core": "~13.0.0",
30-
"@ngx-translate/http-loader": "~6.0.0",
31-
"bootstrap": "~4.6.0",
32-
"core-js": "~3.18.3",
33-
"eslint": "~7.32.0",
34-
"font-awesome": "~4.7.0",
35-
"hammerjs": "~2.0.8",
36-
"jquery": "~3.6.0",
37-
"popper.js": "~1.16.1-lts",
38-
"rxjs": "~7.4.0",
39-
"zone.js": "~0.11.4"
15+
"@angular/animations": "^12.2.11",
16+
"@angular/cdk": "^12.2.11",
17+
"@angular/common": "^12.2.11",
18+
"@angular/compiler": "^12.2.11",
19+
"@angular/core": "^12.2.11",
20+
"@angular/forms": "^12.2.11",
21+
"@angular/localize": "^12.2.11",
22+
"@angular/material": "^12.2.11",
23+
"@angular/platform-browser": "^12.2.11",
24+
"@angular/platform-browser-dynamic": "^12.2.11",
25+
"@angular/router": "^12.2.11",
26+
"@fortawesome/angular-fontawesome": "^0.9.0",
27+
"@fortawesome/fontawesome-svg-core": "^1.2.36",
28+
"@fortawesome/free-solid-svg-icons": "^5.15.4",
29+
"@ngx-translate/core": "^13.0.0",
30+
"@ngx-translate/http-loader": "^6.0.0",
31+
"bootstrap": "^4.6.0",
32+
"core-js": "^3.18.3",
33+
"eslint": "^7.32.0",
34+
"font-awesome": "^4.7.0",
35+
"hammerjs": "^2.0.8",
36+
"jquery": "^3.6.0",
37+
"popper.js": "^1.16.1-lts",
38+
"rxjs": "^7.4.0",
39+
"zone.js": "^0.11.4"
4040
},
4141
"devDependencies": {
42-
"@angular-devkit/build-angular": "~12.2.11",
43-
"@angular-eslint/eslint-plugin": "~12.5.0",
44-
"@angular-eslint/eslint-plugin-template": "~12.5.0",
45-
"@angular/cli": "~12.2.11",
46-
"@angular/compiler-cli": "~12.2.11",
47-
"@angular/language-service": "~12.2.11",
48-
"@nrwl/eslint-plugin-nx": "~13.0.2",
49-
"@types/node": "~16.11.1",
50-
"@typescript-eslint/eslint-plugin": "~4.33.0",
51-
"@typescript-eslint/parser": "~4.33.0",
52-
"eslint-config-prettier": "~8.3.0",
53-
"eslint-plugin-eslint-comments": "~3.2.0",
54-
"eslint-plugin-eslint-plugin": "~4.0.1",
55-
"eslint-plugin-import": "~2.25.2",
56-
"eslint-plugin-jest": "~25.2.2",
57-
"eslint-plugin-node": "~11.1.0",
58-
"eslint-plugin-simple-import-sort": "~7.0.0",
59-
"prettier": "~2.4.1",
60-
"typescript": "~4.3.5"
42+
"@angular-devkit/build-angular": "^12.2.11",
43+
"@angular-eslint/eslint-plugin": "^12.5.0",
44+
"@angular-eslint/eslint-plugin-template": "^12.5.0",
45+
"@angular/cli": "^12.2.11",
46+
"@angular/compiler-cli": "^12.2.11",
47+
"@angular/language-service": "^12.2.11",
48+
"@nrwl/eslint-plugin-nx": "^13.0.2",
49+
"@types/node": "^16.11.1",
50+
"@typescript-eslint/eslint-plugin": "^4.33.0",
51+
"@typescript-eslint/parser": "^4.33.0",
52+
"eslint-config-prettier": "^8.3.0",
53+
"eslint-plugin-eslint-comments": "^3.2.0",
54+
"eslint-plugin-eslint-plugin": "^4.0.1",
55+
"eslint-plugin-import": "^2.25.2",
56+
"eslint-plugin-jest": "^25.2.2",
57+
"eslint-plugin-node": "^11.1.0",
58+
"eslint-plugin-simple-import-sort": "^7.0.0",
59+
"prettier": "^2.4.1",
60+
"typescript": "^4.3.5"
6161
}
6262
}

‎gui/src/app/core/models/PageConfig.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ export class PageConfig {
66
this.footerHtml = item.footerHtml;
77
this.headerHtml = item.headerHtml;
88
this.logoutUrl = item.logoutUrl;
9+
this.externalServices = item.externalServices;
910
}
1011

1112
headerLabel: string;
1213
logoUrl: string;
1314
footerHtml: string;
1415
headerHtml: string;
1516
logoutUrl: string;
17+
externalServices: boolean;
18+
1619
}

‎gui/src/app/core/parts/paginatorI18n.ts

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,47 @@
11
import { MatPaginatorIntl } from '@angular/material/paginator';
2-
import { TranslateService } from '@ngx-translate/core';
2+
import {TranslateParser, TranslateService} from '@ngx-translate/core';
3+
import {Subscription} from "rxjs";
4+
import {Injectable, OnDestroy} from "@angular/core";
35

4-
export class PaginatorI18n {
6+
@Injectable()
7+
export class PaginatorI18n extends MatPaginatorIntl implements OnDestroy {
58

6-
constructor(private readonly translate: TranslateService) {}
9+
private rangeLabelIntl: string;
10+
private subscription: Subscription;
711

8-
getPaginatorIntl(): MatPaginatorIntl {
9-
const paginatorIntl = new MatPaginatorIntl();
10-
paginatorIntl.itemsPerPageLabel = this.translate.instant('PAGINATOR.ITEMS_PER_PAGE_LABEL');
11-
paginatorIntl.nextPageLabel = this.translate.instant('PAGINATOR.NEXT_PAGE_LABEL');
12-
paginatorIntl.previousPageLabel = this.translate.instant('PAGINATOR.PREVIOUS_PAGE_LABEL');
13-
paginatorIntl.firstPageLabel = this.translate.instant('PAGINATOR.FIRST_PAGE_LABEL');
14-
paginatorIntl.lastPageLabel = this.translate.instant('PAGINATOR.LAST_PAGE_LABEL');
15-
paginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
16-
return paginatorIntl;
12+
constructor(private readonly translate: TranslateService, private readonly tParser: TranslateParser) {
13+
super();
14+
this.getTranslations();
1715
}
1816

19-
private getRangeLabel(page: number, pageSize: number, length: number): string {
20-
if (length === 0 || pageSize === 0) {
21-
return this.translate.instant('PAGINATOR.RANGE_PAGE_LABEL_1', { length });
22-
}
17+
getTranslations() {
18+
this.subscription = this.translate.stream([
19+
'PAGINATOR.ITEMS_PER_PAGE_LABEL',
20+
'PAGINATOR.NEXT_PAGE_LABEL',
21+
'PAGINATOR.PREVIOUS_PAGE_LABEL',
22+
'PAGINATOR.FIRST_PAGE_LABEL',
23+
'PAGINATOR.LAST_PAGE_LABEL',
24+
'PAGINATOR.RANGE_PAGE_LABEL',
25+
]).subscribe(translation => {
26+
this.itemsPerPageLabel = translation['PAGINATOR.ITEMS_PER_PAGE_LABEL'];
27+
this.nextPageLabel = translation['PAGINATOR.NEXT_PAGE_LABEL'];
28+
this.previousPageLabel = translation['PAGINATOR.PREVIOUS_PAGE_LABEL'];
29+
this.firstPageLabel = translation['PAGINATOR.FIRST_PAGE_LABEL'];
30+
this.lastPageLabel = translation['PAGINATOR.LAST_PAGE_LABEL'];
31+
this.rangeLabelIntl = translation['PAGINATOR.RANGE_PAGE_LABEL'];
32+
this.changes.next();
33+
});
34+
}
35+
36+
ngOnDestroy(): void {
37+
this.subscription.unsubscribe();
38+
}
39+
40+
getRangeLabel = (page, pageSize, length) => {
2341
length = Math.max(length, 0);
24-
const startIndex = page * pageSize;
25-
// If the start index exceeds the list length, do not try and fix the end index to the end.
42+
const startIndex = (page * pageSize) + 1;
2643
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
27-
return this.translate.instant('PAGINATOR.RANGE_PAGE_LABEL_2', { startIndex: startIndex + 1, endIndex, length });
44+
return this.tParser.interpolate(this.rangeLabelIntl, { startIndex, endIndex, length });
2845
}
46+
2947
}

‎gui/src/app/core/services/facilities.service.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,18 @@ export class FacilitiesService {
2020
return this.apiService.get('/allFacilities');
2121
}
2222

23+
getAllExternalFacilities(): Observable<ProvidedService[]> {
24+
return this.apiService.get('/allFacilitiesExternal');
25+
}
26+
2327
getMyFacilities(): Observable<ProvidedService[]> {
2428
return this.apiService.get('/userFacilities');
2529
}
2630

31+
getMyExternalFacilities(): Observable<ProvidedService[]> {
32+
return this.apiService.get('/userFacilitiesExternal');
33+
}
34+
2735
getFacility(id: number): Observable<Facility> {
2836
return this.apiService.get('/facility/' + id);
2937
}

‎gui/src/app/facilities/facilities-admin/facilities-admin.component.html

Lines changed: 82 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<div class="container-fluid pt-5">
2-
<mat-spinner class="ml-auto mr-auto" *ngIf="loading" color=""></mat-spinner>
3-
<div *ngIf="!loading" class="card shadow-sm">
2+
<div class="card shadow-sm">
43
<div class="card-body p-3 p-lg-5">
54
<h4 class="card-title">
65
{{'MENU.ALL_FACILITIES' | translate}}
@@ -9,44 +8,87 @@ <h4 class="card-title">
98
<mat-icon matPrefix class="mr-1">search</mat-icon>
109
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="{{ 'SEARCH' | translate}}">
1110
</mat-form-field>
12-
<table mat-table matSort matSortActive="facilityId" matSortDirection="desc" matSortDisableClear [dataSource]="dataSource"
13-
class="w-100">
14-
<ng-container matColumnDef="facilityId">
15-
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'COMMON.ID' | translate}}</th>
16-
<td mat-cell *matCellDef="let providedService">{{providedService.facilityId}}</td>
17-
</ng-container>
18-
<ng-container matColumnDef="name">
19-
<th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{'FACILITIES.NAME' | translate}}</th>
20-
<td mat-cell *matCellDef="let providedService">{{providedService.name | itemLocale}}</td>
21-
</ng-container>
22-
<ng-container matColumnDef="description">
23-
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.DESCRIPTION' | translate}}</th>
24-
<td mat-cell *matCellDef="let providedService">{{providedService.description | itemLocale}}</td>
25-
</ng-container>
26-
<ng-container matColumnDef="identifier">
27-
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.IDENTIFIER' | translate}}</th>
28-
<td mat-cell *matCellDef="let providedService">{{providedService.identifier}}</td>
29-
</ng-container>
30-
<ng-container matColumnDef="environment">
31-
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.ENVIRONMENT' | translate}}</th>
32-
<td mat-cell *matCellDef="let providedService">{{providedService.environment | facilityEnvironment}}</td>
33-
</ng-container>
34-
<ng-container matColumnDef="protocol">
35-
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.PROTOCOL' | translate}}</th>
36-
<td mat-cell *matCellDef="let providedService">{{providedService.protocol }}</td>
37-
</ng-container>
38-
<ng-container matColumnDef="deleted">
39-
<th mat-header-cell *matHeaderCellDef class="w-3"></th>
40-
<td mat-cell *matCellDef="let providedService">
41-
<mat-icon *ngIf="providedService.facilityDeleted" color="warn">delete</mat-icon>
42-
</td>
43-
</ng-container>
44-
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
45-
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/auth/facilities/detail', row.facilityId]"
46-
class="hover-dark clickable">
47-
</tr>
48-
</table>
49-
<mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
11+
<div>
12+
<div *ngIf="isLoadingTable1" style="display: flex; justify-content: center; align-items: center; background: white;">
13+
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
14+
</div>
15+
<table *ngIf="!isLoadingTable1" mat-table matSort #sort1="matSort" matSortActive="facilityId" matSortDirection="desc"
16+
matSortDisableClear [dataSource]="servicesDataSource" class="w-100">
17+
<ng-container matColumnDef="facilityId">
18+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'COMMON.ID' | translate}}</th>
19+
<td mat-cell *matCellDef="let providedService">{{providedService.facilityId}}</td>
20+
</ng-container>
21+
<ng-container matColumnDef="name">
22+
<th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{'FACILITIES.NAME' | translate}}</th>
23+
<td mat-cell *matCellDef="let providedService">{{providedService.name | itemLocale}}</td>
24+
</ng-container>
25+
<ng-container matColumnDef="description">
26+
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.DESCRIPTION' | translate}}</th>
27+
<td mat-cell *matCellDef="let providedService">{{providedService.description | itemLocale}}</td>
28+
</ng-container>
29+
<ng-container matColumnDef="identifier">
30+
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.IDENTIFIER' | translate}}</th>
31+
<td mat-cell *matCellDef="let providedService">{{providedService.identifier}}</td>
32+
</ng-container>
33+
<ng-container matColumnDef="environment">
34+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.ENVIRONMENT' | translate}}</th>
35+
<td mat-cell *matCellDef="let providedService">{{providedService.environment | facilityEnvironment}}</td>
36+
</ng-container>
37+
<ng-container matColumnDef="protocol">
38+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.PROTOCOL' | translate}}</th>
39+
<td mat-cell *matCellDef="let providedService">{{providedService.protocol }}</td>
40+
</ng-container>
41+
<ng-container matColumnDef="deleted">
42+
<th mat-header-cell *matHeaderCellDef class="w-3"></th>
43+
<td mat-cell *matCellDef="let providedService">
44+
<mat-icon *ngIf="providedService.facilityDeleted" color="warn">delete</mat-icon>
45+
</td>
46+
</ng-container>
47+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
48+
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/auth/facilities/detail', row.facilityId]"
49+
class="hover-dark clickable">
50+
</tr>
51+
</table>
52+
<mat-paginator #paginator1 [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
53+
</div>
54+
55+
<div *ngIf="externalServicesEnabled">
56+
<h5>{{ 'FACILITIES.EXTERNAL' | translate}}</h5>
57+
<div *ngIf="isLoadingTable2" style="display: flex; justify-content: center; align-items: center; background: white;">
58+
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
59+
</div>
60+
<table *ngIf="!isLoadingTable2" mat-table matSort #sort2="matSort" matSortActive="facilityId" matSortDirection="desc"
61+
matSortDisableClear [dataSource]="externalServicesDataSource" class="w-100">
62+
<ng-container matColumnDef="facilityId">
63+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'COMMON.ID' | translate}}</th>
64+
<td mat-cell *matCellDef="let providedService">{{providedService.facilityId}}</td>
65+
</ng-container>
66+
<ng-container matColumnDef="name">
67+
<th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{'FACILITIES.NAME' | translate}}</th>
68+
<td mat-cell *matCellDef="let providedService">{{providedService.name | itemLocale}}</td>
69+
</ng-container>
70+
<ng-container matColumnDef="description">
71+
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.DESCRIPTION' | translate}}</th>
72+
<td mat-cell *matCellDef="let providedService">{{providedService.description | itemLocale}}</td>
73+
</ng-container>
74+
<ng-container matColumnDef="identifier">
75+
<th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{'FACILITIES.IDENTIFIER' | translate}}</th>
76+
<td mat-cell *matCellDef="let providedService">{{providedService.identifier}}</td>
77+
</ng-container>
78+
<ng-container matColumnDef="environment">
79+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.ENVIRONMENT' | translate}}</th>
80+
<td mat-cell *matCellDef="let providedService">{{providedService.environment | facilityEnvironment}}</td>
81+
</ng-container>
82+
<ng-container matColumnDef="protocol">
83+
<th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{'FACILITIES.PROTOCOL' | translate}}</th>
84+
<td mat-cell *matCellDef="let providedService">{{providedService.protocol }}</td>
85+
</ng-container>
86+
<tr mat-header-row *matHeaderRowDef="displayedColumnsExtServices; sticky: true"></tr>
87+
<tr mat-row *matRowDef="let row; columns: displayedColumnsExtServices;" class="hover-dark">
88+
</tr>
89+
</table>
90+
<mat-paginator #paginator2 [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
91+
</div>
5092
</div>
5193
</div>
5294
</div>

0 commit comments

Comments
 (0)