Skip to content

Commit 337ebf6

Browse files
Copilotrenemadsen
Copilot
and
renemadsen
committed
Refactor assigned-site-dialog tabs into separate reusable components
Co-authored-by: renemadsen <[email protected]>
1 parent 46d749c commit 337ebf6

File tree

13 files changed

+471
-543
lines changed

13 files changed

+471
-543
lines changed

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './time-plannings-container/time-plannings-container.component';
22
export * from './time-plannings-table/time-plannings-table.component';
33
export * from './time-planning-actions/assigned-site/assigned-site-dialog.component';
4+
export * from './time-planning-actions/assigned-site/tabs';
45
export * from './time-planning-actions/workday-entity/workday-entity-dialog.component';
56
export * from './time-planning-actions/download-excel/download-excel-dialog.component';

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/assigned-site-dialog.component.html‎

Lines changed: 49 additions & 543 deletions
Large diffs are not rendered by default.

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/assigned-site-dialog.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,4 +538,32 @@ export class AssignedSiteDialogComponent implements DoCheck, OnInit {
538538
}
539539
}
540540

541+
getPlanHoursFormGroup(): FormGroup {
542+
return this.assignedSiteForm.get('planHours') as FormGroup;
543+
}
544+
545+
getAutoBreakSettingsFormGroup(): FormGroup {
546+
return this.assignedSiteForm.get('autoBreakSettings') as FormGroup;
547+
}
548+
549+
getFirstShiftFormGroup(): FormGroup {
550+
return this.assignedSiteForm.get('firstShift') as FormGroup;
551+
}
552+
553+
getSecondShiftFormGroup(): FormGroup {
554+
return this.assignedSiteForm.get('secondShift') as FormGroup;
555+
}
556+
557+
getThirdShiftFormGroup(): FormGroup {
558+
return this.assignedSiteForm.get('thirdShift') as FormGroup;
559+
}
560+
561+
getFourthShiftFormGroup(): FormGroup {
562+
return this.assignedSiteForm.get('fourthShift') as FormGroup;
563+
}
564+
565+
getFifthShiftFormGroup(): FormGroup {
566+
return this.assignedSiteForm.get('fifthShift') as FormGroup;
567+
}
568+
541569
}

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/auto-break-tab.component.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<ng-container *ngFor="let day of days">
2+
<div [formGroupName]="day.toLowerCase()" class="d-flex flex-row">
3+
<mat-form-field class="p-1">
4+
<mat-label>{{ day + ' break time divider in minutes' | translate }}</mat-label>
5+
<input
6+
matInput
7+
[ngxTimepicker]="timePicker"
8+
[format]="24"
9+
placeholder="HH:MM"
10+
[id]="day.toLowerCase() + 'BreakMinutesDivider'"
11+
[name]="day.toLowerCase() + 'BreakMinutesDivider'"
12+
formControlName="breakMinutesDivider"
13+
readonly
14+
>
15+
<ngx-material-timepicker
16+
#timePicker
17+
[format]="24"
18+
(timeSet)="setAutoBreakValue(day, 'BreakMinutesDivider', $event)"
19+
></ngx-material-timepicker>
20+
</mat-form-field>
21+
<mat-form-field class="p-1">
22+
<mat-label>{{ day.toLowerCase() + ' break time pr divider in minutes' | translate }}</mat-label>
23+
<input
24+
matInput
25+
[ngxTimepicker]="timePickerPrDivider"
26+
[format]="24"
27+
placeholder="HH:MM"
28+
[id]="day.toLowerCase() + 'BreakMinutesPrDivider'"
29+
[name]="day.toLowerCase() + 'BreakMinutesPrDivider'"
30+
formControlName="breakMinutesPrDivider"
31+
readonly>
32+
<ngx-material-timepicker
33+
#timePickerPrDivider
34+
[format]="24"
35+
(timeSet)="setAutoBreakValue(day, 'breakMinutesPrDivider', $event)"
36+
></ngx-material-timepicker>
37+
</mat-form-field>
38+
<mat-form-field class="p-1">
39+
<mat-label>{{ day + ' break upper limit' | translate }}</mat-label>
40+
<input
41+
matInput
42+
[ngxTimepicker]="timePickerUpperLimit"
43+
[format]="24"
44+
placeholder="HH:MM"
45+
[id]="day.toLowerCase() + 'BreakMinutesUpperLimit'"
46+
[name]="day.toLowerCase() + 'BreakMinutesUpperLimit'"
47+
formControlName="breakMinutesUpperLimit"
48+
readonly
49+
>
50+
</mat-form-field>
51+
<ngx-material-timepicker
52+
#timePickerUpperLimit
53+
[format]="24"
54+
(timeSet)="setAutoBreakValue(day, 'BreakMinutesUpperLimit', $event)"
55+
></ngx-material-timepicker>
56+
<div class="pt-4">
57+
<button
58+
[id]="day.toLowerCase() + 'LoadDefaults'"
59+
mat-icon-button
60+
(click)="copyBreakSettings(day.toLowerCase())"
61+
color="warn">
62+
<mat-icon>sync_arrow_down</mat-icon>
63+
</button>
64+
</div>
65+
</div>
66+
</ng-container>

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/auto-break-tab.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, Input, Output, EventEmitter } from '@angular/core';
2+
import { FormGroup } from '@angular/forms';
3+
4+
@Component({
5+
selector: 'app-assigned-site-auto-break-tab',
6+
templateUrl: './auto-break-tab.component.html',
7+
standalone: false
8+
})
9+
export class AutoBreakTabComponent {
10+
@Input() autoBreakSettingsForm!: FormGroup;
11+
@Output() autoBreakValueSet = new EventEmitter<{ day: string, control: string, value: string }>();
12+
@Output() breakSettingsCopied = new EventEmitter<string>();
13+
14+
days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
15+
16+
setAutoBreakValue(day: string, control: string, value: string) {
17+
this.autoBreakValueSet.emit({ day, control, value });
18+
}
19+
20+
copyBreakSettings(day: string) {
21+
this.breakSettingsCopied.emit(day);
22+
}
23+
}

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/general-tab.component.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<div class="d-flex flex-row" *ngIf="!data.resigned && selectCurrentUserIsFirstUser$ | async">
2+
<!-- data.useGoogleSheetAsDefault -->
3+
<mat-checkbox class="p-1"
4+
[id]="'useGoogleSheetAsDefault'"
5+
[name]="'useGoogleSheetAsDefault'"
6+
formControlName="useGoogleSheetAsDefault">
7+
<div>
8+
<div>{{ 'Use Google Sheet as default' | translate }}</div>
9+
<small class="checkbox-description"></small>
10+
</div>
11+
</mat-checkbox>
12+
13+
</div>
14+
<div class="d-flex flex-row"
15+
*ngIf="!data.resigned && !data.useGoogleSheetAsDefault && selectCurrentUserIsFirstUser$ | async">
16+
<!-- data.useOnlyPlanHours checkbox -->
17+
<mat-checkbox class="p-1"
18+
[id]="'useOnlyPlanHours'"
19+
[name]="'useOnlyPlanHours'"
20+
formControlName="useOnlyPlanHours">
21+
<div>
22+
<div>{{ 'Use only plan hours' | translate }}</div>
23+
<small class="checkbox-description"></small>
24+
</div>
25+
</mat-checkbox>
26+
</div>
27+
<div class="d-flex flex-row"
28+
*ngIf="!data.resigned && data.globalAutoBreakCalculationActive && selectCurrentUserIsAdmin$ | async">
29+
<!-- data.autoBreakCalculationActive -->
30+
<mat-checkbox class="p-1"
31+
[id]="'autoBreakCalculationActive'"
32+
[name]="'autoBreakCalculationActive'"
33+
formControlName="autoBreakCalculationActive">
34+
<div>
35+
<div>{{ 'Auto break calculation' | translate }}</div>
36+
<small class="checkbox-description"></small>
37+
</div>
38+
</mat-checkbox>
39+
</div>
40+
<div class="d-flex flex-row" *ngIf="!data.resigned && selectCurrentUserIsAdmin$ | async">
41+
<!-- data.allowPersonalTimeRegistration -->
42+
<mat-checkbox class="p-1"
43+
[id]="'allowPersonalTimeRegistration'"
44+
[name]="'allowPersonalTimeRegistration'"
45+
formControlName="allowPersonalTimeRegistration">
46+
<div>
47+
<div>{{ 'Allow time registration on mobile' | translate }}</div>
48+
<small
49+
class="checkbox-description">{{ 'Enter start time, stop time, and total break. Select Allow editing of work hours on mobile to edit times.' | translate }}</small>
50+
</div>
51+
</mat-checkbox>
52+
</div>
53+
<div class="d-flex flex-row"
54+
*ngIf="!data.daysBackInTimeAllowedEditingEnabled && !data.resigned && data.allowPersonalTimeRegistration && selectCurrentUserIsAdmin$ | async">
55+
<!-- data.allowEditOfRegistrations -->
56+
<mat-checkbox class="p-1"
57+
[id]="'allowEditOfRegistrations'"
58+
[name]="'allowEditOfRegistrations'"
59+
formControlName="allowEditOfRegistrations">
60+
<div>
61+
<div>{{ 'Allow editing of working hours on mobile' | translate }}</div>
62+
<small
63+
class="checkbox-description">{{ 'Start time, stop time and breaks can be edited.' | translate }}</small>
64+
</div>
65+
</mat-checkbox>
66+
</div>
67+
<div class="d-flex flex-row"
68+
*ngIf="!data.resigned && data.allowPersonalTimeRegistration && !data.allowAcceptOfPlannedHours && selectCurrentUserIsAdmin$ | async">
69+
<!-- data.allowPersonalTimeRegistration -->
70+
<mat-checkbox class="p-1"
71+
[id]="'usePunchClock'"
72+
[name]="'usePunchClock'"
73+
formControlName="usePunchClock">
74+
<div>
75+
<div>{{ 'Use time clock on mobile' | translate }}</div>
76+
<small
77+
class="checkbox-description">{{ 'Working hours are recorded by pressing Start/Stop working hours. Breaks are recorded by pressing Start/Stop break time. Select Allow editing of working hours on mobile to edit times.' | translate }}</small>
78+
</div>
79+
</mat-checkbox>
80+
</div>
81+
<div class="d-flex flex-row"
82+
*ngIf="!data.daysBackInTimeAllowedEditingEnabled && !data.resigned && data.allowPersonalTimeRegistration && !data.allowAcceptOfPlannedHours && data.usePunchClock && selectCurrentUserIsAdmin$ | async">
83+
<!-- data.allowPersonalTimeRegistration -->
84+
<mat-checkbox class="p-1"
85+
[id]="'usePunchClockWithAllowRegisteringInHistory'"
86+
[name]="'usePunchClockWithAllowRegisteringInHistory'"
87+
formControlName="usePunchClockWithAllowRegisteringInHistory">
88+
<div>
89+
<div>{{ 'Allow entry of unregistered working hours on mobile' | translate }}</div>
90+
<small
91+
class="checkbox-description">{{ 'Enter start time, stop time, and total break time back in time. Select Allow editing of work hours on mobile to edit times.' | translate }}</small>
92+
</div>
93+
</mat-checkbox>
94+
</div>
95+
<div class="d-flex flex-row"
96+
*ngIf="!data.resigned && data.allowPersonalTimeRegistration && !data.usePunchClock && selectCurrentUserIsAdmin$ | async">
97+
<!-- data.allowAcceptOfPlannedHours -->
98+
<mat-checkbox class="p-1"
99+
[id]="'allowAcceptOfPlannedHours'"
100+
[name]="'allowAcceptOfPlannedHours'"
101+
formControlName="allowAcceptOfPlannedHours">
102+
<div>
103+
<div>{{ 'Allow receipt for standard time on mobile' | translate }}</div>
104+
<small
105+
class="checkbox-description">{{ 'Scheduled working hours can be approved with a single click. Scheduled working hours cannot be edited.' | translate }}</small>
106+
</div>
107+
</mat-checkbox>
108+
</div>
109+
<div class="d-flex flex-row"
110+
*ngIf="!data.resigned && data.allowPersonalTimeRegistration && data.allowEditOfRegistrations && selectCurrentUserIsAdmin$ | async">
111+
<!-- data.allowAcceptOfPlannedHours -->
112+
<mat-checkbox class="p-1"
113+
[id]="'daysBackInTimeAllowedEditingEnabled'"
114+
[name]="'daysBackInTimeAllowedEditingEnabled'"
115+
formControlName="daysBackInTimeAllowedEditingEnabled">
116+
<div>
117+
<div>{{ 'Allow x days back in time editing' | translate }}</div>
118+
<small
119+
class="checkbox-description">{{ 'Enabling this option allows the user to edit x days back in time, default is 2.' | translate }}</small>
120+
</div>
121+
</mat-checkbox>
122+
</div>
123+
<div class="d-flex flex-row" *ngIf="!data.resigned && selectCurrentUserIsAdmin$ | async">
124+
<mat-checkbox class="p-1"
125+
[id]="'thirdShiftActive'"
126+
[name]="'thirdShiftActive'"
127+
formControlName="thirdShiftActive">
128+
<div>{{ 'Enable third shift' | translate }}</div>
129+
</mat-checkbox>
130+
<mat-checkbox class="p-1" *ngIf="!data.resigned && data.thirdShiftActive && selectCurrentUserIsAdmin$ | async"
131+
[id]="'fourthShiftActive'"
132+
[name]="'fourthShiftActive'"
133+
formControlName="fourthShiftActive">
134+
<div>{{ 'Enable fourth shift' | translate }}</div>
135+
</mat-checkbox>
136+
<mat-checkbox class="p-1"
137+
*ngIf="!data.resigned && data.fourthShiftActive && data.thirdShiftActive && selectCurrentUserIsAdmin$ | async"
138+
[id]="'fifthShiftActive'"
139+
[name]="'fifthShiftActive'"
140+
formControlName="fifthShiftActive">
141+
<div>{{ 'Enable fifth shift' | translate }}</div>
142+
</mat-checkbox>
143+
</div>
144+
<div class="d-flex flex-row">
145+
<mat-checkbox class="p-1"
146+
[id]="'resigned'"
147+
[name]="'resigned'"
148+
formControlName="resigned">
149+
<div>{{ 'Resigned' | translate }}</div>
150+
</mat-checkbox>
151+
<mat-form-field *ngIf="data.resigned">
152+
<mat-label>{{ 'Resigned at date' | translate }}</mat-label>
153+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
154+
<input
155+
required
156+
matInput
157+
[matDatepicker]="picker"
158+
formControlName="resignedAtDate"
159+
(click)="picker.open()"
160+
>
161+
<mat-datepicker #picker></mat-datepicker>
162+
<mat-error class="text-warn" *ngIf="!data.resignedAtDate">
163+
{{ 'Date is required'| translate }}*
164+
</mat-error>
165+
</mat-form-field>
166+
</div>

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/general-tab.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, Input } from '@angular/core';
2+
import { FormGroup } from '@angular/forms';
3+
import { AssignedSiteModel } from '../../../../../models';
4+
import { Observable } from 'rxjs';
5+
6+
@Component({
7+
selector: 'app-assigned-site-general-tab',
8+
templateUrl: './general-tab.component.html',
9+
standalone: false
10+
})
11+
export class GeneralTabComponent {
12+
@Input() data!: AssignedSiteModel;
13+
@Input() assignedSiteForm!: FormGroup;
14+
@Input() selectCurrentUserIsFirstUser$!: Observable<boolean>;
15+
@Input() selectCurrentUserIsAdmin$!: Observable<boolean>;
16+
}

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './general-tab.component';
2+
export * from './plan-hours-tab.component';
3+
export * from './auto-break-tab.component';
4+
export * from './shift-tab.component';

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/plan-hours-tab.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="d-flex flex-row"
2+
*ngFor="let day of days">
3+
<mat-form-field class="p-1">
4+
<mat-label>{{ day | translate }}</mat-label>
5+
<input matInput type="text" readonly disabled>
6+
</mat-form-field>
7+
<mat-form-field class="p-1">
8+
<mat-label>{{ 'Plan hours' | translate }}</mat-label>
9+
<input
10+
type="number"
11+
matInput
12+
[id]="day.toLowerCase() + 'PlanHours'"
13+
[name]="day.toLowerCase() + 'PlanHours'"
14+
[formControlName]="day.toLowerCase()"
15+
>
16+
</mat-form-field>
17+
</div>

‎eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/tabs/plan-hours-tab.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component, Input } from '@angular/core';
2+
import { FormGroup } from '@angular/forms';
3+
4+
@Component({
5+
selector: 'app-assigned-site-plan-hours-tab',
6+
templateUrl: './plan-hours-tab.component.html',
7+
standalone: false
8+
})
9+
export class PlanHoursTabComponent {
10+
@Input() planHoursForm!: FormGroup;
11+
12+
days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
13+
}

0 commit comments

Comments
 (0)