begin work on propertygroups

js/components/propertyGroup/propertyGroup_controller.js

@@ -0,0 +1,5 @@
+angular.module('contactsApp')
+.controller('propertyGroupCtrl', function() {
+	// eslint-disable-next-line no-unused-vars
+	var ctrl = this;
+});

js/components/propertyGroup/propertyGroup_directive.js

@@ -0,0 +1,13 @@
+angular.module('contactsApp')
+.directive('propertygroup', function() {
+	return {
+		scope: {},
+		controller: 'propertyGroupCtrl',
+		controllerAs: 'ctrl',
+		bindToController: {
+			properties: '=data',
+			name: '='
+		},
+		templateUrl: OC.linkTo('contacts', 'templates/propertyGroup.html')
+	};
+});

templates/contactDetails.html

@@ -42,10 +42,8 @@
 			</div>
 		</header>
 		<section>
-			<div ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'">
-				<detailsItem ng-repeat="propData in prop" name="prop.$key" data="propData" model="ctrl" index="$index"
-							 class="details-item-{{prop.$key}}" ng-class="{ 'failed': ctrl.contact.failedProps.indexOf(prop.$key) !== -1 }"></detailsItem>
-			</div>
+			<propertyGroup ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" data="prop" name="prop.$key"></propertyGroup>
+
 			<div class="select-addressbook" ng-if="ctrl.addressBooks.length > 1 && !ctrl.addressBook.readOnly">
 				<label for="details-addressbook">{{ctrl.t.addressBook}}</label>
 				<select ng-model="ctrl.addressBook" ng-change="ctrl.changeAddressBook(ctrl.addressBook)" id="details-addressbook"

templates/propertyGroup.html

@@ -0,0 +1,14 @@
+<i class="propertyGroup__icon">🍕</i>
+<span class="propertyGroup__title">{{ctrl.name}}</span>
+<detailsItem ng-repeat="property in ctrl.properties" name="ctrl.name" data="property" model="ctrl" index="$index"
+			 class="details-item-{{ctrl.name}}" ng-class="{ 'failed': ctrl.contact.failedProps.indexOf(prop.$key) !== -1 }"></detailsItem>
+<!--<adetailsItem ng-repeat="property in [1,2]" class="property">
+	<div class="property__label">Home</div>
+	<div class="component">
+		<input type="text" placeholder="comp1" />
+	</div>
+	<div class="component">
+		<input type="text" placeholder="comp2" />
+	</div>
+</adetailsItem>
+-->