@nyaruka/temba-components 0.93.2 → 0.94.0

package/src/contactsearch/ContactSearch.ts

@@ -9,6 +9,7 @@ import { FormElement } from '../FormElement';
 import { Checkbox } from '../checkbox/Checkbox';
 import { msg } from '@lit/localize';
 import { OmniOption } from '../omnibox/Omnibox';
+import { Select } from '../select/Select';
 
 const QUEIT_MILLIS = 2000;
 
@@ -193,6 +194,37 @@ export class ContactSearch extends FormElement {
       temba-alert {
         margin: 1em 0;
       }
+
+      temba-select[name='not_seen_since_days'] {
+        margin-bottom: 1em;
+        display: block;
+      }
+
+      .activity-select {
+        display: flex;
+        align-items: center;
+        padding: var(--checkbox-padding, 10px);
+        border-radius: var(--curvature);
+        cursor: pointer;
+      }
+
+      .activity-select:hover {
+        background: #f9f9f9;
+      }
+
+      .small-select {
+        --temba-select-selected-padding: 0px 0.5em;
+        --temba-select-selected-line-height: 1em;
+        --temba-select-selected-font-size: 1em;
+        --search-input-height: 0px !important;
+        min-width: 100px;
+      }
+
+      .filters {
+        padding: 1em;
+        border: 1px solid var(--color-borders);
+        border-radius: var(--curvature);
+      }
     `;
   }
 
@@ -368,19 +400,48 @@ export class ContactSearch extends FormElement {
     }
   }
 
+  private handleActivityLevelChanged(evt: any) {
+    const select = evt.target as Select;
+    const option = select.values[0];
+    if (option) {
+      if (this.exclusions['not_seen_since_days']) {
+        this.exclusions['not_seen_since_days'] = parseInt(option.value);
+        this.refresh();
+      }
+    }
+  }
+
+  private handleActivityLabelClicked(evt: any) {
+    if (
+      evt.target &&
+      evt.target.tagName !== 'TEMBA-CHECKBOX' &&
+      evt.target.tagName !== 'TEMBA-SELECT' &&
+      !evt.target.disabled
+    ) {
+      const checkbox = evt.currentTarget.querySelector('temba-checkbox');
+      checkbox.checked = !checkbox.checked;
+    }
+  }
+
   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;
 
+      // if we check the activity box, look inside the select for the value
+      if (checkbox.name === 'not_seen_since_days' && value) {
+        const select = checkbox.parentElement.querySelector(
+          'temba-select'
+        ) as Select;
+        if (select.values[0]) {
+          value = parseInt(select.values[0].value);
+        }
+      }
+
       if (!value) {
         delete this.exclusions[checkbox.name];
       } else {
-        if (checkbox.name === 'not_seen_since_days') {
-          value = 90;
-        }
-
         this.exclusions[checkbox.name] = value;
       }
 
@@ -447,72 +508,106 @@ export class ContactSearch extends FormElement {
     }
 
     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}`}
