From c08ca831ff08cdce0e57cac9d2ea69a03e5dc9b9 Mon Sep 17 00:00:00 2001
From: manueltauber <manuel.tauber@emea.nttdata.com>
Date: Wed, 2 Aug 2023 11:58:01 +0200
Subject: [PATCH] Layout anpassung Filter Dialog/Done

---
 .../filter-dialog/filter-dialog.component.css |  17 +++
 .../filter-dialog.component.html              | 109 ++++++++++--------
 frontend/src/app/language.service.ts          |   9 +-
 .../multiselect-autocomplete.component.html   |   2 +-
 .../src/app/ntt-gantt/ntt-gantt.component.ts  |   2 +-
 5 files changed, 83 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.css b/frontend/src/app/filter-dialog/filter-dialog.component.css
index 123c97a..ac15a37 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.css
+++ b/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;
+}
diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.html b/frontend/src/app/filter-dialog/filter-dialog.component.html
index fab1a3a..39e2eef 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.html
+++ b/frontend/src/app/filter-dialog/filter-dialog.component.html
@@ -1,56 +1,63 @@
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
-<mat-form-field  appearance="fill" >
-  <mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
-  <input matInput type="text" [(ngModel)]="criteria" >
-</mat-form-field>
+<div class="container">
+  <div class="filterBox">
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
+    <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>
 
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogSg')}}</h3>
-<multiselect-autocomplete
-  [placeholder]="userSupportGroup"
-  [data]="supportGroups"
-  [key]="'supportGroup'"
-  (result)="onResult($event)">
-</multiselect-autocomplete>
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogSg')}}</h3>
+    <multiselect-autocomplete
+      [placeholder]="userSupportGroup"
+      [data]="supportGroups"
+      [key]="'supportGroup'"
+      (result)="onResult($event)">
+    </multiselect-autocomplete>
 
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogState')}}</h3>
-<multiselect-autocomplete
-[placeholder]="languageService.lMap.get('filterDilogSearchState')"
-  [data]="states"
-  [key]="'state'"
-  (result)="onResult($event)">
-</multiselect-autocomplete>
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogState')}}</h3>
+    <multiselect-autocomplete
+    [placeholder]="languageService.lMap.get('filterDilogSearchState')"
+      [data]="states"
+      [key]="'state'"
+      (result)="onResult($event)">
+    </multiselect-autocomplete>
 
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogContract')}}</h3>
-<multiselect-autocomplete
-[placeholder]="languageService.lMap.get('filterDilogSearchContract')"
-  [data]="contracts"
-  [key]="'contract'"
-  (result)="onResult($event)">
-</multiselect-autocomplete>
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogContract')}}</h3>
+    <multiselect-autocomplete
+    [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
+      [data]="contracts"
+      [key]="'contract'"
+      (result)="onResult($event)">
+    </multiselect-autocomplete>
 
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogPaketType')}}</h3>
-<multiselect-autocomplete
-[placeholder]="languageService.lMap.get('filterDilogSearchPt')"
-  [data]="paketTypes"
-  [key]="'paketType'"
-  (result)="onResult($event)">
-</multiselect-autocomplete>
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogPaketType')}}</h3>
+    <multiselect-autocomplete
+    [placeholder]="languageService.lMap.get('filterDilogSearchPt')"
+      [data]="paketTypes"
+      [key]="'paketType'"
+      (result)="onResult($event)">
+    </multiselect-autocomplete>
 
-<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogDate')}}</h3>
-<mat-form-field appearance="fill">
-  <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
-  <input matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
-  <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
-  <mat-datepicker #picker1></mat-datepicker>
-</mat-form-field>
--
-<mat-form-field appearance="fill">
-  <mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
-  <input matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
-  <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
-  <mat-datepicker #picker2></mat-datepicker>
-</mat-form-field>
-<br><br>
-<button  mat-raised-button color = "primary" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
+    <h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogDate')}}</h3>
+    <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>
+      <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
+      <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field>
+    -
+    <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>
+      <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
+      <mat-datepicker #picker2></mat-datepicker>
+    </mat-form-field>
+    <br><br>
+    <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>
diff --git a/frontend/src/app/language.service.ts b/frontend/src/app/language.service.ts
index 497c69d..1c6ec91 100644
--- a/frontend/src/app/language.service.ts
+++ b/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');
diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
index 2094369..42b4c8a 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
+++ b/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"
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 6a30d7c..840d0d0 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/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;