From 4a7ca963571f41c2c78d2b470480c9df6219af9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 10 Jan 2020 11:48:32 +0100
Subject: [PATCH] completing the datatype picker flow

---
 .../datatypeconfigurationpicker.controller.js | 14 +------
 .../datatypeconfigurationpicker.html          |  4 +-
 .../datatypepicker.controller.js              | 26 ++++++++++++-
 .../datatypepicker/datatypepicker.html        | 12 +++---
 .../propertysettings.controller.js            |  2 +-
 .../propertysettings/propertysettings.html    | 37 ++++++++++---------
 .../components/overlays/umb-overlay.html      |  2 +-
 .../views/documenttypes/edit.controller.js    |  2 +-
 .../nestedcontent/nestedcontent.controller.js |  4 +-
 9 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js
index f636072ca8..a0b3f35a57 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js
@@ -40,13 +40,6 @@
 
             dataTypeResource.getGroupedDataTypes().then(function(configs) {
                 
-                console.log("configs:");
-                console.log(configs);
-                
-                
-                console.log("$scope.model")
-                console.log($scope.model)
-                
                 var filteredConfigs = [];
                 
                 _.each(configs, function(configGroup) {
@@ -64,10 +57,10 @@
 
         }
         
-        function newConfig(propertyEditor) {
+        function newConfig() {
 
             var dataTypeSettings = {
-                propertyEditor: propertyEditor,
+                propertyEditor: $scope.model.dataType,
                 property: $scope.model.property,
                 contentTypeName: $scope.model.contentTypeName,
                 create: true,
@@ -89,7 +82,6 @@
 
         function pickConfig(selectedConfig) {
             selectedConfig.loading = true;
-            console.log("pickConfig:", selectedConfig)
             dataTypeResource.getById(selectedConfig.id).then(function(dataType) {
                 contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
                     selectedConfig.loading = false;
@@ -109,8 +101,6 @@
 
             $scope.model.updateSameDataTypes = isNew;
             
-            console.log("model submit");
-            
             $scope.model.submit($scope.model);
         }
         
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
index 01af551408..36c8292d4f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
@@ -19,7 +19,7 @@
 
                     <div ng-if="!vm.loading">
 
-                        <ul class="umb-card-grid -four-in-row">
+                        <ul class="umb-card-grid -three-in-row">
                             <li ng-repeat="dataTypeConfig in vm.configs | orderBy:'name'"
                                 data-element="datatypeconfig-{{dataTypeConfig.name}}"
                                 ng-click="vm.pickConfig(dataTypeConfig)">
@@ -34,7 +34,7 @@
                                 </a>
                             </li>
                         </ul>
-                        <ul class="umb-card-grid -four-in-row">
+                        <ul class="umb-card-grid -three-in-row">
                             <li ng-click="vm.newConfig()">
                                 <a class="umb-card-grid-item-slot" href="" title="Create a new configuration of {{ model.dataType.name }}">
                                     <span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
index c3b219d295..144dce3ecc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
@@ -22,6 +22,7 @@
         vm.searchResult = null;
         
         vm.pickType = pickType;
+        vm.pickEditor = pickEditor;
         vm.close = close;
         vm.searchTermChanged = searchTermChanged;
 
@@ -106,7 +107,7 @@
         
         function pickType(dataType) {
             
-            var dataTypeSettings = {
+            var dataTypeConfigurationPicker = {
                 dataType: dataType,
                 property: $scope.model.property,
                 contentTypeName: $scope.model.contentTypeName,
@@ -121,6 +122,29 @@
                 }
             };
 
+            editorService.open(dataTypeConfigurationPicker);
+
+        }
+
+        function pickEditor(propertyEditor) {
+
+            var dataTypeSettings = {
+                propertyEditor: propertyEditor,
+                property: $scope.model.property,
+                contentTypeName: $scope.model.contentTypeName,
+                create: true,
+                view: "views/common/infiniteeditors/datatypesettings/datatypesettings.html",
+                submit: function(model) {
+                    contentTypeResource.getPropertyTypeScaffold(model.dataType.id).then(function(propertyType) {
+                        $scope.model.submit(model);
+                        editorService.close();
+                    });
+                },
+                close: function() {
+                    editorService.close();
+                }
+            };
+
             editorService.open(dataTypeSettings);
 
         }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index 5d29f58665..dbc8b0235c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -34,8 +34,8 @@
 
                     <div ng-if="vm.loading === false && vm.showDataTypes === true">
                         <div ng-repeat="(key,value) in vm.dataTypes">
-                            <h5>{{key}}</h5>
-                            <ul class="umb-card-grid -four-in-row">
+                            <h5>{{key | umbCmsTitleCase}}</h5>
+                            <ul class="umb-card-grid -six-in-row">
                                 <li ng-repeat="dataType in value | orderBy:'name'"
                                     data-element="datatype-{{dataType.name}}"
                                     ng-click="vm.pickType(dataType)">
@@ -55,8 +55,8 @@
                         <h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultSettings"></localize></h5>
                         <div ng-repeat="result in vm.searchResult.configs">
                             <div ng-if="result.entries.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row">
+                                <h5>{{result.group | umbCmsTitleCase}}</h5>
+                                <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'"
                                         ng-mouseover="vm.showDetailsOverlay(dataType)"
                                         ng-click="vm.pickDataType(dataType)">
@@ -76,8 +76,8 @@
                         <h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultEditors"></localize></h5>
                         <div ng-repeat="result in vm.searchResult.dataTypes">
                             <div ng-if="result.entries.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row">
+                                <h5>{{result.group | umbCmsTitleCase}}</h5>
+                                <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'"
                                         ng-click="vm.pickEditor(dataType)">
                                         <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js
index b8581d28d0..eb279bddef 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js
@@ -112,7 +112,7 @@
                 property: $scope.model.property,
                 contentTypeName: $scope.model.contentTypeName,
                 view: "views/common/infiniteeditors/datatypepicker/datatypepicker.html",
-                size: "small",
+                size: "medium",
                 submit: function(model) {
 
                     $scope.model.updateSameDataTypes = model.updateSameDataTypes;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
index 4474390199..ef55c93217 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
@@ -19,7 +19,7 @@
                     <div class="content-type-editor-dialog edit-property-settings">
 
                         <div class="umb-control-group" ng-if="!model.property.locked">
-                            <div class="control-group">
+                            <div class="control-group -no-margin">
                                 <textarea class="editor-label"
                                           data-element="property-name"
                                           name="propertyLabel"
@@ -40,7 +40,7 @@
                                 <umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
                             </div>
                         </div>
-                    
+
                         <div class="umb-control-group control-group">
                             <textarea data-element="property-description"
                                     class="editor-description"
@@ -51,35 +51,38 @@
                                     umb-auto-resize>
                         </textarea>
                         </div>
-                    
+
                         <div class="editor-wrapper umb-control-group control-group" ng-model="model.property.editor" val-require-component ng-if="!model.property.locked">
-                    
+
                             <a data-element="editor-add" href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openDataTypePicker(model.property)">
-                                <localize key="shortcuts_addEditor"></localize>
+                                <localize key="defaultdialogs_selectEditor"></localize>
+                                <div ng-messages="model.property.editor" show-validation-on-submit>
+                                    <span class="umb-validation-label" ng-message="required">Required editor</span>
+                                </div>
                             </a>
-                    
+
                             <div class="editor clearfix" ng-if="model.property.editor">
-                    
+
                                 <a href="" class="editor-icon-wrapper" ng-click="vm.openDataTypePicker(model.property)">
                                     <i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
                                 </a>
-                    
+
                                 <div class="editor-details">
                                     <a href="" class="editor-name" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.dataTypeName }}</a>
                                     <a href="" class="editor-editor" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.editor }}</a>
                                 </div>
-                    
+
                                 <a href class="editor-settings-icon pull-right"
                                 ng-click="vm.openDataTypeSettings(model.property)"
                                 hotkey="alt+shift+d"
                                 ng-if="model.property.editor">
                                     <i class="icon icon-settings"></i>
                                 </a>
-                    
+
                             </div>
-                    
+
                         </div>
-                    
+
                         <div class="umb-control-group clearfix" ng-if="!model.property.locked">
 
                             <h5><localize key="validation_validation"></localize></h5>
@@ -132,9 +135,9 @@
 
                         </div>
                         <div class="umb-control-group clearfix" ng-if="model.contentType === 'documentType' && model.contentTypeAllowCultureVariant">
-                           
+
                                     <h5><localize key="contentTypeEditor_variantsHeading" /></h5>
-                             
+
                                     <umb-toggle data-element="permissions-allow-culture-variant"
                                                 checked="model.property.allowCultureVariant"
                                                 on-click="vm.toggleAllowCultureVariants()"
@@ -142,7 +145,7 @@
                                     </umb-toggle>
 
                         </div>
-                    
+
                         <div class="umb-control-group clearfix" ng-if="model.contentType === 'memberType'">
 
                             <h5><localize key="general_options"></localize></h5>
@@ -176,7 +179,7 @@
                                         checked="model.property.isSensitiveData"
                                         on-click="vm.toggleIsSensitiveData()">
                             </umb-toggle>
-                                                      
+
 
                         </div>
                     </div>
@@ -206,7 +209,7 @@
                     label-key="general_submit"
                     action="vm.submit(model)">
                 </umb-button>
-        
+
             </umb-editor-footer-content-right>
 
         </umb-editor-footer>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
index a19cf40e1a..39e0165fe8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -1,6 +1,6 @@
 <div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
     <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
-        <div data-element="overlay-header" class="umb-overlay-header">
+        <div data-element="overlay-header" class="umb-overlay-header" ng-show="!model.hideHeader">
             <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
             <p class="umb-overlay__subtitle" id="umb-overlay-description" ng-if="model.subtitle">{{model.subtitle}}</p>
         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
index b04cccbc0d..0ed76ed99b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
@@ -48,7 +48,7 @@
             "shortcuts_navigateSections",
             "shortcuts_addGroup",
             "shortcuts_addProperty",
-            "shortcuts_addEditor",
+            "defaultdialogs_selectEditor",
             "shortcuts_editDataType",
             "shortcuts_toggleListView",
             "shortcuts_toggleAllowAsRoot",
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index d625917afb..0a99b68a06 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -207,7 +207,8 @@
                 });
             });
 
-            vm.overlayMenu.title = vm.overlayMenu.pasteItems.length > 0 ? labels.grid_addElement : labels.content_createEmpty;
+            vm.overlayMenu.title = labels.grid_addElement;
+            vm.overlayMenu.hideHeader = vm.overlayMenu.pasteItems.length > 0;
 
             vm.overlayMenu.clickClearPaste = function ($event) {
                 $event.stopPropagation();
@@ -215,6 +216,7 @@
                 clipboardService.clearEntriesOfType("elementType", contentTypeAliases);
                 clipboardService.clearEntriesOfType("elementTypeArray", contentTypeAliases);
                 vm.overlayMenu.pasteItems = [];// This dialog is not connected via the clipboardService events, so we need to update manually.
+                vm.overlayMenu.hideHeader = false;
             };
 
             if (vm.overlayMenu.availableItems.length === 1 && vm.overlayMenu.pasteItems.length === 0) {