@nyaruka/temba-components 0.68.0 → 0.71.0

package/src/contacts/ContactTickets.ts

@@ -2,15 +2,12 @@ import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
-import {
-  getClasses,
-  getFullName,
-  postJSON,
-  renderAvatar,
-  stopEvent,
-} from '../utils';
+import { getClasses, postJSON, stopEvent } from '../utils';
 import { Icon } from '../vectoricon';
 
+const dropdownUserScale = 0.7;
+const inlineUserScale = 0.8;
+
 export class ContactTickets extends StoreElement {
   @property({ type: String })
   agent: string;
@@ -129,6 +126,10 @@ export class ContactTickets extends StoreElement {
         border-bottom: 1px solid #f3f3f3;
       }
 
+      .option-group temba-user {
+        flex-grow: 1;
+      }
+
       .assigned .user {
         flex-grow: 1;
       }
@@ -164,9 +165,6 @@ export class ContactTickets extends StoreElement {
         background: var(--color-selection);
       }
 
-      .user .avatar {
-      }
-
       .user .name {
         display: -webkit-box;
         -webkit-line-clamp: 1;
@@ -243,16 +241,6 @@ export class ContactTickets extends StoreElement {
     }
   }
 
-  private renderUser(user: User) {
-    if (!user) {
-      return null;
-    }
-    return html`<div class="user">
-      <div class="avatar">${renderAvatar({ user: user, scale: 0.6 })}</div>
-      <div class="name">${getFullName(user)}</div>
-    </div>`;
-  }
-
   private handleClose(uuid: string) {
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
@@ -285,6 +273,7 @@ export class ContactTickets extends StoreElement {
     if (ticket.assignee && ticket.assignee.email === email) {
       return;
     }
+    this.blur();
 
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
@@ -352,13 +341,10 @@ export class ContactTickets extends StoreElement {
                       <div slot="toggle" class="toggle">
                         ${ticket.assignee
                           ? html`
-                              <div>
-                                ${renderAvatar({
-                                  name: ticket.assignee.name,
-                                  user: ticket.assignee,
-                                  scale: 0.7,
-                                })}
-                              </div>
+                              <temba-user
+                                email=${ticket.assignee.email}
+                                scale="${inlineUserScale}"
+                              ></temba-user>
                             `
                           : html`
                               <temba-button
@@ -384,11 +370,11 @@ export class ContactTickets extends StoreElement {
                                   ? 'current-user'
                                   : ''}"
                               >
-                                ${this.renderUser(
-                                  users.find(
-                                    user => user.email === ticket.assignee.email
-                                  )
-                                )}
+                                <temba-user
+                                  email=${ticket.assignee.email}
+                                  name
+                                  scale="${dropdownUserScale}"
+                                ></temba-user>
                                 <temba-button
                                   name="Unassign"
                                   primary
@@ -418,7 +404,11 @@ export class ContactTickets extends StoreElement {
                                   );
                                 }}
                               >
-                                ${this.renderUser(agent)}
+                                <temba-user
+                                  email=${agent.email}
+                                  name
+                                  scale="${dropdownUserScale}"
+                                ></temba-user>
                               </div>
                             `
                           : null}
@@ -444,7 +434,11 @@ export class ContactTickets extends StoreElement {
                                 );
                               }}
                             >
-                              ${this.renderUser(user)}
+                              <temba-user
+                                email=${user.email}
+                                scale="${dropdownUserScale}"
+                                name
+                              ></temba-user>
                             </div>`;
                           })}
                         </div>

package/src/contacts/events.ts

@@ -1,13 +1,6 @@
-import { css, EventPart, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
-import {
-  getClasses,
-  NamedObject,
-  oxford,
-  oxfordFn,
-  oxfordNamed,
-  renderAvatar,
-} from '../utils';
+import { getClasses, oxford, oxfordFn, oxfordNamed } from '../utils';
 import { Icon } from '../vectoricon';
 import { getDisplayName } from './helpers';
 
@@ -758,10 +751,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
   return html`<div style="">${inner}</div>`;
 };
 
-export const renderMsgEvent = (
-  event: MsgEvent,
-  agent: string
-): TemplateResult => {
+export const renderMsgEvent = (event: MsgEvent): TemplateResult => {
   const isInbound = event.type === Events.MESSAGE_RECEIVED;
   const isError = event.status === 'E';
   const isFailure = event.status === 'F';
@@ -874,9 +864,10 @@ export const renderMsgEvent = (
     </div>
 
     ${!isInbound && event.created_by
-      ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
-          ${renderAvatar({ user: event.created_by })}
-        </div>`
+      ? html`<temba-user
+          style="margin-left:0.5em"
+          email=${event.created_by.email}
+        ></temba-user>`
       : null}
   </div>`;
 };
@@ -1010,9 +1001,7 @@ export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
         ></temba-date>
       </div>
     </div>
-    <div style="margin-left:0.8em;margin-top:0.3em;">
-      ${renderAvatar({ user: event.created_by })}
-    </div>
+    <temba-user email=${event.created_by.email}></temba-user>
   </div>`;
 };
 

