filterDialog Anpassung

frontend/src/app/data.service.ts

@@ -480,9 +480,9 @@ export class DataService {
   * @returns true or false for a boolean flag
   */
   private validateApproval(resp):boolean{
-    console.log(resp.changeNr);
+    // console.log(resp.changeNr);
-    console.log(resp.approvalStatus);
+    // console.log(resp.approvalStatus);
-    console.log('\n');
+    // console.log('\n');
     if(resp.approvalStatus!=undefined && resp.approvalStatus!="0"){
       return true;
     }else{
@@ -512,6 +512,30 @@ export class DataService {
     }
     return "";
   }
+
+  public getContractNameByID(contractId){
+      for (let contract of this.contracts) {
+        if(contractId == contract.id){
+          return contract.name;
+        }
+      }
+  }
+
+  public getPaketTypeNameByID(paketTypeId){
+      for (let paketType of this.paketTypes) {
+        if(paketTypeId == paketType.id){
+          return paketType.name;
+        }
+      }
+  }
+
+  public getPaketTypeIdByName(paketTypeName){
+      for (let paketType of this.paketTypes) {
+        if(paketTypeName == paketType.name){
+          return paketType.id;
+        }
+      }
+  }
 }
 
 

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

@@ -22,8 +22,7 @@
           [placeholder]="userSupportGroup"
           [data]="supportGroups"
           [key]="'supportGroup'"
-          [appliedFilters]= "appliedFiltersSg"
+          [appliedFilters]= "prevFiltersSg"
-
           (result)="onResult($event)">
         </multiselect-autocomplete>
         </mat-expansion-panel>
@@ -37,6 +36,7 @@
           [placeholder]="languageService.lMap.get('filterDilogSearchState')"
             [data]="states"
             [key]="'state'"
+            [appliedFilters]= "prevFiltersState"
             (result)="onResult($event)">
           </multiselect-autocomplete>
           </mat-expansion-panel>
@@ -50,6 +50,7 @@
             [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
               [data]="contracts"
               [key]="'contract'"
+              [appliedFilters]= "prevFiltersContract"
               (result)="onResult($event)">
             </multiselect-autocomplete>
             </mat-expansion-panel>
@@ -63,6 +64,7 @@
               [placeholder]="languageService.lMap.get('filterDilogSearchPt')"
                 [data]="paketTypes"
                 [key]="'paketType'"
+                [appliedFilters]= "prevFiltersPaketType"
                 (result)="onResult($event)">
               </multiselect-autocomplete>
               </mat-expansion-panel>

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

@@ -40,6 +40,8 @@ export class FilterDialogComponent implements OnInit {
   public contracts: string[] = [];
   public userSupportGroup: string;
 
+  public prevFilters: any[]=[];
+
   public criteria: string;
   public filterStartDate: Date;
   public filterEndDate: Date;
@@ -52,13 +54,13 @@ export class FilterDialogComponent implements OnInit {
   public dateFilter = [];
   public filterLabels: string[] = [];
 
-  public appliedFilterText: string;
+  public prevFilterText: string;
-  public appliedFiltersSg: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public prevFiltersSg: string[] = [];
-  public appliedFiltersStatus: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public prevFiltersState: string[] = [];
-  public appliedFiltersContract: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public prevFiltersContract: string[] = [];
-  public appliedFiltersPaketType: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public prevFiltersPaketType: string[] = [];
-  public appliedFilterDateFrom: Date;
+  public prevFilterDateFrom: Date;
-  public appliedFilterDateTo: Date;
+  public prevFilterDateTo: Date;
 
   public filterObj;
 
@@ -71,16 +73,71 @@ export class FilterDialogComponent implements OnInit {
   */
   constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
     //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn));
+
+    if(data[0].filters){
+      ////console.log(data[0].filters.filterElement);
+      this.prevFilters = data[0].filters.filterElement;
+    }
+    if(data[0].userSg){
+      this.userSupportGroup = data[0].userSg;
+    }
   }
 
   /**
   * The function ngOnInit initialized the component by fetching all relevant data via the dataService
   */
   ngOnInit(): void {
+    console.log(this.prevFilters);
+    if(this.prevFilters.length > 0){
+      for (const filter of this.prevFilters) {
+        //console.log(filter);
+
+        if(filter.column == "SupportGroup"){
+          //console.log(filter);
+          this.prevFiltersSg = filter.criteria;
+        }
+
+        if(filter.column == "State"){
+          //console.log(filter);
+          if(this.languageService.language == "DE"){
+            for (const crit of filter.criteria) {
+              this.prevFiltersState.push(this.dataService.getStates().find((item)=> {return item.stateNameEN == crit;}).stateNameDE);
+            }
+          }else{
+          this.prevFiltersState = filter.criteria;
+          }
+        }
+
+        if(filter.column == "Contract"){
+          //console.log(filter);
+          for (const crit of filter.criteria) {
+            this.prevFiltersContract.push(this.dataService.getContractName(crit));
+          }
+          //this.prevFiltersContract = filter.criteria;
+        }
+
+        if(filter.column == "PackageType"){
+          //console.log("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF");
+          //console.log(this.dataService.getPaketTypes());
+          for (const crit of filter.criteria) {
+            console.log(crit);
+            this.prevFiltersPaketType.push(this.dataService.getPaketTypeNameByID(crit));
+          }
+          console.log(this.prevFiltersPaketType);
+          //this.prevFiltersPaketType = filter.criteria;
+        }
+
+      }
+    }
+
+    if(this.prevFiltersSg.length == 0){
+      this.prevFiltersSg[0] = this.userSupportGroup;
+    }
+
       this.dataService.fetchUserSupportGroup().then((res:any)=>{
         this.userSupportGroup = res.name;
       });
-      console.log(this.userSupportGroup);
+      //console.log(this.userSupportGroup);
       if(this.languageService.language == 'DE'){
         for (const state of this.dataService.getStates()) {
           this.states.push(state.stateNameDE);
@@ -108,55 +165,62 @@ export class FilterDialogComponent implements OnInit {
   * @param event selection event from the multiselect-autocomplete-component
   */
   onResult(event: any) {
-      console.log(event);
+      //console.log(event);
       switch (event.key) {
         case 'supportGroup':
            this.supportGroupsFilter = event.data;
+           this.supportGroupsFilter = [...new Set(this.supportGroupsFilter)];
         break;
         case 'state':
           if(this.languageService.language == 'DE'){
-            console.log(event.data);
+            //console.log(event.data);
             for (const state of event.data) {
               if(this.dataService.getStates().find((item)=> {return item.stateNameDE == state;})){
                 this.statesFilter.push(this.dataService.getStates().find((item)=> {return item.stateNameDE == state;}).stateNameEN);
               }
-              console.log(this.statesFilter);
+              // //console.log(this.statesFilter);
             }
           }else{
-            console.log(event.data);
+            //console.log(event.data);
             for (const state of event.data) {
               if(this.dataService.getStates().find((item)=> {return item.stateNameEN == state;})){
                 this.statesFilter.push(this.dataService.getStates().find((item)=> {return item.stateNameEN == state;}).stateNameEN);
               }
-              console.log(this.statesFilter);
+              // //console.log(this.statesFilter);
             }
           }
-
+          this.statesFilter = [...new Set(this.statesFilter)];
+          //console.log(this.statesFilter);
           break;
-          case 'contract':
+        case 'contract':
             //this.contractsFilter = event.data;
-              console.log(event.data);
+            this.contractsFilter = [];
+              //console.log(event.data);
               for (const contract of event.data) {
                 if(this.dataService.getContracts().find((item)=> {return item.name == contract;})){
                   this.contractsFilter.push(this.dataService.getContracts().find((item)=> {return item.name == contract;}).id);
                 }
-                console.log(this.contractsFilter);
+
               }
+              //this.contractsFilter = [...new Set(this.contractsFilter)];
+              //console.log(this.contractsFilter);
             break;
-            case 'paketType':
+        case 'paketType':
               //this.paketTypesFilter = event.data;
-              console.log(event.data);
+              this.paketTypesFilter = [];
+              //console.log(event.data);
               for (const paketType of event.data) {
-                if(this.dataService.getPaketTypes().find((item)=> {return item.name == paketType;})){
+                if(this.dataService.getPaketTypeIdByName(paketType)){
-                  this.paketTypesFilter.push(this.dataService.getPaketTypes().find((item)=> {return item.name == paketType;}).id);
+                  this.paketTypesFilter.push(this.dataService.getPaketTypeIdByName(paketType));
                 }
-                console.log(this.paketTypesFilter);
+
               }
+              // this.paketTypesFilter = [...new Set(this.paketTypesFilter)];
+              //console.log(this.paketTypesFilter);
             break;
         default:
           break;
       }
-
   }
 
   /**
@@ -194,7 +258,7 @@ export class FilterDialogComponent implements OnInit {
         "filter": "equals",
         "criteria": this.supportGroupsFilter
         });
-        console.log(this.supportGroupsFilter);
+        //console.log(this.supportGroupsFilter);
     }else{
       filterElement.push({
         "column": "SupportGroup",

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

@@ -1,12 +1,14 @@
 
 <div class="chip-list-wrapper">
   <mat-chip-list #chipList>
-    <ng-container *ngFor="let select of selectData">
+    <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
       <mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
         {{ select.item }}
         <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>
   </mat-chip-list>
 </div>
 

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

@@ -5,7 +5,6 @@ import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 ​
 
-
 export interface ItemData {
   item: string;
   selected: boolean;
@@ -54,8 +53,6 @@ export class MultiselectAutocompleteComponent implements OnInit {
   * The function ngOnInit imports the data (filter options) and maps it
   */
   ngOnInit(): void {
-
-
     this.data.forEach((item: string) => {
       this.rawData.push({ item, selected: false });
     });
@@ -75,12 +72,14 @@ export class MultiselectAutocompleteComponent implements OnInit {
       for (const filter of this.appliedFilters) {
         for (const item of this.rawData) {
           if(item.item == filter){
+            console.log("MATCH"+item.item);
             item.selected = true;
             this.toggleSelection({'item': filter, selected: false});
           }
         }
       }
     }
+    console.log(this.selectData);
     this.evaluateIndeterminate();
   }
 
@@ -116,8 +115,8 @@ export class MultiselectAutocompleteComponent implements OnInit {
   * it builds the base for many filter select option
   */
   toggleSelection = (data: ItemData): void => {
-    console.log(data);
+    //console.log(data);
-    console.log(this.selectData);
+    //console.log(this.selectData);
     data.selected = !data.selected;
     if (data.selected === true) {
       this.selectData.push(data);
@@ -146,7 +145,8 @@ export class MultiselectAutocompleteComponent implements OnInit {
   * The removeChip removes a option from the selection list if the user presses the remove button on the chip list
   */
   removeChip = (data: ItemData): void => {
-    this.toggleSelection(data);
+    let dat = {item: data.item, selected: true};
+    this.toggleSelection(dat);
     for (const rawItem of this.rawData) {
       if(data.item == rawItem.item){
         rawItem.selected = false;
@@ -157,7 +157,7 @@ export class MultiselectAutocompleteComponent implements OnInit {
   public toggleAll(): void{
     this.allSelected = !this.allSelected;
     if(this.allSelected == false){
-      console.log('####false'+this.allSelected);
+      //console.log('####false'+this.allSelected);
       for (const item of this.rawData) {
         item.selected = false;
 
@@ -170,7 +170,7 @@ export class MultiselectAutocompleteComponent implements OnInit {
       }
       this.emitAdjustedData();
     }else{
-      console.log('####true'+this.allSelected);
+      //console.log('####true'+this.allSelected);
       for (const item of this.rawData) {
         item.selected = true;
 
@@ -189,7 +189,7 @@ export class MultiselectAutocompleteComponent implements OnInit {
 
   public showCheckBox(): void{
     this.showCheckbox = true;
-    console.log("####")
+    //console.log("####")
   }
   public hideCheckBox(): void{
     this.showCheckbox = false;

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

@@ -305,9 +305,10 @@ export class NttGanttComponent implements OnInit {
    * This function is triggered by the filter button.
   */
   openFilterDialog(){
+    console.log(this.filters);
     let dialogRef = FilterDialogComponent;
       this.matDialog.open(dialogRef,
-      {data : [], width: '50%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
+      {data : [{filters: this.filters, userSg: this.userSupportGroup}], width: '50%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
         if(res){
           this.filters = res;
           this.filterEnabled = true;