@nyaruka/temba-components 0.35.0 → 0.35.1

package/src/contacts/ContactPending.ts

@@ -1,6 +1,10 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
-import { ScheduledEvent, ScheduledEventType } from '../interfaces';
+import {
+  CustomEventType,
+  ScheduledEvent,
+  ScheduledEventType,
+} from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 import { Icon } from '../vectoricon';
 
@@ -92,6 +96,12 @@ export class ContactPending extends StoreElement {
           0 0 0px 1px rgba(0, 0, 0, 0.02);
       }
 
+      .event:hover {
+        cursor: pointer;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
+          0 0 0px 2px var(--color-link-primary);
+      }
+
       .time {
         white-space: nowrap;
         background: rgba(0, 0, 0, 0.02);
@@ -128,18 +138,17 @@ export class ContactPending extends StoreElement {
         margin-right: 0.25em;
       }
 
-      .campaign_event .scheduled-by:hover {
-        color: var(--color-link-primary);
-        --icon-color: var(--color-link-primary);
-        cursor: pointer;
-      }
-
       .scheduled-by .name {
         flex-grow: 1;
       }
     `;
   }
 
+  constructor() {
+    super();
+    this.handleEventClicked = this.handleEventClicked.bind(this);
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -153,52 +162,47 @@ export class ContactPending extends StoreElement {
     }
   }
 
-  public renderEvent(event: ScheduledEvent) {
+  public handleEventClicked(event: ScheduledEvent) {
+    this.fireCustomEvent(CustomEventType.Selection, event);
+  }
+
+  public renderEvent(scheduledEvent: ScheduledEvent) {
     return html`
-      <div class="event ${event.type}">
+      <div
+        class="event ${scheduledEvent.type}"
+        @click="${() => this.handleEventClicked(scheduledEvent)}"
+      >
         <div class="type">
           <temba-icon
             size="2"
-            name="${event.message ? Icon.message : Icon.flow}"
+            name="${scheduledEvent.message ? Icon.message : Icon.flow}"
           ></temba-icon>
         </div>
 
         <div class="details">
           <div>
-            ${event.flow
-              ? html`
-                  <div
-                    class="flow linked"
-                    href="/flow/editor/${event.flow.uuid}/"
-                    onclick="goto(event)"
-                  >
-                    ${event.flow.name}
-                  </div>
-                `
+            ${scheduledEvent.flow
+              ? html` Start ${scheduledEvent.flow.name}`
               : null}
-            ${event.message
-              ? html` <div class="message">${event.message}</div> `
+            ${scheduledEvent.message
+              ? html` <div class="message">${scheduledEvent.message}</div> `
               : null}
           </div>
 
           <div class="scheduled-by">
-            ${event.campaign
-              ? html`<div
-                  style="display:flex"
-                  href="/campaign/read/${event.campaign.uuid}/"
-                  onclick="goto(event, this)"
-                >
+            ${scheduledEvent.campaign
+              ? html`<div style="display:flex">
                   <temba-icon name="${Icon.campaign}"></temba-icon>
-                  <div class="name">${event.campaign.name}</div>
+                  <div class="name">${scheduledEvent.campaign.name}</div>
                 </div>`
               : html`
-                  ${event.type === ScheduledEventType.ScheduledTrigger
+                  ${scheduledEvent.type === ScheduledEventType.ScheduledTrigger
                     ? html`<temba-icon
-                        name="${ICONS[event.type]}"
+                        name="${ICONS[scheduledEvent.type]}"
                       ></temba-icon>`
                     : null}
                   <div class="name">
-                    ${this.REPEAT_PERIOD[event.repeat_period]}
+                    ${this.REPEAT_PERIOD[scheduledEvent.repeat_period]}
                   </div>
                 `}
           </div>
@@ -207,10 +211,10 @@ export class ContactPending extends StoreElement {
         <div class="time">
           <div class="duration">
             <temba-tip
-              text=${this.store.formatDate(event.scheduled)}
+              text=${this.store.formatDate(scheduledEvent.scheduled)}
               position="left"
             >
-              ${this.store.getShortDurationFromIso(event.scheduled)}
+              ${this.store.getShortDurationFromIso(scheduledEvent.scheduled)}
             </temba-tip>
           </div>
         </div>

package/src/contacts/events.ts

@@ -239,8 +239,8 @@ export const getEventStyles = () => {
     .tickets .note-summary {
       display: flex;
       flex-direction: row;
-      line-height: 0.5;
-      font-size: 80%;
+      font-size: 85%;
+      margin-top: -0.5em;
       color: rgba(0, 0, 0, 0.6);
       padding: 8px 3px;
     }
@@ -310,12 +310,11 @@ export const getEventStyles = () => {
 
     .msg-summary {
       display: flex;
-      line-height: 0.5;
-
-      font-size: 80%;
+      font-size: 85%;
       color: rgba(0, 0, 0, 0.6);
       padding: 6px 3px;
       margin-bottom: 0.5em;
+      margin-top: -0.5em;
     }
 
     .msg-summary temba-icon.log {
@@ -776,7 +775,11 @@ export const renderMsgEvent = (
       <div class="separator">•</div>`);
   }
   summary.push(
-    html`<div class="time">${timeSince(new Date(event.created_on))}</div>`
+    html`<temba-date
+      class="time"
+      value="${event.created_on}"
+      display="duration"
+    ></temba-date>`
   );
 
   return html`<div style="display:flex;align-items:flex-start">
@@ -938,7 +941,11 @@ export const renderNoteCreated = (
       <div class="description">${event.note}</div>
       <div class="note-summary">
         <div style="flex-grow:1"></div>
-        <div class="time">${timeSince(new Date(event.created_on))}</div>
+        <temba-date
+          class="time"
+          value="${event.created_on}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
     <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
@@ -986,14 +993,17 @@ export const renderTicketAction = (
         ${getDisplayName(event.created_by)} ${action} this ticket
       </div>
       <div class="subtext" style="justify-content:center">
-        ${timeSince(reopened, { hideRecentText: true, suffix: ' ago' })}
+        <temba-date
+          class="time"
+          value="${reopened}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
   `;
 };
 
 export const renderTicketAssigned = (event: TicketEvent): TemplateResult => {
-  const created = new Date(event.created_on);
   return html`
     <div class="assigned active">
       <div style="text-align:center">
@@ -1005,7 +1015,11 @@ export const renderTicketAssigned = (event: TicketEvent): TemplateResult => {
           : html`${getDisplayName(event.created_by)} unassigned this ticket`}
       </div>
       <div class="subtext" style="justify-content:center">
-        ${timeSince(created, { hideRecentText: true, suffix: ' ago' })}
+        <temba-date
+          class="time"
+          value="${event.created_on}"
+          display="duration"
+        ></temba-date>
       </div>
     </div>
   `;

package/src/date/TembaDate.ts

@@ -7,7 +7,11 @@ import { DateTime } from 'luxon';
 export const Display = {
   date: DateTime.DATE_SHORT,
   datetime: DateTime.DATETIME_SHORT,
+  time: DateTime.TIME_SIMPLE,
+  timedate: 'timedate',
   duration: 'duration',
+  relative: 'relative',
+  day: 'LLL d',
 };
 
 export class TembaDate extends RapidElement {
@@ -48,19 +52,44 @@ export class TembaDate extends RapidElement {
   }
 
   public render(): TemplateResult {
-    if (this.datetime) {
-      if (this.display === Display.duration) {
-        return html`<div class="date">
-          ${this.store.getShortDuration(this.datetime)}
-        </div>`;
+    if (this.datetime && this.store) {
+      this.datetime.setLocale(this.store.getLocale());
+
+      let formatted = '';
+      if (this.display === Display.timedate) {
+        const hours = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60 / 60
+        );
+        if (hours < 24) {
+          formatted = this.datetime.toLocaleString(Display.time);
+        } else if (hours < 24 * 365) {
+          formatted = this.datetime.toFormat(Display.day);
+        } else {
+          formatted = this.datetime.toLocaleString(Display.date);
+        }
+      } else if (this.display === Display.relative) {
+        const minutes = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60
+        );
+        if (minutes < 1) {
+          return html`<div class="date">just now</div>`;
+        }
+
+        formatted = this.store.getShortDuration(this.datetime);
+      } else if (this.display === Display.duration) {
+        const minutes = Math.abs(
+          this.datetime.diffNow().milliseconds / 1000 / 60
+        );
+        if (minutes < 1) {
+          return html`<div class="date">just now</div>`;
+        }
+        formatted = this.store.getShortDuration(this.datetime);
+      } else if (this.display === Display.day) {
+        formatted = this.datetime.toLocaleString(Display.day);
       } else {
-        return html`
-          <div class="date">
-            ${this.datetime.toLocaleString(Display[this.display])}
-          </div>
-        `;
+        formatted = this.datetime.toLocaleString(Display[this.display]);
       }
+      return html`<div class="date">${formatted}</div>`;
     }
-    return null;
   }
 }

package/src/list/RunList.ts

@@ -141,7 +141,7 @@ export class RunList extends TembaList {
           </div>
 
           <div style="flex-shrink:1">
-            ${this.store.getShortDurationFromIso(run.modified_on)}
+            <temba-date value="${run.modified_on}" display="duration" />
           </div>
           ${this.getIcon(run)}
         </div>
@@ -227,7 +227,6 @@ export class RunList extends TembaList {
       return null;
     }
 
-    const exitType = this.selectedRun.exit_type;
     const resultKeys = Object.keys(this.selectedRun.values);
 
     return html` <div
@@ -251,35 +250,25 @@ export class RunList extends TembaList {
             >
               ${this.selectedRun.exit_type
                 ? html`
-                    ${this.getIcon(this.selectedRun)}
-                    <div style="margin-left:0.5em;flex-grow:1">
-                      ${capitalize(this.selectedRun.exit_type)}
-                      ${exitType == 'completed'
-                        ? html` in
-                          ${this.store.getShortDurationFromIso(
-                            this.selectedRun.created_on,
-                            this.selectedRun.exited_on,
-                            true
-                          )}`
-                        : null}
-                      ${exitType == 'interrupted' || exitType == 'expired'
-                        ? html` after
-                          ${this.store.getShortDurationFromIso(
-                            this.selectedRun.created_on,
-                            this.selectedRun.exited_on,
-                            true
-                          )}`
-                        : null}
+                    <div style="margin-left:2em;flex-grow:1;display:flex">
+                      ${this.getIcon(this.selectedRun)}
+                      <div style="margin-left:0.5em">
+                        ${capitalize(this.selectedRun.exit_type)}&nbsp;
+                      </div>
+                      <temba-date
+                        value="${this.selectedRun.exited_on}"
+                        compare="${this.selectedRun.created_on}"
+                        display="duration"
+                      />
                     </div>
                   `
                 : html`${this.getIcon(this.selectedRun)}
-                    <div style="margin-left:0.5em;flex-grow:1">
-                      Active for
-                      ${this.store.getShortDurationFromIso(
-                        this.selectedRun.created_on,
-                        null,
-                        true
-                      )}
+                    <div style="margin-left:1.5em;flex-grow:1;display:flex">
+                      <div>Started&nbsp;</div>
+                      <temba-date
+                        value="${this.selectedRun.created_on}"
+                        display="duration"
+                      />
                     </div>`}
             </div>
           </div>

package/src/store/Store.ts

@@ -74,6 +74,10 @@ export class Store extends RapidElement {
 
   private cache: any;
 
+  public getLocale() {
+    return this.locale[0];
+  }
+
   public reset() {
     this.cache = Lru(this.max, this.ttl);
 
@@ -192,41 +196,17 @@ export class Store extends RapidElement {
     });
   }
 
-  public getShortDuration(
-    scheduled: DateTime,
-    compareDate: DateTime = null,
-    showSeconds = false
-  ) {
+  public getShortDuration(scheduled: DateTime, compareDate: DateTime = null) {
     const now = compareDate || DateTime.now();
-    const duration = scheduled.diff(now).valueOf();
-
-    if (showSeconds) {
-      return this.humanizer.humanize(duration, {
-        language: this.getLanguageCode(),
-        largest: 1,
-        round: true,
-      });
-    }
-
-    if (Math.abs(duration) < 60000) {
-      return 'just now';
-    }
-
-    return this.humanizer.humanize(duration, {
-      language: this.getLanguageCode(),
-      largest: 1,
-      round: false,
-    });
+    return scheduled
+      .setLocale(this.locale[0])
+      .toRelative({ base: now, style: 'long' });
   }
 
-  public getShortDurationFromIso(
-    isoDateA: string,
-    isoDateB: string = null,
-    showSeconds = false
-  ) {
+  public getShortDurationFromIso(isoDateA: string, isoDateB: string = null) {
     const scheduled = DateTime.fromISO(isoDateA);
     const now = isoDateB ? DateTime.fromISO(isoDateB) : DateTime.now();
-    return this.getShortDuration(scheduled, now, showSeconds);
+    return this.getShortDuration(scheduled, now);
   }
 
   public setKeyedAssets(name: string, values: string[]): void {
@@ -278,13 +258,9 @@ export class Store extends RapidElement {
   }
 
   public formatDate(dateString: string) {
-    return new Date(dateString).toLocaleString(this.locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    });
+    return DateTime.fromISO(dateString)
+      .setLocale(this.getLocale())
+      .toLocaleString(DateTime.DATETIME_SHORT);
   }
 
   public postUrl(

package/src/vectoricon/index.ts

@@ -1,4 +1,5 @@
 export enum Icon {
+  analytics = 'bar-chart-01',
   account = 'user-01',
   active = 'play',
   add_note = 'file-02',
@@ -55,9 +56,11 @@ export enum Icon {
   org_new = 'stars-02',
   org_suspended = 'slash-circle-01',
   org_verified = 'check-verified-02',
+  overview = 'pie-chart-01',
   featured = 'star-01',
   resthooks = 'share-07',
   restore = 'play',
+  runs = 'rows-03',
   search = 'search-refraction',
   select_open = 'chevron-down',
   select_clear = 'x',

package/test/temba-contact-history.test.ts

@@ -1,12 +1,12 @@
 import { fixture, assert, expect } from '@open-wc/testing';
-import * as sinon from 'sinon';
 import { ContactHistory } from '../src/contacts/ContactHistory';
-import { stubbable } from '../src/utils';
 import {
   assertScreenshot,
   getClip,
   getHTML,
+  loadStore,
   mockGET,
+  mockNow,
 } from '../test/utils.test';
 import './utils.test';
 
@@ -41,12 +41,10 @@ const getHistoryClip = (ele: ContactHistory) => {
 };
 
 // stub our current date for consistent screenshots
-sinon.stub(stubbable, 'getCurrentDate').callsFake(() => {
-  return new Date('2021-03-31T00:00:00.000-00:00');
-});
+mockNow('2021-03-31T00:31:00.000-00:00');
 
 describe('temba-contact-history', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     mockGET(
       /\/contact\/history\/contact-dave-active\/.*/,
       '/test-assets/contacts/history.json'
@@ -56,6 +54,8 @@ describe('temba-contact-history', () => {
       /\/api\/v2\/tickets\.json\?contact=contact-dave-active/,
       '/test-assets/api/tickets.json'
     );
+
+    await loadStore();
   });
 
   it('can be created', async () => {
@@ -76,7 +76,7 @@ describe('temba-contact-history', () => {
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
 
-    expect(top).to.equal(520);
+    expect(top).to.equal(549);
 
     // make sure we actually scrolled to there
     expect(events.scrollTop).to.equal(top);

package/test/temba-date.test.ts

@@ -1,12 +1,11 @@
-import * as sinon from 'sinon';
 import { TembaDate } from '../src/date/TembaDate';
 import {
   assertScreenshot,
   getClip,
   getComponent,
   loadStore,
+  mockNow,
 } from './utils.test';
-import { DateTime } from 'luxon';
 import { expect } from '@open-wc/testing';
 
 const TAG = 'temba-date';
@@ -16,11 +15,7 @@ export const getDate = async (attrs: any = {}) => {
   return (await getComponent(TAG, attrs)) as TembaDate;
 };
 
-// mock the current time
-const now = DateTime.fromISO('2022-12-02T21:00:00.000000-07:00');
-sinon.replace(DateTime, 'now', () => {
-  return now;
-});
+mockNow('2022-12-02T21:00:00.000000-07:00');
 
 describe('temba-date', () => {
   beforeEach(() => {
@@ -47,7 +42,7 @@ describe('temba-date', () => {
     ).innerText;
 
     await assertScreenshot('date/duration', getClip(date));
-    expect(dateString).to.equal('44 years');
+    expect(dateString).to.equal('44 years ago');
   });
 
   it('renders datetime', async () => {

package/test/utils.test.ts

@@ -1,5 +1,6 @@
 import '../temba-modules';
-
+import { DateTime } from 'luxon';
+import * as sinon from 'sinon';
 interface Clip {
   x: number;
   y: number;
@@ -228,3 +229,11 @@ export const loadStore = async () => {
 
   return store;
 };
+
+export const mockNow = (isodate: string) => {
+  const now = DateTime.fromISO(isodate);
+  // mock the current time
+  sinon.replace(DateTime, 'now', () => {
+    return now;
+  });
+};