tnsu-approval-route/frontend/lib-commonjs/webparts/approvalAdmin/components/screens/RoutesScreen.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RoutesScreen = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var models_1 = require("../../models");
var ui_1 = require("../ui");
var EMPTY_FORM = {
    requestTypeId: '',
    routeType: models_1.RouteType.Sequential,
    companyId: '',
    departmentId: '',
    byProject: false,
    requiresControl: false
};
var ROUTE_TYPE_OPTIONS = Object.values(models_1.RouteType)
    .filter(function (v) { return v !== models_1.RouteType.None; })
    .map(function (v) { return ({ value: v, label: models_1.routeTypeLabels[v] }); });
var RoutesScreen = function (_a) {
    var api = _a.api, onOpenSteps = _a.onOpenSteps;
    var _b = React.useState([]), requestTypes = _b[0], setRequestTypes = _b[1];
    var _c = React.useState([]), items = _c[0], setItems = _c[1];
    var _d = React.useState(''), filterRequestTypeId = _d[0], setFilterRequestTypeId = _d[1];
    var _e = React.useState(true), loading = _e[0], setLoading = _e[1];
    var _f = React.useState(), loadError = _f[0], setLoadError = _f[1];
    var _g = React.useState(), editing = _g[0], setEditing = _g[1];
    var _h = React.useState(false), showForm = _h[0], setShowForm = _h[1];
    var _j = React.useState(EMPTY_FORM), form = _j[0], setForm = _j[1];
    var _k = React.useState(), formError = _k[0], setFormError = _k[1];
    var _l = React.useState(false), saving = _l[0], setSaving = _l[1];
    var _m = React.useState(), deleting = _m[0], setDeleting = _m[1];
    var _o = React.useState(), deleteError = _o[0], setDeleteError = _o[1];
    var _p = React.useState(false), deleteBusy = _p[0], setDeleteBusy = _p[1];
    React.useEffect(function () {
        api.requestTypes.list().then(setRequestTypes).catch(function () { });
    }, [api]);
    var load = React.useCallback(function () {
        setLoading(true);
        setLoadError(undefined);
        var requestTypeId = filterRequestTypeId ? Number(filterRequestTypeId) : undefined;
        api.templateRoutes
            .list(requestTypeId)
            .then(setItems)
            .catch(function (e) { return setLoadError(e.message); })
            .finally(function () { return setLoading(false); });
    }, [api, filterRequestTypeId]);
    React.useEffect(function () { load(); }, [load]);
    var requestTypeName = function (id) { var _a, _b; return (_b = (_a = requestTypes.find(function (rt) { return rt.id === id; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "#".concat(id); };
    var openCreate = function () {
        setEditing(undefined);
        setForm(tslib_1.__assign(tslib_1.__assign({}, EMPTY_FORM), { requestTypeId: filterRequestTypeId }));
        setFormError(undefined);
        setShowForm(true);
    };
    var openEdit = function (item) {
        var _a;
        setEditing(item);
        setForm({
            requestTypeId: String(item.requestTypeId),
            routeType: item.routeType,
            companyId: item.companyId,
            departmentId: (_a = item.departmentId) !== null && _a !== void 0 ? _a : '',
            byProject: item.byProject,
            requiresControl: item.requiresControl
        });
        setFormError(undefined);
        setShowForm(true);
    };
    var submit = function () {
        if (!editing && !form.requestTypeId) {
            setFormError('Выберите тип заявки.');
            return;
        }
        if (!form.companyId.trim()) {
            setFormError('Компания обязательна (Guid из справочника api.tnsu.kz).');
            return;
        }
        setSaving(true);
        setFormError(undefined);
        var departmentId = form.departmentId.trim() ? form.departmentId.trim() : null;
        var request = editing
            ? api.templateRoutes.update(editing.id, {
                routeType: form.routeType,
                companyId: form.companyId.trim(),
                departmentId: departmentId,
                byProject: form.byProject,
                requiresControl: form.requiresControl
            })
            : api.templateRoutes.create({
                routeType: form.routeType,
                requestTypeId: Number(form.requestTypeId),
                companyId: form.companyId.trim(),
                departmentId: departmentId,
                byProject: form.byProject,
                requiresControl: form.requiresControl
            });
        request
            .then(function () {
            setShowForm(false);
            load();
        })
            .catch(function (e) { return setFormError(e.message); })
            .finally(function () { return setSaving(false); });
    };
    var confirmDelete = function () {
        if (!deleting)
            return;
        setDeleteBusy(true);
        setDeleteError(undefined);
        api.templateRoutes
            .remove(deleting.id)
            .then(function () {
            setDeleting(undefined);
            load();
        })
            .catch(function (e) { return setDeleteError(e.message); })
            .finally(function () { return setDeleteBusy(false); });
    };
    return (React.createElement("div", null,
        React.createElement(ui_1.Breadcrumbs, { items: [{ label: 'Главная' }, { label: 'Маршруты согласования' }] }),
        React.createElement(ui_1.PageHeader, { icon: "route", subtitle: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430 \u0441\u043E\u0433\u043B\u0430\u0441\u043E\u0432\u0430\u043D\u0438\u0439", title: "\u041C\u0430\u0440\u0448\u0440\u0443\u0442\u044B \u0441\u043E\u0433\u043B\u0430\u0441\u043E\u0432\u0430\u043D\u0438\u044F", actions: React.createElement(ui_1.Button, { variant: "accent", icon: "plus", onClick: openCreate }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043C\u0430\u0440\u0448\u0440\u0443\u0442") }),
        React.createElement("div", { style: { marginBottom: 18, maxWidth: 320 } },
            React.createElement(ui_1.Field, { label: "\u0424\u0438\u043B\u044C\u0442\u0440 \u043F\u043E \u0442\u0438\u043F\u0443 \u0437\u0430\u044F\u0432\u043A\u0438" },
                React.createElement(ui_1.Select, { options: requestTypes.map(function (rt) { return ({ value: String(rt.id), label: rt.name }); }), placeholder: "\u0412\u0441\u0435 \u0442\u0438\u043F\u044B \u0437\u0430\u044F\u0432\u043E\u043A", value: filterRequestTypeId, onChange: function (e) { return setFilterRequestTypeId(e.target.value); } }))),
        loadError && React.createElement(ui_1.Alert, { kind: "err" }, loadError),
        deleteError && React.createElement(ui_1.Alert, { kind: "err" }, deleteError),
        React.createElement(ui_1.DataTable, { columns: [
                {
                    key: 'requestType',
                    header: 'Тип заявки',
                    render: function (r) { return React.createElement(ui_1.PrimaryCell, null, requestTypeName(r.requestTypeId)); }
                },
                {
                    key: 'routeType',
                    header: 'Тип маршрута',
                    render: function (r) { return React.createElement(ui_1.Badge, { variant: r.routeType === models_1.RouteType.Parallel ? 'blue' : 'gold' }, models_1.routeTypeLabels[r.routeType]); }
                },
                { key: 'company', header: 'Компания', render: function (r) { return React.createElement("code", null, shortGuid(r.companyId)); } },
                { key: 'department', header: 'Отдел', render: function (r) { return (r.departmentId ? React.createElement("code", null, shortGuid(r.departmentId)) : '—'); } },
                {
                    key: 'byProject',
                    header: 'По проекту',
                    align: 'center',
                    render: function (r) { return (r.byProject ? React.createElement(ui_1.Badge, { variant: "ok" }, "\u0414\u0430") : React.createElement(ui_1.Badge, { variant: "neutral" }, "\u041D\u0435\u0442")); }
                },
                {
                    key: 'control',
                    header: 'Контроль',
                    align: 'center',
                    render: function (r) { return (r.requiresControl ? React.createElement(ui_1.Badge, { variant: "gold" }, "\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F") : React.createElement(ui_1.Badge, { variant: "neutral" }, "\u041D\u0435\u0442")); }
                },
                {
                    key: 'actions',
                    header: '',
                    width: '160px',
                    align: 'right',
                    render: function (r) { return (React.createElement(ui_1.ActionsCell, null,
                        React.createElement(ui_1.Button, { size: "sm", variant: "secondary", icon: "clipboard", onClick: function () { return onOpenSteps(r); } }, "\u0428\u0430\u0433\u0438"),
                        React.createElement(ui_1.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
                        React.createElement(ui_1.IconButton, { icon: "trash", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", danger: true, onClick: function () { setDeleteError(undefined); setDeleting(r); } }))); }
                }
            ], rows: items, keyOf: function (r) { return r.id; }, emptyMessage: loading ? 'Загрузка...' : 'Маршрутов пока нет.' }),
        showForm && (React.createElement(ui_1.Modal, { title: editing ? "\u041C\u0430\u0440\u0448\u0440\u0443\u0442 #".concat(editing.id) : 'Новый маршрут', onClose: function () { return setShowForm(false); }, footer: React.createElement(React.Fragment, null,
                React.createElement(ui_1.Button, { variant: "secondary", onClick: function () { return setShowForm(false); }, disabled: saving }, "\u041E\u0442\u043C\u0435\u043D\u0430"),
                React.createElement(ui_1.Button, { variant: "accent", icon: "check", onClick: submit, disabled: saving }, saving ? 'Сохранение...' : 'Сохранить')) },
            formError && React.createElement(ui_1.Alert, { kind: "err" }, formError),
            React.createElement(ui_1.FormGrid, null,
                React.createElement(ui_1.Field, { label: "\u0422\u0438\u043F \u0437\u0430\u044F\u0432\u043A\u0438", required: true, full: true },
                    React.createElement(ui_1.Select, { options: requestTypes.map(function (rt) { return ({ value: String(rt.id), label: rt.name }); }), placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043F \u0437\u0430\u044F\u0432\u043A\u0438", value: form.requestTypeId, disabled: !!editing, onChange: function (e) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { requestTypeId: e.target.value })); } })),
                React.createElement(ui_1.Field, { label: "\u0422\u0438\u043F \u043C\u0430\u0440\u0448\u0440\u0443\u0442\u0430", required: true, full: true },
                    React.createElement(ui_1.Select, { options: ROUTE_TYPE_OPTIONS, value: form.routeType, onChange: function (e) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { routeType: e.target.value })); } })),
                React.createElement(ui_1.Field, { label: "\u041A\u043E\u043C\u043F\u0430\u043D\u0438\u044F (Guid)", required: true, full: true, hint: "\u0418\u0437 \u0441\u043F\u0440\u0430\u0432\u043E\u0447\u043D\u0438\u043A\u0430 api.tnsu.kz." },
                    React.createElement(ui_1.TextInput, { value: form.companyId, onChange: function (e) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { companyId: e.target.value })); }, placeholder: "00000000-0000-0000-0000-000000000000" })),
                React.createElement(ui_1.Field, { label: "\u041E\u0442\u0434\u0435\u043B (Guid)", full: true, hint: "\u041D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E \u2014 \u043C\u0430\u0440\u0448\u0440\u0443\u0442 \u00AB\u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E\u00BB \u0434\u043B\u044F \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438." },
                    React.createElement(ui_1.TextInput, { value: form.departmentId, onChange: function (e) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { departmentId: e.target.value })); }, placeholder: "\u041E\u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u043F\u0443\u0441\u0442\u044B\u043C \u0434\u043B\u044F \u043C\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E" })),
                React.createElement(ui_1.Field, { label: "\u041F\u043E \u043F\u0440\u043E\u0435\u043A\u0442\u0443" },
                    React.createElement(ui_1.Checkbox, { label: "\u041C\u0430\u0440\u0448\u0440\u0443\u0442 \u0443\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u0442 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u044B\u0439 \u043F\u0440\u043E\u0435\u043A\u0442", checked: form.byProject, onChange: function (v) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { byProject: v })); } })),
                React.createElement(ui_1.Field, { label: "\u041A\u043E\u043D\u0442\u0440\u043E\u043B\u044C" },
                    React.createElement(ui_1.Checkbox, { label: "\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044C \u0438\u0441\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u044F", checked: form.requiresControl, onChange: function (v) { return setForm(tslib_1.__assign(tslib_1.__assign({}, form), { requiresControl: v })); } }))))),
        deleting && (React.createElement(ui_1.ConfirmDialog, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u043C\u0430\u0440\u0448\u0440\u0443\u0442?", text: "\u041C\u0430\u0440\u0448\u0440\u0443\u0442 #".concat(deleting.id, " \u0438 \u0432\u0441\u0435 \u0435\u0433\u043E \u0448\u0430\u0433\u0438 \u0431\u0443\u0434\u0443\u0442 \u0443\u0434\u0430\u043B\u0435\u043D\u044B \u0431\u0435\u0437\u0432\u043E\u0437\u0432\u0440\u0430\u0442\u043D\u043E."), confirmLabel: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", busy: deleteBusy, onCancel: function () { return setDeleting(undefined); }, onConfirm: confirmDelete }))));
};
exports.RoutesScreen = RoutesScreen;
function shortGuid(guid) {
    return guid.length > 8 ? "".concat(guid.slice(0, 8), "\u2026") : guid;
}
//# sourceMappingURL=RoutesScreen.js.map