Prepare contactlist with vue

js/devel/app.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Loic Blot <loic.blot@unix-experience.fr>
- * @copyright Loic Blot 2014-2017
+ * @copyright Loic Blot 2014-2018
  */
 
 var Sms = {

js/devel/contactlist.js

@@ -0,0 +1,40 @@
+/**
+ * Nextcloud - Phone Sync
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Loic Blot <loic.blot@unix-experience.fr>
+ * @copyright Loic Blot 2014-2018
+ */
+
+var ContactList = new Vue({
+	el: '#app-mailbox-peers',
+	data: {
+		isContactsLoading: true,
+		contacts: []
+	},
+	created: function () {
+
+	},
+	methods: {
+		// Conversations
+		loadConversation: function (contact) {
+			OC.Util.History.pushState('phonenumber=' + contact.nav);
+
+			// phoneNumber must exist
+			if (contact.nav !== null) {
+				this.fetchConversation(contact);
+				Sms.selectConversation($("a[mailbox-navigation='" + contact.nav + "']"));
+			}
+		},
+		fetchConversation: function (contact) {
+			// @TODO
+		}
+	},
+	computed: {
+		orderedContacts: function () {
+			return _.orderBy(this.contacts, SmsSettings.contactOrderBy, SmsSettings.reverseContactOrder)
+		}
+	}
+});

js/devel/helpers.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Loic Blot <loic.blot@unix-experience.fr>
- * @copyright Loic Blot 2014-2017
+ * @copyright Loic Blot 2014-2018
  */
 
 function inArray(val, arr) {

js/devel/legacy.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Loic Blot <loic.blot@unix-experience.fr>
- * @copyright Loic Blot 2014-2017
+ * @copyright Loic Blot 2014-2018
  */
 
 var app = angular.module('OcSms', []);

js/devel/notifications.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Loic Blot <loic.blot@unix-experience.fr>
- * @copyright Loic Blot 2014-2017
+ * @copyright Loic Blot 2014-2018
  */
 
 var SmsNotifications = {

js/devel/settings.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Loic Blot <loic.blot@unix-experience.fr>
- * @copyright Loic Blot 2014-2017
+ * @copyright Loic Blot 2014-2018
  */
 
 var SmsSettings = new Vue({

templates/main.php

@@ -7,6 +7,7 @@ use \OCA\OcSms\Lib\CountryCodes;
 //\OCP\Util::addScript('ocsms', 'app.min');
 // Develop
 \OCP\Util::addScript('ocsms', 'devel/app');
+\OCP\Util::addScript('ocsms', 'devel/contactlist');
 \OCP\Util::addScript('ocsms', 'devel/helpers');
 \OCP\Util::addScript('ocsms', 'devel/legacy');
 \OCP\Util::addScript('ocsms', 'devel/notifications');
@@ -16,10 +17,10 @@ use \OCA\OcSms\Lib\CountryCodes;
 
 <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 id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
 		</div>
-		<ul class="ng-cloak contact-list" ng-show="!isContactsLoading">
+		<ul class="ng-cloak contact-list" v-if="!isContactsLoading">
-			<li ng-repeat="contact in contacts | orderBy:getContactOrderBy:getReverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
+			<li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on: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>