28 changed files with 752 additions and 15 deletions
@ -0,0 +1,47 @@
|
||||
|
||||
<div class="tabelle"> |
||||
<mat-form-field class="tabelle"> |
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Suche"> |
||||
</mat-form-field> |
||||
<div> |
||||
<button mat-icon-button (click)="addArtikel()" 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)="updateArtikel(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)="deleteArtikel(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="artNrExt"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>externe Artikelnummer</th> |
||||
<td mat-cell *matCellDef="let row">{{row.artNrExt}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="bezeichnung"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Bezeichnung</th> |
||||
<td mat-cell *matCellDef="let row">{{row.bezeichnung}}</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> |
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ArtikelDataComponent } from './artikel-data.component'; |
||||
|
||||
describe('ArtikelDataComponent', () => { |
||||
let component: ArtikelDataComponent; |
||||
let fixture: ComponentFixture<ArtikelDataComponent>; |
||||
|
||||
beforeEach(async () => { |
||||
await TestBed.configureTestingModule({ |
||||
declarations: [ ArtikelDataComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ArtikelDataComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,161 @@
|
||||
import { Component, AfterViewInit, ViewChild, Output, EventEmitter } 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 { MdAddArtikelComponent } from '../md-add-artikel/md-add-artikel.component'; |
||||
import { fromEventPattern } from 'rxjs'; |
||||
|
||||
|
||||
export interface Artikel { |
||||
id: number; |
||||
artNrExt: number; |
||||
bezeichnung: string; |
||||
} |
||||
|
||||
@Component({ |
||||
selector: 'app-artikel-data', |
||||
templateUrl: './artikel-data.component.html', |
||||
styleUrls: ['./artikel-data.component.css'] |
||||
}) |
||||
export class ArtikelDataComponent implements AfterViewInit { |
||||
|
||||
dataSource!: MatTableDataSource<Artikel>; |
||||
data: Artikel[] = [{id:0,artNrExt:0, bezeichnung:''}]; |
||||
res: any; |
||||
selection: SelectionModel<Artikel>; |
||||
pageSizeOptions: number[] = [5, 10, 20]; |
||||
art: Artikel = {id:0,artNrExt:0, bezeichnung:''}; |
||||
|
||||
|
||||
@ViewChild(MatSort) |
||||
sort!: MatSort; |
||||
@ViewChild(MatPaginator, { static: true }) |
||||
paginator!: MatPaginator; |
||||
@Output() sendEvent = new EventEmitter<string>(); |
||||
|
||||
displayedColumns = ['update', 'delete', 'id', 'artNrExt', 'bezeichnung']; |
||||
constructor(private dbx: DbXchangeService, public mdAdd: MatDialog) {
|
||||
const initialSelection: Artikel[] | undefined = [] ; |
||||
const allowMultiSelect = false; |
||||
this.selection = new SelectionModel<Artikel>(allowMultiSelect, initialSelection); |
||||
|
||||
} |
||||
|
||||
ngAfterViewInit(): void { |
||||
this.dbx.getAllArtikel() |
||||
.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; |
||||
}, |
||||
error => console.log(error)); |
||||
} |
||||
|
||||
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: Artikel[] = [{id:0,artNrExt:0, bezeichnung:''}]; |
||||
let i = 0; |
||||
|
||||
for(let blubb of res) { |
||||
tfd[i].id = blubb.id; |
||||
tfd[i].artNrExt = blubb.artNrExt; |
||||
tfd[i].bezeichnung = blubb.bezeichnung; |
||||
i++; |
||||
} |
||||
return tfd; |
||||
} |
||||
|
||||
addArtikel() { |
||||
|
||||
let res: any; |
||||
|
||||
const dialogRef = this.mdAdd.open(MdAddArtikelComponent, { |
||||
width: '650px', data: this.art |
||||
}); |
||||
dialogRef.afterClosed(). |
||||
subscribe(result => {
|
||||
this.art = result;
|
||||
console.log('nach dem Dialog', this.art); |
||||
this.dbx.addArtikel(this.art) |
||||
.subscribe(result2 => { |
||||
res = result2; |
||||
if( res ) { |
||||
console.log('hat funktioniert', res) |
||||
confirm("Artikel mit der ID " + res.id.toString() + " wurde angelegt"); |
||||
} |
||||
else { |
||||
console.log('hat nicht funktioniert'); |
||||
} |
||||
} ); |
||||
|
||||
}); |
||||
} |
||||
|
||||
updateArtikel(id: number) { |
||||
let res: any; |
||||
|
||||
this.dbx.getArtikel(id) |
||||
.subscribe(result => { |
||||
res = result; |
||||
this.art.id = res.id; |
||||
this.art.artNrExt = res.artNrExt; |
||||
this.art.bezeichnung = res.bezeichnung; |
||||
const dialogRef = this.mdAdd.open(MdAddArtikelComponent, { width: '650px', data: this.art |
||||
}); |
||||
dialogRef.afterClosed() |
||||
.subscribe( resu => { |
||||
this.art = resu; |
||||
this.dbx.updateArtikel(this.art) |
||||
.subscribe( result2 => { |
||||
if (result2 ) { |
||||
confirm("Artikel mit der ID " + this.art.id + " upgedated"); |
||||
}
|
||||
|
||||
}, |
||||
error => console.log(error)); |
||||
}) |
||||
|
||||
}, |
||||
error => console.log(error)); |
||||
|
||||
|
||||
} |
||||
|
||||
deleteArtikel(id: number) { |
||||
if(confirm("Artikel mit der ID " + id.toString() + " wirklich löschen?")) { |
||||
this.dbx.deleteArt(id) |
||||
.subscribe(result => { |
||||
if (result) { |
||||
confirm(result.toString()) |
||||
}
|
||||
}, |
||||
error => console.log(error)); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
<h1 mat-dialog-title> |
||||
Neuen Artikel eingeben |
||||
</h1> |
||||
<mat-divider></mat-divider> |
||||
<div mat-dialog-content> |
||||
<div> |
||||
<mat-form-field> |
||||
<mat-label>externe Artikelnummer</mat-label> |
||||
<input matInput [(ngModel)]="data.artNrExt" placeholder="externe Artikelnummer"> |
||||
<mat-hint></mat-hint> |
||||
</mat-form-field> |
||||
</div> |
||||
<div> |
||||
<mat-form-field> |
||||
<mat-label>Bezeichnung</mat-label> |
||||
<input matInput [(ngModel)]="data.bezeichnung" placeholder="Bezeichnung"> |
||||
<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> |
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { MdAddArtikelComponent } from './md-add-artikel.component'; |
||||
|
||||
describe('MdAddArtikelComponent', () => { |
||||
let component: MdAddArtikelComponent; |
||||
let fixture: ComponentFixture<MdAddArtikelComponent>; |
||||
|
||||
beforeEach(async () => { |
||||
await TestBed.configureTestingModule({ |
||||
declarations: [ MdAddArtikelComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(MdAddArtikelComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,18 @@
|
||||
import { Component, Inject } from '@angular/core'; |
||||
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import { Artikel } from '../artikel-data/artikel-data.component'; |
||||
|
||||
@Component({ |
||||
selector: 'app-md-add-artikel', |
||||
templateUrl: './md-add-artikel.component.html', |
||||
styleUrls: ['./md-add-artikel.component.css'] |
||||
}) |
||||
export class MdAddArtikelComponent { |
||||
|
||||
constructor(public dialogRef: MatDialogRef<MdAddArtikelComponent>, @Inject(MAT_DIALOG_DATA) public data: Artikel) { } |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
<mat-nav-list class="list-horizontal"> |
||||
<a mat-list-item routerLink="/artikel"> |
||||
Artikel |
||||
</a> |
||||
<a mat-list-item routerLink="/kunde"> |
||||
Kunde |
||||
</a> |
||||
<a mat-list-item routerLink="/artikel"> |
||||
Lieferant |
||||
</a> |
||||
<a mat-list-item routerLink="/artikel"> |
||||
Seriennummern |
||||
</a> |
||||
</mat-nav-list> |
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { NavigationComponent } from './navigation.component'; |
||||
|
||||
describe('NavigationComponent', () => { |
||||
let component: NavigationComponent; |
||||
let fixture: ComponentFixture<NavigationComponent>; |
||||
|
||||
beforeEach(async () => { |
||||
await TestBed.configureTestingModule({ |
||||
declarations: [ NavigationComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(NavigationComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-navigation', |
||||
templateUrl: './navigation.component.html', |
||||
styleUrls: ['./navigation.component.css'] |
||||
}) |
||||
export class NavigationComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -1 +1,59 @@
|
||||
<p>server-data works!</p> |
||||
<div> |
||||
hier kommen wir hin |
||||
</div> |
||||
|
||||
<div class="tabelle"> |
||||
|
||||
<table #table mat-table [dataSource]="dataSource" matSort class="tabelle"> |
||||
|
||||
<ng-container matColumnDef="artId"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Artikelnummer</th> |
||||
<td mat-cell *matCellDef="let row">{{row.id}}</td> |
||||
</ng-container> |
||||
|
||||
<!-- Name Column --> |
||||
<ng-container matColumnDef="kdId"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Kundennummer</th> |
||||
<td mat-cell *matCellDef="let row">{{row.kdId}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="liefId"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Lieferantennummer</th> |
||||
<td mat-cell *matCellDef="let row">{{row.liefId}}</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>EK-Datum</th> |
||||
<td mat-cell *matCellDef="let row">{{row.ekDat}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="vkDat"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>VK-Datum</th> |
||||
<td mat-cell *matCellDef="let row">{{row.vkDat}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="garantieBis"> |
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>GarantieBis</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> |
||||
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DbXchangeService } from './db-xchange.service'; |
||||
|
||||
describe('DbXchangeService', () => { |
||||
let service: DbXchangeService; |
||||
|
||||
beforeEach(() => { |
||||
TestBed.configureTestingModule({}); |
||||
service = TestBed.inject(DbXchangeService); |
||||
}); |
||||
|
||||
it('should be created', () => { |
||||
expect(service).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,53 @@
|
||||
import { Injectable } from '@angular/core'; |
||||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||
import { Artikel } from '../artikel-data/artikel-data.component'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class DbXchangeService { |
||||
Url: string; |
||||
baseUrl = "http://localhost:4200/api/"; |
||||
|
||||
constructor(private http: HttpClient) {
|
||||
this.Url = ""; |
||||
} |
||||
httpOptions = { |
||||
headers: new HttpHeaders({ |
||||
'Content-Type': 'application/json'}) |
||||
} |
||||
|
||||
|
||||
getAllArtikel() { |
||||
this.Url = this.baseUrl + `artikel`; |
||||
return this.http.get(this.Url, this.httpOptions) |
||||
} |
||||
|
||||
getAllSerials() { |
||||
this.Url = this.baseUrl + `artikel`; |
||||
return this.http.get(this.Url, this.httpOptions) |
||||
} |
||||
|
||||
deleteArt(id: number) { |
||||
this.Url = this.baseUrl + `artikel/${id}`; |
||||
return this.http.delete(this.Url, this.httpOptions) |
||||
} |
||||
|
||||
addArtikel(art: Artikel) { |
||||
let body: any; |
||||
console.log("hier bin ich mit folgendem Artikel: ", art) |
||||
this.Url = this.baseUrl + `artikel`; |
||||
body = art; |
||||
return this.http.post(this.Url, body, this.httpOptions); |
||||
} |
||||
|
||||
getArtikel(id: number) { |
||||
this.Url = this.baseUrl + `artikel/${id}`; |
||||
return this.http.get(this.Url, this.httpOptions) |
||||
} |
||||
|
||||
updateArtikel(art: Artikel) { |
||||
this.Url = this.baseUrl + `artikel/${art.id}`; |
||||
return this.http.put(this.Url, art, this.httpOptions) |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@
|
||||
|
||||
// Custom Theming for Angular Material |
||||
// For more information: https://material.angular.io/guide/theming |
||||
@use '~@angular/material' as mat; |
||||
// Plus imports for other components in your app. |
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only |
||||
// have to load a single css file for Angular Material in your app. |
||||
// Be sure that you only ever include this mixin once! |
||||
@include mat.core(); |
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss |
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker |
||||
// hue. Available color palettes: https://material.io/design/color/ |
||||
$senuma-primary: mat.define-palette(mat.$indigo-palette); |
||||
$senuma-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); |
||||
|
||||
// The warn palette is optional (defaults to red). |
||||
$senuma-warn: mat.define-palette(mat.$red-palette); |
||||
|
||||
// Create the theme object. A theme consists of configurations for individual |
||||
// theming systems such as "color" or "typography". |
||||
$senuma-theme: mat.define-light-theme(( |
||||
color: ( |
||||
primary: $senuma-primary, |
||||
accent: $senuma-accent, |
||||
warn: $senuma-warn, |
||||
) |
||||
)); |
||||
|
||||
// Include theme styles for core and each component used in your app. |
||||
// Alternatively, you can import and @include the theme mixins for each component |
||||
// that you are using. |
||||
@include mat.all-component-themes($senuma-theme); |
||||
|
||||
@ -0,0 +1,42 @@
|
||||
mat-nav-list.list-horizontal { |
||||
|
||||
padding: 0px; |
||||
.mat-list-item { |
||||
display: inline-block; |
||||
height: auto; |
||||
width: auto; |
||||
color: wheat; |
||||
background-color: rgb(236, 103, 8); |
||||
border: 1px solid; |
||||
margin: 2px; |
||||
} |
||||
} |
||||
|
||||
table.mat-table { |
||||
border: 1px solid; |
||||
tr.mat-header-row { |
||||
height: 32px; |
||||
background-color: rgb(236, 103, 8); |
||||
.mat-header-cell, .mat-sort-header-arrow { |
||||
color: #fff; |
||||
} |
||||
|
||||
} |
||||
tr.mat-row { |
||||
height: 40px; |
||||
font-family: Verdana, Geneva, Tahoma, sans-serif; |
||||
.mat-cell { |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mb { |
||||
display: inline-block; |
||||
height: auto; |
||||
width: auto; |
||||
color: wheat; |
||||
background-color: rgb(236, 103, 8); |
||||
border: 1px solid; |
||||
margin: 2px; |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
{ |
||||
"/api/*": { |
||||
"target": "http://localhost:8081", |
||||
"secure": false, |
||||
"logLevel": "debug", |
||||
"changeOrigin": true |
||||
|
||||
} |
||||
} |
||||
Loading…
Reference in new issue