@hrbolek/uoisfrontend-template 0.6.0

package/src/Base/FormControls/Filter.jsx

@@ -0,0 +1,834 @@
+import { useCallback } from "react";
+import { useMemo } from "react";
+import { useState } from "react";
+import { Row } from "../Components/Row";
+import { Col } from "../Components/Col";
+import { SimpleCardCapsule } from "../Components/CardCapsule";
+import { Input } from "./Input";
+import { createContext } from "react";
+import { useContext } from "react";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router";
+
+const FilterDesignerContext = createContext(null);
+
+export const useFilterDesigner = () => useContext(FilterDesignerContext);
+
+function isPlainJoinObject(expr, join) {
+    if (!expr || typeof expr !== "object" || Array.isArray(expr)) return false;
+    const keys = Object.keys(expr);
+    return keys.length === 1 && keys[0] === join && Array.isArray(expr[join]);
+}
+
+function combine(join, items = []) {
+    const cleaned = items.filter(Boolean).filter((x) => Object.keys(x).length > 0);
+
+    // flatten stejného joinu: _and v _and, _or v _or
+    const flattened = [];
+    for (const expr of cleaned) {
+        if (isPlainJoinObject(expr, join)) flattened.push(...expr[join]);
+        else flattened.push(expr);
+    }
+
+    if (flattened.length === 0) return {};
+    if (flattened.length === 1) return flattened[0];
+    return { [join]: flattened };
+}
+
+export const Filter = ({
+    id,                  // relation key nebo undefined pro root
+    label,
+    resetKey,
+    join: joinProp = "_and",
+    onChange = () => null,
+    children,
+}) => {
+    const parent = useFilterDesigner();
+
+    // childId -> expr[] | null
+    const [currentFilter, setCurrentFilter] = useState({});
+    const [join, setJoin] = useState(joinProp);
+
+    const handleChange = useCallback((e) => {
+        const { id: childId, value } = e.target;
+        // value: expr[] | null
+        setCurrentFilter((prev) => ({ ...prev, [childId]: value }));
+    }, []);
+
+    // místo flatten všech child arrays do jedné items[]:
+    const terms = useMemo(() => {
+        const arrays = Object.values(currentFilter).filter(Boolean); // (expr[])[]
+        return arrays
+            .map((arr) => {
+                if (!Array.isArray(arr) || arr.length === 0) return null;
+                if (arr.length === 1) return arr[0];
+                // důležité: mezi termami je OR/AND, uvnitř termy je AND
+                return { _and: arr };
+            })
+            .filter(Boolean);
+    }, [currentFilter]);
+
+    const showAndOr = terms.length > 1;
+
+    // tady vzniká "lokální" výraz pro tento Filter
+    const localExpr = useMemo(() => combine(join, terms), [join, terms]);
+
+    // a tady se případně zabalí do relation name
+    const wrappedExpr = useMemo(() => (id ? { [id]: localExpr } : localExpr), [id, localExpr]);
+
+    // 1) posílej ven pro consumer
+    useEffect(() => {
+        onChange({ where: wrappedExpr });
+    }, [wrappedExpr, onChange]);
+
+    // 2) posílej parentu jako expr[] | null (vždy pole!)
+    useEffect(() => {
+        if (!parent?.handleChange) return;
+
+        const isEmpty = !wrappedExpr || (typeof wrappedExpr === "object" && Object.keys(wrappedExpr).length === 0);
+        parent.handleChange({
+            target: {
+                id: id ?? "__root__",     // parent potřebuje nějaký klíč; pokud root bez id, použij stabilní
+                value: isEmpty ? null : [wrappedExpr],
+            },
+        });
+
+        return () => {
+            parent.handleChange({
+                target: {
+                    id: id ?? "__root__",
+                    value: null,
+                },
+            });
+        };
+    }, [parent, wrappedExpr, id]);
+
+    const handleJoinChange = useCallback((e) => {
+        setJoin(e.target.value); // "_and" | "_or"
+    }, []);
+
+    const readFilter = useCallback(() => wrappedExpr, [wrappedExpr])
+    const [resetToken, setResetToken] = useState(0);
+    const resetFilter = useCallback(() => {
+        setCurrentFilter({});
+        setJoin(joinProp);
+        setResetToken(t => t + 1); // <-- vynutí remount children
+    }, [joinProp]);
+
+    return (
+        <FilterDesignerContext.Provider value={{ handleChange, readFilter, resetFilter }}>
+
+            <SimpleCardCapsule title={label || id || "where"}>
+                {showAndOr && (
+                    <Row>
+                        <Col>
+                            <label>
+                                <input
+                                    type="radio"
+                                    name={`join-${id ?? "root"}`}
+                                    value="_and"
+                                    checked={join === "_and"}
+                                    onChange={handleJoinChange}
+                                />
+                                _and
+                            </label>
+                        </Col>
+                        <Col>
+                            <label>
+                                <input
+                                    type="radio"
+                                    name={`join-${id ?? "root"}`}
+                                    value="_or"
+                                    checked={join === "_or"}
+                                    onChange={handleJoinChange}
+                                />
+                                _or
+                            </label>
+                        </Col>
+                    </Row>
+                )}
+                <div key={resetKey ?? resetToken}>
+                    {children}
+                </div>
+            </SimpleCardCapsule>
+        </FilterDesignerContext.Provider>
+    );
+};
+
+function isEmptyWhere(where) {
+    if (!where) return true;
+    if (typeof where !== "object") return true;
+    if (Array.isArray(where)) return where.length === 0;
+    return Object.keys(where).length === 0;
+}
+
+function encodeWhere(where) {
+    return JSON.stringify(where);
+}
+
+export const ResetFilterButton = ({onClick,
+    paramName = "where",
+    replace = true,
+    ...props
+}) => {
+    const filterContext = useFilterDesigner();
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const handleClick = useCallback(() => {
+        if (!filterContext?.readFilter) {
+            throw Error("<FilterButton /> must be placed inside <Filter />");
+        }
+
+        const next = new URLSearchParams(searchParams);
+        next.delete(paramName);
+
+        if (onClick) onClick({ where: {} });
+        if (filterContext.resetFilter) filterContext.resetFilter();
+        setSearchParams(next, { replace });
+    }, [filterContext, onClick, searchParams, setSearchParams, paramName, replace]);
+
+    return <button {...props} onClick={handleClick} />;
+};
+
+export const FilterButton = ({
+    onClick,
+    paramName = "where",
+    replace = true,
+    ...props
+}) => {
+    const filterContext = useFilterDesigner();
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const handleClick = useCallback(() => {
+        if (!filterContext?.readFilter) {
+            throw Error("<FilterButton /> must be placed inside <Filter />");
+        }
+
+        const where = filterContext.readFilter(); // HOTOVÉ where
+        const extendedWhere = {where}
+        if (onClick) return onClick(extendedWhere);
+
+        const next = new URLSearchParams(searchParams);
+
+        if (isEmptyWhere(where)) {
+            next.delete(paramName);
+        } else {
+            next.set(paramName, encodeWhere(where));
+        }
+
+        setSearchParams(next, { replace });
+    }, [filterContext, onClick, searchParams, setSearchParams, paramName, replace]);
+
+    return <button {...props} onClick={handleClick} />;
+};
+
+export const StringFilter = ({
+    id,
+    label,
+    initialValue = "",
+    initialOp = "_ilike",
+}) => {
+    const filterContext = useFilterDesigner();
+    if (!filterContext) throw Error("<StringFilter /> must be placed inside <Filter />");
+    //TODO when filter loads or resets this must accept the values also
+    const [op, setOp] = useState(initialOp);
+
+    // single
+    const [text, setText] = useState(initialValue);
+
+    // between
+    const [from, setFrom] = useState("");
+    const [to, setTo] = useState("");
+
+    const emitArrayOrNull = useCallback(
+        (arrOrNull) => {
+            filterContext.handleChange({ target: { id, value: arrOrNull } });
+        },
+        [filterContext, id]
+    );
+
+    const buildSingle = useCallback(
+        (nextOp, nextText) => {
+            if (!nextText) return null;
+
+            let v = nextText;
+            if (nextOp === "_ilike") v = nextText.includes("%") ? nextText : `%${nextText}%`;
+
+            return [
+                {
+                    [id]: {
+                        [nextOp]: v,
+                    },
+                },
+            ];
+        },
+        [id]
+    );
+
+    const buildBetween = useCallback(
+        (nextFrom, nextTo) => {
+            const out = [];
+            if (nextFrom) {
+                out.push({
+                    [id]: {
+                        _gt: nextFrom, // nebo _gte pokud chceš
+                    },
+                });
+            }
+            if (nextTo) {
+                out.push({
+                    [id]: {
+                        _lt: nextTo, // nebo _lte pokud chceš
+                    },
+                });
+            }
+            return out.length ? out : null;
+        },
+        [id]
+    );
+
+    const emit = useCallback(
+        ({ nextOp = op, nextText = text, nextFrom = from, nextTo = to }) => {
+            if (nextOp === "_between") {
+                emitArrayOrNull(buildBetween(nextFrom, nextTo));
+            } else {
+                emitArrayOrNull(buildSingle(nextOp, nextText));
+            }
+        },
+        [op, text, from, to, emitArrayOrNull, buildSingle, buildBetween]
+    );
+
+    const handleChangeOp = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === op) return;
+            setOp(next);
+
+            // při přepnutí režimu přepočti emit
+            if (next === "_between") {
+                // můžeš si rozhodnout, jestli chceš single text přenést do from apod.; teď nic
+                emit({ nextOp: next });
+            } else {
+                emit({ nextOp: next });
+            }
+        },
+        [op, emit]
+    );
+
+    const handleChangeText = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === text) return;
+            setText(next);
+            if (op !== "_between") emit({ nextText: next });
+        },
+        [op, text, emit]
+    );
+
+    const handleChangeFrom = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === from) return;
+            setFrom(next);
+            if (op === "_between") emit({ nextFrom: next });
+        },
+        [op, from, emit]
+    );
+
+    const handleChangeTo = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === to) return;
+            setTo(next);
+            if (op === "_between") emit({ nextTo: next });
+        },
+        [op, to, emit]
+    );
+
+    const showBetween = op === "_between";
+
+    return (
+        <SimpleCardCapsule title={label || id}>
+            <Row>
+                <Col>
+                    <select className="form-control" value={op} onChange={handleChangeOp}>
+                        <option value="Obsahuje">_ilike</option>
+                        <option value="Začíná na">_startswith</option>
+                        <option value="Končí na">_endswith</option>
+                        <option value="Je rovno">_eq</option>
+                        <option value="Je větší než">_gt</option>
+                        <option value="Je menší než">_lt</option>
+                        <option value="Mezi">_between</option>
+                    </select>
+                </Col>
+
+                {!showBetween ? (
+                    <Col>
+                        <Input className="form-control" value={text} onChange={handleChangeText} />
+                    </Col>
+                ) : (
+                    <>
+                        <Col>
+                            <Input
+                                className="form-control"
+                                value={from}
+                                onChange={handleChangeFrom}
+                                placeholder="from…"
+                            />
+                        </Col>
+                        <Col>
+                            {(op === "_between") && <Input
+                                className="form-control"
+                                value={to}
+                                onChange={handleChangeTo}
+                                placeholder="to…"
+                            />
+                            }
+                        </Col>
+                    </>
+                )}
+            </Row>
+        </SimpleCardCapsule>
+    );
+};
+
+function toUtcIsoFromDatetimeLocal(value) {
+    // value: "YYYY-MM-DDTHH:mm" (nebo s vteřinami)
+    const d = new Date(value); // bere jako lokální čas
+    if (Number.isNaN(d.getTime())) return null;
+    return d.toISOString();
+}
+
+export const DateTimeFilter = ({
+    id,
+    label,
+    initialOp = "_gte",
+    initialValue = "",       // "2025-12-23T10:30"
+    emitUtcIso = true,       // true => ISO se Z
+}) => {
+    const filterContext = useFilterDesigner();
+    if (!filterContext) throw Error("<DateTimeFilter /> must be placed inside <Filter />");
+
+    const [op, setOp] = useState(initialOp);
+
+    // single
+    const [text, setText] = useState(initialValue);
+
+    // between
+    const [from, setFrom] = useState("");
+    const [to, setTo] = useState("");
+
+    const normalize = useCallback(
+        (raw) => {
+            if (!raw) return null;
+            return emitUtcIso ? toUtcIsoFromDatetimeLocal(raw) : raw;
+        },
+        [emitUtcIso]
+    );
+
+    const emitArrayOrNull = useCallback(
+        (arrOrNull) => {
+            filterContext.handleChange({ target: { id, value: arrOrNull } });
+        },
+        [filterContext, id]
+    );
+
+    const buildSingle = useCallback(
+        (nextOp, nextText) => {
+            const v = normalize(nextText);
+            if (!v) return null;
+
+            return [
+                {
+                    [id]: {
+                        [nextOp]: v,
+                    },
+                },
+            ];
+        },
+        [id, normalize]
+    );
+
+    const buildBetween = useCallback(
+        (nextFrom, nextTo) => {
+            const out = [];
+
+            const vf = normalize(nextFrom);
+            const vt = normalize(nextTo);
+
+            // stejné chování jako u StringFilter: když je vyplněna jen jedna strana, vrátí se 1 prvek
+            if (vf) {
+                out.push({
+                    [id]: { _gt: vf }, // nebo _gte, pokud chceš inclusive
+                });
+            }
+            if (vt) {
+                out.push({
+                    [id]: { _lt: vt }, // nebo _lte
+                });
+            }
+
+            return out.length ? out : null;
+        },
+        [id, normalize]
+    );
+
+    const emit = useCallback(
+        ({ nextOp = op, nextText = text, nextFrom = from, nextTo = to }) => {
+            if (nextOp === "_between") emitArrayOrNull(buildBetween(nextFrom, nextTo));
+            else emitArrayOrNull(buildSingle(nextOp, nextText));
+        },
+        [op, text, from, to, emitArrayOrNull, buildSingle, buildBetween]
+    );
+
+    const handleChangeOp = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === op) return;
+            setOp(next);
+            emit({ nextOp: next });
+        },
+        [op, emit]
+    );
+
+    const handleChangeText = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === text) return;
+            setText(next);
+            if (op !== "_between") emit({ nextText: next });
+        },
+        [op, text, emit]
+    );
+
+    const handleChangeFrom = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === from) return;
+            setFrom(next);
+            if (op === "_between") emit({ nextFrom: next });
+        },
+        [op, from, emit]
+    );
+
+    const handleChangeTo = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === to) return;
+            setTo(next);
+            if (op === "_between") emit({ nextTo: next });
+        },
+        [op, to, emit]
+    );
+
+    const showBetween = op === "_between";
+
+    return (
+        <SimpleCardCapsule title={label || id}>
+            <Row>
+                <Col>
+                    <select className="form-control" value={op} onChange={handleChangeOp}>
+                        <option value="_eq">_eq</option>
+                        <option value="_gt">_gt</option>
+                        <option value="_gte">_gte</option>
+                        <option value="_lt">_lt</option>
+                        <option value="_lte">_lte</option>
+                        <option value="_between">_between</option>
+                    </select>
+                </Col>
+
+                {!showBetween ? (
+                    <Col>
+                        <Input
+                            className="form-control"
+                            type="datetime-local"
+                            value={text}
+                            onChange={handleChangeText}
+                        />
+                    </Col>
+                ) : (
+                    <>
+                        <Col>
+                            <Input
+                                className="form-control"
+                                type="datetime-local"
+                                value={from}
+                                onChange={handleChangeFrom}
+                                placeholder="from…"
+                            />
+                        </Col>
+                        <Col>
+                            <Input
+                                className="form-control"
+                                type="datetime-local"
+                                value={to}
+                                onChange={handleChangeTo}
+                                placeholder="to…"
+                            />
+                        </Col>
+                    </>
+                )}
+            </Row>
+        </SimpleCardCapsule>
+    );
+};
+
+function parseFloatOrNull(raw) {
+    if (raw == null) return null;
+    const s = String(raw).trim();
+    if (!s) return null;
+
+    // podporuj i desetinnou čárku
+    const normalized = s.replace(",", ".");
+    const n = Number(normalized);
+    return Number.isFinite(n) ? n : null;
+}
+
+export const FloatFilter = ({
+    id,
+    label,
+    initialOp = "_gte",
+    initialValue = "",
+}) => {
+    const filterContext = useFilterDesigner();
+    if (!filterContext) throw Error("<FloatFilter /> must be placed inside <Filter />");
+
+    const [op, setOp] = useState(initialOp);
+
+    // single
+    const [text, setText] = useState(initialValue);
+
+    // between
+    const [from, setFrom] = useState("");
+    const [to, setTo] = useState("");
+
+    const emitArrayOrNull = useCallback(
+        (arrOrNull) => {
+            filterContext.handleChange({ target: { id, value: arrOrNull } });
+        },
+        [filterContext, id]
+    );
+
+    const buildSingle = useCallback(
+        (nextOp, nextText) => {
+            const v = parseFloatOrNull(nextText);
+            if (v == null) return null;
+
+            return [
+                {
+                    [id]: {
+                        [nextOp]: v,
+                    },
+                },
+            ];
+        },
+        [id]
+    );
+
+    const buildBetween = useCallback(
+        (nextFrom, nextTo) => {
+            const out = [];
+            const vf = parseFloatOrNull(nextFrom);
+            const vt = parseFloatOrNull(nextTo);
+
+            if (vf != null) {
+                out.push({
+                    [id]: { _gt: vf }, // nebo _gte
+                });
+            }
+            if (vt != null) {
+                out.push({
+                    [id]: { _lt: vt }, // nebo _lte
+                });
+            }
+            return out.length ? out : null;
+        },
+        [id]
+    );
+
+    const emit = useCallback(
+        ({ nextOp = op, nextText = text, nextFrom = from, nextTo = to }) => {
+            if (nextOp === "_between") emitArrayOrNull(buildBetween(nextFrom, nextTo));
+            else emitArrayOrNull(buildSingle(nextOp, nextText));
+        },
+        [op, text, from, to, emitArrayOrNull, buildSingle, buildBetween]
+    );
+
+    const handleChangeOp = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === op) return;
+            setOp(next);
+            emit({ nextOp: next });
+        },
+        [op, emit]
+    );
+
+    const handleChangeText = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === text) return;
+            setText(next);
+            if (op !== "_between") emit({ nextText: next });
+        },
+        [op, text, emit]
+    );
+
+    const handleChangeFrom = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === from) return;
+            setFrom(next);
+            if (op === "_between") emit({ nextFrom: next });
+        },
+        [op, from, emit]
+    );
+
+    const handleChangeTo = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === to) return;
+            setTo(next);
+            if (op === "_between") emit({ nextTo: next });
+        },
+        [op, to, emit]
+    );
+
+    const showBetween = op === "_between";
+
+    return (
+        <SimpleCardCapsule title={label || id}>
+            <Row>
+                <Col>
+                    <select className="form-control" value={op} onChange={handleChangeOp}>
+                        <option value="_eq">_eq</option>
+                        <option value="_gt">_gt</option>
+                        <option value="_gte">_gte</option>
+                        <option value="_lt">_lt</option>
+                        <option value="_lte">_lte</option>
+                        <option value="_between">_between</option>
+                    </select>
+                </Col>
+
+                {!showBetween ? (
+                    <Col>
+                        <Input
+                            className="form-control"
+                            type="number"
+                            inputMode="decimal"
+                            value={text}
+                            onChange={handleChangeText}
+                            placeholder="0.0"
+                        />
+                    </Col>
+                ) : (
+                    <>
+                        <Col>
+                            <Input
+                                className="form-control"
+                                type="number"
+                                inputMode="decimal"
+                                value={from}
+                                onChange={handleChangeFrom}
+                                placeholder="from…"
+                            />
+                        </Col>
+                        <Col>
+                            <Input
+                                className="form-control"
+                                type="number"
+                                inputMode="decimal"
+                                value={to}
+                                onChange={handleChangeTo}
+                                placeholder="to…"
+                            />
+                        </Col>
+                    </>
+                )}
+            </Row>
+        </SimpleCardCapsule>
+    );
+};
+
+const UUID_RE =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export const UUIDFilter = ({
+    id,
+    label,
+    initialValue = "",
+}) => {
+    const filterContext = useFilterDesigner();
+    if (!filterContext) throw Error("<UUIDFilter /> must be placed inside <Filter />");
+
+    const [text, setText] = useState(initialValue);
+    const trimmed = useMemo(() => (text ?? "").trim(), [text]);
+
+    const isEmpty = trimmed.length === 0;
+    const isValid = isEmpty ? true : UUID_RE.test(trimmed);
+
+    const emitArrayOrNull = useCallback(
+        (arrOrNull) => {
+            filterContext.handleChange({ target: { id, value: arrOrNull } });
+        },
+        [filterContext, id]
+    );
+
+    const emit = useCallback(
+        (nextText) => {
+            const v = (nextText ?? "").trim();
+
+            // prázdné = vypnout filtr
+            if (!v) {
+                emitArrayOrNull(null);
+                return;
+            }
+
+            // nevalidní = také vypnout filtr (a UI ukáže chybu)
+            if (!UUID_RE.test(v)) {
+                emitArrayOrNull(null);
+                return;
+            }
+
+            emitArrayOrNull([
+                {
+                    [id]: { _eq: v },
+                },
+            ]);
+        },
+        [id, emitArrayOrNull]
+    );
+
+    const handleChangeText = useCallback(
+        (e) => {
+            const next = e.target.value;
+            if (next === text) return;
+            setText(next);
+            emit(next);
+        },
+        [text, emit]
+    );
+
+    return (
+        <SimpleCardCapsule title={label || id}>
+            <Row>
+                <Col style={{ minWidth: 80 }}>
+                    <span style={{ opacity: 0.7 }}>(_eq)</span>
+                </Col>
+                <Col>
+                    <Input
+                        className={`form-control ${!isValid ? "is-invalid" : ""}`}
+                        value={text}
+                        onChange={handleChangeText}
+                        placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                    />
+                    {!isValid && (
+                        <div className="invalid-feedback" style={{ display: "block" }}>
+                            Neplatné UUID. Očekávám formát 8-4-4-4-12 hex (např. 550e8400-e29b-41d4-a716-446655440000).
+                        </div>
+                    )}
+                </Col>
+            </Row>
+        </SimpleCardCapsule>
+    );
+};