feature(dialog): close blocking & enhancements (#144)

* upgrade angular to 2.1.2 * fixed empty input since angular complains now angular/angular#12768 * update module dependencies * update to latest angular-cli * upgrade to alpha.10 and breaking changes * added disableClose property for dialogs * removes validation for viewContainerRef since dialogs no longer require it * no more need for setDefaultViewContainerRef since viewContainerRef is not required for dialogs * updated docs with disableClose and remove setDefault example * setDefaultViewContainerRef deprecated * removed not required code for dialogs and snackbars * fixed validation messages since md-hint overrides display:none from [hidden] * update example in form validations * update(inline-errors): better error message * fixed spelling for address variables
Teradata · Nov 18, 2016 · 4ee33c7 · 4ee33c7
1 parent b806afa
commit 4ee33c7
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 81 deletions.
diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html
@@ -44,7 +44,8 @@ <h3>Example(after setup):</h3>
           openAlert(): void {
             this._dialogService.openAlert({
               message: 'This is how simple it is to create an alert with this wrapper service.',
-              viewContainerRef: this._viewContainerRef, //OPTIONAL if setDefaultViewContainerRef is used.
+              disableClose: true | false, // defaults to false
+              viewContainerRef: this._viewContainerRef, //OPTIONAL
               title: 'Alert', //OPTIONAL, hides if not provided
               closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE'
             });
@@ -53,7 +54,8 @@ <h3>Example(after setup):</h3>
           openConfirm(): void {
             this._dialogService.openConfirm({
               message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
-              viewContainerRef: this._viewContainerRef, //OPTIONAL if setDefaultViewContainerRef is used.
+              disableClose: true | false, // defaults to false
+              viewContainerRef: this._viewContainerRef, //OPTIONAL
               title: 'Confirm', //OPTIONAL, hides if not provided
               cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL'
               acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT'
@@ -69,7 +71,8 @@ <h3>Example(after setup):</h3>
           openPrompt(): void {
             this._dialogService.openPrompt({
               message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
-              viewContainerRef: this._viewContainerRef, //OPTIONAL if setDefaultViewContainerRef is used.
+              disableClose: true | false, // defaults to false
+              viewContainerRef: this._viewContainerRef, //OPTIONAL
               title: 'Prompt', //OPTIONAL, hides if not provided
               value: 'Prepopulated value', //OPTIONAL
               cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL'
@@ -85,27 +88,6 @@ <h3>Example(after setup):</h3>
         }
       ]]>
     </td-highlight>
-    <p>You can also set a default [ViewContainerRef] and avoid having to use it on each dialog open method call.</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        import { ViewContainerRef } from '@angular/core';
-        import { TdDialogService } from '@covalent/core';
-        ...
-        })
-        export class Demo {
-          constructor(private _dialogService: TdDialogService,
-                      private _viewContainerRef: ViewContainerRef) {
-            this._dialogService.setDefaultViewContainerRef(_viewContainerRef);
-          }
-
-          openAlert(): void {
-            this._dialogService.openAlert({
-              message: 'Alert using a default ViewContainerRef.',
-            });
-          }
-        }
-      ]]>
-    </td-highlight>
     <h3>Setup:</h3>
     <p>Import the [CovalentCoreModule] using the <code>forRoot()</code> method:</p>
     <td-highlight lang="typescript">

diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { TdDialogService } from '../../../../platform/core';
 
@@ -10,10 +10,6 @@ import { TdDialogService } from '../../../../platform/core';
 export class DialogsDemoComponent {
 
   dialogServiceMethods: Object[] = [{
-    description: `Sets a default ViewContainerRef object to which all dialogs will belong to.`,
-    name: 'setDefaultViewContainerRef',
-    type: 'function(ViewContainerRef)',
-  }, {
     description: `Opens an alert dialog with the provided config.`,
     name: 'openAlert',
     type: 'function(IAlertConfig): MdDialogRef<TdAlertDialogComponent>',
@@ -27,14 +23,12 @@ export class DialogsDemoComponent {
     type: 'function(IPromptConfig): MdDialogRef<TdPromptDialogComponent>',
   }];
 
-  constructor(private _dialogService: TdDialogService,
-              private _viewContainerRef: ViewContainerRef) {
-    this._dialogService.setDefaultViewContainerRef(_viewContainerRef);
-  }
+  constructor(private _dialogService: TdDialogService) {}
 
   openAlert(): void {
     this._dialogService.openAlert({
       title: 'Alert',
+      disableClose: true,
       message: 'This is how simple it is to create an alert with this wrapper service.',
     });
   }

diff --git a/src/app/components/style-guide/dialogs/dialogs.component.html b/src/app/components/style-guide/dialogs/dialogs.component.html
@@ -121,31 +121,41 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
     <form #myForm="ngForm">
       <div layout-gt-xs="row" layout-margin>
         <md-input #firstNameForm="ngModel" flex placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim>
-          <md-hint [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</md-hint>
+          <md-hint>
+            <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
+          </md-hint>
         </md-input>
         <md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim>
-          <md-hint [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</md-hint>
+          <md-hint>
+            <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
+          </md-hint>
         </md-input>
       </div>
       <div layout-gt-xs="row" layout-margin>
-        <md-input #adressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="adress" name="adress" required maxlength="50" tdAutoTrim>
-          <md-hint [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</md-hint>
-          <md-hint align="end">{{adressEl.characterCount}} / 50</md-hint>
+        <md-input #addressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim>
+          <md-hint>
+            <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
+          </md-hint>
+          <md-hint align="end">{{addressEl.characterCount}} / 50</md-hint>
         </md-input>
         <md-input flex="35" placeholder="City" tdAutoTrim></md-input>
       </div>
       <div layout-gt-xs="row" layout-margin>
         <md-input #stateForm="ngModel" flex="20" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim>
-          <md-hint [hidden]="stateForm.pristine" class="tc-red-600">
-            <span [hidden]="!stateForm.errors?.required">Required</span>
-            <span [hidden]="!stateForm.errors?.pattern">2 letters</span>
+          <md-hint>
+            <span [hidden]="stateForm.pristine" class="tc-red-600">
+              <span [hidden]="!stateForm.errors?.required">Required</span>
+              <span [hidden]="!stateForm.errors?.pattern">2 uppercase letters</span>
+            </span>
           </md-hint>
           <md-hint align="end">e.g CA</md-hint>
         </md-input>
         <md-input #zipForm="ngModel" flex="25" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required>
-          <md-hint [hidden]="zipForm.pristine" class="tc-red-600">
-            <span [hidden]="!zipForm.errors?.required">Required</span>
-            <span [hidden]="!zipForm.errors?.pattern">5 digits pls</span>
+          <md-hint>
+            <span [hidden]="zipForm.pristine" class="tc-red-600">
+              <span [hidden]="!zipForm.errors?.required">Required</span>
+              <span [hidden]="!zipForm.errors?.pattern">5 digits pls</span>
+            </span>
           </md-hint>
           <md-hint align="end">e.g 92101</md-hint>
         </md-input>
@@ -154,7 +164,7 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
   </md-card-content>
   <md-divider></md-divider>
   <div class="inset">
-    <button md-raised-button [disabled]="!myForm.valid">Submit Form</button>
+    <button md-raised-button color="accent" [disabled]="!myForm.valid">Submit Form</button>
   </div>
   <md-divider></md-divider>
   <md-card-content>
@@ -163,31 +173,41 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
         <form #myForm="ngForm">
           <div layout-gt-xs="row" layout-margin>
             <md-input #firstNameForm="ngModel" flex placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim>
-              <md-hint [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</md-hint>
+              <md-hint>
+                <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
+              </md-hint>
             </md-input>
             <md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim>
-              <md-hint [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</md-hint>
+              <md-hint>
+                <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
+              </md-hint>
             </md-input>
           </div>
           <div layout-gt-xs="row" layout-margin>
-            <md-input #adressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="adress" name="adress" required maxlength="50" tdAutoTrim>
-              <md-hint [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</md-hint>
-              <md-hint align="end">{{adressEl.characterCount}} / 50</md-hint>
+            <md-input #addressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim>
+              <md-hint>
+                <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
+              </md-hint>
+              <md-hint align="end">{{addressEl.characterCount}} / 50</md-hint>
             </md-input>
             <md-input flex="35" placeholder="City" tdAutoTrim></md-input>
           </div>
           <div layout-gt-xs="row" layout-margin>
             <md-input #stateForm="ngModel" flex="20" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim>
-              <md-hint [hidden]="stateForm.pristine" class="tc-red-600">
-                <span [hidden]="!stateForm.errors?.required">Required</span>
-                <span [hidden]="!stateForm.errors?.pattern">2 letters</span>
+              <md-hint>
+                <span [hidden]="stateForm.pristine" class="tc-red-600">
+                  <span [hidden]="!stateForm.errors?.required">Required</span>
+                  <span [hidden]="!stateForm.errors?.pattern">2 letters</span>
+                </span>
               </md-hint>
               <md-hint align="end">e.g CA</md-hint>
             </md-input>
             <md-input #zipForm="ngModel" flex="25" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required>
-              <md-hint [hidden]="zipForm.pristine" class="tc-red-600">
-                <span [hidden]="!zipForm.errors?.required">Required</span>
-                <span [hidden]="!zipForm.errors?.pattern">5 digits pls</span>
+              <md-hint>
+                <span [hidden]="zipForm.pristine" class="tc-red-600">
+                  <span [hidden]="!zipForm.errors?.required">Required</span>
+                  <span [hidden]="!zipForm.errors?.pattern">5 digits pls</span>
+                </span>
               </md-hint>
               <md-hint align="end">e.g 92101</md-hint>
             </md-input>

diff --git a/src/app/components/style-guide/dialogs/dialogs.component.ts b/src/app/components/style-guide/dialogs/dialogs.component.ts
@@ -1,41 +1,37 @@
-import { Component, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { TdDialogService } from '../../../../platform/core';
 
-import { MdSnackBar, MdSnackBarConfig, MdSnackBarRef} from '@angular/material';
+import { MdSnackBar, MdSnackBarRef } from '@angular/material';
 
 @Component({
   selector: 'design-patterns-dialogs',
   styleUrls: ['dialogs.component.scss'],
   templateUrl: 'dialogs.component.html',
 })
 export class DialogsToastsComponent {
-  _snackBarConfig: MdSnackBarConfig;
+
   constructor(private _dialogService: TdDialogService,
-              private _viewContainerRef: ViewContainerRef,
-              private _snackBarService: MdSnackBar) {
-    this._snackBarConfig = new MdSnackBarConfig();
-    this._snackBarConfig.viewContainerRef = _viewContainerRef;
-  }
+              private _snackBarService: MdSnackBar) {}
+
   showSnackBar(): void {
     let snackBarRef: MdSnackBarRef<any> = this._snackBarService
-      .open('Direct message sent!', 'Dismiss', this._snackBarConfig);
+      .open('Direct message sent!', 'Dismiss');
     setTimeout(() => {
       snackBarRef.dismiss();
     }, 3000);
   }
   openAlert(): void {
     this._dialogService.openAlert({
       message: 'You don\'t have the required permissions to view this item! Contact an administrator!',
-      viewContainerRef: this._viewContainerRef,
+      disableClose: true,
       title: '401 Permissions Error!',
       closeButton: 'Dismiss',
     });
   }
   openConfirm(): void {
     this._dialogService.openConfirm({
       message: 'Are you sure you want to delete this item? It\'s used on other items.',
-      viewContainerRef: this._viewContainerRef,
       title: 'Confirm',
       cancelButton: 'No, Cancel',
       acceptButton: 'Yes, Delete',
@@ -48,15 +44,14 @@ export class DialogsToastsComponent {
     });
   }
   confirmDelete(): void {
-    let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Item deleted!', 'Ok', this._snackBarConfig);
+    let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Item deleted!', 'Ok');
     setTimeout(() => {
       snackBarRef.dismiss();
     }, 3000);
   }
   openPrompt(): void {
     this._dialogService.openPrompt({
       message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
-      viewContainerRef: this._viewContainerRef,
       title: 'Prompt',
       value: 'Prepopulated value',
       cancelButton: 'Cancel',

diff --git a/src/platform/core/dialogs/services/dialog.service.ts b/src/platform/core/dialogs/services/dialog.service.ts
@@ -9,6 +9,7 @@ export interface IDialogConfig {
   title?: string;
   message: string;
   viewContainerRef?: ViewContainerRef;
+  disableClose?: boolean;
 }
 
 export interface IAlertConfig extends IDialogConfig {
@@ -27,18 +28,17 @@ export interface IPromptConfig extends IConfirmConfig {
 @Injectable()
 export class TdDialogService {
 
-  private _viewContainerRef: ViewContainerRef;
-
   constructor(private _dialogService: MdDialog) {}
 
   /**
    * params:
    * - viewContainerRef: ViewContainerRef
-   * 
    * Sets a detaulf ViewContainerRef object to which all dialogs will belong to.
+   * @deprecated since 0.9
    */
   public setDefaultViewContainerRef(viewContainerRef: ViewContainerRef): void {
-    this._viewContainerRef = viewContainerRef;
+    /* tslint:disable-next-line */ 
+    console.warn('setDefaultViewContainerRef is deprecated. ViewContainerRef is no longer required.');
   }
 
   /**
@@ -54,7 +54,7 @@ export class TdDialogService {
    * Returns an MdDialogRef<TdAlertDialogComponent> object.
    */
   public openAlert(config: IAlertConfig): MdDialogRef<TdAlertDialogComponent> {
-    let dialogConfig: MdDialogConfig = this._createConfig(config.viewContainerRef);
+    let dialogConfig: MdDialogConfig = this._createConfig(config);
     let dialogRef: MdDialogRef<TdAlertDialogComponent> =
       this._dialogService.open(TdAlertDialogComponent, dialogConfig);
     let alertDialogComponent: TdAlertDialogComponent = dialogRef.componentInstance;
@@ -80,7 +80,7 @@ export class TdDialogService {
    * Returns an MdDialogRef<TdConfirmDialogComponent> object.
    */
   public openConfirm(config: IConfirmConfig): MdDialogRef<TdConfirmDialogComponent> {
-    let dialogConfig: MdDialogConfig = this._createConfig(config.viewContainerRef);
+    let dialogConfig: MdDialogConfig = this._createConfig(config);
     let dialogRef: MdDialogRef<TdConfirmDialogComponent> =
       this._dialogService.open(TdConfirmDialogComponent, dialogConfig);
     let confirmDialogComponent: TdConfirmDialogComponent = dialogRef.componentInstance;
@@ -110,7 +110,7 @@ export class TdDialogService {
    * Returns an MdDialogRef<TdPromptDialogComponent> object.
    */
   public openPrompt(config: IPromptConfig): MdDialogRef<TdPromptDialogComponent> {
-    let dialogConfig: MdDialogConfig = this._createConfig(config.viewContainerRef);
+    let dialogConfig: MdDialogConfig = this._createConfig(config);
     let dialogRef: MdDialogRef<TdPromptDialogComponent> =
       this._dialogService.open(TdPromptDialogComponent, dialogConfig);
     let promptDialogComponent: TdPromptDialogComponent = dialogRef.componentInstance;
@@ -126,12 +126,10 @@ export class TdDialogService {
     return dialogRef;
   }
 
-  private _createConfig(viewContainerRef: ViewContainerRef): MdDialogConfig {
+  private _createConfig(config: MdDialogConfig): MdDialogConfig {
     let dialogConfig: MdDialogConfig = new MdDialogConfig();
-    dialogConfig.viewContainerRef = viewContainerRef ? viewContainerRef : this._viewContainerRef;
-    if (!dialogConfig.viewContainerRef) {
-      throw 'ViewContainerRef was not provided for dialog.';
-    }
+    dialogConfig.viewContainerRef = config.viewContainerRef;
+    dialogConfig.disableClose = config.disableClose;
     return dialogConfig;
   }