@nyaruka/temba-components 0.114.1 → 0.116.0

package/src/contacts/ContactChat.ts

@@ -519,6 +519,12 @@ export class ContactChat extends ContactStoreElement {
       changedProperties.has('data') ||
       changedProperties.has('currentContact')
     ) {
+      // unschedule any previous refreshes
+      if (this.refreshId) {
+        clearTimeout(this.refreshId);
+        this.refreshId = null;
+      }
+
       this.currentContact = this.data;
     }
 
@@ -527,17 +533,6 @@ export class ContactChat extends ContactStoreElement {
       this.reset();
       this.fetchPreviousMessages();
     }
-
-    if (changedProperties.has('currentTicket')) {
-      const users = this.shadowRoot.querySelector(
-        'temba-user-select'
-      ) as UserSelect;
-      if (users) {
-        users.setValues(
-          this.currentTicket?.assignee ? [this.currentTicket?.assignee] : []
-        );
-      }
-    }
   }
 
   private reset() {
@@ -609,7 +604,10 @@ export class ContactChat extends ContactStoreElement {
   }
 
   private getEndpoint() {
-    return `/contact/history/${this.contact}/?_format=json`;
+    if (this.contact) {
+      return `/contact/history/${this.contact}/?_format=json`;
+    }
+    return null;
   }
 
   private scheduleRefresh() {
@@ -894,6 +892,9 @@ export class ContactChat extends ContactStoreElement {
     if (this.currentContact && this.newestEventTime) {
       this.polling = true;
       const endpoint = this.getEndpoint();
+      if (!endpoint) {
+        return;
+      }
 
       const fetchContact = this.currentContact.uuid;
 
@@ -929,6 +930,10 @@ export class ContactChat extends ContactStoreElement {
     chat.fetching = true;
     if (this.currentContact) {
       const endpoint = this.getEndpoint();
+      if (!endpoint) {
+        return;
+      }
+
       fetchContactHistory(
         false,
         endpoint,
@@ -949,7 +954,9 @@ export class ContactChat extends ContactStoreElement {
   }
 
   private fetchComplete() {
-    this.chat.fetching = false;
+    if (this.chat) {
+      this.chat.fetching = false;
+    }
   }
 
   private getTembaCompose(): TemplateResult {
@@ -1003,6 +1010,7 @@ export class ContactChat extends ContactStoreElement {
   private handleAssignmentChanged(evt: CustomEvent) {
     const users = evt.currentTarget as UserSelect;
     const assignee = users.values[0];
+
     this.assignTicket(assignee ? assignee.email : null);
     users.blur();
   }
@@ -1054,13 +1062,15 @@ export class ContactChat extends ContactStoreElement {
     if (this.currentTicket) {
       fetchResults(`/api/v2/tickets.json?uuid=${this.currentTicket.uuid}`).then(
         (values) => {
-          if (values.length > 0) {
-            this.fireCustomEvent(CustomEventType.TicketUpdated, {
-              ticket: values[0],
-              previous: this.currentTicket
-            });
-            this.currentTicket = values[0];
-          }
+          this.store.resolveUsers(values, ['assignee']).then(() => {
+            if (values.length > 0) {
+              this.fireCustomEvent(CustomEventType.TicketUpdated, {
+                ticket: values[0],
+                previous: this.currentTicket
+              });
+              this.currentTicket = values[0];
+            }
+          });
         }
       );
     }

package/src/list/TembaList.ts

@@ -195,12 +195,9 @@ export class TembaList extends RapidElement {
     const index = this.getItemIndex(value);
     this.items.splice(index, 1);
     this.items = [...this.items];
-
-    // if we were at the end, move us down
-    this.cursorIndex = Math.max(
-      0,
-      Math.min(this.items.length - 1, this.cursorIndex - 1)
-    );
+    if (this.cursorIndex === index) {
+      this.cursorIndex = -1;
+    }
 
     // request a change even if it is the same, the item is different
     this.requestUpdate('cursorIndex');

package/src/options/Options.ts

@@ -372,7 +372,7 @@ export class Options extends RapidElement {
         (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))
       ) {
         if (!this.internalFocusDisabled) {
-          if (!this.block || this.cursorIndex === -1) {
+          if (!this.block) {
             this.cursorIndex = 0;
           } else {
             if (this.cursorIndex >= newCount) {
@@ -444,6 +444,10 @@ export class Options extends RapidElement {
       }
     }
 
+    if (index === -1) {
+      return;
+    }
+
     const selected = this.options[index];
     this.fireCustomEvent(CustomEventType.Selection, {
       selected,

package/src/store/Store.ts

@@ -519,7 +519,9 @@ export class Store extends RapidElement {
       // we don't want to fetch all users at once so we can benefit from caching
       emails.forEach((email) => {
         promises.push(
-          this.getUrl(`/api/v2/users.json?email=${encodeURIComponent(email)}`)
+          this.getUrl(`/api/v2/users.json?email=${encodeURIComponent(email)}`, {
+            force: true
+          })
         );
       });
 

package/src/user/TembaUser.ts

@@ -48,7 +48,10 @@ export class TembaUser extends RapidElement {
   system: boolean;
 
   @property({ type: String, attribute: false })
-  background: string = '#e6e6e6';
+  bgimage: string = null;
+
+  @property({ type: String, attribute: false })
+  bgcolor: string = '#e6e6e6';
 
   @property({ type: String, attribute: false })
   initials: string = '';
@@ -68,16 +71,25 @@ export class TembaUser extends RapidElement {
     super.updated(changed);
 
     if (changed.has('system') && this.system) {
-      this.background = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
+      this.bgimage = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
     }
 
-    if (changed.has('name') && this.name) {
-      this.background = colorHash.hex(this.name);
-      this.initials = extractInitials(this.name);
+    if (changed.has('name')) {
+      if (this.name) {
+        this.bgcolor = colorHash.hex(this.name);
+        this.initials = extractInitials(this.name);
+      } else {
+        this.bgcolor = '#e6e6e6';
+        this.initials = '';
+      }
     }
 
-    if (changed.has('avatar') && this.avatar) {
-      this.background = `url('${this.avatar}') center / contain no-repeat`;
+    if (changed.has('avatar')) {
+      if (this.avatar) {
+        this.bgimage = `url('${this.avatar}') center / contain no-repeat`;
+      } else if (!this.system) {
+        this.bgimage = null;
+      }
     }
   }
 
@@ -98,9 +110,9 @@ export class TembaUser extends RapidElement {
               overflow: hidden;
               font-size: 12px;
               box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
-              background:${this.background}"
+              background:${this.bgimage || this.bgcolor};"
       >
-        ${this.initials && !this.avatar
+        ${this.initials && !this.bgimage
           ? html` <div
               style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
             >

package/test/temba-contact-chat.test.ts

@@ -60,6 +60,11 @@ describe('temba-contact-chat', () => {
       '/test-assets/contacts/history.json'
     );
 
+    mockGET(
+      /\/api\/v2\/users\.json\?email=admin1%40nyaruka\.com/,
+      '/test-assets/api/users/admin1.json'
+    );
+
     mockAPI();
     clock = useFakeTimers();
   });