@nyaruka/temba-components 0.26.8 → 0.26.11

package/src/contacts/ContactFieldEditor.ts

@@ -0,0 +1,215 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+import { TextInput } from '../textinput/TextInput';
+
+export class ContactFieldEditor extends RapidElement {
+  @property({ type: String })
+  key: string;
+
+  @property({ type: String })
+  value: string;
+
+  @property({ type: String })
+  name: string;
+
+  @property({ type: String })
+  type: string;
+
+  @property({ type: String })
+  icon = navigator.clipboard ? 'copy' : '';
+
+  @property({ type: String })
+  iconClass = '';
+
+  static get styles() {
+    return css`
+      .prefix {
+        background: rgba(0, 0, 0, 0.05);
+        border-top-left-radius: var(--curvature-widget);
+        border-bottom-left-radius: var(--curvature-widget);
+        color: #888;
+        cursor: pointer;
+        width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        padding: 0em 0.5em;
+      }
+
+      .wrapper {
+        margin-bottom: -1px;
+      }
+
+      .prefix .name {
+        padding: 0.5em 0em;
+        color: #888;
+        width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .postfix {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .popper {
+        padding: 0.5em 0.75em;
+        background: rgba(240, 240, 240, 1);
+        border-top-right-radius: var(--curvature-widget);
+        border-bottom-right-radius: var(--curvature-widget);
+        --icon-color: #888;
+        opacity: 0;
+        cursor: default;
+        transform: scale(0.5);
+        transition: all 300ms ease-in-out;
+        display: flex;
+        align-items: stretch;
+        z-index: 1000;
+      }
+
+      temba-icon[name='calendar'] {
+        --icon-color: rgba(0, 0, 0, 0.2);
+      }
+
+      temba-icon:hover {
+        --icon-color: rgba(0, 0, 0, 0.5);
+      }
+
+      temba-icon {
+        cursor: pointer;
+        --icon-color: rgba(0, 0, 0, 0.3);
+      }
+
+      temba-textinput:hover .popper {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      temba-textinput:focus .popper {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .unset temba-textinput:focus .popper,
+      .unset temba-textinput:hover .popper {
+        opacity: 0;
+      }
+
+      .copy.clicked temba-icon {
+        transform: scale(1.2);
+      }
+
+      temba-icon {
+        transition: all 200ms ease-in-out;
+      }
+
+      temba-icon[name='search'] {
+        margin-right: 1em;
+      }
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.handleInput = this.handleInput.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  public handleIconClick(evt: MouseEvent) {
+    const ele = evt.target as HTMLDivElement;
+    const icon = ele.getAttribute('name');
+    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;
+
+    if (icon === 'copy') {
+      if (navigator.clipboard) {
+        this.iconClass = 'clicked';
+        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {
+          window.setTimeout(() => {
+            this.iconClass = '';
+          }, 300);
+        });
+      }
+    }
+
+    if (icon === 'search') {
+      this.fireCustomEvent(CustomEventType.ButtonClicked, {
+        key: this.key,
+        value: this.value,
+      });
+    }
+
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  public handleSubmit() {
+    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;
+    if (input.value !== this.value) {
+      this.value = input.value;
+      this.fireEvent('change');
+    }
+    this.icon = navigator.clipboard ? 'copy' : '';
+  }
+
+  public handleChange(evt: Event) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  public handleInput(evt: KeyboardEvent) {
+    if (evt.key === 'Enter') {
+      const input = evt.currentTarget as TextInput;
+      input.blur();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="wrapper ${this.value ? 'set' : 'unset'}">
+        <temba-textinput
+          value="${this.value ? this.value : ''}"
+          ?datetimepicker=${this.type === 'datetime'}
+          @blur=${this.handleSubmit}
+          @keydown=${this.handleInput}
+          @change=${this.handleChange}
+        >
+          <div class="prefix" slot="prefix">
+            <div class="name">${this.name}</div>
+            ${this.type === 'datetime'
+              ? html`<div style="position: relative; padding-top: .75em;">
+                  <temba-icon name="calendar" animateclick="pulse" />
+                </div>`
+              : null}
+          </div>
+
+          <div class="postfix">
+            <div
+              class="popper ${this.iconClass}"
+              @click=${this.handleIconClick}
+            >
+              ${this.value
+                ? html`
+                <temba-icon 
+                  name="search"
+                  animateclick="pulse"                  
+                ></temba-icon>
+                </div>
+              `
+                : null}
+              <temba-icon
+                name="${this.icon}"
+                animatechange="spin"
+                animateclick="pulse"
+              ></temba-icon>
+            </div>
+          </div>
+        </temba-textinput>
+      </div>
+    `;
+  }
+}

package/src/contacts/ContactFields.ts

