From b0145b20d7008c428b54f3af4b1c9d5d4465a295 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Tue, 14 May 2024 17:11:22 +0200
Subject: [PATCH] changes

---
 .../filter-dialog.component.html              | 143 ++++---
 .../multiselect-autocomplete.component.css    |  20 +
 .../multiselect-autocomplete.component.html   |  48 ++-
 .../src/app/ntt-gantt/ntt-gantt.component.css |  13 +-
 .../app/ntt-gantt/ntt-gantt.component.html    | 348 +++++++++---------
 5 files changed, 295 insertions(+), 277 deletions(-)

diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.html b/frontend/src/app/filter-dialog/filter-dialog.component.html
index f8937b4..7e0e498 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.html
+++ b/frontend/src/app/filter-dialog/filter-dialog.component.html
@@ -3,60 +3,52 @@
     <h2 class="filterHeading">{{this.languageService.lMap.get('filterDialogHeading')}}</h2>
     <mat-accordion>
       <mat-expansion-panel>
-      <mat-expansion-panel-header>
+        <mat-expansion-panel-header>
 
-        <mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
-        <mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
-      </mat-expansion-panel-header>
-        <mat-form-field appearance="fill" style="width: 100%;" >
+          <mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-form-field appearance="fill" style="width: 100%;">
           <mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
-          <input matInput (input)="this.TextEnabled = this.criteria !== '';" type="text" [(ngModel)]="criteria" >
+          <input matInput (input)="this.TextEnabled = this.criteria !== '';" type="text" [(ngModel)]="criteria">
         </mat-form-field>
       </mat-expansion-panel>
 
       <mat-expansion-panel>
         <mat-expansion-panel-header>
-          <mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
           <mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description>
         </mat-expansion-panel-header>
-          <multiselect-autocomplete
-          [placeholder]="userSupportGroup"
-          [data]="supportGroups"
-          [key]="'supportGroup'"
-          [appliedFilters]= "prevFiltersSg"
-          (result)="onResult($event)">
+        <multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'"
+          [appliedFilters]="prevFiltersSg" (result)="onResult($event)">
+        </multiselect-autocomplete> 
+      </mat-expansion-panel>
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
+        </mat-expansion-panel-header>
+        <multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchState')" [data]="states"
+          [key]="'state'" [appliedFilters]="prevFiltersState" (result)="onResult($event)">
         </multiselect-autocomplete>
-        </mat-expansion-panel>
+      </mat-expansion-panel>
 
-        <mat-expansion-panel>
-          <mat-expansion-panel-header>
-            <mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
-            <mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
-          </mat-expansion-panel-header>
-          <multiselect-autocomplete
-          [placeholder]="languageService.lMap.get('filterDilogSearchState')"
-            [data]="states"
-            [key]="'state'"
-            [appliedFilters]= "prevFiltersState"
-            (result)="onResult($event)">
-          </multiselect-autocomplete>
-          </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
+        </mat-expansion-panel-header>
+        <multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
+          [data]="contracts" [key]="'contract'" [appliedFilters]="prevFiltersContract" (result)="onResult($event)">
+        </multiselect-autocomplete>
+      </mat-expansion-panel>
 
