@nyaruka/temba-components 0.168.1 → 0.170.0

package/src/list/TicketList.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
 import { Icon } from '../Icons';
@@ -9,15 +10,17 @@ export class TicketList extends TembaList {
   agent = '';
 
   public getRefreshEndpoint() {
-    if (this.items.length > 0) {
-      const lastActivity = this.items[0].ticket.last_activity_on;
+    // open tickets sort above closed ones, so the newest activity can be
+    // anywhere in the list, not just the top. Skip anything unparseable so a
+    // single bad timestamp can't poison the cursor with NaN
+    const lastActivity = this.items.reduce((newest, item) => {
+      const activity = new Date(item.ticket.last_activity_on).getTime();
+      return isNaN(activity) ? newest : Math.max(newest, activity);
+    }, 0);
+
+    if (lastActivity > 0) {
       const separator = this.endpoint.includes('?') ? '&' : '?';
-      return (
-        this.endpoint +
-        separator +
-        'after=' +
-        new Date(lastActivity).getTime() * 1000
-      );
+      return this.endpoint + separator + 'after=' + lastActivity * 1000;
     }
     return this.endpoint;
   }
@@ -35,10 +38,79 @@ export class TicketList extends TembaList {
     super();
 
     this.valueKey = 'ticket.uuid';
-    this.renderOption = (contact: Contact): TemplateResult => {
+    // the refresh feed is served oldest first - the inherited reverseRefresh
+    // keeps mostRecentItem meaning the newest fetched item (compareItems
+    // re-sorts the merged list immediately anyway)
+
+    this.compareItems = (a: Contact, b: Contact): number => {
+      const aClosed = !!a.ticket.closed_on;
+      const bClosed = !!b.ticket.closed_on;
+      if (aClosed !== bClosed) {
+        return aClosed ? 1 : -1;
+      }
+      return (
+        new Date(b.ticket.last_activity_on).getTime() -
+        new Date(a.ticket.last_activity_on).getTime()
+      );
+    };
+    // a quiet label marks where the list crosses from open into closed
+    // tickets - the rows themselves then only need gentle muting
+    this.renderDivider = (
+      prev: Contact,
+      contact: Contact
+    ): TemplateResult | null => {
+      if (!contact.ticket.closed_on || (prev && prev.ticket.closed_on)) {
+        return null;
+      }
+      const closed = msg('Closed');
+      return html`
+        <div
+          role="separator"
+          aria-label=${closed}
+          style="display:flex; align-items:center; gap:0.6em; padding:0.9em var(--pad) 0.2em var(--pad);"
+        >
+          <div
+            style="font-size:0.7em; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-4);"
+          >
+            ${closed}
+          </div>
+          <div
+            style="flex-grow:1; height:1px; background:var(--color-widget-border);"
+          ></div>
+        </div>
+      `;
+    };
+    this.renderOption = (
+      contact: Contact,
+      selected: boolean
+    ): TemplateResult => {
+      // closed tickets are settled history - a compact single line that
+      // recedes behind the open work above it
+      if (contact.ticket.closed_on) {
+        return html`
+          <div
+            style="display:flex; align-items:baseline; margin-top:0.1em; margin-bottom:0.1em; ${selected
+              ? ''
+              : 'color:var(--text-3);'}"
+          >
+            <div
+              style="flex:1; min-width:0; font-weight:400; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
+            >
+              ${contact.name}
+            </div>
+            <div style="font-size:0.8em; margin-left:0.75em;">
+              <temba-date
+                value=${contact.ticket.closed_on}
+                display="duration"
+              ></temba-date>
+            </div>
+          </div>
+        `;
+      }
+
       return html`
         <div
-          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
+          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em;"
         >
           <div
             style="display:flex; align-items: flex-start;border:0px solid red;"
@@ -49,10 +121,8 @@ export class TicketList extends TembaList {
               >
                 ${contact.name}
               </div>
-              ${contact.ticket.closed_on
-                ? null
-                : contact.last_msg
-                  ? html`
+              ${contact.last_msg
+                ? html`
                     <div
                       style="font-size: 0.9em; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
                     >
@@ -81,13 +151,13 @@ export class TicketList extends TembaList {
                       }
                     </div></div>
                   `
-                  : null}
+                : null}
             </div>
             <div
               style="margin-right: -5px; margin-top: 0px;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
             >
               <div>
-                ${!contact.ticket.closed_on && contact.ticket.assignee
+                ${contact.ticket.assignee
                   ? html`<temba-user
                       name=${contact.ticket.assignee.name}
                       email=${contact.ticket.assignee.email}
@@ -101,8 +171,7 @@ export class TicketList extends TembaList {
 
           <div style="font-size:0.8em;text-align:right;border:0px solid red;">
             <temba-date
-              value=${contact.ticket.closed_on ||
-              contact.ticket.last_activity_on}
+              value=${contact.ticket.last_activity_on}
               display="duration"
             ></temba-date>
           </div>

package/src/live/ContactChat.ts

@@ -74,6 +74,12 @@ interface SearchResult {
 }
 
 export class ContactChat extends ContactStoreElement {
+  // we run our own firehose subscription below (history rendering, typing,
+  // ephemeral state) with its own contact/ticket channel choreography, so we
+  // opt out of the central watcher entirely - our data loads and syncs
+  // through the store as before
+  protected watchTypes: string[] = null;
+
   public static get styles() {
     return css`
       ${designTokens}
@@ -877,9 +883,15 @@ export class ContactChat extends ContactStoreElement {
       return null;
     }
 
+    // unparseable values and zero-value times (e.g. go's zero time for a
+    // contact that has never been seen) mean there's no last seen to show
+    const lastSeen = DateTime.fromISO(lastSeenOn);
+    if (!lastSeen.isValid || lastSeen.year <= 1) {
+      return null;
+    }
+
     // recent activity speaks for itself in the chat - only surface last
     // seen once the contact has been quiet for at least an hour
-    const lastSeen = DateTime.fromISO(lastSeenOn);
     const minutes = DateTime.now().diff(lastSeen, 'minutes').minutes;
     if (minutes < 60) {
       return null;

package/src/live/ContactDetails.ts

@@ -1,13 +1,14 @@
 import { css, html, PropertyValues, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Icon } from '../Icons';
-import { CustomEventType, Group, URN } from '../interfaces';
+import { Contact, CustomEventType, Group, URN } from '../interfaces';
 import { getLanguageName } from '../languages';
 import { capitalize, WebResponse } from '../utils';
 import { Select } from '../form/select/Select';
 import { TextInput } from '../form/TextInput';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement, getDestinationURN } from './ContactStoreElement';
+import { Events } from '../events/eventRenderers';
 
 interface Option {
   name: string;
@@ -22,6 +23,16 @@ const STATUS_OPTIONS: Option[] = [
 ];
 
 export class ContactDetails extends ContactStoreElement {
+  // the contact state we render - live changes to any of these reach us
+  // through the central watcher
+  protected watchTypes = [
+    Events.CONTACT_NAME_CHANGED,
+    Events.CONTACT_URNS_CHANGED,
+    Events.CONTACT_LANGUAGE_CHANGED,
+    Events.CONTACT_STATUS_CHANGED,
+    Events.CONTACT_GROUPS_CHANGED
+  ];
+
   @property({ type: Boolean })
   editable = false;
 
@@ -430,6 +441,26 @@ export class ContactDetails extends ContactStoreElement {
     }
   }
 
+  /**
+   * A watcher delivery carries server state from before the writes we still
+   * have in flight, so keep our own value for anything mid-save - the save
+   * itself applies the server's version when it lands.
+   */
+  protected mergeWatchedContact(contact: Contact, previous: Contact): Contact {
+    if (!previous || this.fieldSaveGenerations.size === 0) {
+      return contact;
+    }
+
+    const merged = { ...contact };
+    this.fieldSaveGenerations.forEach((generation, field) => {
+      if (field in previous) {
+        const value = previous[field];
+        merged[field] = Array.isArray(value) ? [...value] : value;
+      }
+    });
+    return merged;
+  }
+
   public willUpdate(changed: PropertyValues): void {
     if (changed.has('contact') || changed.has('endpoint')) {
       const url = this.contact ? `${this.endpoint}${this.contact}` : null;

package/src/live/ContactFields.ts

@@ -10,11 +10,16 @@ import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Checkbox } from '../form/Checkbox';
-import { ContactField, CustomEventType } from '../interfaces';
+import { Contact, ContactField, CustomEventType } from '../interfaces';
+import { Events } from '../events/eventRenderers';
 
 const MIN_FOR_FILTER = 10;
 
 export class ContactFields extends ContactStoreElement {
+  // we render field values, so field changes are the only events we need -
+  // the central watcher hands us a refetched contact when they happen
+  protected watchTypes = [Events.CONTACT_FIELD_CHANGED];
+
   static get styles() {
     return css`
       .field {
@@ -154,6 +159,34 @@ export class ContactFields extends ContactStoreElement {
     );
   }
 
+  /**
+   * A watcher delivery carries server state from before an edit the user is
+   * still making, so keep the value we already have for any field whose
+   * editor is dirty - rebinding it would drop what they typed.
+   */
+  protected mergeWatchedContact(contact: Contact, previous: Contact): Contact {
+    if (!previous || !previous.fields) {
+      return contact;
+    }
+
+    const editors = Array.from(
+      this.shadowRoot?.querySelectorAll('temba-contact-field') || []
+    ) as ContactFieldEditor[];
+    const editing = editors.filter(
+      (editor) => editor.dirty && editor.key in previous.fields
+    );
+
+    if (editing.length === 0) {
+      return contact;
+    }
+
+    const fields = { ...contact.fields };
+    editing.forEach((editor) => {
+      fields[editor.key] = previous.fields[editor.key];
+    });
+    return { ...contact, fields };
+  }
+
   public willUpdate(changed: PropertyValues): void {
     super.willUpdate(changed);
     if (

package/src/live/ContactNotepad.ts

@@ -6,6 +6,10 @@ import { ContactNote, CustomEventType } from '../interfaces';
 import { designTokens } from '../styles/designTokens';
 
 export class ContactNotepad extends ContactStoreElement {
+  // notes have no contact events - an empty interest list still receives
+  // eventless deliveries (initial values, refetches and page-local edits)
+  protected watchTypes: string[] = [];
+
   @property({ type: Object, attribute: false })
   note: ContactNote;
 
@@ -116,6 +120,10 @@ export class ContactNotepad extends ContactStoreElement {
   private resizer: ResizeObserver;
   private lastWidth = 0;
 
+  // the contact our current note was taken off - an edit only belongs to the
+  // contact it was typed against, so a switch to another one re-derives
+  private noteContact: string = null;
+
   public connectedCallback(): void {
     super.connectedCallback();
     // text rewraps when our width changes (browser resize, layout mode
@@ -163,26 +171,53 @@ export class ContactNotepad extends ContactStoreElement {
       '.notepad'
     ) as HTMLInputElement;
     const note = notepad.value;
+    // our own write is the one delivery the dirty guard below holds out for,
+    // so take the note from it once it lands
     this.postChanges({ note }).then(() => {
-      this.markClean();
+      this.syncNote();
     });
   }
 
+  // takes the newest note off the contact, copied so editing it never writes
+  // into the contact data we share with everything else
+  private syncNote() {
+    this.noteContact = this.data?.uuid || null;
+    this.note =
+      this.data?.notes?.length > 0
+        ? { ...this.data.notes[this.data.notes.length - 1] }
+        : null;
+    this.fireCustomEvent(CustomEventType.DetailsChanged, {
+      count: this.note && this.note.text.length > 0 ? 1 : 0,
+      dirty: false
+    });
+    this.markClean();
+
+    // lit dirty checks the .value binding against the last string it wrote,
+    // not what's actually in the textarea, so re-deriving an unchanged note
+    // wouldn't take the user's typing back off - write the note through
+    const notepad = this.shadowRoot?.querySelector(
+      '.notepad'
+    ) as HTMLTextAreaElement;
+    if (notepad) {
+      notepad.value = this.note ? this.note.text : '';
+    }
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changes);
 
-    if (changes.has('data')) {
-      this.note =
-        this.data?.notes?.length > 0
-          ? { ...this.data.notes[this.data.notes.length - 1] }
-          : null;
-      this.fireCustomEvent(CustomEventType.DetailsChanged, {
-        count: this.note && this.note.text.length > 0 ? 1 : 0,
-        dirty: false
-      });
-      this.markClean();
+    // the central watcher re-delivers the contact on any activity, not just
+    // note changes, so a delivery mid-edit would otherwise drop what the user
+    // has typed - hold the note until the edit is saved or abandoned. Only
+    // for the contact it was typed against though: on a switch the edit goes
+    // with the contact we left, so the new one's note lands right away
+    if (
+      changes.has('data') &&
+      (!this.dirty || (this.data?.uuid || null) !== this.noteContact)
+    ) {
+      this.syncNote();
     }
 
     if (changes.has('note') || changes.has('data')) {

package/src/live/ContactStoreElement.ts

@@ -1,7 +1,14 @@
 import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, Group, URN } from '../interfaces';
+import { Contact, CustomEventType, Group, URN } from '../interfaces';
 import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
+import {
+  CONTACT_STATE_TYPES,
+  refreshContact,
+  updateContact,
+  watchContact
+} from './ContactWatch';
+import { RealtimeSubscription } from './Realtime';
 
 /**
  * Returns the URN that will be used to message the given contact — URNs are
@@ -18,6 +25,15 @@ export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: Object, attribute: false })
   data: Contact;
 
+  // the contact events this component registers interest in with the central
+  // watcher - subclasses narrow this to what they actually render. An empty
+  // list still receives eventless deliveries (initial values and refetches);
+  // null opts out of watching entirely
+  protected watchTypes: string[] = CONTACT_STATE_TYPES;
+
+  private watch: RealtimeSubscription = null;
+  private watchedContact: string = null;
+
   // Resolve each URN against a channel while retaining the user's priority
   // order. Consumers can select the first channel-backed URN for messaging.
   @property({ type: String })
@@ -70,6 +86,35 @@ export class ContactStoreElement extends EndpointMonitorElement {
     // make sure contact data is properly prepped
     this.data = this.prepareData([contact]);
     this.store.updateCache(`${this.endpoint}${contactId}`, this.data);
+
+    // sync every watcher on the page with the change immediately, without
+    // waiting for it to echo back over the socket
+    if (this.data) {
+      updateContact(this.data.uuid, this.data);
+    }
+  }
+
+  /**
+   * Refetches the contact. When watched we also go through the central
+   * watcher so every watcher on the page gets the fresh contact, not just us,
+   * while the store fetch keeps the cache fresh for the components that read
+   * it without watching. Two fetches for what is a rare manual operation.
+   */
+  public refresh(): void {
+    if (this.watchedContact) {
+      refreshContact(this.watchedContact);
+    }
+    super.refresh();
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.syncWatch();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.syncWatch();
   }
 
   public willUpdate(changed: PropertyValues): void {
@@ -81,7 +126,64 @@ export class ContactStoreElement extends EndpointMonitorElement {
       } else {
         this.url = null;
       }
+      this.syncWatch();
     }
     super.willUpdate(changed);
   }
+
+  // keeps our registration with the central watcher in sync with the
+  // contact we're pointed at
+  private syncWatch() {
+    const target =
+      (this.isConnected && this.watchTypes && this.contact) || null;
+    if (target === this.watchedContact) {
+      return;
+    }
+
+    if (this.watch) {
+      this.watch.unsubscribe();
+      this.watch = null;
+    }
+    this.watchedContact = target;
+
+    if (target) {
+      this.watch = watchContact(target, this.watchTypes, (event, contact) =>
+        this.handleWatchedContact(event, contact)
+      );
+    }
+  }
+
+  /**
+   * A delivery from the central watcher - an event we registered interest in
+   * or an eventless delivery carrying initial or refetched values. Either
+   * way the contact is current, so it simply becomes our data.
+   */
+  protected handleWatchedContact(event: any, contact: Contact) {
+    if (contact && contact.uuid === this.watchedContact) {
+      const previous = this.data;
+      // fresh identity so change detection sees every delivery, copying the
+      // parts prepareData mutates so we never write into the registry's
+      // snapshot
+      const copy = {
+        ...contact,
+        groups: (contact.groups || []).map((group) => ({ ...group })),
+        fields: { ...contact.fields }
+      };
+      this.data = this.prepareData(this.mergeWatchedContact(copy, previous));
+      this.fireCustomEvent(CustomEventType.Refreshed, {
+        data: this.data,
+        previous
+      });
+    }
+  }
+
+  /**
+   * Lets subclasses keep values they have a write in flight for. A delivery
+   * carries server state that predates our own unsaved edits, so anything
+   * mid-save would otherwise flip back to its old value until the write
+   * lands. Returns the contact to become our data.
+   */
+  protected mergeWatchedContact(contact: Contact, _previous: Contact): Contact {
+    return contact;
+  }
 }