Add example to welcome.vm

Author: dweber019

src/app/modules/welcome/welcome.vm.html

@@ -42,5 +42,8 @@ <h3>Validation</h3>
 
     <h3>Dialog</h3>
     <button click.delegate="openDialog()" class="btn btn-primary">open dialog</button>
+
+    <h3>Generic Dialog</h3>
+    <button click.delegate="openGenericDialog()" class="btn btn-primary">open generic dialog</button>
   </div>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,11 +1,13 @@
-import { autoinject } from 'aurelia-framework';
+import { autoinject, PLATFORM } from 'aurelia-framework';
 import { ValidationControllerFactory, ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
 import { DialogService } from 'aurelia-dialog';
 
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
 import { LanguageService } from './../../services/language.service';
 import { EditPersonCustomElement } from './../../resources/elements/edit-person/edit-person.element';
+import { GenericDialogService } from './../../services/generic-dialog.service';
+import { ShowPersonCustomElement } from '../../resources/elements/show-person/show-person.element';
 
 @autoinject
 export class WelcomeViewModel {
@@ -24,7 +26,8 @@ export class WelcomeViewModel {
     private appConfigService: AppConfigService,
     private languageService: LanguageService,
     private dialogService: DialogService,
-    validationControllerFactory: ValidationControllerFactory
+    validationControllerFactory: ValidationControllerFactory,
+    private genericDialogService: GenericDialogService,
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', this.appConfigService.getName());
@@ -86,6 +89,31 @@ export class WelcomeViewModel {
       this.languageService.setLocale(this.languageService.getSupportedLanguages()[0]);
     }
   }
+
+  public openGenericDialog(): void {
+    const dialog = this.genericDialogService.showDialog<ShowPersonCustomElement>({
+      title: 'Zeige Person', // Can be a translation string
+      contentViewModel: PLATFORM.moduleName('resources/elements/show-person/show-person.element'),
+      contentModel: {
+        firstName: this.firstName
+      },
+      buttons: [
+        GenericDialogService.createCancelButton<ShowPersonCustomElement>(() => Promise.resolve()),
+        GenericDialogService.createSaveButton<ShowPersonCustomElement>(ele => {
+          this.logger.debug('Clicked on save in dialog', ele);
+          return Promise.resolve();
+        }, ele => ele.isValid)
+      ]
+    });
+
+    dialog.whenClosed(result => {
+      if (!result.wasCancelled) {
+        this.logger.debug('Dialog not canceld', result);
+      } else {
+        this.logger.debug('Dialog canceld', result);
+      }
+    });
+  }
 }
 
 export class UpperValueConverter {

src/app/resources/elements/show-person/show-person.element.html

@@ -0,0 +1,3 @@
+<template>
+  <h1>${ firstName }</h1>
+</template>

src/app/resources/elements/show-person/show-person.element.ts

@@ -0,0 +1,16 @@
+import { autoinject } from 'aurelia-framework';
+
+@autoinject
+export class ShowPersonCustomElement {
+
+  public firstName = '';
+
+  public activate(args): void {
+    this.firstName = args.firstName;
+  }
+
+  public get isValid(): boolean {
+    // We could check if a form is valid
+    return true;
+  }
+}