-        <mat-expansion-panel>
-            <mat-expansion-panel-header>
-              <mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
-              <mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
-            </mat-expansion-panel-header>
-            <multiselect-autocomplete
-            [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
-              [data]="contracts"
-              [key]="'contract'"
-              [appliedFilters]= "prevFiltersContract"
-              (result)="onResult($event)">
-            </multiselect-autocomplete>
-            </mat-expansion-panel>
-
-          <!-- <mat-expansion-panel>
+      <!-- <mat-expansion-panel>
               <mat-expansion-panel-header>
                 <mat-panel-title>{{this.languageService.lMap.get('filterDilogPaketType')}}</mat-panel-title>
                 <mat-panel-description>{{this.languageService.lMap.get('filterDilogPaketTypeText')}}</mat-panel-description>
@@ -70,36 +62,39 @@
               </multiselect-autocomplete>
               </mat-expansion-panel> -->
 
-          <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
-                  <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
-                </mat-expansion-panel-header>
-                <mat-form-field appearance="fill" style="width: 48%;">
-                  <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
-                  <input (input)="this.onDateSelect()" 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 (input)="this.onDateSelect()" 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>
-            </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-form-field appearance="fill" style="width: 48%;">
+          <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
+          <input (input)="this.onDateSelect()" 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 (input)="this.onDateSelect()" 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>
+      </mat-expansion-panel>
 
-            <mat-expansion-panel>
-              <mat-expansion-panel-header>
-                <mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled"  [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
-                <mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
-              </mat-expansion-panel-header>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
+              class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
+        </mat-expansion-panel-header>
 
-              <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete mit Intervall > 1 Jahr!</mat-checkbox>
-          </mat-expansion-panel>
+        <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
+          mit Intervall > 1 Jahr!</mat-checkbox>
+      </mat-expansion-panel>
     </mat-accordion>
 
     <!-- <mat-form-field appearance="fill" style="width: 100%;" >
@@ -158,8 +153,10 @@
     <br><br> -->
     <br>
     <mat-dialog-actions align="end">
-      <button  mat-raised-button  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>
+      <button mat-raised-button 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>
     </mat-dialog-actions>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
index d514949..6a868f0 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
+++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
@@ -5,3 +5,23 @@
 .chip-list-wrapper {
   min-height: 3em;
 }
+
+.custom-form-field {
+  height: 56px;
+  align-items: center;
+}
+
+.custom-form-field .form-field-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.custom-form-field input[matInput] {
+  flex: 1;
+  margin-left: 8px;
+}
+
+.custom-form-field mat-checkbox {
+  margin-right: 8px; 
+}
diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
index 4537a24..ed18b4a 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
+++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
@@ -1,4 +1,3 @@
-
 <div class="chip-list-wrapper">
   <mat-chip-list #chipList>
     <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
@@ -7,43 +6,38 @@
         <mat-icon class="mat-chip-remove">cancel</mat-icon>
       </mat-chip>
     </ng-container>
-    <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">... {{selectData.length-20}} weitere
+    <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
+      {{selectData.length-20}} weitere
     </mat-chip>
   </mat-chip-list>
 </div>
 
-<mat-form-field class="full-width" appearance="fill" (onmouseover)="this.showCheckBox()"(onmouseout)="this.hideCheckBox()">
-  <input matInput type="text"
-  [placeholder]="placeholder"
-  [matAutocomplete]="auto"
-  [formControl]="selectControl">
-  <mat-checkbox *ngIf="this.showCheckbox == true"
-  [checked]="this.allSelected"
-  [(indeterminate)]="indeterminate"
-  (change)="this.toggleAll()"></mat-checkbox>
+<mat-form-field class="full-width custom-form-field" appearance="fill">
+  <div class="form-field-container">
+    <mat-checkbox [checked]="allSelected" [(indeterminate)]="indeterminate" (change)="toggleAll()"></mat-checkbox>
+    <input matInput type="text" [placeholder]="placeholder" [matAutocomplete]="auto" [formControl]="selectControl">
+  </div>
 </mat-form-field>
 
 
 
+
 <!-- <mat-form-field>
   <input type="text"
     [placeholder]="placeholder"
     matInput
     [matAutocomplete]="auto"> -->
-  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary"  >
-    <cdk-virtual-scroll-viewport
-            [ngStyle]="{height: '200px'}"
-            itemSize="25">
-              <mat-option *cdkVirtualFor="let data of filteredData" color="primary">
-              <div (click)="optionClicked($event, data)">
-                <mat-checkbox [checked]="data.selected" color="primary"
-                  (change)="toggleSelection(data)"
-                  (click)="$event.stopPropagation()">
-                  {{ data.item }}
-                </mat-checkbox>
-              </div>
-              </mat-option>
-          </cdk-virtual-scroll-viewport>
-  </mat-autocomplete>
+<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary">
+  <cdk-virtual-scroll-viewport [ngStyle]="{height: '200px'}" itemSize="25">
+    <mat-option *cdkVirtualFor="let data of filteredData" color="primary">
+      <div (click)="optionClicked($event, data)">
+        <mat-checkbox [checked]="data.selected" color="primary" (change)="toggleSelection(data)"
+          (click)="$event.stopPropagation()">
+          {{ data.item }}
+        </mat-checkbox>
+      </div>
+    </mat-option>
+  </cdk-virtual-scroll-viewport>
+</mat-autocomplete>
 
-<!-- </mat-form-field> -->
+<!-- </mat-form-field> -->
\ No newline at end of file
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 7b74cc6..e7d0454 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 
 .head {
@@ -80,10 +80,10 @@
 #topbar {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   height: 57px;
-  margin-bottom: 30px;
+  margin-bottom: 9px;
   animation: slideUp 1.5s forwards;
+  gap: 10px;
   /* Adjust '2s' to control the speed of the animation */
 }
 
@@ -256,17 +256,18 @@
 
 
 .dateButton {
+  height: 70%;
   width: 59px;
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: rgb(255, 255, 255);
   border-width: 1px;
   border: none;
   border-bottom: 1px;
   border-top-right-radius: 4px;
+  border: solid 1px rgba(0, 0, 0, 0.124);
+  border-radius: 8px;
 }
 
 .dateButton:hover {
-  border-width: 2px;
-  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 7aa0cf3..e002ee6 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,5 +1,5 @@
 <div class="head">
-  <h2>Change Calendar</h2>
+  <h2>W&I Kalender</h2>
 
   <!-- User -->
   <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
@@ -17,67 +17,58 @@
 </div>
 
 <div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
-  <!-- Date Range Picker  -->
-  <div style="display: flex; gap: 10px;">
-    <div style="display: flex;">
-      <mat-form-field appearance="fill" style="width: 237px;">
-        <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
-        <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
-          <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
-          <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
-        </mat-date-range-input>
-        <!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
-        <mat-date-range-picker #picker></mat-date-range-picker>
-        <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
-        <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
-      </mat-form-field>
 
-      <button mat-basic-button class="dateButton" color=""
-        (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
-    </div>
 
-    <!-- Language Picker -->
-    <mat-form-field style="width: 90px;" appearance="fill">
-      <mat-label>{{languageService.lMap.get('language')}}</mat-label>
-      <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
-        <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
-          {{lang}}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+  <!-- Language Picker -->
+  <mat-form-field style="width: 90px;" appearance="fill">
+    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
+    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
+      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
+        {{lang}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
 
 
 
-    <!-- Preset Picker -->
-    <mat-form-field appearance="fill" style="width: 300px;">
-      <mat-label>Preset</mat-label>
-      <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
-        <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
-          <mat-option *ngFor="let preset of group.presets" [value]="preset">
-            {{preset.name}}
-            <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+  <!-- Preset Picker -->
+  <mat-form-field appearance="fill" style="width: 300px;">
+    <mat-label>Preset</mat-label>
+    <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
+      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+        <mat-option *ngFor="let preset of group.presets" [value]="preset">
+          {{preset.name}}
+          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
           <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
-          </mat-option>
-        </mat-optgroup>
-      </mat-select>
-    </mat-form-field>
+        </mat-option>
+      </mat-optgroup>
+    </mat-select>
+  </mat-form-field>
 
-    <button mat-basic-button *ngIf="isUserPreset" class="editButton"
-      (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
-    <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
-      (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
+  <button mat-basic-button *ngIf="isUserPreset" class="editButton"
+    (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
+  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
+    (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
 
-    <!-- Restart Button -->
-    <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
-      <mat-icon>restart_alt</mat-icon>
-    </button>
-  </div>
+  <!-- Restart Button -->
+  <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
+    <mat-icon>restart_alt</mat-icon>
+  </button>
 </div>
 
 
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
   <div class="left">
 
+    <button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
+      {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
+    </button>
+
+    <button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
+      style="background-color: transparent;" (click)="clearFilter()">
+      {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
+    </button>
+
     <button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
       aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
 
@@ -96,9 +87,7 @@
     <button *ngIf="implementerButton" class="filterButton" aria-label="Filtern"
       (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
 
-    <button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
-      {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
-    </button>
+
 
     <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
 
@@ -106,148 +95,165 @@
     <button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);"
       (click)="openSaveUnderDialog()">Speichern unter</button>
 
-    <button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
-      style="background-color: transparent;" (click)="clearFilter()">
-      {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
-    </button>
+
   </div>
 
   <!-- <div class="split"></div> -->
 
   <div class="right">
-    <!-- Scale Picker -->
-    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style"
-      [(ngModel)]="selectedScalar">
-      <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
-        [value]="scalar">
-        {{scalar}}
-      </mat-button-toggle>
-    </mat-button-toggle-group>
+    <!-- Date Range Picker  -->
+      <div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
+        <div style="height: 70%; display: flex; align-items: center; width: 160px; font-family: Arial, sans-serif; font-weight: 600;">
+          <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
+          <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+            <input matStartDate formControlName="start"
+              (dateChange)="startDateChanged($event)">
+            <input matEndDate formControlName="end"(dateChange)="endDateChanged($event)">
+          </mat-date-range-input>
+          <!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
+          <mat-date-range-picker #picker></mat-date-range-picker>
+          <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
+          <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+        </div>
 
-    <div class="detailsButton">
-      {{languageService.lMap.get('detailButton')}}
-      <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
-        (change)="refreshData()"></mat-slide-toggle>
+        <button class="dateButton"
+          (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+      </div>
+
+      <!-- Scale Picker -->
+      <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
+        name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
+        <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
+          [value]="scalar">
+          {{scalar}}
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+
+      <div class="detailsButton">
+        {{languageService.lMap.get('detailButton')}}
+        <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
+          (change)="refreshData()"></mat-slide-toggle>
+      </div>
     </div>
   </div>
-</div>
 
-<div
-  *ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
-  id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;">
-  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet" />
-</div>
+  <div
+    *ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
+    id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet" />
+  </div>
 
 
 
 
-<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
-<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
-  [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
-  [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
-  [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
-  [highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
-  [projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true' [enableMultiTaskbar]='true'
-  [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true" [allowFiltering]="false"
-  [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings" [tooltipSettings]="tooltipSettings"
-  [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" gridLines="Both"
-  (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
-  (taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
-  (toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)"
-  (created)="created($event)" (dataBound)="dataBound($event)" (load)="load($event)"
-  (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
+  <!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
+  <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
+    [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
+    [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
+    [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
+    [highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
+    [projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true'
+    [enableMultiTaskbar]='true' [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true"
+    [allowFiltering]="false" [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings"
+    [tooltipSettings]="tooltipSettings" [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)"
+    gridLines="Both" (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
+    (taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
+    (toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)"
+    (rowDeselected)="rowDeselected($event)" (created)="created($event)" (dataBound)="dataBound($event)"
+    (load)="load($event)" (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
 
 
-  <ng-template #tooltipSettingsTaskbar let-data>
-    <div>
-      <table>
-        <ng-container>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
-              {{data.taskData.resources[0].resourceName}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
-              {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
-              {{data.taskData.resources[0].packageName}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
-              {{data.taskData.resources[0].vertragName}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
-              {{data.taskData.resources[0].supportGroup}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
-              {{data.taskData.resources[0].coordinatorSg}}</td>
-          </tr>
-          <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
-              {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
-          </tr>
-          <!-- <tr>
+    <ng-template #tooltipSettingsTaskbar let-data>
+      <div>
+        <table>
+          <ng-container>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
+                {{data.taskData.resources[0].resourceName}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
+                {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
+                {{data.taskData.resources[0].packageName}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
+                {{data.taskData.resources[0].vertragName}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
+                {{data.taskData.resources[0].supportGroup}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
+                {{data.taskData.resources[0].coordinatorSg}}</td>
+            </tr>
+            <tr>
+              <td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
+                {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
+            </tr>
+            <!-- <tr>
             <td style="padding:3px"> Date: {{data.TaskID}}</td>
           </tr> -->
 
-        </ng-container>
-      </table>
-    </div>
-  </ng-template>
-</ejs-gantt>
+          </ng-container>
+        </table>
+      </div>
+    </ng-template>
+  </ejs-gantt>
 
-<app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
-  [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
-  [filters]="filters"></app-plan-time-bar>
+  <app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
+    [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
+    [filters]="filters"></app-plan-time-bar>
 
-<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
-  <h2>Die Suche lieferte keine Ergebnisse</h2>
-</div>
-<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
-  <h2>The search did not return any results</h2>
-</div>
-<!-- [filterSettings]="filterSettings" -->
+  <div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
+    <h2>Die Suche lieferte keine Ergebnisse</h2>
+  </div>
+  <div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
+    <h2>The search did not return any results</h2>
+  </div>
+  <!-- [filterSettings]="filterSettings" -->
 
-<mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
-  (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
-  [showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
-  [pageIndex]="0" aria-label="Seite auswählen">
-</mat-paginator>
+  <mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
+    (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
+    [showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
+    [pageIndex]="0" aria-label="Seite auswählen">
+  </mat-paginator>
 
-<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
-  <mat-card-header>
-    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-      {{errorService.getLastError('rsso').name}}</mat-card-title>
-    <mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
-  </mat-card-header>
-  <mat-card-content>
-    <p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
-  </mat-card-content>
-</mat-card>
+  <mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
+    <mat-card-header>
+      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+        {{errorService.getLastError('rsso').name}}</mat-card-title>
+      <mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
+    </mat-card-content>
+  </mat-card>
 
 
-<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
-  <mat-card-header>
-    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-      {{errorService.getLastError('critical').name}}</mat-card-title>
-    <mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
-  </mat-card-header>
-  <mat-card-content>
-    <p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
-  </mat-card-content>
-</mat-card>
+  <mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
+    <mat-card-header>
+      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+        {{errorService.getLastError('critical').name}}</mat-card-title>
+      <mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
+    </mat-card-content>
+  </mat-card>
 
-<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
-  <mat-card-header>
-    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-      {{errorService.getLastError('error').name}}</mat-card-title>
-    <mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
-  </mat-card-header>
-  <mat-card-content>
-    <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
-  </mat-card-content>
-</mat-card>
\ No newline at end of file
+  <mat-card style="width: 50%; margin: auto;"
+    *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
+    <mat-card-header>
+      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+        {{errorService.getLastError('error').name}}</mat-card-title>
+      <mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
+    </mat-card-content>
+  </mat-card>
\ No newline at end of file