From cd3ef057bbe9f5f0fc257175c6bd340a5ed43a62 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Mon, 13 May 2024 16:39:49 +0200 Subject: [PATCH 01/13] new layout --- .../src/app/ntt-gantt/ntt-gantt.component.css | 155 +++++---- .../app/ntt-gantt/ntt-gantt.component.html | 324 +++++++++--------- frontend/src/theme.scss | 6 + 3 files changed, 260 insertions(+), 225 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index fad4302..088dcf0 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -1,3 +1,18 @@ +#topbar { + display: flex; + flex-direction: row; + justify-content: space-between; + height: 57px; + margin-bottom: 20px; + + border: dashed green 1px; +} + + +.restartButton { + width: 60px; +} + .example-radio-group { display: flex; flex-direction: column; @@ -9,22 +24,18 @@ margin: 5px; } -#topbar { - display: flex; - flex-direction: row; - margin: 0px 0; - align-items: flex-start; - height: 3%; -} -.mat-mdc-form-field + .mat-mdc-form-field { + +.mat-mdc-form-field+.mat-mdc-form-field { margin-left: 8px; } - .mat-button-toggle-group .mat-button-toggle-button { - height: 100%!important; + +.mat-button-toggle-group .mat-button-toggle-button { + height: 100% !important; } -.toggleContainer{ + +.toggleContainer { display: flex; flex-direction: column; align-items: flex-start; @@ -32,88 +43,108 @@ width: 100%; } -.filterContainer{ +.filterContainer { width: 100%; display: flex; flex-direction: row; align-items: flex-start; } -.clearFilter{ +.clearFilter { margin-left: 10px; } -.showDetails{ +.showDetails { margin-left: 80px; margin-top: 8.5px; } -.filter{ + +.filter { margin-top: 0.5%; margin-left: 1%; } -.checkbox{ +.checkbox { margin: 0 0.5%; } -.scalarContainer{ - margin-left: 0.5%; - margin-right: 0.5%; + +.dateButton { + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-width: 1px; + border: none; + border-bottom: 1px; + border-top-right-radius: 4px; } -.filterButton{ - - } - - .dateButton{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 1px; border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px; margin-right: 15px; - } - - .dateButton:hover{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px; +.dateButton:hover { + border-width: 2px; + border-top-right-radius: 4px; background-color: rgba(0, 0, 0, 0.08); - } +} -.dateButton:checked{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px; - background-color: red; - } +.editButton { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border: none; + border-top-right-radius: 4px; + margin-right: 15px; +} - .editButton{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border: none; border-top-right-radius: 4px; margin-right: 15px; - } - - .editButton:hover{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-top-right-radius: 4px; +.editButton:hover { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-top-right-radius: 4px; background-color: rgba(0, 0, 0, 0.08); - } +} -.editButton:checked{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-top-right-radius: 4px; +.editButton:checked { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-top-right-radius: 4px; background-color: red; - } +} - .deleteButton{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 1px; border: none; border-top-right-radius: 4px; margin-right: 15px; margin-left: -15px; - } +.deleteButton { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-width: 1px; + border: none; + border-top-right-radius: 4px; + margin-right: 15px; + margin-left: -15px; +} - .deleteButton:hover{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top-right-radius: 4px; +.deleteButton:hover { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-width: 2px; + border-top-right-radius: 4px; background-color: rgba(0, 0, 0, 0.08); - } +} -.deleteButton:checked{ - height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top-right-radius: 4px; +.deleteButton:checked { + height: 59px; + width: 59px; + background-color: rgba(0, 0, 0, 0.04); + border-width: 2px; + border-top-right-radius: 4px; background-color: red; - } +} - /* .datePickerContainer{ +/* .datePickerContainer{ height: 20px; width: 400px; } */ - /* +/* ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { background-color: #d56100; } @@ -136,12 +167,16 @@ background-color: #ef6c00; } + .dot-badge { background-color: #00a79d; color: #00a79d; - width: 15px; /* Breite des Punkts */ - height: 15px; /* Höhe des Punkts */ - border-radius: 50%; /* Rundung des Punkts */ + width: 15px; + /* Breite des Punkts */ + height: 15px; + /* Höhe des Punkts */ + border-radius: 50%; + /* Rundung des Punkts */ } /* ::ng-deep .mat-calendar{ @@ -149,9 +184,9 @@ } */ /* ::ng-deep .mat-calendar-body-label{ */ - /* color: white; */ +/* color: white; */ /* } ::ng-deep .mat-calendar-cell-content{ color: #d56100; -} */ +} */ \ No newline at end of file diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index ff4d232..53fbc89 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -1,19 +1,26 @@
- - {{languageService.lMap.get('dateRangeLabel')}} - - - - - - - Invalid start date - Invalid end date - - + +
+
+ + {{languageService.lMap.get('dateRangeLabel')}} + + + + + + + Invalid start date + Invalid end date + - + +
+ + + {{languageService.lMap.get('language')}} @@ -21,46 +28,55 @@ -
- - + + + + {{scalar}} + + + + Preset + + + + {{preset.name}} + + + + + + + + + + + +
- + +
+

+ verified_user{{this.userId}} +

+

verified_user RSSO Auth Failed

+

verified_user RSSO: initializing

+
- - Preset - - - - {{preset.name}} - - - - - - - - - - -

verified_user{{this.userId}}

-

verified_user RSSO Auth Failed

-

verified_user RSSO: initializing

@@ -68,82 +84,61 @@
- - - - - - - + + + + + + - - + - {{languageService.lMap.get('detailButton')}} + {{languageService.lMap.get('detailButton')}}
- + *ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error" + id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;"> +
- + @@ -151,25 +146,32 @@ - + - + - + - + - + - + - + -

Die Suche lieferte keine Ergebnisse

-

The search did not return any results

- + + - - - - - - error {{errorService.getLastError('rsso').name}} - {{errorService.getLastError('rsso').userInfo}} - - -

{{errorService.getLastError('rsso').message}}

- - - - - - - error {{errorService.getLastError('critical').name}} - {{errorService.getLastError('critical').userInfo}} - - -

{{errorService.getLastError('critical').message}}

- - - - - - error {{errorService.getLastError('error').name}} - {{errorService.getLastError('error').userInfo}} - - -

{{errorService.getLastError('error').message}}

- - + + + error + {{errorService.getLastError('rsso').name}} + {{errorService.getLastError('rsso').userInfo}} + + +

{{errorService.getLastError('rsso').message}}

+ + + + + error + {{errorService.getLastError('critical').name}} + {{errorService.getLastError('critical').userInfo}} + + +

{{errorService.getLastError('critical').message}}

+ + + + + error + {{errorService.getLastError('error').name}} + {{errorService.getLastError('error').userInfo}} + + +

{{errorService.getLastError('error').message}}

+ + \ No newline at end of file diff --git a/frontend/src/theme.scss b/frontend/src/theme.scss index b918d61..73af48a 100644 --- a/frontend/src/theme.scss +++ b/frontend/src/theme.scss @@ -8,3 +8,9 @@ $my-warn: mat-palette($mat-red, 600); $my-theme: mat-light-theme($my-primary, $my-accent, $my-warn); @include angular-material-theme($my-theme); + +.dateButton.mat-button { + background-color: blue !important; /* Use !important as a last resort */ + color: white; + } + \ No newline at end of file From f47b315128d81952549a19590420c389e6471a79 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Mon, 13 May 2024 17:46:41 +0200 Subject: [PATCH 02/13] more layout changes --- .../src/app/ntt-gantt/ntt-gantt.component.css | 35 +++++++++++++++++-- .../app/ntt-gantt/ntt-gantt.component.html | 32 ++++++++++------- 2 files changed, 52 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 088dcf0..fb732ae 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -1,16 +1,45 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.head { + color:rgba(41, 46, 50, 0.679); + padding-left: 10px; + padding-right: 10px; + font-family: Arial, Helvetica, sans-serif; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + height: 50px; + margin-bottom: 10px; +} + #topbar { display: flex; flex-direction: row; justify-content: space-between; height: 57px; - margin-bottom: 20px; + margin-bottom: 50px; - border: dashed green 1px; } .restartButton { width: 60px; + background-color: white; + border: none; + border: solid 1px rgba(94, 94, 94, 0.18); + color: #000000a7; + border-radius: 3px; + cursor: pointer; +} + +.restartButton:hover { + color: #000000; + background-color: rgb(243, 243, 243); } .example-radio-group { @@ -165,7 +194,7 @@ .mat-button-toggle-checked { background-color: #ef6c00; - + color: white; } .dot-badge { diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 53fbc89..2fd600c 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -1,5 +1,24 @@ +
+

Change Calendar

+ + +
+

+ verified_user{{this.userId}} +

+

verified_user RSSO Auth Failed

+

verified_user RSSO: initializing

+
+ +
+
@@ -64,18 +83,7 @@
- -
-

- verified_user{{this.userId}} -

-

verified_user RSSO Auth Failed

-

verified_user RSSO: initializing

-
+ From 24bec5fdbaea1867900884ebcf0b164c25d78645 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Mon, 13 May 2024 18:00:21 +0200 Subject: [PATCH 03/13] some animtations --- .../src/app/ntt-gantt/ntt-gantt.component.css | 59 ++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index fb732ae..d491473 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -15,15 +15,72 @@ border-bottom: 1px solid rgba(0, 0, 0, 0.2); height: 50px; margin-bottom: 10px; + background-color: white; } + +.head { + overflow: hidden; /* Hides anything that overflows the boundary of this element */ +} + +.head h2 { + display: inline-block; /* Ensures that the element can be transformed */ + white-space: nowrap; /* Keeps the text on a single line */ + transform: translateX(-100%); /* Starts the text off-screen to the left */ + animation: slideIn 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ +} + +.head div { + display: inline-block; /* Ensures that the element can be transformed */ + white-space: nowrap; /* Keeps the text on a single line */ + transform: translateX(100%); /* Starts the text off-screen to the left */ + animation: slideInRight 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ +} + +@keyframes slideIn { + from { + transform: translateX(-100%); /* Start from off-screen left */ + opacity: 0; + } + to { + transform: translateX(0%); /* End at the normal position */ + opacity: 100; + } +} + +@keyframes slideInRight { + from { + transform: translateX(100%); /* Start from off-screen left */ + opacity: 0; + } + to { + transform: translateX(0%); /* End at the normal position */ + opacity: 100; + } +} + + + + + #topbar { display: flex; flex-direction: row; justify-content: space-between; height: 57px; - margin-bottom: 50px; + margin-bottom: 30px; + animation: slideUp 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ +} +@keyframes slideUp { + from { + transform: translateY(-100%); /* Start from off-screen left */ + opacity: 0; + } + to { + transform: translateY(0%); /* End at the normal position */ + opacity: 100; + } } From b76d0b4c826eba704c22b7398a1289407e643559 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Tue, 14 May 2024 11:58:10 +0200 Subject: [PATCH 04/13] removed toolbar --- frontend/src/app/ntt-gantt/ntt-gantt.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 2fd600c..215204a 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -4,7 +4,7 @@

+ style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);"> verified_user{{this.userId}}

