serial und Datenbank Anpassungen

src/app/app.component.html

@@ -8,7 +8,7 @@
   </div>
 
   <div class="mtext">
-    <app-artikel-data></app-artikel-data>
+    <router-outlet></router-outlet>
   </div>
 
   <div class="footer">

src/app/app.module.ts

@@ -21,15 +21,37 @@ import { MatInputModule } from '@angular/material/input';
 import { NavigationComponent } from './navigation/navigation.component';
 import { MdAddArtikelComponent } from './md-add-artikel/md-add-artikel.component';
 import { MatDialogModule } from '@angular/material/dialog';
+import { KundenDataComponent } from './kunden-data/kunden-data.component';
+import { MdAddKundeComponent } from './md-add-kunde/md-add-kunde.component';
+import { RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { LieferantenDataComponent } from './lieferanten-data/lieferanten-data.component';
+import { MdAddLieferantComponent } from './md-add-lieferant/md-add-lieferant.component';
+import { SerienNummerDataComponent } from './serien-nummer-data/serien-nummer-data.component';
 
 
+const appRoutes: Routes = [
+  { path: 'artikel', component: ArtikelDataComponent },
+  { path: 'kunde', component: KundenDataComponent },
+  { path: 'lieferant', component: LieferantenDataComponent },
+  { path: 'serial', component: SerienNummerDataComponent },
+  { path: '', redirectTo: '/artikel', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
+]
+
 @NgModule({
   declarations: [
     AppComponent,
     ServerDataComponent,
     ArtikelDataComponent,
     NavigationComponent,
-    MdAddArtikelComponent
+    MdAddArtikelComponent,
+    KundenDataComponent,
+    MdAddKundeComponent,
+    PageNotFoundComponent,
+    LieferantenDataComponent,
+    MdAddLieferantComponent,
+    SerienNummerDataComponent
   ],
   imports: [
     BrowserModule,
@@ -46,7 +68,8 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatInputModule,
     MatMenuModule,
     MatListModule,
-    MatDialogModule
+    MatDialogModule,
+    RouterModule.forRoot(appRoutes)
     
   ],
   providers: [],

src/app/kunden-data/kunden-data.component.html

@@ -0,0 +1,47 @@
+<h2>Kundenpflege</h2>
+<div class="tabelle">
+      <mat-form-field class="tabelle">
+        <input matInput (keyup)="applyFilter($event)" placeholder="Suche">
+    </mat-form-field>
+    <div>
+      <button mat-icon-button (click)="addKunde()" class="mb"><mat-icon>add_circle</mat-icon></button>
+    </div>
+    <table #table mat-table  [dataSource]="dataSource" matSort class="tabelle">
+      
+      <ng-container matColumnDef="update">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button (click)="updateKunde(row.id)" class="mb"><mat-icon>change_circle</mat-icon></button></td>
+      </ng-container>
+      
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button (click)="deleteKunde(row.id)" class="mb"><mat-icon>remove_circle</mat-icon></button></td>
+      </ng-container>
+
+       <ng-container matColumnDef="id">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header>ID</th>
+        <td mat-cell *matCellDef="let row">{{row.id}}</td>
+      </ng-container>
+    
+      <!-- Name Column -->
+      <ng-container matColumnDef="kdNrExt">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>externe Kundennummer</th>
+        <td mat-cell *matCellDef="let row">{{row.kdNrExt}}</td>
+      </ng-container>
+    
+      
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let row">{{row.name}}</td>
+      </ng-container>
+    
+      
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="tabelle"
+               [pageSizeOptions]="pageSizeOptions"
+               showFirstLastButtons>
+</mat-paginator>
+    
+</div>    

src/app/kunden-data/kunden-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KundenDataComponent } from './kunden-data.component';
+
+describe('KundenDataComponent', () => {
+  let component: KundenDataComponent;
+  let fixture: ComponentFixture<KundenDataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KundenDataComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KundenDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/kunden-data/kunden-data.component.ts

@@ -0,0 +1,174 @@
+import { Component, AfterViewInit, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { DbXchangeService } from '../shared/db-xchange.service'
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatInput } from '@angular/material/input';
+import { MatFormField } from '@angular/material/form-field';
+import { MatDialog } from '@angular/material/dialog';
+
+import { MdAddKundeComponent } from '../md-add-kunde/md-add-kunde.component';
+
+
+export interface Kunde {
+  id: number;
+  kdNrExt: number;
+  name: string;
+}
+
+
+@Component({
+  selector: 'app-kunden-data',
+  templateUrl: './kunden-data.component.html',
+  styleUrls: ['./kunden-data.component.css']
+})
+export class KundenDataComponent implements AfterViewInit {
+
+  dataSource!: MatTableDataSource<Kunde>;
+  data: Kunde[] = [{id:0,kdNrExt:0, name:''}];
+  res: any;
+  selection: SelectionModel<Kunde>;
+  pageSizeOptions: number[] = [5, 10, 20];
+  kunde: Kunde = {id:0,kdNrExt:0, name:''};
+  
+
+  @ViewChild(MatSort)
+  sort!: MatSort;
+  @ViewChild(MatPaginator, { static: true })
+  paginator!: MatPaginator;
+  @Output() sendEvent = new EventEmitter<string>();
+
+  displayedColumns = ['update', 'delete', 'id', 'kdNrExt', 'name'];
+
+  constructor(private dbx: DbXchangeService, public mdAK: MatDialog, private changeDetector: ChangeDetectorRef) { 
+    const initialSelection: Kunde[] | undefined = [] ;
+    const allowMultiSelect = false;
+    this.selection = new SelectionModel<Kunde>(allowMultiSelect, initialSelection);
+   
+  }
+
+  ngAfterViewInit(): void {
+    this.paginator.pageSize = 10;
+    this.refresh();
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    filterValue.trim().toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
+
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected == numRows;
+  }
+
+  transform( res: any) {
+    var tfd: Kunde[] = [{id:0,kdNrExt:0, name:''}];
+    let i = 0;
+    
+    for(let blubb of res) {
+      tfd[i].id = blubb.id;
+      tfd[i].kdNrExt = blubb.artNrExt;
+      tfd[i].name = blubb.bezeichnung;
+      i++;
+    }
+    return tfd;
+  }
+
+  refresh() {
+    this.data = [{id:0,kdNrExt:0, name:''}];
+    this.dbx.getAllKunden()
+    .subscribe(result => {
+      this.res = result;
+      //this.data = this.transform(this.res);
+      this.dataSource = new MatTableDataSource(this.res);
+      this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.changeDetector.detectChanges();
+    },
+    error => console.log(error));
+  }
+
+  addKunde() {
+
+    let res: any;
+    this.kunde = {id:0,kdNrExt:0, name:''};
+    const dialogRef = this.mdAK.open(MdAddKundeComponent, {
+      width: '650px', data: this.kunde
+    });
+    dialogRef.afterClosed().
+      subscribe(result => { 
+        res = result;
+        res.kdNrExt = Number (res.kdNrExt)
+        this.kunde = res; 
+        console.log('nach dem Dialog', this.kunde);
+        if (this.kunde) {
+         
+          this.dbx.addKunde(this.kunde)
+          .subscribe(result2 => {
+            res = result2;
+            if( res ) {
+              console.log('hat funktioniert', res)
+              confirm("Kunde mit der ID " + res.id.toString() + " wurde angelegt");
+              this.refresh();
+            }
+            else {
+              console.log('hat nicht funktioniert');
+            }
+          
+          } );
+      }
+        this.refresh();       
+      });
+  }
+
+  updateKunde(id: number) {
+    let res: any;
+    this.kunde = {id:0,kdNrExt:0, name:''};
+    this.dbx.getKunde(id)
+      .subscribe(result => {
+        res = result;
+        this.kunde.id = res.id;
+        this.kunde.kdNrExt = res.kdNrExt;
+        this.kunde.name = res.name;
+        const dialogRef = this.mdAK.open(MdAddKundeComponent, { width: '650px', data: this.kunde
+      });
+        dialogRef.afterClosed()
+          .subscribe( resu => {
+            this.kunde = resu;
+            if(this.kunde) {
+              this.dbx.updateKunde(this.kunde)
+                .subscribe( result2 => {
+                  if (result2 ) {
+                    confirm("Kunde mit der ID " + this.kunde.id + " upgedated");
+                    this.refresh();
+                  }}); 
+          }},
+          error => console.log(error));
+          this.refresh();
+    },
+    error => console.log(error));
+  }
+
+  deleteKunde(id: number) {
+    if(confirm("Kunde mit der ID " + id.toString() + " wirklich löschen?")) {
+      this.dbx.deleteKunde(id)
+        .subscribe(result => {
+          
+          this.refresh();
+        },
+        error => console.log(error));
+    }
+  }
+
+
+}

src/app/lieferanten-data/lieferanten-data.component.html

@@ -0,0 +1,47 @@
+<h2>Lieferantenpflege</h2>
+<div class="tabelle">
+      <mat-form-field class="tabelle">
+        <input matInput (keyup)="applyFilter($event)" placeholder="Suche">
+    </mat-form-field>
+    <div>
+      <button mat-icon-button (click)="addLieferant()" class="mb"><mat-icon>add_circle</mat-icon></button>
+    </div>
+    <table #table mat-table  [dataSource]="dataSource" matSort class="tabelle">
+      
+      <ng-container matColumnDef="update">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button (click)="updateLieferant(row.id)" class="mb"><mat-icon>change_circle</mat-icon></button></td>
+      </ng-container>
+      
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button (click)="deleteLieferant(row.id)" class="mb"><mat-icon>remove_circle</mat-icon></button></td>
+      </ng-container>
+
+       <ng-container matColumnDef="id">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header>ID</th>
+        <td mat-cell *matCellDef="let row">{{row.id}}</td>
+      </ng-container>
+    
+      <!-- Name Column -->
+      <ng-container matColumnDef="liefNrExt">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>externe Lieferantennummer</th>
+        <td mat-cell *matCellDef="let row">{{row.liefNrExt}}</td>
+      </ng-container>
+    
+      
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let row">{{row.name}}</td>
+      </ng-container>
+    
+      
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="tabelle"
+               [pageSizeOptions]="pageSizeOptions"
+               showFirstLastButtons>
+</mat-paginator>
+    
+</div>    

src/app/lieferanten-data/lieferanten-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LieferantenDataComponent } from './lieferanten-data.component';
+
+describe('LieferantenDataComponent', () => {
+  let component: LieferantenDataComponent;
+  let fixture: ComponentFixture<LieferantenDataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LieferantenDataComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LieferantenDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/lieferanten-data/lieferanten-data.component.ts

@@ -0,0 +1,172 @@
+import { Component, AfterViewInit, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { DbXchangeService } from '../shared/db-xchange.service'
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatInput } from '@angular/material/input';
+import { MatFormField } from '@angular/material/form-field';
+import { MatDialog } from '@angular/material/dialog';
+
+import { MdAddLieferantComponent } from '../md-add-lieferant/md-add-lieferant.component';
+
+
+export interface Lieferant {
+  id: number;
+  liefNrExt: number;
+  name: string;
+}
+
+@Component({
+  selector: 'app-lieferanten-data',
+  templateUrl: './lieferanten-data.component.html',
+  styleUrls: ['./lieferanten-data.component.css']
+})
+export class LieferantenDataComponent implements AfterViewInit {
+
+  dataSource!: MatTableDataSource<Lieferant>;
+  data: Lieferant[] = [{id:0,liefNrExt:0, name:''}];
+  res: any;
+  selection: SelectionModel<Lieferant>;
+  pageSizeOptions: number[] = [5, 10, 20];
+  liefer: Lieferant = {id:0,liefNrExt:0, name:''};
+  
+
+  @ViewChild(MatSort)
+  sort!: MatSort;
+  @ViewChild(MatPaginator, { static: true })
+  paginator!: MatPaginator;
+  @Output() sendEvent = new EventEmitter<string>();
+
+  displayedColumns = ['update', 'delete', 'id', 'liefNrExt', 'name'];
+
+  constructor(private dbx: DbXchangeService, public mdAL: MatDialog, private changeDetector: ChangeDetectorRef) { 
+    const initialSelection: Lieferant[] | undefined = [] ;
+    const allowMultiSelect = false;
+    this.selection = new SelectionModel<Lieferant>(allowMultiSelect, initialSelection);
+   
+  }
+
+  ngAfterViewInit(): void {
+    this.paginator.pageSize = 10;
+    this.refresh();
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    filterValue.trim().toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
+
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected == numRows;
+  }
+
+  transform( res: any) {
+    var tfd: Lieferant[] = [{id:0,liefNrExt:0, name:''}];
+    let i = 0;
+    
+    for(let blubb of res) {
+      tfd[i].id = blubb.id;
+      tfd[i].liefNrExt = blubb.liefNrExt;
+      tfd[i].name = blubb.bezeichnung;
+      i++;
+    }
+    return tfd;
+  }
+
+  refresh() {
+    this.data = [{id:0,liefNrExt:0, name:''}];
+    this.dbx.getAllLieferanten()
+    .subscribe(result => {
+      this.res = result;
+      //this.data = this.transform(this.res);
+      this.dataSource = new MatTableDataSource(this.res);
+      this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.changeDetector.detectChanges();
+    },
+    error => console.log(error));
+  }
+
+  addLieferant() {
+
+    let res: any;
+    this.liefer = {id:0,liefNrExt:0, name:''};
+    const dialogRef = this.mdAL.open(MdAddLieferantComponent, {
+      width: '650px', data: this.liefer
+    });
+    dialogRef.afterClosed().
+      subscribe(result => { 
+        res = result;
+        res.liefNrExt = Number (res.liefNrExt)
+        this.liefer = res; 
+        console.log('nach dem Dialog', this.liefer);
+        if (this.liefer) {
+         
+          this.dbx.addLieferant(this.liefer)
+          .subscribe(result2 => {
+            res = result2;
+            if( res ) {
+              console.log('hat funktioniert', res)
+              confirm("Lieferant mit der ID " + res.id.toString() + " wurde angelegt");
+              this.refresh();
+            }
+            else {
+              console.log('hat nicht funktioniert');
+            }
+          
+          } );
+      }
+        this.refresh();       
+      });
+  }
+
+  updateLieferant(id: number) {
+    let res: any;
+    this.liefer = {id:0,liefNrExt:0, name:''};
+    this.dbx.getLieferant(id)
+      .subscribe(result => {
+        res = result;
+        this.liefer.id = res.id;
+        this.liefer.liefNrExt = res.liefNrExt;
+        this.liefer.name = res.name;
+        const dialogRef = this.mdAL.open(MdAddLieferantComponent, { width: '650px', data: this.liefer
+      });
+        dialogRef.afterClosed()
+          .subscribe( resu => {
+            this.liefer = resu;
+            if(this.liefer) {
+              this.dbx.updateLieferant(this.liefer)
+                .subscribe( result2 => {
+                  if (result2 ) {
+                    confirm("Lieferant mit der ID " + this.liefer.id + " upgedated");
+                    this.refresh();
+                  }}); 
+          }},
+          error => console.log(error));
+          this.refresh();
+    },
+    error => console.log(error));
+  }
+
+  deleteLieferant(id: number) {
+    if(confirm("Lieferant mit der ID " + id.toString() + " wirklich löschen?")) {
+      this.dbx.deleteLieferant(id)
+        .subscribe(result => {
+          
+          this.refresh();
+        },
+        error => console.log(error));
+    }
+  }
+
+}

src/app/md-add-kunde/md-add-kunde.component.html

@@ -0,0 +1,26 @@
+<h1 mat-dialog-title>
+    Neuen Kunden eingeben/bearbeiten
+</h1>
+<mat-divider></mat-divider>
+<div mat-dialog-content>
+    <div>
+        <mat-form-field>
+            <mat-label>externe Kundennummer</mat-label>
+            <input matInput [(ngModel)]="data.kdNrExt" placeholder="externe Kundennummer">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="data.name" placeholder="Name">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+    </div>
+
+</div>
+<mat-divider></mat-divider>
+<div mat-dialog-actions>
+    <button mat-raised-button #savebutton [mat-dialog-close]="data" cdkFocusInitial> Speichern </button>
+    <button mat-raised-button #abortbutton (click)="onNoClick()"> Abbruch </button>
+</div>

src/app/md-add-kunde/md-add-kunde.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MdAddKundeComponent } from './md-add-kunde.component';
+
+describe('MdAddKundeComponent', () => {
+  let component: MdAddKundeComponent;
+  let fixture: ComponentFixture<MdAddKundeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MdAddKundeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MdAddKundeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/md-add-kunde/md-add-kunde.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { Kunde } from '../kunden-data/kunden-data.component';
+
+
+@Component({
+  selector: 'app-md-add-kunde',
+  templateUrl: './md-add-kunde.component.html',
+  styleUrls: ['./md-add-kunde.component.css']
+})
+export class MdAddKundeComponent {
+
+  constructor(public dialogRef: MatDialogRef<MdAddKundeComponent>, @Inject(MAT_DIALOG_DATA) public data: Kunde) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+
+}

src/app/md-add-lieferant/md-add-lieferant.component.html

@@ -0,0 +1,26 @@
+<h1 mat-dialog-title>
+    Neuen Lieferanten eingeben/bearbeiten
+</h1>
+<mat-divider></mat-divider>
+<div mat-dialog-content>
+    <div>
+        <mat-form-field>
+            <mat-label>externe Lieferantennummer</mat-label>
+            <input matInput [(ngModel)]="data.liefNrExt" placeholder="externe Lieferantennummer">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="data.name" placeholder="Name">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+    </div>
+
+</div>
+<mat-divider></mat-divider>
+<div mat-dialog-actions>
+    <button mat-raised-button #savebutton [mat-dialog-close]="data" cdkFocusInitial> Speichern </button>
+    <button mat-raised-button #abortbutton (click)="onNoClick()"> Abbruch </button>
+</div>

src/app/md-add-lieferant/md-add-lieferant.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MdAddLieferantComponent } from './md-add-lieferant.component';
+
+describe('MdAddLieferantComponent', () => {
+  let component: MdAddLieferantComponent;
+  let fixture: ComponentFixture<MdAddLieferantComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MdAddLieferantComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MdAddLieferantComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/md-add-lieferant/md-add-lieferant.component.ts

@@ -0,0 +1,19 @@
+import { Component, Inject } from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { Lieferant } from '../lieferanten-data/lieferanten-data.component';
+
+@Component({
+  selector: 'app-md-add-lieferant',
+  templateUrl: './md-add-lieferant.component.html',
+  styleUrls: ['./md-add-lieferant.component.css']
+})
+export class MdAddLieferantComponent  {
+
+  constructor(public dialogRef: MatDialogRef<MdAddLieferantComponent>, @Inject(MAT_DIALOG_DATA) public data: Lieferant) { }
+
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/app/navigation/navigation.component.html

@@ -5,10 +5,10 @@
   <a mat-list-item routerLink="/kunde">
     Kunde
   </a>
-  <a mat-list-item routerLink="/artikel">
+  <a mat-list-item routerLink="/lieferant">
     Lieferant
   </a>
-  <a mat-list-item routerLink="/artikel">
+  <a mat-list-item routerLink="/serial">
     Seriennummern
   </a>
 </mat-nav-list>

src/app/page-not-found/page-not-found.component.html

@@ -0,0 +1 @@
+<h1>Page Not Found!</h1>

src/app/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/serien-nummer-data/serien-nummer-data.component.html

@@ -0,0 +1,77 @@
+<h2>Seriennummernpflege</h2>
+<div class="tabelle">
+      <mat-form-field class="tabelle">
+        <input matInput (keyup)="applyFilter($event)" placeholder="Suche">
+    </mat-form-field>
+    <div>
+      <button mat-icon-button  class="mb"><mat-icon>add_circle</mat-icon></button>
+    </div>
+    <table #table mat-table  [dataSource]="dataSource" matSort class="tabelle">
+      
+      <ng-container matColumnDef="update">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button  class="mb"><mat-icon>change_circle</mat-icon></button></td>
+      </ng-container>
+      
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let row"><button mat-icon-button  class="mb"><mat-icon>remove_circle</mat-icon></button></td>
+      </ng-container>
+
+       <ng-container matColumnDef="id">
+        <th mat-header-cell  *matHeaderCellDef mat-sort-header>ID</th>
+        <td mat-cell *matCellDef="let row">{{row.id}}</td>
+      </ng-container>
+    
+      <!-- Name Column -->
+      <ng-container matColumnDef="artName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Artikelbezeichnung</th>
+        <td mat-cell *matCellDef="let row">{{row.artName}}</td>
+      </ng-container>
+    
+      
+      <ng-container matColumnDef="kdName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Kundenname</th>
+        <td mat-cell *matCellDef="let row">{{row.kdName}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="liefName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Lieferantenname</th>
+        <td mat-cell *matCellDef="let row">{{row.liefName}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="serienNr">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Seriennummer</th>
+        <td mat-cell *matCellDef="let row">{{row.serienNr}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="ekDat">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Einkaufsdatum</th>
+        <td mat-cell *matCellDef="let row">{{row.ekDat}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="vkDat">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Verkaufsdatum</th>
+        <td mat-cell *matCellDef="let row">{{row.vkDat}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="garantieBis">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Garantie bis</th>
+        <td mat-cell *matCellDef="let row">{{row.garantieBis}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="bemerkung">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Bemerkung</th>
+        <td mat-cell *matCellDef="let row">{{row.bemerkung}}</td>
+      </ng-container>
+    
+      
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="tabelle"
+               [pageSizeOptions]="pageSizeOptions"
+               showFirstLastButtons>
+</mat-paginator>
+    
+</div>    

src/app/serien-nummer-data/serien-nummer-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SerienNummerDataComponent } from './serien-nummer-data.component';
+
+describe('SerienNummerDataComponent', () => {
+  let component: SerienNummerDataComponent;
+  let fixture: ComponentFixture<SerienNummerDataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SerienNummerDataComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SerienNummerDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/serien-nummer-data/serien-nummer-data.component.ts

@@ -0,0 +1,164 @@
+import { Component, AfterViewInit, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { DbXchangeService } from '../shared/db-xchange.service'
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatInput } from '@angular/material/input';
+import { MatFormField } from '@angular/material/form-field';
+import { MatDialog } from '@angular/material/dialog';
+import { SerienNummer } from '../server-data/server-data.component';
+
+@Component({
+  selector: 'app-serien-nummer-data',
+  templateUrl: './serien-nummer-data.component.html',
+  styleUrls: ['./serien-nummer-data.component.css']
+})
+export class SerienNummerDataComponent implements AfterViewInit {
+
+  dataSource!: MatTableDataSource<SerienNummer>;
+  data: SerienNummer[] = [{id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''}];
+  res: any;
+  selection: SelectionModel<SerienNummer>;
+  pageSizeOptions: number[] = [5, 10, 20];
+  serial: SerienNummer = {id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''};
+  
+
+  @ViewChild(MatSort)
+  sort!: MatSort;
+  @ViewChild(MatPaginator, { static: true })
+  paginator!: MatPaginator;
+  @Output() sendEvent = new EventEmitter<string>();
+
+  displayedColumns = ['update', 'delete', 'id', 'artName', 'kdName', 'liefName', 'serienNr', 'ekDat', 'vkDat', 'garantieBis', 'bemerkung'];
+
+  constructor(private dbx: DbXchangeService, public mdAL: MatDialog, private changeDetector: ChangeDetectorRef) { 
+    const initialSelection: SerienNummer[] | undefined = [] ;
+    const allowMultiSelect = false;
+    this.selection = new SelectionModel<SerienNummer>(allowMultiSelect, initialSelection);
+   
+  }
+
+  ngAfterViewInit(): void {
+    this.paginator.pageSize = 10;
+    this.refresh();
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    filterValue.trim().toLowerCase();
+    this.dataSource.filter = filterValue;
+  }
+
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected == numRows;
+  }
+
+  transform( res: any) {
+    var tfd: SerienNummer[] = [{id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''}];
+    let i = 0;
+    
+    for(let blubb of res) {
+      tfd[i].id = blubb.id;
+      //tfd[i].liefNrExt = blubb.liefNrExt;
+      //tfd[i].name = blubb.bezeichnung;
+      i++;
+    }
+    return tfd;
+  }
+
+  refresh() {
+    this.data = [{id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''}];
+    this.dbx.getAllSerials()
+    .subscribe(result => {
+      this.res = result;
+      //this.data = this.transform(this.res);
+      this.dataSource = new MatTableDataSource(this.res);
+      this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.changeDetector.detectChanges();
+    },
+    error => console.log(error));
+  }
+
+  /*addLieferant() {
+
+    let res: any;
+    this.serial = {id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''};
+    const dialogRef = this.mdAL.open(MdAddLieferantComponent, {
+      width: '650px', data: this.liefer
+    });
+    dialogRef.afterClosed().
+      subscribe(result => { 
+        res = result;
+        res.liefNrExt = Number (res.liefNrExt)
+        this.liefer = res; 
+        console.log('nach dem Dialog', this.liefer);
+        if (this.liefer) {
+         
+          this.dbx.addLieferant(this.liefer)
+          .subscribe(result2 => {
+            res = result2;
+            if( res ) {
+              console.log('hat funktioniert', res)
+              confirm("Lieferant mit der ID " + res.id.toString() + " wurde angelegt");
+              this.refresh();
+            }
+            else {
+              console.log('hat nicht funktioniert');
+            }
+          
+          } );
+      }
+        this.refresh();       
+      });
+  }
+
+  updateLieferant(id: number) {
+    let res: any;
+    this.liefer = {id:0,liefNrExt:0, name:''};
+    this.dbx.getLieferant(id)
+      .subscribe(result => {
+        res = result;
+        this.liefer.id = res.id;
+        this.liefer.liefNrExt = res.liefNrExt;
+        this.liefer.name = res.name;
+        const dialogRef = this.mdAL.open(MdAddLieferantComponent, { width: '650px', data: this.liefer
+      });
+        dialogRef.afterClosed()
+          .subscribe( resu => {
+            this.liefer = resu;
+            if(this.liefer) {
+              this.dbx.updateLieferant(this.liefer)
+                .subscribe( result2 => {
+                  if (result2 ) {
+                    confirm("Lieferant mit der ID " + this.liefer.id + " upgedated");
+                    this.refresh();
+                  }}); 
+          }},
+          error => console.log(error));
+          this.refresh();
+    },
+    error => console.log(error));
+  }
+
+  deleteLieferant(id: number) {
+    if(confirm("Lieferant mit der ID " + id.toString() + " wirklich löschen?")) {
+      this.dbx.deleteLieferant(id)
+        .subscribe(result => {
+          
+          this.refresh();
+        },
+        error => console.log(error));
+    }
+  }*/
+
+}

src/app/server-data/server-data.component.ts

@@ -9,8 +9,11 @@ import { SelectionModel } from '@angular/cdk/collections';
 export interface SerienNummer {
   id: number;
   artId: number;
+  artName: string;
   kdId: number;
+  kdName: string;
   liefId: number;
+  liefName: string;
   serienNr: string;
   ekDat: string;
   vkDat: string;
@@ -29,7 +32,7 @@ export interface SerienNummer {
 })
 export class ServerDataComponent implements AfterViewInit {
   dataSource!: MatTableDataSource<SerienNummer>;
-  data: SerienNummer[] = [{id:0,artId:0,kdId:0,liefId:0,serienNr:'', ekDat:'',vkDat:'',garantieBis:'', bemerkung:''}];
+  data: SerienNummer[] = [{id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''}];
   res: any;
   selection: SelectionModel<SerienNummer>;
   pageSizeOptions: number[] = [5, 10, 20];
@@ -79,7 +82,7 @@ export class ServerDataComponent implements AfterViewInit {
   }
 
   transform( res: any) {
-    var tfd: SerienNummer[] = [{id:0,artId:0,kdId:0,liefId:0,serienNr:'', ekDat:'',vkDat:'',garantieBis:'', bemerkung:''}];
+    var tfd: SerienNummer[] = [{id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''}];
     let i = 0;
     
     for(let blubb of res) {

src/app/shared/db-xchange.service.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Artikel } from '../artikel-data/artikel-data.component';
+import { Kunde } from '../kunden-data/kunden-data.component';
+import { Lieferant } from '../lieferanten-data/lieferanten-data.component';
+import { SerienNummer } from '../server-data/server-data.component';
 
 @Injectable({
   providedIn: 'root'
@@ -17,16 +20,17 @@ export class DbXchangeService {
         'Content-Type': 'application/json'})
     }
   
+  // Artikel
 
   getAllArtikel() {
     this.Url = this.baseUrl + `artikel`;
     return this.http.get(this.Url, this.httpOptions)
   }
 
-  getAllSerials() {
+  /*getAllSerials() {
     this.Url = this.baseUrl + `artikel`;
     return this.http.get(this.Url, this.httpOptions)
-  }
+  }*/
 
   deleteArt(id: number) {
     this.Url = this.baseUrl + `artikel/${id}`;
@@ -50,4 +54,112 @@ export class DbXchangeService {
     this.Url = this.baseUrl + `artikel/${art.id}`;
     return this.http.put(this.Url, art, this.httpOptions)
   }
+
+  // Kunden
+
+  getAllKunden() {
+    this.Url = this.baseUrl + `kunden`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  /*getAllSerials() {
+    this.Url = this.baseUrl + `artikel`;
+    return this.http.get(this.Url, this.httpOptions)
+  }*/
+
+  deleteKunde(id: number) {
+    this.Url = this.baseUrl + `kunden/${id}`;
+    return this.http.delete(this.Url, this.httpOptions)
+  }
+
+  addKunde(kunde: Kunde) {
+    let body: any;
+    console.log("hier bin ich mit folgendem Kunden: ", kunde)
+    this.Url = this.baseUrl + `kunden`;
+    body = kunde;
+    
+    return this.http.post(this.Url, body, this.httpOptions);
+  }
+
+  getKunde(id: number) {
+    this.Url = this.baseUrl + `kunden/${id}`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  updateKunde(kunde: Kunde) {
+    this.Url = this.baseUrl + `kunden/${kunde.id}`;
+    return this.http.put(this.Url, kunde, this.httpOptions)
+  }
+
+  // Lieferanten
+
+  getAllLieferanten() {
+    this.Url = this.baseUrl + `lieferanten`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  /*getAllSerials() {
+    this.Url = this.baseUrl + `artikel`;
+    return this.http.get(this.Url, this.httpOptions)
+  }*/
+
+  deleteLieferant(id: number) {
+    this.Url = this.baseUrl + `lieferanten/${id}`;
+    return this.http.delete(this.Url, this.httpOptions)
+  }
+
+  addLieferant(liefer: Lieferant) {
+    let body: any;
+    console.log("hier bin ich mit folgendem Kunden: ", liefer)
+    this.Url = this.baseUrl + `lieferanten`;
+    body = liefer;
+    
+    return this.http.post(this.Url, body, this.httpOptions);
+  }
+
+  getLieferant(id: number) {
+    this.Url = this.baseUrl + `lieferanten/${id}`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  updateLieferant(liefer: Lieferant) {
+    this.Url = this.baseUrl + `lieferanten/${liefer.id}`;
+    return this.http.put(this.Url, liefer, this.httpOptions)
+  }
+
+  // Seriennummern
+
+  getAllSerials() {
+    this.Url = this.baseUrl + `serial`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  /*getAllSerials() {
+    this.Url = this.baseUrl + `artikel`;
+    return this.http.get(this.Url, this.httpOptions)
+  }*/
+
+  deleteSerial(id: number) {
+    this.Url = this.baseUrl + `serial/${id}`;
+    return this.http.delete(this.Url, this.httpOptions)
+  }
+
+  addSerial(serial: SerienNummer) {
+    let body: any;
+    console.log("hier bin ich mit folgender Seriennummer: ", serial)
+    this.Url = this.baseUrl + `serial`;
+    body = serial;
+    
+    return this.http.post(this.Url, body, this.httpOptions);
+  }
+
+  getSerial(id: number) {
+    this.Url = this.baseUrl + `serial/${id}`;
+    return this.http.get(this.Url, this.httpOptions)
+  }
+
+  updateSerial(serial: SerienNummer) {
+    this.Url = this.baseUrl + `serial/${serial.id}`;
+    return this.http.put(this.Url, serial, this.httpOptions)
+  }
 }