From 051ee576d4b3d66d69a76f2e44332528dbd137e5 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Wed, 24 Jan 2024 12:28:22 +0100 Subject: [PATCH] more components --- matsen-tool/src/app/app-routing.module.ts | 2 + matsen-tool/src/app/app.component.scss | 3 + matsen-tool/src/app/app.module.ts | 4 +- .../app/documents/documents.component.html | 1 + .../app/documents/documents.component.scss | 0 .../app/documents/documents.component.spec.ts | 23 ++++ .../src/app/documents/documents.component.ts | 10 ++ .../two-column/two-column.component.html | 1 + .../layout/two-column/two-column.component.ts | 16 ++- .../partners-detail.component.html | 74 +++++++++++- .../partners-detail.component.scss | 3 + .../src/app/partners/partners.component.html | 2 - .../src/app/partners/partners.component.ts | 109 ++++++++++-------- matsen-tool/src/app/users/list.component.html | 46 ++++---- matsen-tool/src/styles.scss | 7 ++ 15 files changed, 225 insertions(+), 76 deletions(-) create mode 100644 matsen-tool/src/app/documents/documents.component.html create mode 100644 matsen-tool/src/app/documents/documents.component.scss create mode 100644 matsen-tool/src/app/documents/documents.component.spec.ts create mode 100644 matsen-tool/src/app/documents/documents.component.ts diff --git a/matsen-tool/src/app/app-routing.module.ts b/matsen-tool/src/app/app-routing.module.ts index ce89450..59d6476 100644 --- a/matsen-tool/src/app/app-routing.module.ts +++ b/matsen-tool/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import {TwoColumnComponent} from "@app/layout/two-column/two-column.component"; import {PartnersDetailComponent} from "@app/partners/partners-detail/partners-detail.component"; import {ProductsComponent} from "@app/products/products.component"; import {ProductsDetailComponent} from "@app/products/products-detail/products-detail.component"; +import {DocumentsComponent} from "@app/documents/documents.component"; const accountModule = () => import('./account/account.module').then(x => x.AccountModule); const usersModule = () => import('./users/users.module').then(x => x.UsersModule); @@ -52,6 +53,7 @@ const routes: Routes = [ {path: 'detail', component: ProductsDetailComponent, data: {dataType: 'product-detail'}}, ] }, + {path: 'documents', component: DocumentsComponent, canActivate: [AuthGuard]}, // otherwise redirect to home {path: '**', redirectTo: ''} diff --git a/matsen-tool/src/app/app.component.scss b/matsen-tool/src/app/app.component.scss index e69de29..d83566a 100644 --- a/matsen-tool/src/app/app.component.scss +++ b/matsen-tool/src/app/app.component.scss @@ -0,0 +1,3 @@ +img { + width: 247px; +} \ No newline at end of file diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts index e621316..f073432 100644 --- a/matsen-tool/src/app/app.module.ts +++ b/matsen-tool/src/app/app.module.ts @@ -24,6 +24,7 @@ import {TwoColumnComponent} from './layout/two-column/two-column.component'; import {PartnersDetailComponent} from './partners/partners-detail/partners-detail.component'; import { ProductsComponent } from './products/products.component'; import { ProductsDetailComponent } from './products/products-detail/products-detail.component'; +import { DocumentsComponent } from './documents/documents.component'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -66,7 +67,8 @@ export function HttpLoaderFactory(http: HttpClient) { TwoColumnComponent, PartnersDetailComponent, ProductsComponent, - ProductsDetailComponent + ProductsDetailComponent, + DocumentsComponent ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, diff --git a/matsen-tool/src/app/documents/documents.component.html b/matsen-tool/src/app/documents/documents.component.html new file mode 100644 index 0000000..25f3231 --- /dev/null +++ b/matsen-tool/src/app/documents/documents.component.html @@ -0,0 +1 @@ +

documents works!

