@nyaruka/temba-components 0.17.0 → 0.18.0

package/src/contacts/ContactHistory.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import { css, property } from 'lit-element';
 import { html, TemplateResult } from 'lit-html';
-import { CustomEventType, Ticket } from '../interfaces';
+import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Asset, getAssets, getClasses, postJSON, throttle } from '../utils';
-import ResizeObserver from 'resize-observer-polyfill';
+
 import {
   AirtimeTransferredEvent,
   CampaignFiredEvent,
@@ -56,9 +56,39 @@ import {
   SCROLL_THRESHOLD,
 } from './helpers';
 
+// when images load, make sure we are on the bottom of the scroll window if necessary
+export const loadHandler = function (event) {
+  const target = event.target as HTMLElement;
+  const events = this.host.getEventsPane();
+  if (target.tagName == 'IMG') {
+    if (!this.host.showMessageAlert) {
+      if (
+        events.scrollTop > target.offsetTop - 1000 &&
+        target.offsetTop > events.scrollHeight - 500
+      ) {
+        this.host.scrollToBottom();
+      }
+    }
+  }
+};
+
 export class ContactHistory extends RapidElement {
   public httpComplete: Promise<void | ContactHistoryPage>;
 
+  public constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.addEventListener('load', loadHandler, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.shadowRoot.removeEventListener('load', loadHandler, true);
+  }
+
   private getStickyId = (event: ContactEvent) => {
     if (event.type === Events.TICKET_OPENED) {
       const ticket = this.getTicketForEvent(event as TicketEvent);
@@ -95,6 +125,7 @@ export class ContactHistory extends RapidElement {
         flex-grow: 1;
         border-top-left-radius: var(--curvature);
         padding-top: 1em;
+        background: #fff;
       }
 
       temba-loading {
@@ -135,15 +166,27 @@ export class ContactHistory extends RapidElement {
         pointer: cursor;
       }
 
+      .scroll-title {
+        display: flex;
+        flex-direction: column;
+        z-index: 2;
+        border-top-left-radius: var(--curvature);
+        overflow: hidden;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        background: rgb(240, 240, 240);
+        padding: 1em 1.2em;
+        font-size: 1.2em;
+        font-weight: 400;
+      }
+
       .sticky-bin {
         display: flex;
         flex-direction: column;
-        position: fixed;
         z-index: 2;
         border-top-left-radius: var(--curvature);
         overflow: hidden;
-        background: rgba(240, 240, 240, 0.95);
         box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        background: rgb(240, 240, 240);
       }
 
       .sticky-bin temba-icon {
@@ -183,6 +226,9 @@ export class ContactHistory extends RapidElement {
     `;
   }
 
+  @property({ type: Object })
+  contact: Contact;
+
   @property({ type: String })
   uuid: string;
 
@@ -222,9 +268,6 @@ export class ContactHistory extends RapidElement {
   @property({ type: Array })
   tickets: Ticket[] = null;
 
-  @property({ type: Object })
-  currentTicket: Ticket = null;
-
   ticketEvents: { [uuid: string]: TicketEvent } = {};
 
   nextBefore: number;
@@ -236,35 +279,23 @@ export class ContactHistory extends RapidElement {
 
   public firstUpdated(changedProperties: Map<string, any>) {
     super.firstUpdated(changedProperties);
-
     this.handleClose = this.handleClose.bind(this);
-
-    const stickyBin = this.getDiv('.sticky-bin');
-    const resizer = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const eventContainer = entry.contentRect;
-        stickyBin.style.width =
-          eventContainer.width + eventContainer.left - 16 + 'px';
-      }
-    });
-    resizer.observe(this);
   }
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    // fire an event when our current ticket changes
-    if (changedProperties.has('currentTicket')) {
-      this.fireCustomEvent(CustomEventType.ContextChanged, {
-        context: this.currentTicket,
-      });
-    }
-
     // fire an event if we get a new event
     if (changedProperties.has('mostRecentEvent')) {
       this.fireCustomEvent(CustomEventType.Refreshed);
     }
 
+    if (changedProperties.has('endDate')) {
+      if (this.refreshTimeout && this.endDate) {
+        window.clearTimeout(this.refreshTimeout);
+      }
+    }
+
     // if we don't have an endpoint infer one
     if (changedProperties.has('uuid')) {
       if (this.uuid == null) {
@@ -294,7 +325,8 @@ export class ContactHistory extends RapidElement {
     if (
       changedProperties.has('refreshing') &&
       this.refreshing &&
-      this.endpoint
+      this.endpoint &&
+      !this.endDate
     ) {
       const after = (this.getLastEventTime() - 1) * 1000;
       let forceOpen = false;
@@ -488,30 +520,20 @@ export class ContactHistory extends RapidElement {
           stickyBin.removeChild(child);
         }
       }
-      if (!this.currentTicket) {
-        this.updateCurrentTicket();
-      }
-    }
-  }
-
-  private updateCurrentTicket() {
-    const openTickets = (this.tickets || []).filter(
-      ticket => ticket && ticket.status === 'open'
-    );
-    if (openTickets.length > 0) {
-      this.currentTicket = openTickets[openTickets.length - 1];
     }
   }
 
   private refreshTickets() {
-    let url = `/api/v2/tickets.json?contact=${this.uuid}`;
     if (this.ticket) {
-      url = `${url}&ticket=${this.ticket}`;
-    }
+      let url = `/api/v2/tickets.json?contact=${this.uuid}`;
+      if (this.ticket) {
+        url = `${url}&ticket=${this.ticket}`;
+      }
 
-    getAssets(url).then((tickets: Ticket[]) => {
-      this.tickets = tickets.reverse();
-    });
+      getAssets(url).then((tickets: Ticket[]) => {
+        this.tickets = tickets.reverse();
+      });
+    }
   }
 
   public getEventsPane() {
@@ -568,6 +590,10 @@ export class ContactHistory extends RapidElement {
   }
 
   private scheduleRefresh(wait = -1) {
+    if (this.endDate) {
+      return;
+    }
+
     let refreshWait = wait;
 
     if (wait === -1) {
@@ -596,11 +622,12 @@ export class ContactHistory extends RapidElement {
   private reset() {
     // clear out our sticky bin which we manipulated manually
     const stickyBin = this.getDiv('.sticky-bin');
-    while (stickyBin.childElementCount > 0) {
-      stickyBin.removeChild(stickyBin.firstElementChild);
+    if (stickyBin) {
+      while (stickyBin.childElementCount > 0) {
+        stickyBin.removeChild(stickyBin.firstElementChild);
+      }
     }
 
-    this.currentTicket = null;
     this.endpoint = null;
     this.tickets = null;
     this.ticketEvents = {};
@@ -657,43 +684,12 @@ export class ContactHistory extends RapidElement {
           sticky.classList.add('pinned');
           (sticky as any).eventElement = eventElement;
           stickyBin.appendChild(eventElement);
-          const uuid = eventElement.getAttribute('data-sticky-id');
-          const ticket = this.getTicket(uuid);
-          if (ticket) {
-            if (
-              !this.currentTicket ||
-              this.currentTicket.uuid !== ticket.uuid
-            ) {
-              this.currentTicket = ticket;
-            }
-          }
         }
       } else {
         const eventElement = (sticky as any).eventElement;
         if (scrollBoundary < sticky.offsetTop + sticky.offsetHeight) {
           sticky.appendChild(eventElement);
           sticky.classList.remove('pinned');
-
-          const uuid = eventElement.getAttribute('data-sticky-id');
-          let previousTicket: Ticket = null;
-          for (const ticket of this.tickets) {
-            if (ticket.uuid === uuid) {
-              break;
-            }
-            previousTicket = ticket;
-          }
-
-          if (
-            previousTicket &&
-            (!this.currentTicket ||
-              this.currentTicket.uuid !== previousTicket.uuid)
-          ) {
-            if (previousTicket.status === 'open') {
-              this.currentTicket = previousTicket;
-            } else {
-              this.currentTicket = null;
-            }
-          }
         }
       }
     });
@@ -765,7 +761,7 @@ export class ContactHistory extends RapidElement {
         if (activeTicket && ticket && ticket.status === 'open') {
           closeHandler = this.handleClose;
         }
-        return renderTicketOpened(ticketEvent, closeHandler);
+        return renderTicketOpened(ticketEvent, closeHandler, !this.ticket);
       }
       case Events.TICKET_NOTE_ADDED:
         return renderNoteCreated(event as TicketEvent, this.agent);
@@ -773,10 +769,14 @@ export class ContactHistory extends RapidElement {
       case Events.TICKET_ASSIGNED:
         return renderTicketAssigned(event as TicketEvent);
       case Events.TICKET_REOPENED: {
-        return renderTicketAction(event as TicketEvent, 'reopened');
+        return renderTicketAction(
+          event as TicketEvent,
+          'reopened',
+          !this.ticket
+        );
       }
       case Events.TICKET_CLOSED:
-        return renderTicketAction(event as TicketEvent, 'closed');
+        return renderTicketAction(event as TicketEvent, 'closed', !this.ticket);
 
       case Events.ERROR:
       case Events.FAILURE:
@@ -816,7 +816,6 @@ export class ContactHistory extends RapidElement {
         this.fireCustomEvent(CustomEventType.ContentChanged, {
           ticket: { uuid, status: 'closed' },
         });
-        this.updateCurrentTicket();
       })
       .catch((response: any) => {
         console.error(response);
@@ -824,24 +823,22 @@ export class ContactHistory extends RapidElement {
   }
 
   public checkForAgentAssignmentEvent(agent: number) {
-    if (this.currentTicket) {
-      this.httpComplete = getAssets(
-        `/api/v2/tickets.json?ticket=${this.currentTicket.uuid}`
-      ).then((assets: Asset[]) => {
-        if (assets.length === 1) {
-          const ticket = assets[0] as Ticket;
-          if (ticket.assignee && ticket.assignee.id === agent) {
-            this.fireCustomEvent(CustomEventType.ContentChanged, {
-              ticket: { uuid: this.currentTicket.uuid, assigned: 'self' },
-            });
-          } else {
-            this.fireCustomEvent(CustomEventType.ContentChanged, {
-              ticket: { uuid: this.currentTicket.uuid, assigned: 'other' },
-            });
-          }
+    this.httpComplete = getAssets(
+      `/api/v2/tickets.json?ticket=${this.ticket}`
+    ).then((assets: Asset[]) => {
+      if (assets.length === 1) {
+        const ticket = assets[0] as Ticket;
+        if (ticket.assignee && ticket.assignee.id === agent) {
+          this.fireCustomEvent(CustomEventType.ContentChanged, {
+            ticket: { uuid: this.ticket, assigned: 'self' },
+          });
+        } else {
+          this.fireCustomEvent(CustomEventType.ContentChanged, {
+            ticket: { uuid: this.ticket, assigned: 'other' },
+          });
         }
-      });
-    }
+      }
+    });
   }
 
   public getEventHandlers() {
@@ -864,7 +861,9 @@ export class ContactHistory extends RapidElement {
 
     const renderedEvent = html`
       <div
-        class="event ${event.type} ${isSticky ? 'has-sticky' : ''}"
+        class="${this.ticket
+          ? 'active-ticket'
+          : ''} event ${event.type} ${isSticky ? 'has-sticky' : ''}"
         data-sticky-id="${stickyId}"
       >
         ${this.renderEvent(event)}
@@ -901,7 +900,8 @@ export class ContactHistory extends RapidElement {
 
                 const renderedEvent = renderTicketOpened(
                   ticketOpenedEvent,
-                  this.handleClose
+                  this.handleClose,
+                  !this.ticket
                 );
                 return html`<div class="event ticket_opened">
                   ${renderedEvent}
@@ -912,68 +912,65 @@ export class ContactHistory extends RapidElement {
         : null;
 
     return html`
-      <div class="sticky-bin">${unfetchedTickets}</div>
+      ${this.ticket
+        ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
+        : this.contact
+        ? html`<div class="scroll-title">${this.contact.name}</div>`
+        : null}
       ${this.fetching
         ? html`<temba-loading units="5" size="10"></temba-loading>`
         : html`<div style="height:0em"></div>`}
       <div class="events" @scroll=${this.handleScroll}>
-        ${this.tickets
-          ? this.eventGroups.map((eventGroup: EventGroup, index: number) => {
-              const grouping = getEventGroupType(
-                eventGroup.events[0],
-                this.ticket
-              );
-              const groupIndex = this.eventGroups.length - index - 1;
-
-              const classes = getClasses({
-                grouping: true,
-                [grouping]: true,
-                expanded: eventGroup.open,
-                closing: eventGroup.closing,
-              });
-
-              return html`<div class="${classes}">
-                ${grouping === 'verbose'
-                  ? html`<div
-                      class="event-count"
-                      @click=${this.handleEventGroupShow}
-                      data-group-index="${groupIndex}"
-                    >
-                      ${eventGroup.events.length}
-                      ${eventGroup.events.length === 1
-                        ? html`event`
-                        : html`events`}
-                    </div>`
-                  : null}
-                ${grouping === 'verbose'
-                  ? html`
-                      <temba-icon
-                        @click=${this.handleEventGroupHide}
-                        data-group-index="${groupIndex}"
-                        class="grouping-close-button"
-                        name="x"
-                        clickable
-                      ></temba-icon>
-                    `
-                  : null}
-                ${eventGroup.events.map((event: ContactEvent) => {
-                  if (
-                    event.type === Events.TICKET_ASSIGNED &&
-                    (event as TicketEvent).note
-                  ) {
-                    const noteEvent = { ...event };
-                    noteEvent.type = Events.TICKET_NOTE_ADDED;
-
-                    return html`${this.renderEventContainer(
-                      noteEvent
-                    )}${this.renderEventContainer(event)}`;
-                  } else {
-                    return this.renderEventContainer(event);
-                  }
-                })}
-              </div>`;
-            })
-          : null}
+        ${this.eventGroups.map((eventGroup: EventGroup, index: number) => {
+          const grouping = getEventGroupType(eventGroup.events[0], this.ticket);
+          const groupIndex = this.eventGroups.length - index - 1;
+
+          const classes = getClasses({
+            grouping: true,
+            [grouping]: true,
+            expanded: eventGroup.open,
+            closing: eventGroup.closing,
+          });
+
+          return html`<div class="${classes}">
+            ${grouping === 'verbose'
+              ? html`<div
+                  class="event-count"
+                  @click=${this.handleEventGroupShow}
+                  data-group-index="${groupIndex}"
+                >
+                  ${eventGroup.events.length}
+                  ${eventGroup.events.length === 1 ? html`event` : html`events`}
+                </div>`
+              : null}
+            ${grouping === 'verbose'
+              ? html`
+                  <temba-icon
+                    @click=${this.handleEventGroupHide}
+                    data-group-index="${groupIndex}"
+                    class="grouping-close-button"
+                    name="x"
+                    clickable
+                  ></temba-icon>
+                `
+              : null}
+            ${eventGroup.events.map((event: ContactEvent) => {
+              if (
+                event.type === Events.TICKET_ASSIGNED &&
+                (event as TicketEvent).note
+              ) {
+                const noteEvent = { ...event };
+                noteEvent.type = Events.TICKET_NOTE_ADDED;
+
+                return html`${this.renderEventContainer(
+                  noteEvent
+                )}${this.renderEventContainer(event)}`;
+              } else {
+                return this.renderEventContainer(event);
+              }
+            })}
+          </div>`;
+        })}
       </div>
 
       <div class="new-messages-container">

package/src/contacts/events.ts

@@ -284,7 +284,7 @@ export const getEventStyles = () => {
       fill: rgba(223, 65, 159, 1);
     }
 
-    .ticket_opened {
+    .active-ticket.ticket_opened {
       padding: 0em 1em;
     }
 
@@ -622,9 +622,14 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
     case Events.TICKET_OPENED:
     case Events.TICKET_CLOSED:
     case Events.TICKET_REOPENED:
-      if (!ticket || (event as TicketEvent).ticket.uuid === ticket) {
+      if (!ticket) {
+        return 'verbose';
+      }
+
+      if ((event as TicketEvent).ticket.uuid === ticket) {
         return 'tickets';
       }
+
       break;
     case Events.FLOW_ENTERED:
     case Events.FLOW_EXITED:
@@ -681,7 +686,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
     inner = html`<a href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
   } else if (ext === 'pdf') {
     return html`<div
-    style="width:100%;height:300px;border-radius:var(--curvature); box-shadow:0px 0px 9px -4px rgb(140,140,140);overflow:hidden"
+    style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
   ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
   } else if (mediaType === 'video') {
     return html`<video max-width="400px" height="auto" controls="controls">
@@ -695,7 +700,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
   }
 
   return html`<div
-    style="width:40%;max-width:900px;border-radius:var(--curvature); box-shadow:0px 0px 9px -4px rgb(140,140,140);overflow:hidden"
+    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
   >
     ${inner}
   </div>`;
@@ -892,20 +897,6 @@ export const renderNoteCreated = (
   </div>`;
 };
 
-export const renderTicketClosed = (event: TicketEvent): TemplateResult => {
-  const closed = new Date(event.ticket.opened_on);
-  return html`
-    <div class="assigned active">
-      <div style="text-align:center">
-        ${getDisplayName(event.created_by)} closed this ticket
-      </div>
-      <div class="subtext" style="justify-content:center">
-        ${timeSince(closed, { hideRecentText: true, suffix: ' ago' })}
-      </div>
-    </div>
-  `;
-};
-
 const getTicketIcon = (event: TicketEvent) => {
   let icon = 'inbox';
   if (event.ticket.ticketer.name.indexOf('Email') > -1) {
@@ -918,9 +909,21 @@ const getTicketIcon = (event: TicketEvent) => {
 
 export const renderTicketAction = (
   event: TicketEvent,
-  action: string
+  action: string,
+  grouped: boolean
 ): TemplateResult => {
   const reopened = new Date(event.created_on);
+  const icon = getTicketIcon(event);
+  if (grouped) {
+    return html`<div class="" style="display: flex">
+      <temba-icon name="${icon}"></temba-icon>
+      <div class="description">
+        ${getDisplayName(event.created_by)} ${action} a
+        <a href="/tickets/all/open/${event.ticket.uuid}">ticket</a>
+      </div>
+    </div>`;
+  }
+
   return html`
     <div class="assigned active">
       <div style="text-align:center">
@@ -954,35 +957,47 @@ export const renderTicketAssigned = (event: TicketEvent): TemplateResult => {
 
 export const renderTicketOpened = (
   event: TicketEvent,
-  handleClose: (uuid: string) => void
+  handleClose: (uuid: string) => void,
+  grouped: boolean
 ): TemplateResult => {
   const icon = getTicketIcon(event);
-  return html`
-    <temba-icon size="1.5" name="${icon}"></temba-icon>
 
-    <div class="active" style="flex-grow:1;">
-      Opened
-      <div class="attn">
-        ${event.ticket.topic ? event.ticket.topic.name : 'General'}
+  if (grouped) {
+    return html`<div class="" style="display: flex">
+      <temba-icon name="${icon}"></temba-icon>
+      <div class="description">
+        ${event.ticket.topic.name}
+        <a href="/tickets/all/open/${event.ticket.uuid}">ticket</a> was opened
       </div>
-      <div class="subtext">${timeSince(new Date(event.created_on))}</div>
-    </div>
-    ${handleClose
-      ? html`
-          <temba-tip text="Resolve" position="left" style="width:1.5em">
-            <temba-icon
-              class="clickable"
-              size="1.5"
-              name="check"
-              @click=${() => {
-                handleClose(event.ticket.uuid);
-              }}
-              ?clickable=${open}
-            />
-          </temba-tip>
-        `
-      : null}
-  `;
+    </div>`;
+  } else {
+    return html`
+      <temba-icon size="1.5" name="${icon}"></temba-icon>
+
+      <div class="active" style="flex-grow:1;">
+        Opened
+        <div class="attn">
+          ${event.ticket.topic ? event.ticket.topic.name : 'General'}
+        </div>
+        <div class="subtext">${timeSince(new Date(event.created_on))}</div>
+      </div>
+      ${handleClose
+        ? html`
+            <temba-tip text="Resolve" position="left" style="width:1.5em">
+              <temba-icon
+                class="clickable"
+                size="1.5"
+                name="check"
+                @click=${() => {
+                  handleClose(event.ticket.uuid);
+                }}
+                ?clickable=${open}
+              />
+            </temba-tip>
+          `
+        : null}
+    `;
+  }
 };
 
 export const renderErrorMessage = (

package/src/interfaces.ts

@@ -10,13 +10,13 @@ export interface User {
 export interface Ticket {
   uuid: string;
   subject: string;
-  topic: ObjectReference;
   body?: string;
   closed_on: string;
   opened_on: string;
   status: string;
   contact: ObjectReference;
   ticketer: ObjectReference;
+  topic: ObjectReference;
   assignee?: User;
 }
 

package/src/list/ContactList.ts

@@ -23,7 +23,7 @@ export class ContactList extends TembaList {
     this.renderOption = (contact: Contact): TemplateResult => {
       return html`
         <div
-          style="display: flex-col; align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
+          style="display: align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
         >
           <div
             style="display:flex; align-items: flex-start;border:0px solid red;"