@nyaruka/temba-components 0.55.0 → 0.56.1

package/src/contactsearch/ContactSearch.ts

@@ -1,13 +1,16 @@
-import { TemplateResult, html, css } from 'lit';
+import { TemplateResult, html, css, PropertyValueMap } from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { property } from 'lit/decorators.js';
-import { getClasses, postJSON, WebResponse } from '../utils';
+import { getClasses, postJSON, stopEvent, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import '../alert/Alert';
 import { Contact, CustomEventType } from '../interfaces';
 import { FormElement } from '../FormElement';
 import { Checkbox } from '../checkbox/Checkbox';
+import { msg } from '@lit/localize';
+import { OmniOption, Omnibox } from '../omnibox/Omnibox';
 
-const QUEIT_MILLIS = 1000;
+const QUEIT_MILLIS = 2000;
 
 interface SummaryResponse {
   total: number;
@@ -15,6 +18,8 @@ interface SummaryResponse {
   query: string;
   fields: { [uuid: string]: { label: string; type: string } };
   error?: string;
+  warnings: string[];
+  blockers: string[];
 }
 
 export class ContactSearch extends FormElement {
@@ -142,6 +147,17 @@ export class ContactSearch extends FormElement {
 
       .summary {
         min-height: 2.2em;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+      }
+
+      .summary .result-count {
+        flex-grow: 1;
+      }
+
+      .results.empty {
+        display: none !important;
       }
 
       .results.initialized {
@@ -150,10 +166,44 @@ export class ContactSearch extends FormElement {
         margin-top: 0.5em;
         margin-left: 0.6em;
       }
+
+      .advanced-icon {
+        cursor: pointer;
+        margin-right: 0.5em;
+      }
+
+      .query .advanced-icon {
+        margin-top: 1em;
+        margin-right: 1em;
+      }
+
+      .advanced-icon:hover {
+        --icon-color: var(--color-link-primary-hover) !important;
+      }
+
+      .query {
+        --textarea-height: 5em;
+      }
+
+      #recipients {
+        margin-bottom: 1em;
+        display: block;
+      }
+
+      temba-alert {
+        margin: 1em 0;
+      }
     `;
   }
 
-  // private cancelToken: CancelTokenSource;
+  @property({ type: Boolean })
+  in_a_flow: boolean;
+
+  @property({ type: Boolean })
+  started_previously: boolean;
+
+  @property({ type: Boolean })
+  not_seen_since_days: boolean;
 
   @property({ type: Boolean })
   fetching: boolean;
@@ -185,44 +235,90 @@ export class ContactSearch extends FormElement {
   @property({ type: Object, attribute: false })
   flow: any;
 
-  private lastQuery: number;
-  private initialized = false;
+  @property({ type: Array })
+  recipients: OmniOption[] = [];
 
+  @property({ type: Boolean })
+  advanced = false;
+
+  @property({ type: String })
+  refreshKey = '0';
+
+  public refresh(): void {
+    this.refreshKey = 'requested_' + new Date().getTime();
+  }
+
+  @property({ type: Object })
   private exclusions = {};
 
+  private lastQuery: number;
+  private initialized = false;
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('query') || changedProperties.has('endpoint')) {
-      this.fetching = !!this.query && !!this.endpoint;
+    if (changedProperties.has('advanced') && this.advanced) {
+      return;
+    }
 
-      if (this.fetching) {
-        this.initialized = true;
-        // clear our summary on any change
-        this.summary = null;
-        if (this.lastQuery) {
-          window.clearTimeout(this.lastQuery);
-        }
+    // if we remove the in_a_flow option, make sure it's not part of our exclusions
+    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {
+      delete this.exclusions['in_a_flow'];
+      this.requestUpdate('exclusions');
+    }
 
-        if (this.query.trim().length > 0) {
-          this.lastQuery = window.setTimeout(() => {
-            this.fetchSummary(this.query);
-          }, QUEIT_MILLIS);
-        }
+    if (
+      (changedProperties.has('query') && this.advanced) ||
+      (changedProperties.has('refreshKey') && this.refreshKey !== '0')
+    ) {
+      this.summary = null;
+      // this.errors = [];
+
+      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });
+      if (this.lastQuery) {
+        window.clearTimeout(this.lastQuery);
+        this.fetching = false;
+      }
+
+      if (this.query.trim().length > 0 || this.recipients.length > 0) {
+        this.fetching = true;
+        this.lastQuery = window.setTimeout(() => {
+          this.fetchSummary();
+        }, QUEIT_MILLIS);
       }
     }
   }
 
-  public fetchSummary(query: string): any {
+  public fetchSummary(): any {
     if (this.endpoint) {
+      const group_uuids = this.recipients
+        .filter((value: OmniOption) => value.type === 'group')
+        .map((value: OmniOption) => value.id);
+
+      const contact_uuids = this.recipients
+        .filter((value: OmniOption) => value.type === 'contact')
+        .map((value: OmniOption) => value.id);
+
       postJSON(this.endpoint, {
-        include: { query },
+        include: this.advanced
+          ? { query: this.query }
+          : { contact_uuids, group_uuids },
+
         exclude: this.exclusions,
       }).then((response: WebResponse) => {
         this.fetching = false;
         if (response.status === 200) {
           this.summary = response.json as SummaryResponse;
-          this.value = this.summary.query;
+          if (!this.advanced) {
+            this.query = this.summary.query;
+          }
+          this.setValue({
+            advanced: this.advanced,
+            query: this.query,
+            exclusions: this.exclusions,
+            recipients: this.recipients,
+          });
+
           if (this.summary.error) {
             this.errors = [this.summary.error];
           } else {
@@ -242,13 +338,40 @@ export class ContactSearch extends FormElement {
     }
   }
 
+  private handleAdvancedToggle(evt: MouseEvent) {
+    stopEvent(evt);
+    this.recipients = [];
+    this.exclusions = {};
+    if (this.advanced) {
+      this.query = '';
+      this.value = null;
+    }
+    this.advanced = !this.advanced;
+
+    this.setValue({
+      advanced: this.advanced,
+      query: this.query,
+      exclusions: this.exclusions,
+      recipients: this.recipients,
+    });
+  }
+
   private handleQueryChange(evt: KeyboardEvent) {
     const input = evt.target as TextInput;
     this.query = input.inputElement.value;
   }
 
-  private handleSlotChanged(evt: any) {
+  private handleRecipientsChanged(evt: any) {
+    if (this.refreshKey !== '0' || this.initialized) {
+      this.refresh();
+    } else {
+      this.initialized = true;
+    }
+  }
+
+  private handleExclusionChanged(evt: any) {
     if (evt.target.tagName === 'TEMBA-CHECKBOX') {
+      const ex = JSON.stringify(this.exclusions);
       const checkbox = evt.target as Checkbox;
       let value = checkbox.checked as any;
 
@@ -261,120 +384,154 @@ export class ContactSearch extends FormElement {
 
         this.exclusions[checkbox.name] = value;
       }
-    }
 
-    this.requestUpdate('query');
+      if (ex !== JSON.stringify(this.exclusions)) {
+        this.refresh();
+      }
+    }
   }
 
   public render(): TemplateResult {
     let summary: TemplateResult;
     if (this.summary) {
-      const fields = Object.keys(this.summary.fields || []).map(
-        (uuid: string) => {
-          return { uuid, ...this.summary.fields[uuid] };
-        }
-      );
-
       if (!this.summary.error) {
         const count = this.summary.total;
-        const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;
 
         summary = html`
-          <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>
-              `
-            )}
-            ${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 class="result-count">
+            Found
+            <a
+              class="linked"
+              target="_"
+              href="/contact/?search=${encodeURIComponent(this.summary.query)}"
+            >
+              ${count.toLocaleString()}
+            </a>
+            contact${count !== 1 ? 's' : ''}
+          </div>
+          <temba-button
+            class="edit"
+            name="edit"
+            secondary
+            small
+            @click=${this.handleAdvancedToggle}
+          >
+            <div slot="name">
+              <div style="display: flex; align-items: center;">
+                ${this.advanced
+                  ? html` <temba-icon
+                        name="reset"
+                        style="margin-right:0.5em"
+                      ></temba-icon>
+                      Start Over`
+                  : html` <temba-icon
+                        name="edit"
+                        style="margin-right:0.5em"
+                      ></temba-icon>
+                      Edit Query`}
+              </div>
+            </div>
+          </temba-button>
         `;
       }
     }
 
-    return html`
-      <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>
+    if (this.summary && this.summary.blockers.length > 0) {
+      return html`${this.summary.blockers.map(
+        error =>
+          html`<temba-alert level="error">${unsafeHTML(error)}</temba-alert>`
+      )}`;
+    }
 
-      <slot @change=${this.handleSlotChanged}></slot>
+    return html`
+      ${this.advanced
+        ? html`<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>`
+        : html`<temba-omnibox
+              placeholder="Search for contacts or groups"
+              widget_only=""
+              groups=""
+              contacts=""
+              label="Recipients"
+              help_text="The contacts to send the message to."
+              .errors=${this.errors}
+              id="recipients"
+              name="recipients"
+              .value=${this.recipients}
+              endpoint="/contact/omnibox/?"
+              @change=${this.handleRecipientsChanged}
+            >
+            </temba-omnibox>
+
+            ${this.not_seen_since_days
+              ? html`<temba-checkbox
+                  name="not_seen_since_days"
+                  label="${msg('Skip inactive contacts')}"
+                  help_text="${msg(
+                    'Only include contacts who have sent a message in the last 90 days.'
+                  )}"
+                  ?checked=${this.exclusions['not_seen_since_days'] === 90}
+                  @change=${this.handleExclusionChanged}
+                ></temba-checkbox>`
+              : null}
+            ${this.in_a_flow
+              ? html`<temba-checkbox
+                  name="in_a_flow"
+                  label="${msg('Skip contacts currently in a flow')}"
+                  help_text="${msg(
+                    'Avoid interrupting a contact who is already in a flow.'
+                  )}"
+                  ?checked=${this.exclusions['in_a_flow']}
+                  @change=${this.handleExclusionChanged}
+                ></temba-checkbox>`
+              : null}
+            ${this.started_previously
+              ? html`<temba-checkbox
+                  name="started_previously"
+                  label="${msg('Skip repeat contacts')}"
+                  help_text="${msg(
+                    'Avoid restarting a contact who has been in this flow in the last 90 days.'
+                  )}"
+                  ?checked=${this.exclusions['started_previously']}
+                  @change=${this.handleExclusionChanged}
+                ></temba-checkbox>`
+              : null}`}
 
       <div
         class="results ${getClasses({
           fetching: this.fetching,
           initialized: this.initialized || this.fetching,
