Merge pull request #667 from threema-ch/665-inactive-contacts

 Member list editor: Handle inactive contacts

src/directives/contact_badge.ts

@@ -85,17 +85,13 @@ export default [
                 };
             }],
             template: `
-                <div class="contact-badge receiver-badge" ng-click="ctrl.click()">
+                <div class="contact-badge receiver-badge" ng-class="{'inactive': ctrl.contactReceiver.state == 'INACTIVE'}" ng-click="ctrl.click()">
                     <section class="avatar-box">
                         <eee-avatar eee-receiver="ctrl.contactReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name"
-                        ng-bind-html="ctrl.contactReceiver.displayName | escapeHtml | emojify">
-                    </div>
-                    <div class="contact-badge-identity">
-                        {{ctrl.contactReceiver.id}}
-                    </div>
+                    <div class="receiver-badge-name" ng-bind-html="ctrl.contactReceiver.displayName | escapeHtml | emojify"></div>
+                    <div class="contact-badge-identity">{{ ctrl.contactReceiver.id }}</div>
                     <div class="contact-badge-actions" ng-if="ctrl.showActions">
                         <md-button aria-label="Remove" class="md-icon-button" ng-click="ctrl.onRemove(ctrl.contactReceiver)">
                             <i class="material-icons md-dark md-24">delete</i>

src/directives/member_list_editor.ts

@@ -51,24 +51,38 @@ export default [
                 };
 
                 this.querySearch = (query: string): threema.ContactReceiver[] => {
-
                     if (query !== undefined && query.length <= 0) {
-                        // do not show a result on empty entry
+                        // Do not show a result on empty entry
                         return [];
                     } else {
-                        // search for contacts, do not show selected contacts
+                        // Search for contacts, do not show selected contacts
                         const lowercaseQuery = query.toLowerCase();
-                        const result = this.allContacts.filter((contactReceiver: threema.ContactReceiver) => {
-                            return this.members.filter((identity: string) => {
-                                    return identity === contactReceiver.id;
-                                }).length === 0
-                                && (
-                                    // find in display name
-                                    contactReceiver.displayName.toLowerCase().indexOf(lowercaseQuery) >= 0
-                                    // or threema identity
-                                    || contactReceiver.id.toLowerCase().indexOf(lowercaseQuery) >= 0
-                                );
-                        });
+                        const hideInactiveContacts = !webClientService.appConfig.showInactiveIDs;
+                        const result = this.allContacts
+                            .filter((contactReceiver: threema.ContactReceiver) => {
+                                // Ignore already selected contacts
+                                if (this.members.filter((id: string) => id === contactReceiver.id).length !== 0) {
+                                    return false;
+                                }
+
+                                // Potentially ignore inactive contacts
+                                if (hideInactiveContacts && contactReceiver.state === 'INACTIVE') {
+                                    return false;
+                                }
+
+                                // Search in display name
+                                if (contactReceiver.displayName.toLowerCase().indexOf(lowercaseQuery) >= 0) {
+                                    return true;
+                                }
+
+                                // Search in identity
+                                if (contactReceiver.id.toLowerCase().indexOf(lowercaseQuery) >= 0) {
+                                    return true;
+                                }
+
+                                // Not found
+                                return false;
+                            });
 
                         return result.length <= AUTOCOMPLETE_MAX_RESULTS ? result
                             : result.slice(0, AUTOCOMPLETE_MAX_RESULTS);
@@ -79,10 +93,9 @@ export default [
                     if (contact.id === webClientService.me.id) {
                         return false;
                     }
-
-                    this.members = this.members.filter(function(i: string) {
-                        return i !== contact.id;
-                    });
+                    this.members = this.members.filter(
+                        (identity: string) => identity !== contact.id,
+                    );
                     return true;
                 };
             }],

src/sass/components/_receiver_badge.scss

@@ -31,15 +31,18 @@
     margin-right: $main-padding;
   }
 
-
   .receiver-badge-name {
     margin-right: $main-padding;
   }
+
+  &.inactive {
+    opacity: 0.5;
+  }
+
   /**
     Contact badge specific rules
    */
   &.contact-badge {
-
     .contact-badge-identity {
       flex: 1;
       text-align: right;
@@ -52,7 +55,6 @@
     Distribution List badge specific rules
    */
   &.distribution-list-badge {
-
   }
 
   /**