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

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Utils } from "@etsoo/shared";
import React from "react";
import { ListMoreDisplay } from "./ListMoreDisplay";
import { ShowDataComparison } from "./ShowDataComparison";
import { useAppContext } from "./app/ReactApp";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
/**
 * Audit display
 * @param props Props
 * @returns Component
 */
export function AuditDisplay(props) {
    // Theme
    const theme = useTheme();
    // Global app
    const app = useAppContext();
    // Get label
    const getLabel = (key) => {
        return app?.get(Utils.formatInitial(key)) ?? key;
    };
    // Format date
    const formatDate = (date) => {
        return app?.formatDate(date, "ds") ?? date.toUTCString();
    };
    // Title
    var title = getLabel("dataComparison");
    // Destruct
    const { getItemStyle = (index, theme) => ({
        padding: [theme.spacing(1.5), theme.spacing(1)].join(" "),
        background: index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
    }), getColumnLabel, equalCheck, itemRenderer = (data) => {
        const { newData, oldData, changes = { newData: newData ?? {}, oldData: oldData ?? {} } } = data;
        return (_jsxs(React.Fragment, { children: [changes != null && (_jsx(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title, getColumnLabel, equalCheck), sx: {
                        marginLeft: theme.spacing(1),
                        marginTop: theme.spacing(-0.5),
                        float: "right"
                    }, children: title })), _jsx(Typography, { children: formatDate(data.creation) +
                        ", [" +
                        getLabel(data.action) +
                        "], " +
                        data.user })] }));
    }, headerTitle = (_jsxs(React.Fragment, { children: [_jsx(Typography, { children: getLabel("audits") }), _jsx(Divider, {})] })), ...rest } = props;
    // Layout
    return (_jsx(ListMoreDisplay, { headerTitle: headerTitle, ...rest, children: (data, index) => (_jsx("div", { style: getItemStyle(index, theme), children: itemRenderer(data, index) }, data.id)) }));
}