@etsoo/materialui/lib/mjs/ShowDataComparison.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NotificationMessageType } from "@etsoo/notificationbase";
import { Utils } from "@etsoo/shared";
import { useRequiredAppContext } from "./app/ReactApp";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import TableBody from "@mui/material/TableBody";
/**
 * Check obj is instance of AuditLineChangesDto
 * @param obj Input
 * @returns Result
 */
export function IsAuditLineUpdateData(obj) {
    return (typeof obj === "object" &&
        "oldData" in obj &&
        typeof obj.oldData === "object" &&
        "newData" in obj &&
        typeof obj.newData === "object");
}
// Format value
const formatValue = (value, app) => {
    if (value == null)
        return "";
    if (value instanceof Date)
        return app.formatDate(value, "ds");
    return `${value}`;
};
/**
 * Show data comparison
 * @param data Data
 * @param modelTitle Model window title
 * @param getLabel Get label callback
 * @param equalCheck Equal check for properties
 */
export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
    // Global app
    const app = useRequiredAppContext();
    // Labels
    const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
    modelTitle ??= dataComparison;
    getLabel ??= (key) => {
        return app.get(Utils.formatInitial(key)) ?? key;
    };
    const keys = new Set([
        ...Object.keys(data.oldData),
        ...Object.keys(data.newData)
    ]);
    let rows = Array.from(keys).map((field) => ({
        field,
        oldValue: data.oldData[field],
        newValue: data.newData[field]
    }));
    if (equalCheck)
        rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
    const inputs = (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { width: "18%", children: field }), _jsx(TableCell, { width: "41%", align: "right", children: oldValue }), _jsx(TableCell, { width: "41%", align: "right", children: newValue })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getLabel(row.field) }), _jsx(TableCell, { align: "right", children: formatValue(row.oldValue, app) }), _jsx(TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
    app.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
};