@nyaruka/temba-components 0.112.0 → 0.114.0

package/src/store/Store.ts

@@ -28,6 +28,7 @@ import { css, html } from 'lit';
 import { configureLocalization } from '@lit/localize';
 import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { StoreMonitorElement } from './StoreMonitorElement';
+import { getFullName } from '../user/TembaUser';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -83,9 +84,6 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'workspace' })
   workspaceEndpoint: string;
 
-  @property({ type: String, attribute: 'users' })
-  usersEndpoint: string;
-
   @property({ type: String, attribute: 'shortcuts' })
   shortcutsEndpoint: string;
 
@@ -226,14 +224,6 @@ export class Store extends RapidElement {
       );
     }
 
-    if (this.usersEndpoint) {
-      fetches.push(
-        getAssets(this.usersEndpoint).then((users: any[]) => {
-          this.users = users;
-        })
-      );
-    }
-
     if (this.shortcutsEndpoint) {
       fetches.push(this.refreshShortcuts());
     }
@@ -249,12 +239,6 @@ export class Store extends RapidElement {
     return this.shortcuts || [];
   }
 
-  public getAssignableUsers() {
-    return this.users.filter((user: User) =>
-      ['administrator', 'editor', 'agent'].includes(user.role)
-    );
-  }
-
   public firstUpdated() {
     this.reset();
   }
@@ -397,7 +381,7 @@ export class Store extends RapidElement {
     // we treat missing groups as dynamic since the
     // api excludes initializing groups
     if (!group) {
-      console.warn('No group for ' + uuid);
+      // console.warn('No group for ' + uuid);
     }
 
     if (!group || group.query) {
@@ -510,6 +494,71 @@ export class Store extends RapidElement {
     this.cache.delete(url);
   }
 
+  public resolveUsers(items: any, keys: string[]): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const emails = new Set<string>();
+
+      // keys are dot notation paths to user fields
+      items.forEach((item) => {
+        keys.forEach((key) => {
+          const parts = key.split('.');
+          let value = item;
+          for (let i = 0; i < parts.length; i++) {
+            value = value[parts[i]];
+            if (!value) {
+              break;
+            }
+          }
+          if (value && value.email) {
+            emails.add(value.email);
+          }
+        });
+      });
+
+      const promises = [];
+      // 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=${email}`));
+      });
+
+      // wait for all of our user fetches to complete
+      Promise.all(promises).then((promises) => {
+        promises.forEach((response: WebResponse) => {
+          if (response && response.json) {
+            const results = response.json.results;
+            if (results && results.length === 1) {
+              const user = results[0];
+
+              items.forEach((item) => {
+                // replace each key with a matching user
+                keys.forEach((key) => {
+                  const parts = key.split('.');
+                  let value = item;
+                  let last = value;
+                  for (let i = 0; i < parts.length; i++) {
+                    last = value;
+                    value = value[parts[i]];
+                    if (!value) {
+                      break;
+                    }
+                  }
+                  if (value && value.email === user.email) {
+                    // only care about avatars for now
+                    const orginalUser = last[parts[parts.length - 1]];
+                    orginalUser.avatar = user.avatar;
+                    orginalUser.name = getFullName(user);
+                    last[parts[parts.length - 1]].avatar = user.avatar;
+                  }
+                });
+              });
+            }
+          }
+        });
+        resolve();
+      });
+    });
+  }
+
   public makeRequest(
     url: string,
     options?: { force?: boolean; prepareData?: (data: any) => any }
@@ -524,8 +573,9 @@ export class Store extends RapidElement {
       return;
     }
 
-    const cached = this.cache.get(url);
+    let cached = this.cache.get(url);
     if (cached && !options.force) {
+      cached = options.prepareData ? options.prepareData(cached) : cached;
       this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data: cached });
     } else {
       options = options || {};
@@ -535,10 +585,9 @@ export class Store extends RapidElement {
           delete this.fetching[url];
           return;
         }
-
-        data = options.prepareData ? options.prepareData(data) : data;
         this.cache.set(url, data);
         delete this.fetching[url];
+        data = options.prepareData ? options.prepareData(data) : data;
         this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
       });
     }

package/src/tabpane/TabPane.ts

@@ -15,12 +15,14 @@ export class TabPane extends RapidElement {
         flex-grow: 1;
       }
 
