Merge pull request #3 from Marwan01/edit

Edit

.travis.yml

@@ -0,0 +1,21 @@
+dist: trusty
+sudo: false
+
+language: node_js
+node_js:
+  - '10'
+
+
+cache:
+  directories:
+    - ./node_modules
+
+branches:
+  only:
+  - master
+
+script:
+  - ./node_modules/.bin/eslint './src/app/*.ts' --fix
+  - ng build --prod
+  # - ng test -- --watch=false --no-progress --browsers=ChromeHeadlessNoSandbox
+  # - firebase deploy says firebase: command not found

karma.conf.js

@@ -27,6 +27,12 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    }
   });
 };

src/app/add-patient/add-patient.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Patient } from '../add-patient/Patient';
@@ -57,11 +57,7 @@ export class AddPatientComponentDialog {
   	this.dialogRef.close();
   }
   onSubmit(patient) {
-  	console.log(this.patientsCollection);
-  	console.log(patient);
   	this.patientsCollection.add(patient);
-  	console.log(this.patientsCollection);
-
   }
 
 }

src/app/app-routing.module.ts

@@ -5,15 +5,15 @@ import { HelpComponent } from './help/help.component';
 import { HomeComponent} from './home/home.component';
 
 const routes: Routes = [
-  { path: 'about', component: AboutComponent},
-  { path: 'help', component: HelpComponent},
-  { path: '', component: HomeComponent}
+	{ path: 'about', component: AboutComponent},
+	{ path: 'help', component: HelpComponent},
+	{ path: '', component: HomeComponent}
 ];
 
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
 })
 export class AppRoutingModule { }
 export const routingComponents = [AboutComponent, HelpComponent, HomeComponent];

src/app/app.component.spec.ts

@@ -3,33 +3,33 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				RouterTestingModule
+			],
+			declarations: [
+				AppComponent
+			],
+		}).compileComponents();
+	}));
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
+	it('should create the app', () => {
+		const fixture = TestBed.createComponent(AppComponent);
+		const app = fixture.debugElement.componentInstance;
+		expect(app).toBeTruthy();
+	});
 
