@nyaruka/temba-components 0.33.2 → 0.33.4

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

package/src/tabpane/TabPane.ts

@@ -16,7 +16,6 @@ export class TabPane extends RapidElement {
 
       .tabs {
         display: flex;
-        padding-left: 0.18em;
       }
 
       .tab {
@@ -25,6 +24,7 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        font-size: 1.1em;
         align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
@@ -48,7 +48,7 @@ export class TabPane extends RapidElement {
         max-width: 80px;
         margin-right: 0.4em;
         overflow: hidden;
-        transition: max-width 500ms ease-in-out;
+        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -70,12 +70,27 @@ export class TabPane extends RapidElement {
         }
       }
 
-      .tab.selected {
+      .tab {
+        transform: scale(0.9) translateY(-0.05em);
+        --icon-color: #aaa;
+        color: #aaa;
+      }
+
+      .tab.selected,
+      .tab.selected:hover {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
-        transform: scale(1.05) translateY(-0.05em);
+        transform: scale(1) translateY(0em);
         z-index: 0;
+        --icon-color: #666;
+        color: #666;
+      }
+
+      .tab:hover {
+        --icon-color: #666;
+        color: #666;
+        background: rgba(0, 0, 0, 0.02);
       }
 
       .pane {

package/src/vectoricon/index.ts

@@ -42,6 +42,7 @@ export enum Icon {
   inbox = 'inbox-01',
   label = 'tag-01',
   language = 'globe-01',
+  link = 'link-external-01',
   log = 'file-02',
   menu = 'menu-01',
   menu_collapse = 'chevron-left-double',
@@ -53,6 +54,7 @@ export enum Icon {
   org_suspended = 'slash-circle-01',
   org_verified = 'check-verified-02',
   org_flagged = 'flag-01',
+  featured = 'star-01',
   resthooks = 'share-07',
   restore = 'play',
   search = 'search-refraction',
@@ -60,6 +62,7 @@ export enum Icon {
   select_clear = 'x',
   service = 'magic-wand-01',
   settings = 'settings-02',
+  sort = 'chevron-selector-vertical',
   staff = 'hard-drive',
   tickets = 'agent',
   tickets_all = 'archive',
@@ -73,6 +76,7 @@ export enum Icon {
   triggers = 'signal-01',
   updated = 'edit-02',
   upload = 'upload-cloud-01',
+  usages = 'link-04',
   user = 'users-01',
   users = 'users-01',
   user_beta = 'shield-zap',

package/static/svg/index.pdf

@@ -678981,3 +678981,140 @@ trailer
 startxref
 23873054
 %%EOF
+428 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 2180 ] /Resources 425 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 426 0 R >>
+endobj
+744 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 1140 ] /Resources 741 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 742 0 R >>
+endobj
+1114 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 740 ] /Resources 1111 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 1112 0 R >>
+endobj
+1344 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 660 ] /Resources 1341 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 1342 0 R >>
+endobj
+1612 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 820 ] /Resources 1609 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 1610 0 R >>
+endobj
+1972 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 860 ] /Resources 1969 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 1970 0 R >>
+endobj
+2206 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 500 ] /Resources 2203 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 2204 0 R >>
+endobj
+2408 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 500 ] /Resources 2405 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 2406 0 R >>
+endobj
+2718 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 1300 ] /Resources 2715 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 2716 0 R >>
+endobj
+3060 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 820 ] /Resources 3057 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 3058 0 R >>
+endobj
+3370 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 820 ] /Resources 3367 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 3368 0 R >>
+endobj
+3586 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 580 ] /Resources 3583 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 3584 0 R >>
+endobj
+3920 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 1020 ] /Resources 3917 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 3918 0 R >>
+endobj
+4180 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 540 ] /Resources 4177 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 4178 0 R >>
+endobj
+4484 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 500 ] /Resources 4481 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 4482 0 R >>
+endobj
+4786 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 1260 ] /Resources 4783 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 4784 0 R >>
+endobj
+5004 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 660 ] /Resources 5001 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 5002 0 R >>
+endobj
+5334 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 740 ] /Resources 5331 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 5332 0 R >>
+endobj
+5606 0 obj
+<< /Annots [ ] /Type /Page /MediaBox [ 0 0 1144 540 ] /Resources 5603 0 R
+/Parent 5607 0 R /Rotate 0 /Contents 5604 0 R >>
+endobj
+5608 0 obj
+<< /Info 5612 0 R /Pages 5607 0 R /Type /Catalog >>
+endobj
+5611 0 obj
+<< /Producer (macOS Version 13.0 \(Build 22A380\) Quartz PDFContext, AppendMode 1.1)
+/ModDate (D:20221123223204Z00'00') >>
+endobj
+5612 0 obj
+5611 0 R
+endobj
+xref
+0 1
+0000000000 65535 f 
+428 1
+0023873794 00000 n 
+744 1
+0023873933 00000 n 
+1114 1
+0023874072 00000 n 
+1344 1
+0023874213 00000 n 
+1612 1
+0023874354 00000 n 
+1972 1
+0023874495 00000 n 
+2206 1
+0023874636 00000 n 
+2408 1
+0023874777 00000 n 
+2718 1
+0023874918 00000 n 
+3060 1
+0023875060 00000 n 
+3370 1
+0023875201 00000 n 
+3586 1
+0023875342 00000 n 
+3920 1
+0023875483 00000 n 
+4180 1
+0023875625 00000 n 
+4484 1
+0023875766 00000 n 
+4786 1
+0023875907 00000 n 
+5004 1
+0023876049 00000 n 
+5334 1
+0023876190 00000 n 
+5606 1
+0023876331 00000 n 
+5608 1
+0023876472 00000 n 
+5611 2
+0023876542 00000 n 
+0023876683 00000 n 
+trailer
+<< /ID [<736F6D65><4E10FAFFE2B63EFBBAEF432EF16DE3AD> ] /Root 5608 0 R /Size 5613 /Prev 23873054 >> 
+startxref
+23876710
+%%EOF

