@nyaruka/temba-components 0.102.2 → 0.104.0

package/src/contacts/ContactFields.ts

@@ -4,6 +4,7 @@ import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Checkbox } from '../checkbox/Checkbox';
+import { CustomEventType } from '../interfaces';
 
 const MIN_FOR_FILTER = 10;
 
@@ -104,12 +105,18 @@ export class ContactFields extends ContactStoreElement {
       if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {
         this.showAll = true;
       }
+
+      this.fireCustomEvent(CustomEventType.DetailsChanged, {
+        count: Object.values(this.data.fields).filter((value) => !!value).length
+      });
     }
   }
 
   public handleFieldChanged(evt: InputEvent) {
     const field = evt.currentTarget as ContactFieldEditor;
     const value = field.value;
+
+    // TODO: Use contact.postChanges instead of postJSON
     postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
       fields: { [field.key]: value }
     })

package/src/contacts/ContactNotepad.ts

@@ -0,0 +1,133 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ContactStoreElement } from './ContactStoreElement';
+import { getDisplayName } from './helpers';
+import { ContactNote, CustomEventType } from '../interfaces';
+
+export class ContactNotepad extends ContactStoreElement {
+  @property({ type: Object, attribute: false })
+  note: ContactNote;
+
+  @property({ type: String })
+  dirtyMessage =
+    'You have unsaved changes to the contact notepad. Are you sure you want to contiunue?';
+
+  static get styles() {
+    return css`
+      :host {
+        height: 100%;
+        display: flex;
+      }
+
+      .wrapper {
+        flex-grow: 1;
+        --color-widget-bg: transparent;
+        --color-widget-bg-focused: transparent;
+        outline: none;
+        border-radius: var(--curvature);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .notepad {
+        flex-grow: 1;
+        padding: 1.25rem;
+        overflow-y: auto;
+        background: transparent;
+        border: none;
+        outline: none;
+        resize: none;
+        font-family: monospace;
+      }
+
+      .notepad:focus {
+        outline: none;
+      }
+
+      .toolbar {
+        background: rgba(0, 0, 0, 0.03);
+        padding: 0.25em 0.5em;
+        display: flex;
+        min-height: 2em;
+        align-items: center;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+      }
+
+      .toolbar temba-button {
+        margin-right: 0.5em;
+      }
+
+      .updated {
+        font-size: 0.9em;
+        flex-grow: 1;
+        margin-left: 0.5em;
+      }
+    `;
+  }
+
+  private handleChange() {
+    this.markDirty();
+  }
+
+  private submitChanges() {
+    const notepad = this.shadowRoot.querySelector(
+      '.notepad'
+    ) as HTMLInputElement;
+    const note = notepad.value;
+    this.postChanges({ note }).then(() => {
+      this.markClean();
+    });
+  }
+
+  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
+      });
+      this.markClean();
+    }
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      return html`
+        <div class="wrapper">
+          <!-- prettier-ignore -->
+          <textarea class="notepad" @input=${this.handleChange} .value=${this
+            .note
+            ? this.note.text
+            : ''}></textarea>
+          <div class="toolbar">
+            <div class="updated">
+              ${this.note
+                ? html`Last updated by ${getDisplayName(this.note.created_by)}
+                    <temba-date
+                      value="${this.note.created_on}"
+                      display="duration"
+                    ></temba-date>`
+                : null}
+            </div>
+            ${this.dirty
+              ? html`
+                  <temba-button
+                    name="Save"
+                    small
+                    @click=${this.submitChanges}
+                  ></temba-button>
+                `
+              : null}
+          </div>
+        </div>
+      `;
+    }
+    return super.render();
+  }
+}

package/src/contacts/ContactPending.ts

@@ -5,7 +5,7 @@ import {
   ScheduledEvent,
   ScheduledEventType
 } from '../interfaces';
