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: display =>
+        display === true ? { overflow: "auto", ...APP_STYLES.SCROLL } : { 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,
+    okDisabled = false,
+    scrollContent = true,
+    onOk,
+    onCancel,
+    onClose,
+    onInputChange
+}) => {
     //Состояние элементов ввода диалога
     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={STYLES.SCROLL(scrollContent)}>
                 {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>
@@ -98,6 +121,8 @@ P8PDialog.propTypes = {
     fullWidth: PropTypes.bool,
     inputs: PropTypes.arrayOf(PropTypes.shape(P8P_INPUT)),
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    okDisabled: PropTypes.bool,
+    scrollContent: PropTypes.bool,
     onOk: PropTypes.func,
     onCancel: PropTypes.func,
     onClose: PropTypes.func,

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)} />

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>
     );

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 => {

app/panels/clnt_task_board/task_dialog.js

@@ -9,29 +9,18 @@
 
 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 +138,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>
+            )}
         </>
     );
 };