Merge pull request #18 from NeoScript/add_multi_project_support

Add multi project support

Author: NeoScript

webapp/src/app/app.module.ts

@@ -38,7 +38,8 @@ import { TopicListComponent } from './components/topic-list/topic-list.component
     SubscriptionDetailsComponent,
     TopicDetailsComponent,
     NewTopicDialogComponent,
-    NewSubscriptionDialogComponent
+    NewSubscriptionDialogComponent,
+  
   ],
   imports: [
     BrowserModule,

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

@@ -11,7 +11,7 @@ <h3>Select a Project from the list:</h3>
             {{project}}
         </button>
 
-        <button mat-stroked-button class="new-project">
+        <button mat-stroked-button class="new-project" (click)="addNewProject()">
             <mat-icon>add_circle</mat-icon>
             Attach new project
         </button>

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

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable, filter } from 'rxjs';
 import { PubsubService } from 'src/app/services/pubsub.service';
+import { InputDialogComponent } from '../input-dialog/input-dialog.component';
 
 @Component({
   selector: 'app-index',
@@ -11,11 +13,22 @@ export class IndexComponent implements OnInit {
 
   projectList$: Observable<string[]>
 
-  constructor(private pubsub: PubsubService) {
+  constructor(private pubsub: PubsubService, private matDialog: MatDialog) {
     this.projectList$ = pubsub.projectList$
   }
 
   ngOnInit(): void {
   }
 
+  addNewProject() {
+    const ref = this.matDialog.open(InputDialogComponent)
+
+    ref.afterClosed()
+      .pipe(filter(r => !!r))
+      .subscribe((result: { project_id: string }) => {
+        console.log(result)
+        this.pubsub.attachProject(result.project_id)
+      })
+  }
+
 }

webapp/src/app/components/input-dialog/input-dialog.component.html

@@ -0,0 +1,9 @@
+<mat-dialog-content>
+    <mat-form-field appearance="outline" color="accent">
+        <mat-label>Enter a value</mat-label>
+        <input matInput type="text" autocomplete="off" [formControl]="input">
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button [disabled]="input.invalid" (click)="save()">save</button>
+</mat-dialog-actions>

webapp/src/app/components/input-dialog/input-dialog.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputDialogComponent } from './input-dialog.component';
+
+describe('InputDialogComponent', () => {
+  let component: InputDialogComponent;
+  let fixture: ComponentFixture<InputDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InputDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

webapp/src/app/components/input-dialog/input-dialog.component.spec.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'app-input-dialog',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule, MatInputModule, ReactiveFormsModule, MatFormFieldModule],
+  templateUrl: './input-dialog.component.html',
+  styleUrl: './input-dialog.component.scss'
+})
+export class InputDialogComponent {
+
+  input = new FormControl('', Validators.required)
+
+  constructor(private dialogRef: MatDialogRef<InputDialogComponent>){
+
+  }
+
+  save(){
+    this.dialogRef.close({project_id: this.input.value})
+  }
+
+}

webapp/src/app/components/input-dialog/input-dialog.component.ts

@@ -16,15 +16,15 @@ export class ProjectsComponent implements OnInit {
   topicList2$: Observable<Topic[]> = EMPTY
   subscriptionList$: Observable<Subscription[]> = EMPTY
 
-  currentProject?: string
+  currentProject: string = ""
   currentTopic?: Topic
   currentSubscription?: Subscription
 
   constructor(private route: ActivatedRoute, private pubsub: PubsubService) { }
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(qpm => {
-      this.currentProject = qpm.get("project") ?? undefined
+      this.currentProject = qpm.get("project") ?? ""
 
       console.log("loaded project: ", this.currentProject)
       this.pubsub.selectProject(this.currentProject!)

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

@@ -7,10 +7,9 @@ import { NewSubscriptionRequest } from '../components/subscription-list/new-subs
   providedIn: 'root'
 })
 export class PubsubService {
-  project_id = "test-project"
   public currentHost = "http://localhost:8681"
 
-  private _projectList = new BehaviorSubject<string[]>(["test-project"])
+  private _projectList = new BehaviorSubject<string[]>([])
   private _currentProject = new ReplaySubject<string>()
   private _currentTopic = new ReplaySubject<Topic>()
   private _currentSubscription = new ReplaySubject<Subscription>()
@@ -39,14 +38,14 @@ export class PubsubService {
     this._projectList.next(newList)
   }
 
-  createTopic(projectId: string = this.project_id, topicId: string){
+  createTopic(projectId: string, topicId: string){
     const url = `${this.currentHost}/v1/projects/${projectId}/topics/${topicId}`
 
     return this.http.put<Topic>(url, {})
   }
 
-  listTopics(projectId: string = this.project_id) {
-    return this.http.get<{ topics: Topic[] }>(`${this.currentHost}/v1/projects/${this.project_id}/topics`).pipe(map(incoming => incoming?.topics || []))
+  listTopics(projectId: string) {
+    return this.http.get<{ topics: Topic[] }>(`${this.currentHost}/v1/projects/${projectId}/topics`).pipe(map(incoming => incoming?.topics || []))
   }
 
   createSubscription(projectId: string, request: NewSubscriptionRequest){
@@ -60,8 +59,8 @@ export class PubsubService {
     return this.http.delete(url)
   }
 
-  listSubscriptions(): Observable<Subscription[]> {
-    return this.http.get<{ subscriptions?: string[] }>(`${this.currentHost}/v1/projects/${this.project_id}/subscriptions`)
+  listSubscriptions(projectId: string): Observable<Subscription[]> {
+    return this.http.get<{ subscriptions?: string[] }>(`${this.currentHost}/v1/projects/${projectId}/subscriptions`)
       .pipe(
         map(incoming => incoming.subscriptions), // first we pull out the subscriptions object
         map(subNames => subNames??[]),