@nyaruka/temba-components 0.27.1 → 0.27.2

package/src/contactsearch/ContactSearch.ts

@@ -1,11 +1,11 @@
 import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators';
-import { getUrl, WebResponse } from '../utils';
+import { getClasses, postJSON, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import '../alert/Alert';
 import { Contact, CustomEventType } from '../interfaces';
-import { styleMap } from 'lit-html/directives/style-map';
 import { FormElement } from '../FormElement';
+import { Checkbox } from '../checkbox/Checkbox';
 
 const QUEIT_MILLIS = 1000;
 
@@ -79,9 +79,17 @@ export class ContactSearch extends FormElement {
       }
 
       temba-loading {
-        margin-top: 10px;
-        margin-right: 10px;
+        transform: scale(0);
+        max-width: 0;
         opacity: 0;
+        transition: transform 200ms ease-in-out;
+      }
+
+      .fetching temba-loading {
+        transform: scale(1);
+        max-width: 500px;
+        opacity: 1;
+        display: block;
       }
 
       .error {
@@ -127,6 +135,21 @@ export class ContactSearch extends FormElement {
         display: var(--contact-search-query-display);
         margin-bottom: 10px;
       }
+
+      .results {
+        display: none;
+      }
+
+      .summary {
+        min-height: 2.2em;
+      }
+
+      .results.initialized {
+        display: flex;
+        align-items: center;
+        margin-top: 0.5em;
+        margin-left: 0.6em;
+      }
     `;
   }
 
@@ -156,57 +179,67 @@ export class ContactSearch extends FormElement {
   @property({ type: Number })
   inactiveDays = 90;
 
-  @property({ attribute: false })
+  @property({ type: Object, attribute: false })
   summary: SummaryResponse;
 
+  @property({ type: Object, attribute: false })
+  flow: any;
+
   private lastQuery: number;
+  private initialized = false;
+
+  private exclusions = {};
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('query')) {
-      this.fetching = !!this.query;
+    if (changedProperties.has('query') || changedProperties.has('endpoint')) {
+      this.fetching = !!this.query && !!this.endpoint;
 
-      // clear our summary on any change
-      this.summary = null;
-      if (this.lastQuery) {
-        window.clearTimeout(this.lastQuery);
-      }
+      if (this.fetching) {
+        this.initialized = true;
+        // clear our summary on any change
+        this.summary = null;
+        if (this.lastQuery) {
+          window.clearTimeout(this.lastQuery);
+        }
 
-      if (this.query.trim().length > 0) {
-        this.lastQuery = window.setTimeout(() => {
-          this.fetchSummary(this.query);
-        }, QUEIT_MILLIS);
+        if (this.query.trim().length > 0) {
+          this.lastQuery = window.setTimeout(() => {
+            this.fetchSummary(this.query);
+          }, QUEIT_MILLIS);
+        }
       }
     }
   }
 
-  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 + encodeURIComponent(query.replace('\n', ' '));
-    getUrl(url).then((response: WebResponse) => {
-      this.fetching = false;
-      if (response.status === 200) {
-        this.summary = response.json as SummaryResponse;
-
-        if (this.summary.error) {
-          this.errors = [this.summary.error];
+    if (this.endpoint) {
+      postJSON(this.endpoint, {
+        include: { query },
+        exclude: this.exclusions,
+      }).then((response: WebResponse) => {
+        this.fetching = false;
+        if (response.status === 200) {
+          this.summary = response.json as SummaryResponse;
+
+          if (this.summary.error) {
+            this.errors = [this.summary.error];
+          } else {
+            this.errors = [];
+          }
+          this.requestUpdate('errors');
+          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
         } else {
-          this.errors = [];
+          this.summary = response.json as SummaryResponse;
+          if (this.summary.error) {
+            this.errors = [this.summary.error];
+          }
+          this.requestUpdate('errors');
+          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
         }
-        this.requestUpdate('errors');
-        this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
-      }
-    });
+      });
+    }
   }
 
   private handleQueryChange(evt: KeyboardEvent) {
@@ -214,6 +247,25 @@ export class ContactSearch extends FormElement {
     this.query = input.inputElement.value;
   }
 
+  private handleSlotChanged(evt: any) {
+    if (evt.target.tagName === 'TEMBA-CHECKBOX') {
+      const checkbox = evt.target as Checkbox;
+      let value = checkbox.checked as any;
+
+      if (!value) {
+        delete this.exclusions[checkbox.name];
+      } else {
+        if (checkbox.name === 'not_seen_since_days') {
+          value = 90;
+        }
+
+        this.exclusions[checkbox.name] = value;
+      }
+    }
+
+    this.requestUpdate('query');
+  }
+
   public render(): TemplateResult {
     let summary: TemplateResult;
     if (this.summary) {
@@ -228,79 +280,72 @@ export class ContactSearch extends FormElement {
         const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;
 
         summary = html`
-          <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>
-                `
+          <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> `
               )}
