Organize dialog can now insert sections, rendersections, renderbody, and select master.

Cursor stays where it was before editor was blurred.

src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/organize.controller.js

@@ -1,22 +0,0 @@
-(function() {
-    "use strict";
-
-    function OrganizeController(scope, umbRequestHelper, http) {
-        var allTemplatesUrl = umbRequestHelper.getApiUrl("templateApiBaseUrl", "GetAll");
-
-        http.get(allTemplatesUrl)
-            .then(function(result) {
-                scope.masterPages = result.data;
-            });
-    }
-
-    angular.module("umbraco")
-        .controller("Umbraco.Dialogs.Template.OrganizeController",
-        [
-            "$scope",
-            "umbRequestHelper",
-            "$http",
-            OrganizeController
-        ]);
-
-}());

src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/organize.html

@@ -1,21 +0,0 @@
-<div ng-controller="Umbraco.Dialogs.Template.OrganizeController">
-    <div class="row">
-        <label>Select master page</label>
-        <div class="btn-group">
-            <a class="btn btn-link dropdown-toggle"
-               data-toggle="dropdown" href="#">
-                {{structure.masterPage}}
-                <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu">
-                <li ng-repeat="page in masterPages">
-                    <a href ng-click="selectMasterPage(page)">
-                        {{page.name}}
-                    </a>
-                </li>
-
-            </ul>
-        </div>
-    </div>
-
-</div>

src/Umbraco.Web.UI.Client/src/views/common/overlays/organize/organize.controller.js

@@ -0,0 +1,40 @@
+(function() {
+    "use strict";
+
+    function OrganizeController(scope, umbRequestHelper, http) {
+        var allTemplatesUrl = umbRequestHelper.getApiUrl("templateApiBaseUrl", "GetAll");
+
+        scope.model.addRenderBody = false;
+        scope.model.mandatoryRenderSection = false;
+        scope.masterPage = {};
+
+        http.get(allTemplatesUrl)
+            .then(function(result) {
+                scope.masterPages = result.data;
+                scope.masterPages.splice(0,
+                    0,
+                    {
+                        alias: null,
+                        name: "None"
+                    });
+                scope.model.masterPage = $.grep(scope.masterPages,
+                    function(mp) {
+                        return mp.alias === scope.model.template.masterPageAlias;
+                    })[0];
+            });
+
+        scope.selectMasterPage = function(masterPage) {
+            scope.model.masterPage = masterPage;
+        }
+    }
+
+    angular.module("umbraco")
+        .controller("Umbraco.Dialogs.Template.OrganizeController",
+        [
+            "$scope",
+            "umbRequestHelper",
+            "$http",
+            OrganizeController
+        ]);
+
+}());

src/Umbraco.Web.UI.Client/src/views/common/overlays/organize/organize.html

@@ -0,0 +1,51 @@
+<div ng-controller="Umbraco.Dialogs.Template.OrganizeController">
+    <div class="row">
+        <label>Select master page</label>
+        <div class="btn-group">
+            <a class="btn btn-link dropdown-toggle"
+               data-toggle="dropdown" href="#">
+                {{model.masterPage.name || 'No master selected'}}
+                <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+                <li ng-repeat="page in masterPages">
+                    <a href ng-click="selectMasterPage(page)">
+                        {{page.name}}
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+    <div class="row">
+        <h3>Master page</h3>
+        <div>
+            <label>
+                <input type="checkbox" ng-model="model.addRenderBody"/>
+                Add RenderBody
+            </label>
+        </div>
+        <div>
+            <label>
+                <input type="checkbox" ng-model="model.addRenderSection" />
+                Add RenderSection
+            </label>
+            <input type="text" ng-model="model.renderSectionName"/>
+            <label>
+                Make section mandatory
+                <input type="checkbox" ng-model="model.mandatoryRenderSection"/>
+            </label>
+        </div>
+    </div>
+    <div class="row">
+        <h3>Child page</h3>
+        <div>
+            <label>
+                <input type="checkbox" ng-model="model.addSection" />
+                Add section
+            </label>
+            <input type="text" ng-model="model.sectionName" />
+        </div>
+
+    </div>
+</div>

src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js

@@ -6,24 +6,27 @@
         var vm = this;
         vm.page = {};
         vm.page.loading = true;
-        
+
         //menu
         vm.page.menu = {};
         vm.page.menu.currentSection = appState.getSectionState("currentSection");
         vm.page.menu.currentNode = null;
 
