added default update functionality

projects/account/src/app/core/http/device.service.ts

@@ -55,7 +55,11 @@ export class DeviceService {
     }
 
     addAccountDefaults(defaultsForm: FormGroup) {
-        this.http.post<any>(defaultsUrl, defaultsForm.value).subscribe();
+        return this.http.post<any>(defaultsUrl, defaultsForm.value);
+    }
+
+    updateAccountDefaults(defaultsForm: FormGroup) {
+        return this.http.patch<any>(defaultsUrl, defaultsForm.value);
     }
 
     getAccountDefaults() {

projects/account/src/app/modules/device/device-add/device-add.component.ts

@@ -112,6 +112,6 @@ export class DeviceAddComponent implements OnInit {
     }
 
     onDefaultsSubmit() {
-        this.deviceService.addAccountDefaults(this.defaultsForm);
+        this.deviceService.addAccountDefaults(this.defaultsForm).subscribe();
     }
 }

projects/account/src/app/modules/device/device-edit/device-edit.component.html

@@ -98,7 +98,7 @@
         </account-option-buttons>
     </mat-card-content>
     <mat-card-actions align="right" *ngIf="action === 'default edit'">
-        <button mat-button>SAVE</button>
+        <button mat-button [disabled]="!deviceForm.valid" (click)="onSave()">SAVE</button>
     </mat-card-actions>
 </mat-card>
 

projects/account/src/app/modules/device/device-edit/device-edit.component.scss

@@ -6,26 +6,35 @@
 mat-card {
     @include section-card;
     max-width: 700px;
+    margin-bottom: 16px;
+    margin-top: 32px;
 
     mat-card-title {
         color: mat-color($mycroft-primary)
     }
 
-    .mat-h2 {
-        color: mat-color($mycroft-accent, A700);
-        margin-top: 32px;
-    }
-
-    mat-form-field {
-        max-width: 280px;
-    }
-
-    button {
-        @include action-button-primary;
+    mat-card-content {
         margin: 16px;
 
-        &:disabled {
-            background-color: mat-color($mycroft-accent, 200);
+        .mat-h2 {
+            color: mat-color($mycroft-accent, A700);
+            margin-top: 32px;
+        }
+
+        mat-form-field {
+            max-width: 280px;
+        }
+    }
+
+    mat-card-actions {
+        button {
+            @include action-button-primary;
+            margin-bottom: 16px;
+            margin-right: 16px;
+
+            &:disabled {
+                background-color: mat-color($mycroft-accent, 200);
+            }
         }
     }
 }

projects/account/src/app/modules/device/device-edit/device-edit.component.ts

@@ -2,13 +2,14 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
+import { AccountDefaults } from '../../../shared/models/defaults.model';
 import { City } from '../../../shared/models/city.model';
 import { Country } from '../../../shared/models/country.model';
+import { DeviceService } from '../../../core/http/device.service';
 import { GeographyService } from '../../../core/http/geography_service';
 import { OptionButtonsConfig } from '../../../shared/models/option-buttons-config.model';
 import { Region } from '../../../shared/models/region.model';
 import { Timezone } from '../../../shared/models/timezone.model';
-import { AccountDefaults } from '../../../shared/models/defaults.model';
 
 @Component({
     selector: 'account-device-edit',
@@ -26,7 +27,7 @@ export class DeviceEditComponent implements OnInit {
     public voiceOptionsConfig: OptionButtonsConfig;
     public wakeWordOptionsConfig: OptionButtonsConfig;
 
-    constructor(private geoService: GeographyService) {
+    constructor(private deviceService: DeviceService, private geoService: GeographyService) {
         this.voiceOptionsConfig = {
             options: ['British Male', 'American Female', 'American Male', 'Google Voice'],
             buttonWidth: '140px'
@@ -118,4 +119,17 @@ export class DeviceEditComponent implements OnInit {
     changeWakeWord(newValue: string) {
         this.deviceForm.patchValue({wakeWord: newValue});
     }
+
+    onSave() {
+        if (this.defaults) {
+            this.deviceService.updateAccountDefaults(this.deviceForm).subscribe(
+                () => { this.defaults = this.deviceForm.value; }
+            );
+        } else {
+            this.deviceService.addAccountDefaults(this.deviceForm).subscribe(
+                () => { this.defaults = this.deviceForm.value; }
+
+            );
+        }
+    }
 }

projects/account/src/app/modules/device/device.component.ts

@@ -28,15 +28,15 @@ export class DeviceComponent implements OnInit {
 
         this.defaultsForm = this.formBuilder.group(
             {
-                city: [null],
-                country: [null],
+                city: [this.defaults ? this.defaults.city : null],
+                country: [this.defaults ? this.defaults.country : null],
                 name: [null],
                 pairingCode: [null],
                 placement: [null],
-                region: [null],
-                timezone: [null],
-                wakeWord: [null],
-                voice: [null]
+                region: [this.defaults ? this.defaults.region : null],
+                timezone: [this.defaults ? this.defaults.timezone : null],
+                wakeWord: [this.defaults ? this.defaults.wakeWord : null],
+                voice: [this.defaults ? this.defaults.voice : null]
             }
         );
         this.preferencesForm = this.formBuilder.group(