SZUT/EMS
5
0
Fork 0
Code Issues 1 Pull requests Projects 1 Activity Actions

Adding Angular Material and
All checks were successful
Quality Check / Linting (push) Successful in 23s
Details

Browse source
This commit is contained in:
Dominik Säume 2024-12-18 11:59:52 +01:00
parent a333400673
commit c12b16f0c0
8 changed files with 85 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
angular.json
View file

@ -32,6 +32,7 @@
}
],
"styles": [
"@angular/material/prebuilt-themes/azure-blue.css",
"src/styles.scss"
],
"scripts": []
@ -91,6 +92,7 @@
}
],
"styles": [
"@angular/material/prebuilt-themes/azure-blue.css",
"src/styles.scss"
],
"scripts": []

41
package-lock.json generated
View file

@ -9,10 +9,12 @@
"version": "0.0.0",
"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.0.3",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.0.3",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
@ -361,6 +363,23 @@
}
}
},
"node_modules/@angular/cdk": {
"version": "19.0.3",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.0.3.tgz",
"integrity": "sha512-sPdIKbSgNk4z02FqdTTMUS62aLVA2R/DsnOk3qdH+nEfeS4nNWQEzwrvMf6dDsTeLQ6YJLWXfZfemsGYpOoiWg==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"optionalDependencies": {
"parse5": "^7.1.2"
},
"peerDependencies": {
"@angular/common": "^19.0.0 || ^20.0.0",
"@angular/core": "^19.0.0 || ^20.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/cli": {
"version": "19.0.5",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.0.5.tgz",
@ -494,6 +513,24 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/material": {
"version": "19.0.3",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-19.0.3.tgz",
"integrity": "sha512-aHAnmEzoE6nEF7S/lBlMwDMs6ZEkvE3omg9g6jY6WyKWtP9HYeCfwxmTPVclqcbXWxJWO/5Bvwfcjzs75uC+YA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/animations": "^19.0.0 || ^20.0.0",
"@angular/cdk": "19.0.3",
"@angular/common": "^19.0.0 || ^20.0.0",
"@angular/core": "^19.0.0 || ^20.0.0",
"@angular/forms": "^19.0.0 || ^20.0.0",
"@angular/platform-browser": "^19.0.0 || ^20.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/platform-browser": {
"version": "19.0.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.0.4.tgz",
@ -7846,7 +7883,7 @@
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"devOptional": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
@ -12637,7 +12674,7 @@
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
"integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"entities": "^4.5.0"

4
package.json
View file

@ -13,10 +13,12 @@
"private": true,
"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.0.3",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.0.3",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
@ -52,4 +54,4 @@
"volta": {
"node": "22.12.0"
}
}
}

27
src/app/app.component.html
View file

@ -1,8 +1,23 @@
@for (employee of $employees | async ; track employee.id) {
<code style="white-space: pre-wrap">
{{ employee | json}}
</code>
<hr>
@if ($employees | async; as employees) {
<mat-tree #tree [dataSource]="employees" [childrenAccessor]="childrenAccessor">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
{{ node.firstName }}
@if (tree.isExpanded(node)) {
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
<mat-icon>expand_more</mat-icon>
</button>
<ul>
@for (entry of node | keyvalue; track entry) {
<li>{{ entry.key }}: <code>{{ entry.value }}</code></li>
}
</ul>
} @else {
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
<mat-icon>chevron_right</mat-icon>
</button>
}
</mat-tree-node>
</mat-tree>
}
<router-outlet />
<router-outlet/>

8
src/app/app.component.ts
View file

@ -1,17 +1,21 @@
import {AsyncPipe, JsonPipe} from '@angular/common';
import {AsyncPipe, KeyValuePipe} from '@angular/common';
import {Component} from '@angular/core';
import {MatIconButton} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatTree, MatTreeModule} from '@angular/material/tree';
import { RouterOutlet } from '@angular/router';
import { EmployeeControllerService, FindAll1Response } from '@core/ems';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
imports: [RouterOutlet, JsonPipe, AsyncPipe],
imports: [RouterOutlet, AsyncPipe, MatIconModule, MatTree, MatTreeModule, KeyValuePipe, MatIconButton],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent{
readonly $employees: Observable<FindAll1Response>;
childrenAccessor = () => [];
constructor(private apiClient: EmployeeControllerService) {
this.$employees = this.apiClient.findAll1();

4
src/app/app.config.ts
View file

@ -5,13 +5,13 @@ import { provideRouter } from '@angular/router';
import { routes } from '@app/app.routes';
import { OpenAPI } from '@core/ems/core/OpenAPI';
OpenAPI.BASE = 'http://localhost:8080';
OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1MTY5MTQsImlhdCI6MTczNDUxMzMxNCwianRpIjoiMjk2MzAwNTQtMWI2Ni00ODIyLWFiMGItNmI5NjlkZDg4MTRkIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJhMDIzMmNhMy0yZjM3LTQ3OTctYThkMC0zNjJhNzBlODY1MDMiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.evYkQetnwJWgzHjSRrZyN1Ls-fpdBsM0KYwp0RKcsgrg4w4p-WMnFGDch_1kFWflMq9i3J_sAhsPcFhvCiKEpo5xca9yj0-20GMUZXH7aNwCneqGur2f9wh3k8nQdoYsuwKTfKpGSsNWTQ20rV7CqHIne-lD2rayhb2wHwOsbklsSf0K9s37EKPwASfln4g1KGTbBpwFDz8p75Vhr5HqlaCJUxN-NMYKM41_2ao8ykhCVkKRk7cZwjKfB3MOk5Xk8l0NHcPBp8G_pOyrjyqC-fGekcxEF1ucYSWqw4r_PsUTeLkO8M-RK0h798JWq7l-OcODgxr4qhx-ungUPnGFxw';
OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1MjA4MzgsImlhdCI6MTczNDUxNzIzOCwianRpIjoiODVkM2NlNDQtM2QwMS00MDFkLTlhY2YtZjFhZTMwNzQzMDRmIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJiOWI3OGQ0ZS1jM2E4LTRiOWQtODdmMy04N2FiNzhjYzQyYTMiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.I3CGELu7IXrh5kYapp-v54c-R8hNqZOtvpmR98NhoTCrOVUoA-V16ayhF42qQ3Pj2YymxENpQWHR1-BTFQOJmAhQKBzvKWgOHuiLCPr8NkMGWFQ520BcJdipbGnsM8tmXuLE9FWezHA7LEGVkwY2gTbQMLEPq8v8hrtIf76F2Dq34BIG3Nq_6QlG10rG_Heqta6kWWe2p4DJmebdpvAeW2qvTLD4x89oIhtYXSiRIiVS2uAur5XuJcjpbv8UXWx11zVX7KelZEXky92q_xPKerFMOGt6up5MkCijJBhVWewSWNldaix7_jKTXCp70Gtu4sgCIuoojKp9Nts942RZjw';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideAnimationsAsync()
provideAnimationsAsync(), provideAnimationsAsync()
],
};

4
src/index.html
View file

@ -6,8 +6,10 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

9
src/styles.scss
View file

@ -1 +1,10 @@
/* You can add global styles to this file, and also import other style files */
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}