-              ${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>
+              <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>
+              `
+            )}
+            ${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>
         `;
       }
     }
 
-    const loadingStyle = this.fetching ? { opacity: '1' } : {};
-
     return html`
       <div class="query">
         <temba-textinput
@@ -319,14 +364,17 @@ export class ContactSearch extends FormElement {
         </temba-textinput>
       </div>
 
-      ${this.fetching
-        ? html`<temba-loading
-            units="4"
-            style=${styleMap(loadingStyle)}
-          ></temba-loading>`
-        : this.summary
-        ? html` <div class="summary">${summary}</div> `
-        : null}
+      <slot @change=${this.handleSlotChanged}></slot>
+
+      <div
+        class="results ${getClasses({
+          fetching: this.fetching,
+          initialized: this.initialized || this.fetching,
+        })}"
+      >
+        <temba-loading units="6" size="8"></temba-loading>
+        <div class="summary ${this.expanded ? 'expanded' : ''}">${summary}</div>
+      </div>
     `;
   }
 }

package/src/dialog/Dialog.ts

@@ -233,7 +233,9 @@ export class Dialog extends RapidElement {
       if (this.open && !changedProperties.get('open')) {
         this.shadowRoot
           .querySelectorAll('temba-button')
-          .forEach((button: Button) => (button.disabled = false));
+          .forEach((button: Button) => {
+            if (button) button.submitting = false;
+          });
 
         if (!this.noFocus) {
           this.focusFirstInput();

package/src/select/Select.ts

@@ -812,8 +812,8 @@ export class Select extends FormElement {
           url = this.next;
         }
 
-        if (this.cache && !this.tags && this.lruCache.has(url)) {
-          const cache = this.lruCache.get(url);
+        const cache = this.lruCache.get(url);
+        if (this.cache && !this.tags && cache) {
           if (page === 0 && !this.next) {
             this.cursorIndex = 0;
             this.setVisibleOptions([...options, ...cache.options]);
@@ -1071,6 +1071,7 @@ export class Select extends FormElement {
               this.addValue(option);
             } else {
               this.setValue(option);
+              this.fireEvent('change');
             }
           }
         }

package/src/slider/TembaSlider.ts

@@ -0,0 +1,141 @@
+import { css, html, TemplateResult } from 'lit';
+import { styleMap } from 'lit-html/directives/style-map';
+import { property } from 'lit/decorators';
+import { FormElement } from '../FormElement';
+import { getClasses } from '../utils';
+
+export class TembaSlider extends FormElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .track {
+        height: 0.1em;
+        border: 12px solid #fff;
+        background: #ddd;
+      }
+
+      .circle {
+        margin-top: 0.4em;
+        margin-left: 1em;
+        width: 0.75em;
+        height: 0.75em;
+        border: 2px solid #999;
+        border-radius: 999px;
+        position: absolute;
+        background: #fff;
+        box-shadow: 0 0 0 4px rgb(255, 255, 255);
+        transition: transform 200ms ease-in-out;
+      }
+
+      .grabbed .track {
+        cursor: pointer;
+      }
+
+      :hover .circle {
+        border-color: #777;
+        cursor: pointer;
+      }
+
+      .grabbed .circle {
+        // border-color: #777;
+      }
+
+      .grabbed .circle {
+        border-color: var(--color-primary-dark);
+        background: #fff;
+      }
+
+      .grabbed .circle {
+        transform: scale(1.2);
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  min = 0;
+
+  @property({ type: Number })
+  max = 100;
+
+  circleX = 0;
+  grabbed = false;
+  left = 0;
+  gap = 0;
+
+  public firstUpdated(changes: Map<string, any>) {
+    super.firstUpdated(changes);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.left = Math.round(this.getBoundingClientRect().left);
+    const circle = this.shadowRoot.querySelector('.circle').clientWidth - 4;
+    this.left = Math.round(this.getBoundingClientRect().left + circle);
+    this.gap = this.offsetWidth * 0.035;
+  }
+
+  public updated(changedProperties: Map<string, any>): void {
+    if (changedProperties.has('value')) {
+      const pct = parseInt(this.value) / this.max;
+      const total = this.offsetWidth - this.gap;
+      this.updateCircle(total * pct);
+    }
+  }
+
+  public updateValue(evt: MouseEvent) {
+    const left = evt.pageX - this.left;
+    const pct = left / (this.offsetWidth - this.gap);
+    this.value =
+      '' + Math.max(this.min, Math.min(Math.round(this.max * pct), this.max));
+  }
+
+  public handleMouseMove(evt: MouseEvent) {
+    if (this.grabbed) {
+      this.updateValue(evt);
+    }
+  }
+
+  public handleTrackDown(evt: MouseEvent) {
+    this.grabbed = true;
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+    document.querySelector('html').classList.add('dragging');
+    this.updateValue(evt);
+
+    this.requestUpdate();
+  }
+
+  public handleMouseUp(evt: MouseEvent) {
+    this.grabbed = false;
+    this.updateValue(evt);
+
+    this.requestUpdate();
+
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.querySelector('html').classList.remove('dragging');
+  }
+
+  public updateCircle(x: number) {
+    const circle = this.shadowRoot.querySelector('.circle') as HTMLDivElement;
+    this.circleX = Math.round(
+      Math.min(
+        this.offsetWidth - this.gap,
+        Math.max(x + circle.offsetWidth / 2, this.gap)
+      )
+    );
+    this.requestUpdate();
+  }
+
+  public render(): TemplateResult {
+    return html` <div class="${getClasses({ grabbed: this.grabbed })}">
+      <div
+        style=${styleMap({ left: this.circleX + 'px' })}
+        class="circle"
+        @mousedown=${this.handleTrackDown}
+      ></div>
+      <div class="track" @mousedown=${this.handleTrackDown}></div>
+    </div>`;
+  }
+}

package/static/css/temba-components.css

@@ -1,6 +1,12 @@
-html input {
+  html input {
     font-weight: 300;
   }
+
+  html.dragging * {
+    user-select: none;
+    pointer-events: none;
+
+  }
   
   html {
     

package/temba-modules.ts

@@ -34,6 +34,7 @@ import { ContactFieldEditor } from './src/contacts/ContactFieldEditor';
 import { ContactBadges } from './src/contacts/ContactBadges';
 import { ContactPending } from './src/contacts/ContactPending';
 import { ContactTickets } from './src/contacts/ContactTickets';
+import { TembaSlider } from './src/slider/TembaSlider';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -77,3 +78,4 @@ addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-groups', ContactBadges);
 addCustomElement('temba-contact-pending', ContactPending);
 addCustomElement('temba-contact-tickets', ContactTickets);
+addCustomElement('temba-slider', TembaSlider);