Create ability to add project names

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})
+  }
+
+}