package/src/imagepicker/ImagePicker.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, css, PropertyValueMap } from 'lit';
-import 'croppie/croppie.js';
 import { CroppieCSS } from './CroppieCSS';
 import { property } from 'lit/decorators.js';
 import { Icon } from '../vectoricon';
@@ -166,11 +165,11 @@ export class ImagePicker extends FormElement {
       wrapper.removeChild(wrapper.firstChild);
     }
     this.showCroppie = true;
-    const croppie = document.createElement('div');
-    wrapper.appendChild(croppie);
+    const ele = document.createElement('div');
+    wrapper.appendChild(ele);
 
     const Croppie = (window as any).Croppie;
-    this.croppie = new Croppie(croppie, {
+    this.croppie = new Croppie(ele, {
       enableExif: true,
       viewport: {
         width: 300,
@@ -206,9 +205,6 @@ export class ImagePicker extends FormElement {
 
         picker.value = fd;
         picker.closeCroppie();
-
-        console.log('image changed', picker.name, picker.value, picker.url);
-        // picker.dispatchEvent(new CustomEvent('image-changed', { detail: resp }));
       });
   }
 

package/src/list/TicketList.ts

@@ -3,7 +3,6 @@ import { property } from 'lit/decorators.js';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
 import { Icon } from '../vectoricon';
-import { renderAvatar } from '../utils';
 
 export class TicketList extends TembaList {
   @property({ type: String })
@@ -76,10 +75,10 @@ export class TicketList extends TembaList {
             >
               <div>
                 ${!contact.ticket.closed_on && contact.ticket.assignee
-                  ? html`${renderAvatar({
-                      user: contact.ticket.assignee,
-                      scale: 0.8,
-                    })}`
+                  ? html`<temba-user
+                      email=${contact.ticket.assignee.email}
+                      scale="0.8"
+                    ></temba-user>`
                   : null}
               </div>
             </div>

package/src/store/Store.ts

@@ -216,6 +216,10 @@ export class Store extends RapidElement {
     );
   }
 
+  public getUser(email: string) {
+    return this.users.find((user: User) => user.email === email);
+  }
+
   public firstUpdated() {
     this.reset();
   }

package/src/store/StoreElement.ts

@@ -1,14 +1,15 @@
-import { html, PropertyValueMap, TemplateResult } from 'lit';
+import { PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { RapidElement } from '../RapidElement';
+
 import { Store } from './Store';
+import { StoreMonitorElement } from './StoreMonitorElement';
 
 /**
  * StoreElement is a listener for a given endpoint that re-renders
  * when the underlying store element changes
  */
-export class StoreElement extends RapidElement {
+export class StoreElement extends StoreMonitorElement {
   @property({ type: String })
   url: string;
 
@@ -31,17 +32,15 @@ export class StoreElement extends RapidElement {
     });
   }
 
-  private handleStoreUpdated(event: CustomEvent) {
-    this.store.initialHttpComplete.then(() => {
-      if (event.detail.url === this.url) {
-        const previous = this.data;
-        this.data = event.detail.data;
-        this.fireCustomEvent(CustomEventType.Refreshed, {
-          data: event.detail.data,
-          previous,
-        });
-      }
-    });
+  protected storeUpdated(event: CustomEvent) {
+    if (event.detail.url === this.url) {
+      const previous = this.data;
+      this.data = event.detail.data;
+      this.fireCustomEvent(CustomEventType.Refreshed, {
+        data: event.detail.data,
+        previous,
+      });
+    }
   }
 
   protected updated(
@@ -59,30 +58,6 @@ export class StoreElement extends RapidElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.store = document.querySelector('temba-store') as Store;
-    this.handleStoreUpdated = this.handleStoreUpdated.bind(this);
     this.prepareData = this.prepareData.bind(this);
-    if (this.store) {
-      this.store.addEventListener(
-        CustomEventType.StoreUpdated,
-        this.handleStoreUpdated
-      );
-    }
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.store) {
-      this.store.removeEventListener(
-        CustomEventType.StoreUpdated,
-        this.handleStoreUpdated
-      );
-    }
-  }
-
-  public render(): TemplateResult {
-    if (!this.store.ready && this.showLoading) {
-      return html`<temba-loading></temba-loading>`;
-    }
   }
 }

package/src/store/StoreMonitorElement.ts

@@ -0,0 +1,61 @@
+import { html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { CustomEventType } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+import { Store } from './Store';
+
+/**
+ * StoreMonitorElement notifies when the store is updated and with what url
+ */
+export class StoreMonitorElement extends RapidElement {
+  @property({ type: String })
+  url: string;
+
+  @property({ type: Boolean })
+  showLoading = false;
+
+  store: Store;
+
+  private handleStoreUpdated(event: CustomEvent) {
+    this.store.initialHttpComplete.then(() => {
+      this.storeUpdated(event);
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  protected storeUpdated(event: CustomEvent) {}
+
+  protected updated(
+    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(properties);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.store = document.querySelector('temba-store') as Store;
+    this.handleStoreUpdated = this.handleStoreUpdated.bind(this);
+    if (this.store) {
+      this.store.addEventListener(
+        CustomEventType.StoreUpdated,
+        this.handleStoreUpdated
+      );
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.store) {
+      this.store.removeEventListener(
+        CustomEventType.StoreUpdated,
+        this.handleStoreUpdated
+      );
+    }
+  }
+
+  public render(): TemplateResult {
+    if (!this.store.ready && this.showLoading) {
+      return html`<temba-loading></temba-loading>`;
+    }
+  }
+}

package/src/user/TembaUser.ts

@@ -0,0 +1,111 @@
+import { PropertyValueMap, TemplateResult, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { User } from '../interfaces';
+import { StoreMonitorElement } from '../store/StoreMonitorElement';
+import { colorHash, extractInitials } from '../utils';
+
+export class TembaUser extends StoreMonitorElement {
+  public static styles = css`
+    :host {
+      display: flex;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    .name {
+      flex-grow: 1;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  `;
+
+  @property({ type: String })
+  email: string;
+
+  @property({ type: Number })
+  scale: number;
+
+  @property({ type: Boolean })
+  name: string;
+
+  @property({ type: Object, attribute: false })
+  user: User;
+
+  @property({ type: String, attribute: false })
+  background: string;
+
+  @property({ type: String, attribute: false })
+  initials: string;
+
+  @property({ type: String, attribute: false })
+  fullName: string;
+
+  public updated(
+    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changed);
+    if (changed.has('email')) {
+      this.user = this.store.getUser(this.email);
+      if (this.user) {
+        this.fullName = [this.user.first_name, this.user.last_name].join(' ');
+        if (this.user.avatar) {
+          this.background = `url('${this.user.avatar}') center / contain no-repeat`;
+          this.initials = '';
+        } else {
+          this.background = colorHash.hex(this.fullName);
+          this.initials = extractInitials(this.fullName);
+        }
+      }
+    }
+  }
+
+  public render(): TemplateResult {
+    if (!this.user) {
+      return null;
+    }
+
+    return html` <div class="wrapper">
+      <div
+        class="avatar-circle"
+        style="
+              transform:scale(${this.scale || 1});
+              display: flex;
+              height: 30px;
+              width: 30px;
+              flex-direction: row;
+              align-items: center;
+              color: #fff;
+              border-radius: 100%;
+              font-weight: 400;
+              overflow: hidden;
+              font-size: 12px;
+              box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
+              background:${this.background}"
+      >
+        ${this.initials
+          ? html` <div
+              style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
+            >
+              <div style="border:0px solid blue;">${this.initials}</div>
+            </div>`
+          : null}
+      </div>
+      ${this.name
+        ? html`<div
+            class="name"
+            style="margin: 0px ${this.scale - 0.5}em;font-size:${this.scale +
+            0.2}em"
+          >
+            ${this.fullName}
+          </div>`
+        : null}
+    </div>`;
+  }
+}

package/src/utils/index.ts

@@ -4,11 +4,10 @@ import { Button } from '../button/Button';
 import { Dialog } from '../dialog/Dialog';
 import { Attachment, ContactField, Ticket, User } from '../interfaces';
 import ColorHash from 'color-hash';
-import { userInfo } from 'os';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
-const colorHash = new ColorHash();
+export const colorHash = new ColorHash();
 
 export type Asset = KeyedAsset & Ticket & ContactField;
 

package/temba-modules.ts

@@ -53,6 +53,7 @@ import { NotificationList } from './src/list/NotificationList';
 import { WebChat } from './src/webchat/WebChat';
 import { ImagePicker } from './src/imagepicker/ImagePicker';
 import { Mask } from './src/mask/Mask';
+import { TembaUser } from './src/user/TembaUser';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -116,3 +117,4 @@ addCustomElement('temba-thumbnail', Thumbnail);
 addCustomElement('temba-webchat', WebChat);
 addCustomElement('temba-image-picker', ImagePicker);
 addCustomElement('temba-mask', Mask);
+addCustomElement('temba-user', TembaUser);

package/templates/index.html

@@ -1,7 +1,10 @@
 <!doctype html>
 <html lang="en">
-    <head></head>
-    <body>
-        <script type="module" src="../out-tsc/temba-components.js"></script>
-    </body>
+
+<head></head>
+
+<body>
+    <script type="module" src="../out-tsc/temba-components.js"></script>
+</body>
+
 </html>

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

@@ -48,9 +48,7 @@ describe('temba-contact-tickets', () => {
     });
 
     // click on the avatar element
-    (
-      tickets.shadowRoot.querySelector('.avatar-circle') as HTMLDivElement
-    ).click();
+    (tickets.shadowRoot.querySelector('temba-user') as HTMLDivElement).click();
     assert.instanceOf(tickets, ContactTickets);
     await assertScreenshot('contacts/tickets-assignment', getClip(tickets));
   });