@nyaruka/temba-components 0.166.0 → 0.168.0

package/src/list/ContactList.ts

@@ -49,6 +49,12 @@ export class ContactList extends ContentList<Contact> {
   @property({ type: String, attribute: 'fields-endpoint' })
   fieldsEndpoint = '/api/v2/fields.json';
 
+  /** Anonymous workspaces mask URN values, so instead of the URN
+   * column the list shows each contact's ref (served as its own
+   * anon-only key by the endpoint). */
+  @property({ type: Boolean })
+  anon = false;
+
   @state()
   private featuredFields: any[] = [];
 
@@ -91,6 +97,16 @@ export class ContactList extends ContentList<Contact> {
     super.disconnectedCallback();
   }
 
+  protected willUpdate(changes: PropertyValues): void {
+    super.willUpdate(changes);
+    // Rebuilding here (rather than in updated()) means a mounted
+    // anon attribute is reflected in the first paint instead of
+    // flashing the URN header for a frame.
+    if (changes.has('anon')) {
+      this.columns = this.buildColumns();
+    }
+  }
+
   protected updated(changes: PropertyValues): void {
     super.updated(changes);
     if (changes.has('fieldsEndpoint') && this.fieldsEndpoint) {
@@ -134,27 +150,28 @@ export class ContactList extends ContentList<Contact> {
    * created on.
    *
    * 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. Only Name is pinned to the
-   * left edge, so identity stays anchored while everything else
-   * scrolls.
+   * last-seen / created-on dates trailing it. Columns through Last Seen
+   * size to their content between min/max bounds and can be resized;
+   * Created On grows to absorb any remaining browser width. 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
    * noise rather than signal in a list view. */
   private buildColumns(): ContentListColumn[] {
-    // Custom-field columns are all left-aligned for simplicity, and
-    // set no minWidth — their natural floor is the column header
-    // label, which the table's auto layout already honours; maxWidth
-    // just caps a runaway value.
+    // Custom-field columns are all left-aligned for simplicity. Their
+    // resize floor is deliberately half the generic 80px floor so users
+    // can pack more workspace-specific fields into view; maxWidth caps a
+    // runaway value.
     const fieldColumns: ContentListColumn[] = (this.featuredFields || []).map(
       (f: any) => ({
         key: FIELD_PREFIX + f.key,
         label: f.name || f.label || f.key,
         sortable: true,
-        maxWidth: '200px'
+        resizeMinWidth: '40px',
+        maxWidth: '200px',
+        resizable: true
       })
     );
     // Name + URN are the pinned identity columns and are not
@@ -166,14 +183,24 @@ export class ContactList extends ContentList<Contact> {
         label: 'Name',
         minWidth: '150px',
         maxWidth: '260px',
-        pinned: true
-      },
-      {
-        key: 'urn',
-        label: 'URN',
-        minWidth: '120px',
-        maxWidth: '190px'
+        pinned: true,
+        resizable: true
       },
+      this.anon
+        ? {
+            key: 'ref',
+            label: 'Ref',
+            minWidth: '120px',
+            maxWidth: '190px',
+            resizable: true
+          }
+        : {
+            key: 'urn',
+            label: 'URN',
+            minWidth: '120px',
+            maxWidth: '190px',
+            resizable: true
+          },
       ...fieldColumns,
       {
         key: 'last_seen_on',
@@ -181,15 +208,16 @@ export class ContactList extends ContentList<Contact> {
         sortable: true,
         minWidth: '96px',
         maxWidth: '150px',
-        align: 'right'
+        align: 'right',
+        resizable: true
       },
       {
         key: 'created_on',
         label: 'Created on',
         sortable: true,
         minWidth: '96px',
-        maxWidth: '150px',
-        align: 'right'
+        align: 'right',
+        grow: true
       }
     ];
   }
@@ -232,6 +260,10 @@ export class ContactList extends ContentList<Contact> {
         return html`<span class="contact-urn"
           >${this.primaryUrn(item) || EMPTY}</span
         >`;
+      case 'ref':
+        return html`<span class="contact-urn"
+          >${(item as any).ref || EMPTY}</span
+        >`;
       case 'last_seen_on':
         return item.last_seen_on
           ? html`<temba-date
@@ -281,7 +313,11 @@ export class ContactList extends ContentList<Contact> {
 
   private primaryUrn(item: Contact): string {
     const i = item as any;
-    if (i.urn) return i.urn;
+    if (i.urn) {
+      // served as {scheme, display} by the list endpoint, but tolerate
+      // a plain string (e.g. the public API's urn field)
+      return typeof i.urn === 'string' ? i.urn : i.urn.display || '';
+    }
     if (Array.isArray(i.urns) && i.urns.length > 0) {
       const u = i.urns[0];
       return typeof u === 'string'