From 9859f1b0d385972f14b85e971ac2c23bce46ee1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 12 Mar 2020 15:48:26 +0100
Subject: [PATCH] clean up and prepare for implementing settings

---
 .../common/services/blockeditor.service.js    | 31 ++++++++++----
 .../blockeditor.controller.js}                |  5 ++-
 .../blockeditor.html}                         | 14 +++++--
 .../blocklist/blocklist.component.html        |  6 +++
 .../blocklist/blocklist.component.js          | 42 +++++++++++++------
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 8 files changed, 75 insertions(+), 26 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/{elementeditor/elementeditor.controller.js => blockeditor/blockeditor.controller.js} (75%)
 rename src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/{elementeditor/elementeditor.html => blockeditor/blockeditor.html} (69%)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js
index c6613e0c60..8df95bb684 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js
@@ -82,12 +82,10 @@
 
 
         /**
-         * Used to create a scoped watcher for a property on a blockModel.
+         * Used to create a scoped watcher for a content property on a blockModel.
          */
-        function createPropWatcher(blockModel, prop)  {
-
+        function createContentModelPropWatcher(blockModel, prop)  {
             return function() {
-
                 // sync data:
                 blockModel.contentModel[prop.alias] = prop.value;
 
@@ -95,7 +93,16 @@
                 // TODO: could use a debounce.
                 blockModel.label = getBlockLabel(blockModel);
             }
+        }
 
+        /**
+         * Used to create a scoped watcher for a settings property on a blockModel.
+         */
+        function createSettingsModelPropWatcher(blockModel, prop)  {
+            return function() {
+                // sync data:
+                blockModel.layoutModel.settings[prop.alias] = prop.value;
+            }
         }
 
 
@@ -143,7 +150,7 @@
                 this.blockConfigurations.forEach(blockConfiguration => {
                     scaffoldAliases.push(blockConfiguration.contentTypeAlias);
                     if (blockConfiguration.settingsElementTypeAlias != null) {
-                        scaffoldAliases.push(elementType.settingsElementTypeAlias);
+                        scaffoldAliases.push(blockConfiguration.settingsElementTypeAlias);
                     }
                 });
 
@@ -233,7 +240,12 @@
                 blockModel.layoutModel = layoutEntry;
                 blockModel.watchers = [];
 
-                // TODO: settings
+                // TODO: implement settings
+
+                // create ElementTypeModel of settings
+                // store ElementTypeModel in blockModel.settings
+                // setup watchers for mapping
+
 
                 // Add blockModel to our isolated scope to enable watching its values:
                 this.isolatedScope.blockModels["_"+blockModel.key] = blockModel;
@@ -249,7 +261,7 @@
                         // Do notice that it is not performing a deep watch, meaning that we are only watching primatives and changes directly to the object of property-value.
                         // But we like to sync non-primative values as well! Yes, and this does happen, just not through this code, but through the nature of JavaScript. 
                         // Non-primative values act as references to the same data and are therefor synced.
-                        blockModel.watchers.push(this.isolatedScope.$watch("blockModels._"+blockModel.key+".content.variants[0].tabs["+t+"].properties["+p+"].value", createPropWatcher(blockModel, prop)));
+                        blockModel.watchers.push(this.isolatedScope.$watch("blockModels._"+blockModel.key+".content.variants[0].tabs["+t+"].properties["+p+"].value", createContentModelPropWatcher(blockModel, prop)));
                     }
                 }
 
@@ -286,7 +298,8 @@
 
                 mapToPropertyModel(blockModel.content, blockModel.contentModel);
 
-                // TODO: sync settings to layout entry.
+                // TODO: implement settings, sync settings to layout entry.
+                // mapToPropertyModel(blockModel.settings, blockModel.layoutModel.settings)
 
             },
 
@@ -318,7 +331,7 @@
                 }
 
                 if (blockConfiguration.settingsElementTypeAlias != null) {
-                    // TODO: Settings.
+                    entry.settings = {};
                 }
                 
                 return entry;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.controller.js
similarity index 75%
rename from src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.controller.js
index a054e64784..fea337f31f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.controller.js
@@ -1,12 +1,15 @@
 //used for the media picker dialog
 angular.module("umbraco")
