Layout anpassung Filter Dialog/Done

frontend/src/app/filter-dialog/filter-dialog.component.css

@@ -1,3 +1,20 @@
+.container{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
 .filterHeading{
 font-family: Roboto;
 }
+
+.filterBox{
+  width: 90%;
+  align-self: center;
+}
+
+.buttonBox{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}

frontend/src/app/filter-dialog/filter-dialog.component.html

@@ -1,5 +1,7 @@
+<div class="container">
+  <div class="filterBox">
     <h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
-<mat-form-field  appearance="fill" >
+    <mat-form-field appearance="fill" style="width: 100%;" >
       <mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
       <input matInput type="text" [(ngModel)]="criteria" >
     </mat-form-field>
@@ -37,7 +39,7 @@
     </multiselect-autocomplete>
 
     <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogDate')}}</h3>
-<mat-form-field appearance="fill">
+    <mat-form-field appearance="fill" style="width: 48%;">
       <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
       <input matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
       <mat-hint>MM/DD/YYYY</mat-hint>
@@ -45,7 +47,7 @@
       <mat-datepicker #picker1></mat-datepicker>
     </mat-form-field>
     -
-<mat-form-field appearance="fill">
+    <mat-form-field appearance="fill" style="width: 48%;">
       <mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
       <input matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
       <mat-hint>MM/DD/YYYY</mat-hint>
@@ -53,4 +55,9 @@
       <mat-datepicker #picker2></mat-datepicker>
     </mat-form-field>
     <br><br>
-<button  mat-raised-button color = "primary" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
+    <div class="buttonBox">
+      <button  mat-raised-button color="warn" style="margin-right: 3px;" matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
+      <button  mat-raised-button color = "primary" style="margin-left: 3px;" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
+    </div>
+  </div>
+</div>

frontend/src/app/language.service.ts

@@ -111,8 +111,6 @@ export class LanguageService {
     this.deMap.set('filterDilogSearchFrom', 'Von');
     this.deMap.set('filterDilogSearchTo', 'Bis');
 
-    this.deMap.set('filterDilogButton', 'Filter anwenden');
-
     this.enMap.set('filterDialogShortDesc', 'Short description* (entering a text part filters all matching packages)');
     this.enMap.set('filterDilogSg', 'Selected support group in the role of planning IH or cost manager (one)');
     this.enMap.set('filterDilogState', 'State (one or more) of the package');
@@ -128,7 +126,12 @@ export class LanguageService {
     this.enMap.set('filterDilogSearchFrom', 'From');
     this.enMap.set('filterDilogSearchTo', 'Until');
 
-    this.enMap.set('filterDilogButton', '"Apply Filters"');
+    this.enMap.set('filterDilogButton', 'Apply Filters');
+    this.deMap.set('filterDilogButton', 'Filter anwenden');
+    this.deMap.set('filterDialogCancel', 'Abbrechen');
+    this.enMap.set('filterDialogCancel', 'Cancel');
+
+
 
     this.deMap.set('implementerDialogHeading', 'Implementer Eintragen');
     this.enMap.set('implementerDialogHeading', 'Enter Implementer');

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html

@@ -10,7 +10,7 @@
   </mat-chip-list>
 </div>
 
-<mat-form-field class="full-width">
+<mat-form-field class="full-width" appearance="fill">
   <input matInput type="text"
   [placeholder]="placeholder"
   [matAutocomplete]="auto"

frontend/src/app/ntt-gantt/ntt-gantt.component.ts

@@ -301,7 +301,7 @@ export class NttGanttComponent implements OnInit {
   openFilterDialog(){
     let dialogRef = FilterDialogComponent;
       this.matDialog.open(dialogRef,
-      {data : [], height: '70%', width: '80%'}).afterClosed().subscribe((res)=>{
+      {data : [], height: '70%', width: '50%'}).afterClosed().subscribe((res)=>{
         if(res){
           this.filters = res;
           this.filterEnabled = true;