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';
@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]
})

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

@ -23,7 +23,7 @@
</mat-expansion-panel-header>
<multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'"
[appliedFilters]="prevFiltersSg" (result)="onResult($event)">
</multiselect-autocomplete>
</multiselect-autocomplete>
</mat-expansion-panel>
<mat-expansion-panel>
@ -68,6 +68,27 @@
[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: 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-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
@ -83,7 +104,7 @@
<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>
<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 { 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<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));
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);
}