@@ -0,0 +1,178 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { postJSON } from '../utils';
+import { ContactFieldEditor } from './ContactFieldEditor';
+import { ContactStoreElement } from './ContactStoreElement';
+import { Checkbox } from '../checkbox/Checkbox';
+
+const MIN_FOR_FILTER = 10;
+
+export class ContactFields extends ContactStoreElement {
+  static get styles() {
+    return css`
+      :host {
+        --curvature-widget: 0px;
+        border-radius: 6px;
+      }
+
+      .field {
+        display: flex;
+        margin: 0.3em 0.3em;
+        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
+        border-radius: 0px;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .show-all .unset {
+        display: block;
+      }
+
+      .unset {
+        display: none;
+      }
+
+      .field:hover {
+        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),
+          0px 0px 0px 2px var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      .label {
+        padding: 0.25em 1em;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        color: #777;
+        font-size: 0.9em;
+        font-weight: 400;
+        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;
+      }
+
+      .value {
+        --icon-color: #ddd;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0.25em 1em;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        font-size: 0.9em;
+      }
+
+      temba-contact-field {
+      }
+
+      .footer {
+        margin-bottom: 0;
+        display: flex;
+        background: #fff;
+        align-items: center;
+        margin-top: 0.5em;
+      }
+    `;
+  }
+
+  @property({ type: Boolean })
+  pinned: boolean;
+
+  @property({ type: Boolean })
+  system: boolean;
+
+  @property({ type: Boolean })
+  dirty: boolean;
+
+  @property({ type: Boolean })
+  showAll: boolean;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.handleFieldChanged = this.handleFieldChanged.bind(this);
+  }
+
+  protected updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('data')) {
+      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {
+        this.showAll = true;
+      }
+    }
+  }
+
+  public handleFieldChanged(evt: InputEvent) {
+    const field = evt.currentTarget as ContactFieldEditor;
+    this.data.fields[field.key] = field.value;
+    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
+      fields: { [field.key]: field.value },
+    }).then(() => {
+      this.refresh();
+    });
+  }
+
+  public handleToggle(evt: Event) {
+    const checkbox = evt.currentTarget as Checkbox;
+    console.log(checkbox.checked);
+    this.showAll = checkbox.checked;
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      const fieldsToShow = Object.entries(this.data.fields)
+        .filter((entry: [string, string]) => {
+          return (
+            (this.pinned && this.store.getContactField(entry[0]).pinned) ||
+            (!this.pinned && !this.store.getContactField(entry[0]).pinned)
+          );
+        })
+        .sort((a: [string, string], b: [string, string]) => {
+          const [ak] = a;
+          const [bk] = b;
+          /* if (av && !bv) {
+          return -1;
+        }
+
+        if (bv && !av) {
+          return 1;
+        }*/
+
+          return ak.localeCompare(bk);
+        });
+
+      const fields = fieldsToShow.map((entry: [string, string]) => {
+        const [k, v] = entry;
+        const field = this.store.getContactField(k);
+        return html`<temba-contact-field
+          class=${v ? 'set' : 'unset'}
+          key=${field.key}
+          name=${field.label}
+          value=${v}
+          type=${field.value_type}
+          @change=${this.handleFieldChanged}
+        ></temba-contact-field>`;
+      });
+
+      return html`
+        <div class="${this.showAll || this.pinned ? 'show-all' : ''}">
+          ${fields}
+        </div>
+
+        ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER
+          ? html` <div class="footer">
+              <div style="flex-grow: 1"></div>
+              <div>
+                <temba-checkbox
+                  ?checked=${this.showAll}
+                  @change=${this.handleToggle}
+                  label="Show All"
+                />
+              </div>
+            </div>`
+          : null}
+      `;
+    }
+
+    return null;
+  }
+}

package/src/contacts/ContactGroups.ts

