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

changes

main
Said Gedik 2024-05-14 17:11:22 +02:00
parent 70ab4bdb31
commit b0145b20d7
5 changed files with 295 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,8 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled"
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field appearance="fill" style="width: 100%;"> <mat-form-field appearance="fill" style="width: 100%;">
@ -16,43 +17,34 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled"
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<multiselect-autocomplete <multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'"
[placeholder]="userSupportGroup" [appliedFilters]="prevFiltersSg" (result)="onResult($event)">
[data]="supportGroups"
[key]="'supportGroup'"
[appliedFilters]= "prevFiltersSg"
(result)="onResult($event)">
</multiselect-autocomplete> </multiselect-autocomplete>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled"
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<multiselect-autocomplete <multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchState')" [data]="states"
[placeholder]="languageService.lMap.get('filterDilogSearchState')" [key]="'state'" [appliedFilters]="prevFiltersState" (result)="onResult($event)">
[data]="states"
[key]="'state'"
[appliedFilters]= "prevFiltersState"
(result)="onResult($event)">
</multiselect-autocomplete> </multiselect-autocomplete>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled"
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<multiselect-autocomplete <multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
[placeholder]="languageService.lMap.get('filterDilogSearchContract')" [data]="contracts" [key]="'contract'" [appliedFilters]="prevFiltersContract" (result)="onResult($event)">
[data]="contracts"
[key]="'contract'"
[appliedFilters]= "prevFiltersContract"
(result)="onResult($event)">
</multiselect-autocomplete> </multiselect-autocomplete>
</mat-expansion-panel> </mat-expansion-panel>
@ -72,7 +64,8 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled"
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description> <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field appearance="fill" style="width: 48%;"> <mat-form-field appearance="fill" style="width: 48%;">
@ -94,11 +87,13 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title> <mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description> <mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete mit Intervall > 1 Jahr!</mat-checkbox> <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
mit Intervall > 1 Jahr!</mat-checkbox>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
@ -158,8 +153,10 @@
<br><br> --> <br><br> -->
<br> <br>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-raised-button style="margin-right: 3px;" matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button> <button mat-raised-button style="margin-right: 3px;"
<button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button> matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
<button mat-raised-button color="primary" style="margin-left: 3px;"
(click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>
</div> </div>

20
frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
View File

@ -5,3 +5,23 @@
.chip-list-wrapper { .chip-list-wrapper {
min-height: 3em; 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;
}

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

@ -1,4 +1,3 @@
<div class="chip-list-wrapper"> <div class="chip-list-wrapper">
<mat-chip-list #chipList> <mat-chip-list #chipList>
<ng-container *ngFor="let select of selectData | slice:0:20; let i =index"> <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
@ -7,37 +6,32 @@
<mat-icon class="mat-chip-remove">cancel</mat-icon> <mat-icon class="mat-chip-remove">cancel</mat-icon>
</mat-chip> </mat-chip>
</ng-container> </ng-container>
<mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">... {{selectData.length-20}} weitere <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
{{selectData.length-20}} weitere
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</div> </div>
<mat-form-field class="full-width" appearance="fill" (onmouseover)="this.showCheckBox()"(onmouseout)="this.hideCheckBox()"> <mat-form-field class="full-width custom-form-field" appearance="fill">
<input matInput type="text" <div class="form-field-container">
[placeholder]="placeholder" <mat-checkbox [checked]="allSelected" [(indeterminate)]="indeterminate" (change)="toggleAll()"></mat-checkbox>
[matAutocomplete]="auto" <input matInput type="text" [placeholder]="placeholder" [matAutocomplete]="auto" [formControl]="selectControl">
[formControl]="selectControl"> </div>
<mat-checkbox *ngIf="this.showCheckbox == true"
[checked]="this.allSelected"
[(indeterminate)]="indeterminate"
(change)="this.toggleAll()"></mat-checkbox>
</mat-form-field> </mat-form-field>
<!-- <mat-form-field> <!-- <mat-form-field>
<input type="text" <input type="text"
[placeholder]="placeholder" [placeholder]="placeholder"
matInput matInput
[matAutocomplete]="auto"> --> [matAutocomplete]="auto"> -->
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary">
<cdk-virtual-scroll-viewport <cdk-virtual-scroll-viewport [ngStyle]="{height: '200px'}" itemSize="25">
[ngStyle]="{height: '200px'}"
itemSize="25">
<mat-option *cdkVirtualFor="let data of filteredData" color="primary"> <mat-option *cdkVirtualFor="let data of filteredData" color="primary">
<div (click)="optionClicked($event, data)"> <div (click)="optionClicked($event, data)">
<mat-checkbox [checked]="data.selected" color="primary" <mat-checkbox [checked]="data.selected" color="primary" (change)="toggleSelection(data)"
(change)="toggleSelection(data)"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
{{ data.item }} {{ data.item }}
</mat-checkbox> </mat-checkbox>

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

@ -2,7 +2,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
/* overflow: hidden; */ overflow: hidden;
} }
.head { .head {
@ -80,10 +80,10 @@
#topbar { #topbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
height: 57px; height: 57px;
margin-bottom: 30px; margin-bottom: 9px;
animation: slideUp 1.5s forwards; animation: slideUp 1.5s forwards;
gap: 10px;
/* Adjust '2s' to control the speed of the animation */ /* Adjust '2s' to control the speed of the animation */
} }
@ -256,17 +256,18 @@
.dateButton { .dateButton {
height: 70%;
width: 59px; width: 59px;
background-color: rgba(0, 0, 0, 0.04); background-color: rgb(255, 255, 255);
border-width: 1px; border-width: 1px;
border: none; border: none;
border-bottom: 1px; border-bottom: 1px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border: solid 1px rgba(0, 0, 0, 0.124);
border-radius: 8px;
} }
.dateButton:hover { .dateButton:hover {
border-width: 2px;
border-top-right-radius: 4px;
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }

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

@ -1,5 +1,5 @@
<div class="head"> <div class="head">
<h2>Change Calendar</h2> <h2>W&I Kalender</h2>
<!-- User --> <!-- User -->
<div style="display: flex; justify-content: center; align-items: center; font-size: 13px;"> <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
@ -17,24 +17,7 @@
</div> </div>
<div *ngIf="!errorService.rsso && !rssoInit" id="topbar"> <div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
<!-- Date Range Picker -->
<div style="display: flex; gap: 10px;">
<div style="display: flex;">
<mat-form-field appearance="fill" style="width: 237px;">
<mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
<input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
</mat-date-range-input>
<!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
<button mat-basic-button class="dateButton" color=""
(click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
</div>
<!-- Language Picker --> <!-- Language Picker -->
<mat-form-field style="width: 90px;" appearance="fill"> <mat-form-field style="width: 90px;" appearance="fill">
@ -72,12 +55,20 @@
<mat-icon>restart_alt</mat-icon> <mat-icon>restart_alt</mat-icon>
</button> </button>
</div> </div>
</div>
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer"> <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
<div class="left"> <div class="left">
<button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
</button>
<button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
style="background-color: transparent;" (click)="clearFilter()">
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
</button>
<button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;" <button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button> aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
@ -96,9 +87,7 @@
<button *ngIf="implementerButton" class="filterButton" aria-label="Filtern" <button *ngIf="implementerButton" class="filterButton" aria-label="Filtern"
(click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button> (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
<button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
</button>
<mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge> <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
@ -106,18 +95,34 @@
<button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);" <button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);"
(click)="openSaveUnderDialog()">Speichern unter</button> (click)="openSaveUnderDialog()">Speichern unter</button>
<button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
style="background-color: transparent;" (click)="clearFilter()">
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
</button>
</div> </div>
<!-- <div class="split"></div> --> <!-- <div class="split"></div> -->
<div class="right"> <div class="right">
<!-- Date Range Picker -->
<div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
<div style="height: 70%; display: flex; align-items: center; width: 160px; font-family: Arial, sans-serif; font-weight: 600;">
<!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start"
(dateChange)="startDateChanged($event)">
<input matEndDate formControlName="end"(dateChange)="endDateChanged($event)">
</mat-date-range-input>
<!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</div>
<button class="dateButton"
(click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
</div>
<!-- Scale Picker --> <!-- Scale Picker -->
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style" <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
[(ngModel)]="selectedScalar"> name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars" <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
[value]="scalar"> [value]="scalar">
{{scalar}} {{scalar}}
@ -147,15 +152,15 @@
[resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings" [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
[columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true' [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
[highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate" [highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
[projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true' [enableMultiTaskbar]='true' [projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true'
[collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true" [allowFiltering]="false" [enableMultiTaskbar]='true' [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true"
[timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings" [tooltipSettings]="tooltipSettings" [allowFiltering]="false" [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings"
[splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" gridLines="Both" [tooltipSettings]="tooltipSettings" [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)"
(splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)" gridLines="Both" (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
(taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)" (taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
(toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)" (toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)"
(created)="created($event)" (dataBound)="dataBound($event)" (load)="load($event)" (rowDeselected)="rowDeselected($event)" (created)="created($event)" (dataBound)="dataBound($event)"
(queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)"> (load)="load($event)" (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
<ng-template #tooltipSettingsTaskbar let-data> <ng-template #tooltipSettingsTaskbar let-data>
@ -241,7 +246,8 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && !errorService.critical && errorService.error"> <mat-card style="width: 50%; margin: auto;"
*ngIf="!errorService.rsso && !errorService.critical && errorService.error">
<mat-card-header> <mat-card-header>
<mat-card-title><mat-icon style="color: red;">error</mat-icon> <mat-card-title><mat-icon style="color: red;">error</mat-icon>
{{errorService.getLastError('error').name}}</mat-card-title> {{errorService.getLastError('error').name}}</mat-card-title>