+          empty:
+            ((this.summary && this.summary.error) || !this.summary) &&
+            !this.fetching,
         })}"
       >
         <temba-loading units="6" size="8"></temba-loading>
         <div class="summary ${this.expanded ? 'expanded' : ''}">${summary}</div>
       </div>
+
+      ${this.summary && this.summary.warnings
+        ? this.summary.warnings.map(
+            warning =>
+              html`<temba-alert level="warning"
+                >${unsafeHTML(warning)}</temba-alert
+              >`
+          )
+        : ``}
     `;
   }
 }

package/src/label/Label.ts

@@ -33,7 +33,7 @@ export default class Label extends LitElement {
         font-size: 0.8em;
         font-weight: 400;
         border-radius: 12px;
-        box-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.15);
+        box-shadow: var(--widget-shadow, 0 0.04em 0.08em rgba(0, 0, 0, 0.15));
         background: var(--color-overlay-light);
         color: var(--color-overlay-light-text);
         --icon-color: var(--color-overlay-light-text);
@@ -66,8 +66,6 @@ export default class Label extends LitElement {
 
       .dark {
         background: var(--color-overlay-dark);
-        color: var(--color-overlay-dark-text);
-        --icon-color: var(--color-overlay-dark-text);
         text-shadow: none;
       }
 
@@ -132,6 +130,7 @@ export default class Label extends LitElement {
           tertiary: this.tertiary,
           shadow: this.shadow,
           danger: this.danger,
+          dark: this.dark,
         })}"
         style=${styleMap(labelStyle)}
       >

package/src/locales/es.ts

@@ -6,4 +6,10 @@
 
 export const templates = {
   scf1453991c986b25: `Tab para completar, enter para seleccionar`,
+  sf8653793d61d060c: `Skip inactive contacts`,
+  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
+  sd149dff460c8dc41: `Skip contacts currently in a flow`,
+  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
+  s3e3fa53e834f4fda: `Skip repeat contacts`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
 };

package/src/locales/fr.ts

@@ -6,4 +6,10 @@
 
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
+  sf8653793d61d060c: `Skip inactive contacts`,
+  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
+  sd149dff460c8dc41: `Skip contacts currently in a flow`,
+  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
+  s3e3fa53e834f4fda: `Skip repeat contacts`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
 };

package/src/locales/pt.ts

@@ -6,4 +6,10 @@
 
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
+  sf8653793d61d060c: `Skip inactive contacts`,
+  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
+  sd149dff460c8dc41: `Skip contacts currently in a flow`,
+  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
+  s3e3fa53e834f4fda: `Skip repeat contacts`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
 };

package/src/omnibox/Omnibox.ts

@@ -10,7 +10,7 @@ enum OmniType {
   Contact = 'contact',
 }
 
-interface OmniOption {
+export interface OmniOption {
   id: string;
   name: string;
   type: OmniType;
@@ -78,6 +78,9 @@ export class Omnibox extends RapidElement {
   @property({ type: String })
   label: string;
 
+  @property({ type: String, attribute: 'info_text' })
+  infoText = '';
+
   /** An option in the drop down */
   private renderOption(option: OmniOption): TemplateResult {
     return html`
