100 lines
4.2 KiB
JavaScript
100 lines
4.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редакторы панелей
|
|
Компонент: Условия
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React, { useState } from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Icon, Button } from "@mui/material"; //Интерфейсные элементы
|
|
import { P8PCCEditor } from "./p8p_component_condition/editor"; //Редактор условия
|
|
import { P8PChipList } from "./p8p_chip_list"; //Дополнительные настройки редактора
|
|
import { P8P_CCS_INITIAL, P8P_CC_SHAPE, P8P_CC_FIELD_PRM_SHAPE } from "./p8p_component_condition/common"; //Общие ресурсы компонента "Редактор условия"
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Условия
|
|
const P8PConditions = ({ conditions = P8P_CCS_INITIAL, condFields, resFields, onChange = null } = {}) => {
|
|
//Собственное состояние - редактор условий
|
|
const [conditionEditor, setConditionEditor] = useState({ display: false, index: null });
|
|
|
|
//При изменении условий
|
|
const handleConditionsChange = conditions => onChange && onChange(conditions);
|
|
|
|
//При добавлении нового условия
|
|
const handleConditionAdd = () => setConditionEditor({ display: true, index: null });
|
|
|
|
//При нажатии на условие
|
|
const handleConditionClick = i => setConditionEditor({ display: true, index: i });
|
|
|
|
//При удалении условия
|
|
const handleConditionDelete = i => {
|
|
const newConditions = [...conditions];
|
|
newConditions.splice(i, 1);
|
|
handleConditionsChange(newConditions);
|
|
};
|
|
|
|
//При отмене сохранения изменений условия
|
|
const handleConditionCancel = () => setConditionEditor({ display: false, index: null });
|
|
|
|
//При сохранении изменений условия
|
|
const handleConditionSave = condition => {
|
|
const newConditions = [...conditions];
|
|
conditionEditor.index == null ? newConditions.push({ ...condition }) : (newConditions[conditionEditor.index] = { ...condition });
|
|
handleConditionsChange(newConditions);
|
|
setConditionEditor({ display: false, index: null });
|
|
};
|
|
|
|
//Определяем структуру условий для отображения
|
|
const conditionChips = conditions.map(item => {
|
|
//Собираем текст условия
|
|
let text = `${item.condField.name} ${item.condOperator.name} ${item.condValue}`;
|
|
//Считываем поле результата
|
|
let resField = resFields.find(field => field.name === item.resField.name);
|
|
//Формируем структуру для отображения карточки действия
|
|
return { text: text, title: text, icon: resField?.icon, iconTitle: resField?.name };
|
|
});
|
|
|
|
//Формирование представления
|
|
return (
|
|
<>
|
|
{conditionEditor.display && (
|
|
<P8PCCEditor
|
|
condition={conditionEditor.index !== null ? { ...conditions[conditionEditor.index] } : null}
|
|
onCancel={handleConditionCancel}
|
|
onOk={handleConditionSave}
|
|
condFields={condFields}
|
|
resFields={resFields}
|
|
/>
|
|
)}
|
|
<P8PChipList items={conditionChips} onClick={handleConditionClick} onDelete={handleConditionDelete} />
|
|
<Button startIcon={<Icon>add</Icon>} onClick={handleConditionAdd}>
|
|
Добавить условие
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - условия
|
|
P8PConditions.propTypes = {
|
|
conditions: PropTypes.arrayOf(P8P_CC_SHAPE),
|
|
condFields: PropTypes.arrayOf(P8P_CC_FIELD_PRM_SHAPE).isRequired,
|
|
resFields: PropTypes.arrayOf(P8P_CC_FIELD_PRM_SHAPE).isRequired,
|
|
onChange: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PConditions };
|