package/temba-modules.ts

@@ -39,6 +39,8 @@ import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/flow/FlowStoreElement';
 import { ContactNameFetch } from './src/contacts/ContactNameFetch';
 import DatePicker from './src/datepicker/DatePicker';
+import { FieldManager } from './src/fields/FieldManager';
+import { SortableList } from './src/list/SortableList';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -63,6 +65,7 @@ addCustomElement('temba-contact-name', ContactName);
 addCustomElement('temba-contact-name-fetch', ContactNameFetch);
 addCustomElement('temba-contact-field', ContactFieldEditor);
 addCustomElement('temba-contact-fields', ContactFields);
+addCustomElement('temba-field-manager', FieldManager);
 addCustomElement('temba-urn', ContactUrn);
 
 addCustomElement('temba-field', FormField);
@@ -74,6 +77,7 @@ addCustomElement('temba-contact-chat', ContactChat);
 addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-list', TembaList);
+addCustomElement('temba-sortable-list', SortableList);
 addCustomElement('temba-run-list', RunList);
 addCustomElement('temba-flow-details', FlowStoreElement);
 addCustomElement('temba-label', Label);

package/test/temba-field-manager.test.ts

@@ -0,0 +1,60 @@
+import { fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { FieldManager } from '../src/fields/FieldManager';
+import {
+  assertScreenshot,
+  getAttributes,
+  getClip,
+  loadStore,
+} from './utils.test';
+
+const BORING_LIST = html`<temba-field-manager />`;
+
+export const getEle = async (attrs: any = {}) => {
+  const fm = html`<temba-field-manager
+    ${getAttributes(attrs)}
+  ></temba-field-manager>`;
+  const parentNode = document.createElement('div');
+  parentNode.setAttribute('style', 'width: 600px;');
+  return (await fixture(fm, { parentNode })) as FieldManager;
+};
+
+describe('temba-field-manager', () => {
+  it('renders default', async () => {
+    await loadStore();
+    const fm: FieldManager = await getEle();
+    await assertScreenshot('list/fields', getClip(fm));
+  });
+
+  it('filters', async () => {
+    await loadStore();
+    const fm: FieldManager = await getEle();
+    (fm.shadowRoot.querySelector('#search') as HTMLDivElement).click();
+    await type('at');
+    await assertScreenshot('list/fields-filtered', getClip(fm));
+  });
+
+  it('hovers', async () => {
+    await loadStore();
+    const fm: FieldManager = await getEle();
+
+    // hover over the first item
+    const first = fm.shadowRoot.querySelector('.sortable') as HTMLDivElement;
+    const bounds = first.getBoundingClientRect();
+    await moveMouse(bounds.left + 20, bounds.top + 10);
+    await assertScreenshot('list/fields-hovered', getClip(fm));
+  });
+
+  it('drags featured down', async () => {
+    await loadStore();
+    const fm: FieldManager = await getEle();
+    const first = fm.shadowRoot.querySelector('.sortable') as HTMLDivElement;
+    const bounds = first.getBoundingClientRect();
+
+    // drag our item
+    await moveMouse(bounds.left + 20, bounds.top + 10);
+    await mouseDown();
+    await moveMouse(bounds.left + 30, bounds.bottom + 20);
+    await assertScreenshot('list/fields-dragging', getClip(fm));
+  });
+});

package/test/temba-sortable-list.test.ts

@@ -0,0 +1,58 @@
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html, TemplateResult } from 'lit';
+import { CustomEventType } from '../src/interfaces';
+import { SortableList } from '../src/list/SortableList';
+import { assertScreenshot, getClip } from './utils.test';
+
+const BORING_LIST = html`
+  <temba-sortable-list>
+    <div class="sortable" id="chicken" style="padding:10px">Chicken</div>
+    <div class="sortable" id="fish" style="padding:10px">Fish</div>
+  </temba-sortable-list>
+`;
+
+const createSorter = async (def: TemplateResult) => {
+  const parentNode = document.createElement('div');
+  parentNode.setAttribute('style', 'width: 200px;');
+  return (await fixture(def, { parentNode })) as SortableList;
+};
+
+describe('temba-sortable-list', () => {
+  it('renders default', async () => {
+    const list: SortableList = await createSorter(BORING_LIST);
+    await assertScreenshot('list/sortable', getClip(list));
+  });
+
+  it('drags', async () => {
+    const list: SortableList = await createSorter(BORING_LIST);
+    const orderChanged = oneEvent(list, CustomEventType.OrderChanged);
+    const updated = oneEvent(list, 'change');
+
+    const bounds = list.getBoundingClientRect();
+
+    await moveMouse(bounds.left + 20, bounds.bottom - 10);
+    await mouseDown();
+    await moveMouse(bounds.left + 30, bounds.top + 20);
+
+    // we should fire an order changed event
+    const orderEvent = await orderChanged;
+    expect(orderEvent.detail).to.deep.equal({
+      from: 'fish',
+      to: 'chicken',
+      fromIdx: 1,
+      toIdx: 0,
+    });
+
+    // should be hovered
+    await assertScreenshot('list/sortable-dragging', getClip(list));
+
+    // now lets drop, it'll look the same as before dragging since
+    // its the consuming elements job to do the reordering
+    await mouseUp();
+    await assertScreenshot('list/sortable-dropped', getClip(list));
+
+    // we should fire a change event
+    const changeEvent = await updated;
+    expect(changeEvent.type).to.equal('change');
+  });
+});

