@nyaruka/temba-components 0.52.2 → 0.53.0

package/src/dialog/Dialog.ts

@@ -1,11 +1,24 @@
 import { property } from 'lit/decorators.js';
-import { TemplateResult, html, css } from 'lit';
+import { TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { Button } from '../button/Button';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses } from '../utils';
 
+export enum ButtonType {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  DESTRUCTIVE = 'destructive',
+}
+export class DialogButton {
+  name?: string;
+  id?: string;
+  details?: any;
+  type?: string;
+  closes?: boolean;
+}
+
 export class Dialog extends RapidElement {
   static get widths(): { [size: string]: string } {
     return {
@@ -24,6 +37,10 @@ export class Dialog extends RapidElement {
         background: white;
       }
 
+      .flex-grow {
+        flex-grow: 1;
+      }
+
       .flex {
         display: flex;
         flex-direction: column;
@@ -99,6 +116,9 @@ export class Dialog extends RapidElement {
       }
 
       .header-text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
         font-size: 20px;
         padding: 12px 20px;
         font-weight: 300;
@@ -106,11 +126,21 @@ export class Dialog extends RapidElement {
         background: var(--header-bg);
       }
 
+      .header-text .title {
+        flex-grow: 1;
+      }
+
+      .header-text .status {
+        font-size: 0.6em;
+        font-weight: bold;
+      }
+
       .dialog-footer {
         background: var(--color-primary-light);
         padding: 10px;
         display: flex;
-        flex-flow: row-reverse;
+        flex-flow: row;
+        align-items: center;
       }
 
       temba-button {
@@ -198,6 +228,9 @@ export class Dialog extends RapidElement {
   @property()
   ready: boolean;
 
+  @property({ type: Array })
+  buttons: DialogButton[] = [];
+
   @property({ attribute: false })
   onButtonClicked: (button: Button) => void;
 
@@ -207,6 +240,25 @@ export class Dialog extends RapidElement {
     super();
   }
 
+  protected firstUpdated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    if (changes.has('cancelButtonName') && this.cancelButtonName) {
+      this.buttons.push({
+        name: this.cancelButtonName,
+        type: ButtonType.SECONDARY,
+        closes: true,
+      });
+    }
+
+    if (changes.has('primaryButtonName') && this.primaryButtonName) {
+      this.buttons.push({
+        name: this.primaryButtonName,
+        type: ButtonType.PRIMARY,
+      });
+    }
+  }
+
   public updated(changedProperties: Map<string, any>) {
     if (changedProperties.has('open')) {
       const body = document.querySelector('body');
@@ -270,8 +322,13 @@ export class Dialog extends RapidElement {
   public handleClick(evt: MouseEvent) {
     const button = evt.currentTarget as Button;
     if (!button.disabled) {
-      this.fireCustomEvent(CustomEventType.ButtonClicked, { button });
-      if (button.name === this.cancelButtonName) {
+      let detail: DialogButton = {};
+      if (button.index >= 0 && button.index < this.buttons.length) {
+        detail = this.buttons[button.index];
+      }
+
+      this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });
+      if (button.name === this.cancelButtonName || (detail && detail.closes)) {
         this.open = false;
       }
     }
@@ -343,7 +400,9 @@ export class Dialog extends RapidElement {
     const header = this.header
       ? html`
           <div class="dialog-header">
-            <div class="header-text">${this.header}</div>
+            <div class="header-text">
+              <div class="title">${this.header}</div>
+            </div>
           </div>
         `
       : null;
@@ -382,26 +441,23 @@ export class Dialog extends RapidElement {
             </div>
 
             <div class="dialog-footer">
-                ${
-                  this.primaryButtonName
-                    ? html`
-                        <temba-button
-                          @click=${this.handleClick}
-                          .name=${this.primaryButtonName}
-                          ?destructive=${this.destructive}
-                          ?primary=${!this.destructive}
-                          ?submitting=${this.submitting}
-                          ?disabled=${this.disabled}
-                          >}</temba-button
-                        >
-                      `
-                    : null
-                }
-                <temba-button
-                  @click=${this.handleClick}
-                  name=${this.cancelButtonName}
-                  secondary
-                ></temba-button>
+              <div class="flex-grow">
+                <slot name="gutter"></slot>
+              </div>
+              ${this.buttons.map(
+                (button: DialogButton, index) => html`
+                  <temba-button
+                    name=${button.name}
+                    ?destructive=${button.type == 'primary' && this.destructive}
+                    ?primary=${button.type == 'primary' && !this.destructive}
+                    ?secondary=${button.type == 'secondary'}
+                    ?submitting=${this.submitting}
+                    ?disabled=${this.disabled}
+                    index=${index}
+                    @click=${this.handleClick}
+                  ></temba-button>
+                `
+              )}
               </div>
             </div>
             <div class="grow-bottom"></div>

package/src/dialog/Modax.ts

@@ -3,9 +3,9 @@ import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 import { RapidElement } from '../RapidElement';
-import { getUrl, serialize, postUrl, WebResponse } from '../utils';
+import { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';
 import { CustomEventType } from '../interfaces';
-import { Dialog } from './Dialog';
+import { ButtonType, Dialog, DialogButton } from './Dialog';
 
 export class Modax extends RapidElement {
   static get styles() {
@@ -24,6 +24,11 @@ export class Modax extends RapidElement {
         display: none;
       }
 
+      button[type='submit'],
+      input[type='submit'] {
+        display: none;
+      }
+
       .modax-body {
         padding: 20px;
         display: block;
@@ -67,6 +72,33 @@ export class Modax extends RapidElement {
         border-radius: 6px;
         font-weight: 300;
       }
+
+      .step-ball {
+        background: rgba(var(--primary-rgb), 0.2);
+        width: 1.2em;
+        height: 1.2em;
+        border-radius: 100%;
+        margin-right: 0.5em;
+        border: 0.15em solid transparent;
+      }
+
+      .step-ball.complete {
+        background: rgba(var(--primary-rgb), 0.7);
+        cursor: pointer;
+      }
+      .step-ball.complete:hover {
+        background: rgba(var(--primary-rgb), 0.8);
+      }
+
+      .step-ball.active {
+        border: 0.15em solid var(--color-primary-dark);
+      }
+
+      .wizard-steps {
+        display: flex;
+        flex-direction: row;
+        margin-left: 0.6em;
+      }
     `;
   }
 
@@ -106,6 +138,15 @@ export class Modax extends RapidElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: Array })
+  buttons: DialogButton[] = [];
+
+  @property({ type: Number })
+  wizardStep = 0;
+
+  @property({ type: Number })
+  wizardStepCount = 0;
+
   @property({ type: Boolean })
   suspendSubmit = false;
   // private cancelToken: CancelTokenSource;
@@ -149,18 +190,29 @@ export class Modax extends RapidElement {
   }
 
   public updatePrimaryButton(): void {
+    const wizard = this.shadowRoot.querySelector(
+      '#wizard-form'
+    ) as HTMLDivElement;
+    if (wizard) {
+      this.wizardStep = parseInt(wizard.dataset.step);
+      this.wizardStepCount = parseInt(wizard.dataset.steps);
+    }
+
     if (!this.noSubmit) {
       this.updateComplete.then(() => {
         const submitButton = this.shadowRoot.querySelector(
-          "input[type='submit']"
+          "input[type='submit'],button[type='submit']"
         ) as any;
 
         if (submitButton) {
-          this.primaryName = submitButton.value;
-          this.cancelName = 'Cancel';
+          this.buttons = [
+            { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },
+            { type: ButtonType.PRIMARY, name: submitButton.value },
+          ];
         } else {
-          this.primaryName = null;
-          this.cancelName = 'Ok';
+          this.buttons = [
+            { type: ButtonType.SECONDARY, name: 'Ok', closes: true },
+          ];
         }
         this.submitting = false;
       });
@@ -229,22 +281,37 @@ export class Modax extends RapidElement {
     this.body = this.getLoading();
     getUrl(this.endpoint, null, this.getHeaders()).then(
       (response: WebResponse) => {
-        this.setBody(response.body);
-        this.fetching = false;
-        this.updateComplete.then(() => {
-          this.updatePrimaryButton();
-          this.fireCustomEvent(CustomEventType.Loaded, {
-            body: this.getBody(),
+        // if it's a full page, breakout of the modal
+        if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {
+          document.location = response.url;
+        } else {
+          this.setBody(response.body);
+          this.fetching = false;
+          this.updateComplete.then(() => {
+            this.updatePrimaryButton();
+            this.fireCustomEvent(CustomEventType.Loaded, {
+              body: this.getBody(),
+            });
           });
-        });
+        }
       }
     );
   }
 
-  public submit(): void {
+  public submit(extra = {}): void {
     this.submitting = true;
     const form = this.shadowRoot.querySelector('form');
-    const postData = form ? serialize(form) : {};
+
+    let postData = form ? serialize(form) : '';
+    if (extra) {
+      Object.keys(extra).forEach(key => {
+        postData +=
+          (postData.length > 1 ? '&' : '') +
+          encodeURIComponent(key) +
+          '=' +
+          encodeURIComponent(extra[key]);
+      });
+    }
 
     postUrl(
       this.endpoint,
@@ -278,7 +345,9 @@ export class Modax extends RapidElement {
           } else {
             // if we set the body, update our submit button
             if (this.setBody(response.body)) {
-              this.updatePrimaryButton();
+              this.updateComplete.then(() => {
+                this.updatePrimaryButton();
+              });
             }
           }
         }, 1000);
@@ -290,15 +359,16 @@ export class Modax extends RapidElement {
 
   private handleDialogClick(evt: CustomEvent) {
     const button = evt.detail.button;
+    const detail = evt.detail.detail;
     if (!button.disabled && !button.submitting) {
-      if (button.name === this.primaryName) {
+      if (button.primary || button.destructive) {
         if (!this.suspendSubmit) {
           this.submit();
         }
       }
     }
 
-    if (button.name === (this.cancelName || 'Cancel')) {
+    if (detail.closes) {
       this.open = false;
       this.fetching = false;
       this.cancelName = undefined;
@@ -315,16 +385,47 @@ export class Modax extends RapidElement {
     return this.endpoint && this.endpoint.indexOf('delete') > -1;
   }
 
+  private handleGotoStep(evt: MouseEvent) {
+    const step = (evt.target as HTMLDivElement).dataset.gotoStep;
+    if (step) {
+      this.submit({ wizard_goto_step: step });
+    }
+  }
+
   public getBody() {
     return this.shadowRoot.querySelector('.modax-body');
   }
 
   public render(): TemplateResult {
+    const wizardStepBalls = [];
+
+    const wizard = this.shadowRoot.querySelector(
+      '#wizard-form'
+    ) as HTMLDivElement;
+    if (wizard) {
+      const completed = (wizard.getAttribute('data-completed') || '')
+        .split(',')
+        .filter(step => step.length > 0);
+
+      for (let i = 0; i < this.wizardStepCount; i++) {
+        wizardStepBalls.push(
+          html`<div
+            data-goto-step=${completed[i]}
+            @click=${this.handleGotoStep.bind(this)}
+            class="${getClasses({
+              'step-ball': true,
+              active: this.wizardStep - 1 === i,
+              complete: i < completed.length,
+            })}"
+          ></div>`
+        );
+      }
+    }
+
     return html`
       <temba-dialog
-        header=${this.header}
-        .primaryButtonName=${this.noSubmit ? null : this.primaryName}
-        .cancelButtonName=${this.cancelName || 'Cancel'}
+        .header=${this.header}
+        .buttons=${this.buttons}
         ?open=${this.open}
         ?loading=${this.fetching}
         ?submitting=${this.submitting}
@@ -338,6 +439,9 @@ export class Modax extends RapidElement {
           ${this.body}
         </div>
         <div class="scripts"></div>
+        <div slot="gutter">
+          <div class="wizard-steps">${wizardStepBalls}</div>
+        </div>
       </temba-dialog>
       <div class="slot-wrapper" @click=${this.handleSlotClicked}>
         <slot></slot>

package/src/utils/index.ts

@@ -85,6 +85,7 @@ export const getUrl = (
             controller,
             body,
             json,
+            url: response.url,
             headers: response.headers,
             status: response.status,
           });

package/src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '54daaf6fa5347c8e5a331b59d415d2bd';
+export const SVG_FINGERPRINT = '5d22cc3a5fb06da9ea0a632539b39983';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -116,6 +116,7 @@ export enum Icon {
   missing = 'maximize-02',
   missed_call = 'phone-x',
   new = 'plus',
+  next_schedule = 'alarm-clock',
   notification = 'bell-01',
   org_active = 'credit-card-02',
   org_anonymous = 'glasses-01',