Show error at the bottom sticked to the footer

app/components/base/form/create-form/create-form.html

@@ -6,13 +6,20 @@
         <h1>{{currentPage.title}}</h1>
         <p>{{currentPage.subtitle}}</p>
     </div>
-    <bl-server-error [error]="error"></bl-server-error>
     <form novalidate (keyup.enter)="closePageOrSubmit()">
         <template [ngTemplateOutlet]="currentPage.content"></template>
     </form>
     <div class="loading-overlay" *ngIf="loading"></div>
 </div>
+<div class="form-server-error" *ngIf="showError">
+    <bl-server-error [error]="error"></bl-server-error>
+</div>
 <div class="form-footer">
+    <div class="toggle-error-btn" *ngIf="error">
+        <button md-icon-button color="warn" (click)="toggleShowError()" mdTooltip="There was an error submitting this form" mdTooltipPosition="above">
+            <md-icon fontIcon="fa-exclamation-triangle"></md-icon>
+        </button>
+    </div>
     <div class="summary"></div>
     <div class="form-buttons">
         <div *ngIf="isMainWindow">

app/components/base/form/form-base.ts

@@ -40,6 +40,7 @@ export class FormBase {
 
     public loading = false;
     public error: ServerError = null;
+    public showError = false;
 
     @autobind()
     public performAction(): Observable<any> {
@@ -49,10 +50,12 @@ export class FormBase {
             next: () => {
                 this.loading = false;
                 this.error = null;
+                this.showError = false;
             },
             error: (e: ServerError) => {
                 this.loading = false;
                 this.error = e;
+                this.showError = true;
             },
         });
         return obs;
@@ -84,4 +87,8 @@ export class FormBase {
             this.sidebarRef.destroy();
         }
     }
+
+    public toggleShowError() {
+        this.showError = !this.showError;
+    }
 }

app/styles/base/forms.scss

@@ -215,6 +215,13 @@ bl-create-form {
 
     }
 
+    > .form-server-error {
+        position: absolute;
+        bottom: $footer-height;
+        width: 100%;
+        z-index: 100;
+    }
+
     > .form-footer {
         height: $footer-height;
         box-shadow: 0 0 40px -10px #a5a5a5;
@@ -223,6 +230,12 @@ bl-create-form {
         display: flex;
         align-items: center;
 
+        > .toggle-error-btn {
+            button {
+                font-size: 26px;
+            }
+        }
+
         > .summary {
             margin: 0 5px;
             flex: 1;

app/styles/base/server-error.scss

@@ -3,17 +3,12 @@ bl-server-error {
 
     &.error-in-list {
         margin: 10px 0;
-
-        > .error-banner {
-            border-radius: 0;
-        }
     }
 }
 
 .error-banner {
     background: $red;
     color: $whiteSmoke;
-    border-radius: 4px;
     > .content {
         padding: 10px;
     }

test/app/components/base/form/create-form/create-form.spec.ts

@@ -71,8 +71,9 @@ export class FormTestComponent {
 
 describe("CreateFormComponent", () => {
     let fixture: ComponentFixture<FormTestComponent>;
-    let component: FormTestComponent;
+    let testComponent: FormTestComponent;
     let de: DebugElement;
+    let component: CreateFormComponent;
     let createFormElement: DebugElement;
     let addButton: DebugElement;
     let addAndCloseButton: DebugElement;
@@ -100,10 +101,11 @@ describe("CreateFormComponent", () => {
 
         TestBed.compileComponents();
         fixture = TestBed.createComponent(FormTestComponent);
-        component = fixture.componentInstance;
+        testComponent = fixture.componentInstance;
         fixture.detectChanges();
-        createFormElement = fixture.debugElement.query(By.css("bl-create-form"));
         de = fixture.debugElement;
+        createFormElement = de.query(By.css("bl-create-form"));
+        component = createFormElement.componentInstance;
 
         // Get the buttons
         addButton = createFormElement.query(By.css("bl-submit-btn.add"));
@@ -176,6 +178,7 @@ describe("CreateFormComponent", () => {
         });
 
         it("should show an error when submit return error", () => {
+            expect(component.showError).toBe(true);
             expect(fixture.componentInstance.sidebarRef.destroy).not.toHaveBeenCalled();
             const error = getErrorElement();
             expect(error).not.toBe(null);
@@ -197,6 +200,27 @@ describe("CreateFormComponent", () => {
             expect(error.nativeElement.textContent).toContain("2016-12-08T18");
             expect(true).toBe(true);
         });
+
+        it("should toggle the error when clicking the warning button", () => {
+            const toggleBtn = de.query(By.css(".toggle-error-btn > button"));
+            expect(toggleBtn).not.toBeFalsy();
+
+            // Toggle hidden
+            click(toggleBtn);
+            fixture.detectChanges();
+
+            expect(component.showError).toBe(false);
+            let error = getErrorElement();
+            expect(error).toBe(null);
+
+            // Toggle visible again
+            click(toggleBtn);
+            fixture.detectChanges();
+
+            expect(component.showError).toBe(true);
+            error = getErrorElement();
+            expect(error).not.toBe(null);
+        });
     });
 
     it("Should have 2 sections", () => {
@@ -259,7 +283,7 @@ describe("CreateFormComponent", () => {
                 expect(de.nativeElement.textContent).not.toContain("Nested page title");
 
                 expect(pickerEl.nativeElement.textContent).toContain("Pick something");
-                expect(component.form.value.pickedValue).toBe("");
+                expect(testComponent.form.value.pickedValue).toBe("");
             });
 
             it("click select should close the page and set value", () => {
@@ -271,7 +295,7 @@ describe("CreateFormComponent", () => {
                 expect(de.nativeElement.textContent).not.toContain("Nested page title");
 
                 expect(pickerEl.nativeElement.textContent).toContain("Got something");
-                expect(component.form.value.pickedValue).toBe("Some");
+                expect(testComponent.form.value.pickedValue).toBe("Some");
             });
         });
     });