-        vm.insert = function(str){
+        vm.insert = function (str) {
+            vm.editor.moveCursorToPosition(vm.currentPosition);
             vm.editor.insert(str);
             vm.editor.focus();
         };
 
-        vm.save = function(){
+        vm.currentPosition = { col: 0, row: 0 };
+
+        vm.save = function () {
             vm.page.saveButtonState = "busy";
 
             vm.template.content = vm.editor.getValue();
 
-            templateResource.save(vm.template).then(function(saved){
-                notificationsService.success("Template saved")
+            templateResource.save(vm.template).then(function (saved) {
+                notificationsService.success("Template saved");
                 vm.page.saveButtonState = "success";
                 vm.template = saved;
 
@@ -34,42 +37,49 @@
                 });
 
 
-            }, function(err){
-                notificationsService.error("Template save failed")
+            }, function (err) {
+                notificationsService.error("Template save failed");
                 vm.page.saveButtonState = "error";
             });
         };
 
-        vm.init = function(){
+        function persistCurrentLocation() {
+            vm.currentPosition = vm.editor.getCursorPosition();
+        }
+
+        vm.init = function () {
 
 
             //we need to load this somewhere, for now its here.
             assetsService.loadCss("lib/ace-razor-mode/theme/razor_chrome.css");
-            templateResource.getById($routeParams.id).then(function(template){
-                    
-                    vm.page.loading = false;
-                    vm.template = template;
+            templateResource.getById($routeParams.id).then(function (template) {
 
-                    //sync state
-                    editorState.set(vm.template);
-                    navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) {
-                        vm.page.menu.currentNode = syncArgs.node;
-                    });
+                vm.page.loading = false;
+                vm.template = template;
 
-                    vm.aceOption = {
-                        mode: "razor",
-                        theme: "chrome",
+                //sync state
+                editorState.set(vm.template);
+                navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) {
+                    vm.page.menu.currentNode = syncArgs.node;
+                });
 
-                        onLoad: function(_editor) {
-                            vm.editor = _editor;
+                vm.aceOption = {
+                    mode: "razor",
+                    theme: "chrome",
+
+                    onLoad: function (_editor) {
+                        vm.editor = _editor;
+
+                        vm.editor.on("blur", persistCurrentLocation);
+                        vm.editor.on("focus", persistCurrentLocation);
                     }
                 };
             });
 
         };
-        
-        
-        vm.setLayout = function(path){
+
+
+        vm.setLayout = function (path) {
 
             var templateCode = vm.editor.getValue();
             var newValue = path;
@@ -105,12 +115,12 @@
 
 
         function openMacroOverlay() {
-           
+
             vm.macroPickerOverlay = {
                 view: "macropicker",
                 dialogData: {},
                 show: true,
-                submit: function(model) {
+                submit: function (model) {
 
                     var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, "Mvc");
                     vm.insert(macroObject.syntax);
@@ -120,15 +130,15 @@
             };
         }
 
- 
+
         function openPageFieldOverlay() {
             vm.pageFieldOverlay = {
                 view: "mediapicker",
                 show: true,
-                submit: function(model) {
+                submit: function (model) {
 
                 },
-                close: function(model) {
+                close: function (model) {
                     vm.pageFieldOverlay.show = false;
                     vm.pageFieldOverlay = null;
                 }
@@ -139,28 +149,27 @@
         function openDictionaryItemOverlay() {
             vm.dictionaryItemOverlay = {
                 view: "treepicker",
-                dialogOptions: {section: "settings", treeAlias: "dictionary"},
+                dialogOptions: { section: "settings", treeAlias: "dictionary" },
                 show: true,
 
-                submit: function(model) {
+                submit: function (model) {
                     console.log(model);
                 },
 
-                close: function(model) {
+                close: function (model) {
                     vm.dictionaryItemOverlay.show = false;
                     vm.dictionaryItemOverlay = null;
                 }
             };
         }
 
-
         function openQueryBuilderOverlay() {
             vm.queryBuilderOverlay = {
                 view: "querybuilder",
                 show: true,
                 title: "Query for content",
-               
-                submit: function(model) {
+
+                submit: function (model) {
 
                     var code = "\n@{\n" + "\tvar selection = " + model.result.queryExpression + ";\n}\n";
                     code += "<ul>\n" +
@@ -174,7 +183,7 @@
                     vm.insert(code);
                 },
 
-                close: function(model) {
+                close: function (model) {
                     vm.queryBuilderOverlay.show = false;
                     vm.queryBuilderOverlay = null;
                 }
@@ -183,13 +192,38 @@
 
         function openOrganizeOverlay() {
             vm.organizeOverlay = {
-                view: "/umbraco/views/common/dialogs/template/organize.html",
+                view: "organize",
                 show: true,
                 template: vm.template,
-                submit: function(model) {
-                    vm.setLayout(model);
+                submit: function (model) {
+                    if (model.masterPage && model.masterPage.alias) {
+                        vm.template.masterPageAlias = model.masterPage.alias;
+                        vm.setLayout(model.masterPage.alias + ".cshtml");
+                    } else {
+                        vm.template.masterPageAlias = null;
+                        vm.setLayout(null);
+                    }
+
+                    if (model.addRenderBody) {
+                        vm.insert("@RenderBody()");
+                    }
+
+                    if (model.addRenderSection) {
+                        vm.insert("@RenderSection(\"" +
+                            model.renderSectionName +
+                            "\", " +
+                            model.mandatoryRenderSection +
+                            ")");
+                    }
+
+                    if (model.addSection) {
+                        vm.insert("@section " + model.sectionName + "\r\n{\r\n\r\n}\r\n");
+                    }
+
+                    vm.organizeOverlay.show = false;
+                    vm.organizeOverlay = null;
                 },
-                close: function(model) {
+                close: function (model) {
                     vm.organizeOverlay.show = false;
                     vm.organizeOverlay = null;
                 }

src/Umbraco.Web.UI.Client/src/views/templates/edit.html

@@ -45,7 +45,6 @@
                                 <li><a href="" ng-click="">Value</a></li>
                                 <li><a href="" ng-click="vm.insert('@RenderDictionary()')">Dictionary</a></li>
                                 <li><a href="" ng-click="">Partial</a></li>
-                                <li><a href="" ng-click="vm.openOrganizeOverlay()">Organize</a></li>
                             </ul>
 
                         </div>
@@ -63,7 +62,7 @@
                             button-style="link"
                             label="Organise"
                             icon="icon-layout"
-                            action="vm.openQueryBuilderOverlay()">
+                            action="vm.openOrganizeOverlay()">
                         </umb-button>
 
                     </umb-editor-sub-header-content-left>