@nyaruka/temba-components 0.21.0 → 0.24.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

@@ -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

@@ -106,9 +106,17 @@ export class Modax extends RapidElement {
   @property({ type: Boolean })
   noSubmit: boolean;
 
+  @property({ type: Object })
+  headers: any = {};
+
   @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
@@ -222,12 +230,18 @@ export class Modax extends RapidElement {
     return !scriptOnly;
   }
 
+  public getHeaders(): any {
+    const headers = this.headers;
+    headers['X-PJAX'] = 1;
+    return headers;
+  }
+
   private fetchForm() {
     // const CancelToken = axios.CancelToken;
     // this.cancelToken = CancelToken.source();
     this.fetching = true;
     this.body = this.getLoading();
-    this.httpComplete = getUrl(this.endpoint, null, true).then(
+    this.httpComplete = getUrl(this.endpoint, null, this.getHeaders()).then(
       (response: WebResponse) => {
         this.setBody(response.body);
         this.updatePrimaryButton();
@@ -249,7 +263,7 @@ export class Modax extends RapidElement {
     this.httpComplete = postUrl(
       this.endpoint,
       postData,
-      true,
+      this.getHeaders(),
       'application/x-www-form-urlencoded'
     )
       .then((response: WebResponse) => {
@@ -292,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();
+        }
       }
     }
 
@@ -300,7 +316,6 @@ export class Modax extends RapidElement {
       this.open = false;
       this.fetching = false;
       this.cancelName = undefined;
-      // this.cancelToken.cancel();
     }
   }
 
@@ -329,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',