122 lines
4.7 KiB
JavaScript
122 lines
4.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Редакторы панелей
|
||
Компонент: Действия
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Icon, Button } from "@mui/material"; //Интерфейсные элементы
|
||
import { P8PCAEditor } from "./p8p_component_action/editor"; //Редактор действия
|
||
import { P8PChipList } from "./p8p_chip_list"; //Дополнительные настройки редактора
|
||
import { P8P_CA_SHAPE, P8P_CAS_INITIAL, P8P_CA_TYPE } from "./p8p_component_action/common"; //Общие ресурсы действий
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//------------------------------------
|
||
//Вспомогательные функции и компоненты
|
||
//------------------------------------
|
||
|
||
const getActionChipText = (type, params) => {
|
||
//Определяем от типа
|
||
switch (type) {
|
||
//Открыть раздел
|
||
case P8P_CA_TYPE.openUnit.code:
|
||
return params.unitName;
|
||
//Открыть панель
|
||
case P8P_CA_TYPE.openPanel.code:
|
||
return params.panelValue.value;
|
||
//Установить переменную
|
||
case P8P_CA_TYPE.setVariable.code:
|
||
return params.reduce((prev, cur) => [...prev, cur.variableSource], []).join(", ");
|
||
//Для всех остальных
|
||
default:
|
||
return "Не определен";
|
||
}
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Действия
|
||
const P8PActions = ({ actions = P8P_CAS_INITIAL, valueProviders = {}, areas = [], valueTypes = [], onChange = null } = {}) => {
|
||
//Собственное состояние - редактор действий
|
||
const [actionEditor, setActionEditor] = useState({ display: false, index: null });
|
||
|
||
//При изменении действий
|
||
const handleActionsChange = actions => onChange && onChange(actions);
|
||
|
||
//При добавлении действия
|
||
const handleActionAdd = () => setActionEditor({ display: true, index: null });
|
||
|
||
//При нажатии на действие
|
||
const handleActionClick = i => setActionEditor({ display: true, index: i });
|
||
|
||
//При удалении действия
|
||
const handleActionDelete = i => {
|
||
const newActions = [...actions];
|
||
newActions.splice(i, 1);
|
||
handleActionsChange(newActions);
|
||
};
|
||
|
||
//При отмене сохранения изменений действия
|
||
const handleActionCancel = () => setActionEditor({ display: false, index: null });
|
||
|
||
//При сохранении изменений действия
|
||
const handleActionSave = action => {
|
||
const newActions = [...actions];
|
||
actionEditor.index == null ? newActions.push({ ...action }) : (newActions[actionEditor.index] = { ...action });
|
||
handleActionsChange(newActions);
|
||
setActionEditor({ display: false, index: null });
|
||
};
|
||
|
||
//Определяем структуру действий для отображения
|
||
const actionChips = actions.map(item => {
|
||
//Собираем текст действия
|
||
let text = getActionChipText(item.type, item.params);
|
||
//Формируем структуру для отображения карточки действия
|
||
return { text: text, title: text, icon: P8P_CA_TYPE[item.type]?.icon, iconTitle: P8P_CA_TYPE[item.type]?.name };
|
||
});
|
||
|
||
//Формирование представления
|
||
return (
|
||
<>
|
||
{actionEditor.display && (
|
||
<P8PCAEditor
|
||
areas={areas}
|
||
valueTypes={valueTypes}
|
||
action={actionEditor.index !== null ? { ...actions[actionEditor.index] } : null}
|
||
onCancel={handleActionCancel}
|
||
onOk={handleActionSave}
|
||
valueProviders={valueProviders}
|
||
/>
|
||
)}
|
||
<P8PChipList items={actionChips} onClick={handleActionClick} onDelete={handleActionDelete} />
|
||
<Button startIcon={<Icon>add</Icon>} onClick={handleActionAdd}>
|
||
Добавить действие
|
||
</Button>
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - действия
|
||
P8PActions.propTypes = {
|
||
actions: PropTypes.arrayOf(P8P_CA_SHAPE),
|
||
valueProviders: PropTypes.object,
|
||
areas: PropTypes.array,
|
||
valueTypes: PropTypes.array,
|
||
onChange: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { P8PActions };
|