Skip to content

Commit 4d39de2

Browse files
NeoScriptNeoScript
committed
Migrate control flow syntax
1 parent 2170bcf commit 4d39de2

12 files changed

+179
-168
lines changed

‎webapp/src/app/components/index/index.component.html

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<div class="container">
2-
<div class="header">
3-
<h3>Select a Project from the list:</h3>
4-
<p class="caption">Or Create a new one!</p>
5-
</div>
2+
<div class="header">
3+
<h3>Select a Project from the list:</h3>
4+
<p class="caption">Or Create a new one!</p>
5+
</div>
66

7-
<div class="project-list">
7+
<div class="project-list">
88

9-
<button mat-raised-button class="project" *ngFor="let project of (this.projectList$|async)"
9+
@for (project of (this.projectList$|async); track project) {
10+
<button mat-raised-button class="project"
1011
[routerLink]="['project']" [queryParams]="{'project': project}">
11-
{{project}}
12-
</button>
12+
{{project}}
13+
</button>
14+
}
1315

14-
<button mat-stroked-button class="new-project" (click)="addNewProject()">
15-
<mat-icon>add_circle</mat-icon>
16-
Attach new project
17-
</button>
18-
</div>
16+
<button mat-stroked-button class="new-project" (click)="addNewProject()">
17+
<mat-icon>add_circle</mat-icon>
18+
Attach new project
19+
</button>
20+
</div>
1921
</div>

‎webapp/src/app/components/index/index.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
33
import { Observable, filter } from 'rxjs';
44
import { PubsubService } from 'src/app/services/pubsub.service';
55
import { InputDialogComponent } from '../input-dialog/input-dialog.component';
6-
import { NgFor, AsyncPipe } from '@angular/common';
6+
import { AsyncPipe } from '@angular/common';
77
import { MatButton } from '@angular/material/button';
88
import { RouterLink } from '@angular/router';
99
import { MatIcon } from '@angular/material/icon';
@@ -13,7 +13,7 @@ import { MatIcon } from '@angular/material/icon';
1313
templateUrl: './index.component.html',
1414
styleUrls: ['./index.component.scss'],
1515
standalone: true,
16-
imports: [NgFor, MatButton, RouterLink, MatIcon, AsyncPipe]
16+
imports: [MatButton, RouterLink, MatIcon, AsyncPipe]
1717
})
1818
export class IndexComponent implements OnInit {
1919

‎webapp/src/app/components/projects/projects.component.html

+38-30
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
11
<div class="container">
2-
<h1>Project: {{this.currentProject}}</h1>
3-
4-
<div class="header-container">
5-
6-
<div class="topics" *ngIf="this.topicList$ | async as topicList">
7-
<h2>Topics</h2>
8-
<app-topic-list
9-
[topics]="topicList"
10-
[(currentTopic)]="this.currentTopic"
11-
(currentTopicChange)="loadSubsFor($event)"
12-
(newTopicRequest)="this.handleNewTopicRequest($event)"></app-topic-list>
13-
</div>
14-
15-
<div class="subscriptions" *ngIf="this.subscriptionList$ | async as possibleSubs">
16-
<h2>Subscriptions</h2>
17-
<app-subscription-list [topic]="this.currentTopic" [subscriptions]="possibleSubs" [(currentSubscription)]="this.currentSubscription" (newSubscriptionRequest)="this.handleNewSubscription($event)">
18-
</app-subscription-list>
19-
</div>
20-
21-
</div>
2+
<h1>Project: {{this.currentProject}}</h1>
3+
4+
<div class="header-container">
5+
6+
@if (this.topicList$ | async; as topicList) {
7+
<div class="topics">
8+
<h2>Topics</h2>
9+
<app-topic-list
10+
[topics]="topicList"
11+
[(currentTopic)]="this.currentTopic"
12+
(currentTopicChange)="loadSubsFor($event)"
13+
(newTopicRequest)="this.handleNewTopicRequest($event)"></app-topic-list>
14+
</div>
15+
}
16+
17+
@if (this.subscriptionList$ | async; as possibleSubs) {
18+
<div class="subscriptions">
19+
<h2>Subscriptions</h2>
20+
<app-subscription-list [topic]="this.currentTopic" [subscriptions]="possibleSubs" [(currentSubscription)]="this.currentSubscription" (newSubscriptionRequest)="this.handleNewSubscription($event)">
21+
</app-subscription-list>
22+
</div>
23+
}
24+
25+
</div>
2226

2327
<div class="main-container" [ngClass]="{
2428
'main-container--no-topic': this.currentTopic == undefined,
2529
'main-container--no-subscription': this.currentTopic != undefined && this.currentSubscription == undefined
2630
}">
27-
<div *ngIf="this.currentTopic && this.currentSubscription">
28-
<app-subscription-details [subscriptionPath]="this.currentSubscription.name"></app-subscription-details>
29-
</div>
30-
31-
<div *ngIf="this.currentTopic && !this.currentSubscription">
32-
<app-topic-details [topic]="this.currentTopic"
33-
(onMessagePublish)="this.handlePublishRequest($event)"></app-topic-details>
34-
</div>
35-
36-
</div>
31+
@if (this.currentTopic && this.currentSubscription) {
32+
<div>
33+
<app-subscription-details [subscriptionPath]="this.currentSubscription.name"></app-subscription-details>
34+
</div>
35+
}
36+
37+
@if (this.currentTopic && !this.currentSubscription) {
38+
<div>
39+
<app-topic-details [topic]="this.currentTopic"
40+
(onMessagePublish)="this.handlePublishRequest($event)"></app-topic-details>
41+
</div>
42+
}
43+
44+
</div>
3745

