@nyaruka/temba-components 0.159.3 → 0.159.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.159.3",
+  "version": "0.159.4",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/form/Checkbox.ts

@@ -88,6 +88,15 @@ export class Checkbox extends FieldElement {
         cursor: not-allowed;
         --icon-color: #ccc;
       }
+
+      /* While a change driven by this checkbox is in flight, the glyph
+         is swapped for spinning arrows to signal work is underway, and the
+         white checkbox backing is hidden so the circular arrows aren't
+         framed by a square. Clicks are ignored in handleClick so the user
+         can't re-fire the same toggle. */
+      .checkbox-container.busy .checkbox-background {
+        display: none;
+      }
     `;
   }
 
@@ -103,6 +112,12 @@ export class Checkbox extends FieldElement {
   @property({ type: Boolean })
   disabled = false;
 
+  // When set, the checkbox glyph is replaced by spinning arrows to indicate
+  // a change it drives is in flight, and clicks are ignored until the host
+  // clears it.
+  @property({ type: Boolean })
+  busy = false;
+
   @property({ type: Number })
   size = 1.2;
 
@@ -154,7 +169,7 @@ export class Checkbox extends FieldElement {
   }
 
   private handleClick(): void {
-    if (!this.disabled) {
+    if (!this.disabled && !this.busy) {
       this.checked = !this.checked;
     }
   }
@@ -165,22 +180,33 @@ export class Checkbox extends FieldElement {
   }
 
   protected renderWidget(): TemplateResult {
-    const icon = html`<temba-icon
-      name="${this.checked
-        ? Icon.checkbox_checked
-        : this.partial
-          ? Icon.checkbox_partial
-          : Icon.checkbox}"
-      size="${this.size}"
-      animatechange="${this.animateChange}"
-    ></temba-icon>`;
+    const icon = this.busy
+      ? html`<temba-icon
+          name="${Icon.progress_spinner}"
+          size="${this.size}"
+          spin
+        ></temba-icon>`
+      : html`<temba-icon
+          name="${this.checked
+            ? Icon.checkbox_checked
+            : this.partial
+              ? Icon.checkbox_partial
+              : Icon.checkbox}"
+          size="${this.size}"
+          animatechange="${this.animateChange}"
+        ></temba-icon>`;
 
     return html`
       <div
         class="wrapper ${this.label ? 'label' : ''}"
         @click=${this.handleClick}
       >
-        <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
+        <div
+          class="checkbox-container ${this.disabled ? 'disabled' : ''} ${this
+            .busy
+            ? 'busy'
+            : ''}"
+        >
           <div class="checkbox-background"></div>
           ${icon}
 

package/src/layout/PageHeader.ts

@@ -46,28 +46,44 @@ export class PageHeader extends RapidElement {
           'tnum' 0;
       }
 
-      /* Title on the left, actions + content menu on the right. */
+      /* One row: the title/subtitle block on the left and the
+         actions/content-menu on the right, vertically centered against
+         each other. The title block is the flexing column so the
+         actions hold their size. The vertical padding matches the
+         horizontal inset the host supplies (the list panel's 20px) so
+         the whole header is wrapped in even, consistent padding. */
       .header {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: var(--gap);
-        padding: 20px 0 16px 0;
+        padding: 12px 0;
       }
