Skip to content

Commit bf74b66

Browse files
giebelangiebelan
authored
refactor: signal inputs (#495)
Guide und schematic: https://angular.dev/reference/migrations/signal-inputs
1 parent 3d70708 commit bf74b66

26 files changed

+152
-155
lines changed

‎src/app/create-appointment/create-appointment.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="row justify-content-center mt-4 mb-0">
2-
@if (!isAdmin) {
2+
@if (!isAdmin()) {
33
<h1 class="text-center mb-2" data-id="addDetailsHeading" id="add-details-heading">
44
{{ 'poll.addDetails' | translate }}
55
</h1>
66
}
7-
@if (isAdmin) {
7+
@if (isAdmin()) {
88
<h1 class="text-center" id="change-details-heading">
99
{{ 'poll.change' | translate }}
1010
</h1>
@@ -13,14 +13,14 @@ <h1 class="text-center" id="change-details-heading">
1313
<div class="row justify-content-center">
1414
<app-stepper [currentStep]="0" data-id="stepperComponent"></app-stepper>
1515
</div>
16-
@if (isAdmin) {
16+
@if (isAdmin()) {
1717
<app-admin-info></app-admin-info>
1818
}
1919
<form
2020
(ngSubmit)="onSubmit()"
2121
[formGroup]="detailsForm"
2222
class="row justify-content-center wizard"
23-
[attr.aria-labelledby]="isAdmin ? 'change-details-heading' : 'add-details-heading'"
23+
[attr.aria-labelledby]="isAdmin() ? 'change-details-heading' : 'add-details-heading'"
2424
>
2525
<div class="col-11 col-lg-8">
2626
<div class="row justify-content-center px-3">

‎src/app/create-appointment/create-appointment.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Inject, Input, LOCALE_ID, OnInit} from '@angular/core';
1+
import {Component, Inject, LOCALE_ID, OnInit, input} from '@angular/core';
22
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import {Appointment} from '../shared/models';
44
import {AppStateService} from '../shared/services/app-state/app-state.service';
@@ -25,7 +25,7 @@ export class CreateAppointmentComponent implements OnInit {
2525
detailsForm: UntypedFormGroup;
2626
model: Appointment;
2727

28-
@Input() isAdmin = false;
28+
readonly isAdmin = input(false);
2929

3030
constructor(
3131
private appStateService: AppStateService,
@@ -56,7 +56,7 @@ export class CreateAppointmentComponent implements OnInit {
5656
this.model = this.appStateService.getAppointment();
5757
this.fillForm();
5858

59-
if (this.isAdmin) {
59+
if (this.isAdmin()) {
6060
this.routeTitle.setTitle('poll.change');
6161
} else {
6262
this.routeTitle.setTitle('poll.addDetails');
@@ -71,7 +71,7 @@ export class CreateAppointmentComponent implements OnInit {
7171
this.model.location = appointmentFromForm.location;
7272
this.model.description = appointmentFromForm.description;
7373
this.appStateService.updateAppointment(this.model);
74-
if (!this.isAdmin) {
74+
if (!this.isAdmin()) {
7575
this.router.navigate(['/dates']).then();
7676
} else {
7777
this.router.navigate(['/admin/dates']).then();

‎src/app/create-suggested-dates/create-suggested-dates.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="row justify-content-center mt-4 mb-0">
2-
@if (!isAdmin) {
2+
@if (!isAdmin()) {
33
<h1 class="text-center mb-2" data-id="dateChooseHeading" id="date-choose-heading">
44
{{ 'date.choose' | translate }}
55
</h1>
66
}
7-
@if (isAdmin) {
7+
@if (isAdmin()) {
88
<h1 class="text-center" id="date-change-heading">
99
{{ 'date.change' | translate }}
1010
</h1>
@@ -13,15 +13,15 @@ <h1 class="text-center" id="date-change-heading">
1313
<div class="row justify-content-center">
1414
<app-stepper [currentStep]="1" data-id="stepperComponent"></app-stepper>
1515
</div>
16-
@if (isAdmin) {
16+
@if (isAdmin()) {
1717
<app-admin-info></app-admin-info>
1818
}
1919
<div class="row justify-content-center">
2020
<form
2121
(ngSubmit)="onSubmit()"
2222
[formGroup]="datesForm"
2323
class="col col-lg-9"
24-
[attr.aria-labelledby]="isAdmin ? 'date-change-heading' : 'date-choose-heading'"
24+
[attr.aria-labelledby]="isAdmin() ? 'date-change-heading' : 'date-choose-heading'"
2525
>
2626
<!-- section container for each date entry -->
2727
@for (suggestedDateForm of getSuggestedDatesFromForm().controls; track suggestedDateForm; let i = $index) {

‎src/app/create-suggested-dates/create-suggested-dates.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Inject, Input, LOCALE_ID, OnInit} from '@angular/core';
1+
import {Component, Inject, LOCALE_ID, OnInit, input} from '@angular/core';
22
import {AppStateService} from '../shared/services/app-state/app-state.service';
33
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import {Logger} from '../shared/services/logging';
@@ -55,7 +55,7 @@ export class CreateSuggestedDatesComponent implements OnInit {
5555
public static readonly FORM_KEY_SUGGESTED_DATE_DESCRIPTION = SuggestedDatesFormConstants.FORM_KEY_SUGGESTED_DATE_DESCRIPTION;
5656
public static readonly FORM_KEY_SUGGESTED_DATE_HAS_VOTINGS = SuggestedDatesFormConstants.FORM_KEY_SUGGESTED_DATE_HAS_VOTINGS;
5757

58-
@Input() isAdmin = false;
58+
readonly isAdmin = input(false);
5959

6060
model: SuggestedDate[];
6161
suggestedDatesToDelete: SuggestedDate[];
@@ -115,7 +115,7 @@ export class CreateSuggestedDatesComponent implements OnInit {
115115
this.minDate = now.format(ValidatorConstants.MOMENT_FORMAT_DATE);
116116
this.maxDate = now.add(5, 'years').format(ValidatorConstants.MOMENT_FORMAT_DATE);
117117

118-
if (this.isAdmin) {
118+
if (this.isAdmin()) {
119119
this.routeTitle.setTitle('date.change');
120120
} else {
121121
this.routeTitle.setTitle('date.choose');
@@ -124,7 +124,7 @@ export class CreateSuggestedDatesComponent implements OnInit {
124124

125125
public goBack(): void {
126126
// noinspection JSIgnoredPromiseFromCall
127-
if (!this.isAdmin) {
127+
if (!this.isAdmin()) {
128128
this.router.navigate(['/create']).then();
129129
} else {
130130
this.router.navigate(['/poll-admin']).then();
@@ -286,7 +286,7 @@ export class CreateSuggestedDatesComponent implements OnInit {
286286
model.suggestedDatesToDelete = this.suggestedDatesToDelete;
287287
this.appStateService.updateAppointment(model);
288288
// noinspection JSIgnoredPromiseFromCall
289-
if (this.isAdmin) {
289+
if (this.isAdmin()) {
290290
this.router.navigate(['/admin/settings']).then();
291291
} else {
292292
this.router.navigate(['/settings']).then();
@@ -386,7 +386,7 @@ export class CreateSuggestedDatesComponent implements OnInit {
386386
[SuggestedDatesFormConstants.FORM_KEY_SUGGESTED_DATE_SHOW_SUGGESTED_START_DATE_ON_DIFFERENT_DAY_FORM]: new UntypedFormControl(endDateValue !== null),
387387
[SuggestedDatesFormConstants.FORM_KEY_SUGGESTED_DATE_DESCRIPTION]: new UntypedFormControl(descriptionValue,
388388
[Validators.maxLength(ValidatorConstants.MAX_LENGTH_DATE_DESCRIPTION)]),
389-
}, [suggestedDateValidator(this.localeId, this.dateTimeGenerator, this.isAdmin)]);
389+
}, [suggestedDateValidator(this.localeId, this.dateTimeGenerator, this.isAdmin())]);
390390
}
391391

392392
private createSuggestedDatesFromForm(): SuggestedDate[] {

‎src/app/links/links.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Input, OnInit} from '@angular/core';
1+
import {Component, OnInit, input} from '@angular/core';
22
import {Appointment} from '../shared/models';
33
import {AppStateService} from '../shared/services/app-state/app-state.service';
44
import { Router, RouterLink } from '@angular/router';
@@ -20,7 +20,7 @@ export class LinksComponent implements OnInit {
2020
model: Appointment;
2121
surveyLinkAdmin? = environment.surveyLinkAdmin;
2222

23-
@Input() isAdmin = false;
23+
readonly isAdmin = input(false);
2424

2525
constructor(
2626
private appStateService: AppStateService,

‎src/app/overview/overview.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1 class="text-center" data-id="overviewHeading">
2828
<app-message-box [message]="apiError" data-id="errorMessageBox"></app-message-box>
2929
</div>
3030
}
31-
@if (isAdmin) {
31+
@if (isAdmin()) {
3232
<app-navigation
3333
(backward)="goBack()"
3434
(forward)="sendUpdateAppointment()"

‎src/app/overview/overview.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Inject, Input, LOCALE_ID, OnInit} from '@angular/core';
1+
import {Component, Inject, LOCALE_ID, OnInit, input} from '@angular/core';
22
import {Appointment, Message, MessageType} from '../shared/models';
33
import {AppStateService} from '../shared/services/app-state/app-state.service';
44
import {Logger} from '../shared/services/logging';
@@ -25,7 +25,7 @@ export class OverviewComponent implements OnInit {
2525
model: Appointment;
2626
apiError: Message;
2727

28-
@Input() isAdmin = false;
28+
readonly isAdmin = input(false);
2929

3030
constructor(
3131
private dataRepoService: DataRepositoryService,
@@ -91,7 +91,7 @@ export class OverviewComponent implements OnInit {
9191

9292
public goBack(): void {
9393
// noinspection JSIgnoredPromiseFromCall
94-
if (!this.isAdmin) {
94+
if (!this.isAdmin()) {
9595
this.router.navigate(['/create']).then();
9696
} else {
9797
this.router.navigate(['/poll-admin']).then();

‎src/app/settings/settings.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="row justify-content-center mt-4 mb-0">
2-
@if (!isAdmin) {
2+
@if (!isAdmin()) {
33
<h1 class="text-center mb-2" data-id="settingsAdditionalHeading" id="settings-additional-heading">
44
{{ 'settings.additional' | translate }}
55
</h1>
@@ -12,15 +12,15 @@ <h1 class="text-center" id="settings-change-heading">
1212
<div class="row justify-content-center">
1313
<app-stepper [currentStep]="2" data-id="stepperComponent"></app-stepper>
1414
</div>
15-
@if (isAdmin) {
15+
@if (isAdmin()) {
1616
<app-admin-info></app-admin-info>
1717
}
1818
<div class="row justify-content-center">
1919
<div class="col col-lg-9">
2020
<form
2121
(ngSubmit)="onSubmit()"
2222
[formGroup]="settingsForm"
23-
[attr.aria-labelledby]="isAdmin ? 'settings-change-heading' : 'settings-additional-heading'"
23+
[attr.aria-labelledby]="isAdmin() ? 'settings-change-heading' : 'settings-additional-heading'"
2424
>
2525
<div class="section-container p-4 pr-5">
2626
<div class="row g-0">

‎src/app/settings/settings.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
1+
import {ChangeDetectionStrategy, Component, OnInit, input} from '@angular/core';
22
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import {Appointment} from '../shared/models';
44
import {AppStateService} from '../shared/services/app-state/app-state.service';
@@ -29,7 +29,7 @@ export class SettingsComponent implements OnInit {
2929
passwordHidden = true;
3030
passwordRepeatHidden = true;
3131

32-
@Input() isAdmin = false;
32+
readonly isAdmin = input(false);
3333

3434
constructor(
3535
private appStateService: AppStateService,
@@ -49,7 +49,7 @@ export class SettingsComponent implements OnInit {
4949
ngOnInit() {
5050
this.model = this.appStateService.getAppointment();
5151
const isPasswordEntered = !!this.model.password || this.appStateService.isAppointmentProtected;
52-
this.showPlaceholder = this.appStateService.isAppointmentProtected && this.isAdmin;
52+
this.showPlaceholder = this.appStateService.isAppointmentProtected && this.isAdmin();
5353
this.settingsForm = this.fb.group({
5454
hasPassword: [isPasswordEntered || this.appStateService.isAppointmentProtected],
5555
password: [
@@ -93,7 +93,7 @@ export class SettingsComponent implements OnInit {
9393
}
9494
});
9595

96-
if (this.isAdmin) {
96+
if (this.isAdmin()) {
9797
this.routeTitle.setTitle('settings.change');
9898
} else {
9999
this.routeTitle.setTitle('settings.additional');
@@ -121,7 +121,7 @@ export class SettingsComponent implements OnInit {
121121
}
122122

123123
public goBack(): void {
124-
if (!this.isAdmin) {
124+
if (!this.isAdmin()) {
125125
this.router.navigate(['/dates']).then();
126126
} else {
127127
this.router.navigate(['admin/dates']).then();
@@ -144,7 +144,7 @@ export class SettingsComponent implements OnInit {
144144
}
145145

146146
this.appStateService.updateAppointment(this.model);
147-
if (!this.isAdmin) {
147+
if (!this.isAdmin()) {
148148
this.router.navigate(['/overview']).then();
149149
} else {
150150
this.router.navigate(['/admin/overview']).then();

‎src/app/shared/components/appointment-summary/appointment-summary.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@if (showAppointmentUrl && absoluteAppointmentUrl) {
1+
@if (showAppointmentUrl() && absoluteAppointmentUrl) {
22
<div class="row g-0 mb-3">
33
<div class="col-auto align-self-center mr-2">
44
<img aria-hidden="true" alt="" class="icon" src="assets/calendar_grey.svg"/>
@@ -21,40 +21,40 @@
2121
</div>
2222
</div>
2323
}
24-
@if (showUsername && appointment.name) {
24+
@if (showUsername() && appointment().name) {
2525
<div class="row g-0 mb-3">
2626
<div class="col-auto align-self-center mr-2">
2727
<img aria-hidden="true" alt="" class="icon" src="assets/user.svg"/>
2828
</div>
2929
<div class="col align-self-top">
3030
<div class="header" data-cy="overviewNameLabel">{{ 'poll.details.name.name' | translate }}</div>
31-
<div class="value" data-cy="overviewNameValue" id="name">{{ appointment.name }}</div>
31+
<div class="value" data-cy="overviewNameValue" id="name">{{ appointment().name }}</div>
3232
</div>
3333
</div>
3434
}
35-
@if (appointment.title) {
35+
@if (appointment().title) {
3636
<div class="row g-0 mb-3">
3737
<div class="col-auto align-self-center mr-2">
3838
<img aria-hidden="true" alt="" class="icon" src="assets/title.svg"/>
3939
</div>
4040
<div class="col align-self-top">
4141
<div class="header" data-cy="overviewTitleLabel">{{ 'poll.title.title' | translate }}</div>
42-
<div class="value" data-cy="overviewTitleValue" id="title">{{ appointment.title }}</div>
42+
<div class="value" data-cy="overviewTitleValue" id="title">{{ appointment().title }}</div>
4343
</div>
4444
</div>
4545
}
46-
@if (appointment.location) {
46+
@if (appointment().location) {
4747
<div class="row g-0 mb-3">
4848
<div class="col-auto align-self-center mr-2">
4949
<img aria-hidden="true" alt="" class="icon" src="assets/location.svg"/>
5050
</div>
5151
<div class="col align-self-top">
5252
<div class="header" data-cy="overviewPlaceLabel">{{ 'poll.details.place.place' | translate }}</div>
53-
<div class="value" data-cy="overviewPlaceValue" id="location">{{ appointment.location }}</div>
53+
<div class="value" data-cy="overviewPlaceValue" id="location">{{ appointment().location }}</div>
5454
</div>
5555
</div>
5656
}
57-
@if (appointment.description) {
57+
@if (appointment().description) {
5858
<div class="row g-0 mb-3">
5959
<div class="col-auto align-self-center mr-2">
6060
<img aria-hidden="true" alt="" class="icon" src="assets/description.svg"/>
@@ -69,7 +69,7 @@
6969
</div>
7070
</div>
7171
}
72-
@if (showDeleteWarning) {
72+
@if (showDeleteWarning()) {
7373
<div class="row g-0 mb-3">
7474
<div class="col-auto align-self-center mr-2">
7575
<img aria-hidden="true" alt="" class="icon" src="assets/delete_gray.svg"/>

0 commit comments

Comments
 (0)