taubem
/
ChangeCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed datepicker dialog

main
Said Gedik 2024-07-31 15:43:46 +02:00
parent d0e777e0a6
commit 8cbc259716
3 changed files with 179 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/app.module.ts
View File

@ -44,7 +44,6 @@ import {MatBadgeModule} from '@angular/material/badge';
import { CustomPaginatorIntl } from './custom-paginator-intl.service'; import { CustomPaginatorIntl } from './custom-paginator-intl.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -88,10 +87,8 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service';
MatButtonToggleModule, MatButtonToggleModule,
MatCardModule, MatCardModule,
MatBadgeModule MatBadgeModule
], ],
providers: [ToolbarService, providers: [ToolbarService,
EditService, EditService,
SelectionService, SelectionService,
@ -99,6 +96,7 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service';
SortService, SortService,
FilterService, FilterService,
{ provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }, { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
ReactiveFormsModule
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

25
frontend/src/app/filter-dialog/filter-dialog.component.html
View File

@ -23,7 +23,7 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'" <multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'"
[appliedFilters]="prevFiltersSg" (result)="onResult($event)"> [appliedFilters]="prevFiltersSg" (result)="onResult($event)">
</multiselect-autocomplete> </multiselect-autocomplete>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
@ -68,6 +68,27 @@
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>{{this.languageService.lMap.get('filterDilogDate')}}</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start"
placeholder="{{this.languageService.lMap.get('filterDilogSearchFrom')}}">
<input matEndDate formControlName="end"
placeholder="{{this.languageService.lMap.get('filterDilogSearchTo')}}">
</mat-date-range-input>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</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-form-field appearance="fill" style="width: 48%;">
<mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label> <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate"> <input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
@ -83,7 +104,7 @@
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle> <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker> <mat-datepicker #picker2></mat-datepicker>
</mat-form-field> </mat-form-field>
</mat-expansion-panel> </mat-expansion-panel> -->
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>

301
frontend/src/app/filter-dialog/filter-dialog.component.ts
View File

@ -4,9 +4,10 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { DataService } from '../data.service'; import { DataService } from '../data.service';
import { MAT_DATE_FORMATS } from '@angular/material/core' import { MAT_DATE_FORMATS } from '@angular/material/core'
import { FormGroup, FormBuilder } from '@angular/forms';
export interface FilterAttribute{ export interface FilterAttribute {
name: string, name: string,
} }
export const MY_DATE_FORMATS = { export const MY_DATE_FORMATS = {
@ -53,7 +54,7 @@ export class FilterDialogComponent implements OnInit {
public dateFilter = []; public dateFilter = [];
public intervallFilter: boolean; public intervallFilter: boolean;
public prevFilters: any[]=[]; public prevFilters: any[] = [];
public prevFilterText: string; public prevFilterText: string;
public prevFiltersSg: string[] = []; public prevFiltersSg: string[] = [];
@ -75,6 +76,7 @@ export class FilterDialogComponent implements OnInit {
public IntervallEnabled: boolean = false; public IntervallEnabled: boolean = false;
public filterObj; 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 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 * @param dataService injects the dataService for data management and backend communication
*/ */
constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) { constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar, private fb: FormBuilder) {
//dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn)); //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); ////console.log(data[0].filters.filterElement);
this.prevFilters = data[0].filters.filterElement; this.prevFilters = data[0].filters.filterElement;
} }
if(data[0].userSg){ if (data[0].userSg) {
this.userSupportGroup = 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"); console.log("\nNEW FETCHED USER SG IN FILTERCOMPONEN");
this.userSupportGroup = res.name; this.userSupportGroup = res.name;
}); });
@ -105,31 +111,31 @@ export class FilterDialogComponent implements OnInit {
*/ */
ngOnInit(): void { ngOnInit(): void {
//console.log(this.prevFilters); //console.log(this.prevFilters);
if(this.prevFilters.length > 0){ if (this.prevFilters.length > 0) {
for (const filter of this.prevFilters) { for (const filter of this.prevFilters) {
//console.log(filter); //console.log(filter);
if(filter.column == "SupportGroup"){ if (filter.column == "SupportGroup") {
console.log("\nPREVSUPPORTGROUPSFILTER") console.log("\nPREVSUPPORTGROUPSFILTER")
console.log(filter); console.log(filter);
this.prevFiltersSg = filter.criteria; this.prevFiltersSg = filter.criteria;
this.FiltersSgEnabled = false; this.FiltersSgEnabled = false;
} }
if(filter.column == "State"){ if (filter.column == "State") {
this.StateEnabled = true; this.StateEnabled = true;
console.log("\nStatesfilter prev") console.log("\nStatesfilter prev")
console.log(filter); console.log(filter);
if(this.languageService.language == "DE"){ if (this.languageService.language == "DE") {
for (const crit of filter.criteria) { 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{ } else {
this.prevFiltersState = filter.criteria; this.prevFiltersState = filter.criteria;
} }
} }
if(filter.column == "Contract"){ if (filter.column == "Contract") {
this.ContractEnabled = true; this.ContractEnabled = true;
//console.log(filter); //console.log(filter);
for (const crit of filter.criteria) { for (const crit of filter.criteria) {
@ -149,53 +155,53 @@ export class FilterDialogComponent implements OnInit {
// //this.prevFiltersPaketType = filter.criteria; // //this.prevFiltersPaketType = filter.criteria;
// } // }
if(filter.column == "D2"){ if (filter.column == "D2") {
this.DateEnabled = true; this.DateEnabled = true;
this.filterStartDate = filter.criteria[0]; this.filterStartDate = filter.criteria[0];
this.filterEndDate = filter.criteria[1]; this.filterEndDate = filter.criteria[1];
} }
if(filter.column == "ResourceName"){ if (filter.column == "ResourceName") {
this.TextEnabled = true; this.TextEnabled = true;
this.criteria = filter.criteria[0]; this.criteria = filter.criteria[0];
} }
if(filter.column == "ASF_WI_HighestIntervall"){ if (filter.column == "ASF_WI_HighestIntervall") {
this.IntervallEnabled = true; this.IntervallEnabled = true;
this.intervallFilter = true; this.intervallFilter = true;
} }
} }
} }
if(this.prevFiltersSg.length == 0){ if (this.prevFiltersSg.length == 0) {
this.prevFiltersSg[0] = this.userSupportGroup; this.prevFiltersSg[0] = this.userSupportGroup;
} }
//console.log(this.userSupportGroup); //console.log(this.userSupportGroup);
if(this.languageService.language == 'DE'){ if (this.languageService.language == 'DE') {
for (const state of this.dataService.getStates()) { for (const state of this.dataService.getStates()) {
this.states.push(state.stateNameDE); this.states.push(state.stateNameDE);
}
}else{
for (const state of this.dataService.getStates()) {
this.states.push(state.stateNameEN);
}
} }
} else {
for (const state of this.dataService.getStates()) {
this.states.push(state.stateNameEN);
}
}
for (const supportGroup of this.dataService.getSupportGroups()) { for (const supportGroup of this.dataService.getSupportGroups()) {
console.log("\nPUSHING SUPPORTGROUPS STORED IN DATASERVICE"); console.log("\nPUSHING SUPPORTGROUPS STORED IN DATASERVICE");
this.supportGroups.push(supportGroup.name); this.supportGroups.push(supportGroup.name);
} }
// this.supportGroups.push(this.userSupportGroup); // this.supportGroups.push(this.userSupportGroup);
for (const contract of this.dataService.getContracts()) { for (const contract of this.dataService.getContracts()) {
this.contracts.push(contract.name); this.contracts.push(contract.name);
} }
// for (const paketType of this.dataService.getPaketTypes()) { // for (const paketType of this.dataService.getPaketTypes()) {
// this.paketTypes.push(paketType.name); // this.paketTypes.push(paketType.name);
// } // }
} }
/** /**
@ -204,159 +210,162 @@ export class FilterDialogComponent implements OnInit {
* @param event selection event from the multiselect-autocomplete-component * @param event selection event from the multiselect-autocomplete-component
*/ */
onResult(event: any) { onResult(event: any) {
//console.log(event); //console.log(event);
switch (event.key) { switch (event.key) {
case 'supportGroup': case 'supportGroup':
this.supportGroupsFilter = event.data; this.supportGroupsFilter = event.data;
this.supportGroupsFilter = [...new Set(this.supportGroupsFilter)]; this.supportGroupsFilter = [...new Set(this.supportGroupsFilter)];
break; break;
case 'state': case 'state':
if(event.data[0]){ if (event.data[0]) {
this.StateEnabled = true; this.StateEnabled = true;
}else{ } else {
this.StateEnabled = false; this.StateEnabled = false;
} }
this.statesFilter = []; this.statesFilter = [];
if(this.languageService.language == 'DE'){ if (this.languageService.language == 'DE') {
// console.log(event.data); // console.log(event.data);
for (const state of event.data) { for (const state of event.data) {
if(this.dataService.getStates().find((item)=> {return item.stateNameDE == state;})){ if (this.dataService.getStates().find((item) => { return item.stateNameDE == state; })) {
this.statesFilter.push(this.dataService.getStates().find((item)=> {return item.stateNameDE == state;}).stateNameEN); 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);
} }
// console.log(this.statesFilter);
} }
this.statesFilter = [...new Set(this.statesFilter)]; } else {
//console.log(event.data);
// console.log("\nRESULT Statesfilter"); for (const state of event.data) {
// console.log(this.statesFilter); if (this.dataService.getStates().find((item) => { return item.stateNameEN == state; })) {
this.statesFilter.push(this.dataService.getStates().find((item) => { return item.stateNameEN == state; }).stateNameEN);
break; }
case 'contract': // console.log(this.statesFilter);
if(event.data[0]){
this.ContractEnabled = true;
}else{
this.ContractEnabled = false;
} }
//this.contractsFilter = event.data; }
this.contractsFilter = []; this.statesFilter = [...new Set(this.statesFilter)];
//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("\nRESULT Statesfilter");
//this.contractsFilter = [...new Set(this.contractsFilter)]; // console.log(this.statesFilter);
//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));
// }
// } break;
// // this.paketTypesFilter = [...new Set(this.paketTypesFilter)]; case 'contract':
// //console.log(this.paketTypesFilter); if (event.data[0]) {
// break; this.ContractEnabled = true;
default: } else {
break; 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(){ public onDateSelect() {
console.log("################################") if (this.range.controls['start'].value && this.range.controls['end'].value) {
if(this.filterStartDate && this.filterEndDate){
this.DateEnabled = true; this.DateEnabled = true;
}else{ } else {
this.DateEnabled = false; this.DateEnabled = false;
} }
} }
/** /**
* The function mapFilter builds a filterElement out of all the selected filters, delivers it back and closes the dialog * The function mapFilter builds a filterElement out of all the selected filters, delivers it back and closes the dialog
*/ */
mapFilter(){ mapFilter() {
let filterElement = [] let filterElement = []
if(this.paketTypesFilter.length > 0){ if (this.paketTypesFilter.length > 0) {
filterElement.push({ filterElement.push({
"column": "PackageType", "column": "PackageType",
       "filter": "equals", "filter": "equals",
       "criteria": this.paketTypesFilter "criteria": this.paketTypesFilter
}); });
} }
if (this.statesFilter.length > 0) {
if(this.statesFilter.length > 0){
filterElement.push({ filterElement.push({
"column": "State", "column": "State",
       "filter": "equals", "filter": "equals",
       "criteria": this.statesFilter "criteria": this.statesFilter
}); });
} }
if (this.contractsFilter.length > 0) {
if(this.contractsFilter.length > 0){
filterElement.push({ filterElement.push({
"column": "Contract", "column": "Contract",
      "filter": "equals", "filter": "equals",
      "criteria": this.contractsFilter "criteria": this.contractsFilter
}); });
} }
if(this.supportGroupsFilter.length > 0){ if (this.supportGroupsFilter.length > 0) {
filterElement.push({ filterElement.push({
"column": "SupportGroup", "column": "SupportGroup",
      "filter": "equals", "filter": "equals",
      "criteria": this.supportGroupsFilter "criteria": this.supportGroupsFilter
}); });
//console.log(this.supportGroupsFilter); //console.log(this.supportGroupsFilter);
}else{ } else {
filterElement.push({ filterElement.push({
"column": "SupportGroup", "column": "SupportGroup",
      "filter": "equals", "filter": "equals",
      "criteria": [this.userSupportGroup] "criteria": [this.userSupportGroup]
}); });
} }
if(this.filterStartDate != null && this.filterEndDate != null){ if (this.range.controls['start'].value && this.range.controls['end'].value) {
filterElement.push({ filterElement.push({
"column": "D2", "column": "D2",
      "filter": "dateRange", "filter": "dateRange",
      "criteria": [new Date(this.filterStartDate), new Date(this.filterEndDate)] "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({ filterElement.push({
"column": "ResourceName", "column": "ResourceName",
      "filter": "contains", "filter": "contains",
      "criteria": [this.criteria] "criteria": [this.criteria]
}); });
} }
if(this.intervallFilter){ if (this.intervallFilter) {
filterElement.push({ filterElement.push({
"column": "ASF_WI_HighestIntervall", "column": "ASF_WI_HighestIntervall",
      "filter": ">", "filter": ">",
      "criteria": [365] "criteria": [365]
}); });
} }
let filter = {filterElement: filterElement}; let filter = { filterElement: filterElement };
console.log(filter); console.log(filter);
this.dialogRef.close(filter); this.dialogRef.close(filter);
} }