From 9104b99b3026843943bfecedfc589f1a69d5abfe Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 27 Aug 2015 11:50:05 +0200
Subject: [PATCH] Refactor property controller to follow angular style guide

---
 .../dialogs/property.controller.js            | 138 ++++++++++--------
 .../views/documenttype/dialogs/property.html  |  18 +--
 2 files changed, 83 insertions(+), 73 deletions(-)

diff --git 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
index 4e82278069..1a8acf032d 100644
--- 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
@@ -6,78 +6,88 @@
  * @description
  * The controller for the content type editor property dialog
  */
-function DocumentTypePropertyController($scope, dataTypeResource) {
 
-	$scope.showTabs = false;
+ (function() {
+	"use strict";
 
-	var tabsLoaded = 0;
+	function DocumentTypePropertyController($scope, dataTypeResource) {
+
+		var vm = this;
+
+		vm.searchTerm = "";
+		vm.showTabs = false;
+		vm.tabsLoaded = 0;
+		vm.tabs = [
+			{
+				active: true,
+				id: 1,
+				label: "Default",
+				alias: "Default",
+				typesAndEditors: []
+			},
+			{
+				active: false,
+				id: 2,
+				label: "Reuse",
+				alias: "Reuse",
+				userConfigured: []
+			}
+		];
+
+		vm.showDetailsOverlay = showDetailsOverlay;
+		vm.hideDetailsOverlay = hideDetailsOverlay;
+
+		function activate() {
+
+			getAllUserConfiguredDataTypes();
+			getAllTypesAndEditors();
 
-	$scope.tabs = [
-		{
-			active: true,
-			id: 1,
-			label: "Default",
-			alias: "Default",
-			typesAndEditors: []
-		},
-		{
-			active: false,
-			id: 2,
-			label: "Reuse",
-			alias: "Reuse",
-			userConfigured: []
 		}
-	];
 
-	function activate() {
+		function getAllTypesAndEditors() {
 
-		getAllUserConfiguredDataTypes();
-		getAllTypesAndEditors();
+			dataTypeResource.getAllTypesAndEditors().then(function(data){
+				vm.tabs[0].typesAndEditors = data;
+				vm.tabsLoaded = vm.tabsLoaded + 1;
+				checkIfTabContentIsLoaded();
+			});
 
-	}
-
-	function getAllTypesAndEditors() {
-
-		dataTypeResource.getAllTypesAndEditors().then(function(data){
-			$scope.tabs[0].typesAndEditors = data;
-			tabsLoaded = tabsLoaded + 1;
-			checkIfTabContentIsLoaded();
-		});
-
-	}
-
-	function getAllUserConfiguredDataTypes() {
-
-		dataTypeResource.getAllUserConfigured().then(function(data){
-			$scope.tabs[1].userConfigured = data;
-			tabsLoaded = tabsLoaded + 1;
-			checkIfTabContentIsLoaded();
-		});
-
-	}
-
-	function checkIfTabContentIsLoaded() {
-		if(tabsLoaded === 2) {
-			$scope.showTabs = true;
 		}
+
+		function getAllUserConfiguredDataTypes() {
+
+			dataTypeResource.getAllUserConfigured().then(function(data){
+				vm.tabs[1].userConfigured = data;
+				vm.tabsLoaded = vm.tabsLoaded + 1;
+				checkIfTabContentIsLoaded();
+			});
+
+		}
+
+		function checkIfTabContentIsLoaded() {
+			if(vm.tabsLoaded === 2) {
+				vm.showTabs = true;
+			}
+		}
+
+		function showDetailsOverlay(property) {
+
+			var propertyDetails = {};
+			propertyDetails.icon = property.icon;
+			propertyDetails.title = property.name;
+
+			$scope.model.itemDetails = propertyDetails;
+
+		};
+
+		function hideDetailsOverlay() {
+			$scope.model.itemDetails = null;
+		}
+
+		activate();
+
 	}
 
-	$scope.showDetailsOverlay = function(property) {
+	angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PropertyController", DocumentTypePropertyController);
 
-		var propertyDetails = {};
-		propertyDetails.icon = property.icon;
-		propertyDetails.title = property.name;
-
-		$scope.model.itemDetails = propertyDetails;
-
-	};
-
-	$scope.hideDetailsOverlay = function() {
-		$scope.model.itemDetails = null;
-	}
-
-	activate();
-
-}
-
-angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PropertyController", DocumentTypePropertyController);
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.html
index 12fa4c7202..a68c8e23a4 100644
--- 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,32 +1,32 @@
-<div class="umb-overlay-body" ng-controller="Umbraco.Editors.DocumentType.PropertyController">
+<div class="umb-overlay-body" ng-controller="Umbraco.Editors.DocumentType.PropertyController as vm">
 
 	<div class="umb-control-group -no-border">
 		<div class="form-search">
 			<i class="icon-search"></i>
 			<input type="text"
 				  style="width: 100%"
-				  ng-model="searchTerm"
+				  ng-model="vm.searchTerm"
 				  class="umb-search-field search-query input-block-level"
 				  placeholder="Filter..."
 					umb-auto-focus>
 		</div>
 	</div>
 
-	<div ng-if="showTabs">
+	<div ng-if="vm.showTabs">
 
-		<umb-tabs-nav model="tabs"></umb-tabs-nav>
+		<umb-tabs-nav model="vm.tabs"></umb-tabs-nav>
 
 		<umb-tabs-content>
 
-		  <umb-tab id="tab{{tab.id}}" ng-repeat="tab in tabs" rel="{{tab.id}}">
+		  <umb-tab id="tab{{tab.id}}" ng-repeat="tab in vm.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">
+		        <div ng-if="(value | filter:vm.searchTerm).length > 0">
 		          <h5>{{key}}</h5>
 		          <ul class="umb-card-grid" ng-mouseleave="hideDetailsOverlay()">
-		            <li ng-repeat="systemDataType in value | orderBy:'name' | filter: searchTerm" ng-mouseover="showDetailsOverlay(systemDataType)">
+		            <li ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm" ng-mouseover="vm.showDetailsOverlay(systemDataType)">
 
 		              <a href="" ng-click="model.selectDataType(systemDataType)">
 		                <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
@@ -43,8 +43,8 @@
 		    <div ng-if="tab.alias==='Reuse'">
 
 		      <h5>Your configurations</h5>
-		      <ul class="umb-card-grid" ng-mouseleave="hideDetailsOverlay()">
-		        <li ng-repeat="configuredDataType in tab.userConfigured | orderBy:'name' | filter: searchTerm" ng-mouseover="showDetailsOverlay(configuredDataType)">
+		      <ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
+		        <li ng-repeat="configuredDataType in tab.userConfigured | orderBy:'name' | filter: vm.searchTerm" ng-mouseover="vm.showDetailsOverlay(configuredDataType)">
 		          <a href="" ng-click="model.selectDataType(configuredDataType)">
 		            <i class="{{ configuredDataType.icon }}" ng-class="{'icon-autofill': configuredDataType.icon == null}"></i>
 		            {{ configuredDataType.name }}