-  it(`should have as title 'doctor-app'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('doctor-app');
-  });
+	it('should have as title \'doctor-app\'', () => {
+		const fixture = TestBed.createComponent(AppComponent);
+		const app = fixture.debugElement.componentInstance;
+		expect(app.title).toEqual('doctor-app');
+	});
 
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to doctor-app!');
-  });
+	it('should render title in a h1 tag', () => {
+		const fixture = TestBed.createComponent(AppComponent);
+		fixture.detectChanges();
+		const compiled = fixture.debugElement.nativeElement;
+		expect(compiled.querySelector('h1').textContent).toContain('Welcome to doctor-app!');
+	});
 });

src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 }

src/app/app.module.ts

@@ -32,60 +32,63 @@ import { ConfigService } from './services/config.service';
 
 
 import * as $ from 'jquery';
+import { EditPatientComponent, EditPatientComponentDialog } from './edit-patient/edit-patient.component';
 
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    ToolbarComponent,
-    AddPatientComponent,
-    AddPatientComponentDialog,
-    PatientCardComponent,
-    routingComponents,
+	declarations: [
+		AppComponent,
+		ToolbarComponent,
+		AddPatientComponent,
+		AddPatientComponentDialog,
+		PatientCardComponent,
+		routingComponents,
+		EditPatientComponent,
+		EditPatientComponentDialog
 
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatSidenavModule,
-    MatMenuModule,
-    MatIconModule,
-    MatDialogModule,
-    MatTooltipModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatCheckboxModule,
-    MatRadioModule,
-    MatCardModule,
-    MatGridListModule,
-    HttpClientModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule,
-    MatSnackBarModule,
-    MatStepperModule
-  ],
-  providers: [{provide: APP_INITIALIZER, useFactory: configFactory, deps: [ConfigService], multi: true}],
-  bootstrap: [AppComponent],
-  entryComponents: [AddPatientComponentDialog]
+	],
+	imports: [
+		BrowserModule,
+		BrowserAnimationsModule,
+		AppRoutingModule,
+		MatButtonModule,
+		MatToolbarModule,
+		MatSidenavModule,
+		MatMenuModule,
+		MatIconModule,
+		MatDialogModule,
+		MatTooltipModule,
+		MatInputModule,
+		ReactiveFormsModule,
+		MatDatepickerModule,
+		MatNativeDateModule,
+		MatCheckboxModule,
+		MatRadioModule,
+		MatCardModule,
+		MatGridListModule,
+		HttpClientModule,
+		AngularFireModule.initializeApp(environment.firebase),
+		AngularFirestoreModule,
+		MatSnackBarModule,
+		MatStepperModule
+	],
+	providers: [{provide: APP_INITIALIZER, useFactory: configFactory, deps: [ConfigService], multi: true}],
+	bootstrap: [AppComponent],
+	entryComponents: [AddPatientComponentDialog, EditPatientComponentDialog]
 })
 export class AppModule { }
 
 // TODO: Find a better place for this
 export function configFactory(provider: ConfigService) {
-  const configs = [
-    provider.loadConfig(),
-  ];
+	const configs = [
+		provider.loadConfig(),
+	];
 
-  const splashScreenExit = new Promise((resolve, reject) => {
-    Promise.all(configs).then(() => {
-      $('.splash-screen').animate({ top: '100%' }, 400, () => resolve(true));
-    });
-  });
+	const splashScreenExit = new Promise((resolve, reject) => {
+		Promise.all(configs).then(() => {
+			$('.splash-screen').animate({ top: '100%' }, 400, () => resolve(true));
+		});
+	});
 
-  return () => splashScreenExit;
+	return () => splashScreenExit;
 }

src/app/edit-patient/edit-patient-dialog.component.html

@@ -0,0 +1,29 @@
+<h1 mat-dialog-title> Edit Existing Patient:</h1>
+<div mat-dialog-content>
+  <form [formGroup]="form" class="example-form" style="height: 400px;"> 
+    <mat-form-field style="width:50%">
+        <div style="color:red;" *ngIf="form.get('firstname').hasError('pattern')">Detected some invalid characters</div>
+      <input formControlName="firstname" name="firstName" matInput placeholder="First Name">
+    </mat-form-field>
+    <mat-form-field style="width:50%">
+        <div style="color:red;" *ngIf="form.get('lastname').hasError('pattern')">Detected some invalid characters</div>
+      <input formControlName="lastname" name="lastName" matInput placeholder="Last Name">
+    </mat-form-field>
+    <mat-checkbox [(ngModel)]="checked" formControlName="examined" name="examined" labelPosition="before">Check if patient has been examined:</mat-checkbox>
+    <mat-form-field style="width:100%" *ngIf="checked">
+        <input matInput formControlName="examinedOn" [matDatepicker]="picker" placeholder="Choose a date">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+    <mat-form-field style="width:100%">
+      <input formControlName="diagnosis" name="diagnosis" matInput placeholder="Diagnosis">
+    </mat-form-field>
+    <mat-form-field style="width:100%;">
+      <input formControlName="notes" name="notes" matInput placeholder="Any Additional Notes?">
+    </mat-form-field>
+    <div mat-dialog-actions>
+        <button mat-button (click)="onNoClick()">Cancel</button>
+        <button [disabled]="!form.valid" mat-button (click)="onEdit(form.value)" [mat-dialog-close]>Edit</button>
+      </div>
+  </form>
+</div>

src/app/edit-patient/edit-patient.component.html

@@ -0,0 +1,6 @@
+<button mat-icon-button
+ (click)="openDialog()"
+  aria-label="icon-button with a menu"
+  matTooltip="Click here to edit a patient">
+  <mat-icon>edit</mat-icon>
+</button>

src/app/edit-patient/edit-patient.component.spec.ts

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