@nyaruka/temba-components 0.169.0 → 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

@@ -883,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/locales/es.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/fr.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/pt.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/simulator/Simulator.ts

@@ -630,6 +630,7 @@ export class Simulator extends RapidElement {
       }
       .message-input input {
         flex: 1;
+        min-width: 0;
         border: 1px solid #c6c6c857;
         border-radius: 20px;
         padding: 8px 15px;

package/xliff/es.xlf

@@ -42,6 +42,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -41,6 +41,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -41,6 +41,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>