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

Layout Design

main
manueltauber 2023-08-08 01:04:00 +02:00
parent 7a92c03f3a
commit 6de7590bd2
13 changed files with 172 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/angular.json
View File

@ -27,7 +27,7 @@
], ],
"styles": [ "styles": [
"src/styles.css", "src/styles.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/theme.scss",
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css" "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
], ],
"scripts" :["./node_modules/jquery/dist/jquery.min.js"] "scripts" :["./node_modules/jquery/dist/jquery.min.js"]

1
frontend/src/app/data.service.ts
View File

@ -281,7 +281,6 @@ export class DataService {
public async updateStatePerChange(change: any){ public async updateStatePerChange(change: any){
const promise = new Promise(resolve=>{ const promise = new Promise(resolve=>{
let obj = {changeNr : change.changeNr, currentState : change.currentState, nextState : change.nextState}; let obj = {changeNr : change.changeNr, currentState : change.currentState, nextState : change.nextState};
console.log("###############"+change.changeNr);
let stringyfiedData = JSON.stringify(obj); let stringyfiedData = JSON.stringify(obj);
let dataJson = JSON.parse(stringyfiedData) as typeof stringyfiedData; let dataJson = JSON.parse(stringyfiedData) as typeof stringyfiedData;
// console.log(dataJson); // console.log(dataJson);

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

@ -1,7 +1,94 @@
<div class="container"> <div class="container">
<div class="filterBox"> <div class="filterBox">
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3> <h2 class="filterHeading">{{this.languageService.lMap.get('filterDialogHeading')}}</h2>
<mat-form-field appearance="fill" style="width: 100%;" > <mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}}</mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
</mat-expansion-panel-header>
<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>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}</mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description>
</mat-expansion-panel-header>
<multiselect-autocomplete
[placeholder]="userSupportGroup"
[data]="supportGroups"
[key]="'supportGroup'"
(result)="onResult($event)">
</multiselect-autocomplete>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}</mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
</mat-expansion-panel-header>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchState')"
[data]="states"
[key]="'state'"
(result)="onResult($event)">
</multiselect-autocomplete>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}</mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
</mat-expansion-panel-header>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchContract')"
[data]="contracts"
[key]="'contract'"
(result)="onResult($event)">
</multiselect-autocomplete>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogPaketType')}}</mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogPaketTypeText')}}</mat-panel-description>
</mat-expansion-panel-header>
<multiselect-autocomplete
[placeholder]="languageService.lMap.get('filterDilogSearchPt')"
[data]="paketTypes"
[key]="'paketType'"
(result)="onResult($event)">
</multiselect-autocomplete>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}</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 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>
</mat-expansion-panel>
</mat-accordion>
<!-- <mat-form-field appearance="fill" style="width: 100%;" >
<mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label> <mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
<input matInput type="text" [(ngModel)]="criteria" > <input matInput type="text" [(ngModel)]="criteria" >
</mat-form-field> </mat-form-field>
@ -54,9 +141,10 @@
<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>
<br><br> <br><br> -->
<br>
<div class="buttonBox"> <div class="buttonBox">
<button mat-raised-button color="warn" style="margin-right: 3px;" matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button> <button mat-raised-button 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> <button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
</div> </div>
</div> </div>

2
frontend/src/app/implementer-dialog/implementer-dialog.component.html
View File

@ -11,7 +11,7 @@
<mat-dialog-actions align = "end"> <mat-dialog-actions align = "end">
<button [disabled]="diasbled" mat-raised-button color="warn" matDialogClose>{{this.languageService.lMap.get('implementerDialogCancel')}}</button> <button [disabled]="diasbled" mat-raised-button matDialogClose>{{this.languageService.lMap.get('implementerDialogCancel')}}</button>
<button [disabled]="bdiasbled" mat-raised-button color="primary" (click)="updateImplementer()">{{this.languageService.lMap.get('implementerDialogApply')}}</button> <button [disabled]="bdiasbled" mat-raised-button color="primary" (click)="updateImplementer()">{{this.languageService.lMap.get('implementerDialogApply')}}</button>
</mat-dialog-actions> </mat-dialog-actions>

3
frontend/src/app/implementer-dialog/implementer-dialog.component.ts
View File

@ -104,7 +104,7 @@ export class ImplementerDialogComponent implements OnInit {
this._snackBar.open(msg+" : "+res.error.message, action, { this._snackBar.open(msg+" : "+res.error.message, action, {
horizontalPosition: this.horizontalPosition, horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition, verticalPosition: this.verticalPosition,
panelClass: ['mat-primary'] panelClass: ['red-snackbar']
}).onAction().subscribe(() => { }).onAction().subscribe(() => {
console.log('The snackbar action was triggered!'); console.log('The snackbar action was triggered!');
}); });
@ -130,6 +130,7 @@ export class ImplementerDialogComponent implements OnInit {
horizontalPosition: this.horizontalPosition, horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition, verticalPosition: this.verticalPosition,
duration: 5000, duration: 5000,
panelClass: ['green-snackbar']
}); });
this.dialogRef.close(); this.dialogRef.close();
} }

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

