@nyaruka/temba-components 0.111.7 → 0.112.0

package/src/select/Select.ts

@@ -81,8 +81,11 @@ export class Select extends FormElement {
       }
 
       .wrapper-bg {
-        background: #fff;
-        box-shadow: inset 0px 0px 4px rgb(0 0 0 / 10%);
+        background: var(--select-wrapper-bg, #fff);
+        box-shadow: var(
+          --select-wrapper-shadow,
+          inset 0px 0px 4px rgb(0 0 0 / 10%)
+        );
         border-radius: var(--curvature-widget);
       }
 
@@ -170,6 +173,10 @@ export class Select extends FormElement {
         margin: 2px 2px;
       }
 
+      .option-name > span {
+        text-align: left;
+      }
+
       .selected-item .option-name {
         padding: 0px;
         font-size: var(--temba-select-selected-font-size);
@@ -411,6 +418,9 @@ export class Select extends FormElement {
   @property({ type: Boolean })
   clearable: boolean;
 
+  @property({ type: Boolean })
+  sorted: boolean;
+
   @property({ type: String })
   flavor = 'default';
 
@@ -447,7 +457,7 @@ export class Select extends FormElement {
   shouldExclude: (option: any) => boolean;
 
   @property({ attribute: false })
-  sortFunction: (a: any, b: any) => number;
+  sortFunction: (a: any, b: any) => number = null;
 
   @property({ attribute: false })
   renderOption: (option: any, selected: boolean) => TemplateResult;
@@ -470,6 +480,9 @@ export class Select extends FormElement {
   @property({ attribute: false })
   getOptions: (response: WebResponse) => any[] = this.getOptionsDefault;
 
+  @property({ attribute: false })
+  prepareOptions: (options: any[]) => any[] = (options: any[]) => options;
+
   @property({ attribute: false })
   isComplete: (newestOptions: any[], response: WebResponse) => boolean =
     this.isCompleteDefault;
@@ -477,6 +490,14 @@ export class Select extends FormElement {
   @property({ type: Array, attribute: 'options' })
   private staticOptions: any[] = [];
 
+  private alphaSort = (a: any, b: any) => {
+    // by default, all endpoint values are sorted by name
+    if (this.endpoint) {
+      return this.getName(a).localeCompare(this.getName(b));
+    }
+    return 0;
+  };
+
   private lastQuery: number;
 
   // private cancelToken: CancelTokenSource;
@@ -572,6 +593,10 @@ export class Select extends FormElement {
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
+    if (changedProperties.has('sorted')) {
+      this.sortFunction = this.sorted ? this.alphaSort : null;
+    }
+
     if (changedProperties.has('values')) {
       this.updateInputs();
       if (
@@ -962,6 +987,8 @@ export class Select extends FormElement {
         // if we are searchable, but doing it locally, fetch all the options
         if (this.searchable && !this.queryParam) {
           fetchResults(url).then((results: any) => {
+            results = this.prepareOptions(results);
+
             if (this.cache && !this.tags) {
               this.lruCache.set(url, {
                 options: results,
@@ -978,11 +1005,10 @@ export class Select extends FormElement {
         } else {
           getUrl(url)
             .then((response: WebResponse) => {
-              const results = this.getOptions(response).filter(
-                (option: any) => {
-                  return this.isMatch(option, q);
-                }
-              );
+              let results = this.getOptions(response).filter((option: any) => {
+                return this.isMatch(option, q);
+              });
+              results = this.prepareOptions(results);
 
               this.next = null;
               const json = response.json;

package/src/store/EndpointMonitorElement.ts

@@ -18,6 +18,11 @@ export class EndpointMonitorElement extends StoreMonitorElement {
   @property({ type: Object, attribute: false })
   data: any;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.prepareData = this.prepareData.bind(this);
+  }
+
   prepareData(data: any): any {
     return data;
   }
@@ -52,9 +57,4 @@ export class EndpointMonitorElement extends StoreMonitorElement {
       }
     }
   }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.prepareData = this.prepareData.bind(this);
-  }
 }

package/src/store/Store.ts

@@ -104,7 +104,7 @@ export class Store extends RapidElement {
   private groups: { [uuid: string]: ContactGroup } = {};
   private shortcuts: Shortcut[] = [];
   private languages: any = {};
-  private users: User[];
+  private users: User[] = [];
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
 
@@ -255,10 +255,6 @@ export class Store extends RapidElement {
     );
   }
 
-  public getUser(email: string) {
-    return this.users.find((user: User) => user.email === email);
-  }
-
   public firstUpdated() {
     this.reset();
   }
@@ -521,16 +517,19 @@ export class Store extends RapidElement {
     const previousRequest = this.fetching[url];
     const now = new Date().getTime();
     // if the request was recently made, don't do anything
-    if (previousRequest && now - previousRequest < 500) {
+    if (previousRequest) {
+      setTimeout(() => {
+        this.makeRequest(url, options);
+      }, 500);
       return;
     }
 
-    this.fetching[url] = now;
-    options = options || {};
     const cached = this.cache.get(url);
     if (cached && !options.force) {
       this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data: cached });
     } else {
+      options = options || {};
+      this.fetching[url] = now;
       fetchResults(url).then((data) => {
         if (!data) {
           delete this.fetching[url];
@@ -539,8 +538,8 @@ export class Store extends RapidElement {
 
         data = options.prepareData ? options.prepareData(data) : data;
         this.cache.set(url, data);
-        this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
         delete this.fetching[url];
+        this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
       });
     }
   }

package/src/store/StoreMonitorElement.ts

@@ -1,4 +1,4 @@
-import { html, PropertyValueMap, TemplateResult } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -39,20 +39,12 @@ export class StoreMonitorElement extends RapidElement {
   }
 
   private handleStoreUpdated(event: CustomEvent) {
-    this.store.initialHttpComplete.then(() => {
-      this.storeUpdated(event);
-    });
+    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;

package/src/tabpane/TabPane.ts

@@ -223,17 +223,19 @@ export class TabPane extends RapidElement {
       }
 
       .embedded.tabs {
-        margin: 0;
+        padding-top: 0em;
       }
 
       .embedded .tab {
-        border-top: none !important;
         border-bottom: none !important;
-        border-radius: 0px;
+        border-radius: 0em;
+        border-top: none !important;
       }
 
       .embedded .tab.first {
-        border-left: none !important;
+        margin-left: 0em;
+        border-top: none !important;
+        border-left: none;
       }
 
       .embedded.tabs .tab.selected {

package/src/user/TembaUser.ts

@@ -1,10 +1,11 @@
 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';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
+import { DEFAULT_AVATAR } from '../webchat/assets';
 
-export class TembaUser extends StoreMonitorElement {
+export class TembaUser extends EndpointMonitorElement {
   public static styles = css`
     :host {
       display: flex;
@@ -33,45 +34,66 @@ export class TembaUser extends StoreMonitorElement {
   scale: number;
 
   @property({ type: Boolean })
-  name: string;
+  name: boolean;
 
-  @property({ type: Object, attribute: false })
-  user: User;
+  @property({ type: Boolean })
+  system: boolean;
 
   @property({ type: String, attribute: false })
-  background: string;
+  background: string = '#e6e6e6';
 
   @property({ type: String, attribute: false })
-  initials: string;
+  initials: string = '';
 
-  @property({ type: String, attribute: false })
-  fullName: string;
+  @property({ type: String })
+  fullname: string;
+
+  @property({ type: Object, attribute: false })
+  data: User;
+
+  prepareData(data: any) {
+    if (data.length > 0) {
+      return data[0];
+    }
+
+    this.fullname = this.email;
+    return null;
+  }
 
   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);
-        }
+
+    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 = '';
       }
     }
-  }
 
-  public render(): TemplateResult {
-    if (!this.user) {
-      return null;
+    if (changed.has('fullname') && this.fullname && !this.data) {
+      this.background = colorHash.hex(this.fullname);
+      this.initials = extractInitials(this.fullname);
     }
+  }
 
-    return html` <div class="wrapper">
+  public render(): TemplateResult {
+    return html`<div class="wrapper">
       <div
         class="avatar-circle"
         style="
@@ -103,7 +125,7 @@ export class TembaUser extends StoreMonitorElement {
             style="margin: 0px ${this.scale - 0.5}em;font-size:${this.scale +
             0.2}em"
           >
-            ${this.fullName}
+            ${this.fullname}
           </div>`
         : null}
     </div>`;

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

@@ -8,6 +8,7 @@ import {
   getClip,
   getComponent,
   loadStore,
+  mockAPI,
   mockGET,
   mockNow,
   mockPOST
@@ -58,6 +59,8 @@ describe('temba-contact-chat', () => {
       /\/contact\/history\/contact-.*/,
       '/test-assets/contacts/history.json'
     );
+
+    mockAPI();
     clock = useFakeTimers();
   });
 

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

@@ -5,7 +5,7 @@ import {
   getClip,
   getComponent,
   loadStore,
-  mockGET,
+  mockAPI,
   mockNow
 } from './utils.test';
 
@@ -25,10 +25,7 @@ const getContactTickets = async (attrs: any = {}) => {
 mockNow('2023-04-07T00:00:00.000-00:00');
 describe('temba-contact-tickets', () => {
   beforeEach(() => {
-    mockGET(
-      /\/api\/v2\/tickets.json\?contact=24d64810-3315-4ff5-be85-48e3fe055bf9/,
-      '/test-assets/contacts/contact-tickets.json'
-    );
+    mockAPI();
     loadStore();
   });
 

package/test/utils.test.ts

@@ -114,6 +114,33 @@ after(() => {
   (window.fetch as any).restore();
 });
 
+const mockMapping = {
+  '/test-assets/api/users/admin1.json': [
+    /\/api\/v2\/users.json\?email=admin1@nyaruka.com/
+  ],
+  '/test-assets/api/users/editor1.json': [
+    /\/api\/v2\/users.json\?email=editor1@nyaruka.com/
+  ],
+  '/test-assets/api/users/agent1.json': [
+    /\/api\/v2\/users.json\?email=agent1@nyaruka.com/
+  ],
+  '/test-assets/api/users/viewer1.json': [
+    /\/api\/v2\/users.json\?email=viewer1@nyaruka.com/
+  ],
+  '/test-assets/contacts/contact-tickets.json': [
+    /\/api\/v2\/tickets.json\?contact=24d64810-3315-4ff5-be85-48e3fe055bf9/
+  ]
+};
+
+export const mockAPI = () => {
+  for (const key in mockMapping) {
+    const urls = mockMapping[key];
+    for (const url of urls) {
+      mockGET(url, key);
+    }
+  }
+};
+
 export const mockGET = (
   endpoint: RegExp,
   body: any,

package/test-assets/api/users/admin1.json

@@ -0,0 +1,13 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "email": "admin1@nyaruka.com",
+      "first_name": "Adam",
+      "last_name": "McAdmin",
+      "role": "administrator",
+      "created_on": "2023-01-18T19:33:13.336367Z"
+    }
+  ]
+}

package/test-assets/api/users/agent1.json

@@ -0,0 +1,13 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "email": "agent1@nyaruka.com",
+      "first_name": "Agnes",
+      "last_name": "McAgent",
+      "role": "agent",
+      "created_on": "2023-01-18T19:33:13.637127Z"
+    }
+  ]
+}

package/test-assets/api/users/editor1.json

@@ -0,0 +1,13 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "email": "editor1@nyaruka.com",
+      "first_name": "Eddy",
+      "last_name": "McEditor",
+      "role": "editor",
+      "created_on": "2023-01-18T19:33:13.410675Z"
+    }
+  ]
+}

package/test-assets/api/users/viewer1.json

@@ -0,0 +1,13 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "email": "viewer1@nyaruka.com",
+      "first_name": "Veronica",
+      "last_name": "McViews",
+      "role": "agent",
+      "created_on": "2023-01-18T19:33:13.485734Z"
+    }
+  ]
+}