Vor erster Präsentation am 29.8.2022

src/app/app.module.ts

@@ -45,7 +45,8 @@ import { MatOption } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { PruefungsergebnisComponent } from './pruefungsergebnis/pruefungsergebnis.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatRadioModule} from '@angular/material/radio';
 @NgModule({
    imports: [
       HttpClientModule,
@@ -68,7 +69,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
       NgbModule,
       MatCardModule,
       MatSelectModule,
-      MatDatepickerModule
+      MatDatepickerModule,
+      MatTabsModule,
+      MatRadioModule
    ],
    declarations: [
       AppComponent,

src/app/ausbildung/ausbildung.component.html

@@ -1 +1,3 @@
-<p>ausbildung works!</p>
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+    Ausbildung
+</div>

src/app/beruf/beruf.component.html

@@ -1 +1,3 @@
-<p>beruf works!</p>
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+    Beruf
+</div>

src/app/dash/dash.component.html

@@ -1,10 +1,7 @@
-<script>
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
-    const someTabTriggerEl = document.querySelector('#someTabTrigger')
+  Übersicht der Ausbildung
-    const tab = new bootstrap.Tab(someTabTriggerEl)
+</div>
-    tab.show()
-</script>
 
-<div class="col-md-1">&nbsp;</div>
 <div class="col-md-3">
 <mat-form-field appearance="standard">
     <mat-label>Filter</mat-label>
@@ -53,36 +50,23 @@
             aria-label="Seite wählen">
         </mat-paginator>
     </div>
+    
     <div class="container col-md-8 mat-elevation-z8 bg-white" id="lehrlingTab">  
-        <ul class="nav nav-tabs" id="myTab" role="tablist">
+      <div class="ueberschrift">Lehrling</div>
-            <li class="nav-item" role="presentation">
+    <mat-tab-group mat-align-tabs="start">
-              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
+      <mat-tab label="Kompetenz">
-            </li>
+        <br><br>Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt
-            <li class="nav-item" role="presentation">
+      </mat-tab>
-              <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
+      <mat-tab label="Module">
-            </li>
+        <br><br>Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt
-            <li class="nav-item" role="presentation">
+      </mat-tab>
-              <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
+      <mat-tab label="Prüfungen">
-            </li>
+        <br><br>Hier werden die absolvierten und noch fehlenden Prüfungen des ausgewählten Lehrlings angezeigt
-            <li class="nav-item" role="presentation">
+      </mat-tab>
-              <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
+      <mat-tab label="Anmerkungen">
-            </li>
+        <br><br>Hier können Anmerkungen zum ausgewählten Lehrlings angezeigt oder eingetragen werden.
-          </ul>
+      </mat-tab>
-          
+    </mat-tab-group>          
-          <div class="tab-content">
-            <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
-            <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
-            <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
-            <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
-          </div>
-          
-          <script>
-            const firstTabEl = document.querySelector('#myTab li:last-child button')
-            const firstTab = new bootstrap.Tab(firstTabEl)
-          
-            firstTab.show()
-          </script>
-                
     </div> 
 </div>
 

src/app/dash/dash.component.ts

@@ -12,7 +12,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatPaginator} from '@angular/material/paginator';
 import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatSort } from '@angular/material/sort';
-
+import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'app-dash',
   templateUrl: './dash.component.html',

src/app/dashboard/dashboard.component.html

@@ -1,11 +1,13 @@
-<h3>&Uuml;bersicht</h3>
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+  Übersicht
+</div>
 
 <div class="row row-cols-1 row-cols-md-3 g-4">
     <div class="col">
       <div class="card h-100">
         <img src="../../assets/icons/user_klein.png" class="card-img-top" alt="Lehrlinge">
         <div class="card-body">
-          <h5 class="card-title">Lehrlinge</h5>
+          <div class="card-title display-6">Lehrlinge</div>
             <table class="row-border hover table table-striped">
                 <thead class="kopf">
                     <th>Name</th>
@@ -31,7 +33,7 @@
       <div class="card h-100">
       <img src="../../assets/icons/kompetenz.png" class="card-img-top" alt="Kompetenz">
         <div class="card-body">
-          <h5 class="card-title">Kompetenzen</h5>
+          <div class="card-title  display-6">Kompetenzen</div>
           <!-- Hier beginnt die Karte Kompetenzen -->
           <table class="table table-striped">
             <thead class="kopf">
@@ -67,7 +69,7 @@
       <div class="card h-100">
         <img src="../../assets/icons/pruefung.png" class="card-img-top" alt="...">
         <div class="card-body">
-          <h5 class="card-title">Pr&uuml;fungen</h5>
+          <div class="card-title  display-6">Pr&uuml;fungen</div>
         <table class="table table-striped">
             <thead class="kopf">
                 <th>Pr&uuml;fung</th>

src/app/kompetenz/kompetenz.component.html

@@ -1,24 +1,70 @@
-<h3>Kompetenzen</h3>
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
-<br>
+    Kompetenzen
-
-<table class="table table-striped">
-    <thead class="kopf">
-        <th>Kompetenz</th>
-        <th>Beschreibung</th> 
-        <th class="text-center">Halbtage</th>  
-        <th>Aktion</th>    
-    </thead>
-    <tbody>
-    <tr *ngFor="let aktkomp of kompetenzen">    
-        <td>{{aktkomp.competence}}</td>
-        <td>{{aktkomp.competencedescription}}</td>
-        <td class="text-center">{{aktkomp.dauer}}</td>
-        <td>
-            <div class="d-grid gap-4 d-md-flex justify-content-md-center">
-                <a mat-mini-fab routerLink="/editkompetenz/{{aktkomp.competenceid}}" class="btn">
-                    <mat-icon>edit</mat-icon>
-                </a>
 </div>
-        </td>
+<div class="container col-5 float-left">
-    </tr>
+    <mat-form-field appearance="standard">
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
+    </mat-form-field>
+
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
+        <ng-container matColumnDef="competenceid">
+            <th  class="kopf col-2" mat-header-cell *matHeaderCellDef> ID </th>
+            <td mat-cell *matCellDef="let com"> {{com.competenceid}} </td>
+        </ng-container>
+        <ng-container matColumnDef="competence">
+            <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Kompetenz </th>
+            <td mat-cell *matCellDef="let com"> {{com.competence}} </td>
+        </ng-container>
+        <ng-container matColumnDef="competencedescription">
+            <th  class="kopf col-8" mat-sort-header  mat-header-cell *matHeaderCellDef> Beschreibung </th>
+            <td mat-cell *matCellDef="let com"> {{com.competencedescription}} </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row 
+            *matRowDef="let  comrow; columns: displayedColumns;" 
+            (click)="onclick(comrow)"
+            ></tr>
     </table>
+    <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
+</div>
+<!-- Edit Bereich -->
+<div class="container col-6 float-right">
+    <div class="abstandoben">&nbsp;</div>
+    <div class="ueberschrift mt-3">Kompetenz bearbeiten</div>
+    <div class="container mt-8 mat-elevation-z8 bg-white">
+        
+        <form class="form" [formGroup]="editForm" novalidate>
+            <div class="row">
+                <mat-form-field class="col-md-3" appearance="fill">
+                    <mat-label>ID</mat-label>
+                    <input readonly="true" type="text" matInput formControlName="competenceid" >
+                  </mat-form-field>
+                <mat-form-field class="col-md-5" appearance="fill">
+                  <mat-label>Dauer in Halbtagen</mat-label>
+                  <input type="text" matInput formControlName="dauer" >
+                </mat-form-field>
+            </div>
+            <div class="row">
+                <mat-form-field class="col-md-3" appearance="fill">
+                  <mat-label>Kompetenz</mat-label>
+                  <input class="col-md-5" appearance="fill" type="text" matInput formControlName="competence">
+                </mat-form-field>
+            </div>
+            <div class="row">
+                <mat-form-field class="col-md-8" appearance="fill">
+                  <mat-label>Beschreibung</mat-label>
+                  <input type="textarea" matInput formControlName="competencedescription" >
+                </mat-form-field>
+            
+            <div class="row">
+                <div class="col-md-12 " >
+                    <button class="btn btn-success" (click)="onEdit()">Speichern</button>
+                    <button class="btn btn-cancel p-10" (click)="onCancel()">Abbruch</button>
+                  </div>
+            </div>
+        </div>
+    </form>
+    </div>
+</div>
+

src/app/kompetenz/kompetenz.component.ts

@@ -1,7 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { KompetenzService } from '../services/kompetenz.service';
 import { Observable } from 'rxjs';
 import { MatSliderModule } from '@angular/material/slider';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { Kompetenz } from '../kompetenz';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { FormBuilder, UntypedFormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-kompetenz',
@@ -11,9 +19,31 @@ import { MatSliderModule } from '@angular/material/slider';
 export class KompetenzComponent implements OnInit {
 
   public kompetenzen: any;
+  public selection: any;
+  public dataSource: any;
+  public editForm: any;
+  public aktKompetenzId: any;
+  public aktkompetenz?: Kompetenz;
+  headers: HttpHeaders = new HttpHeaders()
+                  .set('Accept', 'application/json');
                   
-  constructor(private Kompetenz: KompetenzService) { 
 
+  displayedColumns: any = ["competenceid", "competence", "competencedescription"];
+
+  constructor(private Kompetenz: KompetenzService,
+              private _liveAnnouncer: LiveAnnouncer,
+              private formbuilder: FormBuilder,
+              private router: Router,
+              private kompetenzservice: KompetenzService,
+              private activatedRoute: ActivatedRoute,
+              private http: HttpClient,) 
+    { 
+      this.editForm = this.formbuilder.group({
+        competenceid: [],
+        competence: ['', Validators.required],
+        competencedescription: ['', Validators.required ],
+        dauer: ['']
+      })
   }
 
   ngOnInit(): void {
@@ -22,7 +52,62 @@ export class KompetenzComponent implements OnInit {
       (
         result: any) => {
         this.kompetenzen = result;
+        this.dataSource = new MatTableDataSource(this.kompetenzen);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
       })
   }
+  @ViewChild('paginator') paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngAfterViewInit() {
+    if(this.dataSource != undefined) {
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+      console.log(this.dataSource);
+    }
+    else
+      console.log("DataSource undefined in AfterViewInit");
+
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    console.log("Filter: " + this.dataSource.filter);
+  }
+
+  /** 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');
+    }
+  }
+  
+  onclick(aktuell: Kompetenz) {
+    this.aktKompetenzId = aktuell.competenceid;
+    console.log("ausgewählt: " + aktuell.competenceid)
+    if (this.aktKompetenzId > 0) {
+      this.kompetenzservice.getSingleKompetenz(this.aktKompetenzId).subscribe((
+        (data: any) => {
+       //   console.log(data);
+          this.editForm.patchValue(data);
+        }
+      ))
+    }
+  }
+
+  onEdit(): void {
+
+  }
+  onCancel(): void {
+    this.editForm.reset();
+  }
 }
 

src/app/lehrling2beruf/lehrling2beruf.component.html

@@ -1,6 +1,6 @@
 
-    <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
+    <div class="pb-1 mb-4 display-6 border-bottom border-danger">
-        Teilnehmer zu Ausbildung zuordnen!
+        Teilnehmer zu Ausbildung zuordnen
     </div>
     <div class="beruf-container">
         <div [formGroup]="ProfessionFormGroup">

src/app/list-lehrlinge/list-lehrlinge.component.css

@@ -1,4 +1,18 @@
 .table {
     width: 100%;
   }
+.aktzeile {
+    color: red;
+    background: #472ddb;
+    font-weight: bold;
+}
 
+.mat-row .mat-cell {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  cursor: pointer;
+}
+
+.mat-row:hover .mat-cell {
+  border-color: currentColor;
+}

src/app/list-lehrlinge/list-lehrlinge.component.html

@@ -1,33 +1,109 @@
 
-<h3>Lehrlinge</h3> 
+    <div class="pb-1 mb-4 display-6 border-bottom border-danger">
-<div class="container mb-4">
+        Lehrlinge
-<div class="bg-light clearfix">
-    <button type="button" class="btn btn-primary float-left">Neu</button>
     </div>
+<div class="container col-5 float-left">
+  <mat-form-field appearance="standard">
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
+  </mat-form-field>
 
-<table class="table table-striped">
+  <table mat-table [dataSource]="dsLehrlinge" class=" table mat-elevation-z8">
-    <thead class="kopf">
+    <!-- Checkbox Column -->
-        <th>Name</th>
+   <!-- <ng-container class="checkfeld" matColumnDef="select">
-        <th>Gruppe</th>    
+        <th mat-header-cell *matHeaderCellDef>
-        <th>Geschlecht</th>
+          <mat-checkbox (change)="$event ? masterToggle() : null"
-        <th>Geboren</th>   
+                        [checked]="selection.hasValue() && isAllSelected()"
-        <th>Eintritt</th>
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-        <th>Austritt</th>
+          </mat-checkbox>
-        <th>Aktion</th>
+        </th>
-    </thead>
+        <td mat-cell *matCellDef="let row">
-    <tbody>
+            <mat-checkbox (click)="$event.stopPropagation()"                    
-    <tr *ngFor="let aktlehrling of lehrlinge">    
+                        (change)="$event ? selection.toggle(row) : null"
-        <td>{{aktlehrling.firstname}} {{aktlehrling.lastname}}</td>
+                        [checked]="selection.isSelected(row)">
-        <td>{{aktlehrling.groupname}}</td>
+            </mat-checkbox>
-        <td>{{aktlehrling.sex}}</td>
+        </td>
-        <td>{{aktlehrling.date_of_birth}}</td>
+      </ng-container>
-        <td>{{aktlehrling.date_joined}}</td>
+      -->
-        <td>{{aktlehrling.date_leave}}</td>
+    <ng-container matColumnDef="apprenticeid">
-        <div class="d-grid gap-4 d-md-flex justify-content-md-center">
+        <th mat-header-cell *matHeaderCellDef> ID </th>
-            <a mat-mini-fab routerLink="/editLehrling/{{aktlehrling.lehrlingid}}" class="btn">
+        <td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td>
-                <mat-icon>edit</mat-icon>
+      </ng-container>
-            </a>
+    <ng-container matColumnDef="firstname">
-      </div>            
+        <th mat-header-cell *matHeaderCellDef> Vorname </th>
+        <td mat-cell *matCellDef="let user"> {{user.firstname}} </td>
+      </ng-container>
+      <ng-container matColumnDef="lastname">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let user"> {{user.lastname}} </td>
+      </ng-container>
+      <ng-container matColumnDef="groupname">
+        <th mat-header-cell *matHeaderCellDef> Gruppe </th>
+        <td mat-cell *matCellDef="let user"> {{user.groupname}} </td>
+      </ng-container>
+
+      <tr class="kopf" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+          (click)="onclick(row)"
+          >
       </tr>
   </table>
+  <mat-paginator [pageSizeOptions]="[10, 20, 50]"
+         showFirstLastButtons 
+         aria-label="Seite auswählen">
+  </mat-paginator>
+</div>
+<!-- Edit Bereich -->
+<div class="container col-6 float-left">
+  <div class="titel">Lehrling bearbeiten</div>
+  <div class="container mt-8 mat-elevation-z8 bg-white">
+      
+      <form class="form" [formGroup]="editForm" novalidate>
+          <div class="row">
+              <mat-form-field class="col-md-3" appearance="fill">
+                  <mat-label>ID</mat-label>
+                  <input readonly="true" type="text" matInput formControlName="apprenticeid" >
+                </mat-form-field>
+          </div>
+          <div class="row">
+              <mat-form-field class="col-md-5" appearance="fill">
+                <mat-label>Vorname</mat-label>
+                <input type="text" matInput formControlName="firstname" >
+              </mat-form-field>
+              <mat-form-field class="col-md-5" appearance="fill">
+                <mat-label>Nachname</mat-label>
+                <input type="text" matInput formControlName="lastname" >
+              </mat-form-field>
+          </div>
+          <div class="row">
+              <mat-form-field class="col-md-5" appearance="fill">
+                <mat-label>Geboren</mat-label>
+                <input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_of_birth">
+              </mat-form-field>
+          
+              <mat-form-field class="col-md-5" appearance="fill">
+                <mat-label>Geschlecht</mat-label>
+                <input type="textarea" matInput formControlName="sex" >
+              </mat-form-field>
+          </div>
+          <div class="row">
+            <mat-form-field class="col-md-5" appearance="fill">
+              <mat-label>Eintritt</mat-label>
+              <input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_joined">
+            </mat-form-field>
+        
+            <mat-form-field class="col-md-5" appearance="fill">
+              <mat-label>Austritt</mat-label>
+              <input type="date" matInput formControlName="date_leave" >
+            </mat-form-field>
+        </div>
+          <div class="row">
+              <div class="col-md-12 " >
+                  <button class="btn btn-success" (click)="onEdit()">Speichern</button>
+                  <button class="btn btn-cancel p-10" (click)="onCancel()">Abbruch</button>
+                </div>
+          </div>
+      
+  </form>
+  </div>
 </div>

src/app/list-lehrlinge/list-lehrlinge.component.ts

@@ -1,7 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { LehrlingService } from '../services/lehrling.service';
 import { Observable } from 'rxjs';
 import { Lehrling } from '../lehrling';
+import { MatTableDataSource } from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Router } from '@angular/router';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-list-lehrlinge',
@@ -10,16 +17,90 @@ import { Lehrling } from '../lehrling';
 })
 export class ListLehrlingeComponent implements OnInit {
 
+  public dsLehrlinge?: MatTableDataSource<Lehrling>;
+  selection = new SelectionModel<Lehrling>(true, []);
   public lehrlinge: any;
+  public displayedColumns: any;
+  public editForm: any;
+  public aktlehrling: any;
 
-  constructor(private Lehrlinge: LehrlingService) { }
+  constructor(private Lehrlinge: LehrlingService,
+              private router: Router,
+              private formbuilder: UntypedFormBuilder,
+              private _liveAnnouncer: LiveAnnouncer,) 
+              { 
+                this.editForm = this.formbuilder.group({
+                  apprenticeid: [],
+                  firstname: ['', Validators.required],
+                  lastname: ['', Validators.required],
+                  groupid: [''],
+                  sex: [''],
+                  date_of_birth: [''],
+                  date_joined: [''],
+                  date_leave: ['']
+                })
+              }
 
   ngOnInit(): void {
+    this.displayedColumns = ["apprenticeid", "firstname", "lastname", "groupname"];
     this.Lehrlinge.getLehrlinge().subscribe(
       (
         data: any) => {
         console.log(data);
         this.lehrlinge = data.apprentice;
+        this.dsLehrlinge = this.lehrlinge;
     })
   }
+
+  @ViewChild('paginator') paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngAfterViewInit() {
+    if(this.dsLehrlinge != undefined) {
+      this.dsLehrlinge.paginator = this.paginator;
+      this.dsLehrlinge.sort = this.sort;
+    //  console.log(this.dsLehrlinge);
+    }
+    else
+      console.log("DataSource undefined in AfterViewInit");
+  }
+  
+  onclick(aktlehrling: any) {
+    this.aktlehrling = aktlehrling;
+    console.log("ausgewählt: " + aktlehrling.lastname)
+  }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+      this.isAllSelected() ?
+          this.selection.clear() :
+          this.dsLehrlinge.data.forEach(row => this.selection.select(row));
+    }
+
+      /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    console.log(this.selection);
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dsLehrlinge.data.length;
+    return numSelected === numRows;
+  }
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dsLehrlinge.filter = filterValue.trim().toLowerCase();
+   // console.log("Filter: " + this.dsLehrlinge.filter);
+  }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+  onEdit(): void {
+
+  }
+  onCancel(): void {
+    this.router.navigate(['/list-lehrling']);
+  }
 }

src/app/modul/modul.component.html

@@ -1,8 +1,7 @@
-<div class="container col-5 float-left">
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
-    <div class="clearfix">
+    Module
-        <div class="display-6">Module</div>    
-        <button type="button" class="btn btn-primary float-left">Neu</button>
 </div>
+<div class="container col-5 float-left">
     <mat-form-field appearance="standard">
         <mat-label>Filter</mat-label>
         <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
@@ -30,3 +29,14 @@
     </table>
     <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
 </div>
+<!-- Edit Bereich -->
+<div class="container col-6 float-right">
+    
+    <div class="titel">Modul bearbeiten</div>
+    <div class="container mt-8 mat-elevation-z8">
+        
+        <form>
+        
+        </form>
+    </div>
+</div>

src/app/modul/modul.component.ts

@@ -32,7 +32,7 @@ export class ModulComponent implements OnInit {
     this.Modulservice.getModule().subscribe(
       (
         data: any) => {
-        console.log(data);
+      //  console.log(data);
         this.module = data.modul;
         this.dataSource = new MatTableDataSource(this.module);
         this.dataSource.paginator = this.paginator;

src/app/notfound/notfound.component.html

@@ -1,2 +1,5 @@
-<h3>Seite wurde nicht gefunden!</h3>
+
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+    Seite wurde nicht gefunden!
+</div>
 

src/app/prergebnis/prergebnis.component.css

@@ -4,14 +4,24 @@
   
   .row-is-clicked {
     color: red;
-    background-color: #fdf9e9;
+    background: #472ddb;
     font-weight: bold;
   }
   
   .mat-row.hovered {
-    background: #eee;
+    background: rgb(228, 238, 255);
 }
 
 .mat-row.highlighted {
-  background: #fdf9e9;
+  background: #d04b2d;
+  font-weight: bold;
+}
+.radiogruppe {
+  vertical-align: middle;
+  text-align: left;;
+}
+.radioknopf {
+  vertical-align: bottom;
+  margin-left: 8px;
+  margin-top: 10px;
 }

src/app/prergebnis/prergebnis.component.html

@@ -1,3 +1,6 @@
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+  Prüfungsergebnisse
+</div>
 <div class="container col-12 float-left">
     <div class="row">
       <div class="auswahl col-6">
@@ -24,10 +27,9 @@
         </mat-form-field>
       </div>
     </div>
-    </div>
     <div class="row col-12">
-      <div class="person col-6">
+      <div class="pruefung col-6">
-         <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8 col-12">
                 <!-- Checkbox Column -->
             <!--     <ng-container matColumnDef="select">
                 <mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
@@ -51,64 +53,59 @@
               <td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
           </ng-container>
           <ng-container matColumnDef="examdescription">
-        <th  class="kopf col-5" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
+              <th  class="kopf col-6" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
               <td mat-cell *matCellDef="let prue"> {{prue.examdescription}} </td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row 
-        *matRowDef="let  pruerow; columns: displayedColumns;"
+              *matRowDef="let  row; columns: displayedColumns;"
-        (click)="selectHandler(pruerow)" (change)="selectHandler(pruerow)"
+              (click)="onclick(row)" (change)="selectHandler(row)"
-        [ngClass]="{hovered: pruerow.hovered, highlighted: selection.isSelected(pruerow)}"
+              [ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
-        (mouseover)="pruerow.hovered = true" (mouseout)="pruerow.hovered = false"></tr>
+              (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
         </table>
-<mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[5, 10, 20, 30]" showFirstLastButtons></mat-paginator>
+        <mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
       </div>
-<div class="pruef col-6">
+      <div class="ergebnis col-6">
         <table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
-        		<!-- Checkbox Column -->
-   <!--     <ng-container matColumnDef="select">
-          <mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
-          <mat-cell class="align-bottom" *matCellDef="let pruerow">
-            <mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
-              [checked]="selection.isSelected(pruerow)">
-            </mat-checkbox>
-          </mat-cell>
-        </ng-container>
--->
           <ng-container matColumnDef="firstname">
-            <th  class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
+              <th  class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
               <td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
           </ng-container>
           <ng-container matColumnDef="lastname">
-            <th  class="kopf col-4" mat-sort-header  mat-header-cell *matHeaderCellDef> Nachname </th>
+              <th  class="kopf col-3" mat-sort-header  mat-header-cell *matHeaderCellDef> Nachname </th>
               <td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
           </ng-container>
           <ng-container matColumnDef="date_of_exam">
-            <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Datum </th>
+              <th  class="kopf col-2 text-center" mat-sort-header  mat-header-cell *matHeaderCellDef> Datum </th>
-            <td mat-cell *matCellDef="let pers"> {{pers.date_of_exam}} </td>
+              <td mat-cell class="text-left" *matCellDef="let pers"> {{pers.date_of_exam | date:'d.M.y'}} </td>
           </ng-container>
           <ng-container matColumnDef="acquired">
-            <th  class="kopf text-right col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Bestanden </th>
+            <th  class="kopf text-center col-4" mat-sort-header mat-header-cell *matHeaderCellDef>Bestanden </th>
-            <td mat-cell class="text-center" *matCellDef="let pers">{{pers.acquired}}
+            <mat-radio-group class="radiogruppe" *matCellDef="let pers" [(ngModel)]="pers.acquired"> 
-    <!--          <div *ngIf="1">
+                <mat-radio-button class="radioknopf" value="0">ja </mat-radio-button>
-                  <img src="../../assets/icons/ok.png">
+                <mat-radio-button class="radioknopf" value="0">nein</mat-radio-button>
-              </div> -->
+          </mat-radio-group>
-               </td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
           <tr mat-row 
               *matRowDef="let  persrow; columns: ergdisplayedColumns;"
-            (click)="selectHandler(persrow)" (change)="selectHandler(persrow)"
+              (click)="onergclick(persrow)" (change)="ergselectHandler(persrow)"
-            [ngClass]="{hovered: persrow.hovered, highlighted: selection.isSelected(persrow)}"
+              [ngClass]="{hovered: persrow.hovered, highlighted: ergselection.isSelected(persrow)}"
               (mouseover)="persrow.hovered = true" (mouseout)="persrow.hovered = false"></tr>
         </table>
         <mat-paginator class="mat-elevation-z8 mt-3" #ergpaginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
       </div>
+      <div>
+        <h3>
+          Ausgewählte Prüfung:
+        </h3>
+        {{angewaehlt | json}}
       </div>
       <div>
         <h3>
-          Ausgewählt:
+          Ausgewähltes Ergebnis:
         </h3>
-        {{selection.selected | json}}
+        {{ergangewaehlt | json}}
+      </div>
     </div>
   </div>

src/app/prergebnis/prergebnis.component.ts

@@ -9,6 +9,7 @@ import { PruefungService } from '../services/pruefung.service';
 import {MatSelectModule} from '@angular/material/select';
 import { PruefungsergebnisService } from '../services/pruefungsergebnis.service';
 import { Pruefungsergebnis } from '../Pruefungsergebnis';
+import {MatRadioModule} from '@angular/material/radio';
 
 export enum SelectType {
   single,
@@ -58,9 +59,9 @@ export class PrergebnisComponent implements OnInit {
     })
     this.pruefungsergebnis.getPruefergebnisse().subscribe(
       (
-        data: any) => {
+        dataerg: any) => {
       //  console.log(data);
-        this.pruefergebnisse = data;
+        this.pruefergebnisse = dataerg;
         this.ergdataSource = new MatTableDataSource(this.pruefergebnisse);
         this.ergdataSource.ergpaginator = this.ergpaginator;
         this.ergdataSource.sort = this.sort;
@@ -119,19 +120,22 @@ export class PrergebnisComponent implements OnInit {
   }
   onclick(pruerow: any) {
     this.angewaehlt = pruerow;
-    console.log(this.angewaehlt);
+  }
+
+  onergclick(persrow: any) {
+    this.ergangewaehlt = persrow;
   }
 
   applypruefFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter = filterValue.trim().toLowerCase();
-    console.log("Filter: " + this.dataSource.filter);
+ //   console.log("Filter: " + this.dataSource.filter);
   }
 
   applypersonFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.ergdataSource.filter = filterValue.trim().toLowerCase();
-    console.log("Filter: " + this.ergdataSource.filter);
+  //  console.log("Filter: " + this.ergdataSource.filter);
   }
 
   /** Announce the change in sort state for assistive technology. */

src/app/pruefung/pruefung.component.html

@@ -1,7 +1,5 @@
-<div class="container col-5 float-left">
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
-    <div class="clearfix">
+    Prüfungen
-        <div class="display-6">Pr&uuml;fungen</div>    
-        <button type="button" class="btn btn-primary float-left">Neu</button>
 </div>
     <mat-form-field appearance="standard">
         <mat-label>Filter</mat-label>
@@ -14,11 +12,11 @@
             <td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
         </ng-container>
         <ng-container matColumnDef="examshort">
-            <th  class="kopf col-1" mat-sort-header  mat-header-cell *matHeaderCellDef> Prüfung </th>
+            <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Prüfung </th>
             <td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
         </ng-container>
         <ng-container matColumnDef="examname">
-            <th  class="kopf col-3" mat-sort-header  mat-header-cell *matHeaderCellDef> Name </th>
+            <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Name </th>
             <td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
         </ng-container>
         <ng-container matColumnDef="examdescription">
@@ -29,4 +27,3 @@
         <tr mat-row *matRowDef="let  pruerow; columns: displayedColumns;"></tr>
     </table>
     <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
-</div>

src/app/sidebar/sidebar.component.html

@@ -8,54 +8,52 @@
     </div>
       <ul class="nav">
         <li routerLinkActive="active">
-            <a routerLink="dashboard">
+            <a class="mt-0" routerLink="dash">
                 <p>Dashboard</p>
             </a>
         </li>
-
         <li  routerLinkActive="active">
-            <a routerLink="dash">
+            <a class="mt-0" routerLink="dashboard">
-                <p>Dash</p>
+                <p>Übersicht</p>
             </a>
         </li>
-
         <li routerLinkActive="active">
-            <a routerLink="list-lehrling">
+            <a class="mt-0" routerLink="list-lehrling">
                 <p>Lehrling</p>
             </a>
         </li>
 
         <li routerLinkActive="active">
-            <a routerLink="kompetenz">
+            <a class="mt-0" routerLink="kompetenz">
                 <p>Kompetenz</p>
             </a>
         </li>
 
         <li routerLinkActive="active">
-            <a routerLink="modul">
+            <a class="mt-0" routerLink="modul">
                 <p>Modul</p>
             </a>
         </li>
         
         <li routerLinkActive="active">
-            <a routerLink="pruefung">
+            <a class="mt-0" routerLink="pruefung">
                 <p>Prüfung</p>
             </a>
         </li>
         
         <li routerLinkActive="active">
-            <a routerLink="pruefungergebnis">
+            <a class="mt-0" routerLink="pruefungergebnis">
                 <p>Prüfungsergebnis</p>
             </a>
         </li>
 
         <li routerLinkActive="active">
-            <a routerLink="l2b">
+            <a class="mt-0" routerLink="l2b">
                 <p>Lehrling zu Beruf</p>
             </a>
         </li>
 
-        <li routerLinkActive="active">
+        <li class="mt-0" routerLinkActive="active">
             <a routerLink="about">
                 <p>&Uuml;ber</p>
             </a>

src/bildungsdb.css

@@ -4,3 +4,31 @@
     background-color: #fae584;
   }
 
+  .titel {
+    background-color: #fae584;
+    padding: 0px;
+    margin: 0px;
+    margin-top: 70px;
+    padding: 15px;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.ueberschrift {
+  background-color: white;
+  padding: 0px;
+  margin: 0px;
+  margin-top: 3px;
+  padding: 15px;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.abstandoben  {
+  padding: 0px;
+  margin: 0px;
+  margin-top: 3px;
+  padding: 15px;
+  font-size: 1.2em;
+  font-weight: bold;
+}