diff --git a/matsen-tool/package-lock.json b/matsen-tool/package-lock.json index 2713e15..d169938 100644 --- a/matsen-tool/package-lock.json +++ b/matsen-tool/package-lock.json @@ -22,6 +22,7 @@ "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@popperjs/core": "^2.11.8", + "@types/node": "^20.11.5", "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.2", "rxjs": "~7.8.0", @@ -4635,10 +4636,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.10.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz", - "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==", - "dev": true, + "version": "20.11.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.5.tgz", + "integrity": "sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==", "dependencies": { "undici-types": "~5.26.4" } @@ -13408,8 +13408,7 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/matsen-tool/package.json b/matsen-tool/package.json index 0c94b3e..59cf71b 100644 --- a/matsen-tool/package.json +++ b/matsen-tool/package.json @@ -25,6 +25,7 @@ "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@popperjs/core": "^2.11.8", + "@types/node": "^20.11.5", "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.2", "rxjs": "~7.8.0", diff --git a/matsen-tool/src/app/app-routing.module.ts b/matsen-tool/src/app/app-routing.module.ts index 902fb58..b5910c0 100644 --- a/matsen-tool/src/app/app-routing.module.ts +++ b/matsen-tool/src/app/app-routing.module.ts @@ -1,23 +1,56 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; -import { HomeComponent } from './home'; -import { AuthGuard } from './_helpers'; +import {HomeComponent} from './home'; +import {AuthGuard} from './_helpers'; +import {PartnersComponent} from "@app/partners/partners.component"; +import {TwoColumnComponent} from "@app/layout/two-column/two-column.component"; +import {PartnersDetailComponent} from "@app/partners/partners-detail/partners-detail.component"; const accountModule = () => import('./account/account.module').then(x => x.AccountModule); const usersModule = () => import('./users/users.module').then(x => x.UsersModule); const routes: Routes = [ - { path: '', component: HomeComponent, canActivate: [AuthGuard] }, - { path: 'users', loadChildren: usersModule, canActivate: [AuthGuard] }, - { path: 'account', loadChildren: accountModule }, + {path: '', component: HomeComponent, canActivate: [AuthGuard]}, + {path: 'users', loadChildren: usersModule, canActivate: [AuthGuard]}, + {path: 'account', loadChildren: accountModule}, + { + path: 'customers', + component: TwoColumnComponent, + canActivate: [AuthGuard], + children: [ + {path: '', component: PartnersComponent, data: {dataType: 'customer'}}, + {path: 'detail', component: PartnersDetailComponent, data: {dataType: 'customer-detail'}}, + ] + }, + { + path: 'suppliers', + component: TwoColumnComponent, + canActivate: [AuthGuard], + children: [ + {path: '', component: PartnersComponent, data: {dataType: 'supplier'}}, + ] + }, + { + path: 'service', + component: TwoColumnComponent, + canActivate: [AuthGuard], + children: [ + {path: '', component: PartnersComponent, data: {dataType: 'service'}}, + ] + }, + + // { path: 'customers', component: PartnersComponent, data: { dataType: 'customer' } }, + // { path: 'suppliers', component: PartnersComponent, data: { dataType: 'supplier' } }, + // { path: 'service', component: PartnersComponent, data: { dataType: 'service' } }, // otherwise redirect to home - { path: '**', redirectTo: '' } + {path: '**', redirectTo: ''} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) -export class AppRoutingModule { } \ No newline at end of file +export class AppRoutingModule { +} diff --git a/matsen-tool/src/app/app.config.server.ts b/matsen-tool/src/app/app.config.server.ts index b4d57c9..be361ce 100644 --- a/matsen-tool/src/app/app.config.server.ts +++ b/matsen-tool/src/app/app.config.server.ts @@ -1,11 +1,11 @@ -import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; -import { provideServerRendering } from '@angular/platform-server'; -import { appConfig } from './app.config'; +import {mergeApplicationConfig, ApplicationConfig} from '@angular/core'; +import {provideServerRendering} from '@angular/platform-server'; +import {appConfig} from './app.config'; const serverConfig: ApplicationConfig = { - providers: [ - provideServerRendering() - ] + providers: [ + provideServerRendering() + ] }; export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts index 92402ff..fcc7a8b 100644 --- a/matsen-tool/src/app/app.module.ts +++ b/matsen-tool/src/app/app.module.ts @@ -18,6 +18,10 @@ import {MatCardModule} from "@angular/material/card"; import {TranslateLoader, TranslateModule} from "@ngx-translate/core"; import {TranslateHttpLoader} from "@ngx-translate/http-loader"; import {NgOptimizedImage} from "@angular/common"; +import {PartnersComponent} from './partners/partners.component'; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {TwoColumnComponent} from './layout/two-column/two-column.component'; +import {PartnersDetailComponent} from './partners/partners-detail/partners-detail.component'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -36,6 +40,7 @@ export function HttpLoaderFactory(http: HttpClient) { imports: [ ApiModule.forRoot(apiConfigFactory), BrowserModule, + BrowserAnimationsModule, TranslateModule.forRoot({ defaultLanguage: 'de', loader: { @@ -49,12 +54,15 @@ export function HttpLoaderFactory(http: HttpClient) { NgbModule, AppRoutingModule, MatCardModule, - NgOptimizedImage + NgOptimizedImage, + PartnersComponent ], declarations: [ AppComponent, AlertComponent, - HomeComponent + HomeComponent, + TwoColumnComponent, + PartnersDetailComponent ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, diff --git a/matsen-tool/src/app/home/home.component.html b/matsen-tool/src/app/home/home.component.html index cad9fe8..24b3c80 100644 --- a/matsen-tool/src/app/home/home.component.html +++ b/matsen-tool/src/app/home/home.component.html @@ -9,21 +9,21 @@
- +

