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

Grid row configuration delete confirm (#8005)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-07-23 16:27:58 +02:00
committed by GitHub
parent 41d1e33fc4
commit a1465dea75
5 changed files with 87 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js
-16
View File
@@ -1,16 +0,0 @@
function DeleteRowConfirmController($scope) {
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
$scope.submit = function() {
if($scope.model && $scope.model.submit) {
$scope.model.submit($scope.model);
}
}
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController", DeleteRowConfirmController);
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
-46
View File
@@ -1,46 +0,0 @@
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController">
<umb-editor-view>
<umb-editor-container>
<umb-box>
<umb-box-content>
<h3 class="alert alert-danger ng-scope"><localize key="grid_warning">Warning!</localize></h3>
<p>
<localize key="grid_youAreDeleting">You are deleting the row configuration </localize> <strong>{{model.dialogData.rowName}}</strong>
</p>
<p>
<localize key="grid_deletingARow">
Modifying a row configuration name will result in loss of
data for any existing content that is based on this configuration.
</localize>
</p>
<p>
<localize key="general_areyousure">Are you sure?</localize>
</p>
</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="close()">
</umb-button>
<umb-button type="button"
button-style="danger"
label-key="general_delete"
action="submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-view>
</div>
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
+56 -44
View File
@@ -1,6 +1,22 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
function ($scope, gridService, editorService) {
function ($scope, gridService, editorService, localizationService, overlayService) {
var vm = this;
vm.configureTemplate = configureTemplate;
vm.deleteTemplate = deleteTemplate;
vm.configureLayout = configureLayout;
vm.deleteLayout = deleteLayout;
vm.toggleCollection = toggleCollection;
vm.percentage = percentage;
vm.zeroWidthFilter = zeroWidthFilter;
vm.removeConfigValue = removeConfigValue;
vm.editConfig = editConfig;
vm.editStyles = editStyles;
var emptyModel = {
styles: [
@@ -73,19 +89,17 @@ angular.module("umbraco")
};
/****************
template
Template
*****************/
$scope.configureTemplate = function (template) {
function configureTemplate(template) {
var index = $scope.model.value.templates.indexOf(template);
if (template === undefined) {
template = {
name: "",
sections: [
]
sections: []
};
}
@@ -109,28 +123,24 @@ angular.module("umbraco")
};
editorService.open(layoutConfigOverlay);
}
};
$scope.deleteTemplate = function (index) {
function deleteTemplate(index) {
$scope.model.value.templates.splice(index, 1);
};
}
/****************
Row
*****************/
$scope.configureLayout = function (layout) {
function configureLayout(layout) {
var index = $scope.model.value.layouts.indexOf(layout);
if (layout === undefined) {
layout = {
name: "",
areas: [
]
areas: []
};
}
@@ -154,35 +164,37 @@ angular.module("umbraco")
};
editorService.open(rowConfigOverlay);
}
};
function deleteLayout(layout, index, event) {
//var rowDeletesPending = false;
$scope.deleteLayout = function (index) {
var rowDeleteOverlay = {
dialogData: {
rowName: $scope.model.value.layouts[index].name
},
view: "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html",
size: "small",
const dialog = {
view: "views/propertyEditors/grid/overlays/rowdeleteconfirm.html",
layout: layout,
submitButtonLabelKey: "contentTypeEditor_yesDelete",
submitButtonStyle: "danger",
submit: function (model) {
$scope.model.value.layouts.splice(index, 1);
editorService.close();
overlayService.close();
},
close: function (model) {
editorService.close();
close: function () {
overlayService.close();
}
};
editorService.open(rowDeleteOverlay);
};
localizationService.localize("general_delete").then(value => {
dialog.title = value;
overlayService.open(dialog);
});
event.preventDefault();
event.stopPropagation();
}
/****************
utillities
Utilities
*****************/
$scope.toggleCollection = function (collection, toggle) {
function toggleCollection(collection, toggle) {
if (toggle) {
collection = [];
} else {
@@ -190,21 +202,21 @@ angular.module("umbraco")
}
};
$scope.percentage = function (spans) {
function percentage(spans) {
return ((spans / $scope.model.value.columns) * 100).toFixed(8);
};
}
$scope.zeroWidthFilter = function (cell) {
function zeroWidthFilter(cell) {
return cell.grid > 0;
};
}
/****************
Config
*****************/
$scope.removeConfigValue = function (collection, index) {
function removeConfigValue(collection, index) {
collection.splice(index, 1);
};
}
var editConfigCollection = function (configValues, title, callback) {
@@ -225,27 +237,27 @@ angular.module("umbraco")
editorService.open(editConfigCollectionOverlay);
};
$scope.editConfig = function () {
function editConfig() {
editConfigCollection($scope.model.value.config, "Settings", function (data) {
$scope.model.value.config = data;
});
};
}
$scope.editStyles = function () {
function editStyles() {
editConfigCollection($scope.model.value.styles, "Styling", function (data) {
$scope.model.value.styles = data;
});
};
}
/****************
editors
Editors
*****************/
gridService.getGridEditors().then(function (response) {
$scope.editors = response.data;
});
/* init grid data */
/* Init grid data */
if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) {
$scope.model.value = emptyModel;
} else {
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
+15 -18
View File
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController as vm" class="usky-grid usky-grid-configuration">
<div class="grid-layout">
<div class="control-group uSky-templates">
@@ -17,14 +17,13 @@
<li ng-repeat="template in model.value.templates" class="clearfix">
<div ng-click="configureTemplate(template)"
class="preview-rows layout">
<div ng-click="vm.configureTemplate(template)" class="preview-rows layout">
<div class="preview-row">
<div class="preview-col"
ng-class="{last:$last}"
ng-repeat="section in template.sections | filter:zeroWidthFilter"
ng-style="{width: percentage(section.grid) + '%', height: '60px', 'max-width': '100%'}">
ng-repeat="section in template.sections | filter: vm.zeroWidthFilter"
ng-style="{width: vm.percentage(section.grid) + '%', height: '60px', 'max-width': '100%'}">
<div class="preview-cell"></div>
</div>
</div>
@@ -32,7 +31,7 @@
<div>
{{template.name}} <br />
<button type="button" class="btn btn-small btn-link" ng-click="deleteTemplate($index)">
<button type="button" class="btn btn-small btn-link" ng-click="vm.deleteTemplate($index)">
<i class="icon-delete red" aria-hidden="true"></i>
<localize key="general_delete">Delete</localize>
</button>
@@ -41,8 +40,7 @@
</li>
</ul>
<button type="button" class="btn btn-small btn-info"
ng-click="configureTemplate()">
<button type="button" class="btn btn-small btn-info" ng-click="vm.configureTemplate()">
<i class="icon-add" aria-hidden="true"></i>
<localize key="grid_addGridLayout" />
</button>
@@ -66,14 +64,13 @@
<li ng-repeat="layout in model.value.layouts" class="clearfix">
<div ng-click="configureLayout(layout)"
class="preview-rows columns">
<div ng-click="vm.configureLayout(layout)" class="preview-rows columns">
<div class="preview-row">
<div class="preview-col"
ng-class="{last:$last}"
ng-repeat="area in layout.areas | filter:zeroWidthFilter"
ng-style="{width: percentage(area.grid) + '%', 'max-width': '100%'}">
ng-repeat="area in layout.areas | filter: vm.zeroWidthFilter"
ng-style="{width: vm.percentage(area.grid) + '%', 'max-width': '100%'}">
<div class="preview-cell">
<p ng-show="area.maxItems > 0">{{area.maxItems}}</p>
@@ -84,7 +81,7 @@
<div>
{{layout.label || layout.name}}<br />
<button type="button" class="btn btn-small btn-link" ng-click="deleteLayout($index)">
<button type="button" class="btn btn-small btn-link" ng-click="vm.deleteLayout(layout, $index, $event)">
<i class="icon-delete red" aria-hidden="true"></i>
<localize key="general_delete">Delete</localize>
</button>
@@ -93,7 +90,7 @@
</li>
</ul>
<button type="button" class="btn btn-small" ng-click="configureLayout()">
<button type="button" class="btn btn-small btn-info" ng-click="vm.configureLayout()">
<i class="icon-add" aria-hidden="true"></i>
<localize key="grid_addRowConfiguration">Add row configuration</localize>
</button>
@@ -121,7 +118,7 @@
<li ng-repeat="configValue in model.value.config">
<i class="icon icon-navigation handle" aria-hidden="true"></i>
<button type="button" class="btn-link" ng-click="removeConfigValue(model.value.config, $index)">
<button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.config, $index)">
<i class="icon icon-delete red" aria-hidden="true"></i>
{{configValue.label}}
</button>
@@ -130,7 +127,7 @@
<ul class="unstyled list-icons">
<li>
<button type="button" ng-click="editConfig()" class="btn-link">
<button type="button" ng-click="vm.editConfig()" class="btn-link">
<i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
<localize key="general_edit">Edit</localize>
</button>
@@ -149,7 +146,7 @@
<li ng-repeat="style in model.value.styles">
<i class="icon icon-navigation handle" aria-hidden="true"></i>
<button type="button" class="btn-link" ng-click="removeConfigValue(model.value.styles, $index)">
<button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.styles, $index)">
<i class="icon icon-delete red" aria-hidden="true"></i>
{{style.label}}
</button>
@@ -159,7 +156,7 @@
<ul class="unstyled list-icons">
<li>
<button type="button" ng-click="editStyles()" class="btn-link">
<button type="button" ng-click="vm.editStyles()" class="btn-link">
<i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
<localize key="general_edit">Edit</localize>
</button>
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/overlays/rowdeleteconfirm.html
+16
View File
@@ -0,0 +1,16 @@
<div>
<div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
<localize key="grid_youAreDeleting">You are deleting the row configuration</localize> <strong>{{model.layout.name}}</strong>.
</div>
<p>
<localize key="grid_deletingARow">
Modifying a row configuration name will result in loss of
data for any existing content that is based on this configuration.
</localize>
</p>
<localize key="defaultdialogs_confirmdelete"></localize>?
</div>