Skip to content

Commit 4eec9b4

Browse files
gbanugbanu
committed
code style use signals
1 parent 9650d4e commit 4eec9b4

File tree

8 files changed

+110
-118
lines changed

8 files changed

+110
-118
lines changed

‎client/src/app/components/environments/deployment-stepper/deployment-stepper.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44

55
<div class="flex gap-4 items-center mb-4 mt-2">
66
<span class="font-semibold text-lg">
7-
@if (deployment && deployment.state === 'SUCCESS') {
7+
@if (deployment() && deployment()?.state === 'SUCCESS') {
88
Deployment Completed
9-
} @else if (deployment && isErrorState()) {
9+
} @else if (deployment() && isErrorState()) {
1010
Deployment Failed
11-
} @else if (deployment && isUnknownState()) {
11+
} @else if (deployment() && isUnknownState()) {
1212
Deployment Status Unknown
1313
} @else {
1414
Deployment in Progress
@@ -17,17 +17,17 @@
1717
<span class="text-gray-300">|</span>
1818

1919
<!-- Integrated Time Display -->
20-
@if (deployment && deployment.state === 'SUCCESS') {
20+
@if (deployment() && deployment()?.state === 'SUCCESS') {
2121
<div class="inline-flex items-center bg-green-50 px-2 py-0.5 rounded-full text-sm">
2222
<i-tabler name="clock" class="w-4 h-4 text-green-600 mr-1"></i-tabler>
2323
<span class="font-medium text-green-600">{{ getDeploymentDuration() }}</span>
2424
</div>
25-
} @else if (deployment && isErrorState()) {
25+
} @else if (deployment() && isErrorState()) {
2626
<div class="inline-flex items-center bg-red-50 px-2 py-0.5 rounded-full text-sm">
2727
<i-tabler name="clock" class="w-4 h-4 text-red-600 mr-1"></i-tabler>
2828
<span class="font-medium text-red-600">{{ getDeploymentDuration() }}</span>
2929
</div>
30-
} @else if (deployment && isUnknownState()) {
30+
} @else if (deployment() && isUnknownState()) {
3131
<div class="inline-flex items-center bg-gray-50 px-2 py-0.5 rounded-full text-sm">
3232
<i-tabler name="clock" class="w-4 h-4 text-gray-600 mr-1"></i-tabler>
3333
<span class="font-medium text-gray-600">0m 0s</span>

‎client/src/app/components/environments/deployment-stepper/deployment-stepper.component.ts‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, inject, Input, OnInit, signal } from '@angular/core';
1+
import { Component, inject, OnInit, signal, input } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { IconsModule } from 'icons.module';
44
import { ProgressBarModule } from 'primeng/progressbar';
@@ -21,19 +21,17 @@ export class DeploymentStepperComponent implements OnInit {
2121
private _deployment = signal<EnvironmentDeployment | undefined>(undefined);
2222
private timingService = inject(DeploymentTimingService);
2323

24-
@Input()
25-
set deployment(value: EnvironmentDeployment | undefined) {
26-
// Update the deployment signal
27-
this._deployment.set(value);
24+
readonly deployment = input<EnvironmentDeployment | undefined, EnvironmentDeployment | undefined>(undefined, {
25+
transform: (value: EnvironmentDeployment | undefined) => {
26+
this._deployment.set(value);
2827

29-
// Update timing service with new deployment state
30-
if (value?.id && value?.state) {
31-
this.timingService.updateDeploymentState(value);
32-
}
33-
}
34-
get deployment(): EnvironmentDeployment | undefined {
35-
return this._deployment();
36-
}
28+
if (value?.id && value?.state) {
29+
this.timingService.updateDeploymentState(value);
30+
}
31+
32+
return value;
33+
},
34+
});
3735

3836
steps = this.timingService.steps;
3937

‎client/src/app/components/environments/environment-accordion/environment-accordion.component.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
<p-accordion-panel [value]="environment.id">
1+
<p-accordion-panel [value]="environment().id">
22
<p-accordion-header>
33
<div class="flex gap-2 items-start w-full flex-wrap md:flex-nowrap flex-col md:items-center md:flex-row">
44
<div class="flex flex-col gap-1 flex-wrap">
55
<div class="flex gap-1 items-center mr-3">
6-
<span [pTooltip]="'Open Environment'" class="cursor-pointer hover:bg-gray-200 px-2 py-1 rounded" (click)="openExternalLink($event, environment.serverUrl)">
7-
{{ environment.name }}
6+
<span [pTooltip]="'Open Environment'" class="cursor-pointer hover:bg-gray-200 px-2 py-1 rounded" (click)="openExternalLink($event, environment().serverUrl)">
7+
{{ environment().name }}
88
</span>
99

10-
<app-lock-tag [isLocked]="!!environment.locked"></app-lock-tag>
10+
<app-lock-tag [isLocked]="!!environment().locked"></app-lock-tag>
1111

12-
@if (environment.latestStatus; as status) {
12+
@if (environment().latestStatus; as status) {
1313
<app-environment-status-tag [status]="status" />
1414
}
1515

16-
@if (environment.type) {
17-
<p-tag [value]="formatEnvironmentType(environment.type)" severity="secondary" rounded="true" />
16+
@if (environment().type) {
17+
<p-tag [value]="formatEnvironmentType(environment().type || '')" severity="secondary" rounded="true" />
1818
}
1919
</div>
2020

21-
@if (environment.latestDeployment; as deployment) {
21+
@if (environment().latestDeployment; as deployment) {
2222
<div class="flex gap-1 items-center text-sm mt-2 flex-wrap">
23-
<app-user-avatar [user]="environment.latestDeployment.user" tooltipPosition="top" />
24-
@if (environment.latestDeployment.user?.name) {
25-
{{ environment.latestDeployment.user?.name }} deployed
23+
<app-user-avatar [user]="environment().latestDeployment?.user" tooltipPosition="top" />
24+
@if (environment().latestDeployment?.user?.name) {
25+
{{ environment().latestDeployment?.user?.name }} deployed
2626
}
27-
@if (environment.latestDeployment.updatedAt) {
28-
<span [pTooltip]="getDeploymentTime(environment) || ''">
29-
{{ environment.latestDeployment.updatedAt | timeAgo }}
27+
@if (environment().latestDeployment?.updatedAt) {
28+
<span [pTooltip]="getDeploymentTime(environment()) || ''">
29+
{{ environment().latestDeployment?.updatedAt || '' | timeAgo }}
3030
</span>
3131
}
3232
<app-deployment-state-tag [state]="deployment.state" [deployment]="deployment" />
@@ -70,10 +70,10 @@
7070

7171
<!-- Environment Actions Component -->
7272
<app-environment-actions
73-
[environment]="environment"
74-
[deployable]="deployable"
75-
[canViewAllEnvironments]="canViewAllEnvironments"
76-
[timeUntilReservationExpires]="timeUntilReservationExpires"
73+
[environment]="environment()"
74+
[deployable]="deployable()"
75+
[canViewAllEnvironments]="canViewAllEnvironments()"
76+
[timeUntilReservationExpires]="timeUntilReservationExpires()"
7777
(deploy)="onDeploy($event)"
7878
(unlock)="onUnlock($event)"
7979
(extend)="onExtend($event)"
@@ -101,11 +101,11 @@
101101

102102
<!-- Content container div that wraps both details and deployment views -->
103103
<div class="flex w-full">
104-
@if (showLatestDeployment) {
104+
@if (showLatestDeployment()) {
105105
<!-- Direct use of deployment stepper -->
106-
<app-deployment-stepper [deployment]="environment.latestDeployment" class="w-full" />
106+
<app-deployment-stepper [deployment]="environment().latestDeployment" class="w-full" />
107107
} @else {
108-
<app-environment-details [environment]="environment"></app-environment-details>
108+
<app-environment-details [environment]="environment()"></app-environment-details>
109109
}
110110
</div>
111111

@@ -114,7 +114,7 @@
114114
<div class="flex gap-1 mt-2 items-center">
115115
<a
116116
icon
117-
[routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/history'"
117+
[routerLink]="'/repo/' + environment().repository?.id + '/environment/' + environment().id + '/history'"
118118
class="p-button p-button-text text-gray-500 py-2 flex items-center"
119119
>
120120
<i-tabler class="mr-1" name="history" />
@@ -123,7 +123,7 @@
123123
</div>
124124
<div class="flex flex-grow"></div>
125125
<div class="flex gap-2">
126-
@for (installedApp of environment.installedApps; track installedApp) {
126+
@for (installedApp of environment().installedApps; track installedApp) {
127127
<p-tag class="bg-gray-300 gap-0">{{ installedApp }}</p-tag>
128128
}
129129
</div>

‎client/src/app/components/environments/environment-accordion/environment-accordion.component.ts‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
1+
import { Component, inject, input, output } from '@angular/core';
22
import { EnvironmentDeployment, EnvironmentDto } from '@app/core/modules/openapi';
33
import { DeploymentStepperComponent } from '../deployment-stepper/deployment-stepper.component';
44
import { EnvironmentActionsComponent } from '../environment-actions/environment-actions.component';
@@ -16,6 +16,7 @@ import { SelectButtonModule } from 'primeng/selectbutton';
1616
import { FormsModule } from '@angular/forms';
1717
import { RouterLink } from '@angular/router';
1818
import { EnvironmentStatusTagComponent } from '../environment-status-tag/environment-status-tag.component';
19+
import { signal } from '@angular/core';
1920

2021
@Component({
2122
selector: 'app-environment-accordion',
@@ -40,36 +41,36 @@ import { EnvironmentStatusTagComponent } from '../environment-status-tag/environ
4041
templateUrl: './environment-accordion.component.html',
4142
})
4243
export class EnvironmentAccordionComponent {
43-
@Input() environment!: EnvironmentDto;
44-
@Input() deployable: boolean = false;
45-
@Input() canViewAllEnvironments: boolean = false;
46-
@Input() timeUntilReservationExpires: number | undefined;
44+
readonly environment = input.required<EnvironmentDto>();
45+
readonly deployable = input<boolean>(false);
46+
readonly canViewAllEnvironments = input<boolean>(false);
47+
readonly timeUntilReservationExpires = input<number | undefined>(undefined);
4748

48-
@Output() deploy = new EventEmitter<EnvironmentDto>();
49-
@Output() unlock = new EventEmitter<{ event: Event; environment: EnvironmentDto }>();
50-
@Output() extend = new EventEmitter<{ event: Event; environment: EnvironmentDto }>();
51-
@Output() lock = new EventEmitter<EnvironmentDto>();
49+
readonly deploy = output<EnvironmentDto>();
50+
readonly unlock = output<{ event: Event; environment: EnvironmentDto }>();
51+
readonly extend = output<{ event: Event; environment: EnvironmentDto }>();
52+
readonly lock = output<EnvironmentDto>();
5253

53-
showLatestDeployment: boolean = true;
54+
showLatestDeployment = signal<boolean>(true);
5455

5556
private datePipe = inject(DatePipe);
5657

5758
onDeploy(event: Event) {
5859
event.stopPropagation();
59-
this.deploy.emit(this.environment);
60+
this.deploy.emit(this.environment());
6061
}
6162

6263
onUnlock(event: Event) {
63-
this.unlock.emit({ event, environment: this.environment });
64+
this.unlock.emit({ event, environment: this.environment() });
6465
}
6566

6667
onExtend(event: Event) {
67-
this.extend.emit({ event, environment: this.environment });
68+
this.extend.emit({ event, environment: this.environment() });
6869
}
6970

7071
onLock(event: Event) {
7172
event.stopPropagation();
72-
this.lock.emit(this.environment);
73+
this.lock.emit(this.environment());
7374
}
7475

7576
formatEnvironmentType(type: string): string {
@@ -100,10 +101,10 @@ export class EnvironmentAccordionComponent {
100101
}
101102

102103
getPrLink() {
103-
return ['/repo', this.environment.repository?.id, 'ci-cd', 'pr', this.environment.latestDeployment?.pullRequestNumber?.toString()];
104+
return ['/repo', this.environment().repository?.id, 'ci-cd', 'pr', this.environment().latestDeployment?.pullRequestNumber?.toString()];
104105
}
105106

106107
getBranchLink() {
107-
return ['/repo', this.environment.repository?.id, 'ci-cd', 'branch', this.environment.latestDeployment?.ref];
108+
return ['/repo', this.environment().repository?.id, 'ci-cd', 'branch', this.environment().latestDeployment?.ref];
108109
}
109110
}

‎client/src/app/components/environments/environment-actions/environment-actions.component.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div class="flex gap-2 items-center self-end md:self-center">
2-
@if (environment.locked) {
2+
@if (environment().locked) {
33
<div class="flex gap-1 items-center">
4-
<app-user-avatar [user]="environment.lockedBy" [toolTipText]="'Locked By'" tooltipPosition="top" />
4+
<app-user-avatar [user]="environment().lockedBy" [toolTipText]="'Locked By'" tooltipPosition="top" />
55
</div>
6-
@if (environment.lockedAt) {
7-
<app-lock-time [timeLockWillExpire]="environment.lockWillExpireAt"></app-lock-time>
6+
@if (environment().lockedAt) {
7+
<app-lock-time [timeLockWillExpire]="environment().lockWillExpireAt"></app-lock-time>
88
}
99
}
1010

1111
<div class="flex items-center border border-gray-300 rounded-md overflow-hidden">
1212
<!-- Deploy Button -->
13-
@if (deployable) {
13+
@if (deployable()) {
1414
<p-button outlined (click)="onDeploy($event)" [disabled]="!canUserDeploy()" [pTooltip]="getDeployTooltip()" tooltipPosition="top">
1515
<div class="flex items-center">
1616
<i-tabler name="cloud-upload" class="w-4 h-4 mr-1.5 flex-shrink-0 text-primary-700" />
@@ -21,10 +21,10 @@
2121
}
2222

2323
<!-- Lock/Unlock Controls -->
24-
@if (environment.enabled && environment.type === 'TEST') {
24+
@if (environment().enabled && environment().type === 'TEST') {
2525
<p-buttongroup>
26-
@if (!environment.locked) {
27-
@if (deployable) {
26+
@if (!environment().locked) {
27+
@if (deployable()) {
2828
<p-button outlined (click)="onLock($event)" [disabled]="!canUserDeploy()" [pTooltip]="getLockTooltip()" tooltipPosition="top">
2929
<div class="flex items-center">
3030
<i-tabler name="lock" class="w-4 h-4 flex-shrink-0 text-red-700" />
@@ -49,10 +49,10 @@
4949
}
5050

5151
<!-- Approve Button -->
52-
@if (environment.latestDeployment?.state === 'WAITING') {
52+
@if (environment().latestDeployment?.state === 'WAITING') {
5353
<p-button
5454
severity="success"
55-
(click)="openExternalLink($event, environment.latestDeployment?.workflowRunHtmlUrl)"
55+
(click)="openExternalLink($event, environment().latestDeployment?.workflowRunHtmlUrl)"
5656
pTooltip="Approve deployment on GitHub"
5757
tooltipPosition="top"
5858
>
@@ -64,13 +64,13 @@
6464
</div>
6565

6666
<!-- Edit & Disabled Tag -->
67-
@if (canViewAllEnvironments) {
68-
@if (!environment.enabled) {
67+
@if (canViewAllEnvironments()) {
68+
@if (!environment().enabled) {
6969
<p-tag value="Disabled" severity="danger" rounded="true" />
7070
}
7171
<a
7272
icon
73-
[routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/edit'"
73+
[routerLink]="'/repo/' + environment().repository?.id + '/environment/' + environment().id + '/edit'"
7474
class="p-button p-button-secondary p-2"
7575
(click)="$event.stopPropagation()"
7676
>

0 commit comments

Comments
 (0)