From baa7c4eca6ee1bd592c670d03a94e820809cf06f Mon Sep 17 00:00:00 2001
From: barteksekula <bartek.sekula@gmail.com>
Date: Tue, 19 Nov 2019 23:21:04 +0100
Subject: [PATCH] Show how to use dialogService and Dialog components

---
 .../Scripts/Components/CustomComponent.js     | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/Alloy.Mvc.Template/ClientResources/Scripts/Components/CustomComponent.js b/src/Alloy.Mvc.Template/ClientResources/Scripts/Components/CustomComponent.js
index 40d32db..4a1b983 100644
--- a/src/Alloy.Mvc.Template/ClientResources/Scripts/Components/CustomComponent.js
+++ b/src/Alloy.Mvc.Template/ClientResources/Scripts/Components/CustomComponent.js
@@ -1,20 +1,28 @@
 define([
         // Dojo
         "dojo/_base/declare",
+        "dojo/on",
         "dojo/html",
         // Dijit
         "dijit/_TemplatedMixin",
         "dijit/_WidgetBase",
+        "dijit/form/TextBox",
         //CMS
+        "epi/shell/widget/dialog/Dialog",
+        "epi/shell/DialogService",
         "epi-cms/_ContentContextMixin"
     ], function (
         // Dojo
         declare,
+        on,
         html,
         // Dijit
         _TemplatedMixin,
         _WidgetBase,
+        TextBox,
         //CMS
+        Dialog,
+        dialogService,
         _ContentContextMixin
     ) {
         return declare([_WidgetBase, _TemplatedMixin, _ContentContextMixin], {
@@ -23,6 +31,10 @@ define([
 
             templateString: '<div>\
                                <div data-dojo-attach-point="contentName"></div>\
+                               <button data-dojo-attach-point="alertNode">Open alert</button>\
+                               <button data-dojo-attach-point="confirmationNode">Open confirmation</button>\
+                               <button data-dojo-attach-point="dialogServiceNode">Open dialog (service)</button>\
+                               <button data-dojo-attach-point="dialogNode">Open dialog (explicit)</button>\
                              </div>',
 
             postMixInProperties: function () {
@@ -31,6 +43,60 @@ define([
                 }.bind(this));
             },
 
+            postCreate: function () {
+                this.own(on(this.alertNode, "click", function () {
+                    dialogService.alert({
+                        title: "alert title",
+                        heading: "heading",
+                        content: "content",
+                        description: "description",
+                        iconClass: "epi-iconDownload"
+                    });
+                }));
+
+                this.own(on(this.confirmationNode, "click", function () {
+                    dialogService.confirmation({
+                        title: "confirmation title",
+                        heading: "heading",
+                        content: "content",
+                        description: "description",
+                        iconClass: "epi-iconDownload"
+                    }).then(function () {
+                        alert("clicked OK");
+                    }).otherwise(function () {
+                        alert("clicked cancel");
+                    });
+                }));
+
+                this.own(on(this.dialogServiceNode, "click", function () {
+                    dialogService.dialog({
+                        title: "dialog title",
+                        heading: "heading",
+                        content: new TextBox({label: "Text 1", _type: "field"}),
+                        description: "description",
+                        iconClass: "epi-iconDownload"
+                    }).then(function () {
+                        alert("clicked OK");
+                    }).otherwise(function () {
+                        alert("clicked cancel");
+                    });
+                }));
+
+                this.own(on(this.dialogNode, "click", function () {
+                    var dialog = new Dialog({
+                        heading: "heading",
+                        content: new TextBox({label: "Text 1", _type: "field"}),
+                        description: "description",
+                        iconClass: "epi-iconDownload"
+                    });
+                    dialog.on("execute", function () {
+                        // run custom needed logic
+                        dialog.hide();
+                    });
+                    dialog.show();
+                }));
+            },
+
             contextChanged: function (context, callerData) {
                 this.inherited(arguments);