Reorder flow when adding a property to a group so you enter settings after choosing one + rearrange editor picker dialog with tabs.

2015-08-14 11:22:01 +02:00
parent 4fa08f28f9
commit d61ab5ff1a
6 changed files with 159 additions and 185 deletions
--- 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
@@ -330,7 +330,11 @@
          };

          scope.propertySettingsDialogModel.editDataType = function(property) {
-            scope.configDataType(property);
+
+            dataTypeResource.getById(property.dataTypeId).then(function(dataType) {
+              scope.configDataType(property, dataType, false);
+            });
+
          };

          scope.propertySettingsDialogModel.submit = function(model) {
@@ -387,46 +391,58 @@
        scope.propertyEditorDialogModel.view = "views/documentType/dialogs/property.html";
        scope.propertyEditorDialogModel.show = true;

-        scope.propertyEditorDialogModel.selectDataType = function(selectedDataType) {
+        scope.propertyEditorDialogModel.selectDataType = function(editor) {

-          if( selectedDataType.id !== null ) {
+          if( editor.id !== null ) {

-            contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType) {
+            dataTypeResource.getById(editor.id).then(function(dataType) {

-              property.config = propertyType.config;
-              property.editor = propertyType.editor;
-              property.view = propertyType.view;
-              property.dataTypeId = selectedDataType.id;
-              property.dataTypeIcon = selectedDataType.icon;
-              property.dataTypeName = selectedDataType.name;
+              // open data type settings dialog
+              scope.configDataType(property, dataType, false);
+
+              // remove dialog
+              scope.propertyEditorDialogModel.show = false;
+              scope.propertyEditorDialogModel = null;

            });

          } else {

-            // get data type scaffold
+            // create new data datype
            dataTypeResource.getScaffold().then(function(dataType) {

-              dataType.selectedEditor = selectedDataType.alias;
-              dataType.name = selectedDataType.name;
+              // set alias
+              dataType.selectedEditor = editor.alias;

-              // create prevalues for data type
-              var preValues = dataTypeHelper.createPreValueProps(dataType.preValues);
+              // set name
+              var nameArray = [];

-              // save data type
-              dataTypeResource.save(dataType, preValues, true).then(function(dataType) {
+              if(scope.model.name) {
+                nameArray.push(scope.model.name);
+              }

-                // get property scaffold
-                contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
+              if(property.label) {
+                nameArray.push(property.label);
+              }

-                  property.config = propertyType.config;
-                  property.editor = propertyType.editor;
-                  property.view = propertyType.view;
-                  property.dataTypeId = dataType.id;
-                  property.dataTypeIcon = dataType.icon;
-                  property.dataTypeName = dataType.name;
+              if(editor.name) {
+                nameArray.push(editor.name);
+              }

-                });
+              // make name
+              dataType.name = nameArray.join(" - ");
+
+              // get pre values
+              dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
+
+                dataType.preValues = preValues;
+
+                // open data type settings dialog
+                scope.configDataType(property, dataType, true);
+
+                // remove dialog
+                scope.propertyEditorDialogModel.show = false;
+                scope.propertyEditorDialogModel = null;

              });

@@ -434,10 +450,6 @@

          }

-          // remove dialog
-          scope.propertyEditorDialogModel.show = false;
-          scope.propertyEditorDialogModel = null;
-
        };

        scope.propertyEditorDialogModel.close = function(oldModel) {
@@ -449,39 +461,40 @@

      };

-      scope.configDataType = function(property) {
+      scope.configDataType = function(property, dataType, isNew) {

        scope.dataTypeSettingsDialogModel = {};
        scope.dataTypeSettingsDialogModel.title = "Edit data type";
-        scope.dataTypeSettingsDialogModel.dataType = {};
+        scope.dataTypeSettingsDialogModel.dataType = dataType;
        scope.dataTypeSettingsDialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
+        scope.dataTypeSettingsDialogModel.show = true;
+
+        scope.dataTypeSettingsDialogModel.submit = function(model) {
+
+          var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
+
+          dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
+
+            contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
+
+              property.config = propertyType.config;
+              property.editor = propertyType.editor;
+              property.view = propertyType.view;
+              property.dataTypeId = newDataType.id;
+              property.dataTypeIcon = newDataType.icon;
+              property.dataTypeName = newDataType.name;
+
+              // change all chosen datatypes to updated config
+              if(!isNew) {
+                updateSameDataTypes(property);
+              }
+
+              // remove dialog
+              scope.dataTypeSettingsDialogModel.show = false;
+              scope.dataTypeSettingsDialogModel = null;

-        dataTypeResource.getById(property.dataTypeId)
-            .then(function(dataType) {
-                scope.dataTypeSettingsDialogModel.dataType = dataType;
-                scope.dataTypeSettingsDialogModel.show = true;
            });

-        scope.dataTypeSettingsDialogModel.submit = function(model, isNew) {
-
-          contentTypeResource.getPropertyTypeScaffold(model.dataType.id).then(function(propertyType) {
-
-            property.config = propertyType.config;
-            property.editor = propertyType.editor;
-            property.view = propertyType.view;
-            property.dataTypeId = model.dataType.id;
-            property.dataTypeIcon = model.dataType.icon;
-            property.dataTypeName = model.dataType.name;
-
-            // change all chosen datatypes to updated config
-            if(!isNew) {
-              updateSameDataTypes(property);
-            }
-
-            // remove dialog
-            scope.dataTypeSettingsDialogModel.show = false;
-            scope.dataTypeSettingsDialogModel = null;
-
          });

        };
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -106,6 +106,11 @@ h5{
  margin-bottom: 15px !important;
 }

+.umb-control-group.-no-border {
+  border: none;
+}
+
+
 /*COMPACT MODE */
 .compact .umb-pane{margin: 0px 0px 15px 0px;}
 .compact .umb-control-group {
@@ -525,4 +530,4 @@ height:1px;
    margin: 10px 0;
    overflow: hidden; 

-}
+}
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editdatatype/editdatatype.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editdatatype/editdatatype.controller.js
@@ -7,74 +7,7 @@
 * The controller for the content type editor property dialog
 */
 function EditDataTypeController($scope, dataTypeResource, dataTypeHelper) {
-
-    var dataTypeNameCopy = "";
-
-    $scope.model.multiActions = [
-      {
-        key: "overwrite",
-        label: "Overwrite",
-        defaultAction: true,
-        action: function(model) {
-          saveDataType($scope.model.dataType, false);
-        }
-      },
-      {
-        key: "saveAsNew",
-        label: "Save as new",
-        action: function(model) {
-          saveDataType($scope.model.dataType, true);
-        }
-      }
-    ];
-
-    function activate() {
-      makeDataTypeNameCopy()
-    }
-
-    function makeDataTypeNameCopy() {
-      dataTypeNameCopy = angular.copy($scope.model.dataType.name);
-    }
-
-    $scope.dateTypeNameChange = function() {
-
-      // change default button to save as new when data type name changes
-      if( $scope.model.dataType.name !== dataTypeNameCopy) {
-        setDefaultMultiAction($scope.model.multiActions, "saveAsNew");
-      } else {
-        setDefaultMultiAction($scope.model.multiActions, "overwrite");
-      }
-
-    };
-
-    function setDefaultMultiAction(array, key) {
-
-      angular.forEach(array, function(arrayItem){
-        if(arrayItem.key === key) {
-          arrayItem.defaultAction = true;
-        } else {
-          arrayItem.defaultAction = false;
-        }
-      });
-
-    }
-
-    function saveDataType(dataType, isNew) {
-
-      var preValues = dataTypeHelper.createPreValueProps(dataType.preValues);
-
-      dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) {
-
-        $scope.model.dataType = dataType;
-
-        $scope.model.submit($scope.model, isNew);
-
-      });
-
-    }
-
-    activate();
-
+    
 }

 angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditDataTypeController", EditDataTypeController);
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editdatatype/editdatatype.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editdatatype/editdatatype.html
@@ -4,7 +4,8 @@
      <div class="umb-el-wrap">
        <label class="control-label" for="dataTypeName">Name</label>
        <div class="controls">
-          <input type="text" ng-model="model.dataType.name" ng-change="dateTypeNameChange()" class="umb-editor" />
+          <!-- ng-change="dateTypeNameChange()" -->
+          <input type="text" ng-model="model.dataType.name" class="umb-editor" />
        </div>
      </div>
    </div>
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.controller.js
@@ -8,45 +8,61 @@
 */
 function DocumentTypePropertyController($scope, dataTypeResource) {

-	$scope.dataTypes = {
-		"userConfigured": [],
-		"userPropertyEditors": [],
-		"system": []
-	};
+	$scope.showTabs = false;
+	var tabsLoaded = 0;

-	//getAllUserConfiguredDataTypes();
-	//getAllUserPropertyEditors();
-	getAllDatatypes();
+	$scope.tabs = [
+		{
+			active: true,
+			id: 1,
+			label: "Default",
+			alias: "Default",
+			typesAndEditors: []
+		},
+		{
+			active: false,
+			id: 2,
+			label: "Reuse",
+			alias: "Reuse",
+			userConfigured: []
+		}
+	];

+	function activate() {

-	function getAllDatatypes() {
+		getAllUserConfiguredDataTypes();
+		getAllTypesAndEditors();
+
+	}
+
+	function getAllTypesAndEditors() {

 		dataTypeResource.getAllTypesAndEditors().then(function(data){
-			$scope.dataTypes.system = data;
+			$scope.tabs[0].typesAndEditors = data;
+			tabsLoaded = tabsLoaded + 1;
+			checkIfTabContentIsLoaded();
 		});

-//		dataTypeResource.getAll().then(function(data){
-//			$scope.dataTypes.system = data;
-//		});
-
 	}

 	function getAllUserConfiguredDataTypes() {

 		dataTypeResource.getAllUserConfigured().then(function(data){
-			$scope.dataTypes.userConfigured = data;
+			$scope.tabs[1].userConfigured = data;
+			tabsLoaded = tabsLoaded + 1;
+			checkIfTabContentIsLoaded();
 		});

 	}

-	function getAllUserPropertyEditors() {
-
-		dataTypeResource.getAllUserPropertyEditors().then(function(data){
-			$scope.dataTypes.userPropertyEditors = data;
-		});
-
+	function checkIfTabContentIsLoaded() {
+		if(tabsLoaded === 2) {
+			$scope.showTabs = true;
+		}
 	}

+	activate();
+
 }

 angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PropertyController", DocumentTypePropertyController);
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.html
@@ -1,6 +1,6 @@
 <div class="umb-overlay-body" ng-controller="Umbraco.Editors.DocumentType.PropertyController">

-	<div class="umb-control-group">
+	<div class="umb-control-group -no-border">
 		<div class="form-search">
 			<i class="icon-search"></i>
 			<input type="text"
@@ -12,46 +12,52 @@
 		</div>
 	</div>

-	<!--
-	<div ng-if="(dataTypes.userConfigured | filter:searchTerm).length > 0">
-		<h5>Your configurations</h5>
-		<ul class="umb-card-grid">
-			<li ng-repeat="configuredDataType in dataTypes.userConfigured | orderBy:'name' | filter: searchTerm">
-				<a href="" ng-click="model.selectDataType(configuredDataType)">
-					<i class="{{ configuredDataType.icon }}" ng-class="{'icon-autofill': configuredDataType.icon == null}"></i>
-					{{ configuredDataType.name }}
-				</a>
-			</li>
-		</ul>
-	</div>
+	<div ng-if="showTabs">

-	<div ng-if="(dataTypes.userPropertyEditors | filter:searchTerm).length > 0">
-		<h5>Custom property editors</h5>
+		<umb-tabs-nav model="tabs"></umb-tabs-nav>

-		<ul class="umb-card-grid">
-			<li ng-repeat="customEditor in dataTypes.userPropertyEditors | orderBy:'name' | filter: searchTerm">
-				<a href="" ng-click="model.selectDataType(customEditor)">
-					<i class="{{ customEditor.icon }}" ng-class="{'icon-autofill': customEditor.icon == null}"></i>
-					{{ customEditor.name }}
-				</a>
-			</li>
-		</ul>
-	</div>
-	-->
+		<umb-tabs-content>
+
+		  <umb-tab id="tab{{tab.id}}" ng-repeat="tab in tabs" rel="{{tab.id}}">
+
+		    <div ng-if="tab.alias==='Default'">
+
+		      <div ng-repeat="(key,value) in tab.typesAndEditors">
+		        <div ng-if="(value | filter:searchTerm).length > 0">
+		          <h5>{{key}}</h5>
+		          <ul class="umb-card-grid">
+		            <li ng-repeat="systemDataType in value | orderBy:'name' | filter: searchTerm">
+
+		              <a href="" ng-click="model.selectDataType(systemDataType)">
+		                <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
+		                {{ systemDataType.name }}
+		              </a>
+
+		            </li>
+		          </ul>
+		        </div>
+		      </div>
+
+		    </div>
+
+		    <div ng-if="tab.alias==='Reuse'">
+
+		      <h5>Your configurations</h5>
+		      <ul class="umb-card-grid">
+		        <li ng-repeat="configuredDataType in tab.userConfigured | orderBy:'name' | filter: searchTerm">
+		          <a href="" ng-click="model.selectDataType(configuredDataType)">
+		            <i class="{{ configuredDataType.icon }}" ng-class="{'icon-autofill': configuredDataType.icon == null}"></i>
+		            {{ configuredDataType.name }}
+		          </a>
+		        </li>
+		      </ul>
+
+		    </div>
+
+		  </umb-tab>
+
+		</umb-tabs-content>

-	<div ng-repeat="(key,value) in dataTypes.system">
-		<div ng-if="(value | filter:searchTerm).length > 0">
-			<h5>{{key}}</h5>
-			<ul class="umb-card-grid">
-				<li ng-repeat="systemDataType in value | orderBy:'name' | filter: searchTerm">
-					<a href="" ng-click="model.selectDataType(systemDataType)">
-						<i class="{{ systemDataType.icon }}"
-							ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
-						{{ systemDataType.name }}
-					</a>
-				</li>
-			</ul>
-		</div>
 	</div>

 </div>