FIX: Roster list and presence completion listening

components/contact-list/contact-list.html

@@ -1,16 +1,26 @@
 <div class="contact-list">
-    <el-input :placeholder="$t('chat.searchPlaceholder')" v-model="searchTerm" 
+    <el-input :placeholder="$t('contacts.searchPlaceholder')" v-model="searchTerm" 
         @keyup.native="searchContactByName()" class="mt2 mb1 b-rounded-25" 
+        :disabled="rosterListByGroup.length === 0"
         id="contact-search"></el-input>
+
     <span class="text-center text-danger text-bold ml2" v-if="searchedRosterList.length === 0 
         && searchTerm.length < 3 
         && searchTerm.length !== 0">
-        {{ $t('chat.min3Characters') }}
+        {{ $t('contacts.min3Characters') }}
     </span>
     <span class="text-center text-danger text-bold ml2" v-if="searchedRosterList.length === 0 && searchTerm.length > 2">
-        {{ $t('chat.noContactFound') }}
+        {{ $t('contacts.noContactFound') }}
         <img src="emoji/72x72/2639.png" width="12" height="12"/>
     </span>
+
+    <span class="text-center text-primary text-bold ml2" v-if="isLoadingRoster && rosterListByGroup.length === 0">
+        {{ $t('contacts.loadingContacts') }}
+    </span>
+    <span class="text-center text-primary text-bold ml2" v-if="isLoadingRoster === false && rosterListByGroup.length === 0">
+        {{ $t('contacts.noAvailableContacts') }}
+    </span>
+
     <transition name="slide-bt">
         <el-collapse class="px2 mt1" v-model="activeAccordion" v-show="searchTerm.length === 0" 
             :class="{ 'dark-theme': chatConfig.darkMode === true, 'dark-border': chatConfig.darkMode === true }" accordion>

components/contact-list/contact-list.js

@@ -31,6 +31,9 @@ export default {
     rosterList() {
       return this.$store.state.app.rosterList;
     },
+    isLoadingRoster() {
+      return this.$store.state.app.isLoadingRoster;
+    },
     conversationList() {
       return this.$store.state.chat.conversationList;
     },

services/xmpp-service.js

@@ -45,7 +45,7 @@ export default {
       xmlns: 'jabber:iq:roster'
     });
 
-    client.sendIQ(iq, XmppUtils.rosterCallback.bind(ctt));
+    client.sendIQ(iq, XmppUtils.rosterCallback.bind(this));
     client.addHandler(XmppUtils.presenceHandler.bind(this), null, 'presence');
     this.translation = this.i18n;
     client.addHandler(XmppUtils.messageHandler.bind(this), null, 'message', null, null, null);
@@ -170,7 +170,7 @@ export default {
       presenceSignal = $pres();
     } else {
       presenceSignal = $pres().c('show').t(presence);
-    //                    .up().c('priority').t(127);
+    // TODO: Presence config per user                   .up().c('priority').t(127);
     }
 
     client.send(presenceSignal);

static/locales/de-de.json

@@ -14,9 +14,6 @@
         "noConversation": "Du hast bisher noch keine Konversationen",
         "openNewConversation": "Neuen Chat öffnen",
         "back": "Zurück",
-        "searchPlaceholder": "Kontakte suchen",
-        "min3Characters": "Bitte gebe mindestens 3 Zeichen ein.",
-        "noContactFound": "Keine Kontakte gefunden",
         "adminMessageTitle": "Admin Nachricht"
     },
     "contactDetails": {
@@ -33,6 +30,13 @@
         "oldMessagesLimit": "Du hast das Limit an alten Nachrichten in der Suche erreicht",
         "oldMessagesLabel": "Alte Nachrichten"
     },
+    "contacts": {
+        "searchPlaceholder": "Kontakte suchen",
+        "min3Characters": "Bitte gebe mindestens 3 Zeichen ein.",
+        "noContactFound": "Keine Kontakte gefunden",
+        "loadingContacts": "Kontakte werden geladen...",
+        "noAvailableContacts": "Sie haben keine Kontakte."
+    },
     "profile": {
         "changePhoto": "Bearbeiten",
         "onlinePresence": "Online",

static/locales/en-us.json

@@ -14,9 +14,6 @@
         "noConversation": "You do not have conversations yet",
         "openNewConversation": "Open New Chat",
         "back": "Go Back",
-        "searchPlaceholder": "Search Contact",
-        "min3Characters": "Please enter at least 3 characters.",
-        "noContactFound": "No contacts found",
         "adminMessageTitle": "Admin Message"
     },
     "contactDetails": {
@@ -33,6 +30,13 @@
         "oldMessagesLimit": "You have reached the old message search limit",
         "oldMessagesLabel": "Old Messages"
     },
