@nyaruka/temba-components 0.114.1 → 0.117.0

package/src/list/TembaMenu.ts

@@ -8,6 +8,7 @@ import { Dropdown } from '../dropdown/Dropdown';
 import { NotificationList } from './NotificationList';
 import { ResizeElement } from '../ResizeElement';
 import { Store } from '../store/Store';
+
 export interface MenuItem {
   id?: string;
   vanity_id?: string;
@@ -32,6 +33,7 @@ export interface MenuItem {
   trigger?: boolean;
   event?: string;
   mobile?: boolean;
+  initial?: string;
 }
 
 interface MenuItemState {
@@ -587,11 +589,6 @@ export class TembaMenu extends ResizeElement {
         margin-right: 0.75em;
       }
 
-      temba-button[lined] {
-        margin: 0.2em 0;
-        display: block;
-      }
-
       .expand-icon {
         transform: rotate(180deg);
         --icon-color: rgba(255, 255, 255, 0.5);
@@ -653,6 +650,14 @@ export class TembaMenu extends ResizeElement {
       .level-0 .icon-wrapper {
         padding: 0.4em 0.9em;
       }
+
+      temba-workspace-select {
+        margin: 0.2em;
+        display: block;
+        --options-shadow: none;
+        --color-widget-border: transparent;
+        --widget-box-shadow: none;
+      }
     `;
   }
 
@@ -1062,6 +1067,16 @@ export class TembaMenu extends ResizeElement {
       return html`<div class="divider"></div>`;
     }
 
+    if (menuItem.type === 'temba-workspace-select') {
+      return html`<temba-workspace-select
+        @change=${(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+        .values=${[JSON.parse(menuItem.initial)]}
+      ></temba-workspace-select>`;
+    }
+
     if (menuItem.type === 'temba-notification-list') {
       return html`<temba-notification-list
         endpoint=${menuItem.href}

package/src/options/Options.ts

@@ -17,16 +17,14 @@ export class Options extends RapidElement {
         user-select: none;
         border-radius: var(--curvature-widget);
         overflow: hidden;
-        margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
-        // transform: scaleY(0.5) translateY(-5em);
         transition: transform var(--transition-speed)
             cubic-bezier(0.71, 0.18, 0.61, 1.33),
           opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
         opacity: 0;
-        border: 1px transparent;
         z-index: 1000;
+        pointer-events: none;
       }
 
       .shadow {
@@ -97,10 +95,11 @@ export class Options extends RapidElement {
       }
 
       .show {
-        // transform: scaleY(1) translateY(0);
         border: 1px solid var(--color-widget-border);
         opacity: 1;
         z-index: 1;
+        pointer-events: auto;
+        margin-top: var(--options-margin-top);
       }
 
       .option {
@@ -351,7 +350,7 @@ export class Options extends RapidElement {
         this.tempOptions = changed.get('options');
         window.setTimeout(() => {
           this.tempOptions = [];
-        }, 0);
+        }, 200);
       }
     }
 
@@ -372,7 +371,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 +443,10 @@ export class Options extends RapidElement {
       }
     }
 
+    if (index === -1) {
+      return;
+    }
+
     const selected = this.options[index];
     this.fireCustomEvent(CustomEventType.Selection, {
       selected,
@@ -564,17 +567,12 @@ export class Options extends RapidElement {
         .getBoundingClientRect();
 
       if (this.anchorTo) {
-        this.top = 0;
         const anchorBounds = this.anchorTo.getBoundingClientRect();
+        this.top = anchorBounds.bottom;
         if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
           this.top = -(optionsBounds.height + anchorBounds.height + 20);
         }
         this.left = anchorBounds.left;
-
-        // adjust for parent scrolling
-        if (this.scrollParent) {
-          this.top += -this.scrollParent.scrollTop;
-        }
       }
     }
   }
@@ -627,13 +625,15 @@ export class Options extends RapidElement {
       vertical *= -1;
     }
 
-    const containerStyle = {
-      'margin-left': `${this.marginHorizontal}px`,
-      'margin-top': `${vertical}px`
-    };
+    const containerStyle = this.visible
+      ? {
+          'margin-left': `${this.marginHorizontal}px`,
+          'margin-top': `${vertical}px`
+        }
+      : {};
 
     if (this.top) {
-      containerStyle[`transform`] = `translateY(${this.top}px)`;
+      containerStyle['top'] = `${this.top}px`;
     }
 
     if (this.left) {
@@ -649,7 +649,7 @@ export class Options extends RapidElement {
       'options-container': true,
       show: this.visible,
       top: this.poppedTop,
-      anchored: !this.block,
+      anchored: !this.block && !!this.anchorTo,
       loading: this.loading,
       shadow: !this.hideShadow,
       bordered: this.hideShadow

package/src/select/Select.ts

@@ -499,6 +499,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Array, attribute: 'options' })
   private staticOptions: any[] = [];
 
+  @property({ type: Boolean })
+  allowAnchor: boolean = true;
+
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
@@ -1510,7 +1513,7 @@ export class Select<T extends SelectOption> extends FormElement {
     .renderOptionDetail=${this.renderOptionDetail}
     .renderOptionName=${this.renderOptionName}
     .renderOption=${this.renderOption || this.renderOptionDefault}
-    .anchorTo=${this.anchorElement}
+    .anchorTo=${this.allowAnchor ? this.anchorElement : null}
     .options=${this.visibleOptions}
     .spaceSelect=${this.spaceSelect}
     .nameKey=${this.nameKey}
@@ -1523,7 +1526,7 @@ export class Select<T extends SelectOption> extends FormElement {
     <temba-options
     @temba-selection=${this.handleExpressionSelection}
     @temba-canceled=${() => {}}
-    .anchorTo=${this.anchorExpressions}
+    .anchorTo=${this.allowAnchor ? this.anchorExpressions : null}
     .options=${this.completionOptions}
     .renderOption=${renderCompletionOption}
     ?visible=${this.completionOptions.length > 0}

package/src/select/UserSelect.ts

@@ -64,7 +64,6 @@ export class UserSelect extends Select<UserOption> {
       email=${option.email}
       name=${option.name}
       avatar=${option.avatar}
-      scale="0.8"
       showname
     ></temba-user>`;
   }

package/src/select/WorkspaceSelect.ts

@@ -0,0 +1,71 @@
+import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { Select, SelectOption } from './Select';
+import { property } from 'lit/decorators.js';
+import { getScrollParent } from '../utils';
+
+export interface WorkspaceOption extends SelectOption {
+  name: string;
+  id: string;
+  type: string;
+}
+
+export class WorkspaceSelect extends Select<WorkspaceOption> {
+  static get styles(): CSSResultArray {
+    return [
+      super.styles,
+      css`
+        :host {
+          border: 0px solid blue;
+        }
+      `
+    ];
+  }
+
+  @property({ type: String })
+  endpoint = '/api/internal/orgs.json';
+
+  @property({ type: String })
+  nameKey = 'name';
+
+  @property({ type: String })
+  valueKey = 'id';
+
+  @property({ type: String })
+  placeholder: string = 'Choose Workspace';
+
+  @property({ type: Boolean })
+  sorted: boolean = true;
+
+  @property({ type: Object })
+  workspace: WorkspaceOption;
+
+  constructor() {
+    super();
+    this.shouldExclude = (option: WorkspaceOption) => {
+      const selected = this.values[0];
+      return option.id === selected?.id;
+    };
+
+    this.searchable = true;
+  }
+
+  public firstUpdated(changed: Map<string, any>) {
+    super.firstUpdated(changed);
+    this.allowAnchor = !!getScrollParent(this);
+  }
+
+  public prepareOptionsDefault(options: WorkspaceOption[]): WorkspaceOption[] {
+    options.forEach((option) => {
+      option.type = 'workspace';
+    });
+    return options;
+  }
+
+  public renderOptionDefault(option: WorkspaceOption): TemplateResult {
+    if (!option) {
+      return html``;
+    }
+
+    return html`<temba-user name=${option.name} showname></temba-user>`;
+  }
+}

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;
+      }
     }
   }
 
@@ -96,11 +108,12 @@ export class TembaUser extends RapidElement {
               border-radius: 100%;
               font-weight: 400;
               overflow: hidden;
-              font-size: 12px;
+              font-size: 0.8em;
+              margin-right: 0.75em;
               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/temba-modules.ts

@@ -63,6 +63,7 @@ import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
 import { PopupSelect } from './src/select/PopupSelect';
 import { UserSelect } from './src/select/UserSelect';
+import { WorkspaceSelect } from './src/select/WorkspaceSelect';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -136,3 +137,4 @@ addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);
 addCustomElement('temba-popup-select', PopupSelect);
 addCustomElement('temba-user-select', UserSelect);
+addCustomElement('temba-workspace-select', WorkspaceSelect);

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();
   });