From 807f0be9dff5457b92dc2a903320daafc946ddc7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 20 Aug 2018 11:18:58 +0200 Subject: [PATCH 1/5] move compositions overlay to infinite editors folder --- .../compositions/compositions.controller.js | 0 .../compositions/compositions.html | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/Umbraco.Web.UI.Client/src/views/common/{overlays/contenttypeeditor => infiniteeditors}/compositions/compositions.controller.js (100%) rename src/Umbraco.Web.UI.Client/src/views/common/{overlays/contenttypeeditor => infiniteeditors}/compositions/compositions.html (100%) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html similarity index 100% rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html From 97b8aa8b3ac51e037c2eaf441395c8441c0e12a2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 20 Aug 2018 13:13:02 +0200 Subject: [PATCH 2/5] open compositions dialog through infinite editing --- .../components/umbgroupsbuilder.directive.js | 72 ++++---- .../src/common/services/editor.service.js | 18 ++ .../compositions/compositions.controller.js | 24 ++- .../compositions/compositions.html | 155 ++++++++++++------ 4 files changed, 181 insertions(+), 88 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js index 5a6fbb6963..7fb7cc6766 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js @@ -248,7 +248,6 @@ title: "Compositions", contentType: scope.model, compositeContentTypes: scope.model.compositeContentTypes, - view: "views/common/overlays/contenttypeeditor/compositions/compositions.html", confirmSubmit: { title: "Warning", description: "Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?", @@ -287,8 +286,7 @@ } // remove overlay - scope.compositionsDialogModel.show = false; - scope.compositionsDialogModel = null; + editorService.close(); } }, @@ -299,8 +297,7 @@ scope.model.compositeContentTypes = oldModel.contentType.compositeContentTypes; // remove overlay - scope.compositionsDialogModel.show = false; - scope.compositionsDialogModel = null; + editorService.close(); }, selectCompositeContentType: function (selectedContentType) { @@ -348,39 +345,40 @@ } }; - //select which resource methods to use, eg document Type or Media Type versions - var availableContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getAvailableCompositeContentTypes : mediaTypeResource.getAvailableCompositeContentTypes; - var whereUsedContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getWhereCompositionIsUsedInContentTypes : mediaTypeResource.getWhereCompositionIsUsedInContentTypes; - var countContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getCount : mediaTypeResource.getCount; - //get the currently assigned property type aliases - ensure we pass these to the server side filer - var propAliasesExisting = _.filter(_.flatten(_.map(scope.model.groups, function(g) { - return _.map(g.properties, function(p) { - return p.alias; - }); - })), function(f) { - return f !== null && f !== undefined; - }); - $q.all([ - //get available composite types - availableContentTypeResource(scope.model.id, [], propAliasesExisting).then(function (result) { - setupAvailableContentTypesModel(result); - }), - //get where used document types - whereUsedContentTypeResource(scope.model.id).then(function (whereUsed) { - //pass to the dialog model the content type eg documentType or mediaType - scope.compositionsDialogModel.section = scope.contentType; - //pass the list of 'where used' document types - scope.compositionsDialogModel.whereCompositionUsed = whereUsed; - }), - //get content type count - countContentTypeResource().then(function(result) { - scope.compositionsDialogModel.totalContentTypes = parseInt(result, 10); - }) - ]).then(function() { - //resolves when both other promises are done, now show it - scope.compositionsDialogModel.show = true; - }); + //select which resource methods to use, eg document Type or Media Type versions + var availableContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getAvailableCompositeContentTypes : mediaTypeResource.getAvailableCompositeContentTypes; + var whereUsedContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getWhereCompositionIsUsedInContentTypes : mediaTypeResource.getWhereCompositionIsUsedInContentTypes; + var countContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getCount : mediaTypeResource.getCount; + + //get the currently assigned property type aliases - ensure we pass these to the server side filer + var propAliasesExisting = _.filter(_.flatten(_.map(scope.model.groups, function(g) { + return _.map(g.properties, function(p) { + return p.alias; + }); + })), function(f) { + return f !== null && f !== undefined; + }); + $q.all([ + //get available composite types + availableContentTypeResource(scope.model.id, [], propAliasesExisting).then(function (result) { + setupAvailableContentTypesModel(result); + }), + //get where used document types + whereUsedContentTypeResource(scope.model.id).then(function (whereUsed) { + //pass to the dialog model the content type eg documentType or mediaType + scope.compositionsDialogModel.section = scope.contentType; + //pass the list of 'where used' document types + scope.compositionsDialogModel.whereCompositionUsed = whereUsed; + }), + //get content type count + countContentTypeResource().then(function(result) { + scope.compositionsDialogModel.totalContentTypes = parseInt(result, 10); + }) + ]).then(function() { + //resolves when both other promises are done, now show it + editorService.compositions(scope.compositionsDialogModel); + }); }; diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js index 800f150ee8..a9b155a1b7 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js @@ -175,6 +175,23 @@ open(editor); } + /** + * @ngdoc method + * @name umbraco.services.editorService#compositions + * @methodOf umbraco.services.editorService + * + * @description + * Opens the compositions editor in infinite editing, the submit callback returns selected compositions + * @param {Callback} editor.submit Submits the editor + * @param {Callback} editor.close Closes the editor + * @returns {Object} editor object + */ + function compositions(editor) { + editor.view = "views/common/infiniteeditors/compositions/compositions.html"; + editor.size = "small"; + open(editor); + } + /** * @ngdoc method * @name umbraco.services.editorService#mediaTypeEditor @@ -366,6 +383,7 @@ mediaPicker: mediaPicker, iconPicker: iconPicker, documentTypeEditor: documentTypeEditor, + compositions: compositions, mediaTypeEditor: mediaTypeEditor, queryBuilder: queryBuilder, treePicker: treePicker, diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js index 7e768336a6..4203537b5b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js @@ -4,20 +4,42 @@ function CompositionsOverlay($scope,$location) { var vm = this; + var oldModel = null; vm.isSelected = isSelected; vm.openContentType = openContentType; + vm.submit = submit; + vm.close = close; + + function onInit() { + console.log("on init"); + oldModel = angular.copy($scope.model); + } function isSelected(alias) { if($scope.model.contentType.compositeContentTypes.indexOf(alias) !== -1) { return true; } } + function openContentType(contentType, section) { - var url = (section === "documentType" ? "/settings/documenttypes/edit/" : "/settings/mediaTypes/edit/") + contentType.id; $location.path(url); } + + function submit() { + if ($scope.model && $scope.model.submit) { + $scope.model.submit($scope.model, oldModel); + } + } + + function close() { + if ($scope.model && $scope.model.close) { + $scope.model.close(oldModel); + } + } + + onInit(); } angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html index f2d8902f9d..806e03d178 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html @@ -1,58 +1,113 @@
-
-
- - -
-
+ -
- -
+
- - - - - - - -
    -
  • + + -
    - -
    + + + - +
    +
    + + +
    +
    + +
    + +
    + + + + + + + + + + + +
      +
    • + +
      + +
      + + + +
      • +
    + +     +     +     + + + + + + + + + + +
    • + + - -
