@nyaruka/temba-components 0.26.9 → 0.26.10

package/src/contacts/ContactBadges.ts

@@ -0,0 +1,104 @@
+import { css, html, TemplateResult } from 'lit';
+import { Group } from '../interfaces';
+import { ContactStoreElement } from './ContactStoreElement';
+
+const STATUS = {
+  S: { name: 'Stopped', icon: 'x-octagon' },
+  B: { name: 'Blocked', icon: 'slash' },
+  V: { name: 'Archived', icon: 'archive' },
+};
+
+export class ContactBadges extends ContactStoreElement {
+  static get styles() {
+    return css`
+      temba-label {
+        margin: 0.3em;
+      }
+
+      .badges {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .flow {
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      const status = STATUS[this.data.status];
+
+      return html`
+        <div class="badges">
+          ${status && this.data.status !== 'A'
+            ? html`
+                <temba-label
+                  class="status"
+                  icon="${status.icon}"
+                  onclick="goto(event)"
+                  href="/contact/${status.name.toLowerCase()}"
+                  clickable
+                  secondary
+                  shadow
+                >
+                  ${status.name}
+                </temba-label>
+              `
+            : null}
+          ${this.data.flow
+            ? html`
+                <temba-label
+                  class="flow"
+                  icon="flow"
+                  onclick="goto(event)"
+                  href="/contact/?search=flow+%3D+${encodeURIComponent(
+                    '"' + this.data.flow.name + '"'
+                  )}"
+                  clickable
+                  tertiary
+                  shadow
+                >
+                  ${this.data.flow.name}
+                </temba-label>
+              `
+            : null}
+          ${this.data.language
+            ? html`
+                <temba-label
+                  class="language"
+                  icon="globe"
+                  onclick="goto(event)"
+                  href="/contact/?search=language+%3D+${encodeURIComponent(
+                    '"' + this.data.language + '"'
+                  )}"
+                  clickable
+                  primary
+                  shadow
+                >
+                  ${this.store.getLanguageName(this.data.language)}
+                </temba-label>
+              `
+            : null}
+          ${this.data.groups.map((group: Group) => {
+            return html`
+              <temba-label
+                class="group"
+                onclick="goto(event)"
+                href="/contact/filter/${group.uuid}/"
+                icon=${group.is_dynamic ? 'atom' : 'users'}
+                clickable
+                light
+                shadow
+              >
+                ${group.name}
+              </temba-label>
+            `;
+          })}
+        </div>
+      `;
+    } else {
+      return null;
+    }
+  }
+}

package/src/contacts/ContactFieldEditor.ts

@@ -1,5 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { TextInput } from '../textinput/TextInput';
 
@@ -26,11 +27,11 @@ export class ContactFieldEditor extends RapidElement {
     return css`
       .prefix {
         background: rgba(0, 0, 0, 0.05);
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
+        border-top-left-radius: var(--curvature-widget);
+        border-bottom-left-radius: var(--curvature-widget);
         color: #888;
         cursor: pointer;
-        width: 100px;
+        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -38,10 +39,14 @@ export class ContactFieldEditor extends RapidElement {
         padding: 0em 0.5em;
       }
 
+      .wrapper {
+        margin-bottom: -1px;
+      }
+
       .prefix .name {
         padding: 0.5em 0em;
         color: #888;
-        width: 80px;
+        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -55,8 +60,8 @@ export class ContactFieldEditor extends RapidElement {
       .popper {
         padding: 0.5em 0.75em;
         background: rgba(240, 240, 240, 1);
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-top-right-radius: var(--curvature-widget);
+        border-bottom-right-radius: var(--curvature-widget);
         --icon-color: #888;
         opacity: 0;
         cursor: default;
@@ -67,47 +72,34 @@ export class ContactFieldEditor extends RapidElement {
         z-index: 1000;
       }
 
-      .postfix temba-icon[name='calendar'] {
-        --icon-color: #e3e3e3;
-      }
-
-      .popper.check {
-        background: rgba(90, 145, 86, 0.15);
-      }
-
-      .popper.none {
-        opacity: 0;
+      temba-icon[name='calendar'] {
+        --icon-color: rgba(0, 0, 0, 0.2);
       }
 
-      .popper.copy temba-icon:hover {
-        --icon-color: #555;
-      }
-
-      .popper.corner-down-left {
-        // background: var(--color-primary-dark);
-        // --icon-color: var(--color-text-light);
-        opacity: 1;
-        transform: scale(1);
+      temba-icon:hover {
+        --icon-color: rgba(0, 0, 0, 0.5);
       }
 
       temba-icon {
         cursor: pointer;
+        --icon-color: rgba(0, 0, 0, 0.3);
       }
 
-      temba-icon[name='check'] {
-        --icon-color: rgb(90, 145, 86);
-      }
-
-      temba-textinput:hover .popper.copy {
+      temba-textinput:hover .popper {
         opacity: 1;
         transform: scale(1);
       }
 
-      temba-textinput:focus .popper.copy {
+      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);
       }
@@ -115,6 +107,10 @@ export class ContactFieldEditor extends RapidElement {
       temba-icon {
         transition: all 200ms ease-in-out;
       }
+
+      temba-icon[name='search'] {
+        margin-right: 1em;
+      }
     `;
   }
 
@@ -139,6 +135,14 @@ export class ContactFieldEditor extends RapidElement {
         });
       }
     }
+
+    if (icon === 'search') {
+      this.fireCustomEvent(CustomEventType.ButtonClicked, {
+        key: this.key,
+        value: this.value,
+      });
+    }
+
     evt.preventDefault();
     evt.stopPropagation();
   }
@@ -166,7 +170,7 @@ export class ContactFieldEditor extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div>
+      <div class="wrapper ${this.value ? 'set' : 'unset'}">
         <temba-textinput
           value="${this.value ? this.value : ''}"
           ?datetimepicker=${this.type === 'datetime'}
@@ -176,22 +180,32 @@ export class ContactFieldEditor extends RapidElement {
         >
           <div class="prefix" slot="prefix">
             <div class="name">${this.name}</div>
-          </div>
-
-          <div class="postfix">
             ${this.type === 'datetime'
-              ? html`<div
-                  style="position: absolute; padding-top: .75em; padding-left: .75em;"
-                >
-                  <temba-icon name="calendar" />
+              ? 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} ${this.icon ? this.icon : 'none'}"
+              class="popper ${this.iconClass}"
               @click=${this.handleIconClick}
             >
-              <temba-icon name="${this.icon}" animatechange="spin"></temba-icon>
+              ${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>

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,27 +55,52 @@ 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;
@@ -91,22 +111,68 @@ export class ContactFields extends ContactStoreElement {
     });
   }
 
-  public render(): TemplateResult {
-    const pinned = this.store.getPinnedFields();
+  public handleToggle(evt: Event) {
+    const checkbox = evt.currentTarget as Checkbox;
+    console.log(checkbox.checked);
+    this.showAll = checkbox.checked;
+  }
 
-    const fields = pinned.map((field: ContactField) => {
-      if (this.data) {
-        const value = this.data.fields[field.key];
+  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=${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/interfaces.ts

@@ -84,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: {

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);
+      }
     }
   }
 

package/src/store/Store.ts

@@ -30,6 +30,9 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'globals' })
   globalsEndpoint: string;
 
+  @property({ type: String, attribute: 'languages' })
+  languagesEndpoint: string;
+
   @property({ type: Object, attribute: false })
   private schema: CompletionSchema;
 
@@ -41,7 +44,7 @@ export class Store extends RapidElement {
 
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
-
+  private languages: any = {};
   private pinnedFields: ContactField[] = [];
 
   // http promise to monitor for completeness
@@ -91,6 +94,22 @@ export class Store extends RapidElement {
       );
     }
 
+    if (this.languagesEndpoint) {
+      fetches.push(
+        getAssets(this.languagesEndpoint).then((results: any[]) => {
+          // convert array of objects to lookup
+          this.languages = results.reduce(function (
+            languages: any,
+            result: any
+          ) {
+            languages[result.value] = result.name;
+            return languages;
+          },
+          {});
+        })
+      );
+    }
+
     if (this.groupsEndpoint) {
       fetches.push(
         getAssets(this.groupsEndpoint).then((groups: any[]) => {
@@ -132,6 +151,10 @@ export class Store extends RapidElement {
     return this.pinnedFields;
   }
 
+  public getLanguageName(iso: string) {
+    return this.languages[iso];
+  }
+
   public isDynamicGroup(uuid: string): boolean {
     const group = this.groups[uuid];
     if (group && group.query) {

package/src/tabpane/Tab.ts

@@ -31,12 +31,25 @@ export class Tab extends RapidElement {
   @property({ type: String })
   icon: string;
 
+  @property({ type: String })
+  selectionColor: string;
+
+  @property({ type: String })
+  selectionBackground: string;
+
   @property({ type: Boolean })
   selected = false;
 
+  @property({ type: Number })
+  count = 0;
+
+  public hasBadge() {
+    return this.count > 0;
+  }
+
   public render(): TemplateResult {
     return html`<slot
       class="${getClasses({ selected: this.selected })}"
-    ></slot>`;
+    ></slot> `;
   }
 }