WEB APP: Панель с примерами для разработчиков

app/panels/samples/loader.js

@@ -0,0 +1,61 @@
+/*
+    Парус 8 - Панели мониторинга - Примеры для разработчиков
+    Пример: Индикатор процесса
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useContext } from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { Typography, Button } from "@mui/material"; //Интерфейсные элементы
+import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    CONTAINER: { textAlign: "center", paddingTop: "20px" },
+    TITLE: { paddingBottom: "15px" }
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Пример: Индикатор процесса
+const Loader = ({ title }) => {
+    //Подключение к контексту сообщений
+    const { showLoader, hideLoader } = useContext(MessagingСtx);
+
+    //Генерация содержимого
+    return (
+        <div style={STYLES.CONTAINER}>
+            <Typography sx={STYLES.TITLE} variant={"h6"}>
+                {title}
+            </Typography>
+            <Button
+                onClick={() => {
+                    showLoader("Процесс идёт. Закончится автоматически через пару секунд...");
+                    setTimeout(hideLoader, 2000);
+                }}
+            >
+                Показать индикатор процесса
+            </Button>
+        </div>
+    );
+};
+
+//Контроль свойств - Пример: Индикатор процесса
+Loader.propTypes = {
+    title: PropTypes.string.isRequired
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { Loader };

app/panels/samples/messages.js

@@ -0,0 +1,97 @@
+/*
+    Парус 8 - Панели мониторинга - Примеры для разработчиков
+    Пример: Сообщения
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useContext, useState } from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { Typography, Divider, Button } from "@mui/material"; //Интерфейсные элементы
+import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    CONTAINER: { textAlign: "center", paddingTop: "20px" },
+    TITLE: { paddingBottom: "15px" },
+    DIVIDER: { margin: "15px" }
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Пример: Сообщения
+const Messages = ({ title }) => {
+    //Собственное состояние
+    const [state, setState] = useState({ inlineErr: true, inlineWarn: true, inlineInfo: true });
+
+    //Подключение к контексту сообщений
+    const { showMsgErr, showMsgWarn, showMsgInfo, InlineMsgErr, InlineMsgInfo, InlineMsgWarn } = useContext(MessagingСtx);
+
+    //Генерация содержимого
+    return (
+        <div style={STYLES.CONTAINER}>
+            <Typography sx={STYLES.TITLE} variant={"h6"}>
+                {title}
+            </Typography>
+            {/* Сообщение об ошибке (диалог) */}
+            <Button variant="contained" onClick={() => showMsgErr("Что-то пошло не так :(")}>
+                Ошибка
+            </Button>
+            <Divider sx={STYLES.DIVIDER} />
+            {/* Предупреждение (диалог) */}
+            <Button
+                variant="contained"
+                onClick={() =>
+                    showMsgWarn(
+                        "Вы уверены?",
+                        () => showMsgInfo("Делаем!"),
+                        () => showMsgErr("Не делаем :(")
+                    )
+                }
+            >
+                Предупреждение
+            </Button>
+            <Divider sx={STYLES.DIVIDER} />
+            {/* Информация (диалог) */}
+            <Button variant="contained" onClick={() => showMsgInfo("Ценная информация...")}>
+                Информация
+            </Button>
+            <Divider sx={STYLES.DIVIDER} />
+            {/* Ошибка (встраиваемое) */}
+            {state.inlineErr ? (
+                <>
+                    <InlineMsgErr text="Ошибка" onOk={() => setState(pv => ({ ...pv, inlineErr: false }))} />
+                    <Divider sx={STYLES.DIVIDER} />
+                </>
+            ) : null}
+            {/* Предупреждение (встраиваемое) */}
+            {state.inlineWarn ? (
+                <>
+                    <InlineMsgWarn text="Предупреждение" onOk={() => setState(pv => ({ ...pv, inlineWarn: false }))} />
+                    <Divider sx={STYLES.DIVIDER} />
+                </>
+            ) : null}
+            {/* Информация (встраиваемое) */}
+            {state.inlineInfo ? <InlineMsgInfo text="Информация" onOk={() => setState(pv => ({ ...pv, inlineInfo: false }))} /> : null}
+        </div>
+    );
+};
+
+//Контроль свойств - Пример: Сообщения
+Messages.propTypes = {
+    title: PropTypes.string.isRequired
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { Messages };

app/panels/samples/mui.js

@@ -0,0 +1,50 @@
+/*
+    Парус 8 - Панели мониторинга - Примеры для разработчиков
+    Пример: Компоненты MUI
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React from "react"; //Классы React
+import { Typography } from "@mui/material"; //Интерфейсные элементы
+import PropTypes from "prop-types"; //Контроль свойств компонента
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    CONTAINER: { textAlign: "center", paddingTop: "20px" },
+    TITLE: { paddingBottom: "15px" }
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Пример: Компоненты MUI
+const Mui = ({ title }) => {
+    //Генерация содержимого
+    return (
+        <div style={STYLES.CONTAINER}>
+            <Typography sx={STYLES.TITLE} variant={"h6"}>
+                {title}
+            </Typography>
+            Mui
+        </div>
+    );
+};
+
+//Контроль свойств - Пример: Компоненты MUI
+Mui.propTypes = {
+    title: PropTypes.string.isRequired
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { Mui };

app/panels/samples/p8online.js

@@ -0,0 +1,108 @@
+/*
+    Парус 8 - Панели мониторинга - Примеры для разработчиков
+    Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useState, useContext } from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { Typography, Button, Divider } from "@mui/material"; //Интерфейсные элементы
+import { ApplicationСtx } from "../../context/application"; //Контекст приложения
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    CONTAINER: { textAlign: "center", paddingTop: "20px" },
+    TITLE: { paddingBottom: "15px" },
+    DIVIDER: { margin: "15px" }
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
+const P8Online = ({ title }) => {
+    //Собственное состояние
+    const [agent, setAgent] = useState("");
+
+    //Подключение к контексту приложения
+    const { pOnlineShowUnit, pOnlineShowTab, pOnlineShowDocument, pOnlineShowDictionary } = useContext(ApplicationСtx);
+
+    //Генерация содержимого
+    return (
+        <div style={STYLES.CONTAINER}>
+            <Typography sx={STYLES.TITLE} variant={"h6"}>
+                {title}
+            </Typography>
+            {/* Открыть новую закладку */}
+            <Button variant="contained" onClick={() => pOnlineShowTab({ caption: "PARUS.COM", url: "https://www.parus.com" })}>
+                Открыть закладку
+            </Button>
+            <Divider sx={STYLES.DIVIDER} />
+            {/* Открыть раздел */}
+            <Button
+                variant="contained"
+                onClick={() => {
+                    pOnlineShowUnit({
+                        unitCode: "Contracts"
+                    });
+                }}
+            >
+                Открыть раздел Договоры
+            </Button>
+            <Divider sx={STYLES.DIVIDER} />
+            {/* Открыть раздел в режиме словаря */}
+            <Button
+                variant="contained"
+                onClick={() => {
+                    pOnlineShowDictionary({
+                        unitCode: "AGNLIST",
+                        inputParameters: [
+                            {
+                                name: "in_AGNABBR",
+                                value: agent
+                            }
+                        ],
+                        callBack: res => (res.success === true ? setAgent(res.outParameters.out_AGNABBR) : null)
+                    });
+                }}
+            >
+                Выбрать контрагента
+            </Button>
+            {/* Позиционирование/отбор документа */}
+            {agent ? (
+                <>
+                    <Divider sx={STYLES.DIVIDER} />
+                    <Button
+                        variant="contained"
+                        onClick={() => {
+                            pOnlineShowDocument({
+                                unitCode: "AGNLIST",
+                                document: agent,
+                                inRnParameter: "in_AGNABBR"
+                            });
+                        }}
+                    >{`Показать контрагента "${agent}"`}</Button>
+                </>
+            ) : null}
+        </div>
+    );
+};
+
+//Контроль свойств - Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
+P8Online.propTypes = {
+    title: PropTypes.string.isRequired
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8Online };

