P8PanelsCEMROS/panels/hauler_anl/hooks/hooks.js

/*
    Парус 8 - Панели мониторинга - ТОиР - Гаражка
    Пользовательские хуки: Хуки основных компонентов
*/

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

import { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
import { object2Base64XML, formatDateRF } from "../../../core/utils"; //Вспомогательные функции

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

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

//Хук графика АТС
const useChartInfo = ({ storedArgs = {} }) => {
    //Собственное состояние - график
    const [chartInfo, setChartInfo] = useState({ loaded: false, reload: false });

    //Собственное состояние - загрузка данных
    const [loading, setLoading] = useState(false);

    //Подключение к контексту взаимодействия с сервером
    const { executeStored } = useContext(BackEndСtx);

    //При необходимости перезагрузки графика
    const handleReload = useCallback(() => setChartInfo(pv => ({ ...pv, reload: true })), []);

    //При подключении к странице
    useEffect(() => {
        //Загрузка данных графика с сервера
        const loadChart = async () => {
            try {
                setLoading(true);
                const chart = await executeStored({
                    stored: "UDO_PKG_P8PANELS_HAULER_ANL.CHART_ATC_INFO",
                    args: {
                        DDATE: storedArgs.dDate ? new Date(storedArgs.dDate) : null,
                        SDEPARTMENT: storedArgs.sCustomerDept || storedArgs.sDepartment,
                        NSTATE: storedArgs.nState
                    },
                    respArg: "COUT"
                });
                setChartInfo(pv => ({ ...pv, loaded: true, reload: false, ...chart.XCHART }));
            } catch (e) {
                setChartInfo(pv => ({ ...pv, loaded: false, reload: false }));
            } finally {
                setLoading(false);
            }
        };
        //При необходимости перезагрузить
        if (chartInfo.reload) loadChart();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [chartInfo.reload, executeStored]);

    //Возвращаем график
    return { chartInfo, handleReload, loading };
};

//Хук графика КГТ/КОА
const useChartCalcs = ({ storedArgs = {} }) => {
    //Собственное состояние - график
    const [chartCalcs, setChartCalcs] = useState({ loaded: false, reload: false });

    //Подключение к контексту взаимодействия с сервером
    const { executeStored } = useContext(BackEndСtx);

    //При необходимости перезагрузки графика
    const handleReload = useCallback(() => setChartCalcs(pv => ({ ...pv, reload: true })), []);

    //При подключении к странице
    useEffect(() => {
        //Загрузка данных графика с сервера
        const loadChart = async () => {
            try {
                const chart = await executeStored({
                    stored: "UDO_PKG_P8PANELS_HAULER_ANL.CHART_ATC_KTG_KOA",
                    args: {
                        SDEPARTMENT: storedArgs.sCustomerDept || storedArgs.sDepartment,
                        DDATE_KOA_FROM: storedArgs.dDateKOAFrom ? new Date(storedArgs.dDateKOAFrom) : null,
                        DDATE_KOA_TO: storedArgs.dDateKOATo ? new Date(storedArgs.dDateKOATo) : null,
                        DDATE: storedArgs.dDate ? new Date(storedArgs.dDate) : null,
                        NSTATE: storedArgs.nState
                    },
                    respArg: "COUT"
                });
                setChartCalcs(pv => ({
                    ...pv,
                    loaded: true,
                    reload: false,
                    labels: chart.XCHART?.labels ? [...chart.XCHART.labels] : [],
                    ...chart.XCHART
                }));
            } catch (e) {
                setChartCalcs(pv => ({ ...pv, loaded: false, reload: false }));
            }
        };
        //При необходимости перезагрузить
        if (chartCalcs.reload) loadChart();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [chartCalcs.reload, executeStored]);

    //Возвращаем график
    return { chartCalcs, handleReload };
};

//Хук таблицы АТС
const useTableATC = ({ storedArgs = {} }) => {
    //Собственное состояние - таблица
    const [dataGrid, setDataGrid] = useState({
        dataLoaded: false,
        filters: [],
        orders: null,
        pageNumber: 1,
        morePages: true,
        reloading: false
    });

    //Подключение к контексту взаимодействия с сервером
    const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);

    //При изменении состояния фильтра
    const handleFilterChanged = ({ filters }) => setDataGrid(pv => ({ ...pv, filters: [...filters], pageNumber: 1, reloading: true }));

    //При изменении состояния сортировки
    const handleOrderChanged = ({ orders }) => setDataGrid(pv => ({ ...pv, orders: [...orders], pageNumber: 1, reloading: true }));

    //При изменении количества отображаемых страниц
    const handlePagesCountChanged = () => setDataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reloading: true }));

    //При необходимости перезагрузки таблицы
    const handleReload = () => setDataGrid(pv => ({ ...pv, pageNumber: 1, reloading: true }));

    //При подключении к странице
    useEffect(() => {
        //Загрузка данных графика с сервера
        const loadDataGrid = async () => {
            try {
                const data = await executeStored({
                    stored: "UDO_PKG_P8PANELS_HAULER_ANL.DATA_GRID_ATC",
                    args: {
                        CFILTERS: { VALUE: object2Base64XML(dataGrid.filters, { arrayNodeName: "filters" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
                        CORDERS: { VALUE: object2Base64XML(dataGrid.orders, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
                        NPAGE_NUMBER: dataGrid.pageNumber,
                        NPAGE_SIZE: 10,
                        NINCLUDE_DEF: dataGrid.dataLoaded ? 0 : 1,
                        DDATE: storedArgs.dDate ? new Date(storedArgs.dDate) : null,
                        DDATE_KOA_FROM: storedArgs.dDateKOAFrom ? new Date(storedArgs.dDateKOAFrom) : null,
                        DDATE_KOA_TO: storedArgs.dDateKOATo ? new Date(storedArgs.dDateKOATo) : null,
                        SDEPARTMENT: storedArgs.sCustomerDept || storedArgs.sDepartment,
                        NSTATE: storedArgs.nState
                    },
                    attributeValueProcessor: (name, val) => (["DDOCDATE", "DDATEFACT_BEG", "DDATEFACT_END"].includes(name) ? formatDateRF(val) : val),
                    respArg: "COUT"
                });
                setDataGrid(pv => ({
                    ...pv,
                    ...data.XDATA_GRID,
                    columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef || [],
                    rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...(pv.rows || []), ...(data.XDATA_GRID.rows || [])],
                    dataLoaded: true,
                    reloading: false,
                    morePages: (data.XDATA_GRID.rows || []).length >= 10
                }));
            } catch (e) {
                setDataGrid(pv => ({ ...pv, loaded: false, reload: false }));
            }
        };
        //При необходимости перезагрузить
        if (dataGrid.reloading) loadDataGrid();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [dataGrid.reloading, executeStored]);

    //Возвращаем график
    return { dataGrid, handleReload, handleFilterChanged, handleOrderChanged, handlePagesCountChanged };
};

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

export { useChartInfo, useChartCalcs, useTableATC };