254 lines
13 KiB
JavaScript
254 lines
13 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Редакторы панелей
|
||
Компонент: Диалог настройки источника данных
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState, useEffect, useContext } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Stack, IconButton, Icon, TextField, InputAdornment, MenuItem, Menu } from "@mui/material"; //Интерфейсные элементы
|
||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||
import { TITLES, CAPTIONS } from "../../../app.text"; //Общие текстовые ресурсы
|
||
import { P8PConfigDialog } from "./p8p_config_dialog"; //Типовой диалог настройки
|
||
import { P8P_DATA_SOURCE_TYPE, P8P_DATA_SOURCE_SHAPE, P8P_DATA_SOURCE_ARGUMENT_INITIAL, P8P_DATA_SOURCE_INITIAL } from "./p8p_data_source_common"; //Общие ресурсы компонента "Источник данных"
|
||
import { useUserProcDesc } from "./p8p_data_source_hooks"; //Хуки источников данных
|
||
import { P8PDataSourceQuerySelector } from "./p8p_data_source_query_selector"; //Диалог выбора записи редактора запросов
|
||
import { hasValue } from "../../core/utils"; //Вспомогательные функции
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Диалог настройки источника данных
|
||
const P8PDataSourceConfigDialog = ({ dataSource = null, valueProviders = {}, onOk = null, onCancel = null } = {}) => {
|
||
//Собственное состояние - параметры элемента формы
|
||
const [state, setState] = useState({ ...P8P_DATA_SOURCE_INITIAL, ...dataSource });
|
||
|
||
//Собственное состояние - флаги обновление данных
|
||
const [refresh, setRefresh] = useState({ userProcDesc: 0 });
|
||
|
||
//Собственное состояние - элемент привязки меню выбора источника
|
||
const [valueProvidersMenuAnchorEl, setValueProvidersMenuAnchorEl] = useState(null);
|
||
|
||
//Описание выбранной пользовательской процедуры
|
||
const [userProcDesc] = useUserProcDesc({ code: state.userProc, refresh: refresh.userProcDesc });
|
||
|
||
//Собственное состояние - отображение диалога выбора запроса
|
||
const [openQuerySelector, setOpenQuerySelector] = useState(false);
|
||
|
||
//Собственное состояние - доступность полей выбора источника
|
||
const [disabledFields, setDisabledFields] = useState({ query: false, userProc: false });
|
||
|
||
//Подключение к контексту приложения
|
||
const { pOnlineShowDictionary } = useContext(ApplicationСtx);
|
||
|
||
//Установка значения/привязки аргумента
|
||
const setArgumentValueSource = (index, value, valueSource) =>
|
||
setState(pv => ({
|
||
...pv,
|
||
arguments: pv.arguments.map((argument, i) => ({ ...argument, ...(i == index ? { value, valueSource } : {}) }))
|
||
}));
|
||
|
||
//Открытие/сокрытие меню выбора источника
|
||
const toggleValueProvidersMenu = target => setValueProvidersMenuAnchorEl(target instanceof Element ? target : null);
|
||
|
||
//При нажатии на очистку наименования пользовательской процедуры
|
||
const handleUserProcClearClick = () => setState({ ...P8P_DATA_SOURCE_INITIAL });
|
||
|
||
//При нажатии на выбор пользовательской процедуры в качестве источника данных
|
||
const handleUserProcSelectClick = () => {
|
||
pOnlineShowDictionary({
|
||
unitCode: "UserProcedures",
|
||
showMethod: "main",
|
||
inputParameters: [{ name: "in_CODE", value: state.userProc }],
|
||
callBack: res => {
|
||
if (res.success) {
|
||
setState(pv => ({ ...pv, type: P8P_DATA_SOURCE_TYPE.USER_PROC, userProc: res.outParameters.out_CODE }));
|
||
setRefresh(pv => ({ ...pv, userProcDesc: pv.userProcDesc + 1 }));
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
//При закрытии дилога с сохранением
|
||
const handleOk = () => onOk && onOk({ ...state });
|
||
|
||
//При закртии диалога отменой
|
||
const handleCancel = () => onCancel && onCancel();
|
||
|
||
//При очистке значения/связывания аргумента
|
||
const handleArgumentClearClick = index => setArgumentValueSource(index, "", "");
|
||
|
||
//При отображении меню связывания аргумента с поставщиком данных
|
||
const handleArgumentLinkMenuClick = e => setValueProvidersMenuAnchorEl(e.currentTarget);
|
||
|
||
//При выборе элемента меню связывания аргумента с поставщиком данных
|
||
const handleArgumentLinkClick = valueSource => {
|
||
setArgumentValueSource(valueProvidersMenuAnchorEl.id, "", valueSource);
|
||
toggleValueProvidersMenu();
|
||
};
|
||
|
||
//При вводе значения аргумента
|
||
const handleArgumentChange = (index, value) => setArgumentValueSource(index, value, "");
|
||
|
||
//Открытие диалога выбора запроса
|
||
const handleOpenQuerySelector = () => setOpenQuerySelector(true);
|
||
|
||
//Закрытие диалога выбора запроса
|
||
const handleCancelQuerySelector = () => setOpenQuerySelector(false);
|
||
|
||
//При нажатии на очистку мнемокода запроса
|
||
const handleQueryClearClick = () => setState({ ...P8P_DATA_SOURCE_INITIAL });
|
||
|
||
//При нажатии на выбор запроса в качестве источника данных
|
||
const handleQuerySelectClick = query => {
|
||
setState(pv => ({ ...pv, type: P8P_DATA_SOURCE_TYPE.QUERY, query: query.code }));
|
||
handleCancelQuerySelector();
|
||
};
|
||
|
||
//При изменении описания пользовательской процедуры
|
||
useEffect(() => {
|
||
if (userProcDesc)
|
||
setState(pv => ({
|
||
...pv,
|
||
stored: userProcDesc?.stored?.name,
|
||
respArg: userProcDesc?.stored?.respArg,
|
||
arguments: (userProcDesc?.arguments || []).map(argument => ({ ...P8P_DATA_SOURCE_ARGUMENT_INITIAL, ...argument }))
|
||
}));
|
||
}, [userProcDesc]);
|
||
|
||
//При изменении источника
|
||
useEffect(() => {
|
||
/*
|
||
Если выбран запрос - блокируем выбор процедуры
|
||
Если выбрана процедура - блокируем выбор запроса
|
||
Ничего не выбрано - доступны все варианты
|
||
*/
|
||
hasValue(state.query)
|
||
? setDisabledFields({ query: false, userProc: true })
|
||
: hasValue(state.userProc)
|
||
? setDisabledFields({ query: true, userProc: false })
|
||
: setDisabledFields({ query: false, userProc: false });
|
||
}, [state.query, state.userProc]);
|
||
|
||
//Список значений
|
||
const values = Object.keys(valueProviders);
|
||
|
||
//Наличие значений
|
||
const isValues = values && values.length > 0 ? true : false;
|
||
|
||
//Меню привязки к поставщикам значений
|
||
const valueProvidersMenu = isValues && (
|
||
<Menu anchorEl={valueProvidersMenuAnchorEl} open={Boolean(valueProvidersMenuAnchorEl)} onClose={toggleValueProvidersMenu}>
|
||
{values.map((value, i) => (
|
||
<MenuItem key={i} onClick={() => handleArgumentLinkClick(value)}>
|
||
{value}
|
||
</MenuItem>
|
||
))}
|
||
</Menu>
|
||
);
|
||
|
||
//Доступность сохранения настройки источника данных
|
||
const okDisabled = !state.query && !state.userProc ? true : false;
|
||
|
||
//Формирование представления
|
||
return (
|
||
<>
|
||
{openQuerySelector ? (
|
||
<P8PDataSourceQuerySelector current={state.query} onSelect={handleQuerySelectClick} onCancel={handleCancelQuerySelector} />
|
||
) : null}
|
||
<P8PConfigDialog title={TITLES.DATA_SOURCE_CONFIG} onOk={handleOk} onCancel={handleCancel} okDisabled={okDisabled}>
|
||
<Stack direction={"column"} spacing={1}>
|
||
{valueProvidersMenu}
|
||
{/* ДОРАБАТЫВАТЬ ПОСЛЕ РЕАЛИЗАЦИИ ЗАПРОСОВ */}
|
||
<TextField
|
||
type={"text"}
|
||
variant={"standard"}
|
||
value={state.query}
|
||
label={CAPTIONS.QUERY}
|
||
InputLabelProps={{ shrink: true }}
|
||
InputProps={{
|
||
readOnly: true,
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton onClick={handleQueryClearClick} disabled={disabledFields.query}>
|
||
<Icon>clear</Icon>
|
||
</IconButton>
|
||
<IconButton onClick={handleOpenQuerySelector} disabled={disabledFields.query}>
|
||
<Icon>list</Icon>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
)
|
||
}}
|
||
disabled={disabledFields.query}
|
||
/>
|
||
<TextField
|
||
type={"text"}
|
||
variant={"standard"}
|
||
value={state.userProc}
|
||
label={CAPTIONS.USER_PROC}
|
||
InputLabelProps={{ shrink: true }}
|
||
InputProps={{
|
||
readOnly: true,
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton onClick={handleUserProcClearClick} disabled={disabledFields.userProc}>
|
||
<Icon>clear</Icon>
|
||
</IconButton>
|
||
<IconButton onClick={handleUserProcSelectClick} disabled={disabledFields.userProc}>
|
||
<Icon>list</Icon>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
)
|
||
}}
|
||
disabled={disabledFields.userProc}
|
||
/>
|
||
{Array.isArray(state?.arguments) &&
|
||
state.arguments.map((argument, i) => (
|
||
<TextField
|
||
key={i}
|
||
type={"text"}
|
||
variant={"standard"}
|
||
value={argument.value || argument.valueSource}
|
||
label={argument.caption}
|
||
onChange={e => handleArgumentChange(i, e.target.value)}
|
||
InputLabelProps={{ shrink: true }}
|
||
InputProps={{
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton onClick={() => handleArgumentClearClick(i)}>
|
||
<Icon>clear</Icon>
|
||
</IconButton>
|
||
{isValues && (
|
||
<IconButton id={i} onClick={handleArgumentLinkMenuClick}>
|
||
<Icon>settings_ethernet</Icon>
|
||
</IconButton>
|
||
)}
|
||
</InputAdornment>
|
||
)
|
||
}}
|
||
/>
|
||
))}
|
||
</Stack>
|
||
</P8PConfigDialog>
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Диалог настройки источника данных
|
||
P8PDataSourceConfigDialog.propTypes = {
|
||
dataSource: P8P_DATA_SOURCE_SHAPE,
|
||
valueProviders: PropTypes.object,
|
||
onOk: PropTypes.func,
|
||
onCancel: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { P8PDataSourceConfigDialog };
|