@visns-studio/visns-components 6.1.7 → 6.2.0

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

@@ -0,0 +1,337 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { ChevronDown, ChevronRight, X } from 'lucide-react';
+import {
+    aggregateOptionLabel,
+    aggregatesForField,
+    categorizeSemanticFields,
+    getEntityLabel,
+    listEntityFields,
+    resolveRelationPath,
+} from '../reportSemantics';
+import styles from '../../styles/ReportSemantic.module.scss';
+
+const TYPE_LABELS = {
+    text: 'text',
+    number: 'number',
+    money: 'amount',
+    percent: 'percentage',
+    date: 'date',
+    datetime: 'date & time',
+    boolean: 'yes/no',
+    enum: 'choice',
+};
+
+/**
+ * The sources a user can pick fields from: the main entity plus every related
+ * area they added at step 2.
+ */
+export const buildFieldSources = (model, entityId, addedRelations) => {
+    if (!model || !entityId) return [];
+
+    const sources = [
+        {
+            id: '__root__',
+            path: '',
+            label: getEntityLabel(model, entityId),
+            cardinality: 'one',
+            fields: listEntityFields(model, entityId, ''),
+        },
+    ];
+
+    (addedRelations || []).forEach((relationPath) => {
+        const resolved = resolveRelationPath(model, entityId, relationPath);
+        if (!resolved) return;
+        sources.push({
+            id: relationPath,
+            path: relationPath,
+            label: resolved.label,
+            cardinality: resolved.cardinality,
+            fields: listEntityFields(
+                model,
+                resolved.entityId,
+                relationPath
+            ),
+        });
+    });
+
+    return sources;
+};
+
+/**
+ * Step 3 in semantic mode: choose what to show.
+ *
+ * Every field carries a "Show as" picker so the same control covers plain
+ * values and aggregates (sum / count / average / min / max). Aggregates are
+ * only offered where the contract allows them.
+ */
+const SemanticFieldsStep = ({
+    model,
+    entityId,
+    addedRelations,
+    selections,
+    onToggleField,
+    onChangeAggregate,
+    onRemoveSelection,
+    onMoveSelection,
+}) => {
+    const sources = useMemo(
+        () => buildFieldSources(model, entityId, addedRelations),
+        [model, entityId, addedRelations]
+    );
+
+    const [collapsed, setCollapsed] = useState(() => new Set());
+
+    const toggleSource = (sourceId) => {
+        setCollapsed((previous) => {
+            const next = new Set(previous);
+            if (next.has(sourceId)) {
+                next.delete(sourceId);
+            } else {
+                next.add(sourceId);
+            }
+            return next;
+        });
+    };
+
+    const selectionFor = (path) =>
+        (selections || []).find((selection) => selection.path === path) || null;
+
+    if (sources.length === 0) {
+        return (
+            <div className={styles.empty}>
+                Choose what the report is about first.
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.section}>
+            <div className={styles.sectionIntro}>
+                <h3>What do you want to see?</h3>
+                <p>
+                    Tick the details to include. Use &ldquo;Show as&rdquo; to
+                    summarise a field instead of listing it.
+                </p>
+            </div>
+
+            {sources.map((source) => {
+                const isCollapsed = collapsed.has(source.id);
+                const categories = categorizeSemanticFields(source.fields);
+                const chosen = source.fields.filter((entry) =>
+                    selectionFor(entry.path)
+                ).length;
+
+                return (
+                    <div key={source.id} className={styles.sourceGroup}>
+                        <button
+                            type="button"
+                            className={styles.sourceHeader}
+                            aria-expanded={!isCollapsed}
+                            onClick={() => toggleSource(source.id)}
+                        >
+                            <span>
+                                {isCollapsed ? (
+                                    <ChevronRight size={16} />
+                                ) : (
+                                    <ChevronDown size={16} />
+                                )}{' '}
+                                {source.label}
+                                {source.cardinality === 'many' && (
+                                    <span className={styles.badge}>
+                                        {' '}
+                                        many per record
+                                    </span>
+                                )}
+                            </span>
+                            <span className={styles.cardMeta}>
+                                {chosen} of {source.fields.length} selected
+                            </span>
+                        </button>
+
+                        {!isCollapsed &&
+                            categories.map((category) => (
+                                <div
+                                    key={category.id}
+                                    className={styles.categoryGroup}
+                                >
+                                    <h5>{category.label}</h5>
+                                    {category.fields.map((entry) => {
+                                        const selection = selectionFor(
+                                            entry.path
+                                        );
+                                        const aggregates = aggregatesForField(
+                                            entry.field
+                                        );
+
+                                        return (
+                                            <div
+                                                key={entry.path}
+                                                className={styles.fieldRow}
+                                            >
+                                                <label
+                                                    className={
+                                                        styles.fieldCheckbox
+                                                    }
+                                                >
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={!!selection}
+                                                        onChange={() =>
+                                                            onToggleField(
+                                                                entry.path
+                                                            )
+                                                        }
+                                                    />
+                                                    <span>{entry.label}</span>
+                                                    <span
+                                                        className={
+                                                            styles.fieldTypeTag
+                                                        }
+                                                    >
+                                                        {TYPE_LABELS[
+                                                            entry.type
+                                                        ] || entry.type}
+                                                    </span>
+                                                </label>
+
+                                                {selection &&
+                                                    aggregates.length > 0 && (
+                                                        <span
+                                                            className={
+                                                                styles.aggPicker
+                                                            }
+                                                        >
+                                                            <span>
+                                                                Show as:
+                                                            </span>
+                                                            <select
+                                                                className={
+                                                                    styles.select
+                                                                }
+                                                                aria-label={`Show ${entry.label} as`}
+                                                                value={
+                                                                    selection.agg ||
+                                                                    ''
+                                                                }
+                                                                onChange={(
+                                                                    event
+                                                                ) =>
+                                                                    onChangeAggregate(
+                                                                        entry.path,
+                                                                        event
+                                                                            .target
+                                                                            .value
+                                                                    )
+                                                                }
+                                                            >
+                                                                <option value="">
+                                                                    Value
+                                                                </option>
+                                                                {aggregates.map(
+                                                                    (agg) => (
+                                                                        <option
+                                                                            key={
+                                                                                agg
+                                                                            }
+                                                                            value={
+                                                                                agg
+                                                                            }
+                                                                        >
+                                                                            {aggregateOptionLabel(
+                                                                                agg,
+                                                                                entry.field
+                                                                            )}
+                                                                        </option>
+                                                                    )
+                                                                )}
+                                                            </select>
+                                                        </span>
+                                                    )}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                    </div>
+                );
+            })}
+
+            {(selections || []).length > 0 && (
+                <div className={styles.section}>
+                    <div className={styles.sectionIntro}>
+                        <h3>Columns in your report</h3>
+                        <p>
+                            These appear left to right in the order shown below.
+                        </p>
+                    </div>
+                    <div className={styles.selectedList}>
+                        {selections.map((selection, index) => (
+                            <div
+                                key={`${selection.path}_${selection.agg || 'value'}`}
+                                className={styles.selectedItem}
+                            >
+                                <span className={styles.selectedLabel}>
+                                    {selection.label || selection.path}
+                                </span>
+                                <button
+                                    type="button"
+                                    className={styles.linkButton}
+                                    disabled={index === 0}
+                                    onClick={() =>
+                                        onMoveSelection(index, index - 1)
+                                    }
+                                >
+                                    Up
+                                </button>
+                                <button
+                                    type="button"
+                                    className={styles.linkButton}
+                                    disabled={index === selections.length - 1}
+                                    onClick={() =>
+                                        onMoveSelection(index, index + 1)
+                                    }
+                                >
+                                    Down
+                                </button>
+                                <button
+                                    type="button"
+                                    className={styles.removeButton}
+                                    aria-label={`Remove ${selection.label}`}
+                                    onClick={() =>
+                                        onRemoveSelection(
+                                            selection.path,
+                                            selection.agg
+                                        )
+                                    }
+                                >
+                                    <X size={14} />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+SemanticFieldsStep.propTypes = {
+    model: PropTypes.object,
+    entityId: PropTypes.string,
+    addedRelations: PropTypes.arrayOf(PropTypes.string),
+    selections: PropTypes.array,
+    onToggleField: PropTypes.func.isRequired,
+    onChangeAggregate: PropTypes.func.isRequired,
+    onRemoveSelection: PropTypes.func.isRequired,
+    onMoveSelection: PropTypes.func.isRequired,
+};
+
+SemanticFieldsStep.defaultProps = {
+    model: null,
+    entityId: '',
+    addedRelations: [],
+    selections: [],
+};
+
+export default SemanticFieldsStep;