yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pick macro parameters in an infinite editor like content type properties (#6586)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2019-10-15 18:13:18 +02:00
committed by Sebastiaan Janssen
parent 8a85c3cbf9
commit 426aa981f8
14 changed files with 500 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/common/resources/macro.resource.js
View File

@@ -105,6 +105,20 @@ function macroResource($q, $http, umbRequestHelper) {
);
},
getGroupedParameterEditors: function () {
return umbRequestHelper.resourcePromise(
$http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetGroupedParameterEditors"),
"Failed to get parameter editors")
);
},
getParameterEditorByAlias: function(alias) {
return umbRequestHelper.resourcePromise(
$http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetParameterEditorByAlias", { "alias": alias }),
"Failed to get parameter editor")
);
},
getById: function(id) {
return umbRequestHelper.resourcePromise(
$http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetById", { "id": id }), "Failed to get macro")

28
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
View File

@@ -10,7 +10,7 @@
(function() {
"use strict";
function DataTypePicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
function DataTypePicker($scope, $filter, dataTypeResource, contentTypeResource, localizationService, editorService) {
var vm = this;
@@ -122,10 +122,18 @@
vm.showTabs = false;
var regex = new RegExp(vm.searchTerm, "i");
var userConfigured = filterCollection(vm.userConfigured, regex),
typesAndEditors = filterCollection(vm.typesAndEditors, regex);
var totalResults = _.reduce(_.pluck(_.union(userConfigured, typesAndEditors), 'count'), (m, n) => m + n, 0);
vm.filterResult = {
userConfigured: filterCollection(vm.userConfigured, regex),
typesAndEditors: filterCollection(vm.typesAndEditors, regex)
userConfigured: userConfigured,
typesAndEditors: typesAndEditors,
totalResults: totalResults
};
} else {
vm.filterResult = null;
vm.showTabs = true;
@@ -134,11 +142,15 @@
function filterCollection(collection, regex) {
return _.map(_.keys(collection), function (key) {
var filteredDataTypes = $filter('filter')(collection[key], function (dataType) {
return regex.test(dataType.name) || regex.test(dataType.alias);
});
return {
group: key,
dataTypes: $filter('filter')(collection[key], function (dataType) {
return regex.test(dataType.name) || regex.test(dataType.alias);
})
count: filteredDataTypes.length,
dataTypes: filteredDataTypes
}
});
}
@@ -150,7 +162,6 @@
propertyDetails.title = property.name;
$scope.model.itemDetails = propertyDetails;
}
function hideDetailsOverlay() {
@@ -177,7 +188,6 @@
};
editorService.open(dataTypeSettings);
}
function pickDataType(selectedDataType) {
@@ -205,7 +215,7 @@
}
function close() {
if($scope.model.close) {
if ($scope.model.close) {
$scope.model.close();
}
}

97
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
View File

@@ -20,17 +20,19 @@
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-change="vm.filterItems()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
style="width: 100%"
ng-change="vm.filterItems()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
</div>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<!-- TABS -->
<div ng-if="vm.showTabs">
<umb-tabs-nav
@@ -80,47 +82,56 @@
</div>
</umb-tab-content>
</div>
<!-- FILTER RESULTS -->
<div ng-if="vm.filterResult">
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
<div ng-repeat="result in vm.filterResult.userConfigured">
<div ng-if="result.dataTypes.length > 0">
<h5>{{result.group}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(dataType)"
ng-click="vm.pickDataType(dataType)">
<div ng-if="dataType.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
{{ dataType.name }}
</span>
</a>
</li>
</ul>
<div ng-if="vm.filterResult.totalResults > 0">
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
<div ng-repeat="result in vm.filterResult.userConfigured">
<div ng-if="result.dataTypes.length > 0">
<h5>{{result.group}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(dataType)"
ng-click="vm.pickDataType(dataType)">
<div ng-if="dataType.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<a class="umb-card-grid-item" href="" title="{{dataType.name}}">
<span>
<i class="{{dataType.icon}}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
{{dataType.name}}
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
<div ng-repeat="result in vm.filterResult.typesAndEditors">
<div ng-if="result.dataTypes.length > 0">
<h5>{{result.group}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(systemDataType)"
ng-click="vm.pickEditor(systemDataType)">
<a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
<span>
<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
{{ systemDataType.name }}
</span>
</a>
</li>
</ul>
<div ng-if="vm.filterResult.totalResults > 0">
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
<div ng-repeat="result in vm.filterResult.typesAndEditors">
<div ng-if="result.dataTypes.length > 0">
<h5>{{result.group}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(systemDataType)"
ng-click="vm.pickEditor(systemDataType)">
<a class="umb-card-grid-item" href="" title="{{systemDataType.name}}">
<span>
<i class="{{systemDataType.icon}}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
{{systemDataType.name}}
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<umb-empty-state position="center" ng-if="vm.filterResult.totalResults === 0">
<localize key="general_searchNoResult"></localize>
</umb-empty-state>
</div>
</umb-box-content>

127
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.controller.js Normal file
View File

@@ -0,0 +1,127 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.MacroParameterPickerController
* @function
*
* @description
* The controller for the content type editor macro parameter dialog
*/
(function() {
"use strict";
function MacroParameterController($scope, $filter, macroResource, localizationService, editorService) {
var vm = this;
vm.searchTerm = "";
vm.parameterEditors = [];
vm.loading = false;
vm.labels = {};
vm.filterItems = filterItems;
vm.showDetailsOverlay = showDetailsOverlay;
vm.hideDetailsOverlay = hideDetailsOverlay;
vm.pickParameterEditor = pickParameterEditor;
vm.close = close;
function init() {
setTitle();
getGroupedParameterEditors();
}
function setTitle() {
if (!$scope.model.title) {
localizationService.localize("defaultdialogs_selectEditor")
.then(function(data){
$scope.model.title = data;
});
}
}
function getGroupedParameterEditors() {
vm.loading = true;
macroResource.getGroupedParameterEditors().then(function (data) {
vm.parameterEditors = data;
vm.loading = false;
}, function () {
vm.loading = false;
});
}
function filterItems() {
// clear item details
$scope.model.itemDetails = null;
if (vm.searchTerm) {
var regex = new RegExp(vm.searchTerm, "i");
var parameterEditors = filterCollection(vm.parameterEditors, regex);
var totalResults = _.reduce(_.pluck(parameterEditors, 'count'), (m, n) => m + n, 0);
vm.filterResult = {
parameterEditors: parameterEditors,
totalResults: totalResults
};
} else {
vm.filterResult = null;
}
}
function filterCollection(collection, regex) {
return _.map(_.keys(collection), function (key) {
var filteredEditors = $filter('filter')(collection[key], function (editor) {
return regex.test(editor.name) || regex.test(editor.alias);
});
return {
group: key,
count: filteredEditors.length,
parameterEditors: filteredEditors
}
});
}
function showDetailsOverlay(property) {
var propertyDetails = {};
propertyDetails.icon = property.icon;
propertyDetails.title = property.name;
$scope.model.itemDetails = propertyDetails;
}
function hideDetailsOverlay() {
$scope.model.itemDetails = null;
}
function pickParameterEditor(selectedParameterEditor) {
console.log("pickParameterEditor", selectedParameterEditor);
console.log("$scope.model", $scope.model);
$scope.model.parameter.editor = selectedParameterEditor.alias;
$scope.model.parameter.dataTypeName = selectedParameterEditor.name;
$scope.model.parameter.dataTypeIcon = selectedParameterEditor.icon;
$scope.model.submit($scope.model);
}
function close() {
if ($scope.model.close) {
$scope.model.close();
}
}
init();
}
angular.module("umbraco").controller("Umbraco.Editors.MacroParameterPickerController", MacroParameterController);
})();

106
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html Normal file
View File

@@ -0,0 +1,106 @@
<div ng-controller="Umbraco.Editors.MacroParameterPickerController as vm">
<umb-editor-view data-element="editor-macro-parameter">
<form novalidate name="MacroParameterForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<!-- FILTER -->
<div class="umb-control-group -no-border">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-change="vm.filterItems()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
</div>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<div ng-if="!vm.filterResult">
<div ng-repeat="(key,value) in vm.parameterEditors">
<h5>{{key}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="parameterEditor in value | orderBy:'name'"
data-element="editor-{{parameterEditor.name}}"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)">
<a class="umb-card-grid-item" href="" title="{{parameterEditor.name}}">
<span>
<i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}"></i>
{{parameterEditor.name}}
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- FILTER RESULTS -->
<div ng-if="vm.filterResult">
<div ng-if="vm.filterResult.totalResults > 0">
<div ng-repeat="result in vm.filterResult.parameterEditors">
<div ng-if="result.parameterEditors.length > 0">
<h5>{{result.group}}</h5>
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="parameterEditor in result.parameterEditors | orderBy:'name'"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)">
<div ng-if="parameterEditor.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<a class="umb-card-grid-item" href="" title="{{parameterEditor.name}}">
<span>
<i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}"></i>
{{parameterEditor.name}}
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<umb-empty-state position="center" ng-if="vm.filterResult.totalResults === 0">
<localize key="general_searchNoResult"></localize>
</umb-empty-state>
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="vm.close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>
</div>

2
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
View File

@@ -41,8 +41,6 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
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) {

4
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
View File

@@ -32,10 +32,10 @@
<ul class="umb-card-grid -three-in-row">
<li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
ng-click="selectMacro(availableItem)">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<a class="umb-card-grid-item" href="" title="{{availableItem.name}}">
<span>
<i class="icon-settings-alt"></i>
{{ availableItem.name }}
{{availableItem.name}}
</span>
</a>
</li>

32
src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.controller.js
View File

@@ -1,14 +1,43 @@
(function() {
"use strict";
function ParameterEditorController($scope, formHelper) {
function ParameterEditorController($scope, formHelper, editorService) {
const vm = this;
vm.submit = submit;
vm.close = close;
vm.openMacroParameterPicker = openMacroParameterPicker;
function openMacroParameterPicker(parameter) {
vm.focusOnMandatoryField = false;
var overlay = {
parameter: $scope.model.parameter,
view: "views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html",
size: "small",
submit: function (model) {
vm.focusOnMandatoryField = true;
// update property
parameter.editor = model.parameter.editor;
editorService.close();
},
close: function (model) {
editorService.close();
}
};
editorService.open(overlay);
}
function submit() {
console.log("model", $scope.model);
if ($scope.model && $scope.model.submit && formHelper.submitForm({scope: $scope})) {
$scope.model.submit($scope.model);
}
@@ -19,7 +48,6 @@
$scope.model.close();
}
}
}
angular.module("umbraco").controller("Umbraco.Editors.ParameterEditorController", ParameterEditorController);

61
src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
View File

@@ -1,34 +1,62 @@
<div ng-controller="Umbraco.Editors.ParameterEditorController as vm">
<form novalidate name="parameterForm" val-form-manager>
<form name="parameterForm" novalidate val-form-manager>
<umb-editor-view>
<umb-editor-header name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content class="block-form">
<umb-box-content class="block-form content-type-editor-dialog edit-property-settings">
<umb-control-group label="@general_name" description="">
<input type="text" ng-model="model.parameter.label" umb-auto-focus required />
</umb-control-group>
<div class="umb-control-group" ng-if="!model.parameter.locked">
<div class="control-group">
<textarea class="editor-label"
data-element="property-name"
name="propertyLabel"
ng-model="model.parameter.label"
localize="placeholder"
placeholder="@placeholders_entername"
umb-auto-focus
focus-on-filled="true"
umb-auto-resize
required
ng-keypress="vm.submitOnEnter($event)">
</textarea>
<div ng-messages="parameterForm.propertyLabel.$error" show-validation-on-submit>
<span class="umb-validation-label" ng-message="required">Required label</span>
</div>
</div>
<div class="control-group -no-margin">
<umb-generate-alias enable-lock="true" alias-from="model.parameter.label" alias="model.parameter.key"></umb-generate-alias>
</div>
</div>
<umb-control-group label="@general_alias" description="">
<input type="text" ng-model="model.parameter.key" required />
</umb-control-group>
<a data-element="editor-add" href="" ng-if="!model.parameter.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openMacroParameterPicker(model.parameter)">
<localize key="shortcuts_addEditor"></localize>
</a>
<umb-control-group label="Editor" description="">
<select required class="input-block-level" ng-model="model.parameter.editor" ng-options="i.alias as (i.name) for i in model.editors"></select>
</umb-control-group>
<div class="editor clearfix" ng-if="model.parameter.editor">
<a href="" class="editor-icon-wrapper" ng-click="vm.openMacroParameterPicker(model.parameter)">
<i class="icon {{model.parameter.dataTypeIcon}}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}"></i>
</a>
<div class="editor-details">
<a href="" class="editor-name" ng-click="vm.openMacroParameterPicker(model.parameter)">{{model.parameter.dataTypeName}}</a>
<a href="" class="editor-editor" ng-click="vm.openMacroParameterPicker(model.parameter)">{{model.parameter.editor}}</a>
</div>
</div>
</umb-box-content>
</umb-box>
@@ -40,6 +68,7 @@
<umb-button type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="vm.close()">
</umb-button>
<umb-button type="button"

17
src/Umbraco.Web.UI.Client/src/views/macros/macros.edit.controller.js
View File

@@ -68,18 +68,6 @@ function MacrosEditController($scope, $q, $routeParams, macroResource, editorSta
return deferred.promise;
}
function getParameterEditors() {
var deferred = $q.defer();
macroResource.getParameterEditors().then(function (data) {
deferred.resolve(data);
}, function () {
deferred.reject();
});
return deferred.promise;
}
function getMacro() {
var deferred = $q.defer();
@@ -110,7 +98,6 @@ function MacrosEditController($scope, $q, $routeParams, macroResource, editorSta
vm.page.loading = true;
vm.promises['partialViews'] = getPartialViews();
vm.promises['parameterEditors'] = getParameterEditors();
vm.promises['macro'] = getMacro();
vm.views = [];
@@ -126,10 +113,6 @@ function MacrosEditController($scope, $q, $routeParams, macroResource, editorSta
vm.views = values[key];
}
if (key === 'parameterEditors') {
vm.parameterEditors = values[key];
}
if (key === 'macro') {
bindMacro(values[key]);
}

57
src/Umbraco.Web.UI.Client/src/views/macros/views/macro.parameters.controller.js
View File

@@ -6,7 +6,15 @@
* @description
* The controller for editing macros parameters
*/
function MacrosParametersController($scope, editorService, localizationService) {
function MacrosParametersController($scope, $q, editorService, localizationService, macroResource) {
const vm = this;
vm.add = add;
vm.edit = edit;
vm.remove = remove;
vm.labels = {};
$scope.sortableOptions = {
axis: 'y',
@@ -21,17 +29,17 @@ function MacrosParametersController($scope, editorService, localizationService)
};
$scope.remove = function (parameter, evt) {
function remove(parameter, evt) {
evt.preventDefault();
$scope.model.macro.parameters = _.without($scope.model.macro.parameters, parameter);
setDirty();
}
$scope.add = function (evt) {
function add(evt) {
evt.preventDefault();
openOverlay({}, $scope.labels.addParameter, (newParameter) => {
openOverlay({}, vm.labels.addParameter, (newParameter) => {
if (!$scope.model.macro.parameters) {
$scope.model.macro.parameters = [];
}
@@ -40,23 +48,43 @@ function MacrosParametersController($scope, editorService, localizationService)
});
}
$scope.edit = function (parameter, evt) {
function edit(parameter, evt) {
evt.preventDefault();
openOverlay(parameter, $scope.labels.editParameter, (newParameter) => {
parameter.key = newParameter.key;
parameter.label = newParameter.label;
parameter.editor = newParameter.editor;
setDirty();
var promises = [
getParameterEditorByAlias(parameter.editor)
];
$q.all(promises).then(function (values) {
parameter.dataTypeName = values[0].name;
openOverlay(parameter, vm.labels.editParameter, (newParameter) => {
parameter.key = newParameter.key;
parameter.label = newParameter.label;
parameter.editor = newParameter.editor;
setDirty();
});
});
}
function getParameterEditorByAlias(alias) {
var deferred = $q.defer();
macroResource.getParameterEditorByAlias(alias).then(function (data) {
deferred.resolve(data);
}, function () {
deferred.reject();
});
return deferred.promise;
}
function openOverlay(parameter, title, onSubmit) {
const ruleDialog = {
title: title,
parameter: _.clone(parameter),
editors : $scope.model.parameterEditors,
view: "views/macros/infiniteeditors/parameter.html",
size: "small",
submit: function (model) {
@@ -69,7 +97,6 @@ function MacrosParametersController($scope, editorService, localizationService)
};
editorService.open(ruleDialog);
}
function setDirty() {
@@ -78,10 +105,8 @@ function MacrosParametersController($scope, editorService, localizationService)
function init() {
localizationService.localizeMany(["macro_addParameter", "macro_editParameter"]).then(function (data) {
$scope.labels = {
addParameter: data[0],
editParameter: data[1]
}
vm.labels.addParameter = data[0];
vm.labels.editParameter = data[1];
});
}

55
src/Umbraco.Web.UI.Client/src/views/macros/views/parameters.html
View File

@@ -1,33 +1,34 @@
<umb-box>
<umb-box-content>
<div class="sub-view-columns">
<div class="sub-view-column-left">
<h5><localize key="macro_parameters">Parameters</localize></h5>
<small><localize key="macro_parametersDescription">Define the parameters that should be available when using this macro.</localize></small>
</div>
<div class="sub-view-column-right">
<div class="umb-property-editor form-horizontal" ng-controller="Umbraco.Editors.Macros.ParametersController">
<div ui-sortable="sortableOptions" ng-model="model.macro.parameters">
<div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="parameter in model.macro.parameters track by $id(parameter)">
<i class="icon icon-navigation handle"></i>
<div class="umb-prevalues-multivalues__left">
<span>{{parameter.label}}</span>&nbsp;<span class="muted">({{parameter.key}})</span>:&nbsp;<small>{{parameter.editor}}</small>
</div>
<div class="umb-prevalues-multivalues__right">
<a class="umb-node-preview__action" ng-click="edit(parameter, $event)"><localize key="general_edit">Edit</localize></a>
<a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(parameter, $event)"><localize key="general_remove">Remove</localize></a>
<div ng-controller="Umbraco.Editors.Macros.ParametersController as vm">
<umb-box>
<umb-box-content>
<div class="sub-view-columns">
<div class="sub-view-column-left">
<h5><localize key="macro_parameters">Parameters</localize></h5>
<small><localize key="macro_parametersDescription">Define the parameters that should be available when using this macro.</localize></small>
</div>
<div class="sub-view-column-right">
<div class="umb-property-editor form-horizontal">
<div ui-sortable="sortableOptions" ng-model="model.macro.parameters">
<div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="parameter in model.macro.parameters track by $id(parameter)">
<i class="icon icon-navigation handle"></i>
<div class="umb-prevalues-multivalues__left">
<span>{{parameter.label}}</span>&nbsp;<span class="muted">({{parameter.key}})</span>:&nbsp;<small>{{parameter.editor}}</small>
</div>
<div class="umb-prevalues-multivalues__right">
<a class="umb-node-preview__action" ng-click="vm.edit(parameter, $event)"><localize key="general_edit">Edit</localize></a>
<a class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove(parameter, $event)"><localize key="general_remove">Remove</localize></a>
</div>
</div>
</div>
<umb-button type="button"
button-style="info"
action="vm.add($event)"
label-key="general_add">
</umb-button>
</div>
<umb-button
type="button"
button-style="info"
action="add($event)"
label-key="general_add">
</umb-button>
</div>
</div>
</div>
</umb-box-content>
</umb-box>
</umb-box-content>
</umb-box>
</div>

2
src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
View File

@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Editors.Macros.SettingsController">
<div ng-controller="Umbraco.Editors.Macros.SettingsController as vm">
<umb-box>
<umb-box-header title="Info"></umb-box-header>
<umb-box-content>

33
src/Umbraco.Web/Editors/MacrosController.cs
View File

@@ -229,6 +229,39 @@ namespace Umbraco.Web.Editors
return this.Request.CreateResponse(HttpStatusCode.OK, Current.ParameterEditors);
}
/// <summary>
/// Gets the available parameter editors grouped by their group.
/// </summary>
/// <returns>
/// The <see cref="HttpResponseMessage"/>.
/// </returns>
public HttpResponseMessage GetGroupedParameterEditors()
{
var parameterEditors = Current.ParameterEditors.ToArray();
var grouped = parameterEditors
.GroupBy(x => x.Group.IsNullOrWhiteSpace() ? "" : x.Group.ToLower())
.OrderBy(x => x.Key)
.ToDictionary(group => group.Key, group => group.OrderBy(d => d.Name).AsEnumerable());
return this.Request.CreateResponse(HttpStatusCode.OK, grouped);
}
/// <summary>
/// Get parameter editor by alias.
/// </summary>
/// <returns>
/// The <see cref="HttpResponseMessage"/>.
/// </returns>
public HttpResponseMessage GetParameterEditorByAlias(string alias)
{
var parameterEditors = Current.ParameterEditors.ToArray();
var parameterEditor = parameterEditors.FirstOrDefault(x => x.Alias.InvariantEquals(alias));
return this.Request.CreateResponse(HttpStatusCode.OK, parameterEditor);
}
/// <summary>
/// Returns a error response and optionally logs it
/// </summary>