Q form - 1d

ampath-simple-app/src/app/app.component.html

@@ -1,5 +1,4 @@
-
 <app-left-nav-bar></app-left-nav-bar>
-<!--The content below is only a placeholder and can be replaced.-->
 <h1>{{ title }}</h1>
 <app-tabs></app-tabs>
+<app-form-component></app-form-component>

ampath-simple-app/src/app/app.module.ts

@@ -1,44 +1,41 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import { FormsModule} from '@angular/forms';
-import {MatFormFieldModule, MatTabsModule} from '@angular/material';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatInputModule} from '@angular/material';
-import {MatSelectModule} from '@angular/material';
-import { MatCheckboxModule} from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FormComponentComponent } from './form-component/form-component.component';
+import { CloseFormDialogComponent } from './close-form-dialog/close-form-dialog.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule, MatTabsModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatInputModule } from '@angular/material';
+import { MatSelectModule } from '@angular/material';
+import { MatCheckboxModule } from '@angular/material';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { LeftNavBarComponent } from './left-nav-bar/left-nav-bar.component';
 import { TabsComponent } from './tabs/tabs.component';
-import { ReactiveFormsModule} from '@angular/forms';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatNativeDateModule} from '@angular/material';
-
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LeftNavBarComponent
+    FormComponentComponent,
+    CloseFormDialogComponent,
+    LeftNavBarComponent,
+    TabsComponent
   ],
   imports: [
-    BrowserModule,
     AppRoutingModule,
-    MatToolbarModule,
-    BrowserAnimationsModule,
+    MatDialogModule,
     MatButtonModule,
     MatIconModule,
     MatSidenavModule,
-    MatToolbarModule,
-    TabsComponent
-],
-  imports: [
     BrowserModule,
     FormsModule,
     MatTabsModule,
@@ -52,10 +49,12 @@ import {MatNativeDateModule} from '@angular/material';
     MatDatepickerModule,
     MatNativeDateModule
   ],
+  entryComponents: [
+    CloseFormDialogComponent
+  ],
   providers: [
     MatNativeDateModule,
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-

ampath-simple-app/src/app/close-form-dialog/close-form-dialog.component.html

@@ -0,0 +1,9 @@
+<div>
+  <p>
+    Close this form and:
+  </p>
+</div>
+<div>
+  <button mat-button (click)="deleteFormDialog()" [mat-dialog-close]>Delete</button>
+  <button mat-button (click)="saveFormDialog()" [mat-dialog-close]>Save</button>
+</div>

ampath-simple-app/src/app/close-form-dialog/close-form-dialog.component.spec.ts

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

ampath-simple-app/src/app/close-form-dialog/close-form-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-close-form-dialog',
+  templateUrl: './close-form-dialog.component.html',
+  styleUrls: ['./close-form-dialog.component.css']
+})
+export class CloseFormDialogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  deleteFormDialog() {
+    // placeholder for click event
+  }
+
+  saveFormDialog() {
+    // placeholder for click event
+  }
+
+}

ampath-simple-app/src/app/dialog.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DialogService = TestBed.get(DialogService);
+    expect(service).toBeTruthy();
+  });
+});

ampath-simple-app/src/app/dialog.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { CloseFormDialogComponent } from './close-form-dialog/close-form-dialog.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+
+  constructor(private dialog: MatDialog) { }
+
+  openCloseFormDialog() {
+    this.dialog.open(CloseFormDialogComponent, {
+      width: '280px',
+      height: '128px',
+      disableClose: true
+    });
+  }
+}

ampath-simple-app/src/app/form-component/form-component.component.css

@@ -0,0 +1,9 @@
+/* .example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .example-full-width {
+    width: 100%;
+  } */

ampath-simple-app/src/app/form-component/form-component.component.html

@@ -0,0 +1,55 @@
+<html>
+<header>
+  <link type="styles/css" href="form-component.component.css">
+</header>
+
+<body>
+  <div>
+    <button mat-button>
+        <i class="material-icons">
+          arrow_back_ios
+        </i>
+      </button>
+  </div>
+  <div>
+    <!-- {{}} placeholder for firstname, lastname -->
+  </div>
+
+  <div>
+    <p>
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Label">
+        <mat-hint>Assistive Text</mat-hint>
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Label">
+        <mat-hint>Assistive Text</mat-hint>
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Label">
+        <mat-hint>Assistive Text</mat-hint>
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Label">
+        <mat-hint>Assistive Text</mat-hint>
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Label">
+        <mat-hint>Assistive Text</mat-hint>
+      </mat-form-field>
+    </p>
+    <div align="end">
+      <button (click)="openCloseFormDialog()" mat-stroked-button>Submit</button>
+    </div>
+  </div>
+</body>
+
+</html>

ampath-simple-app/src/app/form-component/form-component.component.spec.ts

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

ampath-simple-app/src/app/form-component/form-component.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { DialogService } from '../dialog.service';
+
+@Component({
+  selector: 'app-form-component',
+  templateUrl: './form-component.component.html',
+  styleUrls: ['./form-component.component.css']
+})
+export class FormComponentComponent implements OnInit {
+
+  constructor(private dialogService: DialogService) { }
+
+  ngOnInit() {
+  }
+
+  openCloseFormDialog(): void {
+    this.dialogService.openCloseFormDialog();
+  }
+
+
+
+}

ampath-simple-app/src/app/tabs/tabs.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import {FormControl} from '@angular/forms';
 import {FormControl, Validators} from '@angular/forms';