From 3dfaedc3174efb6e1ffca3cbae5b043d22749290 Mon Sep 17 00:00:00 2001
From: Loic Blot <loic.blot@unix-experience.fr>
Date: Thu, 6 Sep 2018 07:56:43 +0200
Subject: [PATCH] Prepare contactlist with vue

---
 js/devel/app.js           |  2 +-
 js/devel/contactlist.js   | 40 +++++++++++++++++++++++++++++++++++++++
 js/devel/helpers.js       |  2 +-
 js/devel/legacy.js        |  2 +-
 js/devel/notifications.js |  2 +-
 js/devel/settings.js      |  2 +-
 templates/main.php        |  7 ++++---
 7 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 js/devel/contactlist.js

diff --git a/js/devel/app.js b/js/devel/app.js
index 1d9bab3..457a37b 100644
--- a/js/devel/app.js
+++ b/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 = {
diff --git a/js/devel/contactlist.js b/js/devel/contactlist.js
new file mode 100644
index 0000000..4bbc067
--- /dev/null
+++ b/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)
+		}
+	}
+});
\ No newline at end of file
diff --git a/js/devel/helpers.js b/js/devel/helpers.js
index 3970aea..46f5e77 100644
--- a/js/devel/helpers.js
+++ b/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) {
diff --git a/js/devel/legacy.js b/js/devel/legacy.js
index 11321b6..6d3c2d1 100644
--- a/js/devel/legacy.js
+++ b/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', []);
diff --git a/js/devel/notifications.js b/js/devel/notifications.js
index 901a894..c49874b 100644
--- a/js/devel/notifications.js
+++ b/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 = {
diff --git a/js/devel/settings.js b/js/devel/settings.js
index d1279a0..5ca0a24 100644
--- a/js/devel/settings.js
+++ b/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({
diff --git a/templates/main.php b/templates/main.php
index 46f4bca..da65bd0 100644
--- a/templates/main.php
+++ b/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">
-			<li ng-repeat="contact in contacts | orderBy:getContactOrderBy:getReverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
+		<ul class="ng-cloak contact-list" v-if="!isContactsLoading">
+			<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>