more components

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: ''}

matsen-tool/src/app/app.component.scss

@@ -0,0 +1,3 @@
+img {
+  width: 247px;
+}

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},

matsen-tool/src/app/documents/documents.component.html

@@ -0,0 +1 @@
+<p>documents works!</p>

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<DocumentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DocumentsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DocumentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

matsen-tool/src/app/layout/two-column/two-column.component.html

@@ -46,6 +46,7 @@
         </ul>
     </div>
     <div class="col-10">
+        <button (click)="goBack()">Zurück</button>
         <router-outlet></router-outlet>
     </div>
 </div>

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();
+    }
+
 }

matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

@@ -1 +1,73 @@
-<p>partners-detail works!</p>
+<div class="card">
+    <div class="card-body row">
+        <div class="col-4">
+            <h1>spawntree GmbH</h1>
+            <p>Bauernvogtskoppel 6c<br/>
+                21465 Wentorf<br/>
+                Deutschland</p>
+            <p>Sprache: Deutsch</p>
+        </div>
+        <div class="col-4">
+            <h2>10002</h2>
+            <dl>
+                <dt>Telefon:</dt>
+                <dd>0177 289 23 02</dd>
+                <dt>Streckenpunkt:</dt>
+                <dd>AT-Salzburg</dd>
+                <dt>Geschäftsbuchungsgruppe:</dt>
+                <dd>DE-EU</dd>
+                <dt>MwSt.-Geschäftsbuchungsgruppe:</dt>
+                <dd>DE-DE</dd>
+                <dt>Kreditlimit:</dt>
+                <dd>50.000 €</dd>
+            </dl>
+        </div>
+        <div class="col-4">
+            <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94"
+                 alt="{{'basic.company-name' | translate}}"/>
+        </div>
+    </div>
+</div>
+<div class="contacts">
+    <h2>Kontakte</h2>
+    <div class="row">
+        <div class="col-4">
+            <div class="card">
+                <div class="card-body row">
+                    <div class="col-8">
+                        <h2>Peter Müller-Lüdenscheid</h2>
+                        <p>peterATspawntree.de<br/>
+                            0177-289 23 02<br/>
+                            Stellvertretender Vorsitzender</p>
+                    </div>
+                    <div class="col-4">
+                        <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94"
+                             alt="{{'basic.company-name' | translate}}"/>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-content-end">
+                <a routerLink="#">Details</a>
+            </div>
+        </div>
+        <div class="col-4">
+            <div class="card">
+                <div class="card-body row">
+                    <div class="col-8">
+                        <h2>Heidi Kabel</h2>
+                        <p>heidiATspawntree.de<br/>
+                            0177-289 23 02<br/>
+                            Putzfrau</p>
+                    </div>
+                    <div class="col-4">
+                        <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94"
+                             alt="{{'basic.company-name' | translate}}"/>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-content-end">
+                <a routerLink="#">Details</a>
+            </div>
+        </div>
+    </div>
+</div>

matsen-tool/src/app/partners/partners-detail/partners-detail.component.scss

@@ -0,0 +1,3 @@
+.contacts {
+
+}

matsen-tool/src/app/partners/partners.component.html

@@ -1,5 +1,3 @@
-<button (click)="goBack()">Zurück</button>
-
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
        class="mat-elevation-z8">
 

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');
+        }
     }
-  }
 }

matsen-tool/src/app/users/list.component.html

@@ -2,30 +2,30 @@
 <a routerLink="add" class="btn btn-sm btn-success mb-2">Add User</a>
 <table class="table table-striped">
     <thead>
-        <tr>
-            <th style="width: 30%">First Name</th>
-            <th style="width: 30%">Last Name</th>
-            <th style="width: 30%">Username</th>
-            <th style="width: 10%"></th>
-        </tr>
+    <tr>
+        <th style="width: 30%">First Name</th>
+        <th style="width: 30%">Last Name</th>
+        <th style="width: 30%">Username</th>
+        <th style="width: 10%"></th>
+    </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let user of users">
-            <td>{{user.firstName}}</td>
-            <td>{{user.lastName}}</td>
-<!--            <td>{{user.username}}</td>-->
-            <td style="white-space: nowrap">
-                <a routerLink="edit/{{user.id}}" class="btn btn-sm btn-primary me-1">Edit</a>
-<!--                <button (click)="deleteUser(user.id)" class="btn btn-sm btn-danger btn-delete-user" [disabled]="user.isDeleting">-->
-<!--                    <span *ngIf="user.isDeleting" class="spinner-border spinner-border-sm"></span>-->
-<!--                    <span *ngIf="!user.isDeleting">Delete</span>-->
-<!--                </button>-->
-            </td>
-        </tr>
-        <tr *ngIf="!users">
-            <td colspan="4" class="text-center">
-                <span class="spinner-border spinner-border-lg align-center"></span>
-            </td>
-        </tr>
+    <tr *ngFor="let user of users">
+        <td>{{ user.firstName }}</td>
+        <td>{{ user.lastName }}</td>
+        <!--            <td>{{user.username}}</td>-->
+        <td style="white-space: nowrap">
+            <a routerLink="edit/{{user.id}}" class="btn btn-sm btn-primary me-1">Edit</a>
+            <!--                <button (click)="deleteUser(user.id)" class="btn btn-sm btn-danger btn-delete-user" [disabled]="user.isDeleting">-->
+            <!--                    <span *ngIf="user.isDeleting" class="spinner-border spinner-border-sm"></span>-->
+            <!--                    <span *ngIf="!user.isDeleting">Delete</span>-->
+            <!--                </button>-->
+        </td>
+    </tr>
+    <tr *ngIf="!users">
+        <td colspan="4" class="text-center">
+            <span class="spinner-border spinner-border-lg align-center"></span>
+        </td>
+    </tr>
     </tbody>
 </table>

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;
+}