-import { StoreElement } from '../store/StoreElement';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 import { Icon } from '../vectoricon';
 
 const ICONS = {
@@ -14,7 +14,7 @@ const ICONS = {
   [ScheduledEventType.ScheduledTrigger]: Icon.trigger
 };
 
-export class ContactPending extends StoreElement {
+export class ContactPending extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
 
@@ -160,6 +160,12 @@ export class ContactPending extends StoreElement {
         this.url = null;
       }
     }
+
+    if (changes.has('data')) {
+      this.fireCustomEvent(CustomEventType.DetailsChanged, {
+        count: this.data.length
+      });
+    }
   }
 
   public handleEventClicked(event: ScheduledEvent) {

package/src/contacts/ContactStoreElement.ts

@@ -1,9 +1,9 @@
 import { PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Contact, Group } from '../interfaces';
-import { StoreElement } from '../store/StoreElement';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 
-export class ContactStoreElement extends StoreElement {
+export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
 
@@ -39,6 +39,16 @@ export class ContactStoreElement extends StoreElement {
     return null;
   }
 
+  public postChanges(payload: any) {
+    // clear our cache so we don't have any races
+    this.store.removeFromCache(`${this.endpoint}${this.contact}`);
+    return this.store
+      .postJSON(`${this.endpoint}${this.contact}`, payload)
+      .then((response) => {
+        this.setContact(response.json);
+      });
+  }
+
   public setContact(contact: any) {
     // make sure contact data is properly prepped
     this.data = this.prepareData([contact]);

package/src/contacts/ContactTickets.ts

@@ -1,14 +1,14 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType, Ticket, TicketStatus } from '../interfaces';
-import { StoreElement } from '../store/StoreElement';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 import { getClasses, postJSON, stopEvent } from '../utils';
 import { Icon } from '../vectoricon';
 
 const dropdownUserScale = 0.7;
 const inlineUserScale = 0.8;
 
-export class ContactTickets extends StoreElement {
+export class ContactTickets extends EndpointMonitorElement {
   @property({ type: String })
   agent: string;
 
@@ -230,6 +230,13 @@ export class ContactTickets extends StoreElement {
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changes);
+
+    if (changes.has('data')) {
+      this.fireCustomEvent(CustomEventType.DetailsChanged, {
+        count: this.data.length
+      });
+    }
+
     if (changes.has('contact') || changes.has('ticket')) {
       if (this.contact) {
         this.url = `/api/v2/tickets.json?contact=${this.contact}${

package/src/contacts/events.ts

@@ -73,7 +73,6 @@ export interface TicketEvent extends ContactEvent {
   assignee?: User;
   ticket: {
     uuid: string;
-    body: string;
     topic?: ObjectReference;
     closed_on?: string;
     opened_on?: string;

package/src/contacts/helpers.ts

@@ -1,4 +1,4 @@
-import { Contact, User } from '../interfaces';
+import { Contact, NamedUser, User } from '../interfaces';
 import { fetchResults, getUrl, postUrl, WebResponse } from '../utils';
 import { ContactHistoryPage } from './events';
 
@@ -80,6 +80,10 @@ export const getDisplayName = (user: User) => {
     return 'Somebody';
   }
 
+  if ((user as NamedUser).name) {
+    return (user as NamedUser).name;
+  }
+
   if (user.first_name && user.last_name) {
     return `${user.first_name} ${user.last_name}`;
   }

package/src/fields/FieldManager.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { ContactField, CustomEventType } from '../interfaces';
 
 import { SortableList } from '../list/SortableList';
-import { StoreElement } from '../store/StoreElement';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 import { postJSON } from '../utils';
 
 const TYPE_NAMES = {
@@ -31,7 +31,7 @@ const matches = (field: ContactField, query: string): boolean => {
   return false;
 };
 
-export class FieldManager extends StoreElement {
+export class FieldManager extends EndpointMonitorElement {
   static get styles() {
     return css`
       :host {

package/src/flow/FlowStoreElement.ts

@@ -1,9 +1,9 @@
 import { html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FlowDetails } from '../interfaces';
-import { StoreElement } from '../store/StoreElement';
+import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 
-export class FlowStoreElement extends StoreElement {
+export class FlowStoreElement extends EndpointMonitorElement {
   @property({ type: String })
   flow: string;
 

package/src/interfaces.ts

@@ -48,6 +48,10 @@ export interface ScheduledEvent {
   message?: string;
 }
 
+export interface NamedUser extends User {
+  name: string;
+}
+
 export interface User {
   id?: number;
   first_name?: string;
@@ -136,6 +140,12 @@ export interface Group {
   is_dynamic?: boolean;
 }
 
+export interface ContactNote {
+  text: string;
+  created_on: string;
+  created_by: NamedUser;
+}
+
 export interface ContactTicket {
   name: string;
   uuid: string;
@@ -158,6 +168,7 @@ export interface Contact {
   language?: string;
   fields: { [key: string]: string };
   groups: Group[];
+  notes: ContactNote[];
   modified_on: string;
   created_on: string;
   last_seen_on: string;
@@ -260,5 +271,6 @@ export enum CustomEventType {
   OrderChanged = 'temba-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
-  Resized = 'temba-resized'
+  Resized = 'temba-resized',
+  DetailsChanged = 'temba-details-changed'
 }

package/src/list/TembaMenu.ts

@@ -7,6 +7,7 @@ import { Icon } from '../vectoricon';
 import { Dropdown } from '../dropdown/Dropdown';
 import { NotificationList } from './NotificationList';
 import { ResizeElement } from '../ResizeElement';
+import { Store } from '../store/Store';
 export interface MenuItem {
   id?: string;
   vanity_id?: string;
@@ -820,6 +821,17 @@ export class TembaMenu extends ResizeElement {
     menuItem: MenuItem,
     parent: MenuItem = null
   ) {
+    const store = document.querySelector('temba-store') as Store;
+    if (store) {
+      const unsavedMessage = store.getDirtyMessage();
+      if (unsavedMessage) {
+        if (!confirm(unsavedMessage)) {
+          return;
+        }
+      }
+      store.cleanAll();
+    }
+
     if (parent && parent.popup) {
       const dropdown = this.shadowRoot.querySelector(
         'temba-dropdown'

package/src/store/{StoreElement.ts → EndpointMonitorElement.ts}

@@ -2,14 +2,13 @@ import { PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 
-import { Store } from './Store';
 import { StoreMonitorElement } from './StoreMonitorElement';
 
 /**
  * StoreElement is a listener for a given endpoint that re-renders
  * when the underlying store element changes
  */
-export class StoreElement extends StoreMonitorElement {
+export class EndpointMonitorElement extends StoreMonitorElement {
   @property({ type: String })
   url: string;
 
@@ -19,8 +18,6 @@ export class StoreElement extends StoreMonitorElement {
   @property({ type: Object, attribute: false })
   data: any;
 
-  store: Store;
-
   prepareData(data: any): any {
     return data;
   }

package/src/store/Store.ts

@@ -26,6 +26,7 @@ import { DateTime } from 'luxon';
 import { css, html } from 'lit';
 import { configureLocalization } from '@lit/localize';
 import { sourceLocale, targetLocales } from '../locales/locale-codes';
+import { StoreMonitorElement } from './StoreMonitorElement';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -105,6 +106,32 @@ export class Store extends RapidElement {
   // http promise to monitor for completeness
   public initialHttpComplete: Promise<void | WebResponse[]>;
 
+  private dirtyElements: StoreMonitorElement[] = [];
+
+  public markDirty(ele: StoreMonitorElement) {
+    if (!this.dirtyElements.includes(ele)) {
+      this.dirtyElements.push(ele);
+    }
+  }
+
+  public cleanAll() {
+    this.dirtyElements.forEach((ele) => ele.markClean());
+    this.dirtyElements = [];
+  }
+
+  public markClean(ele: StoreMonitorElement) {
+    this.dirtyElements = this.dirtyElements.filter((el) => el !== ele);
+  }
+
+  public getDirtyMessage() {
+    if (this.dirtyElements.length > 0) {
+      return (
+        this.dirtyElements[0].dirtyMessage ||
+        'You have unsaved changes, are you sure you want to continue?'
+      );
+    }
+  }
+
   private cache: any;
   public getLocale() {
     return this.locale[0];
@@ -436,6 +463,10 @@ export class Store extends RapidElement {
     this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
   }
 
+  public removeFromCache(url: string) {
+    this.cache.delete(url);
+  }
+
   public makeRequest(
     url: string,
     options?: { force?: boolean; prepareData?: (data: any) => any }

package/src/store/StoreMonitorElement.ts

@@ -14,8 +14,30 @@ export class StoreMonitorElement extends RapidElement {
   @property({ type: Boolean })
   showLoading = false;
 
+  @property({ type: Boolean })
+  dirty = false;
+
+  @property({ type: String })
+  dirtyMessage: string;
+
   store: Store;
 
+  markDirty() {
+    this.dirty = true;
+    this.store.markDirty(this);
+    this.fireCustomEvent(CustomEventType.DetailsChanged, {
+      dirty: true
+    });
+  }
+
+  markClean() {
+    this.dirty = false;
+    this.store.markClean(this);
+    this.fireCustomEvent(CustomEventType.DetailsChanged, {
+      dirty: false
+    });
+  }
+
   private handleStoreUpdated(event: CustomEvent) {
     this.store.initialHttpComplete.then(() => {
       this.storeUpdated(event);
@@ -50,6 +72,8 @@ export class StoreMonitorElement extends RapidElement {
         CustomEventType.StoreUpdated,
         this.handleStoreUpdated
       );
+
+      this.store.markClean(this);
     }
   }
 

package/src/tabpane/Tab.ts

@@ -31,6 +31,12 @@ export class Tab extends RapidElement {
   @property({ type: String })
   selectionBackground: string;
 
+  @property({ type: String })
+  borderColor: string = 'var(--color-widget-border)';
+
+  @property({ type: String })
+  activityColor: string = `var(--color-link-primary)`;
+
   @property({ type: Boolean })
   selected = false;
 
@@ -43,12 +49,22 @@ export class Tab extends RapidElement {
   @property({ type: Boolean })
   hidden = false;
 
+  @property({ type: Boolean })
+  hideEmpty = false;
+
+  // show just that there is activity instead of count
+  @property({ type: Boolean })
+  activity = false;
+
   @property({ type: Number })
   count = 0;
 
   @property({ type: Boolean })
   checked = false;
 
+  @property({ type: Boolean })
+  dirty = false;
+
   public updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -62,8 +78,21 @@ export class Tab extends RapidElement {
     return this.count > 0;
   }
 
+  public handleDetailsChanged(event: CustomEvent) {
+    if ('dirty' in event.detail) {
+      this.dirty = event.detail.dirty;
+    }
+    if ('count' in event.detail) {
+      this.count = event.detail.count;
+      if (this.hideEmpty) {
+        this.hidden = this.count === 0;
+      }
+    }
+  }
+
   public render(): TemplateResult {
     return html`<slot
+      @temba-details-changed=${this.handleDetailsChanged}
       class="${getClasses({ selected: this.selected })}"
     ></slot> `;
   }