@@ -0,0 +1,41 @@
+import { css, html, TemplateResult } from 'lit';
+import { Group } from '../interfaces';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactGroups extends ContactStoreElement {
+  static get styles() {
+    return css`
+      .groups {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      temba-label {
+        margin: 0.3em;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`${this.data
+      ? html`
+          <div class="groups">
+            ${this.data.groups.map((group: Group) => {
+              return html`
+                <temba-label
+                  onclick="goto(event)"
+                  href="/contact/filter/${group.uuid}/"
+                  icon=${group.is_dynamic ? 'atom' : 'users'}
+                  clickable
+                  light
+                  shadow
+                >
+                  ${group.name}
+                </temba-label>
+              `;
+            })}
+          </div>
+        `
+      : null}`;
+  }
+}

package/src/contacts/ContactName.ts

@@ -0,0 +1,37 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactName extends ContactStoreElement {
+  @property({ type: Number, attribute: 'icon-size' })
+  size = 20;
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+
+      temba-urn {
+        margin-right: 0.2em;
+        margin-top: 2px;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      const urn =
+        this.data.urns.length > 0
+          ? html`<temba-urn
+              size=${this.size}
+              urn="${this.data.urns[0]}"
+            ></temba-urn>`
+          : null;
+      return html`
+        ${urn}
+        <div class="name">${this.data.name}</div>
+      `;
+    }
+  }
+}

package/src/contacts/ContactStoreElement.ts

@@ -0,0 +1,51 @@
+import { PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators';
+import { Contact, Group } from '../interfaces';
+import { StoreElement } from '../store/StoreElement';
+
+export class ContactStoreElement extends StoreElement {
+  @property({ type: String })
+  contact: string;
+
+  @property({ type: Object, attribute: false })
+  data: Contact;
+
+  prepareData(data: any) {
+    if (data && data.length > 0) {
+      data = data[0];
+      data.groups.forEach((group: Group) => {
+        group.is_dynamic = this.store.isDynamicGroup(group.uuid);
+      });
+
+      data.groups.sort((a: Group, b: Group) => {
+        if (!a.is_dynamic || !b.is_dynamic) {
+          if (a.is_dynamic) {
+            return -1;
+          }
+
+          if (b.is_dynamic) {
+            return 1;
+          }
+        }
+
+        return a.name.localeCompare(b.name);
+      });
+
+      return data;
+    }
+    return null;
+  }
+
+  protected updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('contact')) {
+      if (this.contact) {
+        this.url = `/api/v2/contacts.json?uuid=${this.contact}`;
+      } else {
+        this.url = null;
+      }
+    }
+  }
+}

package/src/contacts/ContactUrn.ts

@@ -0,0 +1,38 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+
+export class ContactUrn extends RapidElement {
+  @property({ type: String })
+  urn: string;
+
+  @property({ type: Number })
+  size: number;
+
+  static get styles() {
+    return css`
+      .urn {
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;
+        padding: 3px;
+        border: 1px solid #ddd;
+        border-radius: 18rem;
+        background: #eee;
+        margin-right: 0.2em;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    const scheme = this.urn.split(':')[0];
+    return html`
+      <img
+        class="urn"
+        width="${this.size}em"
+        height="${this.size}em"
+        src="${this.prefix ||
+        (window as any).static_url ||
+        '/static/'}img/schemes/${scheme}.svg"
+      />
+    `;
+  }
+}

package/src/contacts/events.ts

@@ -436,6 +436,10 @@ export const getEventStyles = () => {
     .assigned .attn {
       color: #777;
     }
+
+    .attachments {
+      margin-top: 1em;
+    }
   `;
 };
 
@@ -674,12 +678,45 @@ export const renderAttachment = (attachment: string): TemplateResult => {
     inner = html`<div class="linked" onclick="goto(event)" 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 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>`;
+      style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);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">
+    return html`<video
+      style="border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      max-width="400px"
+      height="auto"
+      controls="controls"
+    >
       <source src="${url}" type="video/mp4" />
     </video> `;
+  } else if (mediaType === 'audio') {
+    return html`<audio
+      style="border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      src="${url}"
+      type="${attType}"
+      controls
+    >
+      <a target="_" href="${url}">${url}</a>
+    </audio>`;
+  } else if (attType === 'geo') {
+    const [lat, long] = url.split(',');
+    const latFloat = parseFloat(lat);
+    const longFloat = parseFloat(long);
+    const geo = `${lat}000000%2C${long}000000`;
+
+    return html` <iframe
+      style="border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      width="300"
+      height="300"
+      frameborder="0"
+      scrolling="no"
+      marginheight="0"
+      marginwidth="0"
+      src="https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -
+      0.005}000000%2C${latFloat - 0.005}%2C${longFloat +
+      0.005}000000%2C${latFloat +
+      0.005}000000&amp;layer=mapnik&amp;marker=${geo}"
+    ></iframe>`;
   } else {
     return html`<div style="display:flex">
       <temba-icon name="download"></temba-icon>
@@ -688,7 +725,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
   }
 
   return html`<div
-    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
+    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden"
   >
     ${inner}
   </div>`;

package/src/interfaces.ts

@@ -43,6 +43,7 @@ export interface ContactField {
   label: string;
   value_type: string;
   pinned: boolean;
+  priority: number;
 }
 
 export interface ContactGroup {
@@ -83,13 +84,15 @@ export interface Contact {
   stopped: boolean;
   blocked: boolean;
   urns: string[];
-  lang: string;
+  language?: string;
   fields: { [key: string]: string };
   groups: Group[];
   modified_on: string;
   created_on: string;
   last_seen_on: string;
+  status: string;
 
+  flow?: ObjectReference;
   last_msg?: Msg;
   direction?: string;
   ticket: {
@@ -178,4 +181,5 @@ export enum CustomEventType {
   Submitted = 'temba-submitted',
   Redirected = 'temba-redirected',
   NoPath = 'temba-no-path',
+  StoreUpdated = 'temba-store-updated',
 }