+    "contacts": {
+        "searchPlaceholder": "Search Contact",
+        "min3Characters": "Please enter at least 3 characters.",
+        "noContactFound": "No contacts found",
+        "loadingContacts": "Loading contacts...",
+        "noAvailableContacts": "You do not have any contacts."
+    },
     "profile": {
         "changePhoto": "Change",
         "onlinePresence": "Online",

static/locales/pt-br.json

@@ -14,9 +14,6 @@
         "noConversation": "Você ainda não possui conversas.",
         "openNewConversation": "Abrir Nova Conversa",
         "back": "Voltar",
-        "searchPlaceholder": "Pesquisar Contato",
-        "min3Characters": "Digite no mínimo 3 caracteres.",
-        "noContactFound": "Nenhum contato encontrado.",
         "adminMessageTitle": "Mensagem do Administrador"
     },
     "chatbox": {
@@ -28,6 +25,13 @@
         "oldMessagesLimit": "Você atingiu o limite de pesquisa de mensagens antigas",
         "oldMessagesLabel": "Mensagens Antigas"
     },
+    "contacts": {
+        "searchPlaceholder": "Pesquisar Contato",
+        "min3Characters": "Digite no mínimo 3 caracteres.",
+        "noContactFound": "Nenhum contato encontrado.",
+        "loadingContacts": "Carregando contatos...",
+        "noAvailableContacts": "Você não possui contatos."
+    },
     "contactDetails": {
         "modalTitle": "Detalhes do Contato",
         "nameLabel": "Nome",

store/app/actions.js

@@ -77,6 +77,9 @@ const actions = {
   addToRosterList({ commit }, rosterObj) {
     commit(types.ADD_TO_ROSTER_LIST, rosterObj);
   },
+  updateIsLoadingRoster({ commit }, bol) {
+    commit(types.UPDATE_IS_LOADING_ROSTER, bol);
+  },
 
   // Profile Image
   updateProfileImageList({ commit }, profileImageList) {

store/app/mutation-types.js

@@ -18,6 +18,7 @@ export const UPDATE_ROSTER_OBJ = 'UPDATE_ROSTER_OBJ';
 export const UPDATE_PRESENCE_ROSTER_CONTACT = 'UPDATE_PRESENCE_ROSTER_CONTACT';
 export const UPDATE_STATUS_ROSTER_CONTACT = 'UPDATE_STATUS_ROSTER_CONTACT';
 export const ADD_TO_ROSTER_LIST = 'ADD_TO_ROSTER_LIST';
+export const UPDATE_IS_LOADING_ROSTER = 'UPDATE_IS_LOADING_ROSTER';
 
 // Profile Image
 export const UPDATE_PROFILE_IMAGE_LIST = 'UPDATE_PROFILE_IMAGE_LIST';

store/app/mutations.js

@@ -56,6 +56,9 @@ const mutations = {
   [types.ADD_TO_ROSTER_LIST](state, rosterObj) {
     state.rosterList.push(rosterObj);
   },
+  [types.UPDATE_IS_LOADING_ROSTER](state, bol) {
+    state.isLoadingRoster = bol;
+  },
 
   // Profile Image
   [types.UPDATE_PROFILE_IMAGE_LIST](state, { profileImageList }) {

store/app/state.js

@@ -7,7 +7,7 @@ export const state = () => ({
   xmppClient: null,
   authUser: '',
   rosterList: [],
-  rosterFirstLoad: true,
+  isLoadingRoster: true,
   profileImageList: [],
   chatTimestamp: Date.now(),
 });

utils/xmpp-utils.js

@@ -86,8 +86,15 @@ export default {
         return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
       });
 
-      localStorage.setItem(btoa(`cached-roster-${this.store.state.app.authUser.username}`), btoa(JSON.stringify(rosterList)));
+      const cachedRosterList = JSON.parse(JSON.stringify(rosterList));
+      cachedRosterList.forEach(function(roster){
+        roster.presence = { id: 'off', value: 'Offline' };
+      });
+
+      localStorage.setItem(btoa(`cached-roster-${this.store.state.app.authUser.username}`), btoa(JSON.stringify(cachedRosterList)));
     }
+
+    this.store.dispatch('app/updateIsLoadingRoster', false);
   },
   presenceHandler(presence) {
     const appConfig = this.store.state.app.appConfig;