@nyaruka/temba-components 0.162.0 → 0.164.0

package/src/flow/NodeEditor.ts

@@ -20,6 +20,7 @@ import {
   SPLIT_GROUP_METADATA
 } from './types';
 import { CustomEventType } from '../interfaces';
+import { Dialog } from '../layout/Dialog';
 import { generateUUID } from '../utils';
 import {
   formatIssueMessage,
@@ -477,6 +478,11 @@ export class NodeEditor extends RapidElement {
   @state()
   private originalFormData: FormData = {};
 
+  // snapshot of getComparableFormData(), refreshed on any non-user mutation
+  // (init, async resolve) — the baseline for detecting unsaved edits when
+  // dismissing via escape
+  private pristineFormData = '';
+
   @state()
   private errors: { [key: string]: string } = {};
 
@@ -515,24 +521,112 @@ export class NodeEditor extends RapidElement {
   private issuesByAction!: Map<string, FlowIssue[]>;
 
   private boundHandleEscape = this.handleEscapeKey.bind(this);
+  private boundSwallowEscapeUp = this.swallowEscapeUp.bind(this);
 
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
     document.addEventListener('keydown', this.boundHandleEscape);
+    document.addEventListener('keyup', this.boundSwallowEscapeUp, true);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     document.removeEventListener('keydown', this.boundHandleEscape);
+    document.removeEventListener('keyup', this.boundSwallowEscapeUp, true);
   }
 
   private handleEscapeKey(event: KeyboardEvent): void {
     if (event.key === 'Escape' && this.isOpen) {
+      const path = event.composedPath();
+
+      // an escape aimed at an open select dropdown just closes the dropdown
+      if (
+        path.some(
+          (el) =>
+            el instanceof Element &&
+            el.tagName === 'TEMBA-SELECT' &&
+            (el as any).isOpen?.()
+        )
+      ) {
+        return;
+      }
+
+      if (!this.ownsEscape(path)) {
+        return;
+      }
+
+      if (
+        this.hasUnsavedChanges() &&
+        !window.confirm(Dialog.UNSAVED_CHANGES_MESSAGE)
+      ) {
+        return;
+      }
       this.handleCancel();
     }
   }
 
+  // an escape routed through a dialog other than our own (e.g. a nested
+  // dialog or modax opened from a field) belongs to that dialog; an escape
+  // with no dialog in its path (canvas or body focus) is ours to handle
+  private ownsEscape(path: EventTarget[]): boolean {
+    for (const el of path) {
+      if (el instanceof Element && el.tagName === 'TEMBA-DIALOG') {
+        return el === this.shadowRoot?.querySelector('temba-dialog');
+      }
+    }
+    return true;
+  }
+
+  // temba-dialog handles escape itself on KEYUP reaching its container, which
+  // would prompt a second time after the keydown handler above has already
+  // asked (or dismiss unprompted if its keyup ever arrived first). While the
+  // editor is open, escape within our own dialog is owned entirely by the
+  // keydown handler, so stop those keyups before the dialog sees them —
+  // but leave escapes belonging to a dialog layered above us alone.
+  private swallowEscapeUp(event: KeyboardEvent): void {
+    if (
+      event.key === 'Escape' &&
+      this.isOpen &&
+      this.ownsEscape(event.composedPath())
+    ) {
+      event.stopPropagation();
+    }
+  }
+
+  private hasUnsavedChanges(): boolean {
+    return this.getComparableFormData() !== this.pristineFormData;
+  }
+
+  // JSON of formData with array-editor scaffolding filtered out: array editors
+  // seed a blank row (carrying field defaults, e.g. an attachment type) into
+  // form data on first render, which must not count as a user edit
+  private getComparableFormData(): string {
+    const form = this.getConfig()?.form;
+    const comparable = { ...this.formData };
+
+    if (form) {
+      Object.entries(form).forEach(([fieldName, fieldConfig]) => {
+        const value = comparable[fieldName];
+        if (fieldConfig.type === 'array' && Array.isArray(value)) {
+          // same emptiness semantics as ArrayEditor.isEmptyItem
+          const isEmpty =
+            fieldConfig.isEmptyItem ||
+            ((item: any) => {
+              const values = Object.values(item || {});
+              return (
+                values.length === 0 ||
+                values.every((v) => v === undefined || v === null || v === '')
+              );
+            });
+          comparable[fieldName] = value.filter((item: any) => !isEmpty(item));
+        }
+      });
+    }
+
+    return JSON.stringify(comparable);
+  }
+
   willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     if (
@@ -719,14 +813,24 @@ export class NodeEditor extends RapidElement {
         this.formData[key] = { ...value };
       }
     });
+
+    // fresh form, so nothing to warn about discarding yet
+    this.pristineFormData = this.getComparableFormData();
   }
 
   private async resolveFormData(): Promise<void> {
     const config = this.getConfig();
     if (!config?.resolveFormData) return;
 
+    const input = this.formData;
     try {
-      const resolved = await config.resolveFormData(this.formData);
+      const resolved = await config.resolveFormData(input);
+
+      // if the user edited while the resolve was in flight, applying the
+      // stale result would overwrite their edit — and rebasing the baseline
+      // below would then mask the loss as a clean form
+      if (this.formData !== input) return;
+
       if (resolved && resolved !== this.formData) {
         this.formData = resolved;
         this.processFormDataForEditing();
@@ -749,6 +853,9 @@ export class NodeEditor extends RapidElement {
           });
         }
 
+        // resolving isn't a user edit; rebase the unsaved-changes baseline
+        this.pristineFormData = this.getComparableFormData();
+
         this.requestUpdate();
       }
     } catch (error) {
@@ -2690,6 +2797,7 @@ export class NodeEditor extends RapidElement {
         .open="${this.isOpen}"
         .originX=${this.dialogOrigin?.x ?? null}
         .originY=${this.dialogOrigin?.y ?? null}
+        .checkForChanges=${() => this.hasUnsavedChanges()}
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"

package/src/interfaces.ts

@@ -54,6 +54,25 @@ export interface ScheduledEvent {
   message?: string;
 }
 
+// one event definition in a campaign's schedule, offset from a date field
+// on the contact - consumed by the temba-campaign-events component
+export interface CampaignScheduleEvent {
+  uuid: string;
+  type: 'message' | 'flow';
+  status: 'ready' | 'scheduling';
+  offset: number;
+  unit: string;
+  offset_display: string;
+  delivery_hour_display?: string;
+  relative_to: { key: string; name: string; system?: boolean };
+  flow?: ObjectReference;
+  message?: string;
+  count: number;
+  edit_url: string;
+  delete_url: string;
+  fires_url: string;
+}
+
 export interface NamedUser extends User {
   name: string;
 }
@@ -120,6 +139,59 @@ export interface Flow {
   activity: number[];
 }
 
+/** A single row in the campaign CRUDL list
+ * (`campaigns/campaign_list.html`). */
+export interface Campaign {
+  uuid: string;
+  name: string;
+  /** The contact group the campaign schedules against. */
+  group: ObjectReference;
+  /** Number of events (messages / flow starts) in the campaign. */
+  events: number;
+  /** Contacts currently in the campaign's group. */
+  contacts: number;
+  modified_on: string;
+}
+
+/** A single row in the trigger CRUDL list
+ * (`triggers/trigger_list.html`): what starts the flow (type +
+ * per-type details), any channel / group filters, and the flow it
+ * starts. Triggers have no uuid — rows key off the numeric id. */
+export interface Trigger {
+  id: number;
+  /** Trigger type slug — drives the leading row icon and the
+   * details cell (`keyword`, `catch_all`, `schedule`,
+   * `inbound_call`, `missed_call`, `new_conversation`, `referral`,
+   * `closed_ticket`, `opt_in`, `opt_out`). */
+  type: string;
+  /** The flow the trigger starts. */
+  flow: ObjectReference;
+  /** Channel the trigger is limited to, with its type icon. */
+  channel?: (ObjectReference & { icon?: string }) | null;
+  /** Groups the trigger is limited to. */
+  groups?: ObjectReference[];
+  /** Groups the trigger excludes. */
+  exclude_groups?: ObjectReference[];
+  /** Contacts a scheduled trigger starts directly. */
+  contacts?: ObjectReference[];
+  /** Keyword triggers only. */
+  keywords?: string[];
+  /** Keyword match type — `F` (starts with) or `O` (matches). */
+  match_type?: string | null;
+  /** Referral triggers only. */
+  referrer_id?: string | null;
+  /** Scheduled triggers only — `display` is the server-rendered
+   * human schedule ("each week on Monday"); `next_fire` is unset
+   * once the schedule is exhausted or paused. */
+  schedule?: {
+    repeat_period?: string;
+    display?: string;
+    next_fire?: string | null;
+  } | null;
+  priority?: number;
+  created_on?: string;
+}
+
 export interface Msg {
   /** Numeric id — present on persisted messages (the CRUDL list
    * keys rows off it); absent on outbound drafts. */
@@ -137,7 +209,10 @@ export interface Msg {
   /** Message type as exposed by the messages CRUDL endpoint
    * (`text` / `optin` / …); mirrors `type` for that surface. */
   msg_type?: string;
-  attachments: string[];
+  /** Attachments as exposed by the messages CRUDL endpoint, which
+   * serializes each as a `{content_type, url}` object; some other
+   * message surfaces carry them as `contentType:url` strings. */
+  attachments: (string | Attachment)[];
   /** Labels applied to the message. */
   labels?: ObjectReference[];
   /** The flow the message was sent from, when there is one. */
@@ -192,6 +267,8 @@ export interface ContactGroup {
 export interface URN {
   scheme: string;
   path: string;
+  display?: string | null;
+  channel?: ObjectReference | null;
 }
 
 export interface Group {
@@ -224,7 +301,7 @@ export interface Contact {
   uuid: string;
   stopped: boolean;
   blocked: boolean;
-  urns: string[];
+  urns: URN[];
   language?: string;
   fields: { [key: string]: string };
   groups: Group[];

package/src/layout/Card.ts

@@ -0,0 +1,311 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { designTokens } from '../styles/designTokens';
+import { getClasses } from '../utils';
+import { Icon } from '../Icons';
+
+/**
+ * A collapsible card with a header showing an icon, label and optional
+ * count badge. Designed to live inside a temba-card-stack where the header
+ * doubles as the drag handle, but works standalone too. The body never
+ * scrolls internally — cards grow to their content.
+ */
+export class Card extends RapidElement {
+  static get styles() {
+    return css`
+      ${designTokens}
+
+      :host {
+        display: block;
+      }
+
+      /* The chrome lives on an inner frame rather than the host so
+         document-level universal rules (e.g. tailwind's preflight
+         border-color) can't override it. */
+      .frame {
+        background: var(--card-bg, var(--surface));
+        border: 1px solid var(--card-border, var(--border-strong));
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+      }
+
+      /* note variant — the sticky-note surface, header included */
+      :host([variant='note']) .frame {
+        background: var(--surface-note);
+        border-color: var(--border-note);
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        padding: 8px 10px;
+        cursor: pointer;
+        user-select: none;
+        border-radius: var(--r-sm);
+      }
+
+      .card-header temba-icon {
+        --icon-color: var(--text-3);
+      }
+
+      .grip {
+        margin-right: 0.5em;
+        cursor: grab;
+        --icon-color: var(--text-4);
+      }
+
+      .card-header:hover .grip {
+        --icon-color: var(--text-3);
+      }
+
+      .label {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        font-size: 13px;
+        font-weight: var(--w-medium);
+        color: var(--text-2);
+      }
+
+      .label temba-icon {
+        margin-right: 0.5em;
+      }
+
+      .count {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        margin-right: 0.5em;
+        border-radius: 999px;
+        background: var(--accent-100);
+        color: var(--accent-700);
+        font-size: 11px;
+        font-weight: var(--w-semibold);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .dot {
+        height: 0.5em;
+        width: 0.5em;
+        margin-right: 0.5em;
+        background: var(--accent-600);
+        border-radius: 99px;
+      }
+
+      .toggle {
+        transition: transform 200ms ease;
+      }
+
+      .toggle.collapsed {
+        transform: rotate(-90deg);
+      }
+
+      /* Grid trick so collapse animates to natural content height without
+         capping how tall an expanded card can grow. */
+      .body {
+        display: grid;
+        grid-template-rows: 1fr;
+        transition: grid-template-rows 200ms ease;
+      }
+
+      .body.collapsed {
+        grid-template-rows: 0fr;
+      }
+
+      .inner {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      /* once fully expanded, let popovers (date pickers etc.) escape */
+      .body:not(.collapsed):not(.animating) .inner {
+        overflow: visible;
+      }
+
+      .content {
+        padding: 0 10px 10px;
+      }
+
+      /* bleed mode: the body content runs edge-to-edge so a panel with its
+         own surface (e.g. the notepad) fills the card, clipped to the card
+         radius. The footer of such content sits on the card's bottom edge. */
+      :host([bleed]) .content {
+        padding: 0;
+      }
+
+      :host([bleed]) .body:not(.collapsed):not(.animating) .inner {
+        overflow: hidden;
+        border-radius: 0 0 var(--r-sm) var(--r-sm);
+      }
+
+      /* plain mode: headerless and non-collapsible — the wrapper (e.g. a
+         tab pane) supplies the label — but still a proper card surface
+         with padding. Fills its pane and scrolls its content internally,
+         since a tab pane is height-bounded. */
+      :host([plain]) {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        margin-top: var(--layout-spacing, 8px);
+        margin-bottom: var(--layout-spacing, 8px);
+      }
+
+      :host([plain]) .frame,
+      :host([plain]) .body,
+      :host([plain]) .inner {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      :host([plain]) .inner {
+        border-radius: var(--r-sm);
+      }
+
+      :host([plain]) .content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        padding: 10px;
+        overflow-y: auto;
+      }
+
+      /* no header row in plain mode, so bleeding content gets a top inset
+         directly against the card surface */
+      :host([plain][bleed]) .content {
+        padding: 10px 0 0 0;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  label = '';
+
+  @property({ type: String })
+  icon = '';
+
+  @property({ type: Number })
+  count = 0;
+
+  // show a dot instead of the count
+  @property({ type: Boolean })
+  activity = false;
+
+  @property({ type: Boolean, reflect: true })
+  collapsed = false;
+
+  // render without chrome (no header, border or collapse) — content only
+  @property({ type: Boolean, reflect: true })
+  plain = false;
+
+  // body content runs edge-to-edge instead of getting the inset padding
+  @property({ type: Boolean, reflect: true })
+  bleed = false;
+
+  // named surface treatments, e.g. "note" for the sticky-note look
+  @property({ type: String, reflect: true })
+  variant = '';
+
+  @property({ type: Boolean })
+  dirty = false;
+
+  private animating = false;
+
+  private handleHeaderClick() {
+    this.collapsed = !this.collapsed;
+    this.animating = true;
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent('toggle', {
+        bubbles: true,
+        composed: true,
+        detail: { collapsed: this.collapsed, label: this.label }
+      })
+    );
+  }
+
+  private handleTransitionEnd(event: TransitionEvent) {
+    // transitionend bubbles composed out of slotted content — only our own
+    // grid collapse animation should clear the clipping state
+    if (
+      event.target !== event.currentTarget ||
+      event.propertyName !== 'grid-template-rows'
+    ) {
+      return;
+    }
+    this.animating = false;
+    this.requestUpdate();
+  }
+
+  private handleDetailsChanged(event: CustomEvent) {
+    if ('dirty' in event.detail) {
+      this.dirty = event.detail.dirty;
+    }
+    if ('count' in event.detail) {
+      this.count = event.detail.count;
+    }
+  }
+
+  public render(): TemplateResult {
+    if (this.plain) {
+      return html`
+        <div class="frame">
+          <div class="body">
+            <div class="inner">
+              <div class="content">
+                <slot
+                  @temba-details-changed=${this.handleDetailsChanged}
+                ></slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="frame">
+        <div class="card-header" @click=${this.handleHeaderClick}>
+          <temba-icon name=${Icon.drag} class="grip"></temba-icon>
+          <div class="label">
+            ${this.icon
+              ? html`<temba-icon name=${this.icon}></temba-icon>`
+              : null}
+            ${this.label}${this.dirty ? ' *' : ''}
+          </div>
+          <slot name="header-actions"></slot>
+          ${this.count > 0
+            ? this.activity
+              ? html`<div class="dot"></div>`
+              : html`<div class="count">${this.count.toLocaleString()}</div>`
+            : null}
+          <temba-icon
+            name=${Icon.arrow_down}
+            class="toggle ${this.collapsed ? 'collapsed' : ''}"
+          ></temba-icon>
+        </div>
+        <div
+          class="body ${getClasses({
+            collapsed: this.collapsed,
+            animating: this.animating
+          })}"
+          @transitionend=${this.handleTransitionEnd}
+        >
+          <div class="inner">
+            <div class="content">
+              <slot @temba-details-changed=${this.handleDetailsChanged}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}