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

Layout anpassung Filter Dialog/Done

main
manueltauber 2023-08-02 11:58:01 +02:00
parent a76230b4f2
commit c08ca831ff
5 changed files with 83 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/filter-dialog/filter-dialog.component.css
View File

@ -1,3 +1,20 @@
.container{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.filterHeading{
font-family: Roboto;
}
.filterBox{
width: 90%;
align-self: center;
}
.buttonBox{
display: flex;
flex-direction: row;
justify-content: flex-end;
}

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

@ -1,56 +1,63 @@
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
<mat-form-field appearance="fill" >
<mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
<input matInput type="text" [(ngModel)]="criteria" >
</mat-form-field>
<div class="container">
<div class="filterBox">
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
<mat-form-field appearance="fill" style="width: 100%;" >
<mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
<input matInput type="text" [(ngModel)]="criteria" >
</mat-form-field>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogSg')}}</h3>
<multiselect-autocomplete
[placeholder]="userSupportGroup"
[data]="supportGroups"
[key]="'supportGroup'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogSg')}}</h3>
<multiselect-autocomplete
[placeholder]="userSupportGroup"
[data]="supportGroups"
[key]="'supportGroup'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogState')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchState')"
[data]="states"
[key]="'state'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogState')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchState')"
[data]="states"
[key]="'state'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogContract')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchContract')"
[data]="contracts"
[key]="'contract'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogContract')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchContract')"
[data]="contracts"
[key]="'contract'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogPaketType')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchPt')"
[data]="paketTypes"
[key]="'paketType'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogPaketType')}}</h3>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchPt')"
[data]="paketTypes"
[key]="'paketType'"
(result)="onResult($event)">
</multiselect-autocomplete>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogDate')}}</h3>
<mat-form-field appearance="fill">
<mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
<input matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
-
<mat-form-field appearance="fill">
<mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
<input matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<br><br>
<button mat-raised-button color = "primary" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogDate')}}</h3>
<mat-form-field appearance="fill" style="width: 48%;">
<mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
<input matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
-
<mat-form-field appearance="fill" style="width: 48%;">
<mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
<input matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<br><br>
<div class="buttonBox">
<button mat-raised-button color="warn" style="margin-right: 3px;" matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
<button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
</div>
</div>
</div>

9
frontend/src/app/language.service.ts
View File

@ -111,8 +111,6 @@ export class LanguageService {
this.deMap.set('filterDilogSearchFrom', 'Von');
this.deMap.set('filterDilogSearchTo', 'Bis');
this.deMap.set('filterDilogButton', 'Filter anwenden');
this.enMap.set('filterDialogShortDesc', 'Short description* (entering a text part filters all matching packages)');
this.enMap.set('filterDilogSg', 'Selected support group in the role of planning IH or cost manager (one)');
this.enMap.set('filterDilogState', 'State (one or more) of the package');
@ -128,7 +126,12 @@ export class LanguageService {
this.enMap.set('filterDilogSearchFrom', 'From');
this.enMap.set('filterDilogSearchTo', 'Until');
this.enMap.set('filterDilogButton', '"Apply Filters"');
this.enMap.set('filterDilogButton', 'Apply Filters');
this.deMap.set('filterDilogButton', 'Filter anwenden');
this.deMap.set('filterDialogCancel', 'Abbrechen');
this.enMap.set('filterDialogCancel', 'Cancel');
this.deMap.set('implementerDialogHeading', 'Implementer Eintragen');
this.enMap.set('implementerDialogHeading', 'Enter Implementer');

2
frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
View File

@ -10,7 +10,7 @@
</mat-chip-list>
</div>
<mat-form-field class="full-width">
<mat-form-field class="full-width" appearance="fill">
<input matInput type="text"
[placeholder]="placeholder"
[matAutocomplete]="auto"

2
frontend/src/app/ntt-gantt/ntt-gantt.component.ts
View File

@ -301,7 +301,7 @@ export class NttGanttComponent implements OnInit {
openFilterDialog(){
let dialogRef = FilterDialogComponent;
this.matDialog.open(dialogRef,
{data : [], height: '70%', width: '80%'}).afterClosed().subscribe((res)=>{
{data : [], height: '70%', width: '50%'}).afterClosed().subscribe((res)=>{
if(res){
this.filters = res;
this.filterEnabled = true;