Kunden
- +

Dienstleister
- +

Lieferanten

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 new file mode 100644 index 0000000..2d02a36 --- /dev/null +++ b/matsen-tool/src/app/layout/two-column/two-column.component.html @@ -0,0 +1,51 @@ +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/matsen-tool/src/app/layout/two-column/two-column.component.scss b/matsen-tool/src/app/layout/two-column/two-column.component.scss new file mode 100644 index 0000000..05ad81b --- /dev/null +++ b/matsen-tool/src/app/layout/two-column/two-column.component.scss @@ -0,0 +1,31 @@ +.card { + width: 100%; + text-decoration: none; +} +.card-body { + min-height: 50px; + text-transform: uppercase; + text-align: right; + &.bi { + &:before { + display: none; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + font-size: 50px; + } + } + .active & { + min-height: 100px; + &.bi { + &:before { + display: block; + } + } + } + h3 { + right: 10px; + bottom: 10px; + } +} \ No newline at end of file diff --git a/matsen-tool/src/app/layout/two-column/two-column.component.spec.ts b/matsen-tool/src/app/layout/two-column/two-column.component.spec.ts new file mode 100644 index 0000000..713cb97 --- /dev/null +++ b/matsen-tool/src/app/layout/two-column/two-column.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TwoColumnComponent } from './two-column.component'; + +describe('TwoColumnComponent', () => { + let component: TwoColumnComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TwoColumnComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TwoColumnComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..4d671eb --- /dev/null +++ b/matsen-tool/src/app/layout/two-column/two-column.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-two-column', + templateUrl: './two-column.component.html', + styleUrl: './two-column.component.scss' +}) +export class TwoColumnComponent { + +} 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 new file mode 100644 index 0000000..db48309 --- /dev/null +++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html @@ -0,0 +1 @@ +

partners-detail works!

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 new file mode 100644 index 0000000..e69de29 diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.spec.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.spec.ts new file mode 100644 index 0000000..1d33321 --- /dev/null +++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PartnersDetailComponent } from './partners-detail.component'; + +describe('PartnersDetailComponent', () => { + let component: PartnersDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PartnersDetailComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PartnersDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts new file mode 100644 index 0000000..c04c039 --- /dev/null +++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-partners-detail', + templateUrl: './partners-detail.component.html', + styleUrl: './partners-detail.component.scss' +}) +export class PartnersDetailComponent { + +} diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html new file mode 100644 index 0000000..a15e183 --- /dev/null +++ b/matsen-tool/src/app/partners/partners.component.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Nr. + {{element.position}} + Partner + {{element.partner}} + Adresse + {{element.street}} {{element.street_no}}
{{element.zip}} {{element.city}} 		+ Website + {{element.website}}
diff --git a/matsen-tool/src/app/partners/partners.component.scss b/matsen-tool/src/app/partners/partners.component.scss new file mode 100644 index 0000000..5806f58 --- /dev/null +++ b/matsen-tool/src/app/partners/partners.component.scss @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +th.mat-sort-header-sorted { + color: black; +} \ No newline at end of file diff --git a/matsen-tool/src/app/partners/partners.component.spec.ts b/matsen-tool/src/app/partners/partners.component.spec.ts new file mode 100644 index 0000000..e0946a7 --- /dev/null +++ b/matsen-tool/src/app/partners/partners.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PartnersComponent } from './partners.component'; + +describe('PartnersComponent', () => { + let component: PartnersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PartnersComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PartnersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts new file mode 100644 index 0000000..9968c44 --- /dev/null +++ b/matsen-tool/src/app/partners/partners.component.ts @@ -0,0 +1,67 @@ +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} from "@angular/router"; + +export interface PeriodicElement { + 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'}, +]; + +@Component({ + selector: 'app-partners', + templateUrl: './partners.component.html', + styleUrl: './partners.component.scss', + standalone: true, + imports: [MatTableModule, MatSortModule], +}) +export class PartnersComponent implements OnInit, AfterViewInit { + @ViewChild(MatSort) sort; + + 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); + } + + ngAfterViewInit() { + this.dataSource.sort = this.sort; + } + + goBack() { + this._location.back(); + } + + /** 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'); + } + } +}