3846
</div>

‎webapp/src/app/components/projects/projects.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
33
import { EMPTY, Observable, tap } from 'rxjs';
44
import { PubsubMessage, PubsubService, Subscription, Topic } from 'src/app/services/pubsub.service';
55
import { NewSubscriptionRequest } from '../subscription-list/new-subscription-dialog/new-subscription-dialog.component';
6-
import { NgIf, NgClass, AsyncPipe } from '@angular/common';
6+
import { NgClass, AsyncPipe } from '@angular/common';
77
import { TopicListComponent } from '../topic-list/topic-list.component';
88
import { SubscriptionListComponent } from '../subscription-list/subscription-list.component';
99
import { SubscriptionDetailsComponent } from '../subscription-details/subscription-details.component';
@@ -14,7 +14,7 @@ import { TopicDetailsComponent } from '../topic-details/topic-details.component'
1414
templateUrl: './projects.component.html',
1515
styleUrls: ['./projects.component.scss'],
1616
standalone: true,
17-
imports: [NgIf, TopicListComponent, SubscriptionListComponent, NgClass, SubscriptionDetailsComponent, TopicDetailsComponent, AsyncPipe]
17+
imports: [TopicListComponent, SubscriptionListComponent, NgClass, SubscriptionDetailsComponent, TopicDetailsComponent, AsyncPipe]
1818
})
1919
export class ProjectsComponent implements OnInit {
2020

‎webapp/src/app/components/subscription-details/subscription-details.component.html

+32-29
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
1-
<div *ngIf="this.details|async as subscription" class="content">
1+
@if (this.details|async; as subscription) {
2+
<div class="content">
23
<h3>Subscription Details</h3>
3-
44
<div class="header">
5-
<div id="path">path: {{subscription.name}}</div>
6-
<div id="topic">topic: {{subscription.topic}}</div>
7-
<button id="pullMessagesBtn" mat-raised-button color="primary" (click)="this.pullMessages()">
8-
Pull Messages
9-
<mat-icon matSuffix>download</mat-icon>
10-
</button>
5+
<div id="path">path: {{subscription.name}}</div>
6+
<div id="topic">topic: {{subscription.topic}}</div>
7+
<button id="pullMessagesBtn" mat-raised-button color="primary" (click)="this.pullMessages()">
8+
Pull Messages
9+
<mat-icon matSuffix>download</mat-icon>
10+
</button>
1111
</div>
12-
13-
1412
<div class="message-pane">
15-
<div>Messages Received: {{this.messages.length}}</div>
16-
<table class="message-table mat-table" *ngIf="this.messages">
17-
<thead>
18-
<tr>
19-
<th>Timestamp</th>
20-
<th>Message</th>
21-
<th>Ack</th>
22-
</tr>
23-
</thead>
24-
<tbody>
25-
<tr *ngFor="let msg of this.messages" class="pubsub-message">
26-
<td>{{msg.message.publishTime | date : "long"}}</td>
27-
<td>{{msg.message.data}}</td>
28-
<td>
29-
<button mat-button color="warn" (click)="this.ackMessage(msg.ackId)">Ack</button>
30-
</td>
31-
</tr>
32-
</tbody>
13+
<div>Messages Received: {{this.messages.length}}</div>
14+
@if (this.messages) {
15+
<table class="message-table mat-table">
16+
<thead>
17+
<tr>
18+
<th>Timestamp</th>
19+
<th>Message</th>
20+
<th>Ack</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
@for (msg of this.messages; track msg) {
25+
<tr class="pubsub-message">
26+
<td>{{msg.message.publishTime | date : "long"}}</td>
27+
<td>{{msg.message.data}}</td>
28+
<td>
29+
<button mat-button color="warn" (click)="this.ackMessage(msg.ackId)">Ack</button>
30+
</td>
31+
</tr>
32+
}
33+
</tbody>
3334
</table>
35+
}
3436
</div>
35-
</div>
37+
</div>
38+
}

‎webapp/src/app/components/subscription-details/subscription-details.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, Input, OnInit } from '@angular/core';
22
import { EMPTY, firstValueFrom, map, Observable } from 'rxjs';
33
import { PubsubService, ReceivedMessage, Subscription } from 'src/app/services/pubsub.service';
4-
import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
4+
import { AsyncPipe, DatePipe } from '@angular/common';
55
import { MatButton } from '@angular/material/button';
66
import { MatIcon } from '@angular/material/icon';
77
import { MatSuffix } from '@angular/material/form-field';
@@ -11,7 +11,7 @@ import { MatSuffix } from '@angular/material/form-field';
1111
templateUrl: './subscription-details.component.html',
1212
styleUrls: ['./subscription-details.component.scss'],
1313
standalone: true,
14-
imports: [NgIf, MatButton, MatIcon, MatSuffix, NgFor, AsyncPipe, DatePipe]
14+
imports: [MatButton, MatIcon, MatSuffix, AsyncPipe, DatePipe]
1515
})
1616
export class SubscriptionDetailsComponent implements OnInit {
1717

‎webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.html

+48-52
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,54 @@
11
<h3>Create a new subscription</h3>
22

33
<mat-horizontal-stepper>
4-
<mat-step color="accent">
5-
<ng-template matStepLabel>Subscription Type</ng-template>
6-
<p>Which type of subscription would you like to create?</p>
7-
<mat-action-list>
8-
<button mat-list-item matStepperNext (click)="setConfigType('pull')">
9-
<mat-icon mat-list-icon>move_to_inbox</mat-icon>
10-
<div mat-line>Pull Subscription</div>
11-
<div mat-line class="caption">Subscribers must pull messages manually.</div>
12-
</button>
13-
14-
<button mat-list-item matStepperNext (click)="setConfigType('push')">
15-
<mat-icon mat-list-icon>send</mat-icon>
16-
<div mat-line>Push Subscription</div>
17-
<div mat-line class="caption">Messages will be forwarded to an endpoint.</div>
18-
</button>
19-
</mat-action-list>
20-
</mat-step>
21-
22-
<mat-step color="accent">
23-
<ng-template matStepLabel>Configuration</ng-template>
24-
25-
<div class="final-config">
26-
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
27-
<mat-label>Enter subscription name</mat-label>
28-
<mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
29-
<input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
30-
</mat-form-field>
31-
32-
<ng-container *ngIf="this.configType === 'pull';then pullConfig; else pushConfig"></ng-container>
33-
</div>
34-
</mat-step>
4+
<mat-step color="accent">
5+
<ng-template matStepLabel>Subscription Type</ng-template>
6+
<p>Which type of subscription would you like to create?</p>
7+
<mat-action-list>
8+
<button mat-list-item matStepperNext (click)="setConfigType('pull')">
9+
<mat-icon mat-list-icon>move_to_inbox</mat-icon>
10+
<div mat-line>Pull Subscription</div>
11+
<div mat-line class="caption">Subscribers must pull messages manually.</div>
12+
</button>
13+
14+
<button mat-list-item matStepperNext (click)="setConfigType('push')">
15+
<mat-icon mat-list-icon>send</mat-icon>
16+
<div mat-line>Push Subscription</div>
17+
<div mat-line class="caption">Messages will be forwarded to an endpoint.</div>
18+
</button>
19+
</mat-action-list>
20+
</mat-step>
21+
22+
<mat-step color="accent">
23+
<ng-template matStepLabel>Configuration</ng-template>
24+
25+
<div class="final-config">
26+
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
27+
<mat-label>Enter subscription name</mat-label>
28+
<mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
29+
<input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
30+
</mat-form-field>
31+
32+
@if (this.configType === 'pull') {
33+
<button mat-raised-button color="accent" (click)="createPullSubscription()"
34+
[disabled]="this.subscriptionForm.invalid">
35+
Create Pull Subscription
36+
<mat-icon>add</mat-icon>
37+
</button>
38+
} @else {
39+
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
40+
<mat-label>Enter endpoint url</mat-label>
41+
<mat-hint>new messages will trigger this endpoint.</mat-hint>
42+
<input matInput type="text" autocomplete="off" [formControl]="this.endpointForm">
43+
</mat-form-field>
44+
<button mat-raised-button color="accent" (click)="createPushSubscription()"
45+
[disabled]="this.subscriptionForm.invalid || this.endpointForm.invalid">
46+
Create Push Subscription
47+
<mat-icon>add</mat-icon>
48+
</button>
49+
}
50+
</div>
51+
</mat-step>
3552
</mat-horizontal-stepper>
3653

37-
<ng-template #pullConfig>
38-
<button mat-raised-button color="accent" (click)="createPullSubscription()"
39-
[disabled]="this.subscriptionForm.invalid">
40-
Create Pull Subscription
41-
<mat-icon>add</mat-icon>
42-
</button>
43-
</ng-template>
44-
45-
<ng-template #pushConfig>
46-
47-
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
48-
<mat-label>Enter endpoint url</mat-label>
49-
<mat-hint>new messages will trigger this endpoint.</mat-hint>
50-
<input matInput type="text" autocomplete="off" [formControl]="this.endpointForm">
51-
</mat-form-field>
5254

53-
<button mat-raised-button color="accent" (click)="createPushSubscription()"
54-
[disabled]="this.subscriptionForm.invalid || this.endpointForm.invalid">
55-
Create Push Subscription
56-
<mat-icon>add</mat-icon>
57-
</button>
58-
</ng-template>

‎webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import { MatActionList, MatListItem } from '@angular/material/list';
77
import { MatIcon } from '@angular/material/icon';
88
import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
99
import { MatInput } from '@angular/material/input';
10-
import { NgIf } from '@angular/common';
10+
1111
import { MatButton } from '@angular/material/button';
1212

1313
@Component({
1414
selector: 'app-new-subscription-dialog',
1515
templateUrl: './new-subscription-dialog.component.html',
1616
styleUrls: ['./new-subscription-dialog.component.scss'],
1717
standalone: true,
18-
imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, NgIf, MatButton]
18+
imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton]
1919
})
2020
export class NewSubscriptionDialogComponent implements OnInit {
2121

0 commit comments

Comments
 (0)