@nyaruka/temba-components 0.33.3 → 0.33.5

package/src/fields/FieldManager.ts

@@ -0,0 +1,353 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactField, CustomEventType } from '../interfaces';
+
+import { SortableList } from '../list/SortableList';
+import { StoreElement } from '../store/StoreElement';
+import { postJSON } from '../utils';
+
+const TYPE_NAMES = {
+  text: 'Text',
+  numeric: 'Number',
+  number: 'Number',
+  datetime: 'Date & Time',
+  state: 'State',
+  ward: 'Ward',
+  district: 'District',
+};
+
+const matches = (field: ContactField, query: string): boolean => {
+  if (!query) {
+    return true;
+  }
+  const search = (
+    field.label +
+    field.key +
+    TYPE_NAMES[field.value_type]
+  ).toLowerCase();
+  if (search.toLowerCase().indexOf(query) > -1) {
+    return true;
+  }
+  return false;
+};
+
+export class FieldManager extends StoreElement {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        min-height: 0px;
+      }
+
+      .featured,
+      .other-fields {
+        background: #fff;
+        border-radius: var(--curvature);
+        box-shadow: var(--shadow);
+        margin-bottom: 1em;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .featured {
+        max-height: 40%;
+      }
+
+      .other-fields {
+        flex-grow: 2;
+        min-height: 0px;
+      }
+
+      temba-textinput {
+        margin-bottom: 1em;
+      }
+
+      .scroll-box {
+        overflow-y: auto;
+        flex-grow: 1;
+        flex-direction: column;
+        display: flex;
+      }
+
+      .header temba-icon {
+        margin-right: 0.5em;
+      }
+
+      .label {
+        flex-grow: 1;
+      }
+
+      .header {
+        padding: 0.5em 1em;
+        display: flex;
+        align-items: flex-start;
+        border-bottom: 1px solid var(--color-widget-border);
+      }
+
+      .featured-field {
+        user-select: none;
+      }
+
+      temba-sortable-list {
+        padding: 0.5em 0em;
+        width: 100%;
+        overflow-y: auto;
+      }
+
+      .scroll-box {
+        padding: 0.5em 0em;
+      }
+
+      temba-icon[name='usages']:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      .field:hover temba-icon[name='delete_small'] {
+        opacity: 1 !important;
+        cursor: pointer !important;
+        pointer-events: all !important;
+      }
+
+      temba-icon[name='delete_small']:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      .field {
+        border: 1px solid transparent;
+        margin: 0 0.5em;
+        border-radius: var(--curvature);
+      }
+
+      .featured temba-sortable-list .field:hover {
+        cursor: move;
+        border-color: #e6e6e6;
+        background: #fcfcfc;
+      }
+    `;
+  }
+
+  @property({ type: String, attribute: 'priority-endpoint' })
+  priorityEndpoint: string;
+
+  @property({ type: Object, attribute: false })
+  featuredFields: ContactField[];
+
+  @property({ type: Object, attribute: false })
+  otherFieldKeys: string[] = [];
+
+  @property({ type: String })
+  draggingId: string;
+
+  @property({ type: String })
+  query = '';
+
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+    this.url = this.store.fieldsEndpoint;
+  }
+
+  private filterFields() {
+    const filteredKeys = this.store.getFieldKeys().filter(key => {
+      const field = this.store.getContactField(key);
+      if (field.featured) {
+        return false;
+      }
+      return matches(field, this.query);
+    });
+
+    // sort by the label instead of the key
+    filteredKeys.sort((a, b) => {
+      return this.store
+        .getContactField(a)
+        .label.localeCompare(this.store.getContactField(b).label);
+    });
+
+    const featured: ContactField[] = [];
+    this.store.getFeaturedFields().forEach(field => {
+      if (matches(field, this.query)) {
+        featured.push(field);
+      }
+    });
+
+    this.otherFieldKeys = filteredKeys;
+    this.featuredFields = featured;
+  }
+
+  protected updated(
+    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.update(properties);
+    if (properties.has('data')) {
+      this.filterFields();
+    } else if (properties.has('query')) {
+      this.filterFields();
+    }
+  }
+
+  private handleSaveOrder(event) {
+    const list = event.currentTarget as SortableList;
+    postJSON(
+      this.priorityEndpoint,
+      list
+        .getIds()
+        .reverse()
+        .reduce((map, key, idx) => {
+          map[key] = idx;
+          return map;
+        }, {})
+    ).then(() => {
+      this.store.refreshFields();
+    });
+  }
+
+  private handleOrderChanged(event) {
+    const swapsies = event.detail;
+    const temp = this.featuredFields[swapsies.fromIdx];
+    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];
+    this.featuredFields[swapsies.toIdx] = temp;
+    this.requestUpdate('featuredFields');
+  }
+
+  private handleDragStart(event) {
+    this.draggingId = event.detail.id;
+  }
+
+  private handleDragStop() {
+    this.draggingId = null;
+  }
+
+  private handleFieldAction(event: MouseEvent) {
+    const ele = event.target as HTMLDivElement;
+    const key = ele.dataset.key;
+    const action = ele.dataset.action;
+    this.fireCustomEvent(CustomEventType.Selection, { key, action });
+  }
+
+  private handleSearch(event) {
+    this.query = (event.target.value || '').trim();
+  }
+
+  private hasUsages(field: ContactField): boolean {
+    return (
+      field.usages.campaign_events + field.usages.flows + field.usages.groups >
+      0
+    );
+  }
+
+  private renderField(field: ContactField) {
+    return html`
+      <div
+        class="field sortable"
+        id="${field.key}"
+        style="
+            display: flex; 
+            flex-direction: row; 
+            align-items: center;
+            padding: 0.25em 1em; 
+            ${field.key === this.draggingId
+          ? 'background: var(--color-selection)'
+          : ''}"
+      >
+        <div
+          style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
+        >
+          <span
+            @click=${this.handleFieldAction}
+            data-key=${field.key}
+            data-action="update"
+            style="color: var(--color-link-primary); cursor:pointer;"
+          >
+            ${field.label}
+          </span>
+          ${this.hasUsages(field)
+            ? html`
+                <temba-icon
+                  size="0.8"
+                  style="color: #ccc; margin-left: 0.7em;"
+                  name="usages"
+                  data-key=${field.key}
+                  data-action="usages"
+                  @click=${this.handleFieldAction}
+                  clickable
+                ></temba-icon>
+              `
+            : null}
+          <div class="flex-grow:1"></div>
+        </div>
+        <div style="flex-grow:1; font-family: monospace; font-size:0.8em;">
+          @fields.${field.key}
+        </div>
+        <div>${TYPE_NAMES[field.value_type]}</div>
+        <temba-icon
+          style="pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0"
+          name="delete_small"
+          data-key=${field.key}
+          data-action="delete"
+          @click=${this.handleFieldAction}
+        ></temba-icon>
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (!this.featuredFields) {
+      return null;
+    }
+
+    return html`
+      <temba-textinput
+        id="search"
+        placeholder="Search"
+        @change=${this.handleSearch}
+        clearable
+      ></temba-textinput>
+
+      ${this.featuredFields.length > 0
+        ? html`
+            <div class="featured">
+              <div class="header">
+                <temba-icon name="featured"></temba-icon>
+                <div class="label">Featured</div>
+              </div>
+              ${this.query
+                ? html`
+                    <div class="scroll-box">
+                      ${this.featuredFields.map(field =>
+                        this.renderField(field)
+                      )}
+                    </div>
+                  `
+                : html`
+                    <temba-sortable-list
+                      @change=${this.handleSaveOrder}
+                      @temba-order-changed=${this.handleOrderChanged}
+                      @temba-drag-start=${this.handleDragStart}
+                      @temba-drag-stop=${this.handleDragStop}
+                    >
+                      ${this.featuredFields.map(field =>
+                        this.renderField(field)
+                      )}
+                    </temba-sortable-list>
+                  `}
+            </div>
+          `
+        : null}
+
+      <div class="other-fields">
+        <div class="header">
+          <temba-icon name="fields"></temba-icon>
+          <div class="label">Everything Else</div>
+        </div>
+        <div class="scroll-box">
+          ${this.otherFieldKeys.map(field =>
+            this.renderField(this.store.getContactField(field))
+          )}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/interfaces.ts

@@ -97,8 +97,9 @@ export interface ContactField {
   key: string;
   label: string;
   value_type: string;
-  pinned: boolean;
+  featured: boolean;
   priority: number;
+  usages: { campaign_events: number; flows: number; groups: number };
 }
 
 export interface ContactGroup {
@@ -239,4 +240,7 @@ export enum CustomEventType {
   NoPath = 'temba-no-path',
   StoreUpdated = 'temba-store-updated',
   Ready = 'temba-ready',
+  OrderChanged = 'temba-order-changed',
+  DragStart = 'temba-drag-start',
+  DragStop = 'temba-drag-stop',
 }

package/src/list/SortableList.ts

@@ -0,0 +1,224 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+
+/**
+ * A simple list that can be sorted by dragging
+ */
+
+// how far we have to drag before it starts
+const DRAG_THRESHOLD = 5;
+export class SortableList extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        margin: auto;
+      }
+
+      .container {
+        user-select: none;
+      }
+
+      .dragging {
+        background: var(--color-selection);
+      }
+
+      .sortable {
+        transition: all 300ms ease-in-out;
+        display: flex;
+        padding: 0.4em 0;
+      }
+
+      .sortable:hover temba-icon {
+        opacity: 1;
+        cursor: move;
+      }
+
+      .ghost {
+        position: absolute;
+        opacity: 0.5;
+        transition: none;
+      }
+
+      .slot {
+        flex-grow: 1;
+      }
+
+      slot > * {
+        user-select: none;
+      }
+
+      temba-icon {
+        opacity: 0.1;
+        padding: 0.2em 0.5em;
+        transition: all 300ms ease-in-out;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  draggingId: string;
+
+  ghostElement: HTMLDivElement = null;
+  downEle: HTMLDivElement = null;
+  xOffset = 0;
+  yOffset = 0;
+  yDown = 0;
+
+  draggingIdx = -1;
+  draggingEle = null;
+
+  public constructor() {
+    super();
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+  }
+
+  public getIds() {
+    return this.shadowRoot
+      .querySelector('slot')
+      .assignedElements()
+      .map(ele => ele.id);
+  }
+
+  private getRowIndex(id: string): number {
+    return this.shadowRoot
+      .querySelector('slot')
+      .assignedElements()
+      .findIndex(ele => ele.id === id);
+  }
+
+  private getOverlappingElement(mouseY: number): HTMLDivElement {
+    const ghostRect = this.ghostElement.getBoundingClientRect();
+
+    const ele = this.shadowRoot
+      .querySelector('slot')
+      .assignedElements()
+      .find(otherEle => {
+        const rect = otherEle.getBoundingClientRect();
+
+        // don't return ourselves
+        if (otherEle.id === this.ghostElement.id) {
+          return false;
+        }
+
+        if (mouseY > this.yDown) {
+          // moving down
+          return ghostRect.top < rect.bottom && ghostRect.bottom > rect.bottom;
+        } else {
+          // moving up
+          return rect.top < ghostRect.bottom && rect.bottom > ghostRect.bottom;
+        }
+      });
+    return ele as HTMLDivElement;
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    let ele = event.target as HTMLDivElement;
+    ele = ele.closest('.sortable');
+    if (ele) {
+      this.downEle = ele;
+      this.draggingId = ele.id;
+      this.draggingIdx = this.getRowIndex(ele.id);
+      this.draggingEle = ele;
+
+      this.xOffset = event.clientX - ele.offsetLeft;
+      this.yOffset = event.clientY - ele.offsetTop;
+      this.yDown = event.clientY;
+
+      document.addEventListener('mousemove', this.handleMouseMove);
+      document.addEventListener('mouseup', this.handleMouseUp);
+    }
+  }
+
+  private handleMouseMove(event: MouseEvent) {
+    const scrollTop = this.shadowRoot
+      .querySelector('slot')
+      .assignedElements()[0].parentElement.scrollTop;
+
+    if (
+      !this.ghostElement &&
+      this.downEle &&
+      Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD
+    ) {
+      this.fireCustomEvent(CustomEventType.DragStart, {
+        id: this.downEle.id,
+      });
+
+      this.ghostElement = this.downEle.cloneNode(true) as HTMLDivElement;
+      this.ghostElement.classList.add('ghost');
+
+      const computedStyle = getComputedStyle(this.downEle);
+
+      this.ghostElement.style.width =
+        this.downEle.clientWidth -
+        parseFloat(computedStyle.paddingLeft) -
+        parseFloat(computedStyle.paddingRight) +
+        'px';
+      const container = this.shadowRoot.querySelector('.container');
+
+      container.appendChild(this.ghostElement);
+
+      this.downEle = null;
+    }
+
+    if (this.ghostElement) {
+      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
+      this.ghostElement.style.top =
+        event.clientY - this.yOffset - scrollTop + 'px';
+
+      const other = this.getOverlappingElement(event.clientY);
+      if (other) {
+        const otherIdx = this.getRowIndex(other.id);
+        const dragId = this.ghostElement.id;
+        const otherId = other.id;
+
+        this.fireCustomEvent(CustomEventType.OrderChanged, {
+          from: dragId,
+          to: otherId,
+          fromIdx: this.draggingIdx,
+          toIdx: otherIdx,
+        });
+
+        // TODO: Dont do swapping, just send the full order?
+        this.draggingIdx = otherIdx;
+        this.draggingId = otherId;
+      }
+    }
+  }
+
+  private handleMouseUp() {
+    if (this.draggingId) {
+      this.fireCustomEvent(CustomEventType.DragStop, {
+        id: this.draggingId,
+      });
+
+      this.draggingId = null;
+      this.downEle = null;
+
+      if (this.ghostElement) {
+        this.ghostElement.remove();
+        this.ghostElement = null;
+      }
+    }
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="container">
+        <slot @mousedown=${this.handleMouseDown}></slot>
+      </div>
+    `;
+  }
+}

