Saves new samples to backend. Renames interfaces directory to 'models' for consistency with backend.

src/app/_util/qrCode.ts

@@ -0,0 +1,11 @@
+import {formatDate} from '@angular/common';
+
+export const createQrCodeValue = (barCode: string, initials: string, dateCreated: Date, locationId: string): string => {
+  const valArray = [
+    barCode,
+    initials,
+    formatDate(dateCreated, 'yyyyMMddHHmm', 'en-us'),
+    locationId,
+  ];
+  return valArray.join('-');
+};

src/app/app.component.ts

@@ -2,8 +2,8 @@ import {Component, Inject} from '@angular/core';
 import {MatIconRegistry} from '@angular/material/icon';
 import {DomSanitizer, Title} from '@angular/platform-browser';
 import {Router} from '@angular/router';
-import {AppEnvironment} from './interfaces/appEnvironment.interface';
-import {TestingLocation} from './interfaces/testingLocation.interface';
+import {AppEnvironment} from './models/appEnvironment.interface';
+import {TestingLocation} from './models/testingLocation.interface';
 import {GoogleAnalyticsService} from './services/google-analytics.service';
 
 @Component({

src/app/config/defaults.ts

@@ -1,5 +1,5 @@
-import {AppDefaultsOptions} from '../interfaces/appDefaults.interface';
-import {LabelLayout} from '../interfaces/labelLayout.interface';
+import {AppDefaultsOptions} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 
 export const labelLayouts = {
   round_32mm_1up: new LabelLayout({

src/app/interfaces/sample.interface.ts

@@ -1,6 +0,0 @@
-export interface Sample {
-  id: string;
-  barCodeId: string;
-  locationId: string;
-  createdAd: string;
-}

src/app/label-layout/label-layout.component.ts

@@ -1,6 +1,6 @@
-import {formatDate} from '@angular/common';
 import {Component, Input, OnInit} from '@angular/core';
-import {AppDefaults} from '../interfaces/appDefaults.interface';
+import {createQrCodeValue} from '../_util/qrCode';
+import {AppDefaults} from '../models/appDefaults.interface';
 import {SettingsService} from '../services/settings.service';
 
 @Component({
@@ -19,13 +19,12 @@ export class LabelLayoutComponent implements OnInit {
   }
 
   get qrCodeValue(): string {
-    const valArray = [
+    return createQrCodeValue(
       this.barCode,
       this.initials,
-      formatDate(this.dateCreated, 'yyyyMMddHHmm', 'en-us'),
-      this.settings.locationId,
-    ];
-    return valArray.join('-');
+      this.dateCreated,
+      this.settings.locationId
+    );
   }
 
   ngOnInit(): void {

src/app/models/sample.interface.ts

@@ -0,0 +1,6 @@
+export interface Sample {
+  barcode: string;
+  student_id: string;
+  date: Date;
+  location: string;
+}

src/app/navbar/navbar.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {SettingsService} from '../services/settings.service';
-import {TestingLocation} from '../interfaces/testingLocation.interface';
+import {TestingLocation} from '../models/testingLocation.interface';
 
 @Component({
   selector: 'app-navbar',

src/app/print-layout/print-layout.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {AppDefaults} from '../interfaces/appDefaults.interface';
+import {AppDefaults} from '../models/appDefaults.interface';
 import {SettingsService} from '../services/settings.service';
 
 @Component({

src/app/print/print.component.spec.ts

@@ -1,25 +1,36 @@
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
 import {ActivatedRoute, convertToParamMap} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
 import {of} from 'rxjs';
+import {ApiService} from '../services/api.service';
+import {MockEnvironment} from '../testing/environment.mock';
 
 import { PrintComponent } from './print.component';
 
 describe('PrintComponent', () => {
   let component: PrintComponent;
   let fixture: ComponentFixture<PrintComponent>;
+  let httpMock: HttpTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ PrintComponent ],
       imports: [
+        HttpClientTestingModule,
         MatButtonModule,
         MatCardModule,
         MatIconModule,
+        RouterTestingModule,
       ],
       providers: [
+        ApiService,
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
         {
           provide: ActivatedRoute,
           useValue: {queryParamMap: of(convertToParamMap({barCode: '123456789', initials: 'abc'}))}
@@ -30,6 +41,7 @@ describe('PrintComponent', () => {
   });
 
   beforeEach(() => {
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(PrintComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/print/print.component.ts

@@ -1,6 +1,11 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {MatButton} from '@angular/material/button';
 import {ActivatedRoute} from '@angular/router';
+import {createQrCodeValue} from '../_util/qrCode';
+import {AppDefaults} from '../models/appDefaults.interface';
+import {Sample} from '../models/sample.interface';
+import {ApiService} from '../services/api.service';
+import {SettingsService} from '../services/settings.service';
 
 @Component({
   selector: 'app-print',
@@ -11,17 +16,21 @@ export class PrintComponent implements AfterViewInit {
   barCode: string;
   initials: string;
   dateCreated: Date;
+  settings: AppDefaults;
   @ViewChild('saveAndPrintButton') saveAndPrintButton: MatButton;
 
   constructor(
+    private api: ApiService,
     private route: ActivatedRoute,
-    private changeDetector: ChangeDetectorRef
+    private changeDetector: ChangeDetectorRef,
+    private settingsService: SettingsService
   ) {
     this.dateCreated = new Date();
     this.route.queryParamMap.subscribe(queryParamMap => {
       this.barCode = queryParamMap.get('barCode');
       this.initials = queryParamMap.get('initials');
     });
+    this.settings = this.settingsService.getSettings();
   }
 
   ngAfterViewInit() {
@@ -30,7 +39,20 @@ export class PrintComponent implements AfterViewInit {
   }
 
   saveAndPrint() {
-    // TODO: Upload new count to backend.
-    window.print();
+    const id = createQrCodeValue(
+      this.barCode,
+      this.initials,
+      this.dateCreated,
+      this.settings.locationId
+    );
+
+    const newSample: Sample = {
+      barcode: id,
+      student_id: this.barCode,
+      date: this.dateCreated,
+      location: this.settings.locationId,
+    };
+
+    this.api.addSample(newSample).subscribe(() => window.print());
   }
 }

src/app/sample/sample.component.ts

@@ -3,7 +3,7 @@ import {FormControl, Validators} from '@angular/forms';
 import {MatButton} from '@angular/material/button';
 import {MatInput} from '@angular/material/input';
 import {Params, Router} from '@angular/router';
-import {AppDefaults} from '../interfaces/appDefaults.interface';
+import {AppDefaults} from '../models/appDefaults.interface';
 import {SettingsService} from '../services/settings.service';
 
 

src/app/services/api.service.ts

@@ -4,9 +4,9 @@ import {Inject, Injectable} from '@angular/core';
 import {Router} from '@angular/router';
 import {Observable, throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
-import {ApiError} from '../interfaces/apiError.interface';
-import {AppEnvironment} from '../interfaces/appEnvironment.interface';
-import {Sample} from '../interfaces/sample.interface';
+import {ApiError} from '../models/apiError.interface';
+import {AppEnvironment} from '../models/appEnvironment.interface';
+import {Sample} from '../models/sample.interface';
 
 
 @Injectable({
@@ -14,13 +14,14 @@ import {Sample} from '../interfaces/sample.interface';
 })
 export class ApiService {
   apiRoot: string;
+  endpoints = {
+    sample: '/sample',
+  };
 
   constructor(
     @Inject('APP_ENVIRONMENT') private environment: AppEnvironment,
     @Inject(APP_BASE_HREF) public baseHref: string,
     private httpClient: HttpClient,
-    private router: Router,
-    private location: Location,
   ) {
     this.apiRoot = environment.api;
   }
@@ -34,10 +35,10 @@ export class ApiService {
 
   /** Add new sample */
   addSample(sample: Sample): Observable<Sample> {
-    const url = this.apiRoot;
+    const url = this.apiRoot + this.endpoints.sample;
 
     return this.httpClient
-      .put<Sample>(url, sample)
+      .post<Sample>(url, sample)
       .pipe(catchError(err => this._handleError(err)));
   }
 

src/app/services/google-analytics.service.ts

@@ -2,8 +2,8 @@ import {APP_BASE_HREF} from '@angular/common';
 import {HttpRequest} from '@angular/common/http';
 import {Inject, Injectable} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
-import {ApiError} from '../interfaces/apiError.interface';
-import {AppEnvironment} from '../interfaces/appEnvironment.interface';
+import {ApiError} from '../models/apiError.interface';
+import {AppEnvironment} from '../models/appEnvironment.interface';
 
 declare var gtag;
 

src/app/services/settings.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import createClone from 'rfdc';
 import serializeJs from 'serialize-javascript';
 import {defaultOptions} from '../config/defaults';
-import {AppDefaults, AppDefaultsOptions} from '../interfaces/appDefaults.interface';
+import {AppDefaults, AppDefaultsOptions} from '../models/appDefaults.interface';
 
 
 @Injectable({

src/app/settings/settings.component.ts

@@ -2,8 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {labelLayouts} from '../config/defaults';
-import {AppDefaults} from '../interfaces/appDefaults.interface';
-import {LabelLayout} from '../interfaces/labelLayout.interface';
+import {AppDefaults} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 import {SettingsService} from '../services/settings.service';
 
 @Component({

src/app/testing/environment.mock.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {AppEnvironment} from '../interfaces/appEnvironment.interface';
+import {AppEnvironment} from '../models/appEnvironment.interface';
 
 @Injectable()
 export class MockEnvironment implements AppEnvironment {

src/environments/environment.injectable.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {AppEnvironment} from '../app/interfaces/appEnvironment.interface';
+import {AppEnvironment} from '../app/models/appEnvironment.interface';
 import {environment} from './environment.runtime';
 
 @Injectable()

src/environments/environment.runtime.ts

@@ -1,4 +1,4 @@
-import {AppEnvironment} from '../app/interfaces/appEnvironment.interface';
+import {AppEnvironment} from '../app/models/appEnvironment.interface';
 
 declare var ENV;