feat: added DbxErrorWidgetService

- updated dbx-error presentation
- added ability to register error widgets

apps/demo/src/app/modules/demo/modules/app/modules/profile/container/profile.component.html

@@ -11,7 +11,7 @@
       <dbx-section header="Information" dbxAction dbxActionAutoTrigger fastTrigger dbxActionEnforceModified [dbxActionHandler]="handleUpdateProfile" hint="Change your profile information.">
         <demo-profile-form [formDisabledOnWorking]="false" dbxActionForm [dbxFormSource]="profileData$" [dbxActionFormModified]="isProfileModified"></demo-profile-form>
         <dbx-error dbxActionError></dbx-error>
-        <dbx-action-progress></dbx-action-progress>
+        <dbx-loading-progress *dbxActionIsWorking [linear]="true"></dbx-loading-progress>
         <dbx-success *dbxActionHasSuccess="3000" dbxActionSuccess>Saved Changes</dbx-success>
       </dbx-section>
     </dbx-content-box>

apps/demo/src/app/modules/doc/modules/interaction/component/error.widget.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+export const CUSTOM_TEST_ERROR_CODE = 'CUSTOM_ERROR_WITH_WIDGET';
+
+@Component({
+  template: `
+    <p>Custom widget content</p>
+  `
+})
+export class DocInteractionCustomErrorWidgetComponent {}

apps/demo/src/app/modules/doc/modules/interaction/container/error.component.html

@@ -0,0 +1,16 @@
+<dbx-content-container>
+  <doc-feature-layout header="Error" hint="The error module is used for displaying errors within the app.">
+    <!-- Examples -->
+    <doc-feature-example header="dbx-error" hint="Component that displays an error message. Expected input is a ReadableError">
+      <dbx-error [error]="readableErrorWithoutCode"></dbx-error>
+      <dbx-error [error]="readableError"></dbx-error>
+      <dbx-error [error]="longerReadableError"></dbx-error>
+      <dbx-error [error]="customTestError"></dbx-error>
+    </doc-feature-example>
+    <doc-feature-example header="dbx-error-details" hint="Component that is used by the error popover. Displays all information about an error.">
+      <dbx-error-details [error]="longerReadableError"></dbx-error-details>
+      <h4>Custom Widget</h4>
+      <dbx-error-details [error]="customTestError"></dbx-error-details>
+    </doc-feature-example>
+  </doc-feature-layout>
+</dbx-content-container>

apps/demo/src/app/modules/doc/modules/interaction/container/error.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { readableError, ReadableError, serverError } from '@dereekb/util';
+import { LOREM } from '../../shared/lorem';
+import { CUSTOM_TEST_ERROR_CODE } from '../component/error.widget.component';
+
+const TEST_ERROR_CODE = 'A_VERY_LONG_TEST_ERROR_CODE_USED_FOR_REFERENCE';
+
+@Component({
+  templateUrl: './error.component.html'
+})
+export class DocInteractionErrorComponent {
+  readonly readableErrorWithoutCode: ReadableError = { message: 'This is an error without an error code.' };
+
+  readonly readableError: ReadableError = readableError(TEST_ERROR_CODE, 'This is the example error message.');
+
+  readonly longerReadableError: ReadableError = serverError({
+    code: TEST_ERROR_CODE,
+    message: LOREM,
+    status: 200,
+    data: {
+      serverErrorDataInfo: {
+        reason: 'test_reason',
+        additional_info: 'The server tried its best.'
+      }
+    }
+  });
+
+  readonly customTestError: ReadableError = serverError({
+    code: CUSTOM_TEST_ERROR_CODE,
+    message: 'This error has a custom widget associated with it.',
+    status: 200
+  });
+}

apps/demo/src/app/modules/doc/modules/interaction/doc.interaction.module.ts

@@ -1,3 +1,4 @@
+import { CUSTOM_TEST_ERROR_CODE, DocInteractionCustomErrorWidgetComponent } from './component/error.widget.component';
 import { DocInteractionExamplePopupContentComponent } from './component/interaction.popup.content.component';
 import { DocInteractionExamplePopupComponent } from './component/interaction.popup.component';
 import { DocInteractionTestFilterPresetFilterComponent } from './component/filter.preset.component';
