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 = {
+var SmsSettings = new Vue({
-	// Attributes
+	el: '#app-settings-content',
-	messageLimit: 100,
+	data: {
-	enableNotifications: true,
+		// Attributes
-	contactOrderBy: 'lastmsg',
+		messageLimit: 100,
-	reverseContactOrder: true,
+		enableNotifications: true,
-	country: '',
+		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 () {
+	methods: {
-		if (this.messageLimit === null) {
+		sendMessageLimit: function () {
-			return;
+			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);
 	}
-};
+});

templates/main.php

@@ -2,17 +2,24 @@
 use \OCA\OcSms\Lib\CountryCodes;
 
 \OCP\Util::addScript('ocsms', 'angular.min');
-\OCP\Util::addScript('ocsms', 'app.min');
 \OCP\Util::addScript('ocsms', 'vue.min');
+// Production
+//\OCP\Util::addScript('ocsms', 'app.min');
+// Develop
+\OCP\Util::addScript('ocsms', 'devel/app');
+\OCP\Util::addScript('ocsms', 'devel/helpers');
+\OCP\Util::addScript('ocsms', 'devel/legacy');
+\OCP\Util::addScript('ocsms', 'devel/notifications');
+\OCP\Util::addScript('ocsms', 'devel/settings');
 \OCP\Util::addStyle('ocsms', 'style');
 ?>
 
-<div class="ng-scope" id="app" ng-app="OcSms" ng-controller="OcSmsController">
+<div class="ng-scope" id="app" ng-app="OcSms" ng-controller="OcSmsController" xmlns:v-on="http://www.w3.org/1999/xhtml">
 	<div id="app-mailbox-peers">
 		<div id="app-contacts-loader" class="icon-loading" ng-show="isContactsLoading">
 		</div>
 		<ul class="ng-cloak contact-list" ng-show="!isContactsLoading">
-			<li ng-repeat="contact in contacts | orderBy:vsettings.contactOrderBy:vsettings.reverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
+			<li ng-repeat="contact in contacts | orderBy:getContactOrderBy:getReverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
 				<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" ng-show="contact.avatar !== undefined" />
 				<div class="ocsms-plavatar" ng-show="contact.avatar === undefined" ng-style="{'background-color': (contact.uid | peerColor)}">{{ contact.label | firstCharacter }}</div>
 				<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
@@ -27,32 +34,32 @@ use \OCA\OcSms\Lib\CountryCodes;
 		</div>
 		<div id="app-settings-content">
 			<div><label for="setting_msg_per_page">Max messages to load per conversation</label>
-				<input type="number" min="10" max="10000" name="setting_msg_per_page" ng-model="vsettings.messageLimit" ng-change="vsettings.sendMessageLimit()" to-int />
+				<input type="number" min="10" max="10000" name="setting_msg_per_page" v-model="messageLimit" v-on:change="sendMessageLimit()" to-int />
-				<span class="label-invalid-input" ng-if="vsettings.messageLimit == null || vsettings.messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
+				<span class="label-invalid-input" v-if="messageLimit == null || messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
 			</div>
 
 			<div><label for="intl_phone"><?php p($l->t('Default country code'));?></label>
-				<select name="intl_phone" id="sel_intl_phone">
+				<select name="intl_phone" id="sel_intl_phone" v-model="country">
 				<?php foreach (CountryCodes::$codes as $code => $cval) { ?>
 					<option><?php p($l->t($code)); ?></option>
 				<?php } ?>
 				</select>
-				<button class="new-button primary icon-checkmark-white" ng-click="vsettings.sendCountry();"></button>
+				<button class="new-button primary icon-checkmark-white" v-on:click="sendCountry();"></button>
 			</div>
 
 			<div>
 				<label for="setting_contact_order"><?php p($l->t('Contact ordering'));?></label>
-				<select name="setting_contact_order" ng-model="vsettings.contactOrderBy" ng-change="vsettings.sendContactOrder()">
+				<select name="setting_contact_order" v-model="contactOrderBy" v-on:change="sendContactOrder()">
 					<option value="lastmsg"><?php p($l->t('Last message'));?></option>
 					<option value="label"><?php p($l->t('Label'));?></option>
 				</select>
-				<label for "setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
+				<label for="setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
-				<input type="checkbox" ng-model="vsettings.reverseContactOrder" ng-change="vsettings.sendContactOrder()" />
+				<input type="checkbox" v-model="reverseContactOrder" v-on:change="sendContactOrder()" />
 			</div>
 
 			<div>
-				<label for"setting_notif"><?php p($l->t('Notification settings'));?></label>
+				<label for="setting_notif"><?php p($l->t('Notification settings'));?></label>
-				<select name="setting_notif" ng-model="vsetting.enableNotifications" ng-change="vsettings.sendNotificationFlag()">
+				<select name="setting_notif" v-model="enableNotifications" v-on:change="sendNotificationFlag()">
 					<option value="1"><?php p($l->t('Enable'));?></option>
 					<option value="0"><?php p($l->t('Disable'));?></option>
 				</select>