-      .tabs {
+      .options {
         display: flex;
         align-items: stretch;
+        padding: var(--temba-tabs-options-padding, 0);
+        border-bottom: none;
       }
 
-      .tab {
+      .option {
         user-select: none;
         padding: 0.5em 0.7em;
         margin: 0em 0em;
@@ -40,72 +42,72 @@ export class TabPane extends RapidElement {
         transition: all 100ms linear;
       }
 
-      .focusedname .tab .name {
+      .focusedname .option .name {
         transition: all 0s linear !important;
       }
 
-      .focusedname .tab.selected .name {
+      .focusedname .option.selected .name {
         transition: all 200ms linear !important;
       }
 
-      .tab.hidden {
+      .option.hidden {
         display: none;
       }
 
-      .tab temba-icon {
+      .option temba-icon {
       }
 
-      .tab .name {
+      .option .name {
         margin-left: 0.4em;
-        max-width: 80px;
+        max-width: 200px;
         overflow: hidden;
         transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
 
-      .tab .badge {
+      .option .badge {
         margin-left: 0.4em;
       }
 
       @media (max-width: 900px) {
-        .collapses .tab .name {
+        .collapses .option .name {
           max-width: 0px;
           margin: 0;
         }
       }
 
       @media (max-width: 600px) {
-        .collapses .tab .badge {
+        .collapses .option .badge {
           display: none;
         }
       }
 
-      .focusedname .tab.selected {
+      .focusedname .option.selected {
       }
 
-      .focusedname .tab .name {
+      .focusedname .option .name {
         max-width: 0px;
         margin: 0;
         transition: max-width 200ms linear, margin 200ms linear;
       }
 
-      .focusedname .tab.selected .name {
+      .focusedname .option.selected .name {
         margin-left: 0.4em;
         max-width: 200px;
       }
 
-      .tab {
+      .option {
         transform: scale(0.9) translateY(0em);
         --icon-color: rgba(0, 0, 0, 0.5);
         color: rgba(0, 0, 0, 0.5);
       }
 
-      .tab.selected {
+      .option.selected {
       }
 
-      .tab.selected,
-      .tab.selected:hover {
+      .option.selected,
+      .option.selected:hover {
         cursor: default;
         box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);
 
@@ -117,31 +119,25 @@ export class TabPane extends RapidElement {
         border-bottom: 0px;
       }
 
-      .embedded .tab.selected {
-      }
-
-      .tab.selected .dot {
+      .option.selected .dot {
         display: none;
       }
 
-      .bottom .tab.selected {
-      }
-
-      .unselect .tab.selected {
+      .unselect .option.selected {
         cursor: pointer;
       }
 
-      .unselect .tab.selected:hover {
+      .unselect .option.selected:hover {
         background: var(--unselect-tab-color, #eee);
       }
 
-      .tab:hover {
+      .option:hover {
         --icon-color: #666;
         color: #666;
         background: rgba(0, 0, 0, 0.02);
       }
 
-      .tab.dirty {
+      .option.dirty {
         font-weight: 500;
       }
 
@@ -167,9 +163,6 @@ export class TabPane extends RapidElement {
         overflow: hidden;
       }
 
-      .badge {
-      }
-
       .count {
         border-radius: 99px;
         background: rgba(0, 0, 0, 0.1);
@@ -198,22 +191,6 @@ export class TabPane extends RapidElement {
         --icon-color: var(--color-alert);
       }
 
-      .bottom.tabs .tab {
-        border-radius: 0em;
-      }
-
-      .bottom.pane {
-        border-radius: 0em;
-      }
-
-      .bottom.pane.first {
-        border-bottom-left-radius: 0px;
-      }
-
-      .bottom .tab.first {
-        border-bottom-left-radius: var(--curvature);
-      }
-
       .embedded.pane {
         box-shadow: none;
         margin: 0;
@@ -222,30 +199,22 @@ export class TabPane extends RapidElement {
         border-bottom: none !important;
       }
 
-      .embedded.tabs {
-        padding-top: 0em;
-      }
-
-      .embedded .tab {
+      .embedded .option {
         border-bottom: none !important;
         border-radius: 0em;
         border-top: none !important;
       }
 
-      .embedded .tab.first {
+      .embedded .option.first {
         margin-left: 0em;
         border-top: none !important;
         border-left: none;
       }
 
-      .embedded.tabs .tab.selected {
+      .embedded.options .option.selected {
         box-shadow: none !important;
       }
 
-      .embedded.pane {
-        // padding: 0.3em;
-      }
-
       .check {
         margin-left: 0.4em;
       }
@@ -262,10 +231,6 @@ export class TabPane extends RapidElement {
   @property({ type: Boolean })
   collapses = false;
 
-  // are the tabs on the bottom of the pane?
-  @property({ type: Boolean })
-  bottom = false;
-
   // do we allow unselecting the current tab
   @property({ type: Boolean })
   unselect = false;
@@ -281,7 +246,7 @@ export class TabPane extends RapidElement {
   refresh = '';
 
   @property({ type: Array, attribute: false })
-  tabs: Tab[] = [];
+  options: Tab[] = [];
 
   private handleTabClick(event: MouseEvent): void {
     const newIndex = parseInt(
@@ -307,7 +272,8 @@ export class TabPane extends RapidElement {
         tabs.push(tab);
       }
     }
-    this.tabs = tabs;
+    this.options = tabs;
+    this.index = 0;
   }
 
   public firstUpdated(
@@ -322,19 +288,30 @@ export class TabPane extends RapidElement {
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    if (changedProperties.has('index') || changedProperties.has('tabs')) {
-      this.tabs.forEach((tab, index) => {
+
+    if (changedProperties.has('options')) {
+      this.options.forEach((tab, index) => {
         tab.selected = index == this.index;
       });
-      this.fireEvent(CustomEventType.ContextChanged);
+    }
+
+    if (changedProperties.has('index')) {
+      if (this.options.length >= 0) {
+        if (this.index !== changedProperties.get('index')) {
+          this.options.forEach((tab, index) => {
+            tab.selected = index == this.index;
+          });
+          this.fireEvent(CustomEventType.ContextChanged);
+        }
+      }
     }
 
     // if our current tab is hidden, select the first visible one
-    if (this.index > this.tabs.length) {
-      const tab = this.tabs[this.index];
+    if (this.index > this.options.length) {
+      const tab = this.options[this.index];
       if (tab && tab.hidden) {
-        for (let i = 0; i < this.tabs.length; i++) {
-          const other = this.tabs[i];
+        for (let i = 0; i < this.options.length; i++) {
+          const other = this.options[i];
           if (other && !other.hidden) {
             this.index = i;
             return;
@@ -345,7 +322,7 @@ export class TabPane extends RapidElement {
   }
 
   public focusTab(name: string): Tab {
-    const index = this.tabs.findIndex((tab) => tab.name === name);
+    const index = this.options.findIndex((tab) => tab.name === name);
     if (index >= 0) {
       this.index = index;
       return this.getTab(index);
@@ -356,8 +333,8 @@ export class TabPane extends RapidElement {
     index: number,
     details: { count: number; hidden: boolean }
   ) {
-    if (index < this.tabs.length) {
-      const tab = this.tabs[index];
+    if (index < this.options.length) {
+      const tab = this.options[index];
       tab.count = details.count;
       tab.hidden = details.hidden;
       this.requestUpdate();
@@ -370,11 +347,11 @@ export class TabPane extends RapidElement {
   }
 
   public getCurrentTab(): Tab {
-    return this.tabs[this.index];
+    return this.options[this.index];
   }
 
   public getTab(index: number): Tab {
-    return this.tabs[index];
+    return this.options[index];
   }
 
   public handleTabContentChanged() {
@@ -386,37 +363,24 @@ export class TabPane extends RapidElement {
   }
 
   public render(): TemplateResult {
-    const activeTab = this.tabs[this.index];
+    const activeTab = this.options[this.index];
     return html`
-      ${this.bottom
-        ? html`<div
-            class="pane ${getClasses({
-              first: this.index == 0,
-              embedded: this.embedded,
-              bottom: this.bottom
-            })}"
-          >
-            <slot></slot>
-          </div>`
-        : null}
-
       <div
-        class="tabs ${getClasses({
-          tabs: true,
-          bottom: this.bottom,
+        class="${getClasses({
+          options: true,
           collapses: this.collapses,
           embedded: this.embedded,
           focusedname: this.focusedName,
           unselect: this.unselect
         })}"
       >
-        ${this.tabs.map(
+        ${this.options.map(
           (tab, index) => html`
             <div
               @click=${this.handleTabClick}
               data-index=${index}
               class="${getClasses({
-                tab: true,
+                option: true,
                 first: index == 0,
                 selected: index == this.index,
                 hidden: tab.hidden,
@@ -461,24 +425,38 @@ export class TabPane extends RapidElement {
           <slot name="tab-right"></slot>
         </div>
       </div>
-      ${!this.bottom
-        ? html`<div
-            @temba-details-changed=${this.handleTabDetailsChanged}
-            style="${activeTab?.borderColor
-              ? `border: 1px solid ${activeTab?.borderColor};`
-              : ''} ${activeTab?.selectionBackground
-              ? `background:${activeTab?.selectionBackground};`
-              : ``}"
-            class="pane ${getClasses({
-              first: this.index == 0,
-              embedded: this.embedded,
-              bottom: this.bottom
-            })}"
-          >
-            <slot></slot>
-            <slot name="pane-bottom"></slot>
-          </div>`
-        : null}
+      <div
+        @temba-details-changed=${this.handleTabDetailsChanged}
+        style="${activeTab?.borderColor
+          ? `
+            border-top: var(--temba-tabs-border-top, 1px solid ${
+              activeTab?.borderColor || 'var(--color-widget-border)'
+            });
+
+            border-left: var(--temba-tabs-border-left, 1px solid ${
+              activeTab?.borderColor || 'var(--color-widget-border)'
+            });
+
+            border-bottom: var(--temba-tabs-border-bottom, 1px solid ${
+              activeTab?.borderColor || 'var(--color-widget-border)'
+            });
+
+            border-right: var(--temba-tabs-border-right, 1px solid ${
+              activeTab?.borderColor || 'var(--color-widget-border)'
+            });
+
+            `
+          : ''} ${activeTab?.selectionBackground
+          ? `background:${activeTab?.selectionBackground};`
+          : ``}"
+        class="pane ${getClasses({
+          first: this.index == 0,
+          embedded: this.embedded
+        })}"
+      >
+        <slot></slot>
+        <slot name="pane-bottom"></slot>
+      </div>
     `;
   }
 }

package/src/textinput/TextInput.ts

@@ -371,6 +371,7 @@ export class TextInput extends FormElement {
 
     let input = html`
       <input
+        autofocus
         class="textinput"
         autocomplete="off"
         name=${this.name}

package/src/user/TembaUser.ts

@@ -1,14 +1,25 @@
 import { PropertyValueMap, TemplateResult, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { User } from '../interfaces';
+
 import { colorHash, extractInitials } from '../utils';
-import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
+
 import { DEFAULT_AVATAR } from '../webchat/assets';
+import { RapidElement } from '../RapidElement';
 
-export class TembaUser extends EndpointMonitorElement {
+export const getFullName = (user: {
+  name?: string;
+  first_name?: string;
+  last_name?: string;
+}) => {
+  return user.name || [user.first_name, user.last_name].join(' ');
+};
+
+export class TembaUser extends RapidElement {
   public static styles = css`
     :host {
       display: flex;
+      transform: scale(var(--temba-scale, 1));
+      box-sizing: border-box;
     }
 
     .wrapper {
@@ -27,14 +38,11 @@ export class TembaUser extends EndpointMonitorElement {
     }
   `;
 
-  @property({ type: String })
-  email: string;
-
   @property({ type: Number })
   scale: number;
 
   @property({ type: Boolean })
-  name: boolean;
+  showName: boolean;
 
   @property({ type: Boolean })
   system: boolean;
@@ -46,49 +54,30 @@ export class TembaUser extends EndpointMonitorElement {
   initials: string = '';
 
   @property({ type: String })
-  fullname: string;
-
-  @property({ type: Object, attribute: false })
-  data: User;
+  name: string;
 
-  prepareData(data: any) {
-    if (data.length > 0) {
-      return data[0];
-    }
+  @property({ type: String })
+  email: string;
 
-    this.fullname = this.email;
-    return null;
-  }
+  @property({ type: String })
+  avatar: string;
 
   public updated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changed);
 
-    if (changed.has('email') && this.email) {
-      this.url = `/api/v2/users.json?email=${this.email}`;
-    }
-
     if (changed.has('system') && this.system) {
       this.background = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
     }
 
-    if (changed.has('data') && this.data) {
-      if (this.data.first_name && this.data.last_name) {
-        this.fullname = [this.data.first_name, this.data.last_name].join(' ');
-        this.background = colorHash.hex(this.fullname);
-        this.initials = extractInitials(this.fullname);
-      }
-
-      if (this.data.avatar) {
-        this.background = `url('${this.data.avatar}') center / contain no-repeat`;
-        this.initials = '';
-      }
+    if (changed.has('name') && this.name) {
+      this.background = colorHash.hex(this.name);
+      this.initials = extractInitials(this.name);
     }
 
-    if (changed.has('fullname') && this.fullname && !this.data) {
-      this.background = colorHash.hex(this.fullname);
-      this.initials = extractInitials(this.fullname);
+    if (changed.has('avatar') && this.avatar) {
+      this.background = `url('${this.avatar}') center / contain no-repeat`;
     }
   }
 
@@ -99,8 +88,8 @@ export class TembaUser extends EndpointMonitorElement {
         style="
               transform:scale(${this.scale || 1});
               display: flex;
-              height: 30px;
-              width: 30px;
+              min-height: 26px;
+              min-width: 26px;
               flex-direction: row;
               align-items: center;
               color: #fff;
@@ -111,7 +100,7 @@ export class TembaUser extends EndpointMonitorElement {
               box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
               background:${this.background}"
       >
-        ${this.initials
+        ${this.initials && !this.avatar
           ? html` <div
               style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
             >
@@ -119,13 +108,13 @@ export class TembaUser extends EndpointMonitorElement {
             </div>`
           : null}
       </div>
-      ${this.name
+      ${this.showName
         ? html`<div
             class="name"
             style="margin: 0px ${this.scale - 0.5}em;font-size:${this.scale +
             0.2}em"
           >
-            ${this.fullname}
+            ${this.name}
           </div>`
         : null}
     </div>`;