@nyaruka/temba-components 0.158.0 → 0.158.3

package/src/list/FlowList.ts

@@ -0,0 +1,251 @@
+import { css, html, TemplateResult } from 'lit';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+
+/**
+ * Flow CRUDL list — drop-in replacement for the rapidpro
+ * `flows/flow_list.html` table. Each row's leading icon reflects
+ * the flow type (messaging / voice / background / surveyor).
+ * Columns: name, runs, ongoing, completion bar, status, modified.
+ */
+export class FlowList extends ContentList<any> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .flow-name {
+        color: inherit;
+        font-weight: var(--w-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .flow-labels {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: 4px;
+      }
+      .issue-icon {
+        --icon-color: var(--warning);
+      }
+      .num {
+        font-variant-numeric: tabular-nums;
+        color: inherit;
+      }
+      .completion-bar {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        justify-content: flex-end;
+      }
+      .completion-bar .bar {
+        width: 50px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--sunken);
+        overflow: hidden;
+      }
+      .completion-bar .fill {
+        height: 100%;
+        background: var(--success);
+        border-radius: 999px;
+      }
+      .completion-bar .pct {
+        font-variant-numeric: tabular-nums;
+        color: var(--text-2);
+        min-width: 36px;
+        text-align: right;
+      }
+      .sparkline {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .sparkline .line {
+        fill: none;
+        stroke: var(--accent-600);
+        stroke-width: 1.25;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+      }
+      .sparkline .area {
+        fill: var(--accent-100);
+        opacity: 0.7;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.valueKey = 'uuid';
+    this.emptyMessage = 'No flows';
+    this.searchPlaceholder = 'Search flows';
+    this.columns = [
+      { key: 'name', label: 'Name', sortable: true, grow: 3 },
+      {
+        key: 'status',
+        label: 'Status',
+        width: '110px',
+        grow: 0
+      },
+      {
+        key: 'runs',
+        label: 'Runs',
+        sortable: true,
+        width: '80px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'ongoing',
+        label: 'Ongoing',
+        sortable: true,
+        width: '80px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'completion',
+        label: 'Completion',
+        width: '120px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'activity',
+        label: 'Activity',
+        width: '120px',
+        grow: 0,
+        align: 'right'
+      }
+    ];
+    this.bulkActions = [
+      {
+        key: 'label',
+        label: 'Label',
+        icon: Icon.label,
+        labelsEndpoint: '/api/v2/flow-labels.json'
+      },
+      { key: 'export', label: 'Export results', icon: Icon.export },
+      { key: 'archive', label: 'Archive', icon: Icon.archive }
+    ];
+  }
+
+  protected getRowIcon(item: any): string | null {
+    switch (item?.type) {
+      case 'voice':
+      case 'ivr':
+        return Icon.flow_ivr;
+      case 'background':
+        return Icon.flow_background;
+      case 'survey':
+        return Icon.flow_surveyor;
+      default:
+        return Icon.flow_message;
+    }
+  }
+
+  protected getRowHref(item: any): string | null {
+    return item?.uuid ? `/flow/editor/${item.uuid}/` : null;
+  }
+
+  protected renderCell(
+    item: any,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'name': {
+        const labels = item.labels || [];
+        return html`<span class="flow-name"
+          >${item.name || ''}
+          ${item.has_issues
+            ? html`<temba-icon
+                class="issue-icon"
+                name=${Icon.issue}
+                size="0.9"
+              ></temba-icon>`
+            : null}
+          ${labels.length > 0
+            ? html`<span class="flow-labels">
+                ${labels.map(
+                  (l: any) =>
+                    html`<temba-label type="label" icon=${Icon.label}
+                      >${l.name}</temba-label
+                    >`
+                )}
+              </span>`
+            : null}
+        </span>`;
+      }
+      case 'runs':
+        return html`<span class="num"
+          >${(item.runs ?? 0).toLocaleString()}</span
+        >`;
+      case 'ongoing':
+        return html`<span class="num">${item.ongoing ?? 0}</span>`;
+      case 'completion':
+        return this.renderCompletion(item);
+      case 'activity':
+        return this.renderSparkline(item.activity || []);
+      case 'status':
+        return this.renderFlowStatus(item);
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+
+  private renderCompletion(item: any): TemplateResult {
+    const value = typeof item.completion === 'number' ? item.completion : 0;
+    const pct = Math.round(value * 100);
+    return html`
+      <div class="completion-bar">
+        <div class="bar">
+          <div class="fill" style="width: ${pct}%"></div>
+        </div>
+        <span class="pct">${pct}%</span>
+      </div>
+    `;
+  }
+
+  /** Render a tiny line+area sparkline from a numeric array.
+   * Values are normalized to the column's pixel viewBox; absolute
+   * magnitude isn't preserved — the goal is shape, not scale. */
+  private renderSparkline(values: number[]): TemplateResult {
+    if (!values || values.length < 2) return html``;
+    const w = 90;
+    const h = 22;
+    const max = Math.max(...values, 1);
+    const step = w / (values.length - 1);
+    const pts = values.map((v, i) => {
+      const x = i * step;
+      const y = h - (v / max) * (h - 2) - 1;
+      return [x.toFixed(1), y.toFixed(1)] as const;
+    });
+    const line = pts.map(([x, y]) => `${x},${y}`).join(' ');
+    const areaCmds = pts
+      .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x},${y}`)
+      .join(' ');
+    const area = `${areaCmds} L${w},${h} L0,${h} Z`;
+    return html`
+      <svg
+        class="sparkline"
+        width=${w}
+        height=${h}
+        viewBox="0 0 ${w} ${h}"
+        preserveAspectRatio="none"
+      >
+        <path class="area" d=${area}></path>
+        <polyline class="line" points=${line}></polyline>
+      </svg>
+    `;
+  }
+
+  private renderFlowStatus(item: any): TemplateResult {
+    const status = (item.status || 'active').toString().toLowerCase();
+    const kind = status === 'archived' ? 'archived' : 'active';
+    const label = status === 'archived' ? 'Archived' : 'Active';
+    return this.renderStatusPill(kind, label);
+  }
+}

package/src/list/MsgList.ts

@@ -0,0 +1,144 @@
+import { css, html, TemplateResult } from 'lit';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+
+/**
+ * Message CRUDL list — drop-in replacement for the rapidpro
+ * `msgs/msg_list.html` table. Reverse-chronological; rows carry
+ * contact name, message text + attachments + labels + active-flow
+ * pill, and a duration timestamp.
+ */
+export class MsgList extends ContentList<any> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .msg-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+        font-size: 12px;
+        color: var(--text-3);
+      }
+      .msg-text {
+        display: block;
+        color: inherit;
+        font-weight: var(--w-regular);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .msg-row {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .attachment-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 0 6px 0 4px;
+        border-radius: 999px;
+        background: var(--sunken);
+        color: var(--text-3);
+        --icon-color: var(--text-3);
+        font-size: 11px;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.valueKey = 'id';
+    this.emptyMessage = 'No messages';
+    this.searchPlaceholder = 'Search messages';
+    this.columns = [
+      { key: 'contact', label: 'Contact', width: '180px', grow: 0 },
+      { key: 'text', label: 'Message', grow: 2 },
+      {
+        key: 'created_on',
+        label: 'Sent',
+        width: '110px',
+        grow: 0,
+        align: 'right'
+      }
+    ];
+    this.bulkActions = [
+      {
+        key: 'label',
+        label: 'Label',
+        icon: Icon.label,
+        labelsEndpoint: '/api/v2/labels.json'
+      },
+      { key: 'archive', label: 'Archive', icon: Icon.archive },
+      { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
+    ];
+  }
+
+  protected renderCell(
+    item: any,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'contact': {
+        const contact = item.contact || {};
+        return html`<span class="msg-text"
+          >${contact.name || contact.urn || ''}</span
+        >`;
+      }
+      case 'text':
+        return this.renderMessageBody(item);
+      case 'created_on':
+        return html`<temba-date
+          value=${item.created_on}
+          display="duration"
+        ></temba-date>`;
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+
+  private renderMessageBody(item: any): TemplateResult {
+    const labels = item.labels || [];
+    const attachments = item.attachments || [];
+    const isOptin = item.msg_type === 'optin' || item.type === 'optin';
+
+    return html`
+      <div class="msg-row">
+        <span class="msg-text">
+          ${item.text || (isOptin ? 'Opt-in request' : '')}
+        </span>
+        ${labels.length || attachments.length || item.flow || isOptin
+          ? html`
+              <div class="msg-meta">
+                ${isOptin ? this.renderStatusPill('pending', 'opt-in') : null}
+                ${attachments.map(
+                  () => html`
+                    <span class="attachment-pill">
+                      <temba-icon
+                        name=${Icon.attachment}
+                        size="0.8"
+                      ></temba-icon>
+                      attachment
+                    </span>
+                  `
+                )}
+                ${item.flow
+                  ? html`<temba-label type="flow" icon=${Icon.flow}
+                      >${item.flow.name}</temba-label
+                    >`
+                  : null}
+                ${labels.map(
+                  (l: any) => html`
+                    <temba-label type="label" icon=${Icon.label}
+                      >${l.name}</temba-label
+                    >
+                  `
+                )}
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
+}

package/static/api/flow-labels.json

@@ -0,0 +1,31 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "fl-001",
+      "name": "Active Campaigns",
+      "count": 12
+    },
+    {
+      "uuid": "fl-002",
+      "name": "Surveys",
+      "count": 8
+    },
+    {
+      "uuid": "fl-003",
+      "name": "Onboarding",
+      "count": 4
+    },
+    {
+      "uuid": "fl-004",
+      "name": "Internal",
+      "count": 2
+    },
+    {
+      "uuid": "fl-005",
+      "name": "Archived",
+      "count": 6
+    }
+  ]
+}

package/temba-modules.ts

@@ -47,6 +47,10 @@ import { ColorPicker } from './src/form/ColorPicker';
 import { Resizer } from './src/layout/Resizer';
 import { Thumbnail } from './src/display/Thumbnail';
 import { NotificationList } from './src/list/NotificationList';
+import { ContentList } from './src/list/ContentList';
+import { MsgList } from './src/list/MsgList';
+import { ContactList } from './src/list/ContactList';
+import { FlowList } from './src/list/FlowList';
 import { WebChat } from './src/webchat/WebChat';
 import { ImagePicker } from './src/form/ImagePicker';
 import { Mask } from './src/layout/Mask';
@@ -127,6 +131,10 @@ addCustomElement('temba-contact-chat', ContactChat);
 addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-notification-list', NotificationList);
+addCustomElement('temba-content-list', ContentList);
+addCustomElement('temba-msg-list', MsgList);
+addCustomElement('temba-contact-list', ContactList);
+addCustomElement('temba-flow-list', FlowList);
 addCustomElement('temba-list', TembaList);
 addCustomElement('temba-sortable-list', SortableList);
 addCustomElement('temba-run-list', RunList);

package/web-dev-server.config.mjs

@@ -223,6 +223,72 @@ function generateFlowMetadata(flowDefinition) {
   return generateFlowInfo(flowDefinition);
 }
 
+// In-memory state for the content-list demo so the labeling flow
+// (label, refresh, recheck) is exercisable end-to-end. The first
+// GET / POST loads from the on-disk fixture; subsequent ops mutate
+// the in-memory copy. The on-disk fixture is never written — state
+// resets on dev-server restart, which is the right default for a
+// throwaway demo.
+const demoState = {
+  messages: null,
+  flows: null,
+  labels: null,
+  flowLabels: null
+};
+
+function loadDemoJson(stateKey, filePath) {
+  if (demoState[stateKey] === null) {
+    demoState[stateKey] = JSON.parse(
+      fs.readFileSync(path.resolve(filePath), 'utf-8')
+    );
+  }
+  return demoState[stateKey];
+}
+
+/** Filter the in-memory demo items for a content-list endpoint.
+ *
+ * Supports `?label=<uuid>` (only items carrying that label) so the
+ * demo can exercise the filtered-view → label-removed → row-drops-
+ * out → recheck-selection lifecycle. */
+function getFilteredDemoItems(data, url) {
+  const labelFilter = url.searchParams.get('label');
+  let results = data.results;
+  if (labelFilter) {
+    results = results.filter((item) =>
+      (item.labels || []).some((l) => l.uuid === labelFilter)
+    );
+  }
+  return { ...data, count: results.length, results };
+}
+
+/** Apply a label-toggle to a list of in-memory items, mirroring
+ * smartmin's BulkActionMixin behavior. Body is x-www-form-urlencoded
+ * (params: action, objects[], label, add). The `idKey` is what each
+ * item is matched against (messages use numeric `id`, flows use
+ * string `uuid`). */
+function applyDemoListAction(body, items, labels, idKey) {
+  const params = new URLSearchParams(body);
+  const action = params.get('action');
+  if (action !== 'label') return;
+  const labelUuid = params.get('label');
+  const add = params.get('add') !== 'false';
+  const objectIds = params.getAll('objects');
+  const label = (labels.results || []).find((l) => l.uuid === labelUuid);
+  if (!label) return;
+  objectIds.forEach((idStr) => {
+    const lookup = idKey === 'id' ? parseInt(idStr, 10) : idStr;
+    const item = items.results.find((i) => i[idKey] === lookup);
+    if (!item) return;
+    item.labels = item.labels || [];
+    const idx = item.labels.findIndex((l) => l.uuid === labelUuid);
+    if (add && idx < 0) {
+      item.labels.push({ uuid: label.uuid, name: label.name });
+    } else if (!add && idx >= 0) {
+      item.labels.splice(idx, 1);
+    }
+  });
+}
+
 export default {
   nodeResolve: true,
   plugins: [
@@ -244,6 +310,7 @@ export default {
           const apiMappings = {
             '/api/v2/groups.json': 'groups.json',
             '/api/v2/labels.json': 'labels.json',
+            '/api/v2/flow-labels.json': 'flow-labels.json',
             '/api/v2/fields.json': 'fields.json', 
             '/api/v2/globals.json': 'globals.json',
             '/api/v2/resthooks.json': 'resthooks.json',
@@ -363,6 +430,95 @@ export default {
           return;
         }
 
+        // Serve the content-list demo messages from in-memory state
+        // so a labeling POST is reflected on the next refresh. Honors
+        // an optional `?label=<uuid>` filter for testing the filtered-
+        // view drop-out lifecycle.
+        if (
+          context.request.method === 'GET' &&
+          context.path === '/demo/components/content-list/data/messages.json'
+        ) {
+          const reqUrl = new URL(context.request.url, 'http://localhost');
+          const data = loadDemoJson(
+            'messages',
+            './demo/components/content-list/data/messages.json'
+          );
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(getFilteredDemoItems(data, reqUrl));
+          return;
+        }
+
+        // Same lifecycle for the flows list — labels carried on
+        // each flow live in flows.json; the labels themselves come
+        // from /api/v2/flow-labels.json.
+        if (
+          context.request.method === 'GET' &&
+          context.path === '/demo/components/content-list/data/flows.json'
+        ) {
+          const reqUrl = new URL(context.request.url, 'http://localhost');
+          const data = loadDemoJson(
+            'flows',
+            './demo/components/content-list/data/flows.json'
+          );
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(getFilteredDemoItems(data, reqUrl));
+          return;
+        }
+
+        // Bulk-action POSTs for the content-list demo: mutate the
+        // in-memory items so the subsequent refresh actually shows
+        // the labeling change. Body is form-urlencoded as sent by
+        // ContentList.toggleLabel().
+        if (
+          context.request.method === 'POST' &&
+          context.path === '/demo/components/content-list/list-action'
+        ) {
+          return new Promise((resolve) => {
+            let body = '';
+            context.req.on('data', (chunk) => { body += chunk.toString(); });
+            context.req.on('end', () => {
+              const messages = loadDemoJson(
+                'messages',
+                './demo/components/content-list/data/messages.json'
+              );
+              const labels = loadDemoJson(
+                'labels',
+                './static/api/labels.json'
+              );
+              applyDemoListAction(body, messages, labels, 'id');
+              context.contentType = 'application/json';
+              context.status = 200;
+              context.body = JSON.stringify({ status: 'success' });
+              resolve();
+            });
+          });
+        }
+
+        if (
+          context.request.method === 'POST' &&
+          context.path === '/demo/components/content-list/flow-list-action'
+        ) {
+          return new Promise((resolve) => {
+            let body = '';
+            context.req.on('data', (chunk) => { body += chunk.toString(); });
+            context.req.on('end', () => {
+              const flows = loadDemoJson(
+                'flows',
+                './demo/components/content-list/data/flows.json'
+              );
+              const labels = loadDemoJson(
+                'flowLabels',
+                './static/api/flow-labels.json'
+              );
+              applyDemoListAction(body, flows, labels, 'uuid');
+              context.contentType = 'application/json';
+              context.status = 200;
+              context.body = JSON.stringify({ status: 'success' });
+              resolve();
+            });
+          });
+        }
+
         // Handle contact chat POST (send message) - return a mock event
         if (context.request.method === 'POST' && context.path.match(/^\/contact\/chat\/[^/]+\/$/)) {
           return new Promise((resolve) => {