diff --git a/matsen-tool/src/app/documents/documents.component.scss b/matsen-tool/src/app/documents/documents.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/matsen-tool/src/app/documents/documents.component.spec.ts b/matsen-tool/src/app/documents/documents.component.spec.ts new file mode 100644 index 0000000..8149a42 --- /dev/null +++ b/matsen-tool/src/app/documents/documents.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DocumentsComponent } from './documents.component'; + +describe('DocumentsComponent', () => { + let component: DocumentsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [DocumentsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DocumentsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/matsen-tool/src/app/documents/documents.component.ts b/matsen-tool/src/app/documents/documents.component.ts new file mode 100644 index 0000000..d3197e8 --- /dev/null +++ b/matsen-tool/src/app/documents/documents.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-documents', + templateUrl: './documents.component.html', + styleUrl: './documents.component.scss' +}) +export class DocumentsComponent { + +} diff --git a/matsen-tool/src/app/layout/two-column/two-column.component.html b/matsen-tool/src/app/layout/two-column/two-column.component.html index 632c600..1176afa 100644 --- a/matsen-tool/src/app/layout/two-column/two-column.component.html +++ b/matsen-tool/src/app/layout/two-column/two-column.component.html @@ -46,6 +46,7 @@
+
\ No newline at end of file diff --git a/matsen-tool/src/app/layout/two-column/two-column.component.ts b/matsen-tool/src/app/layout/two-column/two-column.component.ts index 4d671eb..41c83c1 100644 --- a/matsen-tool/src/app/layout/two-column/two-column.component.ts +++ b/matsen-tool/src/app/layout/two-column/two-column.component.ts @@ -1,10 +1,18 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {Location} from "@angular/common"; @Component({ - selector: 'app-two-column', - templateUrl: './two-column.component.html', - styleUrl: './two-column.component.scss' + selector: 'app-two-column', + templateUrl: './two-column.component.html', + styleUrl: './two-column.component.scss' }) export class TwoColumnComponent { + constructor(private _location: Location) { + } + + goBack() { + this._location.back(); + } + } diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html index db48309..8b431b3 100644 --- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html +++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html @@ -1 +1,73 @@ -

partners-detail works!

+
+
+
+

spawntree GmbH

+

Bauernvogtskoppel 6c
+ 21465 Wentorf
+ Deutschland

+

Sprache: Deutsch

+
+
+

10002

+
+
Telefon:
+
0177 289 23 02
+
Streckenpunkt:
+
AT-Salzburg
+
Geschäftsbuchungsgruppe:
+
DE-EU
+
MwSt.-Geschäftsbuchungsgruppe:
+
DE-DE
+
Kreditlimit:
+
50.000 €
+
+
+
+ {{'basic.company-name' | translate}} +
+
+
+
+

Kontakte

+
+
+
+
+
+

Peter Müller-Lüdenscheid

+

peterATspawntree.de
+ 0177-289 23 02
+ Stellvertretender Vorsitzender

+
+
+ {{'basic.company-name' | translate}} +
+
+
+
+ Details +
+
+
+
+
+
+

Heidi Kabel

+

heidiATspawntree.de
+ 0177-289 23 02
+ Putzfrau

+
+
+ {{'basic.company-name' | translate}} +
+
+
+
+ Details +
+
+
+
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.scss b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.scss index e69de29..5836826 100644 --- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.scss +++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.scss @@ -0,0 +1,3 @@ +.contacts { + +} \ No newline at end of file diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html index 87c7c69..9a627c2 100644 --- a/matsen-tool/src/app/partners/partners.component.html +++ b/matsen-tool/src/app/partners/partners.component.html @@ -1,5 +1,3 @@ - - diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts index b3532eb..03bedd6 100644 --- a/matsen-tool/src/app/partners/partners.component.ts +++ b/matsen-tool/src/app/partners/partners.component.ts @@ -2,66 +2,85 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {MatSort, Sort, MatSortModule} from "@angular/material/sort"; import {LiveAnnouncer} from "@angular/cdk/a11y"; import {MatTableDataSource, MatTableModule} from "@angular/material/table"; -import {Location} from "@angular/common"; import {ActivatedRoute, RouterLink, RouterLinkActive} from "@angular/router"; export interface PeriodicElement { - position: number; - partner: string; - street: string; - street_no: string; - zip: string; - city: string; - website: string; + position: number; + partner: string; + street: string; + street_no: string; + zip: string; + city: string; + website: string; } const ELEMENT_DATA: PeriodicElement[] = [ - {position: 1, partner: 'spawntree GmbH', street: 'Bauernvogtskoppel', street_no: '6c', zip: '21465', city: 'Wentorf', website: 'http://spawntree.de'}, - {position: 2, partner: 'Peter Pan AG', street: 'Heinrich-Löhns-Weg', street_no: '123b', zip: '22134', city: 'Hamburg', website: ''}, - {position: 3, partner: 'Weit Weg GmbH', street: 'Hans-Werner-Olm Straße', street_no: '1', zip: '87254', city: 'München', website: 'http://weitweg.de'}, + { + position: 1, + partner: 'spawntree GmbH', + street: 'Bauernvogtskoppel', + street_no: '6c', + zip: '21465', + city: 'Wentorf', + website: 'http://spawntree.de' + }, + { + position: 2, + partner: 'Peter Pan AG', + street: 'Heinrich-Löhns-Weg', + street_no: '123b', + zip: '22134', + city: 'Hamburg', + website: '' + }, + { + position: 3, + partner: 'Weit Weg GmbH', + street: 'Hans-Werner-Olm Straße', + street_no: '1', + zip: '87254', + city: 'München', + website: 'http://weitweg.de' + }, ]; @Component({ - selector: 'app-partners', - templateUrl: './partners.component.html', - styleUrl: './partners.component.scss', - standalone: true, - imports: [MatTableModule, MatSortModule, RouterLink, RouterLinkActive], + selector: 'app-partners', + templateUrl: './partners.component.html', + styleUrl: './partners.component.scss', + standalone: true, + imports: [MatTableModule, MatSortModule, RouterLink, RouterLinkActive], }) export class PartnersComponent implements OnInit, AfterViewInit { - @ViewChild(MatSort) sort; + @ViewChild(MatSort) sort; - dataType!: string; - displayedColumns: string[] = ['position', 'partner', 'address', 'website']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataType!: string; + displayedColumns: string[] = ['position', 'partner', 'address', 'website']; + dataSource = new MatTableDataSource(ELEMENT_DATA); - constructor(private _liveAnnouncer: LiveAnnouncer, private _location: Location, private route: ActivatedRoute) { - this.sort = new MatSort(); - } - - ngOnInit() { - this.dataType = this.route.snapshot.data['dataType']; - console.log('Data Type:', this.dataType); - } + constructor(private _liveAnnouncer: LiveAnnouncer, private route: ActivatedRoute) { + this.sort = new MatSort(); + } - ngAfterViewInit() { - this.dataSource.sort = this.sort; - } + ngOnInit() { + this.dataType = this.route.snapshot.data['dataType']; + console.log('Data Type:', this.dataType); + } - goBack() { - this._location.back(); - } + ngAfterViewInit() { + this.dataSource.sort = this.sort; + } - /** Announce the change in sort state for assistive technology. */ - announceSortChange(sortState: Sort) { - // This example uses English messages. If your application supports - // multiple language, you would internationalize these strings. - // Furthermore, you can customize the message to add additional - // details about the values being sorted. - if (sortState.direction) { - this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); - } else { - this._liveAnnouncer.announce('Sorting cleared'); + /** Announce the change in sort state for assistive technology. */ + announceSortChange(sortState: Sort) { + // This example uses English messages. If your application supports + // multiple language, you would internationalize these strings. + // Furthermore, you can customize the message to add additional + // details about the values being sorted. + if (sortState.direction) { + this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); + } else { + this._liveAnnouncer.announce('Sorting cleared'); + } } - } } diff --git a/matsen-tool/src/app/users/list.component.html b/matsen-tool/src/app/users/list.component.html index e3f9dec..05cd316 100644 --- a/matsen-tool/src/app/users/list.component.html +++ b/matsen-tool/src/app/users/list.component.html @@ -2,30 +2,30 @@ Add User
- - - - - - + + + + + + - - - - - - - - - + + + + + + + + +
First NameLast NameUsername
First NameLast NameUsername
{{user.firstName}}{{user.lastName}} - Edit - - - - -
- -
{{ user.firstName }}{{ user.lastName }} + Edit + + + + +
+ +
diff --git a/matsen-tool/src/styles.scss b/matsen-tool/src/styles.scss index f37e466..0f02658 100644 --- a/matsen-tool/src/styles.scss +++ b/matsen-tool/src/styles.scss @@ -45,3 +45,10 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } bottom: 0; } } + +img { + display: block; + max-width: 100%; + width: auto; + height: auto; +}