flywithu/ocsms
1
0
Fork 0
mirror of https://github.com/nerzhul/ocsms.git synced 2025-10-30 18:07:36 +00:00
Code Issues Releases Wiki Activity

Conversations are now loaded using vue

Browse Source
This commit is contained in:
Loic Blot 2018-09-06 23:56:29 +02:00 committed by Loïc Blot
parent 78b5c0f915
commit 364bd12be6
3 changed files with 43 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/devel/conversation.js
View File

@ -67,12 +67,13 @@ var Conversation = new Vue({
// Improve JS performance // Improve JS performance
var msgClass = ''; var msgClass = '';
var msgCount = 0; var msgCount = 0;
var self = this;
$.each(jsondata["conversation"], function (id, vals) { $.each(jsondata["conversation"], function (id, vals) {
if (vals["type"] === 1) { if (vals["type"] == 1) {
msgClass = "recv"; msgClass = "recv";
} }
else if (vals["type"] === 2) { else if (vals["type"] == 2) {
msgClass = "sent"; msgClass = "sent";
} }
else { else {
@ -81,11 +82,11 @@ var Conversation = new Vue({
// Store the greater msg date for refresher // Store the greater msg date for refresher
// Note: we divide by 100 because number compare too large integers // Note: we divide by 100 because number compare too large integers
if ((id / 100) > (this.lastConvMessageDate / 100)) { if ((id / 100) > (self.lastConvMessageDate / 100)) {
this.lastConvMessageDate = id; self.lastConvMessageDate = id;
// Multiplicate ID to permit date to use it properly // Multiplicate ID to permit date to use it properly
this.addConversationMessage({ self.addConversationMessage({
'id': id, 'id': id,
'type': msgClass, 'type': msgClass,
'date': new Date(id * 1), 'date': new Date(id * 1),
@ -105,7 +106,7 @@ var Conversation = new Vue({
this.messages.push(msg); this.messages.push(msg);
}, },
removeConversationMessage: function (msgId) { removeConversationMessage: function (msgId) {
var len = $scope.messages.length; var len = this.messages.length;
var self = this; var self = this;
for (var i = 0; i < len; i++) { for (var i = 0; i < len; i++) {
var curMsg = this.messages[i]; var curMsg = this.messages[i];
@ -120,6 +121,24 @@ var Conversation = new Vue({
return; return;
} }
} }
},
removeConversation: function () {
var self = this;
$.post(Sms.generateURL('/delete/conversation'), {"contact": self.selectedContact.label}, function (data) {
// Reinit main window
self.selectedContact.label = "";
self.selectedContact.opt_numbers = "";
self.selectedContact.avatar = undefined;
ContactList.removeContact(self.selectedContact);
self.messages = [];
self.selectedContact = {};
OC.Util.History.pushState('');
});
}
},
computed: {
orderedMessages: function () {
return _.orderBy(this.messages, ['date'], ['desc'])
} }
} }
}); });

15
js/devel/legacy.js
View File

@ -117,21 +117,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
); );
}; };
$scope.removeConversation = function () {
$.post(Sms.generateURL('/delete/conversation'), {"contact": $scope.selectedContact.label}, function (data) {
// Reinit main window
$scope.selectedContact.label = "";
$scope.selectedContact.opt_numbers = "";
$scope.selectedContact.avatar = undefined;
ContactList.removeContact($scope.selectedContact);
$scope.$apply(function () {
$scope.messages = [];
});
$scope.selectedContact.nav = "";
OC.Util.History.pushState('');
});
};
$scope.filterSms = function (query) { $scope.filterSms = function (query) {
if (query !== $scope.lastSearch) { if (query !== $scope.lastSearch) {
} }

35
templates/main.php
View File

@ -25,14 +25,14 @@ use \OCA\OcSms\Lib\CountryCodes;
<div class="contact-list-no-contact" v-if="orderedContacts.length == 0 && !isContactsLoading"><?php p($l->t('No contact found.'));?></div> <div class="contact-list-no-contact" v-if="orderedContacts.length == 0 && !isContactsLoading"><?php p($l->t('No contact found.'));?></div>
<ul class="contact-list" v-if="orderedContacts.length > 0"> <ul class="contact-list" v-if="orderedContacts.length > 0">
<li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on: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 }}" v-if="contact.avatar !== undefined" /> <img class="ocsms-plavatar" v-bind:src="{{ contact.avatar }}" v-if="contact.avatar !== undefined" />
<div class="ocsms-plavatar" v-if="contact.avatar === undefined" v-bind:style="{'backgroundColor': getContactColor(contact.uid) }">{{ contact.label | firstCharacter }}</div> <div class="ocsms-plavatar" v-if="contact.avatar === undefined" v-bind:style="{'backgroundColor': getContactColor(contact.uid) }">{{ 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> <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>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div id="app-settings" class="ng-scope"> <div id="app-settings">
<div id="app-settings-header"> <div id="app-settings-header">
<button name="app settings" class="settings-button" data-apps-slide-toggle="#app-settings-content"> <button name="app settings" class="settings-button" data-apps-slide-toggle="#app-settings-content">
<?php p($l->t('Settings'));?> <?php p($l->t('Settings'));?>
@ -74,9 +74,10 @@ use \OCA\OcSms\Lib\CountryCodes;
</div> </div>
<div id="app-conversation"> <div id="app-conversation">
<div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div> <div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div>
<div id="app-content-header" v-if="!isConvLoading" v-bind:style="{'backgroundColor': getContactColor(selectedContact.uid) }"> <div id="app-content-header" v-if="!isConvLoading && messages.length > 0"
v-bind:style="{'backgroundColor': getContactColor(selectedContact.uid) }">
<div id="ocsms-contact-avatar"> <div id="ocsms-contact-avatar">
<img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" ng-src="{{ selectedContact.avatar }}" /> <img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" v-bind:src="{{ selectedContact.avatar }}" />
<div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div> <div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div>
</div> </div>
<div id="ocsms-contact-details"> <div id="ocsms-contact-details">
@ -89,19 +90,19 @@ use \OCA\OcSms\Lib\CountryCodes;
</div> </div>
</div> </div>
<!-- <div id="app-content-wrapper" v-if="!isConvLoading">--> <div id="app-content-wrapper" v-if="!isConvLoading">
<!-- <div v-if="messages.length == 0" id="ocsms-empty-conversation">--><?php //p($l->t('Please select a conversation from the list to load it.'));?><!--</div>--> <div v-if="messages.length == 0" id="ocsms-empty-conversation"><?php p($l->t('Please select a conversation from the list to load it.'));?></div>
<!-- <div v-if="messages.length > 0" class="ng-cloak ocsms-messages-container">--> <div v-if="messages.length > 0" class="ocsms-messages-container">
<!-- <div v-for="message in messages | orderBy:'date'">--> <div v-for="message in orderedMessages">
<!-- <div class="msg-{{ message.type }}">--> <div v-bind:class="['msg-'+ message.type]">
<!-- <div>{{ message.content }}</div>--> <div>{{ message.content }}</div>
<!-- <div style="display: block;" id="ocsms-message-removal" class="icon-delete svn delete action" v-on:click="removeConversationMessage(message.id);"></div>--> <div style="display: block;" id="ocsms-message-removal" class="icon-delete svn delete action" v-on:click="removeConversationMessage(message.id);"></div>
<!-- <div class="msg-date">{{ message.date | date:'medium' }}</div>--> <div class="msg-date">{{ message.date | date:'medium' }}</div>
<!-- </div>--> </div>
<!-- <div class="msg-spacer"></div>--> <div class="msg-spacer"></div>
<!-- </div>--> </div>
<!-- <div id="searchresults"></div>--> <!-- <div id="searchresults"></div>-->
<!-- </div>--> </div>
<!-- </div>--> </div>
</div> </div>
</div> </div>