copy insert macro dialog to new macro picker overlay + update macro container property editor

src/Umbraco.Web.UI.Client/src/common/services/macro.service.js

@@ -153,6 +153,51 @@ function macroService() {
 
             macroString += ")";
             return macroString;
+        },
+
+        collectValueData: function(macro, macroParams, renderingEngine) {
+
+            var paramDictionary = {};
+            var macroAlias = macro.alias;
+            var syntax;
+
+            _.each(macroParams, function (item) {
+
+                var val = item.value;
+
+                if (item.value !== null && item.value !== undefined && !_.isString(item.value)) {
+                    try {
+                        val = angular.toJson(val);
+                    }
+                    catch (e) {
+                        // not json
+                    }
+                }
+
+                //each value needs to be xml escaped!! since the value get's stored as an xml attribute
+                paramDictionary[item.alias] = _.escape(val);
+
+            });
+
+            //get the syntax based on the rendering engine
+            if (renderingEngine && renderingEngine === "WebForms") {
+                syntax = this.generateWebFormsSyntax({ macroAlias: macroAlias, macroParamsDictionary: paramDictionary });
+            }
+            else if (renderingEngine && renderingEngine === "Mvc") {
+                syntax = this.generateMvcSyntax({ macroAlias: macroAlias, macroParamsDictionary: paramDictionary });
+            }
+            else {
+                syntax = this.generateMacroSyntax({ macroAlias: macroAlias, macroParamsDictionary: paramDictionary });
+            }
+
+            var macroObject = {
+                "macroParamsDictionary": paramDictionary,
+                "macroAlias": macroAlias,
+                "syntax": syntax
+            };
+
+            return macroObject;
+
         }
 
     };

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

@@ -0,0 +1,113 @@
+function MacroPickerController($scope, entityResource, macroResource, umbPropEditorHelper, macroService, formHelper) {
+
+
+    $scope.model.title = "Macro picker";
+    $scope.macros = [];
+    $scope.model.selectedMacro = null;
+    $scope.wizardStep = "macroSelect";
+    $scope.model.macroParams = [];
+    $scope.noMacroParams = false;
+
+    $scope.changeMacro = function() {
+        if ($scope.wizardStep === "macroSelect") {
+            editParams();
+        } else {
+            submitForm();
+        }
+    };
+
+    /** changes the view to edit the params of the selected macro */
+    function editParams() {
+        //get the macro params if there are any
+        macroResource.getMacroParameters($scope.model.selectedMacro.id)
+            .then(function (data) {
+
+                //go to next page if there are params otherwise we can just exit
+                if (!angular.isArray(data) || data.length === 0) {
+
+                    $scope.noMacroParams = true;
+
+                } else {
+                    $scope.wizardStep = "paramSelect";
+                    $scope.model.macroParams = data;
+
+                    //fill in the data if we are editing this macro
+                    if ($scope.model.dialogData && $scope.model.dialogData.macroData && $scope.model.dialogData.macroData.macroParamsDictionary) {
+                        _.each($scope.model.dialogData.macroData.macroParamsDictionary, function (val, key) {
+                            var prop = _.find($scope.model.macroParams, function (item) {
+                                return item.alias == key;
+                            });
+                            if (prop) {
+
+                                if (_.isString(val)) {
+                                    //we need to unescape values as they have most likely been escaped while inserted
+                                    val = _.unescape(val);
+
+                                    //detect if it is a json string
+                                    if (val.detectIsJson()) {
+                                        try {
+                                            //Parse it to json
+                                            prop.value = angular.fromJson(val);
+                                        }
+                                        catch (e) {
+                                            // not json
+                                            prop.value = val;
+                                        }
+                                    }
+                                    else {
+                                        prop.value = val;
+                                    }
+                                }
+                                else {
+                                    prop.value = val;
+                                }
+                            }
+                        });
+
+                    }
+                }
+
+            });
+    }
+
+    //here we check to see if we've been passed a selected macro and if so we'll set the
+    //editor to start with parameter editing
+    if ($scope.model.dialogData && $scope.model.dialogData.macroData) {
+        $scope.wizardStep = "paramSelect";
+    }
+
+    //get the macro list - pass in a filter if it is only for rte
+    entityResource.getAll("Macro", ($scope.model.dialogData && $scope.model.dialogData.richTextEditor && $scope.model.dialogData.richTextEditor === true) ? "UseInEditor=true" : null)
+        .then(function (data) {
+
+            //if 'allowedMacros' is specified, we need to filter
+            if (angular.isArray($scope.model.dialogData.allowedMacros) && $scope.model.dialogData.allowedMacros.length > 0) {
+                $scope.macros = _.filter(data, function(d) {
+                    return _.contains($scope.model.dialogData.allowedMacros, d.alias);
+                });
+            }
+            else {
+                $scope.macros = data;
+            }
+
+
+            //check if there's a pre-selected macro and if it exists
+            if ($scope.model.dialogData && $scope.model.dialogData.macroData && $scope.model.dialogData.macroData.macroAlias) {
+                var found = _.find(data, function (item) {
+                    return item.alias === $scope.model.dialogData.macroData.macroAlias;
+                });
+                if (found) {
+                    //select the macro and go to next screen
+                    $scope.model.selectedMacro = found;
+                    editParams();
+                    return;
+                }
+            }
+            //we don't have a pre-selected macro so ensure the correct step is set
+            $scope.wizardStep = "macroSelect";
+        });
+
+
+}
+
+angular.module("umbraco").controller("Umbraco.Overlays.MacroPickerController", MacroPickerController);

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

