Beseitigung des Webpacket bugs, Test des Select

angular.json

@@ -102,6 +102,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -16,17 +16,18 @@
     "@angular/compiler": "~12.0.1",
     "@angular/core": "~12.0.1",
     "@angular/forms": "~12.0.1",
-    "@angular/material": "^12.0.1",
+    "@angular/material": "^12.2.3",
     "@angular/platform-browser": "~12.0.1",
     "@angular/platform-browser-dynamic": "~12.0.1",
     "@angular/router": "~12.0.1",
+    "angular": "^1.8.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.0.1",
-    "@angular/cli": "~12.0.1",
+    "@angular/cli": "^12.0.5",
     "@angular/compiler-cli": "~12.0.1",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
@@ -36,6 +37,8 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "sass": "^1.38.2",
+    "sass-loader": "^12.1.0",
     "typescript": "~4.2.3"
   }
 }

src/app/app.module.ts

@@ -28,6 +28,8 @@ 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';
+import { MdAddSerialComponent } from './md-add-serial/md-add-serial.component';
+import { MatSelectModule } from '@angular/material/select';
 
 
 const appRoutes: Routes = [
@@ -51,7 +53,8 @@ const appRoutes: Routes = [
     PageNotFoundComponent,
     LieferantenDataComponent,
     MdAddLieferantComponent,
-    SerienNummerDataComponent
+    SerienNummerDataComponent,
+    MdAddSerialComponent
   ],
   imports: [
     BrowserModule,
@@ -69,7 +72,8 @@ const appRoutes: Routes = [
     MatMenuModule,
     MatListModule,
     MatDialogModule,
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(appRoutes),
+    MatSelectModule
     
   ],
   providers: [],

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

@@ -0,0 +1,39 @@
+<h1 mat-dialog-title>
+    Neue Seriennummer 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.liefId" placeholder="externe Lieferantennummer">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+        <mat-form-field appearance="fill">
+            <mat-label>Lieferant</mat-label>
+            <mat-select>
+                <mat-option *ngFor="let lieferant of lieferanten" [value]="lieferant.name">
+                    {{lieferant.name}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>externe Lieferantennummer</mat-label>
+            <input matInput [(ngModel)]="data.id" placeholder="externe Lieferantennummer">
+            <mat-hint></mat-hint>
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="data.liefName" 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-serial/md-add-serial.component.spec.ts

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

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

@@ -0,0 +1,28 @@
+import { Component, Inject } from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { Lieferant } from '../lieferanten-data/lieferanten-data.component';
+import { SerienNummer } from '../server-data/server-data.component';
+import { DbXchangeService } from '../shared/db-xchange.service';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'app-md-add-serial',
+  templateUrl: './md-add-serial.component.html',
+  styleUrls: ['./md-add-serial.component.css']
+})
+export class MdAddSerialComponent  {
+  res: any;
+  lieferanten: Lieferant[] = [{id:0,liefNrExt:0, name:''}];
+
+  constructor(private dbx: DbXchangeService, public dialogRef: MatDialogRef<MdAddSerialComponent>, @Inject(MAT_DIALOG_DATA) public data: SerienNummer ) {
+    this.dbx.getAllLieferanten()
+      .subscribe( result => { this.res = result; this.lieferanten = this.res; }, error => console.log(error) )
+   }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+
+
+}

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

@@ -4,7 +4,7 @@
         <input matInput (keyup)="applyFilter($event)" placeholder="Suche">
     </mat-form-field>
     <div>
-      <button mat-icon-button  class="mb"><mat-icon>add_circle</mat-icon></button>
+      <button mat-icon-button (click)="addSerienNummer()" class="mb"><mat-icon>add_circle</mat-icon></button>
     </div>
     <table #table mat-table  [dataSource]="dataSource" matSort class="tabelle">
       

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

@@ -8,6 +8,9 @@ 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';
+import { Lieferant } from '../lieferanten-data/lieferanten-data.component'
+
+import { MdAddSerialComponent } from '../md-add-serial/md-add-serial.component';
 
 @Component({
   selector: 'app-serien-nummer-data',
@@ -18,6 +21,7 @@ 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:''}];
+  lieferanten: Lieferant[] = [{id:0,liefNrExt:0, name:''}];
   res: any;
   selection: SelectionModel<SerienNummer>;
   pageSizeOptions: number[] = [5, 10, 20];
@@ -32,7 +36,7 @@ export class SerienNummerDataComponent implements AfterViewInit {
 
   displayedColumns = ['update', 'delete', 'id', 'artName', 'kdName', 'liefName', 'serienNr', 'ekDat', 'vkDat', 'garantieBis', 'bemerkung'];
 
-  constructor(private dbx: DbXchangeService, public mdAL: MatDialog, private changeDetector: ChangeDetectorRef) { 
+  constructor(private dbx: DbXchangeService, public mdAS: MatDialog, private changeDetector: ChangeDetectorRef) { 
     const initialSelection: SerienNummer[] | undefined = [] ;
     const allowMultiSelect = false;
     this.selection = new SelectionModel<SerienNummer>(allowMultiSelect, initialSelection);
@@ -89,22 +93,23 @@ export class SerienNummerDataComponent implements AfterViewInit {
     error => console.log(error));
   }
 
-  /*addLieferant() {
+  addSerienNummer() {
 
     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
+    this.lieferanten = [{id:0,liefNrExt:0, name:''}];
+    const dialogRef = this.mdAS.open(MdAddSerialComponent, {
+      width: '650px', data: this.serial
     });
     dialogRef.afterClosed().
       subscribe(result => { 
         res = result;
-        res.liefNrExt = Number (res.liefNrExt)
-        this.liefer = res; 
-        console.log('nach dem Dialog', this.liefer);
-        if (this.liefer) {
+        res.liefId = Number (res.liefId)
+        this.serial = res; 
+        console.log('nach dem Dialog', this.serial);
+        if (this.serial) {
          
-          this.dbx.addLieferant(this.liefer)
+          this.dbx.addSerial(this.serial)
           .subscribe(result2 => {
             res = result2;
             if( res ) {
@@ -122,25 +127,34 @@ export class SerienNummerDataComponent implements AfterViewInit {
       });
   }
 
-  updateLieferant(id: number) {
+  updateSerienNummer(id: number) {
     let res: any;
-    this.liefer = {id:0,liefNrExt:0, name:''};
-    this.dbx.getLieferant(id)
+    this.serial = {id:0, artId:0, artName:'', kdId:0, kdName:'', liefId:0, liefName:'', serienNr:'', ekDat:'', vkDat:'', garantieBis:'', bemerkung:''};
+    this.dbx.getSerial(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
+        this.serial.id = res.id;
+        this.serial.artId = res.artId;
+        this.serial.artName = res.artName;
+        this.serial.kdId = res.kdId;
+        this.serial.kdName = res.kdName;
+        this.serial.liefId = res.liefId;
+        this.serial.liefName = res.liefName;
+        this.serial.serienNr = res.serienNr;
+        this.serial.ekDat = res.ekDat;
+        this.serial.vkDat = res.vkDat;
+        this.serial.garantieBis = res.garantieBis;
+        this.serial.bemerkung = res.bemerkung;
+        const dialogRef = this.mdAS.open(MdAddSerialComponent, { width: '650px', data: this.serial
       });
         dialogRef.afterClosed()
           .subscribe( resu => {
-            this.liefer = resu;
-            if(this.liefer) {
-              this.dbx.updateLieferant(this.liefer)
+            this.serial = resu;
+            if(this.serial) {
+              this.dbx.updateSerial(this.serial)
                 .subscribe( result2 => {
                   if (result2 ) {
-                    confirm("Lieferant mit der ID " + this.liefer.id + " upgedated");
+                    confirm("Seriennummer mit der ID " + this.serial.id + " upgedated");
                     this.refresh();
                   }}); 
           }},
@@ -150,15 +164,15 @@ export class SerienNummerDataComponent implements AfterViewInit {
     error => console.log(error));
   }
 
-  deleteLieferant(id: number) {
-    if(confirm("Lieferant mit der ID " + id.toString() + " wirklich löschen?")) {
-      this.dbx.deleteLieferant(id)
+  deleteSerienNummer(id: number) {
+    if(confirm("Seriennummer mit der ID " + id.toString() + " wirklich löschen?")) {
+      this.dbx.deleteSerial(id)
         .subscribe(result => {
           
           this.refresh();
         },
         error => console.log(error));
     }
-  }*/
+  }
 
 }

src/styles.css

@@ -19,3 +19,6 @@ html, body { height: 100%; }
 
 
 
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }