P8-Panels/app/panels/panels_editor/components/table/view.js

/*
    Парус 8 - Панели мониторинга - Редактор панелей
    Компоненты: Таблица (представление)
*/

//---------------------
//Подключение библиотек
//---------------------

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Paper, Link } from "@mui/material"; //Интерфейсные элементы
import { APP_STYLES } from "../../../../../app.styles"; //Типовые стили
import { P8PDataGrid } from "../../../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { useDataSource, useComponentHandlers } from "../../../../components/editors/p8p_data_source_hooks"; //Хуки для данных
import { P8P_DATA_SOURCE_SHAPE } from "../../../../components/editors/p8p_data_source_common"; //Общие ресурсы источника данных
import {
    P8P_COMPONENT_INLINE_MESSAGE_TYPE,
    P8P_COMPONENT_INLINE_MESSAGE,
    P8PComponentInlineMessage
} from "../../../../components/editors/p8p_component_inline_message"; //Информационное сообщение внутри компонента
import { P8P_COMPONENT_SETTINGS_RESP_ARGS } from "../../../../components/editors/p8p_component_settings"; //Дополнительный функционал источников данных
import { P8P_CC_SHAPE, P8P_CCS_INITIAL } from "../../../../components/editors/p8p_component_condition/common"; //Общие ресурсы условий
import { P8P_CA_SHAPE, P8P_CAS_INITIAL } from "../../../../components/editors/p8p_component_action/common"; //Общие ресурсы действий
import { getDataGridCustomTypeValue, getDataGridHandlers, isHasCellRender } from "./action"; //Общие ресурсы действий таблицы
import { getColumnStylesByConditions } from "./conditions";

//---------
//Константы
//---------

//Иконка компонента
const COMPONENT_ICON = "table_view";

//Наименование компонента
const COMPONENT_NAME = "Таблица";

//Стили
const STYLES = {
    CONTAINER: clickable => ({
        display: "flex",
        height: "100%",
        overflow: "hidden",
        ...(clickable
            ? {
                  cursor: "pointer"
              }
            : {})
    }),
    DATA_GRID: { width: "100%" },
    DATA_GRID_CONTAINER: {
        height: `calc(100%)`,
        ...APP_STYLES.SCROLL
    },
    DATA_GRID_ROW_CLICABLE: { cursor: "pointer" }
};

//---------------------------------------------
//Вспомогательные функции и компоненты
//---------------------------------------------

//Форматирование значения ячейки
const dataCellRender = ({ row, columnDef, values, handlers, conditions }) => {
    //Инициализируем обработчики строки
    const { onRowClick, onColumnClick } = getDataGridHandlers(handlers, columnDef.name);
    //Инициализируем стили по условию
    const condStyles = getColumnStylesByConditions(conditions, row, columnDef.name);
    //Накладываем нужные обработчики
    return {
        cellStyle: { ...(onRowClick ? { ...STYLES.DATA_GRID_ROW_CLICABLE } : {}), ...condStyles },
        cellProps: {
            ...(onRowClick
                ? {
                      onClick: event => {
                          onRowClick({ event, values, prms: { row, columnDef } });
                      }
                  }
                : {})
        },
        data: onColumnClick ? (
            <Link component="button" variant="body2" underline="hover" onClick={event => onColumnClick({ event, values, prms: { row, columnDef } })}>
                {row[columnDef.name]}
            </Link>
        ) : (
            row[columnDef.name]
        )
    };
};

//-----------
//Тело модуля
//-----------

//Таблица (представление)
const Table = ({ dataSource = null, values = {}, conditions = P8P_CCS_INITIAL, actions = P8P_CAS_INITIAL, onValuesChange = null } = {}) => {
    //Собственное состояние - данные
    const [dataGrid, error, haveConfing, haveData] = useDataSource({ dataSource, values, componentRespArg: P8P_COMPONENT_SETTINGS_RESP_ARGS.TABLE });

    //Собственное состояние - обработчики компонента
    const [handlers] = useComponentHandlers({ actions, onValuesChange, getCustomTypeValue: getDataGridCustomTypeValue });

    //Признак необходимости рендера ячеек
    const hasCellRender = isHasCellRender(handlers, conditions);

    //Обработчики областей
    const { onComponentClick } = getDataGridHandlers(handlers);

    //Формирование представления
    return (
        <Paper
            {...(haveConfing && haveData
                ? { sx: { ...STYLES.CONTAINER(onComponentClick) } }
                : { className: "component-view__container component-view__container__empty" })}
            elevation={6}
            onClick={event => onComponentClick && onComponentClick({ event, values })}
        >
            {haveConfing && haveData ? (
                <P8PDataGrid
                    {...P8P_DATA_GRID_CONFIG_PROPS}
                    {...dataGrid}
                    style={STYLES.DATA_GRID}
                    containerComponentProps={{ sx: STYLES.DATA_GRID_CONTAINER, elevation: 0 }}
                    dataCellRender={
                        hasCellRender
                            ? prms =>
                                  dataCellRender({
                                      ...prms,
                                      values,
                                      handlers,
                                      conditions
                                  })
                            : null
                    }
                />
            ) : (
                <P8PComponentInlineMessage
                    icon={COMPONENT_ICON}
                    name={COMPONENT_NAME}
                    message={!haveConfing ? P8P_COMPONENT_INLINE_MESSAGE.NO_SETTINGS : error ? error : P8P_COMPONENT_INLINE_MESSAGE.NO_DATA_FOUND}
                    type={error ? P8P_COMPONENT_INLINE_MESSAGE_TYPE.ERROR : P8P_COMPONENT_INLINE_MESSAGE_TYPE.COMMON}
                />
            )}
        </Paper>
    );
};

//Контроль свойств компонента - Таблица (представление)
Table.propTypes = {
    dataSource: P8P_DATA_SOURCE_SHAPE,
    values: PropTypes.object,
    conditions: PropTypes.arrayOf(P8P_CC_SHAPE),
    actions: PropTypes.arrayOf(P8P_CA_SHAPE),
    onValuesChange: PropTypes.func
};

//----------------
//Интерфейс модуля
//----------------

export default Table;