@nyaruka/temba-components 0.20.0 → 0.24.0

package/src/checkbox/Checkbox.ts

@@ -9,6 +9,19 @@ export class Checkbox extends FormElement {
         display: inline-block;
       }
 
+      :host([label]) {
+        width: 100%;
+      }
+
+      .wrapper.label {
+        padding: 10px;
+        border-radius: var(--curvature);
+      }
+
+      .wrapper.label:hover {
+        background: #f9f9f9;
+      }
+
       temba-field {
         --help-text-margin-left: 24px;
         cursor: pointer;
@@ -93,22 +106,24 @@ export class Checkbox extends FormElement {
     />`;
 
     return html`
-      <temba-field
-        name=${this.name}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .helpAlways=${true}
-        ?disabled=${this.disabled}
-        @click=${this.handleClick}
-      >
-        <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
-          ${icon}
-          ${this.label
-            ? html`<div class="checkbox-label">${this.label}</div>`
-            : null}
-        </div>
-      </temba-field>
+      <div class="wrapper ${this.label ? 'label' : ''}">
+        <temba-field
+          name=${this.name}
+          .helpText=${this.helpText}
+          .errors=${this.errors}
+          .widgetOnly=${this.widgetOnly}
+          .helpAlways=${true}
+          ?disabled=${this.disabled}
+          @click=${this.handleClick}
+        >
+          <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
+            ${icon}
+            ${this.label
+              ? html`<div class="checkbox-label">${this.label}</div>`
+              : null}
+          </div>
+        </temba-field>
+      </div>
     `;
   }
 }

package/src/contacts/ContactDetails.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { css, html, property, TemplateResult } from 'lit-element';
 import { Contact, Group, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -265,13 +264,18 @@ export class ContactDetails extends RapidElement {
         ${this.showGroups && !this.ticket
           ? html`<div class="groups">
               ${this.contact.groups.map((group: Group) => {
-                return html`<a href="/contacts/filter/${group.uuid}/"
-                  ><div class="group-label" style="cursor:pointer">
+                return html`
+                  <div
+                    onclick="goto(event)"
+                    href="/contact/filter/${group.uuid}/"
+                    class="group-label"
+                    style="cursor:pointer"
+                  >
                     ${group.is_dynamic
                       ? html`<temba-icon name="atom"></temba-icon>`
                       : null}${group.name}
-                  </div></a
-                >`;
+                  </div>
+                `;
               })}
             </div>`
           : html``}

package/src/contacts/ContactHistory.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { css, property } from 'lit-element';
 import { html, TemplateResult } from 'lit-html';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
@@ -898,7 +897,6 @@ export class ContactHistory extends RapidElement {
                     body: ticket.body,
                     ticketer: ticket.ticketer,
                   },
-                  // eslint-disable-next-line @typescript-eslint/camelcase
                   created_on: ticket.opened_on,
                 };
 
@@ -918,8 +916,6 @@ export class ContactHistory extends RapidElement {
     return html`
       ${this.ticket
         ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
-        : this.contact
-        ? html`<div class="scroll-title">${this.contact.name}</div>`
         : null}
       ${this.fetching
         ? html`<temba-loading units="5" size="10"></temba-loading>`

package/src/contacts/events.ts

@@ -686,7 +686,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
 
   let inner = null;
   if (mediaType === 'image') {
-    inner = html`<a href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
+    inner = html`<div class="linked" onclick="goto(event)" href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
   } else if (ext === 'pdf') {
     return html`<div
     style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
@@ -928,7 +928,13 @@ export const renderTicketAction = (
       <temba-icon name="${icon}"></temba-icon>
       <div class="description">
         ${getDisplayName(event.created_by)} ${action} a
-        <a href="/tickets/all/open/${event.ticket.uuid}">ticket</a>
+        <span
+          onclick="goto(event)"
+          class="linked"
+          href="/ticket/all/open/${event.ticket.uuid}"
+        >
+          ticket
+        </span>
       </div>
     </div>`;
   }
@@ -976,7 +982,13 @@ export const renderTicketOpened = (
       <temba-icon name="${icon}"></temba-icon>
       <div class="description">
         ${event.ticket.topic.name}
-        <a href="/tickets/all/open/${event.ticket.uuid}">ticket</a> was opened
+        <span
+          class="linked"
+          onclick="goto(event)"
+          href="/tickets/all/open/${event.ticket.uuid}"
+          >ticket</span
+        >
+        was opened
       </div>
     </div>`;
   } else {
@@ -1114,11 +1126,20 @@ export const renderCampaignFiredEvent = (
   return html`<temba-icon name="campaign"></temba-icon>
     <div class="description">
       Campaign
-      <a href="/campaign/read/${event.campaign.id}">${event.campaign.name}</a>
+      <span
+        class="linked"
+        onclick="goto(event)"
+        href="/campaign/read/${event.campaign.id}"
+        >${event.campaign.name}</span
+      >
       ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
-      <a href="/campaignevent/read/${event.campaign_event.id}">
+      <span
+        class="linked"
+        onclick="goto(event)"
+        href="/campaignevent/read/${event.campaign_event.id}"
+      >
         ${event.campaign_event.offset_display}
-        ${event.campaign_event.relative_to.name}</a
+        ${event.campaign_event.relative_to.name}</span
       >
     </div>`;
 };
@@ -1138,7 +1159,12 @@ export const renderContactGroupsEvent = (
       ${oxfordFn(
         groups,
         (group: ObjectReference) =>
-          html`<a href="/contact/filter/${group.uuid}">${group.name}</a>`
+          html`<span
+            class="linked"
+            onclick="goto(event)"
+            href="/contact/filter/${group.uuid}"
+            >${group.name}</span
+          >`
       )}
       ${event.type === Events.FAILURE
         ? html`<div>Run ended prematurely, check the flow design.</div>`

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;
       }
 
@@ -53,14 +53,11 @@ export class ContactSearch extends FormElement {
         vertical-align: top;
       }
 
-      table {
-        width: 100%;
-        padding-top: 10px;
+      .summary {
       }
 
-      .header td {
-        border-bottom: 2px solid var(--color-borders);
-        padding: 5px 3px;
+      table {
+        width: 100%;
       }
 
       .contact td {
@@ -92,6 +89,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 +137,9 @@ export class ContactSearch extends FormElement {
   @property({ type: Boolean })
   fetching: boolean;
 
+  @property({ type: Boolean })
+  expanded: boolean;
+
   @property({ type: String })
   endpoint: string;
 
@@ -112,8 +152,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 +183,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 +206,7 @@ export class ContactSearch extends FormElement {
           this.errors = [];
         }
         this.requestUpdate('errors');
+        this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
       }
     });
   }
@@ -177,20 +227,29 @@ 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`
+          <div class="summary ${this.expanded ? 'expanded' : ''}">
           <table cellspacing="0" cellpadding="0">
             <tr class="header">
-              <td colspan="2"></td>
+              <td colspan="2">
+              Found <a
+              class="linked"
+              target="_"
+              href="/contact/?search=${encodeURIComponent(this.summary.query)}"
+              
+            >${count.toLocaleString()}</a> contact${
+          count !== 1 ? 's' : ''
+        }</div>
+              </td>
               ${fields.map(
                 field => html` <td class="field-header">${field.label}</td> `
               )}
               <td></td>
-              <td class="field-header created-on">Created On</td>
+              <td class="field-header date">
+                ${lastSeenOn ? 'Last Seen' : 'Created'}
+              </td>
             </tr>
 
             ${this.summary.sample.map(
@@ -207,24 +266,35 @@ export class ContactSearch extends FormElement {
                     `
                   )}
                   <td></td>
-                  <td class="created-on">${contact.created_on}</td>
+                  <td class="date">
+                    ${lastSeenOn
+                      ? contact.last_seen_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>
+            ${
+              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 +302,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',