From 8cbc2597161f1fc620b90f8c5b5c725dfeeb8fc1 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Wed, 31 Jul 2024 15:43:46 +0200 Subject: [PATCH] changed datepicker dialog --- frontend/src/app/app.module.ts | 4 +- .../filter-dialog.component.html | 25 +- .../filter-dialog/filter-dialog.component.ts | 301 +++++++++--------- 3 files changed, 179 insertions(+), 151 deletions(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index f202db1..f300b9f 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -44,7 +44,6 @@ import {MatBadgeModule} from '@angular/material/badge'; import { CustomPaginatorIntl } from './custom-paginator-intl.service'; - @NgModule({ declarations: [ AppComponent, @@ -88,10 +87,8 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service'; MatButtonToggleModule, MatCardModule, MatBadgeModule - ], - providers: [ToolbarService, EditService, SelectionService, @@ -99,6 +96,7 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service'; SortService, FilterService, { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }, + ReactiveFormsModule ], bootstrap: [AppComponent] }) diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.html b/frontend/src/app/filter-dialog/filter-dialog.component.html index 7e0e498..2e60ff8 100644 --- a/frontend/src/app/filter-dialog/filter-dialog.component.html +++ b/frontend/src/app/filter-dialog/filter-dialog.component.html @@ -23,7 +23,7 @@ - + @@ -68,6 +68,27 @@ [matBadge]="''" class="dot-badge"> {{this.languageService.lMap.get('filterDilogDateText')}} + + + {{this.languageService.lMap.get('filterDilogDate')}} + + + + + + + + + + diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.ts b/frontend/src/app/filter-dialog/filter-dialog.component.ts index d53eadc..41a65ca 100644 --- a/frontend/src/app/filter-dialog/filter-dialog.component.ts +++ b/frontend/src/app/filter-dialog/filter-dialog.component.ts @@ -4,9 +4,10 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { DataService } from '../data.service'; import { MAT_DATE_FORMATS } from '@angular/material/core' +import { FormGroup, FormBuilder } from '@angular/forms'; -export interface FilterAttribute{ -name: string, +export interface FilterAttribute { + name: string, } export const MY_DATE_FORMATS = { @@ -53,7 +54,7 @@ export class FilterDialogComponent implements OnInit { public dateFilter = []; public intervallFilter: boolean; - public prevFilters: any[]=[]; + public prevFilters: any[] = []; public prevFilterText: string; public prevFiltersSg: string[] = []; @@ -75,6 +76,7 @@ export class FilterDialogComponent implements OnInit { public IntervallEnabled: boolean = false; public filterObj; + public range: FormGroup; /** @@ -84,17 +86,21 @@ export class FilterDialogComponent implements OnInit { * @param data contains an array of Changes which should be sent to the backend for a status transition * @param dataService injects the dataService for data management and backend communication */ - constructor(public languageService: LanguageService, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) { + constructor(public languageService: LanguageService, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar, private fb: FormBuilder) { //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn)); + this.range = this.fb.group({ + start: [null], + end: [null] + }); - if(data[0].filters){ + if (data[0].filters) { ////console.log(data[0].filters.filterElement); this.prevFilters = data[0].filters.filterElement; } - if(data[0].userSg){ + if (data[0].userSg) { this.userSupportGroup = data[0].userSg; } - this.dataService.fetchUserSupportGroup().then((res:any)=>{ + this.dataService.fetchUserSupportGroup().then((res: any) => { console.log("\nNEW FETCHED USER SG IN FILTERCOMPONEN"); this.userSupportGroup = res.name; }); @@ -105,31 +111,31 @@ export class FilterDialogComponent implements OnInit { */ ngOnInit(): void { //console.log(this.prevFilters); - if(this.prevFilters.length > 0){ + if (this.prevFilters.length > 0) { for (const filter of this.prevFilters) { //console.log(filter); - if(filter.column == "SupportGroup"){ + if (filter.column == "SupportGroup") { console.log("\nPREVSUPPORTGROUPSFILTER") console.log(filter); this.prevFiltersSg = filter.criteria; this.FiltersSgEnabled = false; } - if(filter.column == "State"){ + if (filter.column == "State") { this.StateEnabled = true; console.log("\nStatesfilter prev") console.log(filter); - if(this.languageService.language == "DE"){ + if (this.languageService.language == "DE") { for (const crit of filter.criteria) { - this.prevFiltersState.push(this.dataService.getStates().find((item)=> {return item.stateNameEN == crit;}).stateNameDE); + this.prevFiltersState.push(this.dataService.getStates().find((item) => { return item.stateNameEN == crit; }).stateNameDE); } - }else{ - this.prevFiltersState = filter.criteria; + } else { + this.prevFiltersState = filter.criteria; } } - if(filter.column == "Contract"){ + if (filter.column == "Contract") { this.ContractEnabled = true; //console.log(filter); for (const crit of filter.criteria) { @@ -149,53 +155,53 @@ export class FilterDialogComponent implements OnInit { // //this.prevFiltersPaketType = filter.criteria; // } - if(filter.column == "D2"){ + if (filter.column == "D2") { this.DateEnabled = true; this.filterStartDate = filter.criteria[0]; this.filterEndDate = filter.criteria[1]; } - if(filter.column == "ResourceName"){ + if (filter.column == "ResourceName") { this.TextEnabled = true; this.criteria = filter.criteria[0]; } - if(filter.column == "ASF_WI_HighestIntervall"){ + if (filter.column == "ASF_WI_HighestIntervall") { this.IntervallEnabled = true; this.intervallFilter = true; } } } - if(this.prevFiltersSg.length == 0){ + if (this.prevFiltersSg.length == 0) { this.prevFiltersSg[0] = this.userSupportGroup; } - //console.log(this.userSupportGroup); - if(this.languageService.language == 'DE'){ - for (const state of this.dataService.getStates()) { - this.states.push(state.stateNameDE); - } - }else{ - for (const state of this.dataService.getStates()) { - this.states.push(state.stateNameEN); - } + //console.log(this.userSupportGroup); + if (this.languageService.language == 'DE') { + for (const state of this.dataService.getStates()) { + this.states.push(state.stateNameDE); } + } else { + for (const state of this.dataService.getStates()) { + this.states.push(state.stateNameEN); + } + } - for (const supportGroup of this.dataService.getSupportGroups()) { - console.log("\nPUSHING SUPPORTGROUPS STORED IN DATASERVICE"); - this.supportGroups.push(supportGroup.name); - } - // this.supportGroups.push(this.userSupportGroup); + for (const supportGroup of this.dataService.getSupportGroups()) { + console.log("\nPUSHING SUPPORTGROUPS STORED IN DATASERVICE"); + this.supportGroups.push(supportGroup.name); + } + // this.supportGroups.push(this.userSupportGroup); - for (const contract of this.dataService.getContracts()) { - this.contracts.push(contract.name); - } - // for (const paketType of this.dataService.getPaketTypes()) { - // this.paketTypes.push(paketType.name); - // } + for (const contract of this.dataService.getContracts()) { + this.contracts.push(contract.name); + } + // for (const paketType of this.dataService.getPaketTypes()) { + // this.paketTypes.push(paketType.name); + // } } /** @@ -204,159 +210,162 @@ export class FilterDialogComponent implements OnInit { * @param event selection event from the multiselect-autocomplete-component */ onResult(event: any) { - //console.log(event); - switch (event.key) { - case 'supportGroup': - this.supportGroupsFilter = event.data; - this.supportGroupsFilter = [...new Set(this.supportGroupsFilter)]; + //console.log(event); + switch (event.key) { + case 'supportGroup': + this.supportGroupsFilter = event.data; + this.supportGroupsFilter = [...new Set(this.supportGroupsFilter)]; break; - case 'state': - if(event.data[0]){ - this.StateEnabled = true; - }else{ - this.StateEnabled = false; - } + case 'state': + if (event.data[0]) { + this.StateEnabled = true; + } else { + this.StateEnabled = false; + } - this.statesFilter = []; - if(this.languageService.language == 'DE'){ - // 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); - } - }else{ - //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); + this.statesFilter = []; + if (this.languageService.language == 'DE') { + // 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); } - this.statesFilter = [...new Set(this.statesFilter)]; - - // console.log("\nRESULT Statesfilter"); - // console.log(this.statesFilter); - - break; - case 'contract': - if(event.data[0]){ - this.ContractEnabled = true; - }else{ - this.ContractEnabled = false; + } else { + //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); } - //this.contractsFilter = 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); - } + } + this.statesFilter = [...new Set(this.statesFilter)]; - } - //this.contractsFilter = [...new Set(this.contractsFilter)]; - //console.log(this.contractsFilter); - break; - // case 'paketType': - // //this.paketTypesFilter = event.data; - // this.paketTypesFilter = []; - // //console.log(event.data); - // for (const paketType of event.data) { - // if(this.dataService.getPaketTypeIdByName(paketType)){ - // this.paketTypesFilter.push(this.dataService.getPaketTypeIdByName(paketType)); - // } + // console.log("\nRESULT Statesfilter"); + // console.log(this.statesFilter); - // } - // // this.paketTypesFilter = [...new Set(this.paketTypesFilter)]; - // //console.log(this.paketTypesFilter); - // break; - default: - break; - } + break; + case 'contract': + if (event.data[0]) { + this.ContractEnabled = true; + } else { + this.ContractEnabled = false; + } + //this.contractsFilter = 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); + } + + } + //this.contractsFilter = [...new Set(this.contractsFilter)]; + //console.log(this.contractsFilter); + break; + // case 'paketType': + // //this.paketTypesFilter = event.data; + // this.paketTypesFilter = []; + // //console.log(event.data); + // for (const paketType of event.data) { + // if(this.dataService.getPaketTypeIdByName(paketType)){ + // this.paketTypesFilter.push(this.dataService.getPaketTypeIdByName(paketType)); + // } + + // } + // // this.paketTypesFilter = [...new Set(this.paketTypesFilter)]; + // //console.log(this.paketTypesFilter); + // break; + default: + break; + } } - public onDateSelect(){ - console.log("################################") - if(this.filterStartDate && this.filterEndDate){ + public onDateSelect() { + if (this.range.controls['start'].value && this.range.controls['end'].value) { this.DateEnabled = true; - }else{ + } else { this.DateEnabled = false; } } - /** * The function mapFilter builds a filterElement out of all the selected filters, delivers it back and closes the dialog */ - mapFilter(){ + mapFilter() { let filterElement = [] - if(this.paketTypesFilter.length > 0){ + if (this.paketTypesFilter.length > 0) { filterElement.push({ "column": "PackageType", -        "filter": "equals", -        "criteria": this.paketTypesFilter - }); + "filter": "equals", + "criteria": this.paketTypesFilter + }); } - - if(this.statesFilter.length > 0){ + if (this.statesFilter.length > 0) { filterElement.push({ "column": "State", -        "filter": "equals", -        "criteria": this.statesFilter - }); + "filter": "equals", + "criteria": this.statesFilter + }); } - - - if(this.contractsFilter.length > 0){ + if (this.contractsFilter.length > 0) { filterElement.push({ "column": "Contract", -       "filter": "equals", -       "criteria": this.contractsFilter - }); + "filter": "equals", + "criteria": this.contractsFilter + }); } - if(this.supportGroupsFilter.length > 0){ + if (this.supportGroupsFilter.length > 0) { filterElement.push({ "column": "SupportGroup", -       "filter": "equals", -       "criteria": this.supportGroupsFilter - }); - //console.log(this.supportGroupsFilter); - }else{ + "filter": "equals", + "criteria": this.supportGroupsFilter + }); + //console.log(this.supportGroupsFilter); + } else { filterElement.push({ "column": "SupportGroup", -       "filter": "equals", -       "criteria": [this.userSupportGroup] - }); + "filter": "equals", + "criteria": [this.userSupportGroup] + }); } - if(this.filterStartDate != null && this.filterEndDate != null){ + if (this.range.controls['start'].value && this.range.controls['end'].value) { filterElement.push({ "column": "D2", -       "filter": "dateRange", -       "criteria": [new Date(this.filterStartDate), new Date(this.filterEndDate)] - }); + "filter": "dateRange", + "criteria": [new Date(this.range.controls['start'].value), new Date(this.range.controls['end'].value)] + }); + } + + if (this.filterStartDate != null && this.filterEndDate != null) { + filterElement.push({ + "column": "D2", + "filter": "dateRange", + "criteria": [new Date(this.filterStartDate), new Date(this.filterEndDate)] + }); } - if(this.criteria != null && this.criteria != ""){ + if (this.criteria != null && this.criteria != "") { filterElement.push({ "column": "ResourceName", -       "filter": "contains", -       "criteria": [this.criteria] - }); + "filter": "contains", + "criteria": [this.criteria] + }); } - if(this.intervallFilter){ + if (this.intervallFilter) { filterElement.push({ "column": "ASF_WI_HighestIntervall", -       "filter": ">", -       "criteria": [365] - }); + "filter": ">", + "criteria": [365] + }); } - let filter = {filterElement: filterElement}; + let filter = { filterElement: filterElement }; console.log(filter); this.dialogRef.close(filter); }