@visns-studio/visns-components 6.1.7 → 6.2.0

package/src/components/generic/reportSemanticSteps/SemanticFiltersStep.jsx

@@ -0,0 +1,483 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { X } from 'lucide-react';
+import {
+    operatorArity,
+    operatorLabel,
+    operatorsForType,
+    parameterTypeFor,
+    resolveFieldPath,
+    suggestParameterId,
+} from '../reportSemantics';
+import { buildFieldSources } from './SemanticFieldsStep';
+import SemanticValueInput, {
+    SemanticValueListInput,
+} from './SemanticValueInput';
+import styles from '../../styles/ReportSemantic.module.scss';
+
+/** Flat, grouped list of every field the user may filter on. */
+export const buildFilterFieldOptions = (model, entityId, addedRelations) =>
+    buildFieldSources(model, entityId, addedRelations).map((source) => ({
+        label: source.label,
+        options: source.fields.map((entry) => ({
+            value: entry.path,
+            label: entry.label,
+        })),
+    }));
+
+const SemanticFilterCondition = ({
+    model,
+    entityId,
+    condition,
+    fieldGroups,
+    onChange,
+    onRemove,
+}) => {
+    const resolved = resolveFieldPath(model, entityId, condition.field);
+    const type = resolved?.type || 'text';
+    const operators = operatorsForType(type);
+    const arity = operatorArity(condition.operator);
+
+    const handleFieldChange = (path) => {
+        const nextResolved = resolveFieldPath(model, entityId, path);
+        const nextOperators = operatorsForType(nextResolved?.type || 'text');
+        // Keep the operator only when it is still valid for the new type,
+        // otherwise fall back to the first one the type offers.
+        const operator = nextOperators.includes(condition.operator)
+            ? condition.operator
+            : nextOperators[0];
+        onChange({
+            ...condition,
+            field: path,
+            operator,
+            value: '',
+            values: [],
+            param: condition.askEachTime
+                ? suggestParameterId(path, operator)
+                : '',
+        });
+    };
+
+    const handleOperatorChange = (operator) => {
+        onChange({
+            ...condition,
+            operator,
+            value: '',
+            values: [],
+            param: condition.askEachTime
+                ? suggestParameterId(condition.field, operator)
+                : '',
+        });
+    };
+
+    const handleAskEachTime = (askEachTime) => {
+        onChange({
+            ...condition,
+            askEachTime,
+            param: askEachTime
+                ? condition.param ||
+                  suggestParameterId(condition.field, condition.operator)
+                : '',
+            value: '',
+            values: [],
+        });
+    };
+
+    const renderValues = () => {
+        if (arity === 0) return null;
+        if (condition.askEachTime) {
+            return (
+                <span className={styles.cardMeta}>
+                    You will be asked for this value each time the report runs (
+                    {parameterTypeFor(type, condition.operator).replace(
+                        /_/g,
+                        ' '
+                    )}
+                    ).
+                </span>
+            );
+        }
+
+        if (arity === 'list') {
+            return (
+                <SemanticValueListInput
+                    type={type}
+                    field={resolved?.field}
+                    values={condition.values}
+                    onChange={(values) => onChange({ ...condition, values })}
+                />
+            );
+        }
+
+        if (arity === 2) {
+            return (
+                <span className={styles.conditionValues}>
+                    <SemanticValueInput
+                        type={type}
+                        field={resolved?.field}
+                        value={condition.values?.[0] ?? ''}
+                        ariaLabel="From"
+                        onChange={(value) =>
+                            onChange({
+                                ...condition,
+                                values: [value, condition.values?.[1] ?? ''],
+                            })
+                        }
+                    />
+                    <span>and</span>
+                    <SemanticValueInput
+                        type={type}
+                        field={resolved?.field}
+                        value={condition.values?.[1] ?? ''}
+                        ariaLabel="To"
+                        onChange={(value) =>
+                            onChange({
+                                ...condition,
+                                values: [condition.values?.[0] ?? '', value],
+                            })
+                        }
+                    />
+                </span>
+            );
+        }
+
+        return (
+            <SemanticValueInput
+                type={type}
+                field={resolved?.field}
+                value={condition.value}
+                ariaLabel="Value"
+                onChange={(value) => onChange({ ...condition, value })}
+            />
+        );
+    };
+
+    return (
+        <div className={styles.condition}>
+            <div className={styles.conditionRow}>
+                <select
+                    className={styles.select}
+                    aria-label="Field to filter on"
+                    value={condition.field}
+                    onChange={(event) => handleFieldChange(event.target.value)}
+                >
+                    <option value="">Choose what to filter on…</option>
+                    {fieldGroups.map((group) => (
+                        <optgroup key={group.label} label={group.label}>
+                            {group.options.map((option) => (
+                                <option key={option.value} value={option.value}>
+                                    {option.label}
+                                </option>
+                            ))}
+                        </optgroup>
+                    ))}
+                </select>
+
+                <select
+                    className={styles.select}
+                    aria-label="Condition"
+                    value={condition.operator}
+                    disabled={!condition.field}
+                    onChange={(event) =>
+                        handleOperatorChange(event.target.value)
+                    }
+                >
+                    <option value="">Choose a condition…</option>
+                    {operators.map((operator) => (
+                        <option key={operator} value={operator}>
+                            {operatorLabel(operator)}
+                        </option>
+                    ))}
+                </select>
+
+                {condition.operator && (
+                    <span className={styles.conditionValues}>
+                        {renderValues()}
+                    </span>
+                )}
+
+                <button
+                    type="button"
+                    className={styles.removeButton}
+                    aria-label="Remove this condition"
+                    onClick={onRemove}
+                >
+                    <X size={14} />
+                </button>
+            </div>
+
+            {condition.field && condition.operator && arity !== 0 && (
+                <label className={styles.askEachTime}>
+                    <input
+                        type="checkbox"
+                        checked={!!condition.askEachTime}
+                        onChange={(event) =>
+                            handleAskEachTime(event.target.checked)
+                        }
+                    />
+                    <span>Ask me for this each time I run it</span>
+                </label>
+            )}
+        </div>
+    );
+};
+
+SemanticFilterCondition.propTypes = {
+    model: PropTypes.object,
+    entityId: PropTypes.string,
+    condition: PropTypes.object.isRequired,
+    fieldGroups: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
+};
+
+SemanticFilterCondition.defaultProps = {
+    model: null,
+    entityId: '',
+};
+
+const SemanticFilterGroup = ({
+    model,
+    entityId,
+    group,
+    fieldGroups,
+    depth,
+    onChangeNode,
+    onRemoveNode,
+    onAddCondition,
+    onAddGroup,
+}) => (
+    <div
+        className={`${styles.filterGroup} ${
+            depth > 0 ? styles.filterGroupNested : ''
+        }`}
+    >
+        <div className={styles.filterGroupHeader}>
+            <span className={styles.matchToggle}>
+                <span>Records must match</span>
+                <button
+                    type="button"
+                    className={`${styles.toggleButton} ${
+                        group.op !== 'or' ? styles.toggleActive : ''
+                    }`}
+                    aria-pressed={group.op !== 'or'}
+                    onClick={() => onChangeNode(group._id, { op: 'and' })}
+                >
+                    all of these
+                </button>
+                <button
+                    type="button"
+                    className={`${styles.toggleButton} ${
+                        group.op === 'or' ? styles.toggleActive : ''
+                    }`}
+                    aria-pressed={group.op === 'or'}
+                    onClick={() => onChangeNode(group._id, { op: 'or' })}
+                >
+                    any of these
+                </button>
+            </span>
+
+            {depth > 0 && (
+                <button
+                    type="button"
+                    className={styles.removeButton}
+                    aria-label="Remove this group"
+                    onClick={() => onRemoveNode(group._id)}
+                >
+                    <X size={16} />
+                </button>
+            )}
+        </div>
+
+        <div className={styles.filterItems}>
+            {(group.items || []).length === 0 && (
+                <span className={styles.cardMeta}>
+                    No conditions yet — every record will be included.
+                </span>
+            )}
+
+            {(group.items || []).map((item) =>
+                item.kind === 'group' ? (
+                    <SemanticFilterGroup
+                        key={item._id}
+                        model={model}
+                        entityId={entityId}
+                        group={item}
+                        fieldGroups={fieldGroups}
+                        depth={depth + 1}
+                        onChangeNode={onChangeNode}
+                        onRemoveNode={onRemoveNode}
+                        onAddCondition={onAddCondition}
+                        onAddGroup={onAddGroup}
+                    />
+                ) : (
+                    <SemanticFilterCondition
+                        key={item._id}
+                        model={model}
+                        entityId={entityId}
+                        condition={item}
+                        fieldGroups={fieldGroups}
+                        onChange={(next) => onChangeNode(item._id, next)}
+                        onRemove={() => onRemoveNode(item._id)}
+                    />
+                )
+            )}
+        </div>
+
+        <div className={styles.filterActions}>
+            <button
+                type="button"
+                className={styles.linkButton}
+                onClick={() => onAddCondition(group._id)}
+            >
+                + Add a condition
+            </button>
+            <button
+                type="button"
+                className={styles.linkButton}
+                onClick={() => onAddGroup(group._id)}
+            >
+                + Add a nested group
+            </button>
+        </div>
+    </div>
+);
+
+SemanticFilterGroup.propTypes = {
+    model: PropTypes.object,
+    entityId: PropTypes.string,
+    group: PropTypes.object.isRequired,
+    fieldGroups: PropTypes.array.isRequired,
+    depth: PropTypes.number,
+    onChangeNode: PropTypes.func.isRequired,
+    onRemoveNode: PropTypes.func.isRequired,
+    onAddCondition: PropTypes.func.isRequired,
+    onAddGroup: PropTypes.func.isRequired,
+};
+
+SemanticFilterGroup.defaultProps = {
+    model: null,
+    entityId: '',
+    depth: 0,
+};
+
+/**
+ * Step 4 in semantic mode: build the filter tree.
+ *
+ * The AND/OR grouping the user builds here is preserved verbatim in the saved
+ * definition — nothing is flattened. Conditions marked "ask me each time"
+ * become runtime parameters, whose labels can be edited below the tree.
+ */
+const SemanticFiltersStep = ({
+    model,
+    entityId,
+    addedRelations,
+    filterTree,
+    parameters,
+    onChangeNode,
+    onRemoveNode,
+    onAddCondition,
+    onAddGroup,
+    onChangeParameter,
+}) => {
+    const fieldGroups = useMemo(
+        () => buildFilterFieldOptions(model, entityId, addedRelations),
+        [model, entityId, addedRelations]
+    );
+
+    return (
+        <div className={styles.section}>
+            <div className={styles.sectionIntro}>
+                <h3>Narrow down the records</h3>
+                <p>
+                    Add conditions to include only the records you care about.
+                    This step is optional.
+                </p>
+            </div>
+
+            <SemanticFilterGroup
+                model={model}
+                entityId={entityId}
+                group={filterTree}
+                fieldGroups={fieldGroups}
+                depth={0}
+                onChangeNode={onChangeNode}
+                onRemoveNode={onRemoveNode}
+                onAddCondition={onAddCondition}
+                onAddGroup={onAddGroup}
+            />
+
+            {(parameters || []).length > 0 && (
+                <div className={styles.section}>
+                    <div className={styles.sectionIntro}>
+                        <h3>Questions asked at run time</h3>
+                        <p>
+                            Give each question a clear name — this is what
+                            people will see when they run the report.
+                        </p>
+                    </div>
+                    <div className={styles.parameterList}>
+                        {parameters.map((parameter) => (
+                            <div
+                                key={parameter.id}
+                                className={styles.parameterRow}
+                            >
+                                <span className={styles.parameterLabel}>
+                                    Question
+                                </span>
+                                <input
+                                    type="text"
+                                    className={styles.input}
+                                    aria-label={`Label for ${parameter.id}`}
+                                    value={parameter.label}
+                                    onChange={(event) =>
+                                        onChangeParameter(parameter.id, {
+                                            label: event.target.value,
+                                        })
+                                    }
+                                />
+                                <label className={styles.askEachTime}>
+                                    <input
+                                        type="checkbox"
+                                        checked={parameter.required !== false}
+                                        onChange={(event) =>
+                                            onChangeParameter(parameter.id, {
+                                                required: event.target.checked,
+                                            })
+                                        }
+                                    />
+                                    <span>Must be answered</span>
+                                </label>
+                                <span className={styles.cardMeta}>
+                                    {String(parameter.type).replace(/_/g, ' ')}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+SemanticFiltersStep.propTypes = {
+    model: PropTypes.object,
+    entityId: PropTypes.string,
+    addedRelations: PropTypes.arrayOf(PropTypes.string),
+    filterTree: PropTypes.object.isRequired,
+    parameters: PropTypes.array,
+    onChangeNode: PropTypes.func.isRequired,
+    onRemoveNode: PropTypes.func.isRequired,
+    onAddCondition: PropTypes.func.isRequired,
+    onAddGroup: PropTypes.func.isRequired,
+    onChangeParameter: PropTypes.func.isRequired,
+};
+
+SemanticFiltersStep.defaultProps = {
+    model: null,
+    entityId: '',
+    addedRelations: [],
+    parameters: [],
+};
+
+export default SemanticFiltersStep;

package/src/components/generic/reportSemanticSteps/SemanticGroupingStep.jsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { X } from 'lucide-react';
+import { selectionHeader } from '../reportSemantics';
+import styles from '../../styles/ReportSemantic.module.scss';
+
+/**
+ * Step 5 in semantic mode: grouping and ordering.
+ *
+ * Grouping can only use fields the user already chose to show — grouping by
+ * something invisible produces a report nobody can read. Aggregate columns are
+ * excluded for the same reason: they are the summary, not the grouping key.
+ */
+const SemanticGroupingStep = ({
+    model,
+    entityId,
+    selections,
+    groupBy,
+    sort,
+    onToggleGroupBy,
+    onAddSort,
+    onChangeSort,
+    onRemoveSort,
+}) => {
+    const groupable = (selections || []).filter((selection) => !selection.agg);
+    const sortable = selections || [];
+    const usedSortFields = (sort || []).map((entry) => entry.field);
+
+    return (
+        <div className={styles.section}>
+            <div className={styles.sectionIntro}>
+                <h3>Group and order the results</h3>
+                <p>
+                    Grouping splits the report into sections. Ordering controls
+                    the order of the rows. Both are optional.
+                </p>
+            </div>
+
+            {groupable.length === 0 ? (
+                <div className={styles.empty}>
+                    Choose at least one plain column at the previous step to
+                    group by it.
+                </div>
+            ) : (
+                <div className={styles.section}>
+                    <div className={styles.sectionIntro}>
+                        <h3>Group into sections by</h3>
+                    </div>
+                    <div className={styles.selectedList}>
+                        {groupable.map((selection) => (
+                            <label
+                                key={selection.path}
+                                className={styles.selectedItem}
+                            >
+                                <input
+                                    type="checkbox"
+                                    checked={(groupBy || []).includes(
+                                        selection.path
+                                    )}
+                                    onChange={() =>
+                                        onToggleGroupBy(selection.path)
+                                    }
+                                />
+                                <span className={styles.selectedLabel}>
+                                    {selectionHeader(
+                                        model,
+                                        entityId,
+                                        selection
+                                    )}
+                                </span>
+                            </label>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            <div className={styles.section}>
+                <div className={styles.sectionIntro}>
+                    <h3>Sort rows by</h3>
+                </div>
+
+                {(sort || []).length === 0 && (
+                    <span className={styles.cardMeta}>
+                        No sorting applied — the server decides the order.
+                    </span>
+                )}
+
+                <div className={styles.parameterList}>
+                    {(sort || []).map((entry, index) => (
+                        <div
+                            key={`${entry.field}_${index}`}
+                            className={styles.parameterRow}
+                        >
+                            <select
+                                className={styles.select}
+                                aria-label="Sort field"
+                                value={entry.field}
+                                onChange={(event) =>
+                                    onChangeSort(index, {
+                                        field: event.target.value,
+                                    })
+                                }
+                            >
+                                {sortable.map((selection) => (
+                                    <option
+                                        key={`${selection.path}_${
+                                            selection.agg || 'value'
+                                        }`}
+                                        value={
+                                            selection.agg
+                                                ? selection.label
+                                                : selection.path
+                                        }
+                                    >
+                                        {selectionHeader(
+                                            model,
+                                            entityId,
+                                            selection
+                                        )}
+                                    </option>
+                                ))}
+                            </select>
+
+                            <select
+                                className={styles.select}
+                                aria-label="Sort direction"
+                                value={entry.dir}
+                                onChange={(event) =>
+                                    onChangeSort(index, {
+                                        dir: event.target.value,
+                                    })
+                                }
+                            >
+                                <option value="asc">A to Z / low to high</option>
+                                <option value="desc">
+                                    Z to A / high to low
+                                </option>
+                            </select>
+
+                            <button
+                                type="button"
+                                className={styles.removeButton}
+                                aria-label="Remove this sort"
+                                onClick={() => onRemoveSort(index)}
+                            >
+                                <X size={14} />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+
+                <div className={styles.filterActions}>
+                    <button
+                        type="button"
+                        className={styles.linkButton}
+                        disabled={sortable.length === 0}
+                        onClick={() => {
+                            const next = sortable.find(
+                                (selection) =>
+                                    !usedSortFields.includes(
+                                        selection.agg
+                                            ? selection.label
+                                            : selection.path
+                                    )
+                            );
+                            if (next) {
+                                onAddSort(
+                                    next.agg ? next.label : next.path,
+                                    'asc'
+                                );
+                            }
+                        }}
+                    >
+                        + Add a sort
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+SemanticGroupingStep.propTypes = {
+    model: PropTypes.object,
+    entityId: PropTypes.string,
+    selections: PropTypes.array,
+    groupBy: PropTypes.arrayOf(PropTypes.string),
+    sort: PropTypes.array,
+    onToggleGroupBy: PropTypes.func.isRequired,
+    onAddSort: PropTypes.func.isRequired,
+    onChangeSort: PropTypes.func.isRequired,
+    onRemoveSort: PropTypes.func.isRequired,
+};
+
+SemanticGroupingStep.defaultProps = {
+    model: null,
+    entityId: '',
+    selections: [],
+    groupBy: [],
+    sort: [],
+};
+
+export default SemanticGroupingStep;