+      ${
+        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>
+
+              <div class="filters">
+                <div style="display:flex;font-size:1em;margin-bottom:0.5em">
+                  <temba-icon size="1" name="filter"></temba-icon>
+                  <div style="margin-left:0.5em">
+                    Only include contacts who...
+                  </div>
+                </div>
+
+                ${this.not_seen_since_days
+                  ? html`
+                      <div
+                        class="activity-select"
+                        @click=${this.handleActivityLabelClicked}
+                      >
+                        <temba-checkbox
+                          style="display:inline;"
+                          name="not_seen_since_days"
+                          @change=${this.handleExclusionChanged}
+                        >
+                        </temba-checkbox>
+
+                        <div style="margin-left:0.5em">
+                          ${msg('Have sent a message in the last')}
+                        </div>
+
+                        <temba-select
+                          style="margin-left:0.5em"
+                          class="small-select"
+                          @change=${this.handleActivityLevelChanged}
+                          ?disabled=${!this.exclusions['not_seen_since_days']}
+                        >
+                          <temba-option
+                            name="90 days"
+                            value="90"
+                          ></temba-option>
+                          <temba-option
+                            name="180 days"
+                            value="180"
+                          ></temba-option>
+                          <temba-option name="Year" value="365"></temba-option>
+                        </temba-select>
+                        <div></div>
+                      </div>
+                    `
+                  : null}
+                ${this.in_a_flow
+                  ? html`<temba-checkbox
+                      name="in_a_flow"
+                      label="${msg('Are not currently 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(
+                        'Have not started this flow in the last 90 days'
+                      )}"
+                      ?checked=${this.exclusions['started_previously']}
+                      @change=${this.handleExclusionChanged}
+                    ></temba-checkbox>`
+                  : null}
+              </div>`
+      }
+              </div>
 
       <div
         class="results ${getClasses({
@@ -527,14 +622,16 @@ export class ContactSearch extends FormElement {
         <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
-              >`
-          )
-        : ``}
+      ${
+        this.summary && this.summary.warnings
+          ? this.summary.warnings.map(
+              (warning) =>
+                html`<temba-alert level="warning"
+                  >${unsafeHTML(warning)}</temba-alert
+                >`
+            )
+          : ``
+      }
     `;
   }
 }

package/src/locales/es.ts

@@ -6,10 +6,7 @@
 
 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.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/locales/fr.ts

@@ -6,10 +6,7 @@
 
 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.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/locales/pt.ts

@@ -6,10 +6,7 @@
 
 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.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/tabpane/TabPane.ts

@@ -116,6 +116,14 @@ export class TabPane extends RapidElement {
       .bottom .tab.selected {
       }
 
+      .unselect .tab.selected {
+        cursor: pointer;
+      }
+
+      .unselect .tab.selected:hover {
+        background: var(--unselect-tab-color, #eee);
+      }
+
       .tab:hover {
         --icon-color: #666;
         color: #666;
@@ -216,6 +224,10 @@ export class TabPane extends RapidElement {
   @property({ type: Boolean })
   bottom = false;
 
+  // do we allow unselecting the current tab
+  @property({ type: Boolean })
+  unselect = false;
+
   // Only shows the name if the tab is focused
   @property({ type: Boolean })
   focusedName = false;
@@ -230,9 +242,16 @@ export class TabPane extends RapidElement {
   tabs: Tab[] = [];
 
   private handleTabClick(event: MouseEvent): void {
-    this.index = parseInt(
+    const newIndex = parseInt(
       (event.currentTarget as HTMLDivElement).dataset.index
     );
+
+    if (this.unselect && this.index === newIndex) {
+      this.index = -1;
+    } else {
+      this.index = newIndex;
+    }
+
     event.preventDefault();
     event.stopPropagation();
     this.requestUpdate('index');
@@ -332,7 +351,8 @@ export class TabPane extends RapidElement {
           bottom: this.bottom,
           collapses: this.collapses,
           embedded: this.embedded,
-          focusedname: this.focusedName
+          focusedname: this.focusedName,
+          unselect: this.unselect
         })}"
       >
         ${this.tabs.map(

package/xliff/es.xlf

@@ -6,23 +6,14 @@
   <source>Tab to complete, enter to select</source>
   <target>Tab para completar, enter para seleccionar</target>
 </trans-unit>
-<trans-unit id="sf8653793d61d060c">
-  <source>Skip inactive contacts</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not currently in a flow</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
-</trans-unit>
-<trans-unit id="sc85010c81b71421e">
-  <source>Avoid interrupting a contact who is already in a flow.</source>
-</trans-unit>
-<trans-unit id="s3e3fa53e834f4fda">
-  <source>Skip repeat contacts</source>
-</trans-unit>
-<trans-unit id="s95e715d82602bced">
-  <source>Avoid restarting a contact who has been in this flow in the last 90 days.</source>
+<trans-unit id="s4788ee206c4570c7">
+  <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
 </body>
 </file>

package/xliff/fr.xlf

@@ -5,23 +5,14 @@
 <trans-unit id="scf1453991c986b25">
   <source>Tab to complete, enter to select</source>
 </trans-unit>
-<trans-unit id="sf8653793d61d060c">
-  <source>Skip inactive contacts</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not currently in a flow</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
-</trans-unit>
-<trans-unit id="sc85010c81b71421e">
-  <source>Avoid interrupting a contact who is already in a flow.</source>
-</trans-unit>
-<trans-unit id="s3e3fa53e834f4fda">
-  <source>Skip repeat contacts</source>
-</trans-unit>
-<trans-unit id="s95e715d82602bced">
-  <source>Avoid restarting a contact who has been in this flow in the last 90 days.</source>
+<trans-unit id="s4788ee206c4570c7">
+  <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
 </body>
 </file>

package/xliff/pt.xlf

@@ -5,23 +5,14 @@
 <trans-unit id="scf1453991c986b25">
   <source>Tab to complete, enter to select</source>
 </trans-unit>
-<trans-unit id="sf8653793d61d060c">
-  <source>Skip inactive contacts</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not currently in a flow</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
-</trans-unit>
-<trans-unit id="sc85010c81b71421e">
-  <source>Avoid interrupting a contact who is already in a flow.</source>
-</trans-unit>
-<trans-unit id="s3e3fa53e834f4fda">
-  <source>Skip repeat contacts</source>
-</trans-unit>
-<trans-unit id="s95e715d82602bced">
-  <source>Avoid restarting a contact who has been in this flow in the last 90 days.</source>
+<trans-unit id="s4788ee206c4570c7">
+  <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
 </body>
 </file>