@nyaruka/temba-components 0.26.9 → 0.27.0

package/src/contacts/ContactFields.ts

@@ -1,40 +1,35 @@
-import { css, html, TemplateResult } from 'lit';
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
-import { ContactField } from '../interfaces';
 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 {
-        display: flex;
-        flex-wrap: wrap;
-        flex-shrink: 1;
+        --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: var(--curvature);
+        border-radius: 0px;
         align-items: center;
         overflow: hidden;
       }
 
-      .field.set {
-        background: #fff;
-      }
-
-      .field.unset {
-        opacity: 0.4;
-      }
-
-      .field.unset .label {
+      .show-all .unset {
+        display: block;
       }
 
-      .field:hover {
+      .unset {
+        display: none;
       }
 
       .field:hover {
@@ -45,8 +40,8 @@ export class ContactFields extends ContactStoreElement {
 
       .label {
         padding: 0.25em 1em;
-        border-top-left-radius: var(--curvature);
-        border-bottom-left-radius: var(--curvature);
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
         color: #777;
         font-size: 0.9em;
         font-weight: 400;
@@ -60,53 +55,127 @@ export class ContactFields extends ContactStoreElement {
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0.25em 1em;
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
         font-size: 0.9em;
       }
 
       temba-contact-field {
-        margin: 0.3em;
-        min-width: 320px;
-        flex-grow: 1;
+      }
+
+      .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;
+    const value = field.value;
+    this.data.fields[field.key] = value;
     postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
-      fields: { [field.key]: field.value },
-    }).then(() => {
-      this.refresh();
+      fields: { [field.key]: value },
+    }).then((response: any) => {
+      this.updateStoreContact(response.json);
     });
   }
 
+  public handleToggle(evt: Event) {
+    const checkbox = evt.currentTarget as Checkbox;
+    this.showAll = checkbox.checked;
+  }
+
   public render(): TemplateResult {
-    const pinned = this.store.getPinnedFields();
+    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;
+          const priority =
+            this.store.getContactField(bk).priority -
+            this.store.getContactField(ak).priority;
+          if (priority !== 0) {
+            return priority;
+          }
+
+          return ak.localeCompare(bk);
+        });
+
+      if (fieldsToShow.length == 0) {
+        return html`<slot name="empty"></slot>`;
+      }
 
-    const fields = pinned.map((field: ContactField) => {
-      if (this.data) {
-        const value = this.data.fields[field.key];
+      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=${value}
+          value=${v}
           type=${field.value_type}
           @change=${this.handleFieldChanged}
         ></temba-contact-field>`;
-      }
-    });
-
-    return html`${this.data ? html` ${fields} ` : null}`;
+      });
+
+      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/ContactPending.ts

@@ -0,0 +1,236 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ScheduledEvent, ScheduledEventType } from '../interfaces';
+import { StoreElement } from '../store/StoreElement';
+
+const ICONS = {
+  [ScheduledEventType.CampaignEvent]: 'campaign',
+  [ScheduledEventType.ScheduledBroadcast]: 'message-square',
+  [ScheduledEventType.ScheduledTrigger]: 'radio',
+};
+
+export class ContactPending extends StoreElement {
+  @property({ type: String })
+  contact: string;
+
+  @property({ type: Object, attribute: false })
+  data: ScheduledEvent[];
+
+  @property({ type: String })
+  lang_weekly = 'Weekly';
+
+  @property({ type: String })
+  lang_daily = 'Daily';
+
+  @property({ type: String })
+  lang_once = 'Once';
+
+  REPEAT_PERIOD = {
+    O: this.lang_once,
+    D: this.lang_daily,
+    W: this.lang_weekly,
+  };
+
+  static get styles() {
+    return css`
+      :host {
+        --text-color: rgba(50, 50, 50, 0.65);
+      }
+
+      a,
+      .linked {
+        color: var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      a:hover,
+      .linked:hover {
+        text-decoration: underline;
+        color: var(--color-link-primary-hover);
+      }
+
+      .type {
+        background: rgba(0, 0, 0, 0.02);
+        padding: 1em;
+        display: flex;
+        align-self: stretch;
+        --icon-color: rgba(50, 50, 50, 0.25);
+        border-top-left-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+      }
+
+      .details {
+        display: flex;
+        flex-direction: column;
+        padding: 0.5em 1em;
+        flex-grow: 1;
+      }
+
+      .campaign {
+        display: flex;
+        color: var(--text-color);
+        --icon-color: var(--text-color);
+        align-self: center;
+        white-space: nowrap;
+      }
+
+      .message {
+        // font-style: italic;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        padding: 0.1em;
+      }
+
+      .event {
+        margin-bottom: 0.5em;
+        // background: rgba(0,0,0,.02);
+        border-radius: var(--curvature);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
+          0 0 0px 1px rgba(0, 0, 0, 0.02);
+      }
+
+      .time {
+        white-space: nowrap;
+        background: rgba(0, 0, 0, 0.02);
+        border-top-right-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+        display: flex;
+        align-self: stretch;
+        padding: 0 1em;
+        min-width: 5em;
+      }
+
+      .duration {
+        align-self: center;
+        flex-grow: 1;
+        text-align: center;
+      }
+
+      .flow {
+        display: inline-block;
+      }
+
+      temba-tip {
+        cursor: default;
+      }
+
+      .scheduled-by {
+        font-size: 0.85em;
+        display: flex;
+        color: var(--text-color);
+        --icon-color: var(--text-color);
+      }
+
+      .scheduled-by temba-icon {
+        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;
+      }
+    `;
+  }
+
+  protected updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('contact')) {
+      if (this.contact) {
+        this.url = `/contact/scheduled/${this.contact}/`;
+      } else {
+        this.url = null;
+      }
+    }
+  }
+
+  public renderEvent(event: ScheduledEvent) {
+    return html`
+      <div class="event ${event.type}">
+        <div class="type">
+          <temba-icon
+            size="2"
+            name="${event.message ? 'message-square' : '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>
+                `
+              : null}
+            ${event.message
+              ? html` <div class="message">${event.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)"
+                >
+                  <temba-icon name="campaign"></temba-icon>
+                  <div class="name">${event.campaign.name}</div>
+                </div>`
+              : html`
+                  ${event.type === ScheduledEventType.ScheduledTrigger
+                    ? html`<temba-icon
+                        name="${ICONS[event.type]}"
+                      ></temba-icon>`
+                    : null}
+                  <div class="name">
+                    ${this.REPEAT_PERIOD[event.repeat_period]}
+                  </div>
+                `}
+          </div>
+        </div>
+
+        <div class="time">
+          <div class="duration">
+            <temba-tip
+              text=${this.store.formatDate(event.scheduled)}
+              position="left"
+            >
+              ${this.store.getShortDuration(event.scheduled)}
+            </temba-tip>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      if (this.data.length > 0) {
+        return html`
+          ${this.data.map(event => {
+            return this.renderEvent(event);
+          })}
+        `;
+      } else {
+        return html`<slot name="empty"></slot>`;
+      }
+    }
+  }
+}

package/src/contacts/ContactStoreElement.ts

@@ -36,6 +36,10 @@ export class ContactStoreElement extends StoreElement {
     return null;
   }
 
+  public updateStoreContact(value: any) {
+    this.store.updateCache(`/api/v2/contacts.json?uuid=${this.contact}`, value);
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {

package/src/contacts/events.ts

@@ -685,7 +685,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
       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"
+      controls
     >
       <source src="${url}" type="video/mp4" />
     </video> `;

package/src/interfaces.ts

@@ -1,3 +1,34 @@
+export interface Workspace {
+  uuid: string;
+  name: string;
+  country: string;
+  languages: string[];
+  timezone: string;
+  date_style: DateStyle;
+  anon: boolean;
+}
+
+export enum DateStyle {
+  DayFirst = 'day_first',
+  MonthFirst = 'month_first',
+  YearFirst = 'year_first',
+}
+
+export enum ScheduledEventType {
+  CampaignEvent = 'campaign_event',
+  ScheduledBroadcast = 'scheduled_broadcast',
+  ScheduledTrigger = 'scheduled_trigger',
+}
+
+export interface ScheduledEvent {
+  type: ScheduledEventType;
+  scheduled: string;
+  repeat_period: string;
+  campaign?: ObjectReference;
+  flow?: ObjectReference;
+  message?: string;
+}
+
 export interface User {
   id?: number;
   first_name?: string;
@@ -84,13 +115,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: {

package/src/label/Label.ts

@@ -50,6 +50,27 @@ export default class Label extends LitElement {
         text-shadow: none;
       }
 
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
+      .tertiary {
+        background: var(--color-label-tertiary);
+        color: var(--color-label-tertiary-text);
+        --icon-color: var(--color-label-tertiary-text);
+        text-shadow: none;
+      }
+
       .light {
         background: var(--color-overlay-light);
         color: var(--color-overlay-light-text);
@@ -83,6 +104,9 @@ export default class Label extends LitElement {
   @property({ type: Boolean })
   secondary: boolean;
 
+  @property({ type: Boolean })
+  tertiary: boolean;
+
   @property({ type: Boolean })
   light: boolean;
 
@@ -116,6 +140,7 @@ export default class Label extends LitElement {
           clickable: this.clickable,
           primary: this.primary,
           secondary: this.secondary,
+          tertiary: this.tertiary,
           light: this.light,
           dark: this.dark,
           shadow: this.shadow,

package/src/list/TembaMenu.ts

@@ -503,11 +503,13 @@ export class TembaMenu extends RapidElement {
     // go up the tree until we find an endpoint
     const item = this.getMenuItemForSelection(path);
 
-    if (item.endpoint) {
-      this.loadItems(item, false);
-    } else {
-      path.pop();
-      this.refresh(path);
+    if (item) {
+      if (item.endpoint) {
+        this.loadItems(item, false);
+      } else {
+        path.pop();
+        this.refresh(path);
+      }
     }
   }