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": [
"src/styles.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/theme.scss",
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
],
"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){
const promise = new Promise(resolve=>{
let obj = {changeNr : change.changeNr, currentState : change.currentState, nextState : change.nextState};
console.log("###############"+change.changeNr);
let stringyfiedData = JSON.stringify(obj);
let dataJson = JSON.parse(stringyfiedData) as typeof stringyfiedData;
// console.log(dataJson);

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

@ -1,10 +1,97 @@
<div class="container">
<div class="filterBox">
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDialogShortDesc')}}</h3>
<h2 class="filterHeading">{{this.languageService.lMap.get('filterDialogHeading')}}</h2>
<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>
<input matInput type="text" [(ngModel)]="criteria" >
</mat-form-field>
<h3 class="filterHeading">{{this.languageService.lMap.get('filterDilogSg')}}</h3>
<multiselect-autocomplete
@ -54,9 +141,10 @@
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<br><br>
<br><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 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>

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

@ -11,7 +11,7 @@
<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>
</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, {
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['mat-primary']
panelClass: ['red-snackbar']
}).onAction().subscribe(() => {
console.log('The snackbar action was triggered!');
});
@ -130,6 +130,7 @@ export class ImplementerDialogComponent implements OnInit {
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
duration: 5000,
panelClass: ['green-snackbar']
});
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.enMap.set('stateDialogConfirm', 'Confirm');
this.deMap.set('filterDialogShortDesc', 'Kurzbeschreibung* (Eingabe eines Textteiles filtert alle passenden Pakete)');
this.deMap.set('filterDilogSg', 'Gewählte Supportgruppe in der Rolle Planender IH oder Kostenverantwortlicher (eine)');
this.deMap.set('filterDilogState', 'Status (einer oder mehrere) des Pakets');
this.deMap.set('filterDilogContract', 'Vertrag / Provider-Cluster (einen oder mehrere)');
this.deMap.set('filterDilogPaketType', 'Paket-Typ (einen oder mehrere, exakte Eingabe)');
this.deMap.set('filterDilogDate', 'Geplantes Start-Datum: Von / Bis');
this.deMap.set('filterDialogHeading', 'Changes Filtern');
this.enMap.set('filterDialogHeading', 'Filter Changes');
this.deMap.set('filterDialogShortDesc', 'Kurzbeschreibung');
this.deMap.set('filterDialogShortDescText', 'Eingabe eines Textteiles filtert alle passenden Pakete');
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('filterDialogSearchSg', 'Supportgruppe suchen & auswählen');
@ -113,12 +122,18 @@ export class LanguageService {
this.deMap.set('filterDilogSearchFrom', 'Von');
this.deMap.set('filterDilogSearchTo', 'Bis');
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');
this.enMap.set('filterDilogContract', 'Contract / Provider cluster (one or more)');
this.enMap.set('filterDilogPaketType', 'Package type (one or more, exact input)');
this.enMap.set('filterDilogDate', 'Planned start date: From / To');
this.enMap.set('filterDialogShortDesc', 'Short description');
this.enMap.set('filterDialogShortDescText', 'entering a text part filters all matching packages');
this.enMap.set('filterDilogSg', 'Support group');
this.enMap.set('filterDilogSgText', 'in the role of planning IH or cost manager (one)');
this.enMap.set('filterDilogState', 'State');
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('filterDialogSearchSg', 'Search & select support group');

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

@ -46,14 +46,15 @@
.filterButton{
margin-right: 0.5%;
}
}
/*
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #d56100;
}
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: #d56100;
}
} */
/* .mat-button-toggle{
background-color: #306cee;
@ -66,18 +67,18 @@
} */
.mat-button-toggle-checked {
background-color: #d56100;
background-color: #ef6c00;
}
::ng-deep .mat-calendar{
/* ::ng-deep .mat-calendar{
background: white;
}
} */
::ng-deep .mat-calendar-body-label{
/* ::ng-deep .mat-calendar-body-label{ */
/* color: white; */
}
/* }
::ng-deep .mat-calendar-cell-content{
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()">
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon>
</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>
</button>
</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){
this.dataService.updateApproval(change, 1).then((res: any)=>{
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{
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();
});
@ -475,10 +475,10 @@ export class NttGanttComponent implements OnInit {
if(change.resourceId == selectedRescourceId){
this.dataService.updateApproval(change, 2).then((res: any)=>{
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();
}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">
<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>
</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'), {
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['mat-primary']
panelClass: ['red-snackbar'],
});
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){
@ -113,6 +117,7 @@ export class StateDialogComponent implements OnInit {
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
duration: 5000,
panelClass: ['green-snackbar']
});
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-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);