From 13a00d7cc46798c8b6fd2eef61323f5817f50ca0 Mon Sep 17 00:00:00 2001
From: Saithis <saithis88@gmail.com>
Date: Mon, 12 Aug 2019 23:00:04 +0200
Subject: [PATCH] feat: error-card

---
 projects/components/error-card/index.ts       |  3 ++
 projects/components/error-card/package.json   |  7 ++++
 projects/components/error-card/public_api.ts  |  2 +
 .../error-card/src/error-card.component.ts    | 37 +++++++++++++++++++
 .../error-card/src/error-card.module.ts       | 12 ++++++
 .../components/form/src/form.component.ts     | 30 +++------------
 projects/components/form/src/form.module.ts   |  2 +
 7 files changed, 69 insertions(+), 24 deletions(-)
 create mode 100644 projects/components/error-card/index.ts
 create mode 100644 projects/components/error-card/package.json
 create mode 100644 projects/components/error-card/public_api.ts
 create mode 100644 projects/components/error-card/src/error-card.component.ts
 create mode 100644 projects/components/error-card/src/error-card.module.ts

diff --git a/projects/components/error-card/index.ts b/projects/components/error-card/index.ts
new file mode 100644
index 00000000..c74f953a
--- /dev/null
+++ b/projects/components/error-card/index.ts
@@ -0,0 +1,3 @@
+// export what ./public_api exports so we can import with the lib name like this:
+// import { ModuleA } from 'libname'
+export * from './public_api';
diff --git a/projects/components/error-card/package.json b/projects/components/error-card/package.json
new file mode 100644
index 00000000..dedb72ce
--- /dev/null
+++ b/projects/components/error-card/package.json
@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}
diff --git a/projects/components/error-card/public_api.ts b/projects/components/error-card/public_api.ts
new file mode 100644
index 00000000..d76e47fe
--- /dev/null
+++ b/projects/components/error-card/public_api.ts
@@ -0,0 +1,2 @@
+export { PsErrorCardComponent } from './src/error-card.component';
+export { PsErrorCardModule } from './src/error-card.module';
diff --git a/projects/components/error-card/src/error-card.component.ts b/projects/components/error-card/src/error-card.component.ts
new file mode 100644
index 00000000..3756708b
--- /dev/null
+++ b/projects/components/error-card/src/error-card.component.ts
@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'ps-error-card',
+  template: `
+    <mat-card class="ps-error-card" [class.ps-error-card--center]="center">
+      <mat-icon *ngIf="showIcon" class="ps-error-card__icon">sentiment_very_dissatisfied</mat-icon>
+      <span>{{ errorMessage }}</span>
+    </mat-card>
+  `,
+  styles: [
+    `
+      .ps-error-card {
+        color: var(--ps-error);
+      }
+
+      .ps-error-card--center {
+        display: grid;
+        justify-items: center;
+      }
+
+      .ps-error-card__icon {
+        color: var(--ps-error);
+        font-size: 72px;
+        height: 72px;
+        width: 72px;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PsErrorCardComponent {
+  @Input() public showIcon = true;
+  @Input() public errorMessage: string;
+  @Input() public center = false;
+}
diff --git a/projects/components/error-card/src/error-card.module.ts b/projects/components/error-card/src/error-card.module.ts
new file mode 100644
index 00000000..9c1dd391
--- /dev/null
+++ b/projects/components/error-card/src/error-card.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { PsErrorCardComponent } from './error-card.component';
+
+@NgModule({
+  declarations: [PsErrorCardComponent],
+  imports: [CommonModule, MatCardModule, MatIconModule],
+  exports: [PsErrorCardComponent],
+})
+export class PsErrorCardModule {}
diff --git a/projects/components/form/src/form.component.ts b/projects/components/form/src/form.component.ts
index aab3e140..a013087d 100644
--- a/projects/components/form/src/form.component.ts
+++ b/projects/components/form/src/form.component.ts
@@ -62,14 +62,12 @@ export class PsFormCancelEvent extends PsFormEvent {}
             <ng-content></ng-content>
           </ps-block-ui>
 
-          <mat-card *ngIf="hasLoadError" class="ps-form__error-container ps-form__error-container--center">
-            <mat-icon class="ps-form__error-icon">sentiment_very_dissatisfied</mat-icon>
-            <span>{{ errorMessage }}</span>
-          </mat-card>
-
-          <mat-card *ngIf="hasSaveError" class="ps-form__error-container">
-            <span>{{ errorMessage }}</span>
-          </mat-card>
+          <ps-error-card
+            *ngIf="hasLoadError || hasSaveError"
+            [errorMessage]="errorMessage"
+            [showIcon]="hasLoadError"
+            [center]="hasLoadError"
+          ></ps-error-card>
 
           <mat-card *ngIf="hasLoadError" class="ps-form__error-actions">
             <button mat-stroked-button type="button" (click)="onCancel()">
@@ -87,22 +85,6 @@ export class PsFormCancelEvent extends PsFormEvent {}
         grid-gap: 1em;
       }
 
-      .ps-form__error-container {
-        color: var(--ps-error);
-      }
-
-      .ps-form__error-container--center {
-        display: grid;
-        justify-items: center;
-      }
-
-      .ps-form__error-icon {
-        color: var(--ps-error);
-        font-size: 72px;
-        height: 72px;
-        width: 72px;
-      }
-
       .ps-form__error-actions {
         text-align: right;
       }
diff --git a/projects/components/form/src/form.module.ts b/projects/components/form/src/form.module.ts
index ae998737..243df5aa 100644
--- a/projects/components/form/src/form.module.ts
+++ b/projects/components/form/src/form.module.ts
@@ -6,6 +6,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { PsBlockUiModule } from '@prosoft/components/block-ui';
+import { PsErrorCardModule } from '@prosoft/components/error-card';
 import { PsSavebarModule } from '@prosoft/components/savebar';
 import { PsFormActionService } from './form-action.service';
 import { PsFormComponent } from './form.component';
@@ -23,6 +24,7 @@ import { PsFormComponent } from './form.component';
 
     PsBlockUiModule,
     PsSavebarModule,
+    PsErrorCardModule,
   ],
   exports: [PsFormComponent],
 })