@@ -20,6 +21,8 @@ import { DocInteractionExamplePopoverComponent } from './component/interaction.p
 import { DocInteractionExamplePopoverContentComponent } from './component/interaction.popover.content.component';
 import { DocInteractionButtonComponent } from './container/button.component';
 import { DocInteractionTestFilterPresetMenuComponent } from './component/filter.preset.menu.component';
+import { DocInteractionErrorComponent } from './container/error.component';
+import { DbxErrorWidgetService } from '@dereekb/dbx-web';
 
 @NgModule({
   imports: [
@@ -40,15 +43,24 @@ import { DocInteractionTestFilterPresetMenuComponent } from './component/filter.
     DocInteractionExamplePopoverContentComponent,
     DocInteractionExamplePopupComponent,
     DocInteractionExamplePopupContentComponent,
+    DocInteractionCustomErrorWidgetComponent,
     // container
     DocInteractionLayoutComponent,
     DocInteractionHomeComponent,
     DocInteractionButtonComponent,
+    DocInteractionErrorComponent,
     DocInteractionDialogComponent,
     DocInteractionFilterComponent,
     DocInteractionPopupComponent,
     DocInteractionPopoverComponent,
     DocInteractionPromptComponent
   ]
 })
-export class DocInteractionModule {}
+export class DocInteractionModule {
+  constructor(readonly dbxErrorWidgetService: DbxErrorWidgetService) {
+    this.dbxErrorWidgetService.register({
+      code: CUSTOM_TEST_ERROR_CODE,
+      componentClass: DocInteractionCustomErrorWidgetComponent
+    });
+  }
+}

apps/demo/src/app/modules/doc/modules/interaction/doc.interaction.router.ts

@@ -7,6 +7,7 @@ import { DocInteractionPopupComponent } from './container/popup.component';
 import { DocInteractionPromptComponent } from './container/prompt.component';
 import { DocInteractionFilterComponent } from './container/filter.component';
 import { DocInteractionButtonComponent } from './container/button.component';
