@coworkee/airworks 0.0.1033 → 0.0.1035

package/dist/apps/report-designer.js

@@ -1,7 +1,7 @@
 import { errorText, esc } from "../dom.js";
 import { formDialog } from "../form.js";
 import { icons } from "../icons.js";
-import { createWidget, hasData, isNumber, place, presets, reportIcons } from "./report-model.js";
+import { createWidget, fits, hasData, isNumber, place, presets, reportIcons } from "./report-model.js";
 import { humanize, rangeSelect, renderGrid, renderWidget, reportAppId, reportDesignerAppId } from "./reports.js";
 const reports = '/api/v1/reports';
 const json = (method, body) => ({ method, body: body === undefined ? undefined : JSON.stringify(body) });
@@ -32,7 +32,8 @@ function panelHtml(coworkee, widget, sources) {
         widget.type === 'Chart' ? select('options.chart', 'Chart', presets.filter((preset) => preset.type === 'Chart').map((preset) => [preset.chart, t(preset.name)]), widget.options.chart) : '',
     ];
     if (q && hasData(widget.type)) {
-        parts.push(`<h4>${esc(t('Data'))}</h4>`, select('query.entitySet', 'Data source', sources.map((source) => [source.entitySet, t(source.label)]), q.entitySet));
+        parts.push(`<h4>${esc(t('Data'))}</h4>`, select('query.entitySet', 'Data source', sources.filter((source) => fits(widget.type, source))
+            .map((source) => [source.entitySet, `${source.computed ? '∑ ' : ''}${t(source.label)}`]), q.entitySet));
         if (widget.type === 'Chart' || widget.type === 'Pivot')
             parts.push(groupBy('groupBy', widget.type === 'Pivot' ? 'Rows' : 'Group by', false), groupBy('splitBy', widget.type === 'Pivot' ? 'Columns' : 'Series', true));
         if (widget.type === 'Kpi' || widget.type === 'Chart' || widget.type === 'Pivot') {
@@ -113,7 +114,7 @@ export const reportDesignerApp = (coworkee) => ({
         const panel = host.querySelector('.cw-designer-panel');
         const title = () => setTitle(report.name || t('New report'));
         const draw = () => {
-            renderGrid(coworkee, grid, widgets(), onClose, report.definition.dateRange, selected);
+            renderGrid(coworkee, grid, widgets(), onClose, report.definition.dateRange, selected, sources);
             grid.querySelectorAll('[data-resize]').forEach((handle) => { handle.hidden = false; });
             if (widgets().length === 0)
                 grid.innerHTML = `<p class="cw-muted">${esc(t('This report has no widgets yet.'))}</p>`;
@@ -143,7 +144,7 @@ export const reportDesignerApp = (coworkee) => ({
                 return draw();
             element.querySelector('header').firstChild.textContent = widget.title ?? '';
             const body = element.querySelector('.cw-widget-body');
-            renderWidget(coworkee, widget, body, onClose, report.definition.dateRange).catch((error) => { body.innerHTML = `<p class="cw-error">${esc(errorText(error))}</p>`; });
+            renderWidget(coworkee, widget, body, onClose, report.definition.dateRange, sources).catch((error) => { body.innerHTML = `<p class="cw-error">${esc(errorText(error))}</p>`; });
         };
         const settings = async () => formDialog(coworkee, {
             title: t('Report settings'),
@@ -269,7 +270,8 @@ export const reportDesignerApp = (coworkee) => ({
                 return;
             }
             const structural = input.tagName === 'SELECT' || input.type === 'checkbox';
-            if (input.dataset.path === 'type' && hasData(widget.type) && !widget.query)
+            const unfit = sources.find((source) => source.entitySet === widget.query?.entitySet && !fits(widget.type, source));
+            if (input.dataset.path === 'type' && hasData(widget.type) && (!widget.query || unfit))
                 widget.query = createWidget(presets.find((preset) => preset.type === widget.type), sources, []).query;
             if (input.dataset.path === 'query.entitySet')
                 Object.assign(widget.query, { groupBy: null, splitBy: null, dateField: null, columns: [], orderBy: null, filter: null, rules: null, facets: [], aggregates: [{ function: 'Count', field: null, label: null }] });

package/dist/apps/report-model.d.ts

@@ -17,6 +17,8 @@ export declare const reportIcons: Record<string, string>;
 export declare const icon: (svg?: string | null) => string;
 export declare const hasData: (type: Widget["type"]) => type is "Kpi" | "Chart" | "Table" | "DataTable" | "Pivot";
 export declare const isNumber: (field: Field) => boolean;
+/** The data table pages through OData, which computed sources (the app's own, `computed`) do not have. */
+export declare const fits: (type: Widget["type"], source: Source) => boolean;
 /** A new widget below the others with a first query that already shows something, like the web app's palette. */
 export declare function createWidget(preset: Preset, sources: readonly Source[], existing: readonly Widget[], entitySet?: string): Widget;
 /** A widget moved or resized on the 12 column grid stays inside it and at least one cell big. */
@@ -36,5 +38,11 @@ export declare function resolveRange(range: DateRange, today?: Date): {
     from: string;
     to: string;
 };
-/** The widget filter with the report's date range on the widget's date field. */
-export declare function widgetFilter(query: NonNullable<Widget['query']>, range?: DateRange | null, today?: Date): string | null;
+/** The widget filter with the report's date range on the widget's date field (plain days for date-only fields). */
+export declare function widgetFilter(query: NonNullable<Widget['query']>, range?: DateRange | null, today?: Date, dateOnly?: boolean): string | null;
+/** The filter of a widget on its source: the date range as plain days when the source's date field is date-only. */
+export declare const sourceFilter: (query: NonNullable<Widget["query"]>, source: Source | undefined, range?: DateRange | null, today?: Date) => string | null;
+/** The columns of a table: the chosen ones, otherwise the first six plain fields of the source. */
+export declare const tableColumns: (query: NonNullable<Widget["query"]>, source?: Source) => string[];
+/** The first page of a table on a computed source, for POST /api/v1/reports/rows. */
+export declare const rowsRequest: (query: NonNullable<Widget["query"]>, source: Source, range?: DateRange | null, today?: Date, top?: number) => Schemas["ReportRowsRequest"];

package/dist/apps/report-model.js

@@ -34,6 +34,8 @@ export const reportIcons = {
 export const icon = (svg) => svg ? `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="cw-report-icon">${svg}</svg>` : '';
 export const hasData = (type) => type === 'Kpi' || type === 'Chart' || type === 'Table' || type === 'DataTable' || type === 'Pivot';
 export const isNumber = (field) => field.kind === 'Integer' || field.kind === 'Number';
+/** The data table pages through OData, which computed sources (the app's own, `computed`) do not have. */
+export const fits = (type, source) => type !== 'DataTable' || !source.computed;
 let counter = 0;
 const id = () => (globalThis.crypto?.randomUUID?.() ?? `w${Date.now()}${counter++}`).replace(/-/g, '').slice(0, 12);
 /** A new widget below the others with a first query that already shows something, like the web app's palette. */
@@ -43,7 +45,7 @@ export function createWidget(preset, sources, existing, entitySet) {
         w: preset.w, h: preset.h, query: null,
         options: { chart: preset.chart, format: 'Number', currency: 'EUR', showLegend: true, showDataLabels: false, palette: [], compareToPrevious: false, higherIsBetter: true, sparkline: 'None', target: null, view: 'Table', crossFilter: false, text: preset.type === 'Markdown' ? '## Notes\nWrite **markdown** here.' : null, url: null },
     };
-    const source = sources.find((s) => s.entitySet === entitySet) ?? sources[0];
+    const source = sources.find((s) => s.entitySet === entitySet && fits(preset.type, s)) ?? sources.find((s) => fits(preset.type, s));
     if (!hasData(preset.type) || !source)
         return widget;
     const date = source.fields.find((f) => f.kind === 'Date');
@@ -97,12 +99,24 @@ export function resolveRange(range, today = new Date()) {
     })();
     return { from: iso(from), to: iso(to) };
 }
-/** The widget filter with the report's date range on the widget's date field. */
-export function widgetFilter(query, range, today) {
+/** The widget filter with the report's date range on the widget's date field (plain days for date-only fields). */
+export function widgetFilter(query, range, today, dateOnly = false) {
     const parts = [query.filter, ...(query.facets ?? []).map((facet) => facet.oData)].filter((part) => !!part);
     if (range && query.dateField) {
         const { from, to } = resolveRange(range, today);
-        parts.push(`${query.dateField} ge ${from}T00:00:00Z and ${query.dateField} lt ${to}T00:00:00Z`);
+        const time = dateOnly ? '' : 'T00:00:00Z';
+        parts.push(`${query.dateField} ge ${from}${time} and ${query.dateField} lt ${to}${time}`);
     }
     return parts.length === 0 ? null : parts.map((part) => `(${part})`).join(' and ');
 }
+/** The filter of a widget on its source: the date range as plain days when the source's date field is date-only. */
+export const sourceFilter = (query, source, range, today) => widgetFilter(query, range, today, !!source?.fields.find((field) => field.path === query.dateField)?.dateOnly);
+/** The columns of a table: the chosen ones, otherwise the first six plain fields of the source. */
+export const tableColumns = (query, source) => query.columns?.length
+    ? query.columns.map(String)
+    : (source?.fields ?? []).filter((field) => field.kind !== 'Guid' && !field.path.includes('/')).slice(0, 6).map((field) => field.path);
+/** The first page of a table on a computed source, for POST /api/v1/reports/rows. */
+export const rowsRequest = (query, source, range, today, top = 50) => ({
+    entitySet: String(query.entitySet), columns: tableColumns(query, source), filter: sourceFilter(query, source, range, today),
+    orderBy: query.orderBy ?? null, descending: !!query.descending, skip: 0, top,
+});

package/dist/apps/reports.d.ts

@@ -1,7 +1,7 @@
 import type { AppContext } from '@fgilde/airworks';
 import type { Coworkee, CoworkeeApp } from '../coworkee.ts';
 import { humanize } from '../dom.ts';
-import { type DateRange, type Widget } from './report-model.ts';
+import { type DateRange, type Source, type Widget } from './report-model.ts';
 export declare const reportAppId = "coworkee.report";
 export declare const reportDesignerAppId = "coworkee.report-designer";
 export declare const datePresets: string[];
@@ -9,9 +9,9 @@ export { humanize };
 /** A value in the widget's number format. */
 export declare function formatNumber(value: unknown, format: string | undefined, culture: string, currency?: string): string;
 /** Renders one widget into body: KPI, chart (bars, lines, areas, pies), table, pivot, data table, text, image or web page. */
-export declare function renderWidget(coworkee: Coworkee, widget: Widget, body: HTMLElement, onClose: AppContext['onClose'], range?: DateRange | null): Promise<void>;
+export declare function renderWidget(coworkee: Coworkee, widget: Widget, body: HTMLElement, onClose: AppContext['onClose'], range?: DateRange | null, sources?: readonly Source[]): Promise<void>;
 /** Widgets on the 12 column grid, each loading its data. */
-export declare function renderGrid(coworkee: Coworkee, grid: HTMLElement, widgets: readonly Widget[], onClose: AppContext['onClose'], range?: DateRange | null, selected?: string): void;
+export declare function renderGrid(coworkee: Coworkee, grid: HTMLElement, widgets: readonly Widget[], onClose: AppContext['onClose'], range?: DateRange | null, selected?: string, sources?: readonly Source[]): void;
 export declare const rangeSelect: (coworkee: Coworkee, range?: DateRange | null) => string;
 /** One report: its widgets in their places on the grid, the date range to look at, and the designer for those who may change it. */
 export declare const reportApp: (coworkee: Coworkee) => CoworkeeApp;

package/dist/apps/reports.js

@@ -1,7 +1,7 @@
 import { crudApp } from "../crud.js";
-import { errorText, esc, humanize } from "../dom.js";
+import { display, errorText, esc, humanize } from "../dom.js";
 import { renderEntityTable } from "../table.js";
-import { icon, widgetFilter } from "./report-model.js";
+import { icon, rowsRequest, sourceFilter } from "./report-model.js";
 const reports = '/api/v1/reports';
 const json = (method, body) => ({ method, body: body === undefined ? undefined : JSON.stringify(body) });
 export const reportAppId = 'coworkee.report';
@@ -21,10 +21,10 @@ export function formatNumber(value, format, culture, currency) {
         default: return number.toLocaleString(culture, { maximumFractionDigits: 2 });
     }
 }
-const query = (coworkee, widget, range) => {
+const query = (coworkee, widget, range, set) => {
     const source = widget.query;
     return coworkee.request(`${reports}/query`, json('POST', {
-        entitySet: source.entitySet, filter: widgetFilter(source, range), groupBy: source.groupBy ?? null, splitBy: source.splitBy ?? null,
+        entitySet: source.entitySet, filter: sourceFilter(source, set, range), groupBy: source.groupBy ?? null, splitBy: source.splitBy ?? null,
         aggregates: source.aggregates, sortBy: source.sortBy, descending: source.descending, top: source.top ?? null,
     }));
 };
@@ -67,8 +67,19 @@ function table(coworkee, widget, result) {
     return `<table class="cw-table"><thead><tr><th></th>${aggregates.map((aggregate) => `<th>${esc(coworkee.t(aggregate.label ?? `${humanize(aggregate.function)}${aggregate.field ? ` ${aggregate.field}` : ''}`))}</th>`).join('')}</tr></thead>
     <tbody>${result.rows.map((row) => `<tr><td>${esc(label(row))}</td>${row.values.map((value) => `<td class="cw-number">${esc(formatNumber(value, widget.options.format, coworkee.culture, widget.options.currency))}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
 }
+/** The rows of a table on a computed source, read from the report API (there is no OData set). */
+async function rows(coworkee, widget, source, range) {
+    const request = rowsRequest(widget.query, source, range);
+    if (request.columns.length === 0)
+        return '';
+    const result = await coworkee.request(`${reports}/rows`, json('POST', request));
+    const label = (path) => source.fields.find((field) => field.path === path)?.label ?? humanize(path);
+    return `<table class="cw-table"><thead><tr>${request.columns.map((path) => `<th>${esc(coworkee.t(label(path)))}</th>`).join('')}</tr></thead>
+    <tbody>${result.rows.map((row) => `<tr>${request.columns.map((path) => `<td>${esc(display(row[path], coworkee.culture))}</td>`).join('')}</tr>`).join('')
+        || `<tr><td colspan="${request.columns.length}" class="cw-muted">${esc(coworkee.t('Nothing found.'))}</td></tr>`}</tbody></table>`;
+}
 /** Renders one widget into body: KPI, chart (bars, lines, areas, pies), table, pivot, data table, text, image or web page. */
-export async function renderWidget(coworkee, widget, body, onClose, range) {
+export async function renderWidget(coworkee, widget, body, onClose, range, sources = []) {
     const options = widget.options;
     switch (widget.type) {
         case 'Markdown':
@@ -85,12 +96,17 @@ export async function renderWidget(coworkee, widget, body, onClose, range) {
         body.innerHTML = '';
         return;
     }
+    const source = sources.find((item) => item.entitySet === widget.query.entitySet);
+    if (source?.computed && (widget.type === 'Table' || widget.type === 'DataTable')) {
+        body.innerHTML = await rows(coworkee, widget, source, range);
+        return;
+    }
     if (widget.type === 'DataTable') {
         const columns = widget.query.columns?.length ? widget.query.columns.map((field) => ({ field: String(field) })) : undefined;
-        renderEntityTable(coworkee, body, { entitySet: String(widget.query.entitySet), columns, pageSize: 10, filter: widgetFilter(widget.query, range) ?? undefined, orderBy: widget.query.orderBy ? `${widget.query.orderBy}${widget.query.descending ? ' desc' : ''}` : undefined }, onClose);
+        renderEntityTable(coworkee, body, { entitySet: String(widget.query.entitySet), columns, pageSize: 10, filter: sourceFilter(widget.query, source, range) ?? undefined, orderBy: widget.query.orderBy ? `${widget.query.orderBy}${widget.query.descending ? ' desc' : ''}` : undefined }, onClose);
         return;
     }
-    const result = await query(coworkee, widget, range);
+    const result = await query(coworkee, widget, range, source);
     if (widget.type === 'Kpi') {
         const value = result.rows[0]?.values[0];
         const target = options.target === null || options.target === undefined ? '' : ` <small class="cw-muted">/ ${esc(formatNumber(options.target, options.format, coworkee.culture, options.currency))}</small>`;
@@ -106,14 +122,14 @@ export async function renderWidget(coworkee, widget, body, onClose, range) {
     }
 }
 /** Widgets on the 12 column grid, each loading its data. */
-export function renderGrid(coworkee, grid, widgets, onClose, range, selected) {
+export function renderGrid(coworkee, grid, widgets, onClose, range, selected, sources = []) {
     grid.innerHTML = widgets.map((widget) => `<article class="cw-widget${widget.id === selected ? ' cw-selected' : ''}" data-widget="${esc(widget.id)}"
       style="grid-column:${Number(widget.x) + 1} / span ${widget.w};grid-row:${Number(widget.y) + 1} / span ${widget.h}">
       <header data-drag>${esc(widget.title ?? '')}${widget.subtitle ? `<small class="cw-muted"> ${esc(widget.subtitle)}</small>` : ''}</header><div class="cw-widget-body"></div><span class="cw-resize" data-resize hidden></span></article>`).join('')
         || `<p class="cw-muted">${esc(coworkee.t('Nothing found.'))}</p>`;
     for (const widget of widgets) {
         const body = grid.querySelector(`[data-widget="${CSS.escape(widget.id)}"] .cw-widget-body`);
-        renderWidget(coworkee, widget, body, onClose, range).catch((error) => { body.innerHTML = `<p class="cw-error">${esc(errorText(error))}</p>`; });
+        renderWidget(coworkee, widget, body, onClose, range, sources).catch((error) => { body.innerHTML = `<p class="cw-error">${esc(errorText(error))}</p>`; });
     }
 }
 export const rangeSelect = (coworkee, range) => `<select data-range aria-label="${esc(coworkee.t('Date range'))}">
@@ -125,7 +141,8 @@ export const reportApp = (coworkee) => ({
     render: async ({ host, intent, setTitle, onClose }) => {
         const { t } = coworkee;
         host.classList.add('cw-host');
-        const report = await coworkee.request(`${reports}/${intent?.id}`);
+        // the sources say which sets the app computes: their tables read the report API, not OData
+        const [report, sources] = await Promise.all([coworkee.request(`${reports}/${intent?.id}`), coworkee.request(`${reports}/sources`).catch(() => [])]);
         let range = report.definition.dateRange ?? null;
         setTitle(report.name);
         host.innerHTML = `<div class="cw-app"><div class="cw-toolbar">${icon(report.icon)}<strong>${esc(report.name)}</strong><span class="cw-muted">${esc(report.description ?? '')}</span>
@@ -134,7 +151,7 @@ export const reportApp = (coworkee) => ({
       <button data-action="refresh" title="${esc(t('Refresh'))}" aria-label="${esc(t('Refresh'))}">&#x21bb;</button></div><div class="cw-report"></div></div>`;
         const grid = host.querySelector('.cw-report');
         const widgets = report.definition.widgets ?? [];
-        const draw = () => renderGrid(coworkee, grid, widgets, onClose, range);
+        const draw = () => renderGrid(coworkee, grid, widgets, onClose, range, undefined, sources);
         host.querySelector('[data-action=refresh]').addEventListener('click', draw);
         host.querySelector('[data-action=edit]')?.addEventListener('click', () => coworkee.airWorks.openApp(reportDesignerAppId, { id: report.id }));
         host.querySelector('[data-range]').addEventListener('change', (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coworkee/airworks",
-  "version": "0.0.1033",
+  "version": "0.0.1035",
   "description": "AirWorks web desktop for Coworkee apps: sign-in through the app's BFF, theme, texts, realtime and apps for settings, files, data, chat, reports, the assistant and the administration",
   "license": "MIT",
   "homepage": "https://fgilde.github.io/CoworkeeLib/web/airworks/",
@@ -40,7 +40,7 @@
     "test": "node --test \"test/**/*.test.ts\""
   },
   "dependencies": {
-    "@coworkee/client": "0.0.1033"
+    "@coworkee/client": "0.0.1035"
   },
   "peerDependencies": {
     "@fgilde/airworks": ">=0.4.0"