Refactor SmsSettings to be a pure vue.js view

js/devel/legacy.js

@@ -10,17 +10,6 @@
 
 var app = angular.module('OcSms', []);
 
-app.directive('toInt', function () {
-	return {
-		require: 'ngModel',
-		link: function (scope, element, attrs, modelCtrl) {
-			modelCtrl.$parsers.push(function (inputValue) {
-				return parseInt(inputValue, 10);
-			});
-		}
-	};
-});
-
 // Imported from contact app
 app.filter('peerColor', function () {
 	return ContactRenderer.generateColor;
@@ -40,8 +29,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 			{text: "Send"}
 		];
 
-		$scope.vsettings = SmsSettings;
-
 		$scope.contacts = [];
 		$scope.messages = [];
 		$scope.totalMessageCount = 0;
@@ -256,6 +243,14 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 			}
 		};
 
+		$scope.getContactOrderBy = function(ct) {
+			return SmsSettings.data.contactOrderBy;
+		};
+
+		$scope.getReverseContactOrder = function(ct) {
+			return SmsSettings.data.reverseContactOrder;
+		}
+
 		/*
 		* Conversation messagelist management
 		*/
@@ -387,7 +382,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 							$scope.selectedContact.avatar = undefined;
 
 							// Now let's loop through the contact list and see if we can find the rest of the details
-							for (let i = 0; i < $scope.contacts.length; i++) {
+							for (var i = 0; i < $scope.contacts.length; i++) {
 								if ($scope.contacts[i].nav == urlPhoneNumber) {
 									$scope.selectedContact = $scope.contacts[i];
 									break;
@@ -399,7 +394,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 					}
 				}
 			});
-			SmsSettings.init();
 			SmsNotifications.init();
 			$scope.checkNewMessages();
 			$scope.refreshConversation();

js/devel/settings.js

@@ -8,73 +8,68 @@
  * @copyright Loic Blot 2014-2017
  */
 
-var SmsSettings = {
-	// Attributes
-	messageLimit: 100,
-	enableNotifications: true,
-	contactOrderBy: 'lastmsg',
-	reverseContactOrder: true,
-	country: '',
+var SmsSettings = new Vue({
+	el: '#app-settings-content',
+	data: {
+		// Attributes
+		messageLimit: 100,
+		enableNotifications: true,
+		contactOrderBy: 'lastmsg',
+		reverseContactOrder: true,
+		country: ''
+	},
 
 	// Functions
-	init: function () {
+	created: function () {
 		var self = this;
 		$.getJSON(Sms.generateURL('/front-api/v1/settings'), function (jsondata, status) {
 			if (jsondata['status'] === true) {
 				self.messageLimit = parseInt(jsondata["message_limit"]);
-				self.enableNotifications = parseInt(jsondata["notification_state"]) !== 0;
+				self.enableNotifications = parseInt(jsondata["notification_state"]) !== 0 ? 1 : 0;
 				self.contactOrderBy = jsondata["contact_order"];
 				self.reverseContactOrder = toBool(jsondata["contact_order_reverse"]);
 				self.country = jsondata["country"];
-
-				self.updateView();
 			}
 		});
 	},
 
-	sendMessageLimit: function () {
-		if (this.messageLimit === null) {
-			return;
+	methods: {
+		sendMessageLimit: function () {
+			if (this.messageLimit === null) {
+				return;
+			}
+
+			var self = this;
+			$.post(Sms.generateURL('/set/msglimit'),
+				{
+					'limit': self.messageLimit
+				}
+			);
+		},
+		sendNotificationFlag: function () {
+			var self = this;
+			$.post(Sms.generateURL('/set/notification_state'),
+				{
+					'notification': parseInt(self.enableNotifications)
+				}
+			);
+		},
+		sendContactOrder: function () {
+			var self = this;
+			$.post(Sms.generateURL('/set/contact_order'),
+				{
+					'attribute': self.contactOrderBy,
+					'reverse': self.reverseContactOrder
+				}
+			);
+		},
+		sendCountry: function () {
+			var self = this;
+			$.post(Sms.generateURL('/set/country'),
+				{
+					'country': self.country
+				}
+			);
 		}
-
-		var self = this;
-		$.post(Sms.generateURL('/set/msglimit'),
-			{
-				'limit': self.messageLimit
-			}
-		);
-	},
-	sendNotificationFlag: function () {
-		var self = this;
-		$.post(Sms.generateURL('/set/notification_state'),
-			{
-				'notification': self.enableNotifications ? 1 : 0
-			}
-		);
-	},
-	sendContactOrder: function () {
-		var self = this;
-		$.post(Sms.generateURL('/set/contact_order'),
-			{
-				'attribute': self.contactOrderBy,
-				'reverse': self.reverseContactOrder
-			}
-		);
-	},
-	sendCountry: function () {
-		$.post(Sms.generateURL('/set/country'),
-			{
-				'country': $('select[name=intl_phone]').val()
-			}
-		);
-	},
-
-	// This function should be moved to a renderer or something else
-	updateView: function () {
-		$('#sel_intl_phone').val(this.country);
-		$('input[name=setting_msg_per_page]').val(this.messageLimit);
-		$('select[name=setting_notif]').val(this.enableNotifications ? 1 : 0);
-		$('select[name=setting_contact_order]').val(this.contactOrderBy);
-		$('input[name=setting_contact_order_reverse]').val(this.reverseContactOrder);
 	}
-};
+});