@nyaruka/temba-components 0.29.3 → 0.31.1

package/src/list/RunList.ts

@@ -0,0 +1,353 @@
+import { html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { Checkbox } from '../checkbox/Checkbox';
+import { Select } from '../select/Select';
+import { capitalize } from '../utils';
+import { TembaList } from './TembaList';
+
+const FLOW_COLOR = 'rgb(223, 65, 159)';
+
+export class RunList extends TembaList {
+  @property({ type: String })
+  flow: string;
+
+  @property({ type: Object, attribute: false })
+  results: any[];
+
+  @property({ type: Boolean })
+  responses = true;
+
+  @property({ type: Object })
+  resultPreview: any;
+
+  @property({ type: Object })
+  selectedRun: any;
+
+  private resultKeys = {};
+
+  public firstUpdated(changedProperties: Map<string, any>) {
+    super.firstUpdated(changedProperties);
+  }
+
+  public updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('responses') || changedProperties.has('flow')) {
+      if (this.flow) {
+        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${
+          this.responses ? '&responded=1' : ''
+        }`;
+      }
+    }
+
+    if (changedProperties.has('resultPreview')) {
+      this.createRenderOption();
+    }
+
+    if (changedProperties.has('results')) {
+      if (this.results) {
+        const select = this.shadowRoot.querySelector('temba-select') as Select;
+        select.setOptions(this.results);
+        this.resultKeys = this.results.reduce(
+          (current, result) => ({ ...current, [result.key]: result }),
+          {}
+        );
+      }
+    }
+  }
+
+  public renderResultPreview(run: any) {
+    if (this.resultPreview) {
+      const runResult = run.values[this.resultPreview.key];
+      if (runResult) {
+        if (this.resultPreview.categories.length > 1) {
+          if (runResult.category) {
+            return runResult.category;
+          }
+        } else {
+          return runResult.value;
+        }
+      }
+    }
+    return null;
+  }
+
+  public removeRun(id: number) {
+    this.items = this.items.filter(run => run.id !== id);
+    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);
+    this.requestUpdate('cursorIndex');
+  }
+
+  public getIcon(run: any): TemplateResult {
+    let icon = null;
+    if (run.exit_type == 'completed') {
+      icon = html`<temba-icon
+        name="check"
+        style="--icon-color:#666;margin-left:0.5em"
+      />`;
+    } else if (run.exit_type == 'interrupted') {
+      icon = html`<temba-icon
+        name="x-octagon"
+        style="--icon-color:${FLOW_COLOR};margin-left:0.5em"
+      />`;
+    } else if (run.exit_type == 'expired') {
+      icon = html`<temba-icon
+        name="clock"
+        style="--icon-color:${FLOW_COLOR};margin-left:0.5em"
+      />`;
+    } else if (!run.exit_type) {
+      if (run.responded) {
+        icon = html`<temba-icon
+          name="activity"
+          style="--icon-color:var(--color-primary-dark);margin-left:0.5em"
+        />`;
+      } else {
+        icon = html`<temba-icon
+          name="hourglass"
+          style="--icon-color:var(--color-primary-dark);margin-left:0.5em"
+        />`;
+      }
+    }
+    return icon;
+  }
+
+  public createRenderOption() {
+    this.renderOption = (run: any): TemplateResult => {
+      let statusStyle = '';
+
+      if (!run.exited_on) {
+        statusStyle = 'font-weight:400;';
+      }
+
+      if (!run.responded) {
+        statusStyle += '';
+      }
+
+      return html`
+        <div class="row" style="${statusStyle}display:flex;align-items:center">
+          <div
+            style="width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
+          >
+            <temba-contact-name
+              name=${run.contact.name}
+              urn=${run.contact.urn}
+              icon-size="15"
+            />
+          </div>
+
+          <div
+            style="margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;"
+          >
+            ${this.renderResultPreview(run)}
+          </div>
+
+          <div style="flex-shrink:1">
+            ${this.store.getShortDuration(run.modified_on)}
+          </div>
+          ${this.getIcon(run)}
+        </div>
+      `;
+    };
+  }
+
+  public getRefreshEndpoint() {
+    if (this.items.length > 0) {
+      const modifiedOn = this.items[0].modified_on;
+      return this.endpoint + '&after=' + modifiedOn;
+    }
+    return this.endpoint;
+  }
+
+  public toggleResponded() {
+    this.responses = (
+      this.shadowRoot.querySelector('#responded') as Checkbox
+    ).checked;
+  }
+
+  public handleColumnChanged(event: any) {
+    if (event.target.values.length > 0) {
+      this.resultPreview = event.target.values[0];
+    } else {
+      this.resultPreview = null;
+    }
+  }
+
+  public handleSelected(selected: any) {
+    this.selectedRun = selected;
+  }
+
+  public getListStyle(): string {
+    return '';
+  }
+
+  public renderHeader(): TemplateResult {
+    return html`
+      <div style="display:flex;width:100%;margin-bottom: 1em;">
+        <div style="flex-grow:1">
+          ${this.results
+            ? html`
+                <temba-select
+                  clearable
+                  placeholder="Result Preview"
+                  @change=${this.handleColumnChanged}
+                />
+              `
+            : null}
+        </div>
+        <div style="margin-left:1em;">
+          <temba-checkbox
+            id="responded"
+            label="Responses Only"
+            checked="true"
+            @click=${this.toggleResponded}
+          />
+        </div>
+      </div>
+      <div
+        style="
+        font-size:0.8em;
+        color:rgba(0,0,0,.4);
+        text-align:right;
+        background:#f9f9f9;
+        border: 1px solid var(--color-widget-border);
+        margin-bottom:-0.5em; 
+        padding-bottom: 0.6em;
+        padding-top: 0.3em;
+        padding-right: 4.5em;
+        border-top-right-radius: var(--curvature);
+        border-top-left-radius: var(--curvature)
+    "
+      >
+        Last Updated
+      </div>
+    `;
+  }
+
+  public renderFooter(): TemplateResult {
+    if (!this.selectedRun || !this.resultKeys) {
+      return null;
+    }
+
+    const exitType = this.selectedRun.exit_type;
+    const resultKeys = Object.keys(this.selectedRun.values);
+
+    return html` <div
+      style="margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);"
+    >
+      <div style="display:flex;flex-direction:column;">
+        <div
+          style="font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)"
+        >
+          <div>
+            <temba-contact-name
+              style="cursor:pointer"
+              name=${this.selectedRun.contact.name}
+              urn=${this.selectedRun.contact.urn}
+              onclick="goto(event, this)"
+              href="/contact/read/${this.selectedRun.contact.uuid}/"
+            ></temba-contact-name>
+            <div
+              style="display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em"
+            >
+              ${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.getShortDuration(
+                            this.selectedRun.created_on,
+                            this.selectedRun.exited_on,
+                            true
+                          )}`
+                        : null}
+                      ${exitType == 'interrupted' || exitType == 'expired'
+                        ? html` after
+                          ${this.store.getShortDuration(
+                            this.selectedRun.created_on,
+                            this.selectedRun.exited_on,
+                            true
+                          )}`
+                        : null}
+                    </div>
+                  `
+                : html`${this.getIcon(this.selectedRun)}
+                    <div style="margin-left:0.5em;flex-grow:1">
+                      Active for
+                      ${this.store.getShortDuration(
+                        this.selectedRun.created_on,
+                        null,
+                        true
+                      )}
+                    </div>`}
+            </div>
+          </div>
+          <div style="flex-grow:1"></div>
+          <div style="display:flex;flex-direction: column">
+            <div style="font-size:0.75em">
+              ${new Date(this.selectedRun.created_on).toLocaleString()}
+            </div>
+            <div
+              style="font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em"
+            >
+              Started
+            </div>
+          </div>
+          <temba-icon
+            clickable
+            style="margin-left:0.75em;"
+            name="trash"
+            onclick="deleteRun(${this.selectedRun.id});"
+          ></temba-icon>
+        </div>
+
+        ${resultKeys.length > 0
+          ? html`
+              <div
+                style="padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;"
+              >
+                <div
+                  style="display:flex;font-size:1.2em;position:relative;right:0px"
+                >
+                  <div style="flex-grow:1"></div>
+                </div>
+
+                <table width="100%">
+                  <tr>
+                    <th style="text-align:left" width="25%">Result</th>
+                    <th style="text-align:left" width="25%">Category</th>
+                    <th style="text-align:left">Value</th>
+                  </tr>
+
+                  ${Object.keys(this.selectedRun.values).map((key: string) => {
+                    const result = this.selectedRun.values[key];
+                    const meta = this.resultKeys[key];
+
+                    // if our result is no longer represented in the flow, skip it
+                    if (meta) {
+                      return html`<tr>
+                        <td>${result.name}</td>
+                        <td>
+                          ${meta.categories.length > 1 ? result.category : '--'}
+                        </td>
+                        <td>${result.value}</td>
+                      </tr>`;
+                    }
+                    return null;
+                  })}
+                </table>
+              </div>
+            `
+          : null}
+      </div>
+    </div>`;
+  }
+
+  constructor() {
+    super();
+    this.reverseRefresh = false;
+    this.valueKey = 'uuid';
+    this.hideShadow = true;
+    this.createRenderOption();
+  }
+}

package/src/list/TembaList.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
+import { Store } from '../store/Store';
 import { fetchResultsPage, ResultsPage } from '../utils';
 
 const DEFAULT_REFRESH = 10000;
@@ -37,6 +38,9 @@ export class TembaList extends RapidElement {
   @property({ type: Boolean })
   collapsed: boolean;
 
+  @property({ type: Boolean })
+  hideShadow: boolean;
+
   @property({ attribute: false })
   getNextRefresh: (firstOption: any) => any;
 
@@ -56,6 +60,8 @@ export class TembaList extends RapidElement {
   @property({ type: String })
   refreshKey = '0';
 
+  reverseRefresh = true;
+
   // our next page from our endpoint
   nextPage: string = null;
 
@@ -63,6 +69,8 @@ export class TembaList extends RapidElement {
   clearRefreshTimeout: any;
   pending: AbortController[] = [];
 
+  store: Store;
+
   // used for testing only
   preserve: boolean;
 
@@ -72,9 +80,6 @@ export class TembaList extends RapidElement {
   static get styles() {
     return css`
       :host {
-        display: block;
-        height: 100%;
-        width: 100%;
       }
 
       temba-options {
@@ -82,18 +87,12 @@ export class TembaList extends RapidElement {
         width: 100%;
         flex-grow: 1;
       }
-
-      .wrapper {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        align-items: center;
-      }
     `;
   }
 
   constructor() {
     super();
+    this.store = document.querySelector('temba-store') as Store;
     this.handleSelection.bind(this);
   }
 
@@ -139,7 +138,9 @@ export class TembaList extends RapidElement {
     }
 
     if (changedProperties.has('mostRecentItem')) {
-      this.fireCustomEvent(CustomEventType.Refreshed);
+      if (this.mostRecentItem) {
+        this.fireCustomEvent(CustomEventType.Refreshed);
+      }
     }
 
     if (changedProperties.has('cursorIndex')) {
@@ -221,6 +222,11 @@ export class TembaList extends RapidElement {
    * Refreshes the first page, updating any found items in our list
    */
   private async refreshTop(): Promise<void> {
+    const refreshEndpoint = this.getRefreshEndpoint();
+    if (!refreshEndpoint) {
+      return;
+    }
+
     // cancel any outstanding requests
     while (this.pending.length > 0) {
       const pending = this.pending.pop();
@@ -256,7 +262,19 @@ export class TembaList extends RapidElement {
         });
 
         // insert our new items at the front
-        const newItems = [...page.results.reverse(), ...items];
+        let results = page.results;
+        if (this.reverseRefresh) {
+          results = page.results.reverse();
+        }
+        const newItems = [...results, ...items];
+
+        const topItem = newItems[0];
+        if (
+          !this.mostRecentItem ||
+          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)
+        ) {
+          this.mostRecentItem = topItem;
+        }
 
         if (prevItem) {
           const newItem = newItems[this.cursorIndex];
@@ -324,6 +342,8 @@ export class TembaList extends RapidElement {
       } catch (error) {
         // aborted
         this.reset();
+
+        console.log('error, resetting');
         return;
       }
 
@@ -410,6 +430,18 @@ export class TembaList extends RapidElement {
     }
   }
 
+  public renderHeader(): TemplateResult {
+    return null;
+  }
+
+  public renderFooter(): TemplateResult {
+    return null;
+  }
+
+  public getListStyle() {
+    return '';
+  }
+
   private handleSelection(event: CustomEvent) {
     const { selected, index } = event.detail;
 
@@ -421,10 +453,13 @@ export class TembaList extends RapidElement {
   }
 
   public render(): TemplateResult {
-    return html`<div class="wrapper">
+    return html`
+      ${this.renderHeader()}
       <temba-options
+        style="${this.getListStyle()}"
         ?visible=${true}
         ?block=${true}
+        ?hideShadow=${this.hideShadow}
         ?collapsed=${this.collapsed}
         ?loading=${this.loading}
         .renderOption=${this.renderOption}
@@ -436,6 +471,7 @@ export class TembaList extends RapidElement {
       >
         <slot></slot>
       </temba-options>
-    </div>`;
+      ${this.renderFooter()}
+    `;
   }
 }

package/src/options/Options.ts

@@ -16,7 +16,6 @@ export class Options extends RapidElement {
       .options-container {
         background: var(--color-widget-bg-focused);
         user-select: none;
-        box-shadow: var(--options-shadow);
         border-radius: var(--curvature-widget);
         overflow: hidden;
         margin-top: var(--options-margin-top);
@@ -32,6 +31,10 @@ export class Options extends RapidElement {
         border: 1px transparent;
       }
 
+      .shadow {
+        box-shadow: var(--options-shadow);
+      }
+
       .anchored {
         position: fixed;
       }
@@ -52,12 +55,19 @@ export class Options extends RapidElement {
       }
 
       :host([block]) {
-        box-shadow: var(--options-block-shadow);
         border-radius: var(--curvature);
         display: block;
         height: 100%;
       }
 
+      :host([block]) .shadow {
+        box-shadow: var(--options-block-shadow);
+      }
+
+      .bordered {
+        border: 1px solid var(--color-widget-border) !important;
+      }
+
       :host([block]) .options {
         margin-bottom: 1.5em;
       }
@@ -218,6 +228,9 @@ export class Options extends RapidElement {
   @property({ type: Boolean })
   collapsed: boolean;
 
+  @property({ type: Boolean })
+  hideShadow = false;
+
   @property({ attribute: false })
   getName: { (option: any): string } = function (option: any) {
     return option[this.nameKey || 'name'];
@@ -589,6 +602,8 @@ export class Options extends RapidElement {
       top: this.poppedTop,
       anchored: !this.block,
       loading: this.loading,
+      shadow: !this.hideShadow,
+      bordered: this.hideShadow,
     });
 
     const classesInner = getClasses({

package/src/store/Store.ts

@@ -179,11 +179,28 @@ export class Store extends RapidElement {
     return 'en';
   }
 
-  public getShortDuration(isoDate: string) {
-    const scheduled = DateTime.fromISO(isoDate);
-    const now = DateTime.now();
+  public getShortDuration(
+    isoDateA: string,
+    isoDateB: string = null,
+    showSeconds = false
+  ) {
+    const scheduled = DateTime.fromISO(isoDateA);
+    const now = isoDateB ? DateTime.fromISO(isoDateB) : 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,

package/src/tabpane/TabPane.ts

@@ -177,7 +177,9 @@ export class TabPane extends RapidElement {
                 ? html`
                     <div class="badge">
                       ${tab.count > 0
-                        ? html`<div class="count">${tab.count}</div>`
+                        ? html`<div class="count">
+                            ${tab.count.toLocaleString()}
+                          </div>`
                         : null}
                     </div>
                   `

package/src/utils/index.ts

@@ -599,3 +599,6 @@ export enum COOKIE_KEYS {
   MENU_COLLAPSED = 'menu-collapsed',
   TICKET_SHOW_DETAILS = 'tickets.show-details',
 }
+
+export const capitalize = ([first, ...rest], locale = navigator.language) =>
+  first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('');

package/src/vectoricon/VectorIcon.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 12;
+const ICON_VERSION = 13;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -36,7 +36,7 @@ export class VectorIcon extends LitElement {
   animationDuration = 200;
 
   @property({ type: String })
-  href = '';
+  src = '';
 
   @property({ type: Number, attribute: false })
   steps = 2;
@@ -200,7 +200,7 @@ export class VectorIcon extends LitElement {
           this.steps}ms
           ${this.easing}"
           class="${getClasses({
-            sheet: this.href === '',
+            sheet: this.src === '',
             [this.animateChange]: !!this.animateChange,
             [this.animateChange + '-' + this.animationStep]:
               this.animationStep > 0,
@@ -210,8 +210,8 @@ export class VectorIcon extends LitElement {
           })}"
         >
           <use
-            href="${this.href
-              ? this.href
+            href="${this.src
+              ? this.src
               : `${
                   this.prefix || (window as any).static_url || '/static/'
                 }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${

package/static/css/temba-components.css

@@ -104,7 +104,7 @@
 
     --icon-color: var(--text-color);
     --icon-color-hover: var(--icon-color);
-    --icon-color-circle-hover: rgb(245, 245, 245);
+    --icon-color-circle-hover: rgba(245, 245, 245, .8);
 
     --transition-speed: 250ms;
     --event-padding: 0.5em 1em;