@@ -98,7 +101,7 @@ export class Omnibox extends RapidElement {
 
     if (option.urn && option.type === OmniType.Contact) {
       if (option.urn !== option.name) {
-        return html` <div style=${styleMap(style)}>${option.urn}</div> `;
+        return html`<div style=${styleMap(style)}>${option.urn}</div>`;
       }
     }
 
@@ -137,11 +140,11 @@ export class Omnibox extends RapidElement {
 
   private getIcon(option: OmniOption): TemplateResult {
     if (option.type === OmniType.Group) {
-      return html` <temba-icon name="${Icon.group}" /> `;
+      return html`<temba-icon name="${Icon.group}"></temba-icon>`;
     }
 
     if (option.type === OmniType.Contact) {
-      return html` <temba-icon name="${Icon.contact}" /> `;
+      return html`<temba-icon name="${Icon.contact}"></temba-icon>`;
     }
   }
 
@@ -185,9 +188,12 @@ export class Omnibox extends RapidElement {
         .renderSelectedItem=${this.renderSelection.bind(this)}
         .inputRoot=${this}
         .isMatch=${this.isMatch}
+        .infoText=${this.infoText}
         searchable
         searchOnFocus
         multi
+        ><div slot="right">
+          <slot name="right"></slot></div
       ></temba-select>
     `;
   }

package/src/select/Select.ts

@@ -599,14 +599,16 @@ export class Select extends FormElement {
           this.selection = this.values[0];
           this.value = this.serializeValue(this.values[0]);
         } else {
-          this.values.forEach(value => {
-            const ele = document.createElement('input');
-            ele.setAttribute('type', 'hidden');
-            ele.setAttribute('name', name);
-            ele.setAttribute('value', this.serializeValue(value));
-            this.hiddenInputs.push(ele);
-            this.inputRoot.parentElement.appendChild(ele);
-          });
+          if (this.inputRoot.parentElement) {
+            this.values.forEach(value => {
+              const ele = document.createElement('input');
+              ele.setAttribute('type', 'hidden');
+              ele.setAttribute('name', name);
+              ele.setAttribute('value', this.serializeValue(value));
+              this.hiddenInputs.push(ele);
+              this.inputRoot.parentElement.appendChild(ele);
+            });
+          }
         }
       }
     }
@@ -1217,7 +1219,10 @@ export class Select extends FormElement {
   }
 
   public removeValue(valueToRemove: any) {
-    this.values = this.values.filter((value: any) => value !== valueToRemove);
+    const idx = this.values.indexOf(valueToRemove);
+    if (idx > -1) {
+      this.values.splice(idx, 1);
+    }
     this.requestUpdate('values');
   }
 
@@ -1329,7 +1334,10 @@ export class Select extends FormElement {
                               this.handleRemoveSelection(selected);
                             }}
                           >
-                            <temba-icon name="${Icon.delete_small}" size="1" />
+                            <temba-icon
+                              name="${Icon.delete_small}"
+                              size="1"
+                            ></temba-icon>
                           </div>
                         `
                       : null}
@@ -1339,10 +1347,12 @@ export class Select extends FormElement {
               )}
               ${this.multi ? input : null}
             </div>
+
           </div>
 
           ${clear}
 
+          <slot name="right"></slot>
           ${
             !this.tags
               ? html`<div
@@ -1356,7 +1366,7 @@ export class Select extends FormElement {
                     class="select-open ${this.visibleOptions.length > 0
                       ? 'open'
                       : ''}"
-                  />
+                  ></temba-icon>
                 </div>`
               : null
           }