-.controller("Umbraco.Editors.ElementEditorController",
+.controller("Umbraco.Editors.BlockEditorController",
     function ($scope) {
 
         var vm = this;
 
         vm.content = $scope.model.content;
 
+        // TODO: implement settings — do notice that settings is optional.
+        //vm.settings = $scope.model.settings;
+
         vm.title = $scope.model.title;
 
         vm.saveAndClose = function() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.html
similarity index 69%
rename from src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.html
index e5c43468af..b52480c2a7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.html
@@ -1,6 +1,6 @@
-<div class="umb-element-editor"  ng-controller="Umbraco.Editors.ElementEditorController as vm">
+<div class="umb-block-editor"  ng-controller="Umbraco.Editors.BlockEditorController as vm">
 
-    <ng-form name="elementTypeForm" val-form-manager>
+    <ng-form name="blockForm" val-form-manager>
         <umb-editor-view ng-if="!page.loading">
 
             <umb-editor-header
@@ -14,7 +14,15 @@
 
             <div class="umb-editor-container umb-panel-body umb-scrollable row-fluid">
 
-                <!-- Missing Deleted Message Bar (Displayed when viewing node in recycle bin) -->
+                <!-- Missing Deleted Message Bar (Displayed when viewing node in recycle bin), but Blocks dosnt go into trash-bin, so does not make sense currently
+                    <div ng-show="vm.content.trashed" class="umb-editor--trashed-message">
+                        <i class="icon icon-trash"></i> <localize key="content_nodeIsInTrash">This item is in the Recycle Bin</localize>
+                    </div>
+                -->
+
+                <!-- Missing content apps? — but i'm not sure content apps will or can work for ElementTypes? -->
+
+                <!-- TODO: implement settings -->
 
                 <div class="umb-pane">
                     <div class="umb-editor-sub-views" val-sub-view>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
index 07a07ee529..7f002846d7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
@@ -19,6 +19,12 @@
                     </div>
 
                     <div class="umb-block-list__block--actions">
+                        <button type="button" class="btn-reset action --copy" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
+                            <i class="icon icon-settings" aria-hidden="true"></i>
+                            <span class="sr-only">
+                                <localize key="general_settings">Settings</localize>
+                            </span>
+                        </button>
                         <button type="button" class="btn-reset action --copy" localize="title" title="actions_copy" ng-click="vm.blockEditorApi.requestCopyBlock(block);" ng-if="vm.showCopy">
                             <i class="icon icon-documents" aria-hidden="true"></i>
                             <span class="sr-only">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
index b5c42f5cf6..6021b17b91 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
@@ -123,6 +123,9 @@
             // Lets apply fallback views, and make the view available directly on the blockModel.
             block.view = block.config.view || vm.model.config.useInlineEditingAsDefault ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html";
 
+            block.showSettings = block.config.settingsElementTypeAlias != null;
+            console.log(block)
+
             return block;
         }
 
@@ -184,15 +187,20 @@
 
             // make a clone to avoid editing model directly.
             var blockContentModelClone = angular.copy(blockModel.content);
+
+            // TODO: implement settings
+            // Settings should be available as a tab in this overlay:
+            //var blockSettingsModelClone = angular.copy(blockModel.settings);
             
-            var elementEditorModel = {
+            var blockEditorModel = {
                 content: blockContentModelClone,
+                //settings: blockSettingsModelClone,
                 title: blockModel.label,
-                view: "views/common/infiniteeditors/elementeditor/elementeditor.html",
+                view: "views/common/infiniteeditors/blockeditor/blockeditor.html",
                 size: blockModel.config.overlaySize || "medium",
-                submit: function(elementEditorModel) {
+                submit: function(blockEditorModel) {
                     // To ensure syncronization gets tricked we transfer
-                    blockEditorService.mapElementTypeValues(elementEditorModel.content, blockModel.content)
+                    blockEditorService.mapElementTypeValues(blockEditorModel.content, blockModel.content)
                     editorService.close();
                 },
                 close: function() {
@@ -201,7 +209,7 @@
             };
 
             // open property settings editor
-            editorService.open(elementEditorModel);
+            editorService.open(blockEditorModel);
         }
 
         vm.showCreateDialog = showCreateDialog;
@@ -244,7 +252,7 @@
                 },
                 close: function () {
                     vm.blockTypePicker.show = false;
-                    vm.blockTypePicker = null;
+                    delete vm.blockTypePicker;
                 }
             };
 
@@ -372,6 +380,21 @@
             });
         }
 
+        function openSettingsForBlock() {
+            alert("settings not implemented jet.");
+        }
+
+
+
+        vm.blockEditorApi = {
+            editBlock: editBlock,
+            requestCopyBlock: requestCopyBlock,
+            requestDeleteBlock: requestDeleteBlock,
+            deleteBlock: deleteBlock,
+            openSettingsForBlock: openSettingsForBlock
+        }
+
+
 
         var runtimeSortVars = {};
 
@@ -412,13 +435,6 @@
             }
         };
 
-        vm.blockEditorApi = {
-            editBlock: editBlock,
-            requestCopyBlock: requestCopyBlock,
-            requestDeleteBlock: requestDeleteBlock,
-            deleteBlock: deleteBlock
-        }
-
 
         function onAmountOfBlocksChanged() {
 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 85eaa34319..8cf820c808 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -16,6 +16,7 @@
     <key alias="createGroup">Opret gruppe</key>
     <key alias="delete">Slet</key>
     <key alias="disable">Deaktivér</key>
+    <key alias="editSettings">Edit settings</key>
     <key alias="emptyRecycleBin">Tøm papirkurv</key>
     <key alias="enable">Aktivér</key>
     <key alias="exportDocumentType">Eksportér dokumenttype</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 91311773dd..0bec0697db 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -16,6 +16,7 @@
     <key alias="createGroup">Create group</key>
     <key alias="delete">Delete</key>
     <key alias="disable">Disable</key>
+    <key alias="editSettings">Edit settings</key>
     <key alias="emptyRecycleBin">Empty recycle bin</key>
     <key alias="enable">Enable</key>
     <key alias="exportDocumentType">Export Document Type</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 4517598fdd..157c6089a9 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -16,6 +16,7 @@
     <key alias="createGroup">Create group</key>
     <key alias="delete">Delete</key>
     <key alias="disable">Disable</key>
+    <key alias="editSettings">Edit settings</key>
     <key alias="emptyRecycleBin">Empty recycle bin</key>
     <key alias="enable">Enable</key>
     <key alias="exportDocumentType">Export Document Type</key>