feat: dbxActionDialogDirective

dereekb · Mar 17, 2022 · 63fb871 · 63fb871
1 parent a808ac9
commit 63fb871
Show file tree

Hide file tree

Showing 14 changed files with 169 additions and 42 deletions.
diff --git a/packages/dbx-core/src/lib/action/directive/state/action.value.trigger.directive.ts b/packages/dbx-core/src/lib/action/directive/state/action.value.trigger.directive.ts
@@ -1,4 +1,4 @@
-import { Directive } from "@angular/core";
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from "@angular/core";
 import { IsModifiedFunction, SubscriptionObject } from "@dereekb/rxjs";
 import { Maybe } from "@dereekb/util";
 import { DbxActionContextStoreSourceInstance } from "../../action.store.source";
@@ -50,3 +50,31 @@ export abstract class AbstractDbxActionValueOnTriggerDirective<T> {
   }
 
 }
+
+/**
+ * Action directive that is used to trigger/display a popover, then watches that popover for a value.
+ */
+@Directive({
+  exportAs: 'dbxActionValueOnTrigger',
+  selector: '[dbxActionValueOnTrigger]'
+})
+export class DbxActionValueTriggerDirective<T = object> extends AbstractDbxActionValueOnTriggerDirective<T> implements OnInit, OnDestroy {
+
+  @Input('dbxActionValueOnTrigger')
+  set dbxActionValueOnTrigger(dbxActionValueTrigger: Maybe<DbxActionValueOnTriggerFunction<T>>) {
+    this.valueGetter = dbxActionValueTrigger;
+  }
+
+  @Input()
+  set dbxActionValueTriggerModified(isModifiedFunction: Maybe<IsModifiedFunction>) {
+    this.isModifiedFunction = isModifiedFunction;
+  }
+
+  constructor(
+    readonly elementRef: ElementRef,
+    source: DbxActionContextStoreSourceInstance<T, any>
+  ) {
+    super(source);
+  }
+
+}
diff --git a/packages/dbx-core/src/lib/action/directive/state/action.value.trigger.instance.ts b/packages/dbx-core/src/lib/action/directive/state/action.value.trigger.instance.ts
@@ -6,7 +6,7 @@ import { DbxActionContextStoreSourceInstance } from '../../action.store.source';
 /**
  * DbxActionValueOnTriggerInstance function. Returns an ObervableGetter that returns a value.
  */
-export type DbxActionValueOnTriggerFunction<T> = () => ObservableGetter<T>;
+export type DbxActionValueOnTriggerFunction<T> = () => ObservableGetter<Maybe<T>>;
 
 export interface DbxActionValueOnTriggerResult<T = any> {
   value?: Maybe<T>;

diff --git a/packages/dbx-web/src/lib/interaction/dialog/abstract.dialog.directive.ts b/packages/dbx-web/src/lib/interaction/dialog/abstract.dialog.directive.ts
@@ -20,6 +20,10 @@ export abstract class AbstractDialogDirective<R = any, D = any, T = any> extends
     this.close();
   }
 
+  returnValue(value?: R) {
+    this.close(value);
+  }
+
   close(value?: R) {
     this.dialogRef.close(value);
   }

diff --git a/packages/dbx-web/src/lib/interaction/dialog/dialog.action.directive.ts b/packages/dbx-web/src/lib/interaction/dialog/dialog.action.directive.ts
@@ -0,0 +1,46 @@
+import { first, Observable } from 'rxjs';
+import { Directive, OnInit, OnDestroy, Input, ElementRef } from '@angular/core';
+import { DbxActionContextStoreSourceInstance, AbstractDbxActionValueOnTriggerDirective } from '@dereekb/dbx-core';
+import { IsModifiedFunction } from '@dereekb/rxjs';
+import { Maybe } from '@dereekb/util';
+import { MatDialogRef } from '@angular/material/dialog';
+
+export type DbxActionDialogFunction<T = any> = () => MatDialogRef<any, Maybe<T>>;
+
+/**
+ * Action directive that is used to trigger/display a dialog, then watches that dialog for a value.
+ */
+@Directive({
+  exportAs: 'dbxActionDialog',
+  selector: '[dbxActionDialog]'
+})
+export class DbxActionDialogDirective<T = any> extends AbstractDbxActionValueOnTriggerDirective<T> implements OnInit, OnDestroy {
+
+  @Input('dbxActionDialog')
+  fn?: DbxActionDialogFunction<T>;
+
+  @Input()
+  set dbxActionDialogModified(isModifiedFunction: Maybe<IsModifiedFunction>) {
+    this.isModifiedFunction = isModifiedFunction;
+  }
+
+  constructor(
+    readonly elementRef: ElementRef,
+    source: DbxActionContextStoreSourceInstance<T, any>
+  ) {
+    super(source, () => this._getDataFromDialog());
+  }
+
+  protected _getDataFromDialog(): Observable<Maybe<T>> {
+    return this._makeDialogRef().afterClosed().pipe(first());
+  }
+
+  protected _makeDialogRef(): MatDialogRef<any, Maybe<T>> {
+    if (!this.fn) {
+      throw new Error('dbxActionDialog has no dialog function provided to it.');
+    }
+
+    return this.fn();
+  }
+
+}
diff --git a/packages/dbx-web/src/lib/interaction/dialog/dialog.module.ts b/packages/dbx-web/src/lib/interaction/dialog/dialog.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { DbxDialogContentDirective } from './dialog.content.component';
 import { DbxStyleLayoutModule } from '../../layout/style/style.layout.module';
