ЦИТК-1006 - Доработка диалога добавления/исправления

2025-11-07 14:35:28 +03:00 · 2025-11-07 14:35:28 +03:00 · 42bf193b5b
commit 42bf193b5b
parent 3e7b1d64da
5 changed files with 120 additions and 105 deletions
--- a/app/components/p8p_dialog.js
+++ b/app/components/p8p_dialog.js
@ -12,6 +12,7 @@ import PropTypes from "prop-types"; //Контроль свойств компо
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
 import { BUTTONS } from "../../app.text"; //Общие текстовые ресурсы
 import { P8P_INPUT, P8PInput } from "./p8p_input"; //Поле ввода
+import { APP_STYLES } from "../../app.styles"; //Типовые стили

 //---------
 //Константы
@ -26,6 +27,12 @@ const P8P_DIALOG_WIDTH = {
    XL: "xl"
 };

+//Стили
+const STYLES = {
+    SCROLL: { overflow: "auto", ...APP_STYLES.SCROLL },
+    SCROLL_HIDE: { overflow: "hidden", display: "flex", flexDirection: "column" }
+};
+
 //-----------------------
 //Вспомогательные функции
 //-----------------------
@ -39,7 +46,19 @@ const buildFormValues = inputsState =>
 //-----------

 //Диалог