package/test/temba-store.test.ts

@@ -34,7 +34,7 @@ describe('temba-store', () => {
       "<temba-store fields='/test-assets/store/fields.json'></temba-store>"
     );
 
-    assert.equal(store.getKeyedAssets().fields.length, 5);
+    assert.equal(store.getKeyedAssets().fields.length, 8);
   });
 
   it('exposes postUrl', async () => {

package/test-assets/store/fields.json

@@ -2,10 +2,55 @@
   "next": null,
   "previous": null,
   "results": [
-    { "key": "conversion", "label": "Conversion", "value_type": "text" },
-    { "key": "district", "label": "District", "value_type": "district" },
-    { "key": "joined", "label": "Joined On", "value_type": "datetime" },
-    { "key": "age", "label": "Age", "value_type": "numeric" },
-    { "key": "gender", "label": "Gender", "value_type": "text" }
+    {
+      "key": "rating",
+      "label": "Rating",
+      "value_type": "text",
+      "featured": true,
+      "usages": { "campaign_events": 0, "flows": 1, "groups": 0 }
+    },
+    {
+      "key": "conversion",
+      "label": "Conversion",
+      "value_type": "text",
+      "usages": { "campaign_events": 0, "flows": 0, "groups": 1 }
+    },
+    {
+      "key": "district",
+      "label": "District",
+      "value_type": "district",
+      "usages": { "campaign_events": 1, "flows": 0, "groups": 0 }
+    },
+    {
+      "key": "ward",
+      "label": "Ward",
+      "value_type": "ward",
+      "featured": true,
+      "usages": { "campaign_events": 0, "flows": 0, "groups": 0 }
+    },
+    {
+      "key": "state",
+      "label": "State",
+      "value_type": "state",
+      "usages": { "campaign_events": 0, "flows": 0, "groups": 0 }
+    },
+    {
+      "key": "joined",
+      "label": "Joined On",
+      "value_type": "datetime",
+      "usages": { "campaign_events": 0, "flows": 0, "groups": 0 }
+    },
+    {
+      "key": "age",
+      "label": "Age",
+      "value_type": "numeric",
+      "usages": { "campaign_events": 0, "flows": 1, "groups": 0 }
+    },
+    {
+      "key": "gender",
+      "label": "Gender",
+      "value_type": "text",
+      "usages": { "campaign_events": 0, "flows": 0, "groups": 0 }
+    }
   ]
 }