+import { DbxActionDialogDirective } from './dialog.action.directive';
 
 /**
  * Module for block components.
@@ -13,9 +14,11 @@ import { DbxStyleLayoutModule } from '../../layout/style/style.layout.module';
   ],
   declarations: [
     DbxDialogContentDirective,
+    DbxActionDialogDirective
   ],
   exports: [
-    DbxDialogContentDirective
+    DbxDialogContentDirective,
+    DbxActionDialogDirective
   ]
 })
 export class DbxDialogInteractionModule { }
diff --git a/packages/dbx-web/src/lib/interaction/dialog/index.ts b/packages/dbx-web/src/lib/interaction/dialog/index.ts
@@ -1,3 +1,4 @@
 export * from './abstract.dialog.directive';
 export * from './dialog.content.component';
+export * from './dialog.action.directive';
 export * from './dialog.module';
diff --git a/packages/dbx-web/src/lib/interaction/popover/popover.action.directive.ts b/packages/dbx-web/src/lib/interaction/popover/popover.action.directive.ts
@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import { first, Observable } from 'rxjs';
 import { Directive, OnInit, OnDestroy, Input, ElementRef } from '@angular/core';
 import { NgPopoverRef } from 'ng-overlay-container';
 import { DbxActionContextStoreSourceInstance, AbstractDbxActionValueOnTriggerDirective } from '@dereekb/dbx-core';
@@ -10,7 +10,7 @@ export interface DbxActionPopoverFunctionParams {
   origin: ElementRef;
 }
 
-export type DbxActionPopoverFunction<T = object> = (params: DbxActionPopoverFunctionParams) => NgPopoverRef<any, T>;
+export type DbxActionPopoverFunction<T = any> = (params: DbxActionPopoverFunctionParams) => NgPopoverRef<any, Maybe<T>>;
 
 /**
  * Action directive that is used to trigger/display a popover, then watches that popover for a value.
@@ -19,7 +19,7 @@ export type DbxActionPopoverFunction<T = object> = (params: DbxActionPopoverFunc
   exportAs: 'dbxActionPopover',
   selector: '[dbxActionPopover]'
 })
-export class DbxActionPopoverDirective<T = object> extends AbstractDbxActionValueOnTriggerDirective<T> implements OnInit, OnDestroy {
+export class DbxActionPopoverDirective<T = any> extends AbstractDbxActionValueOnTriggerDirective<T> implements OnInit, OnDestroy {
 
   @Input('dbxActionPopover')
   fn?: DbxActionPopoverFunction<T>;
@@ -36,11 +36,11 @@ export class DbxActionPopoverDirective<T = object> extends AbstractDbxActionValu
     super(source, () => this._getDataFromPopover());
   }
 
-  protected _getDataFromPopover(): Observable<T> {
-    return this._makePopoverRef().afterClosed$.pipe(map(x => x.data));
+  protected _getDataFromPopover(): Observable<Maybe<T>> {
+    return this._makePopoverRef().afterClosed$.pipe(first(), map(x => x.data));
   }
 
-  protected _makePopoverRef(): NgPopoverRef<any, T> {
+  protected _makePopoverRef(): NgPopoverRef<any, Maybe<T>> {
     const origin = this.elementRef;
 
     if (!this.fn) {

diff --git a/...ages/demo/src/app/modules/doc/modules/action/component/action.example.dialog.component.ts b/...ages/demo/src/app/modules/doc/modules/action/component/action.example.dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { AbstractDialogDirective } from '@dereekb/dbx-web';
+
+export const DEFAULT_INTERACTION_POPUP_COMPOSER_POPUP_KEY = 'popup';
+
+@Component({
+  template: `
+  <dbx-dialog-content>
+    <p>Pick a value.</p>
+    <div>
+      <button mat-raised-button (click)="close(100)">100</button>
+      <dbx-button-spacer></dbx-button-spacer>
+      <button mat-raised-button (click)="close(1000)">1000</button>
+      <dbx-button-spacer></dbx-button-spacer>
+      <button mat-raised-button (click)="close()">Cancel</button>
+    </div>
+  </dbx-dialog-content>
+  `
+})
+export class DocActionExampleDialogComponent extends AbstractDialogDirective {
+
+  static openDialog(matDialog: MatDialog): MatDialogRef<DocActionExampleDialogComponent, boolean> {
+    const dialogRef = matDialog.open(DocActionExampleDialogComponent, {});
+    return dialogRef;
+  }
+
+}
diff --git a/...emo/src/app/modules/doc/modules/action/component/action.example.popover.form.component.ts b/...emo/src/app/modules/doc/modules/action/component/action.example.popover.form.component.ts
@@ -15,10 +15,12 @@ export interface DocInteractionPopoverConfig {
   template: `
   <dbx-popover-content>
     <dbx-popover-header icon="home" header="Header"></dbx-popover-header>
-    <dbx-action [dbxActionHandler]="handleSubmitForm">
-      <doc-action-form-example-form dbxActionForm></doc-action-form-example-form>
-      <dbx-button dbxActionButton text="Submit"></dbx-button>
-    </dbx-action>
+    <dbx-content-container style="margin-top: 12px">
+      <dbx-action [dbxActionHandler]="handleSubmitForm">
+        <doc-action-form-example-form dbxActionForm></doc-action-form-example-form>
+        <dbx-button dbxActionButton text="Submit"></dbx-button>
+      </dbx-action>
+    </dbx-content-container>
   </dbx-popover-content>
   `
 })

diff --git a/packages/demo/src/app/modules/doc/modules/action/container/interaction.component.html b/packages/demo/src/app/modules/doc/modules/action/container/interaction.component.html
@@ -48,18 +48,23 @@ <h4>Undo</h4>
     </doc-feature-example>
 
     <h3>Popover</h3>
-    <doc-feature-example header="dbxActionPopover"
-      hint="Used to display a popover action when trigger is called.">
+    <doc-feature-example header="dbxActionPopover" hint="Used to display a popover action when trigger is called.">
 
-      <h4>Undo</h4>
-      <p>The snackbar is has the capability to add an additional action to the state. For the pre-made available states,
-        this is the undo function.</p>
-      <p>Undo Value: {{ undoValue }}</p>
       <dbx-action-example-tools dbxAction [dbxActionPopover]="handleOpenPopover" [dbxActionHandler]="handleAction">
         <dbx-button dbxActionButton text="Open Popover Action"></dbx-button>
       </dbx-action-example-tools>
 
     </doc-feature-example>
 
+    <h3>Dialog</h3>
+    <doc-feature-example header="dbxActionDialog"
+      hint="Used to display a dialog when trigger is called, and passes the return value.">
+
+      <dbx-action-example-tools dbxAction [dbxActionDialog]="handleOpenDialog" [dbxActionHandler]="handleAction">
+        <dbx-button dbxActionButton text="Open Dialog Action"></dbx-button>
+      </dbx-action-example-tools>
+
+    </doc-feature-example>
+
   </doc-feature-layout>
 </dbx-content-container>
diff --git a/packages/demo/src/app/modules/doc/modules/action/container/interaction.component.ts b/packages/demo/src/app/modules/doc/modules/action/container/interaction.component.ts
@@ -1,9 +1,11 @@
-import { DbxPopoverService } from '@dereekb/dbx-web';
+import { MatDialog } from '@angular/material/dialog';
+import { DbxActionDialogFunction, DbxPopoverService } from '@dereekb/dbx-web';
 import { DbxActionPopoverFunction, DbxActionSnackbarGeneratorUndoInput } from '@dereekb/dbx-web';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { DbxActionContextMachine, DbxActionContextSourceReference, HandleActionFunction, WorkHandlerContext, safeDetectChanges } from '@dereekb/dbx-core';
 import { of, delay, BehaviorSubject, tap } from 'rxjs';
 import { DocActionExamplePopoverComponent } from '../component/action.example.popover.form.component';
+import { DocActionExampleDialogComponent } from '../component/action.example.dialog.component';
 
 @Component({
   templateUrl: './interaction.component.html'
@@ -16,7 +18,10 @@ export class DocActionInteractionComponent {
   private _value = new BehaviorSubject<{ test: number }>({ test: 0 });
   readonly value$ = this._value.asObservable();
 
-  constructor(readonly dbxPopoverService: DbxPopoverService, readonly cdRef: ChangeDetectorRef) { }
+  constructor(
+    readonly dbxPopoverService: DbxPopoverService,
+    readonly matDialog: MatDialog,
+    readonly cdRef: ChangeDetectorRef) { }
 
   readonly handleAction: HandleActionFunction = (value: any, context: WorkHandlerContext) => {
     return of(true).pipe(delay(1000));
@@ -48,4 +53,8 @@ export class DocActionInteractionComponent {
     return DocActionExamplePopoverComponent.openPopover(this.dbxPopoverService, { origin });
   }
 
+  handleOpenDialog: DbxActionDialogFunction = () => {
+    return DocActionExampleDialogComponent.openDialog(this.matDialog);
+  }
+
 }
diff --git a/packages/demo/src/app/modules/doc/modules/action/doc.action.module.ts b/packages/demo/src/app/modules/doc/modules/action/doc.action.module.ts
@@ -12,6 +12,7 @@ import { DocActionExampleToolsComponent } from './component/action.example.tool.
 import { DocActionFormExampleFormComponent } from './component/action.example.form.component';
 import { DocActionMapComponent } from './container/map.component';
 import { DocActionExamplePopoverComponent } from './component/action.example.popover.form.component';
+import { DocActionExampleDialogComponent } from './component/action.example.dialog.component';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import { DocActionExamplePopoverComponent } from './component/action.example.pop
     // component
     DocActionExampleToolsComponent,
     DocActionFormExampleFormComponent,
+    DocActionExampleDialogComponent,
     DocActionExamplePopoverComponent,
     // container
     DocActionLayoutComponent,

diff --git a/...es/demo/src/app/modules/doc/modules/interaction/component/interaction.dialog.component.ts b/...es/demo/src/app/modules/doc/modules/interaction/component/interaction.dialog.component.ts
@@ -1,12 +1,5 @@
 import { Component } from '@angular/core';
-import { PopupPosition, AbstractDialogDirective } from '@dereekb/dbx-web';
-
-export const DEFAULT_INTERACTION_POPUP_COMPOSER_POPUP_KEY = 'popup';
-
-export interface DocInteractionPopupConfig {
-  draggable?: boolean;
-  position?: PopupPosition;
-}
+import { AbstractDialogDirective } from '@dereekb/dbx-web';
 
 @Component({
   template: `

diff --git a/packages/demo/src/app/modules/doc/modules/interaction/container/prompt.component.html b/packages/demo/src/app/modules/doc/modules/interaction/container/prompt.component.html
@@ -10,25 +10,31 @@
     </doc-feature-example>
 
     <doc-feature-example header="dbx-prompt" hint="A pre-styled prompt layout.">
-      <dbx-prompt header='Setup Required' prompt='Your account has not yet been setup.'>
-        <a mat-raised-button>Setup</a>
-      </dbx-prompt>
-    </doc-feature-example>
-
-    <doc-feature-example header="dbx-prompt-box" hint="A pre-styled box for prompt content.">
-      <dbx-prompt-box>
+      <dbx-content-border>
         <dbx-prompt header='Setup Required' prompt='Your account has not yet been setup.'>
           <a mat-raised-button>Setup</a>
         </dbx-prompt>
-      </dbx-prompt-box>
+      </dbx-content-border>
+    </doc-feature-example>
+
+    <doc-feature-example header="dbx-prompt-box" hint="A pre-styled box for prompt content.">
+      <dbx-content-border>
+        <dbx-prompt-box>
+          <dbx-prompt header='Setup Required' prompt='Your account has not yet been setup.'>
+            <a mat-raised-button>Setup</a>
+          </dbx-prompt>
+        </dbx-prompt-box>
+      </dbx-content-border>
     </doc-feature-example>
 
     <doc-feature-example header="dbx-prompt-page" hint="A pre-configured page that prompts the user to do something.">
-      <dbx-prompt-page>
-        <dbx-prompt header='Setup Required' prompt='Your account has not yet been setup.'>
-          <a mat-raised-button>Setup</a>
-        </dbx-prompt>
-      </dbx-prompt-page>
+      <dbx-content-border>
+        <dbx-prompt-page>
+          <dbx-prompt header='Setup Required' prompt='Your account has not yet been setup.'>
+            <a mat-raised-button>Setup</a>
+          </dbx-prompt>
+        </dbx-prompt-page>
+      </dbx-content-border>
     </doc-feature-example>
   </doc-feature-layout>
 </dbx-content-container>