getting started with vcard parsing

bower.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "angular": "~1.4.7",
     "dav": "git@github.com:gaye/dav.git#~1.7.8",
-    "angular-ui-router": "~0.2.15"
+    "angular-ui-router": "~0.2.15",
+    "vcard": "~0.2.3"
   }
 }

gulpfile.js

@@ -7,8 +7,9 @@ gulp.task('js', function() {
 	return gulp.src([
 			'js/main.js',
 			'js/components/**/*.js',
+			'js/models/**/*.js',
 			'js/services/**/*.js',
-			'js/models/**/*.js'
+			'js/filters/**/*.js'
 			])
 		.pipe(jshint('.jshintrc'))
 		.pipe(jshint.reporter('default'))

js/components/addressBook/addressBook_controller.js

@@ -1,3 +1,4 @@
 app.controller('addressbookCtrl', function() {
 	var ctrl = this;
+	console.log(this);
 });

js/components/addressBook/addressBook_directive.js

@@ -1,6 +1,6 @@
 app.directive('addressbook', function() {
 	return {
-		restrict: 'E',
+		restrict: 'A', // has to be an attribute to work with core css
 		scope: {},
 		controller: 'addressbookCtrl',
 		controllerAs: 'ctrl',

js/components/addressBookList/addressBookList_controller.js

@@ -1,7 +1,8 @@
 app.controller('addressbooklistCtrl', ['$scope', 'AddressBookService', function(scope, AddressBookService) {
 	var ctrl = this;
 
-	AddressBookService.then(function(addressBooks) {
+	console.log(AddressBookService);
+	AddressBookService.getAll().then(function(addressBooks) {
 		scope.$apply(function() {
 			ctrl.addressBooks = addressBooks;
 		});

js/components/addressBookList/addressBookList_directive.js

@@ -1,5 +1,6 @@
 app.directive('addressbooklist', function() {
 	return {
+		restrict: 'A', // has to be an attribute to work with core css
 		scope: {},
 		controller: 'addressbooklistCtrl',
 		controllerAs: 'ctrl',

js/components/contact/contact_controller.js

@@ -3,6 +3,6 @@ app.controller('contactCtrl', ['Contact', function(Contact) {
 
 	ctrl.contact = new Contact(ctrl.data);
 
-	console.log(ctrl.contact);
+	console.log("Contact: ",ctrl.contact);
 
 }]);

js/components/contactList/contactList_directive.js

@@ -5,7 +5,7 @@ app.directive('contactlist', function() {
 		controller: 'contactlistCtrl',
 		controllerAs: 'ctrl',
 		bindToController: {
-			addressbook: '='
+			addressbook: '=adrbook'
 		},
 		templateUrl: OC.linkTo('contactsrework', 'templates/contactList.html')
 	};

js/filters/JSON2vCard_filter.js

@@ -0,0 +1,5 @@
+app.filter('JSON2vCard', function() {
+	return function(input) {
+		return vCard.generate(input);
+	};
+});

js/filters/vCard2JSON_filter.js

@@ -0,0 +1,5 @@
+app.filter('vCard2JSON', function() {
+	return function(input) {
+		return vCard.parse(input);
+	};
+});

js/main.js

@@ -20,20 +20,21 @@ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $ur
 		})
 		.state('contactlist',{
 			url: '/:addressBookId',
-			template: '<contactlist data-addressbook="addressBook"></contactlist>',
+			template: '<contactlist data-adrbook="addressBook"></contactlist>',
 			resolve: {
-				addressBook: function(AddressBookService, DavClient, $stateParams) {
-					return AddressBookService.then(function (addressBooks) {
-						var addressBook = addressBooks.filter(function (element) {
-							return element.displayName === $stateParams.addressBookId;
-						})[0];
-						return DavClient.syncAddressBook(addressBook, {json: true});
+				addressBook: function(AddressBookService, $stateParams) {
+					return AddressBookService.get($stateParams.addressBookId).then(function(addressBook) {
+						return AddressBookService.sync(addressBook);
 					});
 				}
 			},
 			controller: function($scope, addressBook) {
 				$scope.addressBook = addressBook;
 			}
+		})
+		.state('contactlist.contact', {
+			url: '/:contact',
+			template: '<div>Test</div>'
 		});
 }]);
 

js/models/addressBook_model.js

@@ -0,0 +1,13 @@
+app.factory('AddressBook', function()
+{
+	return function AddressBook(data) {
+		angular.extend(this, {
+
+			baseUrl: "",
+			displayName: "",
+			contacts: []
+
+		});
+		angular.extend(this, data);
+	};
+});

js/models/contact_model.js

@@ -1,40 +1,46 @@
-app.factory('Contact', function(ContactService)
-{
-	return function Contact(jCard) {
+app.factory('Contact', [ 'ContactService', '$filter', function(ContactService, $filter) {
+	return function Contact(vCard) {
 		angular.extend(this, {
 
-			jCard: [],
+			data: {},
+			props: {},
 
-			name: function(value) {
-				var name = this.getProperty('n');
+			uid: function(value) {
 				if (angular.isDefined(value)) {
 					// setter
-					this.setPropertyValue(name, value);
+					return this.setProperty('uid', { value: value });
 				} else {
 					// getter
-					return this.getPropertyValue(name);
+					return this.getProperty('uid').value;
 				}
+			},
 
+			fullName: function(value) {
+				if (angular.isDefined(value)) {
+					// setter
+					return this.setProperty('fn', { value: value });
+				} else {
+					// getter
+					return this.getProperty('fn').value;
+				}
 			},
 
 			getProperty: function(name) {
-				var contact = this;
-				if(!angular.isDefined(contact.jCard.addressData[1])) {
-					return undefined;
-				}
-				var properties = contact.jCard.addressData[1];
-				for(var i in properties) {
-					if(properties[i][0] === name)
-						return properties[i];
-				}
-				return undefined;
+				return this.props[name][0];
 			},
 
-			getPropertyValue: function(property) {
-				if(property[3] instanceof Array) {
-					return property[3].join(' ');
+			setProperty: function(name, data) {
+				angular.extend(this.props[name][0], data);
+
+				// keep vCard in sync
+				this.data.addressData = $filter('JSON2vCard')(this.props);
+			}
+
+			/*getPropertyValue: function(property) {
+				if(property.value instanceof Array) {
+					return property.value.join(' ');
 				} else {
-					return property[3];
+					return property.value;
 				}
 			},
 
@@ -45,9 +51,11 @@ app.factory('Contact', function(ContactService)
 
 			update: function() {
 				ContactService.update(this.jCard);
-			}
+			}*/
 
 		});
-		angular.extend(this.jCard, jCard);
+
+		angular.extend(this.data, vCard);
+		angular.extend(this.props, $filter('vCard2JSON')(this.data.addressData));
 	};
-});
+}]);

js/public/script.js

@@ -20,30 +20,52 @@ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $ur
 		})
 		.state('contactlist',{
 			url: '/:addressBookId',
-			template: '<contactlist data-addressbook="addressBook"></contactlist>',
+			template: '<contactlist data-adrbook="addressBook"></contactlist>',
 			resolve: {
-				addressBook: function(AddressBookService, DavClient, $stateParams) {
-					return AddressBookService.then(function (addressBooks) {
-						var addressBook = addressBooks.filter(function (element) {
-							return element.displayName === $stateParams.addressBookId;
-						})[0];
-						return DavClient.syncAddressBook(addressBook, {json: true});
+				addressBook: function(AddressBookService, $stateParams) {
+					return AddressBookService.get($stateParams.addressBookId).then(function(addressBook) {
+						return AddressBookService.sync(addressBook);
 					});
 				}
 			},
 			controller: function($scope, addressBook) {
 				$scope.addressBook = addressBook;
 			}
+		})
+		.state('contactlist.contact', {
+			url: '/:contact',
+			template: '<div>Test</div>'
 		});
 }]);
 
 
+app.controller('addressbooklistCtrl', ['$scope', 'AddressBookService', function(scope, AddressBookService) {
+	var ctrl = this;
+
+	console.log(AddressBookService);
+	AddressBookService.getAll().then(function(addressBooks) {
+		scope.$apply(function() {
+			ctrl.addressBooks = addressBooks;
+		});
+	});
+}]);
+app.directive('addressbooklist', function() {
+	return {
+		restrict: 'A', // has to be an attribute to work with core css
+		scope: {},
+		controller: 'addressbooklistCtrl',
+		controllerAs: 'ctrl',
+		bindToController: {},
+		templateUrl: OC.linkTo('contactsrework', 'templates/addressBookList.html')
+	};
+});
 app.controller('addressbookCtrl', function() {
 	var ctrl = this;
+	console.log(this);
 });
 app.directive('addressbook', function() {
 	return {
-		restrict: 'E',
+		restrict: 'A', // has to be an attribute to work with core css
 		scope: {},
 		controller: 'addressbookCtrl',
 		controllerAs: 'ctrl',
@@ -53,30 +75,12 @@ app.directive('addressbook', function() {
 		templateUrl: OC.linkTo('contactsrework', 'templates/addressBook.html')
 	};
 });
-app.controller('addressbooklistCtrl', ['$scope', 'AddressBookService', function(scope, AddressBookService) {
-	var ctrl = this;
-
-	AddressBookService.then(function(addressBooks) {
-		scope.$apply(function() {
-			ctrl.addressBooks = addressBooks;
-		});
-	});
-}]);
-app.directive('addressbooklist', function() {
-	return {
-		scope: {},
-		controller: 'addressbooklistCtrl',
-		controllerAs: 'ctrl',
-		bindToController: {},
-		templateUrl: OC.linkTo('contactsrework', 'templates/addressBookList.html')
-	};
-});
 app.controller('contactCtrl', ['Contact', function(Contact) {
 	var ctrl = this;
 
 	ctrl.contact = new Contact(ctrl.data);
 
-	console.log(ctrl.contact);
+	console.log("Contact: ",ctrl.contact);
 
 }]);
 app.directive('contact', function() {
@@ -100,16 +104,114 @@ app.directive('contactlist', function() {
 		controller: 'contactlistCtrl',
 		controllerAs: 'ctrl',
 		bindToController: {
-			addressbook: '='
+			addressbook: '=adrbook'
 		},
 		templateUrl: OC.linkTo('contactsrework', 'templates/contactList.html')
 	};
 });
-app.service('AddressBookService', ['DavService', function(DavService){
+app.factory('AddressBook', function()
+{
+	return function AddressBook(data) {
+		angular.extend(this, {
+
+			baseUrl: "",
+			displayName: "",
+			contacts: []
+
+		});
+		angular.extend(this, data);
+	};
+});
+app.factory('Contact', [ 'ContactService', '$filter', function(ContactService, $filter) {
+	return function Contact(vCard) {
+		angular.extend(this, {
+
+			data: {},
+			props: {},
+
+			uid: function(value) {
+				if (angular.isDefined(value)) {
+					// setter
+					return this.setProperty('uid', { value: value });
+				} else {
+					// getter
+					return this.getProperty('uid').value;
+				}
+			},
+
+			fullName: function(value) {
+				if (angular.isDefined(value)) {
+					// setter
+					return this.setProperty('fn', { value: value });
+				} else {
+					// getter
+					return this.getProperty('fn').value;
+				}
+			},
+
+			getProperty: function(name) {
+				return this.props[name][0];
+			},
+
+			setProperty: function(name, data) {
+				angular.extend(this.props[name][0], data);
+
+				// keep vCard in sync
+				this.data.addressData = $filter('JSON2vCard')(this.props);
+			}
+
+			/*getPropertyValue: function(property) {
+				if(property.value instanceof Array) {
+					return property.value.join(' ');
+				} else {
+					return property.value;
+				}
+			},
+
+			setPropertyValue: function(property, propertyValue) {
+				property[3] = propertyValue;
+				this.update();
+			},
+
+			update: function() {
+				ContactService.update(this.jCard);
+			}*/
+
+		});
+
+		angular.extend(this.data, vCard);
+		angular.extend(this.props, $filter('vCard2JSON')(this.data.addressData));
+	};
+}]);
+app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', function(DavClient, DavService, Contact){
+
+	this.getAll = function() {
+		return DavService.then(function(account) {
+			return account.addressBooks;
+		});
+	};
+
+	this.get = function(displayName) {
+		return this.getAll().then(function(addressBooks){
+			return addressBooks.filter(function (element) {
+				return element.displayName === displayName;
+			})[0];
+		});
+	};
+
+	this.sync = function(addressBook) {
+		return DavClient.syncAddressBook(addressBook).then(function(addressBook) {
+			/*addressBook.contacts = [];
+			console.log(addressBook.objects);
+			for(i in addressBook.objects) {
+				addressBook.contacts.push(
+					new Contact(addressBook.objects[i].data)
+				);
+			}*/
+			return addressBook;
+		});
+	};
 
-	return DavService.then(function(account) {
-		return account.addressBooks;
-	});
 }]);
 app.service('ContactService', [ 'DavClient', function(DavClient) {
 
@@ -144,57 +246,13 @@ app.service('DavService', ['DavClient', function(client) {
 		accountType: 'carddav'
 	});
 }]);
-
-app.factory('Contact', function(ContactService)
-{
-	return function Contact(jCard) {
-		angular.extend(this, {
-
-			jCard: [],
-
-			name: function(value) {
-				var name = this.getProperty('n');
-				if (angular.isDefined(value)) {
-					// setter
-					this.setPropertyValue(name, value);
-				} else {
-					// getter
-					return this.getPropertyValue(name);
-				}
-
-			},
-
-			getProperty: function(name) {
-				var contact = this;
-				if(!angular.isDefined(contact.jCard.addressData[1])) {
-					return undefined;
-				}
-				var properties = contact.jCard.addressData[1];
-				for(var i in properties) {
-					if(properties[i][0] === name)
-						return properties[i];
-				}
-				return undefined;
-			},
-
-			getPropertyValue: function(property) {
-				if(property[3] instanceof Array) {
-					return property[3].join(' ');
-				} else {
-					return property[3];
-				}
-			},
-
-			setPropertyValue: function(property, propertyValue) {
-				property[3] = propertyValue;
-				this.update();
-			},
-
-			update: function() {
-				ContactService.update(this.jCard);
-			}
-
-		});
-		angular.extend(this.jCard, jCard);
+app.filter('JSON2vCard', function() {
+	return function(input) {
+		return vCard.generate(input);
+	};
+});
+app.filter('vCard2JSON', function() {
+	return function(input) {
+		return vCard.parse(input);
 	};
 });

js/services/addressBook_service.js

@@ -1,6 +1,30 @@
-app.service('AddressBookService', ['DavService', function(DavService){
+app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', function(DavClient, DavService, Contact){
+
+	this.getAll = function() {
+		return DavService.then(function(account) {
+			return account.addressBooks;
+		});
+	};
+
+	this.get = function(displayName) {
+		return this.getAll().then(function(addressBooks){
+			return addressBooks.filter(function (element) {
+				return element.displayName === displayName;
+			})[0];
+		});
+	};
+
+	this.sync = function(addressBook) {
+		return DavClient.syncAddressBook(addressBook).then(function(addressBook) {
+			/*addressBook.contacts = [];
+			console.log(addressBook.objects);
+			for(i in addressBook.objects) {
+				addressBook.contacts.push(
+					new Contact(addressBook.objects[i].data)
+				);
+			}*/
+			return addressBook;
+		});
+	};
 
-	return DavService.then(function(account) {
-		return account.addressBooks;
-	});
 }]);

templates/addressBook.html

@@ -1,3 +1,3 @@
-<a href="#/{{ctrl.addressBook.displayName}}">
+<a ui-sref="{{ctrl.addressBook.displayName}}">
 	{{ctrl.addressBook.displayName}}
 </a>

templates/addressBookList.html

@@ -1,6 +1,4 @@
-<li ng-repeat="addressBook in ctrl.addressBooks">
-	<addressbook data="addressBook"></addressbook>
-</li>
+<li ng-repeat="addressBook in ctrl.addressBooks" addressbook data="addressBook"></li>
 <!--<li><a href="#">First level entry</a></li>
 <li>
 	<a href="#">First level container</a>

templates/contact.html

@@ -1,3 +1 @@
-<li>
-<input type="text" ng-model="ctrl.contact.name" ng-model-options="{getterSetter: true}" />
-</li>
+<a ui-sref="./{{ctrl.contact.uid()}}">{{ctrl.contact.fullName()}}</a>