\u041d\u0430\u0448 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0430 \u2014 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u044a\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0439 \u0441\u0430\u043c\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043f\u043e\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0430\u0439\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u044c \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438, \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u042d\u0442\u043e\u0442 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e UI’\u0430, \u0438 \u0447\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0435\u043c\u0441\u044f, \u0447\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043c\u044b \u0434\u0430\u0451\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u0447 \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u043e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u0442\u044c \u0433\u043e\u043b\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c, \u043f\u0430\u0440\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432 (\u0443\u0436\u0435 \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c, \u0438 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432 \u0442\u0430\u043c \u043e\u0442\u043d\u044e\u0434\u044c \u043d\u0435 \u043f\u0430\u0440\u0430!):
<\/a> <\/p>\n
![](\"https:\/\/habrastorage.org\/files\/d61\/99f\/b9a\/d6199fb9a9ec417e97406841057fe6f6.png\"\/)
<\/div>\n<\/div>\n<\/p>\n
![](\"https:\/\/habrastorage.org\/files\/868\/2e9\/1d0\/8682e91d0938408ca825b5a6efc72d46.png\"\/)
<\/div>\n<\/div>\n \u041a\u0430\u043a \u0436\u0435 \u043c\u044b \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 UI’\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435? \u0421\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043c\u044b \u043e\u0442\u043a\u0440\u043e\u0432\u0435\u043d\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f \u043f\u043b\u043e\u0445\u043e. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u0443\u0441\u043a\u043e\u0432 HTML’\u0430 javascript’\u043e\u043c. \u041b\u0438\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f JQuery. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u0442\u043e \u0432\u044b\u043b\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445 \u0438 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0431\u0430\u0433\u0438. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u0438 \u0441\u0430\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u043c\u0430\u043a\u0430\u0440\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0441\u0435 \u0431\u043e\u044f\u043b\u0438\u0441\u044c. \u041b\u044e\u0431\u043e\u0439 \u0442\u0438\u043a\u0435\u0442 \u043d\u0430 UI \u043d\u0430 \u043e\u0446\u0435\u043d\u043a\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u043e\u0446\u0435\u043d\u043a\u0443 L \u0438 \u0432\u044b\u043b\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0442\u043e\u043d\u043d\u0443 \u0431\u0430\u0442\u0445\u0451\u0440\u0442\u0430. \u0418 \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0431\u0430\u0433\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0442\u0430\u043a\u0438\u043c UI’\u0435\u043c. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u044d\u0442\u043e \u0442\u0430\u043a: \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043c\u0435\u043b\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430, \u0437\u0430\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u0442\u0438\u043a\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0451 \u043f\u043e\u0447\u0438\u043d\u0438\u0442\u044c, \u043e\u043d\u0430 \u0447\u0438\u043d\u0438\u043b\u0430\u0441\u044c, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043c\u0438\u043d\u0443\u0435\u043c\u043e \u0440\u0430\u0437\u0432\u0430\u043b\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e \u0447\u0443\u0434\u043e \u043d\u0435 \u0431\u044b\u043b\u043e. \u041e\u043f\u044f\u0442\u044c-\u0442\u0430\u043a\u0438, \u044f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0431\u044b\u0442\u044c \u0433\u043e\u043b\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0436\u0438\u0437\u043d\u0438.
\u041f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u041d\u0435 \u0432\u0434\u0430\u0432\u0430\u044f\u0441\u044c \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u0441\u043a\u0430\u0436\u0443 \u0442\u043e\u043b\u044c\u043a\u043e, \u0447\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0443 \u043d\u0430\u0441 \u2014 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 REST-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u044f\u0434\u0447\u0438\u043a\u0438 \u043d\u0430\u0448\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044f\u0432\u043b\u044f\u0435\u043c\u0441\u044f backend’\u043e\u043c \u0438\u0445 \u0441\u0430\u0439\u0442\u0430). \u0423 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u044d\u0442\u0430\u043f\u0430\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439, \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u0431\u044b\u043b \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b: <\/p>\n
![](\"https:\/\/habrastorage.org\/files\/7bf\/fb6\/2b0\/7bffb62b07ad46a492dcf8c0c19cbfb3.png\"\/)
<\/div>\n<\/div>\n\u0410 \u0432\u043e\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0430: <\/p>\n
<h2 class="column-header"> <span class="link-action" data-event-name="ToggleElements" data-event-param='{"selector":"#WorkFlowAllowance", "callback": "toggleWorkflowAvailability"}'> \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u044d\u0442\u0430\u043f\u0430\u0445 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 <\/span> <\/h2> @Html.HiddenFor(m => m.IsAllowedForAllWorkflow, new { Id = "IsAllowedForAllWorkflow" }) <div id="WorkFlowAllowance" class="@(Model.IsAllowedForAllWorkflow ? "none" : string.Empty) row form_horizontal"> <table class="table table_hover table_control @(Model.OperationWorkflowAllowances.Any() ? String.Empty : "none")" id="operationAllowanceTable"> <thead> <tr> <th>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/th> <th>\u042d\u0442\u0430\u043f<\/th> <\/tr> <\/thead> <tbody> @Model.OperationWorkflowAllowances.Each( @<tr> <td> @item.Item.WorkflowDisplayName <input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[@(item.Index)].WorkflowName" value="@item.Item.WorkflowName" \/> <input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[@(item.Index)].WorkflowDisplayName" value="@item.Item.WorkflowDisplayName" \/> <input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[@(item.Index)].Id" value="@item.Item.Id" \/> <\/td> <td> <button class="cell-grid__right button button_icon-only button_red removeOperationAllowance"><span class="icon icon_del"><\/span><\/button> <span class="cell-grid__wraps">@(item.Item.StageName ?? "\u041b\u044e\u0431\u043e\u0439")<\/span> <input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[@(item.Index)].StageName" value="@item.Item.StageName" \/> <input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[@(item.Index)].StageDisplayName" value="@item.Item.StageDisplayName" \/> <\/td> <\/tr>) <\/tbody> <\/table> <div class="col col_462"> <div class="form-group form-group_all"> <\/div> @if (Model.WorkFlows.Any()) { <div> <div class="form-group"> <label class="form-label"><span>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/span><\/label> @Html.DropDownList("WorkflowList", Model.WorkFlows, new Dictionary<string, object> { { "class", "form-control select2 w470" }, { "data-placeholder", "\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430" }, { "id", "workflowList" }, { "disabled", "disabled" } }) <\/div> <div class="form-group"> <div class="form-list"> <input id="isAllowedForAllStagesForCurrentWorkflow" type="checkbox" name="StageMechanicsRegistratioName" autocomplete="off"> <label for="isAllowedForAllStagesForCurrentWorkflow">\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 <span id="exceptAnonymus"><\/span><span id="workflowName"><\/span><\/label> <\/div> <\/div> <div class="form-group"> <label class="form-label"><span>\u042d\u0442\u0430\u043f<\/span><\/label> @Html.DropDownList("WorkflowStageList", new SelectListItem[0], new Dictionary<string, object> { { "class", "form-control select2 w470" }, { "data-placeholder", "\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430" }, { "id", "workflowStageList" }, { "disabled", "disabled"} }) <\/div> <div class="form-group"> <button class="button button_blue" id="addOperationAllowance">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/button> <\/div> <\/div> } else { @: \u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b } <\/div> <\/div> <\/code><\/pre>\n \u0410 \u0432\u043e\u0442 js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u044d\u0442\u0443 \u0432\u044c\u044e\u0445\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c (\u044f \u043d\u0435 \u043f\u0440\u0435\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u0446\u0435\u043b\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e, \u043a\u0430\u043a \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e): <\/p>\n
function initOperationAllowance(typeSelector) { $('#workflowList').prop('disabled', false); $('#workflowList').trigger('change'); if ($(typeSelector).val() == 'PerformAction') { $('#exceptAnonymus').html('(\u043a\u0440\u043e\u043c\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0445)'); } else { $('#exceptAnonymus').html(''); } } function toggleWorkflowAvailability() { var element = $("#IsAllowedForAllWorkflow"); $('#operationAllowanceTable tbody tr').remove(); parameters.selectedAllowances = []; return element.val().toLowerCase() == 'true' ? element.val(false) : element.val(true); } function deleteRow(row) { var index = getRowIndex(row); row.remove(); parameters.selectedAllowances.splice(index, 1); $('#operationAllowanceTable input').each(function () { var currentIndex = getFieldIndex($(this)); if (currentIndex > index) { decrementIndex($(this), currentIndex); } }); if (parameters.selectedAllowances.length == 0) { $('#operationAllowanceTable').hide(); } } function updateWorkflowSteps(operationType) { var workflow = $('#workflowList').val(); if (workflow == '') { $('#isAllowedForAllStagesForCurrentWorkflow') .prop('checked', false) .prop('disabled', 'disabled'); refreshOptionList( $('#workflowStageList'), [{ Text: '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430', Value: '', Selected: true }] ); $('#workflowStageList').trigger('change').select2('enable', false); return; } var url = parameters.stagesUrlTemplate + '?workflowName=' + workflow + '&OperationTypeName=' + operationType; $.getJSON(url, null, function (data) { $('#isAllowedForAllStagesForCurrentWorkflow') .prop('checked', false) .removeProp('disabled'); refreshOptionList($('#workflowStageList'), data); $('#workflowStageList').trigger('change').select2('enable', true); }); } function refreshOptionList(list, data) { list.find('option').remove(); $.each(data, function (index, itemData) { var option = new Option(itemData.Text, itemData.Value, null, itemData.Selected); list[0].add(option); }); } function AddRow(data) { var rowsCount = $('#operationAllowanceTable tr').length; var index = rowsCount - 1; var result = '<tr ' + (rowsCount % 2 != 0 ? 'class="bgGray">' : '>') + '<td>' + '{DisplayWorkflowName}' + '<input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[' + index + '].WorkflowName" value="{WorkflowName}"\/>' + '<input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[' + index + '].Id" value=""\/>' + '<input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[' + index + '].WorkflowDisplayName" value="{DisplayWorkflowName}"\/>' + '<\/td>' + '<td>' + '<button class="cell-grid__right button button_icon-small button_red removeOperationAllowance"><span class="icon icon_del"><\/span><\/button>' + '<span class="cell-grid__wraps">{DisplayStageName}<\/span>' + '<input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[' + index + '].StageName" value="{StageName}"\/>' + '<input type="hidden" name="OperationTypeViewModel.OperationWorkflowAllowances[' + index + '].StageDisplayName" value="{DisplayStageName}"\/>' + '<\/td>' + '<\/tr>'; for (key in data) { result = result.replace(new RegExp('{' + key + '}', 'g'), data[key]); } $('#operationAllowanceTable').show().append(result); } function IsValidForm() { var result = ValidateList($('#workflowList'), '\u0412\u044b \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438') & ValidateListWithCheckBox($('#workflowStageList'), $('#isAllowedForAllStagesForCurrentWorkflow'), '\u0412\u044b \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u044d\u0442\u0430\u043f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438'); if (!result) return false; var workflowName = $('#workflowList').val(); var stageName = ''; if (!$('#isAllowedForAllStagesForCurrentWorkflow').is(':checked')) { stageName = $('#workflowStageList').val(); } hideError($('#workflowList')); hideError($('#workflowStageList')); for (var i = 0; i < parameters.selectedAllowances.length; i++) { if (parameters.selectedAllowances[i].workflow == workflowName && parameters.selectedAllowances[i].stage == stageName) { if (stageName == '') { showError($('#workflowList'), '\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0443\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430'); } else { showError($('#workflowStageList'), '\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0443\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430'); } result = false; } else if (parameters.selectedAllowances[i].workflow == workflowName && parameters.selectedAllowances[i].stage == '') { showError($('#workflowList'), '\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0443\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430'); result = false; } } return result; } function ValidateList(field, message) { if (field.val() == "") { showError(field, message); return false; } hideError(field); return true; } function ValidateListWithCheckBox(field, checkBoxField, message) { if (!checkBoxField.prop('checked')) { return ValidateList(field, message); } hideError(field); return true; } function showError(field, message) { if (typeof (message) === 'undefined') { message = '\u041f\u043e\u043b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f'; } field.addClass('input-validation-error form-control_error'); field.parent('.form-group').find('div.tooltip-error').remove(); field.closest('.form-group').append( '<div class="tooltip-icon tooltip-icon_error"><div class="tooltip-icon__content">' + '<strong>\u041e\u0448\u0438\u0431\u043a\u0430<\/strong><br>' + message + '<\/div><\/div>'); } function hideError(field) { field.removeClass('input-validation-error form-control_error'); field.parent('.form-group').find('div.tooltip-icon_error').remove(); } function getRowIndex(row) { return getFieldIndex(row.find('input:first')); } function getFieldIndex(field) { var name = field.prop('name'); var startIndex = name.indexOf('[') + 1; var endIndex = name.indexOf(']'); return name.substr(startIndex, endIndex - startIndex); } function decrementIndex(field, index) { var name = field.prop('name'); var newIndex = index - 1; field.prop('name', name.replace('[' + index + ']', '[' + newIndex + ']')); } function InitializeWorkflowAllowance(settings) { \t$(function() { \t\t\tparameters.selectedAllowances = settings.selectedAllowances; \t\t\tinitOperationAllowance(parameters.typeSelector); \t\t\t$('#workflowList').change(function () { \t\t\t\t\tupdateWorkflowSteps($(parameters.typeSelector).val()); \t\t\t}); \t\t\t$('#addOperationAllowance').click(function (event) { \t\t\t\t\tevent.preventDefault(); \t\t\t\t\tif (IsValidForm()) { \t\t\t\t\t\t\tvar data = { \t\t\t\t\t\t\t\t\t'StageName': $('#workflowStageList').val(), \t\t\t\t\t\t\t\t\t'WorkflowName': $('#workflowList').val(), \t\t\t\t\t\t\t}; \t\t\t\t\t\t\tif ($('#isAllowedForAllStagesForCurrentWorkflow').is(':checked')) { \t\t\t\t\t\t\t\t\tdata.DisplayWorkflowName = $('#workflowList option[value=' + data.WorkflowName + ']').text(); \t\t\t\t\t\t\t\t\tdata.DisplayStageName = '\u041b\u044e\u0431\u043e\u0439'; \t\t\t\t\t\t\t\t\tdata.StageName = ''; \t\t\t\t\t\t\t} \t\t\t\t\t\t\telse { \t\t\t\t\t\t\t\t\tdata.DisplayWorkflowName = $('#workflowList option[value=' + data.WorkflowName + ']').text(); \t\t\t\t\t\t\t\t\tdata.DisplayStageName = $('#workflowStageList option[value=' + data.StageName + ']').text(); \t\t\t\t\t\t\t} \t\t\t\t\t\t\tAddRow(data); \t\t\t\t\t\t\tif (data.StageName == '') { \t\t\t\t\t\t\t\t\tvar indexes = []; \t\t\t\t\t\t\t\t\t\/\/ \u041d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u044d\u0442\u0430\u043f\u044b \t\t\t\t\t\t\t\t\tfor (var i = 0; i < parameters.selectedAllowances.length; i++) { \t\t\t\t\t\t\t\t\t\t\tif (parameters.selectedAllowances[i].workflow == data.WorkflowName) { \t\t\t\t\t\t\t\t\t\t\t\t\tindexes.push(i); \t\t\t\t\t\t\t\t\t\t\t} \t\t\t\t\t\t\t\t\t} \t\t\t\t\t\t\t\t\t$("#operationAllowanceTable tbody tr").filter(function (index) { \t\t\t\t\t\t\t\t\t\t\treturn $.inArray(index, indexes) > -1; \t\t\t\t\t\t\t\t\t}).each(function () { \t\t\t\t\t\t\t\t\t\t\tdeleteRow($(this)); \t\t\t\t\t\t\t\t\t}); \t\t\t\t\t\t\t} \t\t\t\t\t\t\tparameters.selectedAllowances.push({ \t\t\t\t\t\t\t\t\tworkflow: data.WorkflowName, \t\t\t\t\t\t\t\t\tstage: data.StageName \t\t\t\t\t\t\t}); \t\t\t\t\t\t\t$("#workflowList").val('').trigger('change'); \t\t\t\t\t\t\tupdateWorkflowSteps($(parameters.typeSelector).val()); \t\t\t\t\t} \t\t\t}); \t\t\t$('#isAllowedForAllStagesForCurrentWorkflow').click(function () { \t\t\t\t\tif ($(this).is(":checked")) { \t\t\t\t\t\t\t$('#workflowStageList').prop('disabled', 'disabled'); \t\t\t\t\t} \t\t\t\t\telse { \t\t\t\t\t\t\t$('#workflowStageList').removeProp('disabled'); \t\t\t\t\t} \t\t\t}); \t\t\t$('#operationAllowanceTable').on('click', 'button.removeOperationAllowance', function (event) { \t\t\t\t\tvar row = $(this).parent().parent(); \t\t\t\t\tsetTimeout(function () { \t\t\t\t\t\t\tdeleteRow(row); \t\t\t\t\t}, 20); \t\t\t\t\tevent.preventDefault(); \t\t\t}); \t}); <\/code><\/pre>\n <\/div>\n<\/div>\n
\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0451 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e.<\/p>\n
\u041d\u043e\u0432\u0430\u044f \u043d\u0430\u0434\u0435\u0436\u0434\u0430<\/h2>\n
\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u0442\u0430\u043a \u0436\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442-\u044d\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442 \u043d\u0430\u0441 \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c. \u041c\u044b \u043d\u0430\u043d\u044f\u043b\u0438 \u0441\u0443\u0434\u044f \u043f\u043e \u043e\u0442\u0437\u044b\u0432\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u0430-\u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0449\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React. \u041e\u043d \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0443 \u043d\u0430\u0441, \u043d\u043e \u0443\u0441\u043f\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043a \u0447\u0435\u043c\u0443, \u0438 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u043e\u044f\u043a\u0438\u043c\u0438. \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f React \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435<\/a>, \u043d\u043e \u043e\u043d \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0445\u0430\u0440\u0434\u043a\u043e\u0440\u043d\u044b\u0435 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0449\u0438\u043a\u0438 \u043b\u044e\u0431\u044f\u0442 javascript, \u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 javascript \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f (\u044d\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044f\u0433\u043a\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u044d\u0442\u0438 webpack’\u0438 \u0438 grunt’\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0433\u0430\u043b\u0438 \u043d\u0430\u0441. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e UI’\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c, \u0441 \u043a\u0430\u043a\u0438\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u043e. \u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438, \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043a\u043e\u0434. \u041c\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043b\u0438 Angular, React \u0438 Knockout. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043d\u0435 \u043f\u0440\u043e\u0448\u0451\u043b \u0434\u0430\u0436\u0435 \u0441\u0442\u0430\u0434\u0438\u044e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430, \u0438 \u044f \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u043e\u043c\u043d\u044e \u0443\u0436\u0435, \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u0430\u043c\u0438 Angular’\u0430 \u0438 React’\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0430\u0441\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u0433\u0440\u0430\u0436\u0434\u0430\u043d\u0441\u043a\u0430\u044f \u0432\u043e\u0439\u043d\u0430!
\u0428\u0443\u0442\u043a\u0430 \ud83d\ude42 \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0431\u044b\u043b\u043e \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u0443, \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043d\u0438 \u0442\u043e\u0442, \u043d\u0438 \u0434\u0440\u0443\u0433\u043e\u0439. \u0412\u0441\u0435 \u043c\u044f\u043b\u0438\u0441\u044c \u0438 \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0440\u0435\u0448\u0438\u0442\u044c. \u0412 Angular’\u0435 \u0432\u0441\u0435\u0445 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u043b\u0430 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u0430 \u0432 React’\u0435 \u2014 \u0441\u0442\u0440\u0451\u043c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432 Visual Studio \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0431\u044b\u043b\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u0444\u0430\u043a\u0442\u043e\u043c.
\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e \u0434\u043b\u044f \u043d\u0430\u0441, \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0448\u0451\u043b \u043d\u0430\u0448 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0438\u043a (\u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435\u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0435\u0442, \u043d\u043e \u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0443\u043a\u0443 \u043d\u0430 \u043f\u0443\u043b\u044c\u0441\u0435. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u044b \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435 \u0434\u0430\u043b\u0438, \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043d\u0430 \u0447\u0442\u043e (\u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u043d\u0430 \u043c\u043d\u043e\u0433\u043e \u0431\u043e<\/i>\u043b\u044c\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f!), \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0435\u043c\u0443. \u0421\u0435\u0439\u0447\u0430\u0441, \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u0432\u044b\u0431\u043e\u0440 \u0442\u043e\u0433\u0434\u0430 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u0430\u043b \u043d\u0430 React, \u0421\u0430\u0448\u0430 agornik<\/a> \u0413\u043e\u0440\u043d\u0438\u043a \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043c\u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 (\u044f \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u0435\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u043d\u0435 \u0434\u043b\u044f \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u0430, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043d\u0435\u043d\u0438\u0435. \u041e\u0440\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u044f, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0430, \u0445\u043e\u0442\u044f \u043a\u043e\u0435-\u0447\u0442\u043e \u044f \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043b): <\/p>\n\u0411\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432: \u0440\u0435\u0430\u043a\u0442, \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u0438 \u0435\u0449\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435. \u042f \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b. \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u0440\u0435\u0430\u043a\u0442 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f.
\u041d\u043e [\u043a\u043e\u0435-\u043a\u0442\u043e] \u043a\u0440\u0438\u0447\u0430\u043b \u0433\u0440\u043e\u043c\u0447\u0435 \u0432\u0441\u0435\u0445, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u044b\u043b\u0438 \u043a\u0430\u043a \u043e\u0432\u043e\u0449\u0438. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c.
\u042f \u0443\u0432\u0438\u0434\u0435\u043b \u0447\u0442\u043e \u0440\u0435\u0430\u043a\u0442 \u2014 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u043d\u0430 \u043a\u0443\u0447\u0435 \u043a\u0440\u0443\u0442\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. FB, Yahoo, WhatsApp \u0438 \u0435\u0449\u0435 \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043c. \u042f\u0432\u043d\u043e \u0443\u0436\u0435 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0430\u0434\u043e\u043f\u0448\u043d \u0438\u0434\u0435\u0442 \u0438 \u0435\u0441\u0442\u044c \u0431\u0443\u0434\u0443\u0449\u0435\u0435.
\u0410 \u043d\u0430 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0435 \u2014 [\u043d\u0438\u0447\u0435\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e]. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043d\u0430 \u0431\u0443\u0434\u0435\u0449\u0435\u0435. \u0423\u0432\u0438\u0434\u0435\u043b \u0447\u0442\u043e \u0432\u0441\u0451 \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0432 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0430 \u0445\u043e\u0442\u044f\u0442 \u0432 2.0 \u0443\u0441\u0438\u043b\u0438\u0442\u044c.
\u042f \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e react \u2014 \u044d\u0442\u043e \u0448\u0442\u0443\u043a\u0430 \u0434\u043b\u044f \u0436\u0438\u0437\u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u0430\u044f \u0440\u0435\u0448\u0430\u044e\u0448\u0430\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0410 \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u2014 \u044d\u0442\u043e \u0431\u043e\u0440\u043e\u0434\u0430\u0442\u044b\u0435 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u043a\u0438 \u0438\u0437 \u0433\u0443\u0433\u043b\u0430 \u0438\u0437 \u043c\u043e\u0437\u0433\u0430 \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u044e\u0442 \u0432\u0441\u044f\u043a\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0441 GWT \u0438\u043b\u0438 \u043a\u0430\u043a \u043e\u043d \u0442\u0430\u043c.
\u041d\u0443 \u0438 \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0432\u043e\u043b\u0435\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0442\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043e\u0432\u043e\u0449\u0435\u0439, \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u0431\u0435\u0434\u044f\u0442 \u043a\u0440\u0438\u0447\u0430\u0449\u0438\u0435, \u043d\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u044b\u0435. \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044f \u043d\u0430\u043a\u0438\u0434\u0430\u043b \u0432 \u043a\u0430\u043d\u0430\u043b 33 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u043f\u0440\u0443\u0444\u043e\u0432 \u0438 \u0441\u0441\u044b\u043b\u043e\u043a, \u0437\u0430\u0440\u0443\u0447\u0438\u043b\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 [\u043d\u0430\u0448\u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u0430] \u0438 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u0430\u0442\u0445\u0435\u0440\u0442\u0438\u043b.
\u0410 \u0435\u0449\u0435 \u044f \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b \u043a\u0430\u043a\u043e\u0439 \u0431\u044b\u043b \u0430\u0434\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442. \u0414\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0430 \u0431\u044b\u043b \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u043e \u0438 \u0432\u043a\u0440\u044f\u0447\u0438\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u043b\u0438\u0440\u0443\u0435\u0442 \u0441 [\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0439] \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439.
\u041f\u043e\u0442\u043e\u043c \u044f \u0435\u0449\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0447\u0442\u043e \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0435 \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u043d\u043e UI \u0434\u0430\u0436\u0435 \u043d\u0435 \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u0434\u0435\u043b\u0430\u0442\u044c. \u0418 \u0432\u0441\u044f\u043a\u0438\u0439 \u0442\u0430\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 js \/ react \u0438 \u043a\u0443\u0434\u0430 \u0432\u0441\u0451 \u044d\u0442\u043e \u0438\u0434\u0435\u0442. \u0418 \u043a\u0430\u0440\u043e\u0447\u0435 \u0432\u0430\u0449\u0435 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u0431\u0440\u0430\u0442\u044c.
\u042f \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0443\u0434\u0438\u0438 \u0432\u043f\u0438\u043b\u044f\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u0451 \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a \u0438 \u0432\u044b\u0448\u043b\u043e. \u042f \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0430\u0434\u0441\u043a\u0438 \u0434\u043e\u0432\u043e\u043b\u0435\u043d \u044d\u0442\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c)<\/p><\/blockquote>\n
<\/p>\n
\u0427\u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c?<\/h2>\n
\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u044b \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0440\u0438\u043c UI. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0444\u0440\u043e\u043d\u0442-\u044d\u043d\u0434\u0449\u0438\u043a\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0447\u043d\u0443\u0442 \u0441\u043c\u0435\u044f\u0442\u044c\u0441\u044f, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u2014 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u043f\u043e\u0431\u0435\u0434\u0430, \u043c\u044b \u0438\u043c \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b \ud83d\ude42
\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439. \u041a\u0440\u0430\u0442\u043a\u0430\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u0441\u043f\u0440\u0430\u0432\u043a\u0430: \u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438, \u0417\u0430\u043a\u0430\u0437\u044b, \u041f\u043e\u043a\u0443\u043f\u043a\u0438 \u0438 \u041f\u0440\u043e\u0434\u0443\u043a\u0442\u044b, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e Entity\u2013attribute\u2013value model<\/a>. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u043e\u0434\u0438\u043b\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0434 (\u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438), \u043d\u043e \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448\u043b\u043e\u0441\u044c \u0438 \u0434\u043b\u044f UI.
\u0412\u043e\u0442, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435: <\/p>\n\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 \u041f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435<\/b><\/p>\n![](\"https:\/\/habrastorage.org\/files\/6ec\/a82\/249\/6eca822491a44d0888a2c9af677d063a.png\"\/)
<\/div>\n<\/div>\n <\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 \u0421\u0442\u0440\u043e\u043a\u0430<\/b><\/p>\n![](\"https:\/\/habrastorage.org\/files\/c4c\/3b6\/1f6\/c4c3b61f64e94be587391c32c648f698.png\"\/)
<\/div>\n<\/div>\n \u0410 \u0432\u043e\u0442, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u0434 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 React’\u0435: <\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439<\/b><\/p>\n\n\/\/\/ <reference path="..\/..\/references.d.ts"\/> module DirectCrm { export interface SaveCustomFieldKindComponentProps extends Model<CustomFieldKindValueBackendViewModel> { } interface SaveCustomFieldKindComponentState { model?: CustomFieldKindValueBackendViewModel; validationContext: IValidationContext<CustomFieldKindValueBackendViewModel>; } export class SaveCustomFieldKindComponent extends React.Component<SaveCustomFieldKindComponentProps, SaveCustomFieldKindComponentState> { private _componentsMap: ComponentsMap<CustomFieldKindConstantComponentDataBase, CustomFieldKindTypedComponentProps>; constructor(props: SaveCustomFieldKindComponentProps) { super(props); this.state = { model: props.model, validationContext: createTypedValidationContext<CustomFieldKindValueBackendViewModel>(props.validationSummary) }; this._componentsMap = ComponentsMap.initialize(this.state.model.componentsMap); } _setModel = (model: CustomFieldKindValueBackendViewModel) => { this.setState({ model: model }); } _handleFieldTypeChange = (newFieldType: string) => { var clone = _.clone(this.state.model); clone.fieldType = newFieldType; clone.typedViewModel = { type: newFieldType, $type: this._componentsMap[newFieldType].viewModelType }; this._setModel(clone); } _getColumnPrefixOrEmptyString = (entityType: string) => { var entityTypeDto = _.find(this.props.model.entityTypes, et => et.systemName === entityType); return entityTypeDto && entityTypeDto.prefix || ""; } _hanleEntityTypeChange = (newEntityType: string) => { var clone = _.clone(this.state.model); clone.entityType = newEntityType; var columnPrefix = this._getColumnPrefixOrEmptyString(newEntityType); clone.columnName = `${columnPrefix}${this.state.model.systemName || ""}`; this._setModel(clone); } _handleSystemNameChange = (newSystemName: string) => { var clone = _.clone(this.state.model); clone.systemName = newSystemName; var columnPrefix = this._getColumnPrefixOrEmptyString(this.state.model.entityType); clone.columnName = `${columnPrefix}${newSystemName || ""}`; this._setModel(clone); } _renderComponent = () => { var entityTypeSelectOptions = this.state.model.entityTypes.map(et => { return { Text: et.name, Value: et.systemName } }); var fieldTypeSelectOptions = Object.keys(this._componentsMap). map(key => { return { Text: this._componentsMap[key].name, Value: key }; }); var componentInfo = this._componentsMap[this.state.model.fieldType]; var TypedComponent = componentInfo.component; return ( <div> <div className="row form_horizontal"> <FormGroup label="\u0414\u043b\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438" validationMessage={this.state.validationContext.getValidationMessageFor(m => m.entityType)}> <div className="form-control"> <Select value={this.state.model.entityType} options={entityTypeSelectOptions} width="normal" placeholder="\u0442\u0438\u043f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438" onChange={this._hanleEntityTypeChange} \/> <\/div> <\/FormGroup> <DataGroup label="\u0418\u043c\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438" value={this.state.model.columnName} \/> <FormGroup label="\u0418\u043c\u044f" validationMessage={this.state.validationContext.getValidationMessageFor(m => m.name)}> <Textbox value={this.state.model.name} width="normal" onChange={getPropertySetter( this.state.model, this._setModel, viewModel => viewModel.name)} \/> <\/FormGroup> <FormGroup label="\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u0438\u043c\u044f" validationMessage={this.state.validationContext.getValidationMessageFor(m => m.systemName)}> <Textbox value={this.state.model.systemName} width="normal" onChange={this._handleSystemNameChange} \/> <\/FormGroup> <FormGroup label="\u0422\u0438\u043f \u043f\u043e\u043b\u044f" validationMessage={this.state.validationContext.getValidationMessageFor(m => m.fieldType)}> <div className="form-control"> <Select value={this.state.model.fieldType} options={fieldTypeSelectOptions} width="normal" placeholder="\u0442\u0438\u043f \u043f\u043e\u043b\u044f" onChange={this._handleFieldTypeChange} \/> <\/div> <\/FormGroup> <TypedComponent validationContext={this.state.validationContext.getValidationContextFor(m => m.typedViewModel)} onChange={getPropertySetter( this.state.model, this._setModel, viewModel => viewModel.typedViewModel)} value={this.state.model.typedViewModel} constantComponentData={componentInfo.constantComponentData} \/> <FormGroup> <Checkbox checked={this.state.model.isMultiple} label="\u041c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u043e\u043b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e" onChange={getPropertySetter( this.state.model, this._setModel, viewModel => viewModel.isMultiple)} disabled={false} \/> <\/FormGroup> {this._renderShouldBeExportedCheckbox()} <\/div> <\/div>); } _getViewModelValue = () => { var clone = _.clone(this.state.model); clone.componentsMap = null; clone.entityTypes = null; return clone; } render() { return ( <div> <fieldset> {this._renderComponent() } <\/fieldset> <HiddenInputJsonSerializer model={this._getViewModelValue()} name={this.props.modelName} \/> <\/div>); } _renderShouldBeExportedCheckbox = () => { if (this.state.model.entityType !== "HistoricalCustomer") return null; return ( <FormGroup validationMessage={this.state.validationContext.getValidationMessageFor(m => m.shouldBeExported)}> <Checkbox checked={this.state.model.shouldBeExported} label="\u0412\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435" onChange={getPropertySetter( this.state.model, this._setModel, viewModel => viewModel.shouldBeExported)} disabled={false} \/> <\/FormGroup>); } } } <\/code><\/pre>\n <\/div>\n<\/div>\n
<\/p>\n
TypeScript<\/h3>\n
\u00ab\u0427\u0442\u043e \u044d\u0442\u043e \u0431\u044b\u043b\u043e?\u00bb \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0432\u044b, \u0435\u0441\u043b\u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c javascript. \u042d\u0442\u043e tsx \u2014 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 React’\u043e\u0432\u043e\u0433\u043e jsx’\u0430 \u043f\u043e\u0434 TypeScript. \u041d\u0430\u0448 UI \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u00bb. \u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u0445\u0430\u0440\u0434\u043a\u043e\u0440\u043d\u044b\u0445 \u0431\u044d\u043a\u044d\u043d\u0434\u0449\u0438\u043a\u043e\u0432, \u043a\u0430\u043a \u043c\u044b \ud83d\ude42
\u0422\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432. \u0423 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u0446\u0435\u043b\u0438 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u0445\u043e\u043b\u0438\u0432\u0430\u0440 \u043d\u0430 \u0442\u0435\u043c\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438- \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438-\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432. \u041f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043b\u044e\u0431\u0438\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044f\u0437\u044b\u043a\u0438. \u041c\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435\u043b\u044c\u0437\u044f<\/s> \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u0441\u044f \u0433\u043e\u0434\u0430\u043c\u0438. \u041d\u0443 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e IntelliSense \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \ud83d\ude42 \u0422\u0430\u043a\u043e\u0435 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0443\u0431\u0435\u0436\u0434\u0435\u043d\u0438\u0435. \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043f\u043e\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0451 \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0442\u0435\u0441\u0442\u0430\u043c\u0438, \u0438 \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c, \u043d\u043e \u0441\u043f\u043e\u0440\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c.
\u0424\u043e\u0440\u043c\u0430\u0442 tsx \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0443\u0434\u0438\u0435\u0439 \u0438 \u043d\u043e\u0432\u044b\u043c R#, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c. \u0410 \u0432\u0435\u0434\u044c \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u0432 \u0441\u0442\u0443\u0434\u0438\u0438 (\u043d\u0435 \u0442\u043e \u0447\u0442\u043e \u0432 R#) \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u0430\u0436\u0435 jsx’\u0430, \u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 js \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u043c\u0435\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 (\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Sublime \u0438 Atom). \u0412 \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0432 \u0441\u0442\u0443\u0434\u0438\u0439\u043d\u043e\u043c Solution’\u0435, \u0447\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u043e \u0431\u0430\u0442\u0445\u0451\u0440\u0442\u043e\u0432. \u041d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c, \u0432\u0435\u0434\u044c \u0441\u0447\u0430\u0441\u0442\u044c\u0435 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u043e.
\u041d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u0436\u0435 typescript \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0442\u043e\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e (\u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0431\u0438\u043d\u0434\u0438\u0442\u044c UI-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0434\u0435\u043b\u0438), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c callback-\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0434\u043e\u043b\u0433\u043e, \u0438 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d callback, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0438\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443 \u043d\u0430\u0441 \u0440\u0435\u0448\u0435\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c (\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f getPropertySetter \u0432\u044b\u0448\u0435): <\/p>\n\/\/\/ <reference path="..\/..\/libraries\/underscore.d.ts"\/> function getPropertySetter<TViewModel, TProperty>( viewModel: TViewModel, viewModelSetter: {(viewModel: TViewModel): void}, propertyExpression: {(viewModel: TViewModel): TProperty}): {(newPropertyValue: TProperty): void} { return (newPropertyValue: TProperty) => { var viewModelClone = _.clone(viewModel); var propertyName = getPropertyNameByPropertyProvider(propertyExpression); viewModelClone[propertyName] = newPropertyValue; viewModelSetter(viewModelClone); }; } function getPropertyName<TObject>(obj: TObject, expression: {(obj: TObject): any}): string { return getPropertyNameByPropertyProvider(expression); } function getPropertyNameByPropertyProvider(propertyProvider: Function): string { return \/\\.([^\\.;]+);?\\s*\\}$\/.exec(propertyProvider.toString())[1]; } <\/code><\/pre>\n
![](\"https:\/\/habrastorage.org\/files\/b32\/481\/9cf\/b324819cfd044abc8817319b04428926.png\"\/)
<\/div>\n<\/div>\n![](\"https:\/\/habrastorage.org\/files\/717\/f00\/787\/717f00787659486b8931db5004c79745.png\"\/)
<\/div>\n<\/div>\n![](\"https:\/\/habrastorage.org\/files\/a38\/cbc\/88e\/a38cbc88e0cb4772ac0ac6baab4a55d2.png\"\/)
<\/div>\n<\/div>\n![](\"https:\/\/habrastorage.org\/files\/bec\/e74\/c88\/bece74c8850b45f1826a6caa2f86c294.png\"\/)
<\/div>\n<\/div>\n![](\"https:\/\/habrastorage.org\/files\/94d\/7f1\/aa8\/94d7f1aa89b74f5bba745a1134b3fd42.png\"\/)
<\/div>\n<\/div>\n