+import { DocInteractionErrorComponent } from './container/error.component';
 
 export const layoutState: Ng2StateDeclaration = {
   url: '/interaction',
@@ -27,6 +28,12 @@ export const docInteractionButtonState: Ng2StateDeclaration = {
   component: DocInteractionButtonComponent
 };
 
+export const docInteractionErrorState: Ng2StateDeclaration = {
+  url: '/error',
+  name: 'doc.interaction.error',
+  component: DocInteractionErrorComponent
+};
+
 export const docInteractionDialogState: Ng2StateDeclaration = {
   url: '/dialog',
   name: 'doc.interaction.dialog',
@@ -57,4 +64,15 @@ export const docInteractionPopoverState: Ng2StateDeclaration = {
   component: DocInteractionPopoverComponent
 };
 
-export const STATES: Ng2StateDeclaration[] = [layoutState, homeState, docInteractionButtonState, docInteractionDialogState, docInteractionFilterState, docInteractionPromptState, docInteractionPopupState, docInteractionPopoverState];
+export const STATES: Ng2StateDeclaration[] = [
+  //
+  layoutState,
+  homeState,
+  docInteractionButtonState,
+  docInteractionErrorState,
+  docInteractionDialogState,
+  docInteractionFilterState,
+  docInteractionPromptState,
+  docInteractionPopupState,
+  docInteractionPopoverState
+];

apps/demo/src/app/modules/doc/modules/interaction/doc.interaction.ts

@@ -5,6 +5,12 @@ export const DOC_INTERACTION_ROUTES = [
     detail: 'dbx-button',
     ref: 'doc.interaction.button'
   },
+  {
+    icon: 'warning',
+    title: 'Error',
+    detail: 'dbx-error',
+    ref: 'doc.interaction.error'
+  },
   {
     icon: 'call_to_action',
     title: 'Dialog',

apps/demo/src/app/modules/doc/modules/text/container/layout.component.html

@@ -9,6 +9,12 @@
         <doc-feature-example header="dbx-text-chips">
           <dbx-text-chips [chips]="chips"></dbx-text-chips>
         </doc-feature-example>
+        <h4>Layouts</h4>
+        <doc-feature-example header=".dbx-label-block">
+          <dbx-label-block header="A custom label">
+            <p>{{ lorem }}</p>
+          </dbx-label-block>
+        </doc-feature-example>
         <h4>Colors</h4>
         <doc-feature-example header=".dbx-hint">
           <dbx-hint>{{ lorem }}</dbx-hint>

packages/dbx-web/src/lib/action/action.module.ts

@@ -9,12 +9,10 @@ import { DbxActionKeyTriggerDirective } from './key.trigger.directive';
 import { DbxCoreActionModule } from '@dereekb/dbx-core';
 import { DbxActionConfirmDirective } from './action.confirm.directive';
 import { DbxPromptModule } from '../interaction/prompt/prompt.module';
-import { DbxLoadingModule } from '../loading';
-import { DbxActionProgressComponent } from './action.progress.component';
 
 @NgModule({
-  imports: [CommonModule, DbxCoreActionModule, DbxButtonModule, DbxLoadingModule, MatSnackBarModule, MatDialogModule, MatButtonModule, DbxPromptModule],
-  declarations: [DbxActionKeyTriggerDirective, DbxActionConfirmDirective, DbxActionProgressComponent],
-  exports: [DbxCoreActionModule, DbxActionKeyTriggerDirective, DbxActionConfirmDirective, DbxActionProgressComponent]
+  imports: [CommonModule, DbxCoreActionModule, DbxButtonModule, MatSnackBarModule, MatDialogModule, MatButtonModule, DbxPromptModule],
+  declarations: [DbxActionKeyTriggerDirective, DbxActionConfirmDirective],
+  exports: [DbxCoreActionModule, DbxActionKeyTriggerDirective, DbxActionConfirmDirective]
 })
 export class DbxActionModule {}

packages/dbx-web/src/lib/action/index.ts

@@ -3,4 +3,3 @@ export * from './transition';
 export * from './action.confirm.directive';
 export * from './action.module';
 export * from './key.trigger.directive';
-export * from './action.progress.component';

packages/dbx-web/src/lib/action/snackbar/action.snackbar.module.ts

@@ -3,13 +3,12 @@ import { NgModule } from '@angular/core';
 import { DbxCoreActionModule } from '@dereekb/dbx-core';
 import { DbxButtonModule } from '../../button';
 import { DbxPromptModule } from '../../interaction';
-import { DbxReadableErrorModule } from '../../error';
 import { DbxActionSnackbarDirective } from './action.snackbar.directive';
 import { DbxActionSnackbarComponent } from './action.snackbar.component';
 import { DbxStyleLayoutModule } from '../../layout/style/style.layout.module';
 
 @NgModule({
-  imports: [CommonModule, DbxStyleLayoutModule, DbxCoreActionModule, DbxPromptModule, DbxButtonModule, DbxReadableErrorModule],
+  imports: [CommonModule, DbxStyleLayoutModule, DbxCoreActionModule, DbxPromptModule, DbxButtonModule],
   declarations: [DbxActionSnackbarComponent, DbxActionSnackbarDirective],
   exports: [DbxActionSnackbarComponent, DbxActionSnackbarDirective]
 })

packages/dbx-web/src/lib/error/_error.scss

@@ -4,6 +4,20 @@
 
 // MARK: Mixin
 @mixin core() {
+  .dbx-error {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .dbx-error-message {
+      margin-left: 12px;
+    }
+  }
+
+  .dbx-error-default-error-widget {
+    overflow: hidden;
+    box-sizing: border-box;
+  }
 }
 
 @mixin color($theme-config) {

packages/dbx-web/src/lib/error/default.error.widget.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ServerError, ServerErrorResponseData } from '@dereekb/util';
+import { AbstractDbxErrorWidgetComponent } from './error.widget.directive';
+
+@Component({
+  template: `
+    <dbx-label-block header="Error Code">{{ code }}</dbx-label-block>
+    <dbx-label-block header="Error Data" *ngIf="data">
+      <p class="dbx-json">{{ serverErrorData | json }}</p>
+    </dbx-label-block>
+  `,
+  host: {
+    class: 'd-block dbx-error-default-error-widget dbx-content-container'
+  }
+})
+export class DbxErrorDefaultErrorWidgetComponent extends AbstractDbxErrorWidgetComponent {
+  get serverErrorData(): ServerErrorResponseData | undefined {
+    return (this.data as ServerError).data;
+  }
+}

packages/dbx-web/src/lib/error/error.component.html

@@ -1,5 +1,4 @@
 <div *ngIf="error" class="dbx-error dbx-warn">
-  <h4>An error occured.</h4>
-  <!-- <p class="dbx-error-code" *ngIf="errorData.code">{{ errorData.code }}</p> -->
-  <p class="dbx-error-message" *ngIf="message">{{ message }}</p>
+  <button [disabled]="isDefaultError" #buttonPopoverOrigin mat-icon-button class="dbx-error-button" (click)="openErrorPopover()"><mat-icon>error</mat-icon></button>
+  <span class="dbx-error-message" *ngIf="message">{{ message }}</span>
 </div>

packages/dbx-web/src/lib/error/error.component.ts

@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
-import { Maybe, ErrorInput, toReadableError, ReadableError } from '@dereekb/util';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Maybe, ErrorInput, toReadableError, ReadableError, ReadableErrorWithCode, isDefaultReadableError } from '@dereekb/util';
+import { DbxPopoverService } from '../interaction/popover/popover.service';
+import { DbxErrorPopoverComponent } from './error.popover.component';
 
 /**
  * Basic error component.
@@ -9,7 +11,12 @@ import { Maybe, ErrorInput, toReadableError, ReadableError } from '@dereekb/util
   templateUrl: './error.component.html'
 })
 export class DbxReadableErrorComponent {
-  private _error?: Maybe<ReadableError>;
+  @ViewChild('buttonPopoverOrigin', { read: ElementRef })
+  buttonPopoverOrigin!: ElementRef;
+
+  private _error?: Maybe<ReadableErrorWithCode>;
+
+  constructor(readonly popoverService: DbxPopoverService) {}
 
   get error(): Maybe<ReadableError> {
     return this._error;
@@ -20,7 +27,20 @@ export class DbxReadableErrorComponent {
     this._error = toReadableError(error);
   }
 
+  get isDefaultError() {
+    return isDefaultReadableError(this._error);
+  }
+
   get message(): Maybe<string> {
     return this._error?.message;
   }
+
+  openErrorPopover() {
+    if (this.error != null) {
+      DbxErrorPopoverComponent.openPopover(this.popoverService, {
+        origin: this.buttonPopoverOrigin,
+        error: this.error
+      });
+    }
+  }
 }

packages/dbx-web/src/lib/error/error.details.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Maybe, ReadableError } from '@dereekb/util';
+
+@Component({
+  selector: 'dbx-error-details',
+  template: `
+    <dbx-error-widget-view [error]="error"></dbx-error-widget-view>
+  `,
+  host: {
+    class: 'dbx-block dbx-error-details'
+  }
+})
+export class DbxErrorDetailsComponent {
+  @Input()
+  error?: Maybe<ReadableError>;
+}

packages/dbx-web/src/lib/error/error.module.ts

@@ -1,12 +1,32 @@
+import { MatIconModule } from '@angular/material/icon';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DbxReadableErrorComponent } from './error.component';
 import { DbxLoadingErrorDirective } from './error.loading.directive';
 import { DbxActionErrorDirective } from './error.action.directive';
+import { MatButtonModule } from '@angular/material/button';
+import { DbxErrorPopoverComponent } from './error.popover.component';
+import { DbxErrorDetailsComponent } from './error.details.component';
+import { DbxPopoverInteractionContentModule } from '../interaction/popover/popover.content.module';
+import { DbxErrorWidgetViewComponent } from './error.widget.component';
+import { DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import { DbxErrorDefaultErrorWidgetComponent } from './default.error.widget.component';
+import { DbxTextModule } from '../layout/text/text.module';
+
+const declarations = [
+  //
+  DbxReadableErrorComponent,
+  DbxLoadingErrorDirective,
+  DbxActionErrorDirective,
+  DbxErrorPopoverComponent,
+  DbxErrorDetailsComponent,
+  DbxErrorWidgetViewComponent,
+  DbxErrorDefaultErrorWidgetComponent
+];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [DbxReadableErrorComponent, DbxLoadingErrorDirective, DbxActionErrorDirective],
-  exports: [DbxReadableErrorComponent, DbxLoadingErrorDirective, DbxActionErrorDirective]
+  imports: [CommonModule, DbxTextModule, DbxInjectionComponentModule, DbxPopoverInteractionContentModule, MatButtonModule, MatIconModule],
+  declarations,
+  exports: declarations
 })
 export class DbxReadableErrorModule {}