@@ -0,0 +1,38 @@
+<div ng-controller="Umbraco.Overlays.MacroPickerController">
+
+    <div ng-switch="wizardStep">
+
+        <umb-control-group label="Choose a macro" ng-switch-when="macroSelect">
+            <select class="umb-editor" ng-change="changeMacro()"
+                    name="selectedMacro"
+                    ng-model="model.selectedMacro"
+                    ng-options="m as m.name for m in macros"
+                    required>
+                <option value=""><localize key="choose" />...</option>
+            </select>
+            <span class="help-inline" val-msg-for="selectedMacro" val-toggle-msg="required"><localize key="required" /></span>
+        </umb-control-group>
+
+
+        <div ng-switch-when="paramSelect">
+
+            <h5>{{model.selectedMacro.name}}</h5>
+
+            <ul class="unstyled">
+                <li ng-repeat="param in model.macroParams">
+
+                    <ng-form name="parameterForm">
+                        <umb-control-group label="{{param.name}}">
+                            <umb-editor model="param"></umb-editor>
+                        </umb-control-group>
+                    </ng-form>
+
+                </li>
+            </ul>
+
+            <div ng-if="noMacroParams" class="umb-empty-state-text -center">There are no parameters for this macro</div>
+
+        </div>
+    </div>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.controller.js

@@ -43,21 +43,33 @@ angular.module('umbraco')
 				var macro = $scope.renderModel[index];
 				dialogData["macroData"] = macro;
 			}
-			
-			dialogService.macroPicker({
-				dialogData : dialogData,
-				callback: function(data) {
 
-					collectDetails(data);
+			$scope.macroPickerOverlay = {};
+			$scope.macroPickerOverlay.view = "macropicker";
+			$scope.macroPickerOverlay.dialogData = dialogData;
+			$scope.macroPickerOverlay.show = true;
 
-					//update the raw syntax and the list...
-					if(index !== null && $scope.renderModel[index]) {
-						$scope.renderModel[index] = data;
-					} else {
-						$scope.renderModel.push(data);
-					}
+			$scope.macroPickerOverlay.submit = function(model) {
+
+				var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, dialogData.renderingEngine);
+				collectDetails(macroObject);
+
+				//update the raw syntax and the list...
+				if(index !== null && $scope.renderModel[index]) {
+					$scope.renderModel[index] = macroObject;
+				} else {
+					$scope.renderModel.push(macroObject);
 				}
-			});
+
+				$scope.macroPickerOverlay.show = false;
+				$scope.macroPickerOverlay = null;
+			};
+
+			$scope.macroPickerOverlay.close = function(oldModel) {
+				$scope.macroPickerOverlay.show = false;
+				$scope.macroPickerOverlay = null;
+			};
+
 		}
 
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.html

@@ -25,4 +25,12 @@
             </a>
         </li>
     </ul>
-</div>
+
+    <umb-overlay
+        ng-if="macroPickerOverlay.show"
+        model="macroPickerOverlay"
+        view="macroPickerOverlay.view"
+        position="right">
+    </umb-overlay>
+    
+</div>