-      .titles {
+      /* Title + subtitle stacked tight, sharing the left column. It
+         flexes and clips so a long subtitle truncates against the
+         actions rather than pushing them off the row. */
+      .title-block {
         flex: 1 1 auto;
         min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
       }
       .title {
         font-size: 15.5px;
         font-weight: var(--w-semibold);
         color: var(--text-1);
-        line-height: 1.3;
+        line-height: 1.25;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .subtitle {
         font-size: 12.5px;
         color: var(--text-3);
-        line-height: 1.3;
-        margin-top: 1px;
+        line-height: 1.25;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .actions {
         flex: 0 0 auto;
@@ -91,7 +107,7 @@ export class PageHeader extends RapidElement {
            same way .ds * does in the styleguide — otherwise the
            border adds 2px and the button computes 2px taller. */
         box-sizing: border-box;
-        height: 28px;
+        height: 26px;
         padding: 0 10px;
         border: 1px solid var(--border-strong);
         border-radius: var(--r-sm);
@@ -133,9 +149,12 @@ export class PageHeader extends RapidElement {
       .menu-toggle {
         display: inline-flex;
         align-items: center;
+        justify-content: center;
         cursor: pointer;
         user-select: none;
-        padding: 6px;
+        height: 26px;
+        box-sizing: border-box;
+        padding: 0 5px;
         border-radius: var(--r-sm);
         color: var(--text-2);
         --icon-color: currentColor;
@@ -314,16 +333,19 @@ export class PageHeader extends RapidElement {
   }
 
   public render(): TemplateResult {
-    const hasSubtitle =
-      this.subtitle || this.querySelector('[slot="subtitle"]');
+    const slotted = this.querySelector('[slot="subtitle"]');
+    const hasSubtitle = this.subtitle || slotted;
+    // Full subtitle text for the hover tooltip — the bar truncates a
+    // long subtitle, so the native title surfaces the rest on hover.
+    const subtitleText = (this.subtitle || slotted?.textContent || '').trim();
     return html`
       <div class="header">
-        <div class="titles">
+        <div class="title-block">
           <div class="title">
             <slot name="title">${this.headerTitle}</slot>
           </div>
           ${hasSubtitle
-            ? html`<div class="subtitle">
+            ? html`<div class="subtitle" title=${subtitleText}>
                 <slot name="subtitle">${this.subtitle}</slot>
               </div>`
             : null}

package/src/list/ContactList.ts

@@ -7,6 +7,9 @@ import { getUrl } from '../utils';
 
 const FIELD_PREFIX = 'field:';
 
+/** Placeholder shown in any cell whose value is empty. */
+const EMPTY = '--';
+
 /**
  * Contact CRUDL list — drop-in replacement for the rapidpro
  * `contacts/contact_list.html` table. Each row carries a contact
@@ -60,6 +63,16 @@ export class ContactList extends ContentList<Contact> {
     this.bulkActions = [
       { key: 'send', label: 'Send', icon: Icon.compose },
       { key: 'flow', label: 'Start flow', icon: Icon.flow },
+      // Group toggle — a dropdown of the workspace's static (manual)
+      // groups to add/remove the selection to/from, like the message
+      // list's label dropdown.
+      {
+        key: 'label',
+        label: 'Group',
+        icon: Icon.group,
+        labelsEndpoint: '/api/v2/groups.json?manual_only=1',
+        labelsKey: 'groups'
+      },
       { key: 'archive', label: 'Archive', icon: Icon.archive },
       { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
     ];
@@ -117,15 +130,16 @@ export class ContactList extends ContentList<Contact> {
     }
   }
 
-  /** Columns: name, urn, the featured fields, then last seen.
+  /** Columns: name, urn, the featured fields, then last seen and
+   * created on.
    *
-   * Name + URN lead and Last-seen trails, with the workspace's
-   * custom fields filling the middle. Every column sizes to its
-   * content between min/max bounds — none are hard-fixed — so the
+   * Name leads, with URN, the workspace's custom fields, and the
+   * last-seen / created-on dates trailing it. Every column sizes to
+   * its content between min/max bounds — none are hard-fixed — so the
    * table stays compact and overflows into a horizontal scroll only
-   * when the field set is genuinely wide. Name + URN are pinned to
-   * the left edge and Last-seen to the right, so identity and
-   * recency stay anchored while the fields scroll between them.
+   * when the field set is genuinely wide. Only Name is pinned to the
+   * left edge, so identity stays anchored while everything else
+   * scrolls.
    *
    * There is deliberately no group-membership column — contacts
    * routinely belong to dozens of groups, so a groups cell is
@@ -158,8 +172,7 @@ export class ContactList extends ContentList<Contact> {
         key: 'urn',
         label: 'URN',
         minWidth: '120px',
-        maxWidth: '190px',
-        pinned: true
+        maxWidth: '190px'
       },
       ...fieldColumns,
       {
@@ -168,8 +181,15 @@ export class ContactList extends ContentList<Contact> {
         sortable: true,
         minWidth: '96px',
         maxWidth: '150px',
-        align: 'right',
-        pinned: 'right'
+        align: 'right'
+      },
+      {
+        key: 'created_on',
+        label: 'Created on',
+        sortable: true,
+        minWidth: '96px',
+        maxWidth: '150px',
+        align: 'right'
       }
     ];
   }
@@ -189,11 +209,16 @@ export class ContactList extends ContentList<Contact> {
     if (column.key.startsWith(FIELD_PREFIX)) {
       const fieldKey = column.key.substring(FIELD_PREFIX.length);
       const raw = item.fields?.[fieldKey];
-      if (raw == null || raw === '') return '';
-      // Date/time fields render as a relative duration, matching the
-      // Last-seen column — never a raw timestamp string.
+      if (raw == null || raw === '') return EMPTY;
+      // Location values are stored as a full hierarchy path
+      // (e.g. "Nigeria > Yobe > Nguru > Dabule"); show only the leaf.
+      if (this.isLocationField(fieldKey)) {
+        const path = String(raw);
+        return html`<span title=${path}>${this.locationLeaf(path)}</span>`;
+      }
+      // Date/time fields render via the timedate format.
       if (this.isDateField(fieldKey)) {
-        return html`<temba-date value=${raw} display="duration"></temba-date>`;
+        return html`<temba-date value=${raw} display="timedate"></temba-date>`;
       }
       const value = String(raw);
       return html`<span title=${value}>${value}</span>`;
@@ -201,19 +226,26 @@ export class ContactList extends ContentList<Contact> {
     switch (column.key) {
       case 'name':
         return html`<span class="contact-name" title=${item.name || ''}
-          >${item.name || '—'}</span
+          >${item.name || EMPTY}</span
         >`;
       case 'urn':
         return html`<span class="contact-urn"
-          >${this.primaryUrn(item) || ''}</span
+          >${this.primaryUrn(item) || EMPTY}</span
         >`;
       case 'last_seen_on':
         return item.last_seen_on
           ? html`<temba-date
               value=${item.last_seen_on}
-              display="duration"
+              display="timedate"
             ></temba-date>`
-          : '';
+          : EMPTY;
+      case 'created_on':
+        return item.created_on
+          ? html`<temba-date
+              value=${item.created_on}
+              display="timedate"
+            ></temba-date>`
+          : EMPTY;
       default:
         return super.renderCell(item, column);
     }
@@ -229,6 +261,24 @@ export class ContactList extends ContentList<Contact> {
     return type === 'datetime' || type === 'date';
   }
 
+  /** True when a featured field stores a location value (state /
+   * district / ward) — those are serialized as a full hierarchy path
+   * and we render only the leaf. */
+  private isLocationField(fieldKey: string): boolean {
+    const field = (this.featuredFields || []).find(
+      (f: any) => f.key === fieldKey
+    );
+    const type = field?.value_type;
+    return type === 'state' || type === 'district' || type === 'ward';
+  }
+
+  /** The last segment of a location hierarchy path, e.g.
+   * "Nigeria > Yobe > Nguru > Dabule" → "Dabule". */
+  private locationLeaf(path: string): string {
+    const parts = path.split('>');
+    return parts[parts.length - 1].trim();
+  }
+
   private primaryUrn(item: Contact): string {
     const i = item as any;
     if (i.urn) return i.urn;