app/panels/samples/samples.js

@@ -7,8 +7,31 @@
 //Подключение библиотек
 //---------------------
 
-import React from "react"; //Классы React
+import React, { useState } from "react"; //Классы React
-import { Typography } from "@mui/material"; //Интерфейсные элементы
+import { Button, Fab, Icon } from "@mui/material"; //Интерфейсные элементы
+import { BUTTONS } from "../../../app.text"; //Текстовые ресурсы и константы
+import { P8Online } from "./p8online"; //Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
+import { Mui } from "./mui"; //Пример: Компоненты MUI
+import { Messages } from "./messages"; //Пример: Сообщения
+import { Loader } from "./loader"; //Пример: Индикатор процесса
+
+//---------
+//Константы
+//---------
+
+//Режимы
+const MODES = {
+    P8ONLINE: { name: "P8ONLINE", caption: 'API для взаимодействия с "ПАРУС 8 Онлайн"', component: P8Online },
+    MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui },
+    MESSAGES: { name: "MESSAGES", caption: "Сообщения", component: Messages },
+    LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader }
+};
+
+//Стили
+const STYLES = {
+    CONTAINER: { textAlign: "center", paddingTop: "20px" },
+    BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
+};
 
 //-----------
 //Тело модуля
@@ -16,10 +39,29 @@ import { Typography } from "@mui/material"; //Интерфейсные элем
 
 //Примеры
 const Samples = () => {
+    //Собственное состояние
+    const [mode, setMode] = useState("");
+
     //Генерация содержимого
     return (
         <div>
-            <Typography>Примеры для разработчиков</Typography>
+            {mode ? (
+                <div>
+                    <Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
+                        <Icon>arrow_back_ios</Icon>
+                        {BUTTONS.NAVIGATE_BACK}
+                    </Fab>
+                    {React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
+                </div>
+            ) : (
+                <div style={STYLES.CONTAINER}>
+                    {Object.entries(MODES).map(m => (
+                        <div key={m[0]}>
+                            <Button onClick={() => setMode(m[1].name)}>{m[1].caption}</Button>
+                        </div>
+                    ))}
+                </div>
+            )}
         </div>
     );
 };