Date: Tue, 14 May 2024 12:20:57 +0200 Subject: [PATCH 05/13] custom toolbar --- .../src/app/ntt-gantt/ntt-gantt.component.css | 23 +++++++--- .../app/ntt-gantt/ntt-gantt.component.html | 43 +++++++++---------- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index d491473..30f40f4 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -60,9 +60,6 @@ } - - - #topbar { display: flex; flex-direction: row; @@ -83,7 +80,6 @@ } } - .restartButton { width: 60px; background-color: white; @@ -99,6 +95,16 @@ background-color: rgb(243, 243, 243); } + +.transitionButton { + background-color: #00a79d; + color: white; + font-weight: 100; +} + + + + .example-radio-group { display: flex; flex-direction: column; @@ -132,8 +138,13 @@ .filterContainer { width: 100%; display: flex; - flex-direction: row; - align-items: flex-start; + align-items: center; + background-color: #f5f5f5; + border: solid rgba(0, 0, 0, 0.1) 1px; + border-bottom: none; + border-radius: 10px 10px 0px 0px; + height: 60px; + padding-left: 10px; } .clearFilter { diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 215204a..27ad7df 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -14,11 +14,9 @@ style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;">verified_user RSSO: initializing

-
+
- -
@@ -80,35 +78,34 @@ -
- - - - - -
- - - - - - + + + + + + + + + + + + From 70ab4bdb31232ea5ac0f247365be8ab919d91f59 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Tue, 14 May 2024 14:46:33 +0200 Subject: [PATCH 06/13] changes --- .../filter-dialog/filter-dialog.component.css | 22 +-- .../src/app/ntt-gantt/ntt-gantt.component.css | 149 ++++++++++++++---- .../app/ntt-gantt/ntt-gantt.component.html | 76 +++++---- 3 files changed, 175 insertions(+), 72 deletions(-) diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.css b/frontend/src/app/filter-dialog/filter-dialog.component.css index a7a0b39..a5c6bd0 100644 --- a/frontend/src/app/filter-dialog/filter-dialog.component.css +++ b/frontend/src/app/filter-dialog/filter-dialog.component.css @@ -1,19 +1,20 @@ -.container{ +.container { width: 100%; display: flex; flex-direction: row; justify-content: center; } -.filterHeading{ -font-family: Roboto; + +.filterHeading { + font-family: Roboto; } -.filterBox{ +.filterBox { width: 90%; align-self: center; } -.buttonBox{ +.buttonBox { display: flex; flex-direction: row; justify-content: flex-end; @@ -22,7 +23,10 @@ font-family: Roboto; .dot-badge { background-color: #00a79d; color: #00a79d; - width: 10px; /* Breite des Punkts */ - height: 10px; /* Höhe des Punkts */ - border-radius: 50%; /* Rundung des Punkts */ -} + width: 10px; + /* Breite des Punkts */ + height: 10px; + /* Höhe des Punkts */ + border-radius: 50%; + /* Rundung des Punkts */ +} \ No newline at end of file diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 30f40f4..7b74cc6 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -2,14 +2,15 @@ margin: 0; padding: 0; box-sizing: border-box; + /* overflow: hidden; */ } .head { - color:rgba(41, 46, 50, 0.679); + color: rgba(41, 46, 50, 0.8); padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; - display: flex; + display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); @@ -20,41 +21,57 @@ .head { - overflow: hidden; /* Hides anything that overflows the boundary of this element */ + overflow: hidden; + /* Hides anything that overflows the boundary of this element */ } .head h2 { - display: inline-block; /* Ensures that the element can be transformed */ - white-space: nowrap; /* Keeps the text on a single line */ - transform: translateX(-100%); /* Starts the text off-screen to the left */ - animation: slideIn 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ + user-select: none; + display: inline-block; + /* Ensures that the element can be transformed */ + white-space: nowrap; + /* Keeps the text on a single line */ + transform: translateX(-100%); + /* Starts the text off-screen to the left */ + animation: slideIn 1.5s forwards; + /* Adjust '2s' to control the speed of the animation */ } .head div { - display: inline-block; /* Ensures that the element can be transformed */ - white-space: nowrap; /* Keeps the text on a single line */ - transform: translateX(100%); /* Starts the text off-screen to the left */ - animation: slideInRight 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ + display: inline-block; + /* Ensures that the element can be transformed */ + white-space: nowrap; + /* Keeps the text on a single line */ + transform: translateX(100%); + /* Starts the text off-screen to the left */ + animation: slideInRight 1.5s forwards; + /* Adjust '2s' to control the speed of the animation */ } @keyframes slideIn { from { - transform: translateX(-100%); /* Start from off-screen left */ + transform: translateX(-100%); + /* Start from off-screen left */ opacity: 0; } + to { - transform: translateX(0%); /* End at the normal position */ + transform: translateX(0%); + /* End at the normal position */ opacity: 100; } } @keyframes slideInRight { from { - transform: translateX(100%); /* Start from off-screen left */ + transform: translateX(100%); + /* Start from off-screen left */ opacity: 0; } + to { - transform: translateX(0%); /* End at the normal position */ + transform: translateX(0%); + /* End at the normal position */ opacity: 100; } } @@ -66,16 +83,20 @@ justify-content: space-between; height: 57px; margin-bottom: 30px; - animation: slideUp 1.5s forwards; /* Adjust '2s' to control the speed of the animation */ + animation: slideUp 1.5s forwards; + /* Adjust '2s' to control the speed of the animation */ } @keyframes slideUp { from { - transform: translateY(-100%); /* Start from off-screen left */ + transform: translateY(-100%); + /* Start from off-screen left */ opacity: 0; } + to { - transform: translateY(0%); /* End at the normal position */ + transform: translateY(0%); + /* End at the normal position */ opacity: 100; } } @@ -97,8 +118,8 @@ .transitionButton { - background-color: #00a79d; - color: white; + background-color: #00a79d; + color: white; font-weight: 100; } @@ -135,25 +156,91 @@ width: 100%; } -.filterContainer { - width: 100%; +.filterButton mat-icon { + transform: scale(0.8); + margin-right: -6px; +} + +.detailsButton { display: flex; align-items: center; + justify-content: center; + height: 70%; + font-weight: 500; + font-size: 13px; + font-family: Arial, Helvetica, sans-serif; + gap: 8px; + user-select: none; + padding-left: 10px; +} + +.filterButton { + display: flex; + align-items: center; + justify-content: center; + height: 70%; + + background-color: rgb(255, 255, 255); + cursor: pointer; + padding-left: 15px; + padding-right: 15px; + border: solid 1px rgba(0, 0, 0, 0.124); + border-radius: 8px; + font-weight: 500; + gap: 3px; + /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */ +} + +.clearFilter { + display: flex; + align-items: center; + justify-content: center; + height: 70%; + + background-color: rgb(255, 255, 255); + cursor: pointer; + padding-left: 15px; + padding-right: 15px; + border: solid 1px rgba(0, 0, 0, 0.124); + border-radius: 8px; + font-weight: 500; + gap: 3px; +} + +.clearFilter:hover { + background-color: #ff370016; +} + +.filterButton:hover { + background-color: rgb(240, 240, 240); +} + +.filterContainer { + display: flex; + flex-direction: row; + align-items: center; background-color: #f5f5f5; - border: solid rgba(0, 0, 0, 0.1) 1px; + border: solid rgba(0, 0, 0, 0.1) 1px; border-bottom: none; border-radius: 10px 10px 0px 0px; height: 60px; padding-left: 10px; + padding-right: 15px; + justify-content: space-between; } -.clearFilter { - margin-left: 10px; +.left, .right { + display: flex; + flex-direction: row; + align-items: center; + height: 100%; + gap: 9px; } -.showDetails { - margin-left: 80px; - margin-top: 8.5px; + +.split { + height: 100%; + border-right: solid 1px rgba(0, 0, 0, 0.124); } .filter { @@ -268,9 +355,9 @@ .dot-badge { background-color: #00a79d; color: #00a79d; - width: 15px; - /* Breite des Punkts */ - height: 15px; + width: 10x; + /* Breitedes Punkts */ + height: 10px; /* Höhe des Punkts */ border-radius: 50%; /* Rundung des Punkts */ diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 27ad7df..7aa0cf3 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -46,14 +46,7 @@ - - - - {{scalar}} - - + @@ -83,41 +76,60 @@
+
- + - + - + - + - + - + - + - + - - - + + - {{languageService.lMap.get('detailButton')}} + +
+ + +
+ + + + {{scalar}} + + + +
+ {{languageService.lMap.get('detailButton')}} + +
+
Date: Tue, 14 May 2024 17:11:22 +0200 Subject: [PATCH 07/13] changes --- .../filter-dialog.component.html | 143 ++++--- .../multiselect-autocomplete.component.css | 20 + .../multiselect-autocomplete.component.html | 48 ++- .../src/app/ntt-gantt/ntt-gantt.component.css | 13 +- .../app/ntt-gantt/ntt-gantt.component.html | 348 +++++++++--------- 5 files changed, 295 insertions(+), 277 deletions(-) diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.html b/frontend/src/app/filter-dialog/filter-dialog.component.html index f8937b4..7e0e498 100644 --- a/frontend/src/app/filter-dialog/filter-dialog.component.html +++ b/frontend/src/app/filter-dialog/filter-dialog.component.html @@ -3,60 +3,52 @@

{{this.languageService.lMap.get('filterDialogHeading')}}

- + - {{this.languageService.lMap.get('filterDialogShortDesc')}} - {{this.languageService.lMap.get('filterDialogShortDescText')}} - - + {{this.languageService.lMap.get('filterDialogShortDesc')}} + {{this.languageService.lMap.get('filterDialogShortDescText')}} + + {{this.languageService.lMap.get('filterDilogSearchText')}} - + - {{this.languageService.lMap.get('filterDilogSg')}} + {{this.languageService.lMap.get('filterDilogSg')}} {{this.languageService.lMap.get('filterDilogSgText')}} - + + + + + + + {{this.languageService.lMap.get('filterDilogState')}} + {{this.languageService.lMap.get('filterDilogStateText')}} + + - + - - - {{this.languageService.lMap.get('filterDilogState')}} - {{this.languageService.lMap.get('filterDilogStateText')}} - - - - + + + {{this.languageService.lMap.get('filterDilogContract')}} + {{this.languageService.lMap.get('filterDilogContractText')}} + + + + - - - {{this.languageService.lMap.get('filterDilogContract')}} - {{this.languageService.lMap.get('filterDilogContractText')}} - - - - - - - - - {{this.languageService.lMap.get('filterDilogDate')}} - {{this.languageService.lMap.get('filterDilogDateText')}} - - - {{this.languageService.lMap.get('filterDilogSearchFrom')}} - - MM/DD/YYYY - - - - - - - {{this.languageService.lMap.get('filterDilogSearchTo')}} - - MM/DD/YYYY - - - - + + + {{this.languageService.lMap.get('filterDilogDate')}} + {{this.languageService.lMap.get('filterDilogDateText')}} + + + {{this.languageService.lMap.get('filterDilogSearchFrom')}} + + MM/DD/YYYY + + + + - + + {{this.languageService.lMap.get('filterDilogSearchTo')}} + + MM/DD/YYYY + + + + - - - Intervall - Pakete mit Intervall > ein Jahr - + + + Intervall + Pakete mit Intervall > ein Jahr + - Zeige nur Pakete mit Intervall > 1 Jahr! - + Zeige nur Pakete + mit Intervall > 1 Jahr! +
- - + +
-
+
\ No newline at end of file diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css index d514949..6a868f0 100644 --- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css +++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css @@ -5,3 +5,23 @@ .chip-list-wrapper { min-height: 3em; } + +.custom-form-field { + height: 56px; + align-items: center; +} + +.custom-form-field .form-field-container { + display: flex; + align-items: center; + width: 100%; +} + +.custom-form-field input[matInput] { + flex: 1; + margin-left: 8px; +} + +.custom-form-field mat-checkbox { + margin-right: 8px; +} diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html index 4537a24..ed18b4a 100644 --- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html +++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html @@ -1,4 +1,3 @@ -
@@ -7,43 +6,38 @@ cancel - ... {{selectData.length-20}} weitere + ... + {{selectData.length-20}} weitere
- - - + +
+ + +
+ - - - -
- - {{ data.item }} - -
- - - + + + +
+ + {{ data.item }} + +
+ + + - + \ No newline at end of file diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 7b74cc6..e7d0454 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -2,7 +2,7 @@ margin: 0; padding: 0; box-sizing: border-box; - /* overflow: hidden; */ + overflow: hidden; } .head { @@ -80,10 +80,10 @@ #topbar { display: flex; flex-direction: row; - justify-content: space-between; height: 57px; - margin-bottom: 30px; + margin-bottom: 9px; animation: slideUp 1.5s forwards; + gap: 10px; /* Adjust '2s' to control the speed of the animation */ } @@ -256,17 +256,18 @@ .dateButton { + height: 70%; width: 59px; - background-color: rgba(0, 0, 0, 0.04); + background-color: rgb(255, 255, 255); border-width: 1px; border: none; border-bottom: 1px; border-top-right-radius: 4px; + border: solid 1px rgba(0, 0, 0, 0.124); + border-radius: 8px; } .dateButton:hover { - border-width: 2px; - border-top-right-radius: 4px; background-color: rgba(0, 0, 0, 0.08); } diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 7aa0cf3..e002ee6 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -1,5 +1,5 @@
-

Change Calendar

+

W&I Kalender

@@ -17,67 +17,58 @@
- -
-
- - {{languageService.lMap.get('dateRangeLabel')}} - - - - - - - Invalid start date - Invalid end date - - -
- - - {{languageService.lMap.get('language')}} - - - {{lang}} - - - + + + {{languageService.lMap.get('language')}} + + + {{lang}} + + + - - - Preset - - - - {{preset.name}} - + + Preset + + + + {{preset.name}} + - - - - + + + + - - + + - - -
+ +
+ + + + @@ -96,9 +87,7 @@ - + @@ -106,148 +95,165 @@ - +
- - - - {{scalar}} - - + +
+
+ + + + + + + + Invalid start date + Invalid end date +
-
- {{languageService.lMap.get('detailButton')}} - + +
+ + + + + {{scalar}} + + + +
+ {{languageService.lMap.get('detailButton')}} + +
-
-
- -
+
+ +
- - + + - -
-
{{languageService.lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}{{languageService.lMap.get('tooltipSummary')}}: + {{data.taskData.resources[0].resourceName}}
{{languageService.lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}{{languageService.lMap.get('tooltipState')}}: + {{dataService.getStateNameById(data.taskData.resources[0].state)}}
{{languageService.lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}{{languageService.lMap.get('tooltipPaketType')}}: + {{data.taskData.resources[0].packageName}}
{{languageService.lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}{{languageService.lMap.get('tooltipContract')}}: + {{data.taskData.resources[0].vertragName}}
{{languageService.lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}{{languageService.lMap.get('tooltipSupportGroupKv')}}: + {{data.taskData.resources[0].supportGroup}}
{{languageService.lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}{{languageService.lMap.get('tooltipSupportGroupIh')}}: + {{data.taskData.resources[0].coordinatorSg}}
{{languageService.lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}{{languageService.lMap.get('tooltipDate')}}: + {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}
- - - - - - - - - - - - - - - - - - - - - - - - -
{{languageService.lMap.get('tooltipSummary')}}: - {{data.taskData.resources[0].resourceName}}
{{languageService.lMap.get('tooltipState')}}: - {{dataService.getStateNameById(data.taskData.resources[0].state)}}
{{languageService.lMap.get('tooltipPaketType')}}: - {{data.taskData.resources[0].packageName}}
{{languageService.lMap.get('tooltipContract')}}: - {{data.taskData.resources[0].vertragName}}
{{languageService.lMap.get('tooltipSupportGroupKv')}}: - {{data.taskData.resources[0].supportGroup}}
{{languageService.lMap.get('tooltipSupportGroupIh')}}: - {{data.taskData.resources[0].coordinatorSg}}
{{languageService.lMap.get('tooltipDate')}}: - {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}
-
- - + + +
+ + - + -
-

Die Suche lieferte keine Ergebnisse

-
-
-

The search did not return any results

-
- +
+

Die Suche lieferte keine Ergebnisse

+
+
+

The search did not return any results

+
+ - - + + - - - error - {{errorService.getLastError('rsso').name}} - {{errorService.getLastError('rsso').userInfo}} - - -

{{errorService.getLastError('rsso').message}}

- - + + + error + {{errorService.getLastError('rsso').name}} + {{errorService.getLastError('rsso').userInfo}} + + +

{{errorService.getLastError('rsso').message}}

+ + - - - error - {{errorService.getLastError('critical').name}} - {{errorService.getLastError('critical').userInfo}} - - -

{{errorService.getLastError('critical').message}}

- - + + + error + {{errorService.getLastError('critical').name}} + {{errorService.getLastError('critical').userInfo}} + + +

{{errorService.getLastError('critical').message}}

+ + - - - error - {{errorService.getLastError('error').name}} - {{errorService.getLastError('error').userInfo}} - - -

{{errorService.getLastError('error').message}}

- - \ No newline at end of file + + + error + {{errorService.getLastError('error').name}} + {{errorService.getLastError('error').userInfo}} + + +

{{errorService.getLastError('error').message}}

+ + \ No newline at end of file From 3e0c0b90633815e4c4ec7e196ab7fd9f3b1265fe Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Tue, 14 May 2024 17:22:45 +0200 Subject: [PATCH 08/13] datepicker --- .../src/app/ntt-gantt/ntt-gantt.component.css | 17 +- .../app/ntt-gantt/ntt-gantt.component.html | 264 +++++++++--------- 2 files changed, 143 insertions(+), 138 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index e7d0454..055dd42 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -259,12 +259,19 @@ height: 70%; width: 59px; background-color: rgb(255, 255, 255); - border-width: 1px; - border: none; - border-bottom: 1px; - border-top-right-radius: 4px; border: solid 1px rgba(0, 0, 0, 0.124); - border-radius: 8px; + border-radius: 0px 8px 8px 0px; + border-left: none; +} + +.dateButton mat-icon { + transform: scale(0.8); + opacity: 0.75; + margin-right: 0px; +} + +.dateButton:hover>mat-icon { + opacity: 1; } .dateButton:hover { diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index e002ee6..90e73b4 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -102,158 +102,156 @@
-
-
- - - - - - - - Invalid start date - Invalid end date -
- - +
+
+ + + + + + + + Invalid start date + Invalid end date
- - - - {{scalar}} - - + +
-
- {{languageService.lMap.get('detailButton')}} - -
+ + + + {{scalar}} + + + +
+ {{languageService.lMap.get('detailButton')}} +
+
-
- -
+
+ +
- - + + - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
{{languageService.lMap.get('tooltipSummary')}}: - {{data.taskData.resources[0].resourceName}}
{{languageService.lMap.get('tooltipState')}}: - {{dataService.getStateNameById(data.taskData.resources[0].state)}}
{{languageService.lMap.get('tooltipPaketType')}}: - {{data.taskData.resources[0].packageName}}
{{languageService.lMap.get('tooltipContract')}}: - {{data.taskData.resources[0].vertragName}}
{{languageService.lMap.get('tooltipSupportGroupKv')}}: - {{data.taskData.resources[0].supportGroup}}
{{languageService.lMap.get('tooltipSupportGroupIh')}}: - {{data.taskData.resources[0].coordinatorSg}}
{{languageService.lMap.get('tooltipDate')}}: - {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}
-
- - + + + + + - + -
-

Die Suche lieferte keine Ergebnisse

-
-
-

The search did not return any results

-
- +
+

Die Suche lieferte keine Ergebnisse

+
+
+

The search did not return any results

+
+ - - + + - - - error - {{errorService.getLastError('rsso').name}} - {{errorService.getLastError('rsso').userInfo}} - - -

{{errorService.getLastError('rsso').message}}

- - + + + error + {{errorService.getLastError('rsso').name}} + {{errorService.getLastError('rsso').userInfo}} + + +

{{errorService.getLastError('rsso').message}}

+ + - - - error - {{errorService.getLastError('critical').name}} - {{errorService.getLastError('critical').userInfo}} - - -

{{errorService.getLastError('critical').message}}

- - + + + error + {{errorService.getLastError('critical').name}} + {{errorService.getLastError('critical').userInfo}} + + +

{{errorService.getLastError('critical').message}}

+ + - - - error - {{errorService.getLastError('error').name}} - {{errorService.getLastError('error').userInfo}} - - -

{{errorService.getLastError('error').message}}

- - \ No newline at end of file + + + error + {{errorService.getLastError('error').name}} + {{errorService.getLastError('error').userInfo}} + + +

{{errorService.getLastError('error').message}}

+ + \ No newline at end of file From 0fa86ff41634842f1ca23754077702a8e85e141a Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Tue, 14 May 2024 17:43:32 +0200 Subject: [PATCH 09/13] hover date range --- .../src/app/ntt-gantt/ntt-gantt.component.css | 3 +++ .../app/ntt-gantt/ntt-gantt.component.html | 24 +++++++++---------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 055dd42..f31c10c 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -254,6 +254,9 @@ margin: 0 0.5%; } +.dateRangePicker input:hover { + color: rgb(0, 0, 0); +} .dateButton { height: 70%; diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 90e73b4..82cce5d 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -101,10 +101,19 @@
+ + + + {{scalar}} + + + -
-
+
+
@@ -119,15 +128,6 @@
- - - - {{scalar}} - - -
{{languageService.lMap.get('detailButton')}} Date: Tue, 14 May 2024 17:53:11 +0200 Subject: [PATCH 10/13] sticky outline --- frontend/src/app/ntt-gantt/ntt-gantt.component.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index f31c10c..0a478c2 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -215,6 +215,7 @@ background-color: rgb(240, 240, 240); } +/* Ensure filterContainer sticks to the top when scrolling */ .filterContainer { display: flex; flex-direction: row; @@ -227,6 +228,15 @@ padding-left: 10px; padding-right: 15px; justify-content: space-between; + position: -webkit-sticky; /* For Safari */ + position: sticky; + top: 0; + z-index: 1000; /* Ensure it is above other content */ + border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); +} + +.filterContainer.sticky { + border-radius: 0; } .left, .right { From c2416ccfe539e5a1debd8ded99207cf346d56a62 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Tue, 14 May 2024 18:04:02 +0200 Subject: [PATCH 11/13] clear filter hover --- frontend/src/app/ntt-gantt/ntt-gantt.component.css | 12 ++++++++---- frontend/src/app/ntt-gantt/ntt-gantt.component.html | 3 +-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 0a478c2..499847f 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -196,8 +196,7 @@ align-items: center; justify-content: center; height: 70%; - - background-color: rgb(255, 255, 255); + background-color: rgba(255, 255, 255, 0.175); cursor: pointer; padding-left: 15px; padding-right: 15px; @@ -205,12 +204,15 @@ border-radius: 8px; font-weight: 500; gap: 3px; + transition: background-color 0.3s ease; /* Add this line for smooth transition */ + } .clearFilter:hover { - background-color: #ff370016; + background-color: rgba(255, 255, 255, 0.729); } + .filterButton:hover { background-color: rgb(240, 240, 240); } @@ -220,7 +222,7 @@ display: flex; flex-direction: row; align-items: center; - background-color: #f5f5f5; + background-color: rgba(245, 245, 245, 0.528); /* Semi-transparent background */ border: solid rgba(0, 0, 0, 0.1) 1px; border-bottom: none; border-radius: 10px 10px 0px 0px; @@ -233,8 +235,10 @@ top: 0; z-index: 1000; /* Ensure it is above other content */ border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); + backdrop-filter: blur(2px); /* Blur effect */ } + .filterContainer.sticky { border-radius: 0; } diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html index 82cce5d..083fdc6 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html @@ -64,8 +64,7 @@ {{languageService.lMap.get('nttGanttFilterButton')}} filter_alt - From 430619e622b72eb4bc6710fae1edfff064068875 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Wed, 15 May 2024 12:07:23 +0200 Subject: [PATCH 12/13] transition --- frontend/src/app/ntt-gantt/ntt-gantt.component.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 499847f..9187da8 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -188,6 +188,7 @@ border-radius: 8px; font-weight: 500; gap: 3px; + transition: background-color 0.3s ease; /* Add this line for smooth transition */ /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */ } From 5875322682a3811492cdd17e1f08fc77e44f8020 Mon Sep 17 00:00:00 2001 From: Said Gedik Date: Wed, 15 May 2024 12:59:07 +0200 Subject: [PATCH 13/13] removed horizontal scrolling --- frontend/src/app/app.component.css | 4 + .../src/app/ntt-gantt/ntt-gantt.component.css | 2 +- .../src/app/ntt-gantt/ntt-gantt.component.ts | 1063 +++++++++-------- 3 files changed, 538 insertions(+), 531 deletions(-) diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index d0d3601..36b8481 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -4,3 +4,7 @@ opacity: 0.9; filter: alpha(opacity = 90); } + +body, html { + overflow-x: hidden; +} \ No newline at end of file diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css index 9187da8..d5b2cfb 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css @@ -210,7 +210,7 @@ } .clearFilter:hover { - background-color: rgba(255, 255, 255, 0.729); + background-color: rgba(255, 255, 255, 0.804); } diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts index eff1c49..30d27de 100644 --- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts +++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts @@ -10,8 +10,8 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { GanttComponent } from '@syncfusion/ej2-angular-gantt'; import { DataService } from 'src/app/data.service'; import { projectNewData } from 'src/data'; -import {FormGroup, FormControl} from '@angular/forms'; -import {MatDialog} from '@angular/material/dialog'; +import { FormGroup, FormControl } from '@angular/forms'; +import { MatDialog } from '@angular/material/dialog'; import * as $ from 'jquery'; import { StateDialogComponent } from 'src/app/state-dialog/state-dialog.component'; import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar'; @@ -55,9 +55,9 @@ interface presetGroup { { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS } ] }) - /** - * The NttGanttComponent is the core Component of the application - */ +/** + * The NttGanttComponent is the core Component of the application +*/ export class NttGanttComponent implements OnInit { /**###################################################################### Variable Declarations and Definitions ######################################################################*/ @@ -86,28 +86,28 @@ export class NttGanttComponent implements OnInit { public labelSettings: object = {}; public projectStartDate: Date = new Date('12/01/2023'); public projectEndDate: Date = new Date('01/31/2025'); - public resourceFields: object ={}; + public resourceFields: object = {}; public editSettings: object = {}; - public tooltipSettings: object ={}; + public tooltipSettings: object = {}; public columns: object[] = []; public toolbar: any[] = []; public timelineSettings: object = {}; public rendering: boolean = true; - public blockedTaskIDs : number [] = [8]; - public selectionSettings : object = {}; + public blockedTaskIDs: number[] = [8]; + public selectionSettings: object = {}; public spin: boolean = true; public disableSpin: boolean = false; public sliceStart: number; public sliceEnd: number; public filterSettings: object; - public splitterSettings : object; + public splitterSettings: object; public renderGantt: boolean; public firstLoad: boolean; public selectedScalar: string; public scalars: string[]; public showDetails: boolean = true; - public panelOpenState:boolean; + public panelOpenState: boolean; public showNoResultsError: boolean = false; public horizontalPosition: MatSnackBarHorizontalPosition = 'end'; @@ -121,57 +121,57 @@ export class NttGanttComponent implements OnInit { public filterEndDate: Date; public showFilters: boolean = false; public filterEnabled: boolean = false; - private oldFilters:{}; + private oldFilters: {}; public filters: any = null; public sortEnabled: boolean = false; public sortedData: any[] = []; - private selectedRescourceIds : any[] = []; + private selectedRescourceIds: any[] = []; private selectedrowindex: number[] = []; private selectedrecords: any[] = []; private selRecs: any[] = []; - public states : any[] = []; + public states: any[] = []; private approvalPending: boolean; public sort = null; public oldSort = null; - public planTimes : any[] = []; + public planTimes: any[] = []; public sortSelectorName: any; - public presets : any[] = []; - public selectedPreset: Preset = {id: 'test', name : 'test', presetType: 'test', definition: {}}; + public presets: any[] = []; + public selectedPreset: Preset = { id: 'test', name: 'test', presetType: 'test', definition: {} }; public presetControl: FormControl = new FormControl('');; public presetGroups: presetGroup[] = [ { name: 'Sysdemdefault', presets: [ - {id: '0', name: 'TEST', presetType: 'Sysdemdefault', definition: {}}, + { id: '0', name: 'TEST', presetType: 'Sysdemdefault', definition: {} }, ], }, { name: 'Admin', presets: [ - {id: '1', name: 'TEST1', presetType: 'Admin', definition: {}}, + { id: '1', name: 'TEST1', presetType: 'Admin', definition: {} }, ], }, { name: 'User', presets: [ - {id: '2', name: 'TEST2', presetType: 'User', definition: {}}, + { id: '2', name: 'TEST2', presetType: 'User', definition: {} }, ], }, ]; - public userPreferences: {language:'', showDetails: false, view: ''}; + public userPreferences: { language: '', showDetails: false, view: '' }; public showSaveButton: boolean = false; public showSaveUnderButton: boolean = false; public isUserPreset: boolean = false; - public userId : string = null; + public userId: string = null; public rssoInit: boolean = true; public showInitPresetsError: boolean = false; @@ -195,7 +195,7 @@ export class NttGanttComponent implements OnInit { * @param dataService injects the dataService for data management and backend communication * @param matDialog injects the matDialog */ - constructor(public languageService: LanguageService, public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar, public errorService: ErrorService, private location: Location ) { + constructor(public languageService: LanguageService, public dataService: DataService, public matDialog: MatDialog, private _snackBar: MatSnackBar, public errorService: ErrorService, private location: Location) { this.initLanguge(true); } @@ -204,17 +204,17 @@ export class NttGanttComponent implements OnInit { */ public ngOnInit(): void { var WebFont = require('webfontloader'); - WebFont.load({google: {families: ['Material Icons',],},}); + WebFont.load({ google: { families: ['Material Icons',], }, }); this.renderGantt = false; this.firstLoad = true; this.sliceStart = 0; this.sliceEnd = 20; - this.dataService.getUser().then((res: any)=>{ + this.dataService.getUser().then((res: any) => { console.log(res); this.rssoInit = false; this.userId = res.userId; - if(res.userId == null){ + if (res.userId == null) { this.errorService.handleCostumError("RSSO Fehler", "Melden Sie sich erneut an", "USER ID = NULL", "rsso"); this.dataService.redirectToAuthUrl(); } @@ -275,86 +275,90 @@ export class NttGanttComponent implements OnInit { supportGroup: 'supportGroup', supportGroupId: 'supportGroupId', implementerEdit: 'implementerEdit', - plantime : 'plantime', + plantime: 'plantime', packageInstanceId: 'packageInstanceId' }; this.columns = [ { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 350 }, - { field: 'stateName', headerText: 'Status', width: 350}, - { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 }, - { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' }, - { field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}}, + { field: 'stateName', headerText: 'Status', width: 250 }, { field: 'plantime', headerText: 'Planzeit in H', width: 100 }, + { field: 'StartDate', headerText: 'Geplantes Start-Datum', format: { type: 'date', format: 'dd.MM.yyyy' } }, + { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 }, + // { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' }, + + { field: 'changeNr', headerText: 'Change Nummer', width: 200 } ]; - this.timelineSettings = {topTier: {unit: 'Month'}, bottomTier: {format: 'WW', unit: 'Week', count: 1}}; - this.editSettings = {allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true, showDeleteConfirmDialog: true}; - this.filterSettings = {ignoreAccent: true}; - this.selectionSettings = {mode: 'Row',type: 'Multiple'}; + this.timelineSettings = { topTier: { unit: 'Month' }, bottomTier: { format: 'WW', unit: 'Week', count: 1 } }; + this.editSettings = { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true, showDeleteConfirmDialog: true }; + this.filterSettings = { ignoreAccent: true }; + this.selectionSettings = { mode: 'Row', type: 'Multiple' }; this.toolbar = ['']; - this.labelSettings = {rightLabel: 'resources',taskLabel: 'TaskName'}; - this.tooltipSettings = {showTooltip: true} + this.labelSettings = { rightLabel: 'resources', taskLabel: 'TaskName' }; + this.tooltipSettings = { showTooltip: true } this.projectStartDate = this.range.controls.start.value; this.projectEndDate = this.range.controls.end.value; - this.splitterSettings = {position: 30 + '%'}; + this.splitterSettings = { position: 30 + '%' }; this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate]; } - - public selectPreset(event: any){ + + public selectPreset(event: any) { this.showSaveButton = false; this.showSaveUnderButton = false; - if(event.value.presetType == 'System' || event.value.presetType == 'Admin'){ + if (event.value.presetType == 'System' || event.value.presetType == 'Admin') { this.isUserPreset = false; - }else{ + } else { this.isUserPreset = true; } console.log(event); - this.dataService.selectPreset(event.value).then((res)=>{ + this.dataService.selectPreset(event.value).then((res) => { this.refreshGanttwithPresets(); }); } - public savePreset(preset: any){ + public savePreset(preset: any) { this.showSaveButton = false; this.showSaveUnderButton = false; - this.dataService.savePreset(preset).then((res)=>{{ - console.log(res); - }}) + this.dataService.savePreset(preset).then((res) => { + { + console.log(res); + } + }) } - public updatePreset(){ + public updatePreset() { this.showSaveButton = false; this.selectedPreset.definition = this.filters; - this.dataService.updatePreset(this.selectedPreset).then((res)=>{ + this.dataService.updatePreset(this.selectedPreset).then((res) => { console.log(res); }); } - public renamePreset(preset: any){ + public renamePreset(preset: any) { } - public deletePreset(preset: any){ + public deletePreset(preset: any) { } - public editUserPreferences(){ + public editUserPreferences() { let showDetails = 0; - if(this.showDetails){ + if (this.showDetails) { showDetails = 1; } let view; let index = 0; for (const scalar of this.scalars) { index++; - if(scalar == this.selectedScalar){ + if (scalar == this.selectedScalar) { view = index; } } - if(this.userPreferences.language == this.languageService.language && this.userPreferences.showDetails == this.showDetails && this.userPreferences.view == view){ - }else{ - this.dataService.editUserPreferences({language: this.languageService.language, showDetails: showDetails, view: view}).then((res)=>{ + if (this.userPreferences.language == this.languageService.language && this.userPreferences.showDetails == this.showDetails && this.userPreferences.view == view) { + } else { + this.dataService.editUserPreferences({ language: this.languageService.language, showDetails: showDetails, view: view }).then((res) => { console.log(res); }); } @@ -364,24 +368,11 @@ export class NttGanttComponent implements OnInit { * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart. * This function is triggered by the filter button. */ - public openRenameDialog(){ - console.log(this.filters); - let dialogRef = RenamePresetDialogComponent; - this.matDialog.open(dialogRef, - {data : [{preset: this.selectedPreset}], width: '20%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{ - this.refreshGanttwithPresets(); - }); - } - - /** - * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart. - * This function is triggered by the filter button. - */ - public openSaveUnderDialog(){ + public openRenameDialog() { console.log(this.filters); - let dialogRef = SavePresetUnderDialogComponent; - this.matDialog.open(dialogRef, - {data : [{preset: this.selectedPreset, definition: this.filters}], width: '20%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{ + let dialogRef = RenamePresetDialogComponent; + this.matDialog.open(dialogRef, + { data: [{ preset: this.selectedPreset }], width: '20%', maxWidth: '800px' }).afterClosed().subscribe((res) => { this.refreshGanttwithPresets(); }); } @@ -390,28 +381,41 @@ export class NttGanttComponent implements OnInit { * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart. * This function is triggered by the filter button. */ - public openDeleteDialog(){ + public openSaveUnderDialog() { + console.log(this.filters); + let dialogRef = SavePresetUnderDialogComponent; + this.matDialog.open(dialogRef, + { data: [{ preset: this.selectedPreset, definition: this.filters }], width: '20%', maxWidth: '800px' }).afterClosed().subscribe((res) => { + this.refreshGanttwithPresets(); + }); + } + + /** + * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart. + * This function is triggered by the filter button. + */ + public openDeleteDialog() { console.log(this.filters); let dialogRef = DeletePresetDialogComponent; console.log(this.selectedPreset); - this.matDialog.open(dialogRef, - {data : [{preset: this.selectedPreset}], width: '20%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{ + this.matDialog.open(dialogRef, + { data: [{ preset: this.selectedPreset }], width: '20%', maxWidth: '800px' }).afterClosed().subscribe((res) => { this.refreshGanttwithPresets(); }); } - public refreshGanttwithPresets(){ + public refreshGanttwithPresets() { this.showSaveButton = false; this.showSaveUnderButton = false; - this.dataService.initPresets().then((res: any)=>{ - if(res.status){ + this.dataService.initPresets().then((res: any) => { + if (res.status) { this.showInitPresetsError = true; } this.presets = res.presets; this.selectedPreset = res.selectedPreset; - if(this.selectedPreset.presetType == 'User' ){ + if (this.selectedPreset.presetType == 'User') { this.isUserPreset = true; - }else{ + } else { this.isUserPreset = false; } console.log("\nselectedPreset:") @@ -427,17 +431,17 @@ export class NttGanttComponent implements OnInit { this.changeScalar(); - this.dataService.fetchUserSupportGroup().then((res: any)=>{ + this.dataService.fetchUserSupportGroup().then((res: any) => { this.userSupportGroup = res.name; - if(this.selectedPreset.name == "Systemdefault"){ - this.filters = {filterElement: [{column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup]}]} - }else{ + if (this.selectedPreset.name == "Systemdefault") { + this.filters = { filterElement: [{ column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup] }] } + } else { this.filters = this.selectedPreset.definition; } console.log(this.userSupportGroup); this.refreshData(); this.states = this.dataService.getStates(); - this.dataService.fetchStates().then((res: any [])=>{ + this.dataService.fetchStates().then((res: any[]) => { this.states = res; this.stateList = res; this.spin = false; @@ -458,16 +462,16 @@ export class NttGanttComponent implements OnInit { * @param start begin of slice * @param end end of slice */ - public mapTasksToResources(start : number, end : number){ + public mapTasksToResources(start: number, end: number) { this.data = []; this.resources = this.allResources; for (const resource of this.resources) { for (const task of resource.tasks) { - if(this.showDetails == false){ - if(task.TaskID.includes("D2")){ + if (this.showDetails == false) { + if (task.TaskID.includes("D2")) { this.data.push(task); } - }else{ + } else { this.data.push(task); } @@ -479,32 +483,32 @@ export class NttGanttComponent implements OnInit { * Furthermore it evaluates the result if the applied filters delivered any Results. * This function is the most called Funktion in the whole project, it is triggered by a pageEvent, when a filter gets applied and much more... */ - refreshData(){ + refreshData() { this.resetBulkOpButtons(); this.disableSpin = false; this.editUserPreferences(); this.showNoResultsError = false; this.renderGantt = false; - this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[])=>{ + this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[]) => { this.allResources = res; - this.mapTasksToResources(this.sliceStart,this.sliceEnd); - if(res.length > 0){ - if(res.length == 1){ - this.disableSpin = true; - } - this.spin = true; - this.renderGantt = true; - this.showNoResultsError = false; - if(this.selectedScalar == this.scalars[1]){ - this.renderplanTime = true; - } - - }else{ - this.renderGantt = false; - this.spin = false; - this.showNoResultsError = true; - this.renderplanTime = false; + this.mapTasksToResources(this.sliceStart, this.sliceEnd); + if (res.length > 0) { + if (res.length == 1) { + this.disableSpin = true; } + this.spin = true; + this.renderGantt = true; + this.showNoResultsError = false; + if (this.selectedScalar == this.scalars[1]) { + this.renderplanTime = true; + } + + } else { + this.renderGantt = false; + this.spin = false; + this.showNoResultsError = true; + this.renderplanTime = false; + } }); } @@ -513,62 +517,62 @@ export class NttGanttComponent implements OnInit { * Furthermore it evaluates the result if the applied filters delivered any Results. * This function is the most called Funktion in the whole project, it is triggered by a pageEvent, when a filter gets applied and much more... */ - refreshGanttWithFilters(){ + refreshGanttWithFilters() { this.resetBulkOpButtons(); this.disableSpin = false; this.editUserPreferences(); this.showNoResultsError = false; this.renderGantt = false; - this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[])=>{ + this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[]) => { this.allResources = res; - this.mapTasksToResources(this.sliceStart,this.sliceEnd); - if(res.length > 0){ - if(res.length == 1){ - this.disableSpin = true; - } - this.spin = true; - this.renderGantt = true; - this.showNoResultsError = false; - if(this.selectedScalar == this.scalars[1]){ - this.renderplanTime = true; - } - - }else{ - this.renderGantt = false; - this.spin = false; - this.showNoResultsError = true; - this.renderplanTime = false; + this.mapTasksToResources(this.sliceStart, this.sliceEnd); + if (res.length > 0) { + if (res.length == 1) { + this.disableSpin = true; } + this.spin = true; + this.renderGantt = true; + this.showNoResultsError = false; + if (this.selectedScalar == this.scalars[1]) { + this.renderplanTime = true; + } + + } else { + this.renderGantt = false; + this.spin = false; + this.showNoResultsError = true; + this.renderplanTime = false; + } }); } /** * The function clearFilter clears allFilter parameters and set them to inital values, then it triggers the refreshData function to fetch the changes without any filters except the supportGroup filter. * This function is triggered if the user disables the apply filter switch */ - clearFilter(){ - this.filters = null; - this.filterEnabled = false; - this.sort = null; - this.sortEnabled = false; - this.filterBadge = false; - this.refreshData(); - if(this.filters !== this.selectedPreset.definition){ - if(this.isUserPreset){ - this.showSaveButton = true; - this.showSaveUnderButton = false; - }else{ - this.showSaveButton = false; - this.showSaveUnderButton = true; - } - + clearFilter() { + this.filters = null; + this.filterEnabled = false; + this.sort = null; + this.sortEnabled = false; + this.filterBadge = false; + this.refreshData(); + if (this.filters !== this.selectedPreset.definition) { + if (this.isUserPreset) { + this.showSaveButton = true; + this.showSaveUnderButton = false; + } else { + this.showSaveButton = false; + this.showSaveUnderButton = true; } + + } } /** * The function mapRequestJSON maps the requestObject for the refreshData function, it evaluates if filters or sort parameters are set. * Furtheremore it adds the sliceStart and sliceEnd values of the paginator to the requestObject, because the frontend only delivers the changes that can be displayed on one selected page of the paginator. * If no filter is applied the function sets a default supportGroup filter, so that the user gets only changes displayed, which are in his supportGroup. */ - mapRequestJSON(){ + mapRequestJSON() { // this.userSupportGroup = "IH - Ost 1 - Team Kaisermühlen"; // console.log(this.filters.filterElement[0].criteria[0]); // let i = 0; @@ -593,10 +597,10 @@ export class NttGanttComponent implements OnInit { { 'sliceStart': this.sliceStart, 'sliceEnd': this.sliceEnd, - filter: this.filterEnabled ? this.filters : {filterElement: [{column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup]}]}, + filter: this.filterEnabled ? this.filters : { filterElement: [{ column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup] }] }, sort: this.sortEnabled ? this.sort : { 'column': 'ChangeNr', -        'mode': 'asc' + 'mode': 'asc' }, } console.log("\nrequest") @@ -609,13 +613,13 @@ export class NttGanttComponent implements OnInit { * Furthermore it stores the old filters in a help variable to restore it when to user turns the apply filter switch back on. * This function is triggered by the a filter action of the filterdialog, or if the user switches the apply filter switch. */ - applyFilter(){ - if(this.filterEnabled){ + applyFilter() { + if (this.filterEnabled) { this.oldFilters = this.filters this.filters = null; this.refreshData(); this.plantimeComponent.fetchPlanTimes(this.filters); - }else{ + } else { this.filters = this.oldFilters; this.refreshData(); this.plantimeComponent.fetchPlanTimes(this.filters); @@ -626,12 +630,12 @@ export class NttGanttComponent implements OnInit { * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart. * This function is triggered by the filter button. */ - openFilterDialog(){ + openFilterDialog() { console.log(this.filters); let dialogRef = FilterDialogComponent; - this.matDialog.open(dialogRef, - {data : [{filters: this.filters, userSg: this.userSupportGroup}], width: '50%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{ - if(res){ + this.matDialog.open(dialogRef, + { data: [{ filters: this.filters, userSg: this.userSupportGroup }], width: '50%', maxWidth: '800px' }).afterClosed().subscribe((res) => { + if (res) { this.filters = res; this.filterEnabled = true; // this.dataService.savePreset({name: "FRONTEND TEST PRESET", definition: JSON.stringify(this.filters)}).then((res)=>{ @@ -640,20 +644,20 @@ export class NttGanttComponent implements OnInit { // this.dataService.updatePreset({id: 'AGGAA5V0G2LS6ASCSUZZSBS79E40O5', definition: JSON.stringify(this.filters)}).then((res)=>{ // console.log(res); // }); - if(this.filters !== this.selectedPreset.definition){ - if(this.isUserPreset){ + if (this.filters !== this.selectedPreset.definition) { + if (this.isUserPreset) { this.showSaveButton = true; this.showSaveUnderButton = false; - }else{ + } else { this.showSaveButton = false; this.showSaveUnderButton = true; } } - if(this.filters){ - if(this.filters.filterElement){ - if(this.filters.filterElement[1]){ + if (this.filters) { + if (this.filters.filterElement) { + if (this.filters.filterElement[1]) { this.filterBadge = true; - }else{ + } else { this.filterBadge = false; } @@ -672,9 +676,9 @@ export class NttGanttComponent implements OnInit { * The function languageChange executes a language change in the language service and triggers the initLanguage function. * This function is triggered by a manual language of the user. */ - public languageChange(args: any){ + public languageChange(args: any) { this.languageService.languageChange(args.value), - this.initLanguge(); + this.initLanguge(); this.plantimeComponent.changeLanguage(); this.editUserPreferences(); } @@ -684,19 +688,19 @@ export class NttGanttComponent implements OnInit { * This function is triggered by the ngOnInit function or the languageChange function * @param initial determines if the function is initially trigger by the ngOnInit function, in all other cases the gantt chart should be refrehed */ - initLanguge(initial: boolean = false){ + initLanguge(initial: boolean = false) { - if(this.languageService.language == 'DE'){ + if (this.languageService.language == 'DE') { this.scalars = ['Woche', 'Monat', 'Jahr']; this.selectedScalar = 'Monat'; } - else{ + else { this.scalars = ['Week', 'Month', 'Year']; this.selectedScalar = 'Month'; } this.columns = this.languageService.getColumns(); - if(!initial){ + if (!initial) { this.refreshData(); } } @@ -705,17 +709,17 @@ export class NttGanttComponent implements OnInit { * The function changeScalar executes a change of the displayed time scalar. * This function is triggered if the user changes the time scalar. */ - public changeScalar(){ - if(this.selectedScalar == this.scalars[0]){ - this.timelineSettings = {topTier: {unit: 'Week'}, bottomTier: {format: 'dd', unit: 'Day', count: 1}}; + public changeScalar() { + if (this.selectedScalar == this.scalars[0]) { + this.timelineSettings = { topTier: { unit: 'Week' }, bottomTier: { format: 'dd', unit: 'Day', count: 1 } }; this.renderplanTime = false; } - if(this.selectedScalar == this.scalars[1]){ - this.timelineSettings = {topTier: {unit: 'Month'}, bottomTier: {format: 'WW', unit: 'Week', count: 1}}; + if (this.selectedScalar == this.scalars[1]) { + this.timelineSettings = { topTier: { unit: 'Month' }, bottomTier: { format: 'WW', unit: 'Week', count: 1 } }; this.renderplanTime = true; } - if(this.selectedScalar == this.scalars[2]){ - this.timelineSettings = {topTier: {unit: 'Year'}, bottomTier: {format: 'MM',unit: 'Month',count: 1}}; + if (this.selectedScalar == this.scalars[2]) { + this.timelineSettings = { topTier: { unit: 'Year' }, bottomTier: { format: 'MM', unit: 'Month', count: 1 } }; this.renderplanTime = false; } this.editUserPreferences(); @@ -728,10 +732,10 @@ export class NttGanttComponent implements OnInit { * The function handlePageEvent catches the corresponding matpaginator event and slices the gantt chart, that it fits to the actual page * @param e pageEvent from the matpaginator */ - public handlePageEvent(e: PageEvent):void { - console.log("Index: "+e.pageIndex+" x "+ "Size: "+e.pageSize + " = "+ e.pageSize*e.pageIndex); - let start = e.pageSize*e.pageIndex; - let end = start+ e.pageSize; + public handlePageEvent(e: PageEvent): void { + console.log("Index: " + e.pageIndex + " x " + "Size: " + e.pageSize + " = " + e.pageSize * e.pageIndex); + let start = e.pageSize * e.pageIndex; + let end = start + e.pageSize; this.sliceStart = start; this.sliceEnd = end; @@ -740,12 +744,12 @@ export class NttGanttComponent implements OnInit { this.refreshData(); } - /** - * The function startDateChanged catches the corresponding date-range-picker event - * @param startDate new startDate from date-range-picker - */ - public startDateChanged(startDate: any){ - if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates + /** + * The function startDateChanged catches the corresponding date-range-picker event + * @param startDate new startDate from date-range-picker + */ + public startDateChanged(startDate: any) { + if (this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value) { //event for Requesting new Records based on the Dates this.projectStartDate = new Date(this.range.controls.start.value); this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate); this.renderplanTime = true; @@ -757,116 +761,116 @@ export class NttGanttComponent implements OnInit { * The function endDateChanged catches the corresponding date-range-picker event and validates the selected start- and enddate bacause the gantt chart needs a valid Date to be displayed * @param endDate new endDate from date-range-picker */ - public endDateChanged(endDate: any){ - if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates - this.projectEndDate = new Date(this.range.controls.end.value); - this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate); - this.renderplanTime = true; + public endDateChanged(endDate: any) { + if (this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value) { //event for Requesting new Records based on the Dates + this.projectEndDate = new Date(this.range.controls.end.value); + this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate); + this.renderplanTime = true; - } + } } /** * The function toolbarBtnClicked catches the corresponding syncfsuions event and executes the button logic when a button is clicked * @param args */ - public toolbarBtnClicked(args :any){ - if(args.item.text === "Statusübergang" || args.item.text === "State Transition"){ - let data = {changes: [], states: this.states}; - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const iterator of this.resources) { - if(iterator.resourceId == selectedRescourceId){ - data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state}); - } + public toolbarBtnClicked(args: any) { + if (args.item.text === "Statusübergang" || args.item.text === "State Transition") { + let data = { changes: [], states: this.states }; + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const iterator of this.resources) { + if (iterator.resourceId == selectedRescourceId) { + data.changes.push({ resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state }); } } - let dialogRef = StateDialogComponent; - this.matDialog.open(dialogRef,{data : data}).afterClosed().subscribe((res)=>{ - console.log(res); - if(res == "Success"){ - this.refreshData(); - } - }); } + let dialogRef = StateDialogComponent; + this.matDialog.open(dialogRef, { data: data }).afterClosed().subscribe((res) => { + console.log(res); + if (res == "Success") { + this.refreshData(); + } + }); + } - if(args.item.text === "Implementer Eintragen" || args.item.text === "Enter Implementer"){ - let data = {changes: []}; - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const change of this.resources) { - if(change.resourceId == selectedRescourceId){ - data.changes.push({resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId}); - } + if (args.item.text === "Implementer Eintragen" || args.item.text === "Enter Implementer") { + let data = { changes: [] }; + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const change of this.resources) { + if (change.resourceId == selectedRescourceId) { + data.changes.push({ resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId }); } } - this.matDialog.open(ImplementerDialogComponent,{data : data}); } + this.matDialog.open(ImplementerDialogComponent, { data: data }); + } - if(args.item.text === "Genehmigen" || args.item.text === "Approve"){ - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const change of this.resources) { - 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: ['green-snackbar']}); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']}); - } + if (args.item.text === "Genehmigen" || args.item.text === "Approve") { + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const change of this.resources) { + 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: ['green-snackbar'] }); + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar'] }); + } + this.refreshData(); + }); + } + } + } + } + + if (args.item.text === "Zur Genehmigung" || args.item.text === "Permit") { + let data = { changes: [], states: this.states }; + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const iterator of this.resources) { + if (iterator.resourceId == selectedRescourceId) { + data.changes.push({ resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state }); + } + } + } + let dialogRef = StateDialogComponent; + this.matDialog.open(dialogRef, { data: data }).afterClosed().subscribe((res) => { + if (res.status == 200) { + this.refreshData(); + } + }); + } + + if (args.item.text === "Ablehnen" || args.item.text === "Reject") { + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const change of this.resources) { + 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: ['green-snackbar'] }); this.refreshData(); - }); - } + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar'] }); + } + }); } } } + } - if(args.item.text === "Zur Genehmigung" || args.item.text === "Permit"){ - let data = {changes: [], states: this.states}; - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const iterator of this.resources) { - if(iterator.resourceId == selectedRescourceId){ - data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state}); - } - } - } - let dialogRef = StateDialogComponent; - this.matDialog.open(dialogRef, {data : data}).afterClosed().subscribe((res)=>{ - if(res.status == 200){ - this.refreshData(); - } - }); - } - - if(args.item.text === "Ablehnen" || args.item.text === "Reject"){ - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const change of this.resources) { - 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: ['green-snackbar']}); - this.refreshData(); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']}); - } - }); - } - } - } - } - - if(args.item.text === "stornieren" || args.item.text === "Cancel"){ - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const change of this.resources) { - if(change.resourceId == selectedRescourceId){ - this.dataService.updateApproval(change, 3).then((res: any)=>{ - if(res.status == 200){ - this._snackBar.open("Stornieren erfolgreich", 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); - this.refreshData(); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); - } - }); - } + if (args.item.text === "stornieren" || args.item.text === "Cancel") { + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const change of this.resources) { + if (change.resourceId == selectedRescourceId) { + this.dataService.updateApproval(change, 3).then((res: any) => { + if (res.status == 200) { + this._snackBar.open("Stornieren erfolgreich", 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary'] }); + this.refreshData(); + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary'] }); + } + }); } } } + } } /**############################### Syncfusion Framework EVENTS /**###############################*/ @@ -877,41 +881,40 @@ export class NttGanttComponent implements OnInit { */ public queryTaskbarInfo(args: any) { - if (args.taskbarType == 'Milestone' && args.data.taskData.TaskID.includes("D2")) - { - if(args.data.taskData.isFixed == false){ + if (args.taskbarType == 'Milestone' && args.data.taskData.TaskID.includes("D2")) { + if (args.data.taskData.isFixed == false) { args.taskbarElement.children[1].classList.add('e-gantt-milestone-border1'); - }else{ + } else { args.taskbarElement.children[1].classList.remove('e-gantt-milestone-border1'); args.taskbarElement.children[1].classList.add('e-gantt-milestone-border2'); } - if(args.data.taskData.TaskID.includes("D2")){ + if (args.data.taskData.TaskID.includes("D2")) { // console.log(args.data.taskData.resources[0]); - if (args.data.taskData.resources[0].state == 0 ) { + if (args.data.taskData.resources[0].state == 0) { args.milestoneColor = "#f83200"; //red // console.log("red"); } - if (args.data.taskData.resources[0].state == 1 ) { + if (args.data.taskData.resources[0].state == 1) { args.milestoneColor = "#f98700"; //orange // console.log("orange"); } - if (args.data.taskData.resources[0].state == 3 ) { + if (args.data.taskData.resources[0].state == 3) { args.milestoneColor = "#ff9248"; //light orange // console.log("light orange"); } - if (args.data.taskData.resources[0].state >= 6 ) { + if (args.data.taskData.resources[0].state >= 6) { args.milestoneColor = "#ffff00"; //yellow // console.log("yellow"); } - if (args.data.taskData.resources[0].state == 7 ) { + if (args.data.taskData.resources[0].state == 7) { args.milestoneColor = "#ffff00"; //yellow // // console.log("yellow"); } - if (args.data.taskData.resources[0].state == 9 ) { + if (args.data.taskData.resources[0].state == 9) { args.milestoneColor = "#d3d3d3"; //yellow // // console.log("yellow"); } - if (args.data.taskData.resources[0].state == 91 ) { + if (args.data.taskData.resources[0].state == 91) { args.milestoneColor = "grey"; //yellow // // console.log("yellow"); } @@ -923,7 +926,7 @@ export class NttGanttComponent implements OnInit { args.milestoneColor = "#32CD32"; //lightgreen // console.log("lightgreen"); } - if (args.data.taskData.resources[0].state == 11 ) { + if (args.data.taskData.resources[0].state == 11) { args.milestoneColor = "#ffffff"; //white // console.log("white"); } @@ -937,22 +940,22 @@ export class NttGanttComponent implements OnInit { } } - else{ - if(args.taskbarType == 'Milestone' && !args.data.taskData.TaskID.includes("D2")){ + else { + if (args.taskbarType == 'Milestone' && !args.data.taskData.TaskID.includes("D2")) { args.taskbarElement.children[1].classList.add('e-gantt-milestone-border3'); - if(this.showDetails == true){ - if (args.data.taskData.TaskID.includes("D1")||args.data.taskData.TaskID.includes("D4")||args.data.taskData.TaskID.includes("D3")){ - if(args.data.taskData.TaskID.includes("D1")){ - args.milestoneColor = "#d4d4d4"; - } - if(args.data.taskData.TaskID.includes("D4")){ - args.milestoneColor = "#a1a1a1"; - } + if (this.showDetails == true) { + if (args.data.taskData.TaskID.includes("D1") || args.data.taskData.TaskID.includes("D4") || args.data.taskData.TaskID.includes("D3")) { + if (args.data.taskData.TaskID.includes("D1")) { + args.milestoneColor = "#d4d4d4"; + } + if (args.data.taskData.TaskID.includes("D4")) { + args.milestoneColor = "#a1a1a1"; + } } - if (args.data.taskData.TaskID.includes("D3")){ - args.milestoneColor = "#bababa"; + if (args.data.taskData.TaskID.includes("D3")) { + args.milestoneColor = "#bababa"; } - }else{ + } else { // console.log(args); args.taskbarElement.innerHTML = null; args.taskbarElement.classlist = null; @@ -967,22 +970,22 @@ export class NttGanttComponent implements OnInit { * If the isFixed flag is false, it triggers the dataService to update the moved date. * @param args event arguments from the syncfusion gantt chart. */ - public taskbarEdited(args: any){ - if(args.data.taskData.isFixed !== false ) { - args.cancel = true; - }else{ + public taskbarEdited(args: any) { + if (args.data.taskData.isFixed !== false) { + args.cancel = true; + } else { const found = this.allResources.find((resource) => { return resource.resourceId == args.data.taskData.resources[0].resourceId; }); - this.dataService.updateDatePerChange(found).then((res: any)=>{ - if(res.ok == false){ - this._snackBar.open("Änderung fehlegeschlagen, bitte erneut versuchen", 'Schließen', {duration: 10000,horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']}); - }else{ + this.dataService.updateDatePerChange(found).then((res: any) => { + if (res.ok == false) { + this._snackBar.open("Änderung fehlegeschlagen, bitte erneut versuchen", 'Schließen', { duration: 10000, horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar'] }); + } else { // console.log(res); - this._snackBar.open("Änderung erfolgreich, Neues Datum: "+res.d2.slice(0,-14), 'Schließen', {duration: 3000, horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['green-snackbar']}); + this._snackBar.open("Änderung erfolgreich, Neues Datum: " + res.d2.slice(0, -14), 'Schließen', { duration: 3000, horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['green-snackbar'] }); this.plantimeComponent.fetchPlanTimes(); let elem = document.querySelector( - '#'+'ganttDefaultSum'+ 'GanttChart > div.e-chart-root-container > div' + '#' + 'ganttDefaultSum' + 'GanttChart > div.e-chart-root-container > div' ); elem.scrollLeft = this.planTimeScrollLeft; } @@ -996,7 +999,7 @@ export class NttGanttComponent implements OnInit { * @param args event arguments from the syncfusion gantt chart. */ public taskbarEditing(args: any) { - if(args.data.taskData.isFixed !== false ) { + if (args.data.taskData.isFixed !== false) { args.cancel = true; } } @@ -1005,10 +1008,10 @@ export class NttGanttComponent implements OnInit { * The function taskbarEditing catches the corresponding syncfsuions event and executes a query operation to synchronize the scrollbars of the main gannt chart and the planTimeBart gantt chart. * @param args event arguments from the syncfusion gantt chart. */ - public actionComplete(args: any){ + public actionComplete(args: any) { if (args.action === 'HorizontalScroll') { let elem = document.querySelector( - '#'+'ganttDefaultSum'+ 'GanttChart > div.e-chart-root-container > div' + '#' + 'ganttDefaultSum' + 'GanttChart > div.e-chart-root-container > div' ); elem.scrollLeft = args.scrollLeft; this.planTimeScrollLeft = args.scrollLeft; @@ -1030,73 +1033,73 @@ export class NttGanttComponent implements OnInit { public dataBound(args: any) { // console.log(args); this.spin = false; - if(this.sortEnabled && this.sortSelectorName){ + if (this.sortEnabled && this.sortSelectorName) { this.selectSortedColumn(this.sortSelectorName); } - // const headerDivs = document.querySelectorAll('.e-headercelldiv'); + // const headerDivs = document.querySelectorAll('.e-headercelldiv'); - // // Add click event listener to each 'e-headercelldiv' + // // Add click event listener to each 'e-headercelldiv' - // headerDivs.forEach((div) => { + // headerDivs.forEach((div) => { - // div.addEventListener('click', function () { + // div.addEventListener('click', function () { - // console.log('Element is clicked you can write your own custom function'); - // console.log(this); - // // Remove 'selected' class from all 'e-headercell' elements + // console.log('Element is clicked you can write your own custom function'); + // console.log(this); + // // Remove 'selected' class from all 'e-headercell' elements - // document.querySelectorAll('.e-headercell').forEach((cell) => { + // document.querySelectorAll('.e-headercell').forEach((cell) => { - // cell.classList.remove('selected'); + // cell.classList.remove('selected'); - // }); + // }); - // // Add 'selected' class to the parent 'e-headercell' of the clicked div + // // Add 'selected' class to the parent 'e-headercell' of the clicked div - // this.closest('.e-headercell').classList.add('selected'); + // this.closest('.e-headercell').classList.add('selected'); - // }); + // }); - // }); + // }); } - public selectSortedColumn(colName: string){ + public selectSortedColumn(colName: string) { const headerDivs = document.querySelectorAll('.e-headercelldiv'); - headerDivs.forEach((div) => { - console.log('############################################'); - // console.log(div); - // Remove 'selected' class from all 'e-headercell' elements + headerDivs.forEach((div) => { + console.log('############################################'); + // console.log(div); + // Remove 'selected' class from all 'e-headercell' elements - // document.querySelectorAll('.e-headercell').forEach((cell) => { - // console.log(div.firstChild.textContent); - // console.log(colName); - if(div.firstChild.textContent == colName){ - div.closest('.e-headercell').classList.add('selected'); - console.log(div.closest('.e-headercell').children[1]); - console.log(this.sort.mode == 'asc'); - if(this.sort.mode == 'asc'){ - div.closest('.e-headercell').children[1].innerHTML = "arrow_downward" - }else{ - div.closest('.e-headercell').children[1].innerHTML = "arrow_upward" - } - }else{ - div.classList.remove('selected'); - } + // document.querySelectorAll('.e-headercell').forEach((cell) => { + // console.log(div.firstChild.textContent); + // console.log(colName); + if (div.firstChild.textContent == colName) { + div.closest('.e-headercell').classList.add('selected'); + console.log(div.closest('.e-headercell').children[1]); + console.log(this.sort.mode == 'asc'); + if (this.sort.mode == 'asc') { + div.closest('.e-headercell').children[1].innerHTML = "arrow_downward" + } else { + div.closest('.e-headercell').children[1].innerHTML = "arrow_upward" + } + } else { + div.classList.remove('selected'); + } - }); + }); - // Add 'selected' class to the parent 'e-headercell' of the clicked div + // Add 'selected' class to the parent 'e-headercell' of the clicked div - // this.closest('.e-headercell').classList.add('selected'); + // this.closest('.e-headercell').classList.add('selected'); - // }); + // }); // const col = document.querySelector(colName); // console.log(col); @@ -1116,7 +1119,7 @@ export class NttGanttComponent implements OnInit { * The function onExpand catches the corresponding syncfsuions event and avoids a chart row from beeing expanded by the user. * @param args event arguments from the syncfusion gantt chart. */ - public onExpand(args: any){ + public onExpand(args: any) { args.cancel = true; } @@ -1126,7 +1129,7 @@ export class NttGanttComponent implements OnInit { */ public splitterResizing(args) { - this.splitterSettings = {position: args.paneSize[0].toString() + 'px'}; + this.splitterSettings = { position: args.paneSize[0].toString() + 'px' }; } /** @@ -1134,93 +1137,93 @@ export class NttGanttComponent implements OnInit { * @param args event arguments from the syncfusion gantt chart. */ public actionBegin(args: any) { - if(args.requestType == 'taskbarediting'){ - if(args.taskBarEditAction == 'MilestoneDrag'){ - if(args.data.TaskID.includes("D2")){ - if(args.data.taskData.isFixed == true ) { + if (args.requestType == 'taskbarediting') { + if (args.taskBarEditAction == 'MilestoneDrag') { + if (args.data.TaskID.includes("D2")) { + if (args.data.taskData.isFixed == true) { args.cancel = true; - } - }else{ + } + } else { args.cancel = true; } return; } } - if(args.dialogModel){ + if (args.dialogModel) { args.cancel = true; - if(args.rowData.taskData.resources[0].state == 0){ - window.open("https://itsm-test-neu-smartit.asfinag.at/smartit/app/#/paketPV/"+args.rowData.taskData.resources[0].packageInstanceId, "_blank"); - }else{ - window.open("https://itsm-dev-neu-smartit.asfinag.at/smartit/app/#/changePV/"+args.rowData.taskData.resources[0].packageInstanceId, "_blank"); + if (args.rowData.taskData.resources[0].state == 0) { + window.open("https://itsm-test-neu-smartit.asfinag.at/smartit/app/#/paketPV/" + args.rowData.taskData.resources[0].packageInstanceId, "_blank"); + } else { + window.open("https://itsm-dev-neu-smartit.asfinag.at/smartit/app/#/changePV/" + args.rowData.taskData.resources[0].packageInstanceId, "_blank"); } this.ganttDefault.hideSpinner(); - }else{ - if(args.requestType=='sorting'){ - let colName = ""; - let mode = "asc"; + } else { + if (args.requestType == 'sorting') { + let colName = ""; + let mode = "asc"; + args.cancel = true; + + switch (args.columnName) { + case 'TaskName': + colName = 'ResourceName'; + break; + case 'stateName': + colName = 'State'; + break; + case 'supportGroup': + colName = 'SupportGroup'; + break; + case 'approvalStatus': + colName = 'ApprovalStatus'; + break; + default: + break; + } + if (colName != '') { + this.sortSelectorName = args.target.firstChild.innerText; + this.sortEnabled = true; + if (this.oldSort != null && this.oldSort.column == this.sort.column) { + mode = 'dsc'; + } + if (this.sort == null) { + this.sort = { 'column': colName, 'mode': mode } + this.oldSort = this.sort; + } else { + this.oldSort = this.sort; + this.sort = { 'column': colName, 'mode': mode } + } + + + if (this.oldSort != null && this.oldSort.mode == 'dsc') { + this.sort = null; + this.oldSort = null; + this.sortEnabled = false; + this.sortSelectorName = null; + } + this.oldSort; + this.sort; + this.refreshData(); + } else { + this.sortSelectorName = null; args.cancel = true; - switch (args.columnName) { - case 'TaskName': - colName = 'ResourceName'; - break; - case 'stateName': - colName = 'State'; - break; - case 'supportGroup': - colName = 'SupportGroup'; - break; - case 'approvalStatus': - colName = 'ApprovalStatus'; - break; - default: - break; - } - if(colName != ''){ - this.sortSelectorName = args.target.firstChild.innerText; - this.sortEnabled = true; - if(this.oldSort != null && this.oldSort.column == this.sort.column){ - mode = 'dsc'; - } - if(this.sort == null){ - this.sort = {'column': colName, 'mode': mode} - this.oldSort = this.sort; - }else{ - this.oldSort = this.sort; - this.sort = {'column': colName, 'mode': mode} - } - - - if(this.oldSort != null && this.oldSort.mode == 'dsc'){ - this.sort = null; - this.oldSort = null; - this.sortEnabled = false; - this.sortSelectorName = null; - } - this.oldSort; - this.sort; - this.refreshData(); - }else{ - this.sortSelectorName = null; - args.cancel = true; - - } } + } } } - public isStateTransitionPossible(change: any): boolean{ + public isStateTransitionPossible(change: any): boolean { let states = this.dataService.getStates(); let state = change.state; // console.log(change.taskData.state); for (const state of states) { - if(change.taskData.state == state.actualState){ + if (change.taskData.state == state.actualState) { // console.log(state.possibleStates); - if(state.possibleStates[0]){ + if (state.possibleStates[0]) { return true; - }else{ + } else { return false } @@ -1229,9 +1232,9 @@ export class NttGanttComponent implements OnInit { return false; } - public evaluateCancelFlag(change: any): boolean{ + public evaluateCancelFlag(change: any): boolean { for (const state of this.dataService.getStates()) { - if(change.taskData.state == state.actualState){ + if (change.taskData.state == state.actualState) { return state.cancelFlag; } } @@ -1239,18 +1242,18 @@ export class NttGanttComponent implements OnInit { } - public evaluateImplementerFlag(change: any): boolean{ + public evaluateImplementerFlag(change: any): boolean { for (const state of this.dataService.getStates()) { - if(change.taskData.state == state.actualState){ + if (change.taskData.state == state.actualState) { return state.implementerFlag; } } return false; } - public evaluateRestartFlag(change: any): boolean{ + public evaluateRestartFlag(change: any): boolean { for (const state of this.dataService.getStates()) { - if(change.taskData.state == state.actualState){ + if (change.taskData.state == state.actualState) { return state.restartFlag; } } @@ -1262,20 +1265,20 @@ export class NttGanttComponent implements OnInit { * @param args event arguments from the syncfusion gantt chart */ public rowSelected(args: any) { - this.approvalPending = false; - this.selectedrowindex = this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes. - this.selectedrecords = this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records. - this.selRecs=[]; - if(this.selectedrowindex.length>this.resources.length-1){ - for (const record of this.selectedrecords) { - if(record.taskData.isRes == true){ - this.selRecs.push(record); - } + this.approvalPending = false; + this.selectedrowindex = this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes. + this.selectedrecords = this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records. + this.selRecs = []; + if (this.selectedrowindex.length > this.resources.length - 1) { + for (const record of this.selectedrecords) { + if (record.taskData.isRes == true) { + this.selRecs.push(record); } - }else{ - this.selRecs = this.selectedrecords; } - this.evaluateBulkOperationButtons(); + } else { + this.selRecs = this.selectedrecords; + } + this.evaluateBulkOperationButtons(); } /** @@ -1283,33 +1286,33 @@ export class NttGanttComponent implements OnInit { * When a line is deselected, it is checked if all resource states are equal after deselecting a resource, if they are equal then the respective buttons are displayed * @param args event arguments from the syncfusion gantt chart */ - public rowDeselected(args: any){ - this.selectedRescourceIds.forEach((element,index)=>{ - if(element == args.data.taskData.resourceId) delete this.selectedRescourceIds[index]; //TODO: auf memoryLeak prüfen - }); + public rowDeselected(args: any) { + this.selectedRescourceIds.forEach((element, index) => { + if (element == args.data.taskData.resourceId) delete this.selectedRescourceIds[index]; //TODO: auf memoryLeak prüfen + }); - this.selectedrowindex= this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes. - this.selectedrecords= this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records. - this.selRecs = []; - if(this.selectedrowindex.length>this.resources.length-1){ - for (const record of this.selectedrecords) { - if(record.taskData.isRes == true){ - this.selRecs.push(record); - } - } - }else{ - this.selRecs = this.selectedrecords; - } - // console.log(this.selRecs[0]); - if(!this.selRecs[0]){ - this.toolbar = ['']; - }else{ - this.evaluateBulkOperationButtons(); + this.selectedrowindex = this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes. + this.selectedrecords = this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records. + this.selRecs = []; + if (this.selectedrowindex.length > this.resources.length - 1) { + for (const record of this.selectedrecords) { + if (record.taskData.isRes == true) { + this.selRecs.push(record); } + } + } else { + this.selRecs = this.selectedrecords; + } + // console.log(this.selRecs[0]); + if (!this.selRecs[0]) { + this.toolbar = ['']; + } else { + this.evaluateBulkOperationButtons(); + } } - public evaluateBulkOperationButtons(){ + public evaluateBulkOperationButtons() { this.resetBulkOpButtons(); let allStates: boolean = true; @@ -1328,55 +1331,55 @@ export class NttGanttComponent implements OnInit { // console.log("Implementer",this.evaluateImplementerFlag(change)); // console.log("Restart",this.evaluateRestartFlag(change)); - if(change.taskData.approvalStatus == 1){ + if (change.taskData.approvalStatus == 1) { this.approvalPending = true; } - if(change.taskData.state == this.selRecs[0].taskData.state){ - if(allStates){ + if (change.taskData.state == this.selRecs[0].taskData.state) { + if (allStates) { allStates = true; } - else{ + else { allStates = false; } this.selectedRescourceIds.push(change.taskData.resourceId); - }else{ - allStates = false; - } - if(change.taskData.approval == true && allPermit == true){ + } else { + allStates = false; + } + if (change.taskData.approval == true && allPermit == true) { allPermit = true; - }else{ + } else { allPermit = false; } - if(change.taskData.approval == true && allApprove == true){ + if (change.taskData.approval == true && allApprove == true) { allApprove = true; - }else{ + } else { allApprove = false; } - if(change.taskData.approval == true && allReject == true){ + if (change.taskData.approval == true && allReject == true) { allReject = true; - }else{ + } else { allReject = false; } - if(change.taskData.approval == true && this.evaluateCancelFlag(change) == true && allCancel == true){ + if (change.taskData.approval == true && this.evaluateCancelFlag(change) == true && allCancel == true) { allCancel = true; - }else{ + } else { allCancel = false; } - if(this.evaluateImplementerFlag(change) == true && allImplementer == true){ + if (this.evaluateImplementerFlag(change) == true && allImplementer == true) { allImplementer = true; - }else{ + } else { allImplementer = false; } - if(this.isStateTransitionPossible(change) && allTransition == true){ + if (this.isStateTransitionPossible(change) && allTransition == true) { allTransition = true; - }else{ + } else { allTransition = false; } } - if(allStates){ + if (allStates) { this.toolbar = ['']; - if(allTransition && !this.approvalPending){ + if (allTransition && !this.approvalPending) { //this.toolbar.push({text:this.languageService.lMap.get("stateChange"), id: "6"}); this.transitionButton = true; @@ -1387,19 +1390,19 @@ export class NttGanttComponent implements OnInit { // console.log(document.querySelectorAll(".e-tbar-btn")[0]); } - if(allApprove){ + if (allApprove) { //this.toolbar.push({text: this.languageService.lMap.get("genehmigen"), id: "7"}); this.approveButton = true; } - if(allReject){ + if (allReject) { //this.toolbar.push({text: this.languageService.lMap.get("ablehnen"), id: "8"}); this.rejectButton = true; } - if(allCancel){ + if (allCancel) { //this.toolbar.push({text: this.languageService.lMap.get("stornieren"), id: "11"}); this.cancelButton = true; } - if(allImplementer){ + if (allImplementer) { //this.toolbar.push({text: this.languageService.lMap.get("implementer"), id: "10"}); this.implementerButton = true; } @@ -1417,7 +1420,7 @@ export class NttGanttComponent implements OnInit { // this.toolbar = tmp; // tmp = []; - }else{ + } else { this.toolbar = ['']; } this.approvalPending = false; @@ -1426,7 +1429,7 @@ export class NttGanttComponent implements OnInit { this.selectedrowindex = []; } - public resetBulkOpButtons(){ + public resetBulkOpButtons() { this.transitionButton = false; this.approveButton = false; this.rejectButton = false; @@ -1435,45 +1438,45 @@ export class NttGanttComponent implements OnInit { this.implementerButton = false } - public openStatTransitionDialog(){ - let data = {changes: [], states: this.states}; - for (const selectedRescourceId of this.selectedRescourceIds) { - for (const iterator of this.resources) { - if(iterator.resourceId == selectedRescourceId){ - data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state}); - } - } - } - let dialogRef = StateDialogComponent; - this.matDialog.open(dialogRef,{data : data}).afterClosed().subscribe((res)=>{ - console.log(res); - if(res == "Success"){ - this.refreshData(); - } - }); - } - - public openImplementerDialog(){ - let data = {changes: []}; + public openStatTransitionDialog() { + let data = { changes: [], states: this.states }; for (const selectedRescourceId of this.selectedRescourceIds) { - for (const change of this.resources) { - if(change.resourceId == selectedRescourceId){ - data.changes.push({resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId}); + for (const iterator of this.resources) { + if (iterator.resourceId == selectedRescourceId) { + data.changes.push({ resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state }); } } } - this.matDialog.open(ImplementerDialogComponent,{data : data}); + let dialogRef = StateDialogComponent; + this.matDialog.open(dialogRef, { data: data }).afterClosed().subscribe((res) => { + console.log(res); + if (res == "Success") { + this.refreshData(); + } + }); } - public approve(){ + public openImplementerDialog() { + let data = { changes: [] }; for (const selectedRescourceId of this.selectedRescourceIds) { for (const change of this.resources) { - 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: ['green-snackbar']}); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']}); + if (change.resourceId == selectedRescourceId) { + data.changes.push({ resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId }); + } + } + } + this.matDialog.open(ImplementerDialogComponent, { data: data }); + } + + public approve() { + for (const selectedRescourceId of this.selectedRescourceIds) { + for (const change of this.resources) { + 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: ['green-snackbar'] }); + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar'] }); } this.refreshData(); }); @@ -1482,16 +1485,16 @@ export class NttGanttComponent implements OnInit { } } - public reject(){ + public reject() { for (const selectedRescourceId of this.selectedRescourceIds) { for (const change of this.resources) { - 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: ['green-snackbar']}); + 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: ['green-snackbar'] }); this.refreshData(); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar']}); + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['red-snackbar'] }); } }); } @@ -1499,16 +1502,16 @@ export class NttGanttComponent implements OnInit { } } - public cancel(){ + public cancel() { for (const selectedRescourceId of this.selectedRescourceIds) { for (const change of this.resources) { - if(change.resourceId == selectedRescourceId){ - this.dataService.updateApproval(change, 3).then((res: any)=>{ - if(res.status == 200){ - this._snackBar.open("Stornieren erfolgreich", 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); + if (change.resourceId == selectedRescourceId) { + this.dataService.updateApproval(change, 3).then((res: any) => { + if (res.status == 200) { + this._snackBar.open("Stornieren erfolgreich", 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary'] }); this.refreshData(); - }else{ - this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary']}); + } else { + this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', { horizontalPosition: this.horizontalPosition, verticalPosition: this.verticalPosition, panelClass: ['mat-primary'] }); } }); } @@ -1516,7 +1519,7 @@ export class NttGanttComponent implements OnInit { } } - public reApprove(){ + public reApprove() { } }