package/src/store/Store.ts

@@ -64,7 +64,7 @@ export class Store extends RapidElement {
   private groups: { [uuid: string]: ContactGroup } = {};
   private languages: any = {};
   private workspace: Workspace;
-  private pinnedFields: ContactField[] = [];
+  private featuredFields: ContactField[] = [];
 
   private langService = new HumanizeDurationLanguage();
   private humanizer = new HumanizeDuration(this.langService);
@@ -103,24 +103,7 @@ export class Store extends RapidElement {
     }
 
     if (this.fieldsEndpoint) {
-      fetches.push(
-        getAssets(this.fieldsEndpoint).then((assets: Asset[]) => {
-          this.keyedAssets['fields'] = [];
-          this.pinnedFields = [];
-
-          assets.forEach((field: ContactField) => {
-            this.keyedAssets['fields'].push(field.key);
-            this.fields[field.key] = field;
-            if (field.pinned) {
-              this.pinnedFields.push(field);
-            }
-          });
-
-          this.pinnedFields.sort((a, b) => {
-            return b.priority - a.priority;
-          });
-        })
-      );
+      fetches.push(this.refreshFields());
     }
 
     if (this.globalsEndpoint) {
@@ -183,6 +166,32 @@ export class Store extends RapidElement {
     return 'en';
   }
 
+  public refreshFields() {
+    return getAssets(this.fieldsEndpoint).then((assets: Asset[]) => {
+      this.keyedAssets['fields'] = [];
+      this.featuredFields = [];
+
+      assets.forEach((field: ContactField) => {
+        this.keyedAssets['fields'].push(field.key);
+        this.fields[field.key] = field;
+        if (field.featured) {
+          this.featuredFields.push(field);
+        }
+      });
+
+      this.featuredFields.sort((a, b) => {
+        return b.priority - a.priority;
+      });
+
+      this.keyedAssets['fields'].sort();
+
+      this.fireCustomEvent(CustomEventType.StoreUpdated, {
+        url: this.fieldsEndpoint,
+        data: this.keyedAssets['fields'],
+      });
+    });
+  }
+
   public getShortDuration(
     isoDateA: string,
     isoDateB: string = null,
@@ -232,12 +241,16 @@ export class Store extends RapidElement {
     return this.keyedAssets;
   }
 
+  public getFieldKeys(): string[] {
+    return this.keyedAssets['fields'];
+  }
+
   public getContactField(key: string): ContactField {
     return this.fields[key];
   }
 
-  public getPinnedFields(): ContactField[] {
-    return this.pinnedFields;
+  public getFeaturedFields(): ContactField[] {
+    return this.featuredFields;
   }
 
   public getLanguageName(iso: string) {

package/src/store/StoreElement.ts

@@ -32,6 +32,7 @@ export class StoreElement extends RapidElement {
     if (event.detail.url === this.url) {
       this.data = event.detail.data;
       this.fireCustomEvent(CustomEventType.Refreshed, { data: this.data });
+      // console.log("Updated!", this.data);
     }
   }