-const P8PDialog = ({ title, width, fullWidth, inputs, children, onOk, onCancel, onClose, onInputChange }) => {
+const P8PDialog = ({
+    title,
+    width,
+    fullWidth,
+    inputs,
+    children,
+    onOk,
+    onCancel,
+    onClose,
+    onInputChange,
+    okDisabled = false,
+    scrollContent = true
+}) => {
    //Состояние элементов ввода диалога
    const [inputsState, setInputsState] = useState([]);

@ -75,7 +94,7 @@ const P8PDialog = ({ title, width, fullWidth, inputs, children, onOk, onCancel,
    return (
        <Dialog onClose={handleClose} open {...{ ...(width ? { maxWidth: width } : {}), ...(fullWidth === true ? { fullWidth: true } : {}) }}>
            <DialogTitle>{title}</DialogTitle>
-            <DialogContent>
+            <DialogContent sx={scrollContent ? STYLES.SCROLL : STYLES.SCROLL_HIDE}>
                {inputsState.map((input, i) => (
                    <P8PInput key={i} {...input} formValues={formValues} onChange={handleInputChange} />
                ))}
@ -83,7 +102,11 @@ const P8PDialog = ({ title, width, fullWidth, inputs, children, onOk, onCancel,
                {children}
            </DialogContent>
            <DialogActions>
-                {onOk && <Button onClick={handleOk}>{BUTTONS.OK}</Button>}
+                {onOk && (
+                    <Button disabled={okDisabled} onClick={handleOk}>
+                        {BUTTONS.OK}
+                    </Button>
+                )}
                {onCancel && <Button onClick={handleCancel}>{BUTTONS.CANCEL}</Button>}
                {onClose && <Button onClick={handleClose}>{BUTTONS.CLOSE}</Button>}
            </DialogActions>
@ -101,7 +124,9 @@ P8PDialog.propTypes = {
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
    onClose: PropTypes.func,
-    onInputChange: PropTypes.func
+    onInputChange: PropTypes.func,
+    okDisabled: PropTypes.bool,
+    scrollContent: PropTypes.bool
 };

 //----------------
--- a/app/panels/clnt_task_board/components/task_form.js
+++ b/app/panels/clnt_task_board/components/task_form.js
@ -9,10 +9,11 @@

 import React, { useState, useCallback } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
-import { Box, Typography, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
+import { Box, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
 import { TaskFormTabInfo } from "./task_form_tab_info"; //Вкладка основной информации
 import { TaskFormTabExecutor } from "./task_form_tab_executor"; //Вкладка информации об исполнителе
 import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка информации со свойствами
+import { COMMON_STYLES } from "../styles"; //Общие стили

 //---------
 //Константы
@ -20,7 +21,8 @@ import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка ин

 //Стили
 const STYLES = {
-    CONTAINER: { margin: "5px 0px", textAlign: "center" }
+    CONTAINER: { height: "625px", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column" },
+    BOX_TAB: { height: "575px", overflowY: "auto", ...COMMON_STYLES.SCROLL }
 };

 //------------------------------------
@ -40,7 +42,14 @@ function CustomTabPanel(props) {
    const { children, value, index, ...other } = props;
    //Генерация содержимого
    return (
-        <Box role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
+        <Box
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+            sx={STYLES.BOX_TAB}
+        >
            {value === index && <Box pt={1}>{children}</Box>}
        </Box>
    );
@ -105,9 +114,6 @@ const TaskForm = ({ task, taskType, editable, docProps, onTaskChange, onEventNex
    //Генерация содержимого
    return (
        <Box sx={STYLES.CONTAINER}>
-            <Typography pb={1} variant="h6">
-                {task.nRn ? `Исправление события${task.nClosed ? " (событые аннулировано)" : ""}` : "Добавление события"}
-            </Typography>
            <Tabs value={tab} onChange={handleTabChange} aria-label="tabs of values">
                <Tab label="Событие" {...a11yProps(0)} />
                <Tab label="Исполнитель" {...a11yProps(1)} />
--- a/app/panels/clnt_task_board/components/task_form_tab_props.js
+++ b/app/panels/clnt_task_board/components/task_form_tab_props.js
@ -21,6 +21,11 @@ import { useDictionary } from "../hooks/dict_hooks"; //Состояние отк
 //Константы
 //---------

+//Стили
+const STYLES = {
+    BOX_FEW_COLUMNS: { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }
+};
+
 //------------------------------------
 //Вспомогательные функции и компоненты
 //------------------------------------
@ -101,55 +106,59 @@ const TaskFormTabProps = ({ task, docProps, onPropEdit }) => {
    return (
        <Box>
            <Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset">
-                {docProps.map((docProp, index) => {
-                    return docProp.BSHOW_IN_GRID ? (
-                        <TextField
-                            error={
-                                !validationError(
-                                    task.docProps[docProp.SFORMATTED_ID],
-                                    docProp.NFORMAT,
-                                    docProp.NNUM_WIDTH,
-                                    docProp.NNUM_PRECISION,
-                                    docProp.NSTR_WIDTH
-                                )
-                            }
-                            key={index}
-                            sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
-                            id={docProp.SFORMATTED_ID}
-                            type={
-                                docProp.NFORMAT < 2
-                                    ? "string"
-                                    : docProp.NFORMAT === 2
-                                    ? docProp.NDATA_SUBTYPE === 0
-                                        ? "date"
-                                        : "datetime-local"
-                                    : "time"
-                            }
-                            label={docProp.SNAME}
-                            fullWidth
-                            value={initPropValue(docProp)}
-                            variant="standard"
-                            onChange={e => onPropEdit(e.target.id, e.target.value)}
-                            inputProps={
-                                (docProp.NFORMAT === 2 && docProp.NDATA_SUBTYPE === 2) || (docProp.NFORMAT === 3 && docProp.NDATA_SUBTYPE === 1)
-                                    ? { step: 1 }
-                                    : {}
-                            }
-                            InputProps={
-                                docProp.NENTRY_TYPE > 0 ? getInputProps(() => handleDictOpen(docProp, task.docProps[docProp.SFORMATTED_ID])) : null
-                            }
-                            InputLabelProps={
-                                docProp.NFORMAT < 2
-                                    ? {}
-                                    : {
-                                          shrink: true
-                                      }
-                            }
-                            required={docProp.BREQUIRE}
-                            disabled={docProp.BREADONLY}
-                        />
-                    ) : null;
-                })}
+                <Box sx={STYLES.BOX_FEW_COLUMNS}>
+                    {docProps.map((docProp, index) => {
+                        return docProp.BSHOW_IN_GRID ? (
+                            <TextField
+                                error={
+                                    !validationError(
+                                        task.docProps[docProp.SFORMATTED_ID],
+                                        docProp.NFORMAT,
+                                        docProp.NNUM_WIDTH,
+                                        docProp.NNUM_PRECISION,
+                                        docProp.NSTR_WIDTH
+                                    )
+                                }
+                                key={index}
+                                sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
+                                id={docProp.SFORMATTED_ID}
+                                type={
+                                    docProp.NFORMAT < 2
+                                        ? "string"
+                                        : docProp.NFORMAT === 2
+                                        ? docProp.NDATA_SUBTYPE === 0
+                                            ? "date"
+                                            : "datetime-local"
+                                        : "time"
+                                }
+                                label={docProp.SNAME}
+                                fullWidth
+                                value={initPropValue(docProp)}
+                                variant="standard"
+                                onChange={e => onPropEdit(e.target.id, e.target.value)}
+                                inputProps={
+                                    (docProp.NFORMAT === 2 && docProp.NDATA_SUBTYPE === 2) || (docProp.NFORMAT === 3 && docProp.NDATA_SUBTYPE === 1)
+                                        ? { step: 1 }
+                                        : {}
+                                }
+                                InputProps={
+                                    docProp.NENTRY_TYPE > 0
+                                        ? getInputProps(() => handleDictOpen(docProp, task.docProps[docProp.SFORMATTED_ID]))
+                                        : null
+                                }
+                                InputLabelProps={
+                                    docProp.NFORMAT < 2
+                                        ? {}
+                                        : {
+                                              shrink: true
+                                          }
+                                }
+                                required={docProp.BREQUIRE}
+                                disabled={docProp.BREADONLY}
+                            />
+                        ) : null;
+                    })}
+                </Box>
            </Box>
        </Box>
    );
--- a/app/panels/clnt_task_board/styles.js
+++ b/app/panels/clnt_task_board/styles.js
@ -29,7 +29,7 @@ export const COMMON_STYLES = {
              }
            : {})
    }),
-    BOX_WITH_LEGEND: { border: "1px solid #939393" },
+    BOX_WITH_LEGEND: { border: "1px solid #939393", marginBottom: "1px" },
    BOX_SINGLE_COLUMN: { display: "flex", flexDirection: "column", gap: "10px" },
    LEGEND: { textAlign: "left" },
    SELECT_MENU: width => {
--- a/app/panels/clnt_task_board/task_dialog.js
+++ b/app/panels/clnt_task_board/task_dialog.js
@ -9,29 +9,19 @@

 import React, { useState, useCallback, useContext, useEffect } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
-import { Dialog, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
 import { useClientEvent } from "./hooks/task_dialog_hooks"; //Хук для события
 import { useDocsProps } from "./hooks/task_dialog_hooks"; //Хук для получения доп. свойств раздела "События"
 import { TaskForm } from "./components/task_form"; //Форма события
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
-import { COMMON_STYLES } from "./styles"; //Общие стили
 import { hasValue } from "../../core/utils"; //Вспомогательные процедуры и функции

+import { P8PDialog } from "../../components/p8p_dialog";
+
 //---------
 //Константы
 //---------

-//Стили
-const STYLES = {
-    DIALOG_CONTENT: {
-        paddingBottom: "0px",
-        maxHeight: "740px",
-        minHeight: "740px",
-        ...COMMON_STYLES.SCROLL
-    }
-};
-
 //-----------
 //Тело модуля
 //-----------
@ -149,39 +139,24 @@ const TaskDialog = ({ taskRn, taskType, editable, onTasksReload, onClose }) => {
    return (
        <>
            {!task.init && docProps.loaded && (
-                <Dialog open onClose={onClose ? onClose : null} fullWidth>
-                    <DialogContent sx={STYLES.DIALOG_CONTENT}>
-                        <TaskForm
-                            task={task}
-                            taskType={taskType}
-                            editable={!taskRn || editable ? true : false}
-                            docProps={docProps.props}
-                            onTaskChange={handleTaskChange}
-                            onEventNextNumbGet={handleEventNextNumbGet}
-                        />
-                    </DialogContent>
-                    {onClose ? (
-                        <DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
-                            {taskRn ? (
-                                <Button
-                                    onClick={() => handleUpdateEvent(onClose).then(onTasksReload)}
-                                    disabled={task.updateDisabled || !editable || !docPropsReady}
-                                >
-                                    Исправить
-                                </Button>
-                            ) : (
-                                <Button
-                                    onClick={() => handleInsertTask(onClose).then(onTasksReload)}
-                                    disabled={task.insertDisabled || !docPropsReady}
-                                >
-                                    Добавить
-                                </Button>
-                            )}
-                            <Button onClick={onClose}>Закрыть</Button>
-                        </DialogActions>
-                    ) : null}
-                </Dialog>
-            )}{" "}
+                <P8PDialog
+                    title={task.nRn ? `Исправление события${task.nClosed ? " (событые аннулировано)" : ""}` : "Добавление события"}
+                    fullWidth={true}
+                    onOk={() => (taskRn ? handleUpdateEvent(onClose).then(onTasksReload) : handleInsertTask(onClose).then(onTasksReload))}
+                    onClose={onClose ? onClose : null}
+                    okDisabled={taskRn ? task.updateDisabled || !editable || !docPropsReady : task.insertDisabled || !docPropsReady}
+                    scrollContent={false}
+                >
+                    <TaskForm
+                        task={task}
+                        taskType={taskType}
+                        editable={!taskRn || editable ? true : false}
+                        docProps={docProps.props}
+                        onTaskChange={handleTaskChange}
+                        onEventNextNumbGet={handleEventNextNumbGet}
+                    />
+                </P8PDialog>
+            )}
        </>
    );
 };