Filter Presets Frontend Anpassung

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

@@ -22,6 +22,8 @@
           [placeholder]="userSupportGroup"
           [data]="supportGroups"
           [key]="'supportGroup'"
+          [appliedFilters]= "appliedFiltersSg"
+
           (result)="onResult($event)">
         </multiselect-autocomplete>
         </mat-expansion-panel>

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

@@ -51,6 +51,15 @@ export class FilterDialogComponent implements OnInit {
   public textFilter = [];
   public dateFilter = [];
   public filterLabels: string[] = [];
+
+  public appliedFilterText: string;
+  public appliedFiltersSg: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public appliedFiltersStatus: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public appliedFiltersContract: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public appliedFiltersPaketType: string[] = ["Vertrieb - Vertriebsstellenbetreuung Nord", "Vertrieb - Vertriebsstellenbetreuung West", "Vertrieb - Vertriebsstellenbetreuung Süd", "Vertrieb - Vertriebsstellenbetreuung Ost"];
+  public appliedFilterDateFrom: Date;
+  public appliedFilterDateTo: Date;
+
   public filterObj;
 
   /**

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

@@ -10,14 +10,19 @@
   </mat-chip-list>
 </div>
 
-<mat-form-field class="full-width" appearance="fill">
+<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>
 
 
+
 <!-- <mat-form-field>
   <input type="text"
     [placeholder]="placeholder"

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

@@ -27,12 +27,16 @@ export class MultiselectAutocompleteComponent implements OnInit {
   @Input() placeholder: string = 'Select Data';
   @Input() data: Array<string> = [];
   @Input() key: string = '';
+  @Input() appliedFilters: Array<string> = [];
   selectControl = new FormControl();
 
   rawData: Array<ItemData> = [];
   selectData: Array<ItemData> = [];
   filteredData: Observable<Array<ItemData>>;
   filterString: string = '';
+  showCheckbox: boolean = true;
+  allSelected: boolean = false;
+  indeterminate: boolean = false;
 
   /**
   * The constructor maps the default values
@@ -44,11 +48,14 @@ export class MultiselectAutocompleteComponent implements OnInit {
       map(filter => this.filter(filter))
     );
 
+
   }
   /**
   * The function ngOnInit imports the data (filter options) and maps it
   */
   ngOnInit(): void {
+
+
     this.data.forEach((item: string) => {
       this.rawData.push({ item, selected: false });
     });
@@ -61,9 +68,23 @@ export class MultiselectAutocompleteComponent implements OnInit {
           ],
        },
     });
+    console.log(this.appliedFilters);
+    console.log(this.rawData);
 
+    if(this.appliedFilters.length > 0){
+      for (const filter of this.appliedFilters) {
+        for (const item of this.rawData) {
+          if(item.item == filter){
+            item.selected = true;
+            this.toggleSelection({'item': filter, selected: false});
+          }
+        }
+      }
+    }
+    this.evaluateIndeterminate();
   }
 
+
   /**
   * The function filter filters the list with the select options
   * @param filter text to search for
@@ -95,6 +116,8 @@ export class MultiselectAutocompleteComponent implements OnInit {
   * it builds the base for many filter select option
   */
   toggleSelection = (data: ItemData): void => {
+    console.log(data);
+    console.log(this.selectData);
     data.selected = !data.selected;
     if (data.selected === true) {
       this.selectData.push(data);
@@ -104,6 +127,7 @@ export class MultiselectAutocompleteComponent implements OnInit {
     }
     this.selectControl.setValue(this.selectData);
     this.emitAdjustedData();
+    this.evaluateIndeterminate();
   };
   /**
   * The emitAdjustedData emits the selected options the the parent component
@@ -123,6 +147,66 @@ export class MultiselectAutocompleteComponent implements OnInit {
   */
   removeChip = (data: ItemData): void => {
     this.toggleSelection(data);
+    for (const rawItem of this.rawData) {
+      if(data.item == rawItem.item){
+        rawItem.selected = false;
+      }
+    }
   };
 
+  public toggleAll(): void{
+    this.allSelected = !this.allSelected;
+    if(this.allSelected == false){
+      console.log('####false'+this.allSelected);
+      for (const item of this.rawData) {
+        item.selected = false;
+
+        const i = this.selectData.findIndex(value => value.item === item.item);
+        this.selectData.splice(i, 1);
+
+        this.selectControl.setValue(this.selectData);
+
+        //this.toggleSelection({'item': item.item, 'selected': false});
+      }
+      this.emitAdjustedData();
+    }else{
+      console.log('####true'+this.allSelected);
+      for (const item of this.rawData) {
+        item.selected = true;
+
+        this.selectData.push(item);
+        this.selectControl.setValue(this.selectData);
+
+        //this.toggleSelection({'item': item.item, 'selected': true});
+      }
+      // for (let rawItem of this.rawData) {
+      //     rawItem.selected = false;
+      // }
+      this.emitAdjustedData();
+    }
+    this.evaluateIndeterminate();
+  }
+
+  public showCheckBox(): void{
+    this.showCheckbox = true;
+    console.log("####")
+  }
+  public hideCheckBox(): void{
+    this.showCheckbox = false;
+  }
+
+  public evaluateIndeterminate():void{
+    if(this.selectData.length == 0){
+      this.indeterminate = false;
+      this.allSelected = false;
+    }
+    if(this.selectData.length > 0 && this.selectData.length<this.rawData.length){
+      this.indeterminate = true;
+    }
+    if(this.selectData.length == this.rawData.length){
+      this.indeterminate = false;
+      this.allSelected = true;
+    }
+  }
+
 }

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

@@ -625,7 +625,7 @@ export class NttGanttComponent implements OnInit {
   public dataBound(args: any) {
     console.log(args);
     this.spin = false;
-    if(this.sortSelectorName){
+    if(this.sortEnabled && this.sortSelectorName){
       this.selectSortedColumn(this.sortSelectorName);
     }
 
@@ -762,14 +762,30 @@ export class NttGanttComponent implements OnInit {
             this.sortSelectorName = args.target.firstChild.innerText;
             this.sortEnabled = true;
             if(this.oldSort != null && this.oldSort.column == this.sort.column){
-              mode = 'dsc'
+              mode = 'dsc';
             }
-            this.oldSort = this.sort;
-            this.sort = {'column': colName, 'mode': mode}
+            if(this.sort == null){
+              this.sort = {'column': colName, 'mode': mode}
+              this.oldSort = this.sort;
+            }else{
+              this.oldSort = this.sort;
+              this.sort = {'column': colName, 'mode': mode}
+            }
+
+
+            if(this.oldSort != null && this.oldSort.mode == 'dsc'){
+              this.sort = null;
+              this.oldSort = null;
+              this.sortEnabled = false;
+              this.sortSelectorName = null;
+            }
+            this.oldSort;
+            this.sort;
             this.refreshData();
           }else{
             this.sortSelectorName = null;
             args.cancel = true;
+
           }
         }