@nyaruka/temba-components 0.23.0 → 0.25.1

package/src/contactsearch/ContactSearch.ts

@@ -1,8 +1,8 @@
 import { TemplateResult, html, property, css } from 'lit-element';
-import { getUrl, fillTemplate, WebResponse } from '../utils';
+import { getUrl, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import '../alert/Alert';
-import { Contact } from '../interfaces';
+import { Contact, CustomEventType } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map';
 import { FormElement } from '../FormElement';
 
@@ -31,7 +31,7 @@ export class ContactSearch extends FormElement {
         width: 160px;
       }
 
-      .created-on {
+      .date {
         text-align: right;
       }
 
@@ -40,7 +40,7 @@ export class ContactSearch extends FormElement {
         color: var(--color-text-dark);
       }
 
-      .field-header.created-on {
+      .field-header.date {
         text-align: right;
       }
 
@@ -55,12 +55,6 @@ export class ContactSearch extends FormElement {
 
       table {
         width: 100%;
-        padding-top: 10px;
-      }
-
-      .header td {
-        border-bottom: 2px solid var(--color-borders);
-        padding: 5px 3px;
       }
 
       .contact td {
@@ -92,6 +86,46 @@ export class ContactSearch extends FormElement {
       .error {
         margin-top: 10px;
       }
+
+      .match-count {
+        padding: 4px;
+        margin-top: 6px;
+      }
+
+      .linked {
+        color: var(--color-link-primary);
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .header td {
+        border-bottom: 0px solid var(--color-borders);
+        padding: 5px 3px;
+      }
+
+      .expanded .header td {
+        border-bottom: 2px solid var(--color-borders);
+      }
+
+      td.field-header,
+      tr.table-footer,
+      tr.contact {
+        display: none;
+      }
+
+      .expanded td.field-header {
+        display: table-cell;
+      }
+
+      .expanded tr.contact,
+      .expanded tr.table-footer {
+        display: table-row;
+      }
+
+      .query {
+        display: var(--contact-search-query-display);
+        margin-bottom: 10px;
+      }
     `;
   }
 
@@ -100,6 +134,9 @@ export class ContactSearch extends FormElement {
   @property({ type: Boolean })
   fetching: boolean;
 
+  @property({ type: Boolean })
+  expanded: boolean;
+
   @property({ type: String })
   endpoint: string;
 
@@ -112,8 +149,11 @@ export class ContactSearch extends FormElement {
   @property({ type: String })
   query = '';
 
-  @property({ type: String, attribute: 'matches-text' })
-  matchesText = '';
+  @property({ type: Number })
+  inactiveThreshold = 1000;
+
+  @property({ type: Number })
+  inactiveDays = 90;
 
   @property({ attribute: false })
   summary: SummaryResponse;
@@ -140,16 +180,22 @@ export class ContactSearch extends FormElement {
     }
   }
 
-  public fetchSummary(query: string): any {
-    // const CancelToken = axios.CancelToken;
-    // this.cancelToken = CancelToken.source();
-
-    const url = this.endpoint + query;
+  public executeQuery(query: string): any {
+    const url = this.endpoint + query.replace('\n', ' ');
+    getUrl(url).then((response: WebResponse) => {
+      if (response.status === 200) {
+        const summary = response.json as SummaryResponse;
+        this.fireCustomEvent(CustomEventType.FetchComplete, summary);
+      }
+    });
+  }
 
+  public fetchSummary(query: string): any {
+    const url = this.endpoint + query.replace('\n', ' ');
     getUrl(url).then((response: WebResponse) => {
+      this.fetching = false;
       if (response.status === 200) {
         this.summary = response.json as SummaryResponse;
-        this.fetching = false;
 
         if (this.summary.error) {
           this.errors = [this.summary.error];
@@ -157,6 +203,7 @@ export class ContactSearch extends FormElement {
           this.errors = [];
         }
         this.requestUpdate('errors');
+        this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
       }
     });
   }
@@ -177,54 +224,76 @@ export class ContactSearch extends FormElement {
 
       if (!this.summary.error) {
         const count = this.summary.total;
-        const message = fillTemplate(this.matchesText, {
-          query: this.summary.query,
-          count,
-        });
+        const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;
 
         summary = html`
-          <table cellspacing="0" cellpadding="0">
-            <tr class="header">
-              <td colspan="2"></td>
-              ${fields.map(
-                field => html` <td class="field-header">${field.label}</td> `
+          <div class="summary ${this.expanded ? 'expanded' : ''}">
+            <table cellspacing="0" cellpadding="0">
+              <tr class="header">
+                <td colspan="2">
+                  Found
+                  <a
+                    class="linked"
+                    target="_"
+                    href="/contact/?search=${encodeURIComponent(
+                      this.summary.query
+                    )}"
+                  >
+                    ${count.toLocaleString()}
+                  </a>
+                  contact${count !== 1 ? 's' : ''}
+                </td>
+                ${fields.map(
+                  field => html` <td class="field-header">${field.label}</td> `
+                )}
+                <td></td>
+                <td class="field-header date">
+                  ${lastSeenOn ? 'Last Seen' : 'Created'}
+                </td>
+              </tr>
+
+              ${this.summary.sample.map(
+                (contact: Contact) => html`
+                  <tr class="contact">
+                    <td class="urn">
+                      ${(contact as any).primary_urn_formatted}
+                    </td>
+                    <td class="name">${contact.name}</td>
+                    ${fields.map(
+                      field => html`
+                        <td class="field">
+                          ${(
+                            (contact as any).fields[field.uuid] || { text: '' }
+                          ).text}
+                        </td>
+                      `
+                    )}
+                    <td></td>
+                    <td class="date">
+                      ${lastSeenOn
+                        ? contact.last_seen_on || '--'
+                        : contact.created_on}
+                    </td>
+                  </tr>
+                `
               )}
-              <td></td>
-              <td class="field-header created-on">Created On</td>
-            </tr>
-
-            ${this.summary.sample.map(
-              (contact: Contact) => html`
-                <tr class="contact">
-                  <td class="urn">${(contact as any).primary_urn_formatted}</td>
-                  <td class="name">${contact.name}</td>
-                  ${fields.map(
-                    field => html`
-                      <td class="field">
-                        ${((contact as any).fields[field.uuid] || { text: '' })
-                          .text}
-                      </td>
-                    `
-                  )}
-                  <td></td>
-                  <td class="created-on">${contact.created_on}</td>
-                </tr>
-              `
-            )}
-
-            <tr class="table-footer">
-              <td class="query-details" colspan=${fields.length + 3}>
-                ${message}
-              </td>
-              <td class="more">
-                ${this.summary.total > this.summary.sample.length
-                  ? html`
-                      ${this.summary.total - this.summary.sample.length} more
-                    `
-                  : null}
-              </td>
-            </tr>
-          </table>
+              ${this.summary.total > this.summary.sample.length
+                ? html`<tr class="table-footer">
+                    <td class="query-details" colspan=${fields.length + 3}></td>
+                    <td class="more">
+                      <a
+                        class="linked"
+                        target="_"
+                        href="/contact/?search=${encodeURIComponent(
+                          this.summary.query
+                        )}"
+                        >more</a
+                      >
+                    </td>
+                  </tr>`
+                : null}
+            </table>
+          </div>
         `;
       }
     }
@@ -232,23 +301,31 @@ export class ContactSearch extends FormElement {
     const loadingStyle = this.fetching ? { opacity: '1' } : {};
 
     return html`
-      <temba-textinput
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .widgetOnly=${this.widgetOnly}
-        .errors=${this.errors}
-        name=${this.name}
-        .inputRoot=${this}
-        @input=${this.handleQueryChange}
-        placeholder=${this.placeholder}
-        value=${this.query}
-      >
-        <temba-loading
-          units="4"
-          style=${styleMap(loadingStyle)}
-        ></temba-loading>
-      </temba-textinput>
-      ${this.summary ? html` <div class="summary">${summary}</div> ` : null}
+      <div class="query">
+        <temba-textinput
+          .label=${this.label}
+          .helpText=${this.helpText}
+          .widgetOnly=${this.widgetOnly}
+          .errors=${this.errors}
+          name=${this.name}
+          .inputRoot=${this}
+          @input=${this.handleQueryChange}
+          placeholder=${this.placeholder}
+          .value=${this.query}
+          textarea
+          autogrow
+        >
+        </temba-textinput>
+      </div>
+
+      ${this.fetching
+        ? html`<temba-loading
+            units="4"
+            style=${styleMap(loadingStyle)}
+          ></temba-loading>`
+        : this.summary
+        ? html` <div class="summary">${summary}</div> `
+        : null}
     `;
   }
 }

package/src/dialog/Dialog.ts

@@ -49,7 +49,7 @@ export class Dialog extends RapidElement {
         position: fixed;
         top: 0px;
         left: 0px;
-        transition: opacity linear calc(var(--transitions-speed) / 2ms);
+        transition: opacity linear calc(var(--transition-speed) / 2ms);
         pointer-events: none;
       }
 
@@ -68,7 +68,7 @@ export class Dialog extends RapidElement {
 
       .dialog-body {
         background: #fff;
-        max-height: 55vh;
+        max-height: 75vh;
         overflow-y: auto;
       }
 
@@ -162,6 +162,9 @@ export class Dialog extends RapidElement {
   @property({ type: Boolean })
   destructive: boolean;
 
+  @property({ type: Boolean })
+  disabled: boolean;
+
   @property({ type: Boolean })
   loading: boolean;
 
@@ -293,6 +296,10 @@ export class Dialog extends RapidElement {
     );
   }
 
+  public getPrimaryButton(): Button {
+    return this.shadowRoot.querySelector(`temba-button[primary]`);
+  }
+
   private handleKeyUp(event: KeyboardEvent) {
     if (event.key === 'Escape') {
       this.clickCancel();
@@ -320,7 +327,9 @@ export class Dialog extends RapidElement {
   public render(): TemplateResult {
     const height = this.getDocumentHeight();
 
-    const maskStyle = { height: `${height + 100}px` };
+    const maskStyle = {
+      height: `${height + 100}px`,
+    };
     const dialogStyle = { width: Dialog.widths[this.size] };
 
     const header = this.header
@@ -375,6 +384,7 @@ export class Dialog extends RapidElement {
                           ?destructive=${this.destructive}
                           ?primary=${!this.destructive}
                           ?submitting=${this.submitting}
+                          ?disabled=${this.disabled}
                           >}</temba-button
                         >
                       `

package/src/dialog/Modax.ts

@@ -112,6 +112,11 @@ export class Modax extends RapidElement {
   @property({ type: String })
   body: any = this.getLoading();
 
+  @property({ type: Boolean })
+  disabled = false;
+
+  @property({ type: Boolean })
+  suspendSubmit = false;
   // private cancelToken: CancelTokenSource;
 
   // http promise to monitor for completeness
@@ -301,7 +306,9 @@ export class Modax extends RapidElement {
     const button = evt.detail.button;
     if (!button.disabled && !button.submitting) {
       if (button.name === this.primaryName) {
-        this.submit();
+        if (!this.suspendSubmit) {
+          this.submit();
+        }
       }
     }
 
@@ -309,7 +316,6 @@ export class Modax extends RapidElement {
       this.open = false;
       this.fetching = false;
       this.cancelName = undefined;
-      // this.cancelToken.cancel();
     }
   }
 
@@ -338,6 +344,7 @@ export class Modax extends RapidElement {
         ?submitting=${this.submitting}
         ?destructive=${this.isDestructive()}
         ?noFocus=${true}
+        ?disabled=${this.disabled}
         @temba-button-clicked=${this.handleDialogClick.bind(this)}
         @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}
       >

package/src/interfaces.ts

@@ -174,6 +174,7 @@ export enum CustomEventType {
   ScrollThreshold = 'temba-scroll-threshold',
   ContentChanged = 'temba-content-changed',
   ContextChanged = 'temba-context-changed',
+  FetchComplete = 'temba-fetch-complete',
   Submitted = 'temba-submitted',
   Redirected = 'temba-redirected',
   NoPath = 'temba-no-path',

package/src/omnibox/Omnibox.ts

@@ -1,6 +1,7 @@
 import { TemplateResult, html, css, property } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
 import { RapidElement } from '../RapidElement';
+import { Select } from '../select/Select';
 
 enum OmniType {
   Group = 'group',
@@ -104,7 +105,9 @@ export class Omnibox extends RapidElement {
     }
 
     if (option.type === OmniType.Group) {
-      return html` <div style=${styleMap(style)}>${option.count}</div> `;
+      return html`
+        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>
+      `;
     }
 
     return null;
@@ -172,6 +175,11 @@ export class Omnibox extends RapidElement {
     }
   }
 
+  public getValues(): any[] {
+    const select = this.shadowRoot.querySelector('temba-select') as Select;
+    return select.values;
+  }
+
   public render(): TemplateResult {
     return html`
       <temba-select

package/src/options/Options.ts

@@ -9,25 +9,26 @@ import {
   throttle,
 } from '../utils';
 
-interface NameFunction {
-  (option: any): string;
-}
-
 export class Options extends RapidElement {
   static get styles() {
     return css`
       .options-container {
-        visibility: hidden;
-        border-radius: var(--curvature-widget);
         background: var(--color-widget-bg-focused);
         user-select: none;
         box-shadow: var(--options-shadow);
-        border: 1px solid var(--color-widget-border);
         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);
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
+        border: 1px transparent;
       }
 
       .anchored {
@@ -88,12 +89,15 @@ export class Options extends RapidElement {
       }
 
       .show {
-        visibility: visible;
         z-index: 10000;
+        transform: scaleY(1) translateY(0);
+        border: 1px solid var(--color-widget-border);
+        pointer-events: auto;
+        opacity: 1;
       }
 
       .option {
-        font-size: 14px;
+        font-size: var(--temba-options-font-size);
         padding: 5px 10px;
         border-radius: 4px;
         margin: 0.3em;
@@ -195,6 +199,9 @@ export class Options extends RapidElement {
   @property({ type: Array })
   options: any[];
 
+  @property({ type: Array })
+  tempOptions: any[];
+
   @property({ type: Boolean })
   poppedTop: boolean;
 
@@ -303,6 +310,15 @@ export class Options extends RapidElement {
       });
     }
 
+    if (changedProperties.has('visible') && changedProperties.has('options')) {
+      if (!this.visible && this.options.length == 0) {
+        this.tempOptions = changedProperties.get('options');
+        window.setTimeout(() => {
+          this.tempOptions = [];
+        }, 300);
+      }
+    }
+
     if (changedProperties.has('options')) {
       this.calculatePosition();
 
@@ -527,6 +543,12 @@ export class Options extends RapidElement {
     }
   }
 
+  // we need to swallow mouse down so we don't grab focus
+  private handleMouseDown(evt: MouseEvent) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
   private handleOptionClick(evt: MouseEvent) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -572,7 +594,15 @@ export class Options extends RapidElement {
       options: true,
     });
 
-    const options = this.options || [];
+    let options = this.options || [];
+    if (
+      options.length == 0 &&
+      this.tempOptions &&
+      this.tempOptions.length > 0
+    ) {
+      options = this.tempOptions;
+    }
+
     return html`
       <div class=${classes} style=${styleMap(containerStyle)}>
         <div class="options-scroll" @scroll=${this.handleInnerScroll}>
@@ -582,6 +612,7 @@ export class Options extends RapidElement {
                 data-option-index="${index}"
                 @mousemove=${this.handleMouseMove}
                 @click=${this.handleOptionClick}
+                @mousedown=${this.handleMouseDown}
                 class="option ${index === this.cursorIndex ? 'focused' : ''}"
               >
                 ${this.resolvedRenderOption(option, index === this.cursorIndex)}