From ab2571348668deb432a666d51004cf1fdb4b9f0b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 20 Aug 2018 14:16:16 +0200 Subject: [PATCH 3/5] remove unsed overlay component --- .../src/views/components/umb-groups-builder.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index 098f36cf20..4aa0072b6f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -299,12 +299,4 @@ - - - From b58bce7c6468d502bdb411f8cecbb22497f73525 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 20 Aug 2018 14:30:59 +0200 Subject: [PATCH 4/5] move confirm logic to compositions controller --- .../components/umbgroupsbuilder.directive.js | 50 ++++--------------- .../src/less/components/editor.less | 11 ++++ .../compositions/compositions.controller.js | 31 ++++++++++-- .../compositions/compositions.html | 12 ++++- 4 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js index 7fb7cc6766..475052358b 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js @@ -245,49 +245,19 @@ scope.openCompositionsDialog = function() { scope.compositionsDialogModel = { - title: "Compositions", contentType: scope.model, compositeContentTypes: scope.model.compositeContentTypes, - confirmSubmit: { - title: "Warning", - description: "Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?", - checkboxLabel: "I know what I'm doing", - enable: true - }, - submit: function(model, oldModel, confirmed) { + submit: function() { + + // make sure that all tabs has an init property + if (scope.model.groups.length !== 0) { + angular.forEach(scope.model.groups, function(group) { + addInitProperty(group); + }); + } - var compositionRemoved = false; - - // check if any compositions has been removed - for(var i = 0; oldModel.compositeContentTypes.length > i; i++) { - - var oldComposition = oldModel.compositeContentTypes[i]; - - if(_.contains(model.compositeContentTypes, oldComposition) === false) { - compositionRemoved = true; - } - - } - - // show overlay confirm box if compositions has been removed. - if(compositionRemoved && confirmed === false) { - - scope.compositionsDialogModel.confirmSubmit.show = true; - - // submit overlay if no compositions has been removed - // or the action has been confirmed - } else { - - // make sure that all tabs has an init property - if (scope.model.groups.length !== 0) { - angular.forEach(scope.model.groups, function(group) { - addInitProperty(group); - }); - } - - // remove overlay - editorService.close(); - } + // remove overlay + editorService.close(); }, close: function(oldModel) { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index e7564ca2ca..981b49979b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -266,3 +266,14 @@ a.umb-variant-switcher__toggle { margin-right: auto; padding-right: 10px; } + +/* Confirm */ +.umb-editor-confirm { + background-color: @white; + padding: 20px; + position: absolute; + left: 0; + bottom: 0; + z-index: 10; + box-shadow: 0 -3px 12px 0px rgba(0,0,0,0.16); +} diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js index 4203537b5b..54d5da29a8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js @@ -1,19 +1,28 @@ (function() { "use strict"; - function CompositionsOverlay($scope,$location) { + function CompositionsController($scope,$location) { var vm = this; var oldModel = null; + vm.showConfirmSubmit = false; + vm.isSelected = isSelected; vm.openContentType = openContentType; vm.submit = submit; vm.close = close; function onInit() { - console.log("on init"); + + /* make a copy of the init model so it is possible to roll + back the changes on cancel */ oldModel = angular.copy($scope.model); + + if(!$scope.model.title) { + $scope.model.title = "Compositions"; + } + } function isSelected(alias) { @@ -29,7 +38,21 @@ function submit() { if ($scope.model && $scope.model.submit) { - $scope.model.submit($scope.model, oldModel); + + // check if any compositions has been removed + vm.compositionRemoved = false; + for(var i = 0; oldModel.compositeContentTypes.length > i; i++) { + var oldComposition = oldModel.compositeContentTypes[i]; + if(_.contains($scope.model.compositeContentTypes, oldComposition) === false) { + vm.compositionRemoved = true; + } + } + + /* submit the form if there havne't been removed any composition + or the confirm checkbox has been checked */ + if(!vm.compositionRemoved || vm.allowSubmit) { + $scope.model.submit($scope.model); + } } } @@ -42,6 +65,6 @@ onInit(); } - angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay); + angular.module("umbraco").controller("Umbraco.Editors.CompositionsController", CompositionsController); })(); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html index 806e03d178..5d7a5420db 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html @@ -1,4 +1,4 @@ -
+
@@ -86,6 +86,16 @@ + +
+
Warning
+

Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?

+ +
+ From 745ac7600d8116fd1f83884dd630cc28fbeaffe8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 20 Aug 2018 14:42:18 +0200 Subject: [PATCH 5/5] remove compositions from the editorService again --- .../components/umbgroupsbuilder.directive.js | 4 +++- .../src/common/services/editor.service.js | 18 ------------------ 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js index 475052358b..11c94d04c0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js @@ -247,6 +247,8 @@ scope.compositionsDialogModel = { contentType: scope.model, compositeContentTypes: scope.model.compositeContentTypes, + view: "views/common/infiniteeditors/compositions/compositions.html", + size: "small", submit: function() { // make sure that all tabs has an init property @@ -347,7 +349,7 @@ }) ]).then(function() { //resolves when both other promises are done, now show it - editorService.compositions(scope.compositionsDialogModel); + editorService.open(scope.compositionsDialogModel); }); }; diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js index a9b155a1b7..800f150ee8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js @@ -175,23 +175,6 @@ open(editor); } - /** - * @ngdoc method - * @name umbraco.services.editorService#compositions - * @methodOf umbraco.services.editorService - * - * @description - * Opens the compositions editor in infinite editing, the submit callback returns selected compositions - * @param {Callback} editor.submit Submits the editor - * @param {Callback} editor.close Closes the editor - * @returns {Object} editor object - */ - function compositions(editor) { - editor.view = "views/common/infiniteeditors/compositions/compositions.html"; - editor.size = "small"; - open(editor); - } - /** * @ngdoc method * @name umbraco.services.editorService#mediaTypeEditor @@ -383,7 +366,6 @@ mediaPicker: mediaPicker, iconPicker: iconPicker, documentTypeEditor: documentTypeEditor, - compositions: compositions, mediaTypeEditor: mediaTypeEditor, queryBuilder: queryBuilder, treePicker: treePicker,