Show contact search exclusions as filters

nyaruka · Jun 25, 2024 · 98cf90e · 98cf90e
1 parent 8928b7b
commit 98cf90e
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 154 deletions.
diff --git a/src/contactsearch/ContactSearch.ts b/src/contactsearch/ContactSearch.ts
@@ -199,6 +199,32 @@ export class ContactSearch extends FormElement {
         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);
+      }
     `;
   }
 
@@ -376,19 +402,42 @@ export class ContactSearch extends FormElement {
 
   private handleActivityLevelChanged(evt: any) {
     const select = evt.target as Select;
-    if (select.value && select.value !== 'all') {
-      this.exclusions['not_seen_since_days'] = parseInt(select.value);
-    } else {
-      delete this.exclusions['not_seen_since_days'];
+    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;
     }
-    this.refresh();
   }
 
   private handleExclusionChanged(evt: any) {
     if (evt.target.tagName === 'TEMBA-CHECKBOX') {
       const ex = JSON.stringify(this.exclusions);
       const checkbox = evt.target as Checkbox;
-      const value = checkbox.checked as any;
+      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];
@@ -459,95 +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-select
-                  name="not_seen_since_days"
-                  class="activity-select"
-                  help_text="${msg(
-                    'Only include contacts who have sent a message in the last 90 days.'
-                  )}"
-                  widget_only
-                  @change=${this.handleActivityLevelChanged}
-                >
-                  <temba-option
-                    name="Active in the last 30 days"
-                    value="30"
-                    icon="filter"
-                    ?checked=${this.exclusions['not_seen_since_days'] === 30}
-                  ></temba-option>
-                  <temba-option
-                    name="Active in the last 90 days"
-                    value="90"
-                    icon="filter"
-                    ?checked=${this.exclusions['not_seen_since_days'] === 90}
-                  ></temba-option>
-                  <temba-option
-                    name="Active in the last year"
-                    value="365"
-                    icon="filter"
-                    ?checked=${this.exclusions['not_seen_since_days'] === 365}
-                  ></temba-option>
-                  <temba-option
-                    name="Don't filter by activity"
-                    value="all"
-                  ></temba-option>
-                </temba-select>`
-              : 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({
@@ -562,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
+                >`
+            )
+          : ``
+      }
     `;
   }
 }
diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -6,9 +6,7 @@
 
 export const templates = {
   scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  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`
 };
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
@@ -6,9 +6,7 @@
 
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
-  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`
 };
diff --git a/src/locales/pt.ts b/src/locales/pt.ts
@@ -6,9 +6,7 @@
 
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
-  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`
 };
diff --git a/xliff/es.xlf b/xliff/es.xlf
@@ -6,20 +6,14 @@
   <source>Tab to complete, enter to select</source>
   <target>Tab para completar, enter para seleccionar</target>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not 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>

diff --git a/xliff/fr.xlf b/xliff/fr.xlf
@@ -5,20 +5,14 @@
 <trans-unit id="scf1453991c986b25">
   <source>Tab to complete, enter to select</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="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not 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>