@ -98,12 +98,21 @@ export class LanguageService {
this.deMap.set('stateDialogConfirm', 'Bestätigen'); this.deMap.set('stateDialogConfirm', 'Bestätigen');
this.enMap.set('stateDialogConfirm', 'Confirm'); this.enMap.set('stateDialogConfirm', 'Confirm');
this.deMap.set('filterDialogShortDesc', 'Kurzbeschreibung* (Eingabe eines Textteiles filtert alle passenden Pakete)'); this.deMap.set('filterDialogHeading', 'Changes Filtern');
this.deMap.set('filterDilogSg', 'Gewählte Supportgruppe in der Rolle Planender IH oder Kostenverantwortlicher (eine)'); this.enMap.set('filterDialogHeading', 'Filter Changes');
this.deMap.set('filterDilogState', 'Status (einer oder mehrere) des Pakets');
this.deMap.set('filterDilogContract', 'Vertrag / Provider-Cluster (einen oder mehrere)'); this.deMap.set('filterDialogShortDesc', 'Kurzbeschreibung');
this.deMap.set('filterDilogPaketType', 'Paket-Typ (einen oder mehrere, exakte Eingabe)'); this.deMap.set('filterDialogShortDescText', 'Eingabe eines Textteiles filtert alle passenden Pakete');
this.deMap.set('filterDilogDate', 'Geplantes Start-Datum: Von / Bis'); this.deMap.set('filterDilogSg', 'Support Gruppe');
this.deMap.set('filterDilogSgText', 'In der Rolle Planender IH oder Kostenverantwortlicher (eine)');
this.deMap.set('filterDilogState', 'Status');
this.deMap.set('filterDilogStateText', '(einer oder mehrere) des Pakets');
this.deMap.set('filterDilogContract', 'Vertrag');
this.deMap.set('filterDilogContractText', 'Vertrag / Provider-Cluster (einen oder mehrere)');
this.deMap.set('filterDilogPaketType', 'Paket-Typ');
this.deMap.set('filterDilogPaketTypeText', 'einen oder mehrere, exakte Eingabe');
this.deMap.set('filterDilogDate', 'Datum');
this.deMap.set('filterDilogDateText', 'Geplantes Start-Datum: Von / Bis');
this.deMap.set('filterDilogSearchText', 'Text durchsuchen'); this.deMap.set('filterDilogSearchText', 'Text durchsuchen');
this.deMap.set('filterDialogSearchSg', 'Supportgruppe suchen & auswählen'); this.deMap.set('filterDialogSearchSg', 'Supportgruppe suchen & auswählen');
@ -113,12 +122,18 @@ export class LanguageService {
this.deMap.set('filterDilogSearchFrom', 'Von'); this.deMap.set('filterDilogSearchFrom', 'Von');
this.deMap.set('filterDilogSearchTo', 'Bis'); this.deMap.set('filterDilogSearchTo', 'Bis');
this.enMap.set('filterDialogShortDesc', 'Short description* (entering a text part filters all matching packages)'); this.enMap.set('filterDialogShortDesc', 'Short description');
this.enMap.set('filterDilogSg', 'Selected support group in the role of planning IH or cost manager (one)'); this.enMap.set('filterDialogShortDescText', 'entering a text part filters all matching packages');
this.enMap.set('filterDilogState', 'State (one or more) of the package'); this.enMap.set('filterDilogSg', 'Support group');
this.enMap.set('filterDilogContract', 'Contract / Provider cluster (one or more)'); this.enMap.set('filterDilogSgText', 'in the role of planning IH or cost manager (one)');
this.enMap.set('filterDilogPaketType', 'Package type (one or more, exact input)'); this.enMap.set('filterDilogState', 'State');
this.enMap.set('filterDilogDate', 'Planned start date: From / To'); this.enMap.set('filterDilogStateText', '(one or more) of the package');
this.enMap.set('filterDilogContract', 'Contract');
this.enMap.set('filterDilogContractText', 'Contract / provider cluster (one or more)');
this.enMap.set('filterDilogPaketType', 'Package type');
this.enMap.set('filterDilogPaketTypeText', 'one or more, exact input');
this.enMap.set('filterDilogDate', 'Date');
this.enMap.set('filterDilogDateText', 'Planned start date: from / to');
this.enMap.set('filterDilogSearchText', 'Text search'); this.enMap.set('filterDilogSearchText', 'Text search');
this.enMap.set('filterDialogSearchSg', 'Search & select support group'); this.enMap.set('filterDialogSearchSg', 'Search & select support group');

17
frontend/src/app/ntt-gantt/ntt-gantt.component.css
View File

@ -46,14 +46,15 @@
.filterButton{ .filterButton{
margin-right: 0.5%; margin-right: 0.5%;
} }
/*
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #d56100; background-color: #d56100;
} }
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: #d56100; background-color: #d56100;
} } */
/* .mat-button-toggle{ /* .mat-button-toggle{
background-color: #306cee; background-color: #306cee;
@ -66,18 +67,18 @@
} */ } */
.mat-button-toggle-checked { .mat-button-toggle-checked {
background-color: #d56100; background-color: #ef6c00;
} }
::ng-deep .mat-calendar{ /* ::ng-deep .mat-calendar{
background: white; background: white;
} } */
::ng-deep .mat-calendar-body-label{ /* ::ng-deep .mat-calendar-body-label{ */
/* color: white; */ /* color: white; */
} /* }
::ng-deep .mat-calendar-cell-content{ ::ng-deep .mat-calendar-cell-content{
color: #d56100; color: #d56100;
} } */

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

@ -59,7 +59,7 @@
<button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()"> <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon> {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon>
</button> </button>
<button [disabled]="filterEnabled" mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()"> <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon> {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
</button> </button>
</div> </div>

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

@ -441,9 +441,9 @@ export class NttGanttComponent implements OnInit {
if(change.resourceId == selectedRescourceId){ if(change.resourceId == selectedRescourceId){
this.dataService.updateApproval(change, 1).then((res: any)=>{ this.dataService.updateApproval(change, 1).then((res: any)=>{
if(res.status == 200){ if(res.status == 200){
this._snackBar.open("Genehmigung erfolgreich", 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition,panelClass: ['mat-primary']}); this._snackBar.open("Genehmigung erfolgreich", 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['green-snackbar']});
}else{ }else{
this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']});
} }
this.refreshData(); this.refreshData();
}); });
@ -475,10 +475,10 @@ export class NttGanttComponent implements OnInit {
if(change.resourceId == selectedRescourceId){ if(change.resourceId == selectedRescourceId){
this.dataService.updateApproval(change, 2).then((res: any)=>{ this.dataService.updateApproval(change, 2).then((res: any)=>{
if(res.status == 200){ if(res.status == 200){
this._snackBar.open("Ablehnen erfolgreich", 'Schließen', {horizontalPosition: this.horizontalPosition,verticalPosition: this.verticalPosition,panelClass: ['mat-primary']}); this._snackBar.open("Ablehnen erfolgreich", 'Schließen', {horizontalPosition: this.horizontalPosition,verticalPosition: this.verticalPosition, panelClass: ['green-snackbar']});
this.refreshData(); this.refreshData();
}else{ }else{
this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']});
} }
}); });
} }

2
frontend/src/app/state-dialog/state-dialog.component.html
View File

@ -11,6 +11,6 @@
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button [disabled]="diasbled" mat-raised-button color="warn" matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button> <button [disabled]="diasbled" mat-raised-button matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button>
<button [disabled]="bdiasbled" mat-raised-button color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button> <button [disabled]="bdiasbled" mat-raised-button color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button>
</mat-dialog-actions> </mat-dialog-actions>

7
frontend/src/app/state-dialog/state-dialog.component.ts
View File

@ -99,9 +99,13 @@ export class StateDialogComponent implements OnInit {
this._snackBar.open(this.languageService.lMap.get('stateDialogSnackBarMessageFailiure') + res.error.message, this.languageService.lMap.get('stateDialogSnackBarActionFailiure'), { this._snackBar.open(this.languageService.lMap.get('stateDialogSnackBarMessageFailiure') + res.error.message, this.languageService.lMap.get('stateDialogSnackBarActionFailiure'), {
horizontalPosition: this.horizontalPosition, horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition, verticalPosition: this.verticalPosition,
panelClass: ['mat-primary'] panelClass: ['red-snackbar'],
}); });
this.dialogRef.close("Failiure"); this.dialogRef.close("Failiure");
// console.log(change + "----"+this.data.changes.get(this.data.changes.length);
// if(change == this.data.changes[this.data.changes.length]){
// this.dialogRef.close("Failiure");
// }
} }
if(this.progress == 100){ if(this.progress == 100){
@ -113,6 +117,7 @@ export class StateDialogComponent implements OnInit {
horizontalPosition: this.horizontalPosition, horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition, verticalPosition: this.verticalPosition,
duration: 5000, duration: 5000,
panelClass: ['green-snackbar']
}); });
this.dialogRef.close("Success"); this.dialogRef.close("Success");
} }

18
frontend/src/styles.css
View File

@ -14,3 +14,21 @@
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css'; @import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css'; @import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
.green-snackbar {
background: green!important;
color: white;
}
.green-snackbar button {
background-color: green!important;
color: white;
border: none;
}
.red-snackbar {
background: #F44336!important;
color: white!important;
}
.red-snackbar button {
background-color: #F44336;
color: white !important;
border: none;
}

10
frontend/src/theme.scss Normal file
View File

@ -0,0 +1,10 @@
@import "../node_modules/@angular/material/theming";
@include mat-core();
$my-primary: mat-palette($mat-orange, 800);
$my-accent: mat-palette($mat-orange, 500);
$my-warn: mat-palette($mat-red, 600);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-theme);