@nyaruka/temba-components 0.19.0 → 0.23.0

package/src/list/TembaMenu.ts

@@ -1,18 +1,15 @@
 import { css, html, property, TemplateResult } from 'lit-element';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
-import {
-  COOKIE_KEYS,
-  fetchResults,
-  getCookieBoolean,
-  setCookie,
-} from '../utils';
+import { fetchResults, getClasses } from '../utils';
 
 export interface MenuItem {
   id?: string;
+  vanity_id?: string;
   name?: string;
   count?: number;
   icon?: string;
+  collapsed_icon?: string;
   endpoint?: string;
   loading?: boolean;
   bottom?: boolean;
@@ -21,8 +18,18 @@ export interface MenuItem {
   href?: string;
   items?: MenuItem[];
   inline?: boolean;
+  type?: string;
 }
 
+interface MenuItemState {
+  collapsed?: string;
+}
+
+const findItem = (items: MenuItem[], id: string) =>
+  (items || []).find((item: MenuItem) => {
+    return item.id == id || item.vanity_id == id;
+  });
+
 export class TembaMenu extends RapidElement {
   static get styles() {
     return css`
@@ -58,6 +65,7 @@ export class TembaMenu extends RapidElement {
         -webkit-user-select: none;
         display: flex;
         font-size: 1.15em;
+        --icon-color: var(--color-text-dark);
       }
 
       .item.selected {
@@ -106,8 +114,8 @@ export class TembaMenu extends RapidElement {
         background: var(--color-primary-dark);
       }
 
-      .level-0 > .item > .name {
-        display: none;
+      .level-0 > .item > .details {
+        display: none !important;
       }
 
       .level-0.expanding {
@@ -135,23 +143,33 @@ export class TembaMenu extends RapidElement {
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
+
+        min-width: 12em;
+        max-width: 12em;
       }
 
       .item > temba-icon {
         margin-right: 0.5em;
       }
 
-      .item > .name {
+      .item.inline > temba-icon {
+        // margin-right: 0em;
+      }
+
+      .item > .details > .name {
         flex-grow: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: 0;
       }
 
       .level-0 > .item {
         padding: 1em 1em;
         margin-top: 0em;
         border-radius: 0px;
+        min-width: inherit;
+        max-width: inherit;
       }
 
       .level-0 > .item > temba-icon {
@@ -199,19 +217,175 @@ export class TembaMenu extends RapidElement {
       }
 
       .inline-children {
-        margin-left: 0.5em;
+        // background: #ffffff;
+        padding: 0.5em;
+        border-bottom-right-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+        font-size: 1rem;
+        margin-bottom: 0.75em;
+        border: 1px solid #f3f3f3;
+        // box-shadow: var(--shadow);
+        // margin-top: -1px;
+        z-index: 1000;
+        // margin-left: 1em;
+        border-top: none;
       }
 
-      .item.selected.inline.child-selected {
-        background: inherit;
+      .inline-children .item {
+        max-width: 11em !important;
+        min-width: 11em !important;
+        // border: 1px solid #f1f1f1;
+        // margin-top: 0.75em;
+        // margin-right: -1em;
+        // padding-right: 0;
+      }
+
+      .item.inline {
+        border: 0px solid transparent;
+      }
+
+      .item.inline.child-selected,
+      .item.inline.selected {
+        background: #f3f3f3;
+        border: 0px solid #f1f1f1;
+        border-bottom-right-radius: 0px !important;
+        border-bottom-left-radius: 0px !important;
+        z-index: 1000;
+        color: #444;
+        --icon-color: #444;
+        // box-shadow: var(--shadow);
       }
 
-      .item.selected.inline {
+      .level-1,
+      .level-2 {
+        border-right: 1px solid rgba(0 0 0 / 8%);
+        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;
       }
 
       .level-1 {
         overflow-y: auto;
-        width: 16em;
+        z-index: 1500;
+      }
+
+      .level-2 {
+        background: #fbfbfb;
+        overflow-y: auto;
+        z-index: 1000;
+      }
+
+      .level-2 .item .details {
+        overflow: hidden;
+      }
+
+      .level-2 .item {
+        min-width: 12em;
+        max-width: 12em;
+      }
+
+      .level-1 .item {
+        overflow: hidden;
+        max-width: 12em;
+        min-width: 12em;
+        min-height: 1.5em;
+        max-height: 1.5em;
+        transition: min-width var(--transition-speed) !important;
+      }
+
+      .level-1 .item .details {
+      }
+
+      .collapsed .item {
+        overflow: hidden;
+        min-width: 0;
+        margin: 0;
+      }
+
+      .item .details {
+        opacity: 1;
+        min-height: 1.5em;
+        max-height: 1.5em;
+        align-items: center;
+      }
+
+      .item .details .name {
+      }
+
+      .item temba-icon {
+      }
+
+      .collapsed .item {
+        margin-bottom: 0.5em;
+      }
+
+      .collapsed .item .details {
+        overflow: hidden;
+        max-height: 0em;
+        max-width: 0em;
+      }
+
+      .collapsed .item .details {
+        max-height: 0em;
+      }
+
+      .collapsed .item temba-icon {
+        margin-right: 0;
+      }
+
+      .section {
+        max-width: 12em;
+      }
+
+      .collapsed .section {
+        opacity: 0;
+        max-width: 0em;
+        max-height: 0.6em;
+      }
+
+      .collapsed.level-1 {
+        overflow: hidden;
+        padding: 0.5em;
+        --icon-color: #999;
+      }
+
+      .collapsed .item .right {
+        flex-grow: 1;
+      }
+
+      .collapse-icon {
+        display: none;
+      }
+
+      .collapsed .collapse-icon {
+        --icon-color: #ccc;
+        display: block;
+      }
+
+      .collapsed .item.iconless {
+        max-height: 0em;
+        padding: 0em;
+        min-height: 0em;
+        margin-bottom: 0em;
+      }
+
+      .divider {
+        height: 1px;
+        background: #f3f3f3;
+        margin: 0.5em 0.75em;
+        min-height: 1px;
+      }
+
+      .collapsed .divider {
+        height: 0;
+        margin: 0;
+        padding: 0;
+        min-height: 0px;
+      }
+
+      .sub-section {
+        font-size: 1.1rem;
+        color: #888;
+        margin-top: 1rem;
+        margin-left: 0.3rem;
       }
     `;
   }
@@ -219,12 +393,6 @@ export class TembaMenu extends RapidElement {
   @property({ type: Boolean })
   wraps = false;
 
-  @property({ type: Boolean })
-  collapsible = false;
-
-  @property({ type: Boolean })
-  collapsed: boolean;
-
   @property({ type: Boolean })
   wait: boolean;
 
@@ -247,10 +415,22 @@ export class TembaMenu extends RapidElement {
   root: MenuItem;
   selection: string[] = [];
   pending: string[] = [];
+  state: { [id: string]: MenuItemState } = {};
 
   constructor() {
     super();
-    this.collapsed = getCookieBoolean(COOKIE_KEYS.MENU_COLLAPSED);
+  }
+
+  private getMenuItemState(id: string): MenuItemState {
+    let itemState = {};
+    if (id) {
+      itemState = this.state[id];
+      if (!itemState) {
+        itemState = {};
+        this.state[id] = itemState;
+      }
+    }
+    return itemState;
   }
 
   public updated(changes: Map<string, any>) {
@@ -281,19 +461,34 @@ export class TembaMenu extends RapidElement {
     while (path.length > 0) {
       const step = path.splice(0, 1)[0];
       if (items) {
-        item = items.find(mi => mi.id == step);
+        item = findItem(items, step);
         if (item) {
           if (item.endpoint) {
             item.loading = true;
             const itemToUpdate = item;
             fetchResults(itemToUpdate.endpoint).then((updated: MenuItem[]) => {
-              // for now we only deal with updating counts
-              (itemToUpdate.items || []).forEach((existing: MenuItem) => {
-                const updatedItem = updated.find(
-                  updatedItem => updatedItem.id === existing.id
-                );
-                existing.count = updatedItem.count;
-              });
+              // for now we only deal with updating counts and names
+              (itemToUpdate.items || []).forEach(
+                (existing: MenuItem, index: number, items: []) => {
+                  const updatedItem = findItem(updated, existing.id);
+
+                  // we were removed!
+                  if (!updatedItem) {
+                    items.splice(index, 1);
+
+                    if (
+                      this.selection.length > 1 &&
+                      this.selection[this.selection.length - 1] == existing.id
+                    ) {
+                      this.selection.splice(this.selection.length - 1, 1);
+                      this.clickItem(this.selection[this.selection.length - 1]);
+                    }
+                  } else {
+                    existing.count = updatedItem.count;
+                    existing.name = updatedItem.name;
+                  }
+                }
+              );
 
               itemToUpdate.loading = false;
               this.requestUpdate('root');
@@ -308,40 +503,72 @@ export class TembaMenu extends RapidElement {
     }
   }
 
+  private fireNoPath(missingId: string) {
+    const item = this.getMenuItem();
+
+    const details = {
+      item: item.id,
+      selection: '/' + this.selection.join('/'),
+      endpoint: item.endpoint,
+      path: missingId + '/' + this.pending.join('/') + document.location.search,
+    };
+
+    // remove any excess from our selection
+    const selection = this.selection.join('/');
+    selection.replace(details.path, '');
+    this.selection = selection.split('/');
+
+    this.fireCustomEvent(CustomEventType.NoPath, details);
+    this.pending = [];
+    this.requestUpdate('root');
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private loadItems(item: MenuItem) {
+  private loadItems(item: MenuItem, selectFirst = true) {
     if (item && item.endpoint) {
       item.loading = true;
       this.httpComplete = fetchResults(item.endpoint).then(
         (items: MenuItem[]) => {
           // update our item level
-          items.forEach(subItem => (subItem.level = item.level + 1));
+          items.forEach(subItem => {
+            subItem.level = item.level + 1;
+            // if we came with preset items, set the level for them accordingly
+            if (subItem.items) {
+              subItem.items.forEach(
+                inlineItem => (inlineItem.level = item.level + 2)
+              );
+            }
+          });
+
           item.items = items;
           item.loading = false;
           this.requestUpdate('root');
+          this.scrollSelectedIntoView();
           if (this.pending && this.pending.length > 0) {
             // auto select the next pending click
             const nextId = this.pending.splice(0, 1)[0];
             if (nextId && items.length > 0) {
-              const nextItem = items.find(item => item.id === nextId);
+              const nextItem = findItem(items, nextId);
               if (nextItem) {
                 this.handleItemClicked(null, nextItem);
               } else {
-                this.fireCustomEvent(CustomEventType.NoPath, {
-                  item: item.id,
-                  endpoint: item.endpoint,
-                  path: nextId + '/' + this.pending.join('/'),
-                });
+                this.fireNoPath(nextId);
               }
             }
           } else {
             // auto select the first item
             if (
+              selectFirst &&
               items.length > 0 &&
               this.selection.length >= 1 &&
               !item.inline
             ) {
-              this.handleItemClicked(null, items[0]);
+              for (const item of items) {
+                if (!item.type) {
+                  this.handleItemClicked(null, item);
+                  break;
+                }
+              }
             }
           }
         }
@@ -368,17 +595,17 @@ export class TembaMenu extends RapidElement {
 
       // update our selection
       if (menuItem.level >= this.selection.length) {
-        this.selection.push(menuItem.id);
+        this.selection.push(menuItem.vanity_id || menuItem.id);
       } else {
         this.selection.splice(
           menuItem.level,
           this.selection.length - menuItem.level,
-          menuItem.id
+          menuItem.vanity_id || menuItem.id
         );
       }
 
       if (menuItem.endpoint) {
-        this.loadItems(menuItem);
+        this.loadItems(menuItem, !menuItem.href);
         this.dispatchEvent(new Event('change'));
       } else {
         this.dispatchEvent(new Event('change'));
@@ -388,27 +615,43 @@ export class TembaMenu extends RapidElement {
           const nextId = this.pending.splice(0, 1)[0];
           const item = this.getMenuItem();
           if (nextId && item && item.items && item.items.length > 0) {
-            const nextItem = item.items.find(item => item.id === nextId);
+            const nextItem = findItem(item.items, nextId);
             if (nextItem) {
               this.handleItemClicked(null, nextItem);
             }
+          } else {
+            this.fireNoPath(nextId);
           }
         }
-
-        this.pending = [];
         this.requestUpdate('root');
       }
     }
   }
 
-  public clickItem(id: string) {
+  public scrollSelectedIntoView() {
+    // makes sure we are scrolled into view
+    window.setTimeout(() => {
+      const eles = this.shadowRoot.querySelectorAll('.selected');
+      eles.forEach(ele => {
+        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });
+      });
+    }, 0);
+  }
+
+  public clickItem(id: string): boolean {
     const path = [...this.selection];
     path.splice(path.length - 1, 1, id);
     const item = this.getMenuItemForSelection(path);
-    this.handleItemClicked(null, item);
+
+    if (item) {
+      this.handleItemClicked(null, item);
+      this.scrollSelectedIntoView();
+      return true;
+    }
+    return false;
   }
 
-  public getMenuItem() {
+  public getMenuItem(): MenuItem {
     return this.getMenuItemForSelection([...this.selection]);
   }
 
@@ -419,7 +662,7 @@ export class TembaMenu extends RapidElement {
     while (path.length > 0) {
       const step = path.splice(0, 1)[0];
       if (items) {
-        item = items.find(mi => mi.id == step);
+        item = findItem(items, step);
         if (item) {
           items = item.items;
         } else {
@@ -447,19 +690,77 @@ export class TembaMenu extends RapidElement {
     }
   }
 
+  public setSelectionPath(path: string) {
+    const asPath = path.split('/').filter(step => !!step);
+
+    // first try to click in the current space
+    const clicked = this.clickItem(asPath[asPath.length - 1]);
+
+    if (!clicked) {
+      this.wait = true;
+      this.setSelection(asPath);
+    }
+  }
+
+  public async setFocusedItem(path: string) {
+    const focusedPath = path.split('/').filter(step => !!step);
+
+    // if we don't match at the first level, we are a noop
+    if (focusedPath.length > 0) {
+      const rootItem = findItem(this.root.items, focusedPath[0]);
+      if (!rootItem) {
+        return;
+      }
+    }
+
+    const newPath = [];
+    let level = this.root;
+    while (focusedPath.length > 0) {
+      const nextId = focusedPath.shift();
+      if (nextId) {
+        if (!level.items) {
+          this.loadItems(level, false);
+          await this.httpComplete;
+        }
+
+        level = findItem(level.items, nextId);
+        if (!level) {
+          focusedPath.splice(0, focusedPath.length);
+        } else {
+          newPath.push(nextId);
+        }
+      }
+    }
+
+    this.selection = newPath;
+    this.requestUpdate('root');
+  }
+
   private isSelected(menuItem: MenuItem) {
     if (menuItem.level < this.selection.length) {
-      return this.selection[menuItem.level] == menuItem.id;
+      const selected =
+        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);
+      return selected;
     }
     return false;
   }
 
   private isExpanded(menuItem: MenuItem) {
-    const expanded = !!this.selection.find(id => menuItem.id === id);
+    const expanded = !!this.selection.find(
+      id => id === menuItem.vanity_id || menuItem.id
+    );
     return expanded;
   }
 
   private renderMenuItem = (menuItem: MenuItem): TemplateResult => {
+    if (menuItem.type === 'divider') {
+      return html`<div class="divider"></div>`;
+    }
+
+    if (menuItem.type === 'section') {
+      return html`<div class="sub-section">${menuItem.name}</div>`;
+    }
+
     const isSelected = this.isSelected(menuItem);
     const isChildSelected =
       isSelected && this.selection.length > menuItem.level + 1;
@@ -471,44 +772,71 @@ export class TembaMenu extends RapidElement {
         ></temba-icon>`
       : null;
 
+    const collapsedIcon = menuItem.collapsed_icon
+      ? html`<temba-icon
+          size="${menuItem.level === 0 ? '1.5' : '1'}"
+          name="${menuItem.collapsed_icon}"
+          class="collapse-icon"
+        ></temba-icon>`
+      : null;
+
+    const itemClasses = getClasses({
+      ['menu-' + menuItem.id]: true,
+      'child-selected': isChildSelected,
+      selected: isSelected,
+      item: true,
+      inline: menuItem.inline,
+      expanding: this.expanding && this.expanding === menuItem.id,
+      expanded: this.isExpanded(menuItem),
+      iconless: !icon && !collapsedIcon,
+    });
+
     const item = html` <div
-        class="item-top ${isSelected ? 'selected' : null}"
+        class="item-top ${isSelected ? 'selected' : null} "
       ></div>
 
       <div
         id="menu-${menuItem.id}"
-        class="item ${isSelected ? 'selected' : ''} ${isChildSelected
-          ? 'child-selected'
-          : ''} ${menuItem.inline ? 'inline' : ''} ${this.expanding &&
-        this.expanding === menuItem.id
-          ? 'expanding'
-          : ''} ${this.isExpanded(menuItem) ? 'expanded' : ''}"
+        class="${itemClasses}"
         @click=${event => {
           this.handleItemClicked(event, menuItem);
         }}
       >
-        ${this.collapsed || menuItem.level === 0
+        ${menuItem.level === 0
           ? html`<temba-tip
               style="display:flex;"
               text="${menuItem.name}"
               position="right"
               >${icon}</temba-tip
             >`
-          : icon}
-
-        <div
-          class="name"
-          style="flex-grow:1; white-space: ${this.wraps ? 'normal' : 'nowrap'};"
-        >
-          ${menuItem.name}
+          : html`${icon}${collapsedIcon}`}
+
+        <div class="details" style="flex-grow:1;display:flex">
+          <div
+            class="name"
+            style="flex-grow:1; flex-shrink:0; white-space: ${this.wraps
+              ? 'normal'
+              : 'nowrap'};"
+          >
+            ${menuItem.name}
+          </div>
+          ${menuItem.level > 0
+            ? menuItem.inline
+              ? html`<temba-icon
+                  name="chevron-${isSelected || isChildSelected
+                    ? 'up'
+                    : 'down'}"
+                ></temba-icon>`
+              : html`${menuItem.count || menuItem.count == 0
+                  ? html`
+                      <div class="count">
+                        ${menuItem.count.toLocaleString()}
+                      </div>
+                    `
+                  : html`<div class="count"></div>`}`
+            : null}
         </div>
-        ${menuItem.level > 0
-          ? html`${menuItem.count || menuItem.count == 0
-              ? html`
-                  <div class="count">${menuItem.count.toLocaleString()}</div>
-                `
-              : html`<div class="count"></div>`}`
-          : null}
+        <div class="right"></div>
       </div>
 
       <div class="item-bottom ${isSelected ? 'selected' : null}"></div>`;
@@ -516,12 +844,6 @@ export class TembaMenu extends RapidElement {
     return item;
   };
 
-  public toggleCollapsed() {
-    this.collapsed = !this.collapsed;
-    setCookie(COOKIE_KEYS.MENU_COLLAPSED, this.collapsed);
-    this.requestUpdate('root');
-  }
-
   public render(): TemplateResult {
     if (!this.root || !this.root.items) {
       return html`<temba-loading
@@ -532,7 +854,7 @@ export class TembaMenu extends RapidElement {
       />`;
     }
 
-    let items = this.root.items;
+    let items = this.root.items || [];
     const levels = [];
 
     levels.push(
@@ -556,21 +878,40 @@ export class TembaMenu extends RapidElement {
     );
 
     this.selection.forEach((id, index) => {
-      const selected = (items || []).find(item => item.id === id);
+      const selected = findItem(items, id);
+
+      let collapsed = false;
       if (selected) {
         items = selected.items;
+        const itemState = this.getMenuItemState(selected.id);
+        // users set an explicit collapse state
+        if (itemState.collapsed) {
+          collapsed = itemState.collapsed === 'collapsed';
+        }
+        // otherwise pick a default collapse state
+        else {
+          if (this.selection.length > selected.level + 2) {
+            collapsed = false;
+          }
+        }
       } else {
         items = null;
       }
 
       if (items && items.length > 0 && !selected.inline) {
         levels.push(
-          html`<div class="level level-${index + 1}">
-            ${index == 0 && !this.submenu
+          html`<div
+            class="${getClasses({
+              level: true,
+              ['level-' + (index + 1)]: true,
+              collapsed,
+            })}"
+          >
+            ${!this.submenu
               ? html`<div class="section">${selected.name}</div>`
               : null}
             ${items.map((item: MenuItem) => {
-              if (item.inline && item.items && this.isSelected(item)) {
+              if (item.inline && this.isSelected(item)) {
                 return html`${this.renderMenuItem(item)}
                   <div class="inline-children">
                     ${item.items.map((child: MenuItem) => {
@@ -586,16 +927,6 @@ export class TembaMenu extends RapidElement {
     });
 
     const menu = html`<div class="root">${levels}</div>`;
-
-    if (this.collapsible) {
-      return html`
-        <div style="display:flex">
-          ${menu}
-          <div class="collapse-toggle" @click=${this.toggleCollapsed}></div>
-        </div>
-      `;
-    }
-
     return html`${menu}`;
   }
 }