@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
95 lines • 6.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectDetailsContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const edi_ui_1 = require("@skbkontur/edi-ui");
const CopyIcon16Regular_1 = require("@skbkontur/icons/CopyIcon16Regular");
const TrashCanIcon16Regular_1 = require("@skbkontur/icons/TrashCanIcon16Regular");
const react_stack_layout_1 = require("@skbkontur/react-stack-layout");
const react_ui_1 = require("@skbkontur/react-ui");
const get_1 = tslib_1.__importDefault(require("lodash/get"));
const react_1 = require("react");
const react_router_1 = require("react-router");
const ConfirmDeleteObjectModal_1 = require("../Components/ConfirmDeleteObjectModal/ConfirmDeleteObjectModal");
const ErrorHandlingContainer_1 = require("../Components/ErrorHandling/ErrorHandlingContainer");
const CommonLayout_1 = require("../Components/Layouts/CommonLayout");
const ObjectNotFoundPage_1 = require("../Components/ObjectNotFoundPage/ObjectNotFoundPage");
const ObjectKeys_1 = require("../Components/ObjectViewer/ObjectKeys");
const ObjectViewer_1 = require("../Components/ObjectViewer/ObjectViewer");
const ObjectFieldFilterOperator_1 = require("../Domain/Api/DataTypes/ObjectFieldFilterOperator");
const RouteUtils_1 = require("../Domain/Utils/RouteUtils");
const ObjectDetailsContainer = ({ isSuperUser, dbViewerApi, customRenderer, useErrorHandlingContainer, }) => {
var _a;
const { search, pathname } = (0, react_router_1.useLocation)();
const navigate = (0, react_router_1.useNavigate)();
const { objectId = "" } = (0, react_router_1.useParams)();
const [conditions, setConditions] = (0, react_1.useState)([]);
const [objectInfo, setObjectInfo] = (0, react_1.useState)({});
const [objectMeta, setObjectMeta] = (0, react_1.useState)(null);
const [loading, setLoading] = (0, react_1.useState)(false);
const [showConfirmModal, setShowConfirmModal] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
loadData();
}, [objectId, search]);
const loadData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
setLoading(true);
try {
const conditions = getConditions();
const { object, meta } = yield dbViewerApi.readObject(objectId, { conditions: conditions });
setConditions(conditions);
setObjectInfo(object);
setObjectMeta(meta);
}
finally {
setLoading(false);
}
});
const getConditions = () => {
const query = new URLSearchParams(search);
return [...query.entries()].map(x => ({
path: x[0],
value: x[1],
operator: ObjectFieldFilterOperator_1.ObjectFieldFilterOperator.Equals,
}));
};
const handleChange = (value, path) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (!objectMeta || !objectInfo) {
return;
}
const oldValue = (0, get_1.default)(objectInfo, path);
if ((!oldValue && !value) || (oldValue && String(oldValue) === value)) {
return;
}
yield dbViewerApi.updateObject(objectMeta.identifier, {
conditions: conditions,
path: path,
value: value,
});
yield loadData();
});
const handleDelete = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (objectMeta) {
yield dbViewerApi.deleteObject(objectMeta.identifier, { conditions: conditions });
navigate(RouteUtils_1.RouteUtils.backUrl(pathname));
return;
}
throw new Error("Пытаемся удалить объект с типом массив");
});
const handleCopyObject = () => {
edi_ui_1.CopyToClipboardToast.copyText(JSON.stringify(objectInfo, null, 4));
};
const handleTryDeleteObject = () => setShowConfirmModal(true);
const handleCancelDelete = () => setShowConfirmModal(false);
if (!objectInfo) {
return (0, jsx_runtime_1.jsx)(ObjectNotFoundPage_1.ObjectNotFoundPage, {});
}
const { allowEdit, allowDelete } = (objectMeta === null || objectMeta === void 0 ? void 0 : objectMeta.schemaDescription) || { allowEdit: false, allowDelete: false };
return ((0, jsx_runtime_1.jsxs)(CommonLayout_1.CommonLayout, { withArrow: true, children: [useErrorHandlingContainer && (0, jsx_runtime_1.jsx)(ErrorHandlingContainer_1.ErrorHandlingContainer, {}), (0, jsx_runtime_1.jsx)(CommonLayout_1.CommonLayout.GoBack, { to: RouteUtils_1.RouteUtils.backUrl(pathname) }), (0, jsx_runtime_1.jsxs)(CommonLayout_1.CommonLayout.ContentLoader, { active: loading, children: [(0, jsx_runtime_1.jsx)(CommonLayout_1.CommonLayout.Header, { borderBottom: true, title: objectId, tools: (0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { block: true, baseline: true, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { use: "link", icon: (0, jsx_runtime_1.jsx)(CopyIcon16Regular_1.CopyIcon16Regular, {}), onClick: handleCopyObject, "data-tid": "Copy", children: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C" }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: allowDelete && isSuperUser && ((0, jsx_runtime_1.jsx)(react_ui_1.Button, { use: "link", icon: (0, jsx_runtime_1.jsx)(TrashCanIcon16Regular_1.TrashCanIcon16Regular, {}), onClick: handleTryDeleteObject, "data-tid": "Delete", children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) })] }), children: (0, jsx_runtime_1.jsx)(ObjectKeys_1.ObjectKeys, { keys: (((_a = objectMeta === null || objectMeta === void 0 ? void 0 : objectMeta.typeMetaInformation) === null || _a === void 0 ? void 0 : _a.properties) || [])
.filter(x => x.isIdentity)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
.map(x => ({ name: x.name, value: String(objectInfo[x.name]) })) }) }), (0, jsx_runtime_1.jsx)(CommonLayout_1.CommonLayout.Content, { children: (0, jsx_runtime_1.jsx)(react_stack_layout_1.ColumnStack, { gap: 4, block: true, children: (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { style: { maxWidth: "100%" }, children: objectMeta && ((0, jsx_runtime_1.jsx)(ObjectViewer_1.ObjectViewer, { objectInfo: objectInfo, objectMeta: objectMeta, allowEdit: allowEdit && isSuperUser, customRenderer: customRenderer, onChange: handleChange })) }) }) }), showConfirmModal && allowDelete && isSuperUser && ((0, jsx_runtime_1.jsx)(ConfirmDeleteObjectModal_1.ConfirmDeleteObjectModal, { onDelete: handleDelete, onCancel: handleCancelDelete }))] })] }));
};
exports.ObjectDetailsContainer = ObjectDetailsContainer;
//# sourceMappingURL=ObjectDetailsContainer.js.map