From 4cd287616e655692f6ec9411bb2588e464c8fd6d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 31 Jan 2017 14:44:52 +0100
Subject: [PATCH] add UI for partial view macros create dialog

---
 .../src/common/resources/codefile.resource.js | 30 ++++++++
 .../partialviewmacros/create.controller.js    | 51 ++++++++++++-
 .../src/views/partialviewmacros/create.html   | 76 ++++++++++++++++++-
 3 files changed, 153 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js
index 4655b6fa3b..e8657ecd73 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js
@@ -176,7 +176,37 @@ function codefileResource($q, $http, umbDataFormatter, umbRequestHelper) {
                          "PostSave"),
                          codeFile),
                 "Failed to save data for code file " + codeFile.virtualPath);
+        },
+
+        /**
+         * @ngdoc method
+         * @name umbraco.resources.codefileResource#getSnippets
+         * @methodOf umbraco.resources.codefileResource
+         *
+         * @description
+         * Gets code snippets for a given file type
+         * 
+         * ##usage
+         * <pre>
+         * codefileResource.getSnippets(fileType)
+         *    .then(function(snippets) {
+         *        alert('its here!');
+         *    });
+         * </pre>
+         *
+         * @param {string} file type: (partialViews, partialViewMacros)
+         * @returns {Promise} resourcePromise object.
+         *
+         */
+        getSnippets: function (fileType) {
+            return umbRequestHelper.resourcePromise(
+                 $http.get(
+                     umbRequestHelper.getApiUrl(
+                         "codeFileApiBaseUrl",
+                         "GetSnippets?type=" + fileType )),
+                "Failed to get snippet for" + fileType);
         }
+
     };
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.controller.js b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.controller.js
index a350a626f4..e822c19d09 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.controller.js
@@ -1,7 +1,56 @@
 (function () {
     "use strict";
 
-    function PartialViewMacrosCreateController() {
+    function PartialViewMacrosCreateController($scope, codefileResource, $location, navigationService) {
+
+        var vm = this;
+        var node = $scope.dialogOptions.currentNode;
+
+        vm.snippets = [];
+        vm.showSnippets = false;
+        vm.creatingFolder = false;
+
+        vm.createPartialViewMacro = createPartialViewMacro;
+        vm.showCreateFolder = showCreateFolder;
+        vm.createFolder = createFolder;
+        vm.showCreateFromSnippet = showCreateFromSnippet;
+
+        function onInit() {
+            codefileResource.getSnippets('partialViewMacros')
+                .then(function(snippets) {
+                    vm.snippets = snippets;
+                });
+        }
+
+        function createPartialViewMacro(selectedSnippet) {
+
+            var snippet = null;
+
+            if(selectedSnippet && selectedSnippet.fileName) {
+                snippet = selectedSnippet.fileName;
+            }
+
+            $location.search('create', null);
+            $location.search('snippet', null);
+            $location.path("/developer/partialviewmacros/edit/" + node.id).search("create", "true").search("snippet", snippet);
+            navigationService.hideMenu();
+
+        }
+
+        function showCreateFolder() {
+            vm.creatingFolder = true;
+        }
+
+        function createFolder() {
+            alert("create folder");
+        }
+        
+        function showCreateFromSnippet() {
+            vm.showSnippets = true;
+        }
+        
+        onInit();
+
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.PartialViewMacros.CreateController", PartialViewMacrosCreateController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.html b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.html
index 9e5504aa0c..0c3c0fc385 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.html
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/create.html
@@ -1,5 +1,75 @@
-<div class="umbracoDialog umb-dialog-body with-footer" ng-controller="Umbraco.Editors.PartialViewMacros.CreateController" ng-cloak>
-    <div class="umb-pane">
-        <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
+<div ng-controller="Umbraco.Editors.PartialViewMacros.CreateController as vm" ng-cloak>
+
+    <div class="umbracoDialog umb-dialog-body with-footer">
+
+        <div class="umb-pane" ng-if="!vm.creatingFolder">
+            
+            <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
+
+            <!-- Main options -->
+            <div ng-if="!vm.showSnippets">
+                <ul class="umb-actions umb-actions-child">
+                    <li>
+                        <a href="" ng-click="vm.createPartialViewMacro()" umb-auto-focus>
+                            <i class="large icon-article"></i>
+                            <span class="menu-label">New Empty Partial View Macro</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="" ng-click="vm.showCreateFromSnippet()">
+                            <i class="large icon-article"></i>
+                            <span class="menu-label">New Partial View Macro from Snippet</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="" ng-click="vm.showCreateFolder()">
+                            <i class="large icon-folder"></i>
+                            <span class="menu-label"><localize key="general_folder"></localize></span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Snippets list -->
+            <div ng-if="vm.showSnippets">
+                <ul class="umb-actions umb-actions-child">
+                    <li ng-repeat="snippet in vm.snippets">
+                        <a href="" ng-click="vm.createPartialViewMacro(snippet)" style="padding-top: 6px; padding-bottom: 6px;">
+                            <i class="icon-article" style="font-size: 20px;"></i>
+                            <span class="menu-label" style="margin-left: 0; padding-left: 5px;">{{ snippet.name }}</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+        </div>
+
+        <!-- Create folder -->
+        <div class="umb-pane" ng-if="vm.creatingFolder">
+            <form novalidate name="createFolderForm"
+                ng-submit="vm.createFolder()"
+                val-form-manager>
+                
+                <div ng-show="error">
+                    <h5 class="text-error">{{error.errorMsg}}</h5>
+                    <p class="text-error">{{error.data.message}}</p>
+                </div>
+
+                <umb-control-group label="Enter a folder name" hide-label="false">
+                    <input type="text" name="folderName" ng-model="vm.folderName" class="umb-textstring textstring input-block-level" umb-auto-focus required />
+                </umb-control-group>
+
+                <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
+            </form>
+        </div>
+
     </div>
+
+    <!-- Dialog footer -->
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+        <button class="btn" ng-click="nav.hideDialog(true)">
+            <localize key="buttons_somethingElse">Do something else</localize>
+        </button>
+    </div>
+
 </div>