CITKParus/P8-Panels
2
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: CITKParus:b7f9daa25878ce1e70d3eb4d8076190d51333b47
Branches Tags
CITKParus:main
..
compare: CITKParus:3e7b1d64daf51723fe67c1e12e1bd84ba2c9b1c0
Branches Tags
CITKParus:main

No commits in common. "b7f9daa25878ce1e70d3eb4d8076190d51333b47" and "3e7b1d64daf51723fe67c1e12e1bd84ba2c9b1c0" have entirely different histories.
b7f9daa258 ... 3e7b1d64da

5 changed files with 104 additions and 118 deletions
Show Stats Expand all files Collapse all files

31
app/components/p8p_dialog.js
View File

@ -12,7 +12,6 @@ import PropTypes from "prop-types"; //Контроль свойств компо
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
import { BUTTONS } from "../../app.text"; //Общие текстовые ресурсы import { BUTTONS } from "../../app.text"; //Общие текстовые ресурсы
import { P8P_INPUT, P8PInput } from "./p8p_input"; //Поле ввода import { P8P_INPUT, P8PInput } from "./p8p_input"; //Поле ввода
import { APP_STYLES } from "../../app.styles"; //Типовые стили
//--------- //---------
//Константы //Константы
@ -27,12 +26,6 @@ const P8P_DIALOG_WIDTH = {
XL: "xl" XL: "xl"
}; };
//Стили
const STYLES = {
SCROLL: display =>
display === true ? { overflow: "auto", ...APP_STYLES.SCROLL } : { overflow: "hidden", display: "flex", flexDirection: "column" }
};
//----------------------- //-----------------------
//Вспомогательные функции //Вспомогательные функции
//----------------------- //-----------------------
@ -46,19 +39,7 @@ const buildFormValues = inputsState =>
//----------- //-----------
//Диалог //Диалог
const P8PDialog = ({ const P8PDialog = ({ title, width, fullWidth, inputs, children, onOk, onCancel, onClose, onInputChange }) => {
title,
width,
fullWidth,
inputs,
children,
okDisabled = false,
scrollContent = true,
onOk,
onCancel,
onClose,
onInputChange
}) => {
//Состояние элементов ввода диалога //Состояние элементов ввода диалога
const [inputsState, setInputsState] = useState([]); const [inputsState, setInputsState] = useState([]);
@ -94,7 +75,7 @@ const P8PDialog = ({
return ( return (
<Dialog onClose={handleClose} open {...{ ...(width ? { maxWidth: width } : {}), ...(fullWidth === true ? { fullWidth: true } : {}) }}> <Dialog onClose={handleClose} open {...{ ...(width ? { maxWidth: width } : {}), ...(fullWidth === true ? { fullWidth: true } : {}) }}>
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
<DialogContent sx={STYLES.SCROLL(scrollContent)}> <DialogContent>
{inputsState.map((input, i) => ( {inputsState.map((input, i) => (
<P8PInput key={i} {...input} formValues={formValues} onChange={handleInputChange} /> <P8PInput key={i} {...input} formValues={formValues} onChange={handleInputChange} />
))} ))}
@ -102,11 +83,7 @@ const P8PDialog = ({
{children} {children}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
{onOk && ( {onOk && <Button onClick={handleOk}>{BUTTONS.OK}</Button>}
<Button disabled={okDisabled} onClick={handleOk}>
{BUTTONS.OK}
</Button>
)}
{onCancel && <Button onClick={handleCancel}>{BUTTONS.CANCEL}</Button>} {onCancel && <Button onClick={handleCancel}>{BUTTONS.CANCEL}</Button>}
{onClose && <Button onClick={handleClose}>{BUTTONS.CLOSE}</Button>} {onClose && <Button onClick={handleClose}>{BUTTONS.CLOSE}</Button>}
</DialogActions> </DialogActions>
@ -121,8 +98,6 @@ P8PDialog.propTypes = {
fullWidth: PropTypes.bool, fullWidth: PropTypes.bool,
inputs: PropTypes.arrayOf(PropTypes.shape(P8P_INPUT)), inputs: PropTypes.arrayOf(PropTypes.shape(P8P_INPUT)),
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
okDisabled: PropTypes.bool,
scrollContent: PropTypes.bool,
onOk: PropTypes.func, onOk: PropTypes.func,
onCancel: PropTypes.func, onCancel: PropTypes.func,
onClose: PropTypes.func, onClose: PropTypes.func,

18
app/panels/clnt_task_board/components/task_form.js
View File

@ -9,11 +9,10 @@
import React, { useState, useCallback } from "react"; //Классы React import React, { useState, useCallback } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты import { Box, Typography, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { TaskFormTabInfo } from "./task_form_tab_info"; //Вкладка основной информации import { TaskFormTabInfo } from "./task_form_tab_info"; //Вкладка основной информации
import { TaskFormTabExecutor } from "./task_form_tab_executor"; //Вкладка информации об исполнителе import { TaskFormTabExecutor } from "./task_form_tab_executor"; //Вкладка информации об исполнителе
import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка информации со свойствами import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка информации со свойствами
import { COMMON_STYLES } from "../styles"; //Общие стили
//--------- //---------
//Константы //Константы
@ -21,8 +20,7 @@ import { COMMON_STYLES } from "../styles"; //Общие стили
//Стили //Стили
const STYLES = { const STYLES = {
CONTAINER: { height: "625px", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column" }, CONTAINER: { margin: "5px 0px", textAlign: "center" }
BOX_TAB: { height: "575px", overflowY: "auto", ...COMMON_STYLES.SCROLL }
}; };
//------------------------------------ //------------------------------------
@ -42,14 +40,7 @@ function CustomTabPanel(props) {
const { children, value, index, ...other } = props; const { children, value, index, ...other } = props;
//Генерация содержимого //Генерация содержимого
return ( return (
<Box <Box role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
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>} {value === index && <Box pt={1}>{children}</Box>}
</Box> </Box>
); );
@ -114,6 +105,9 @@ const TaskForm = ({ task, taskType, editable, docProps, onTaskChange, onEventNex
//Генерация содержимого //Генерация содержимого
return ( return (
<Box sx={STYLES.CONTAINER}> <Box sx={STYLES.CONTAINER}>
<Typography pb={1} variant="h6">
{task.nRn ? `Исправление события${task.nClosed ? " (событые аннулировано)" : ""}` : "Добавление события"}
</Typography>
<Tabs value={tab} onChange={handleTabChange} aria-label="tabs of values"> <Tabs value={tab} onChange={handleTabChange} aria-label="tabs of values">
<Tab label="Событие" {...a11yProps(0)} /> <Tab label="Событие" {...a11yProps(0)} />
<Tab label="Исполнитель" {...a11yProps(1)} /> <Tab label="Исполнитель" {...a11yProps(1)} />

107
app/panels/clnt_task_board/components/task_form_tab_props.js
View File

@ -21,11 +21,6 @@ import { useDictionary } from "../hooks/dict_hooks"; //Состояние отк
//Константы //Константы
//--------- //---------
//Стили
const STYLES = {
BOX_FEW_COLUMNS: { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }
};
//------------------------------------ //------------------------------------
//Вспомогательные функции и компоненты //Вспомогательные функции и компоненты
//------------------------------------ //------------------------------------
@ -106,59 +101,55 @@ const TaskFormTabProps = ({ task, docProps, onPropEdit }) => {
return ( return (
<Box> <Box>
<Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset"> <Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset">
<Box sx={STYLES.BOX_FEW_COLUMNS}> {docProps.map((docProp, index) => {
{docProps.map((docProp, index) => { return docProp.BSHOW_IN_GRID ? (
return docProp.BSHOW_IN_GRID ? ( <TextField
<TextField error={
error={ !validationError(
!validationError( task.docProps[docProp.SFORMATTED_ID],
task.docProps[docProp.SFORMATTED_ID], docProp.NFORMAT,
docProp.NFORMAT, docProp.NNUM_WIDTH,
docProp.NNUM_WIDTH, docProp.NNUM_PRECISION,
docProp.NNUM_PRECISION, docProp.NSTR_WIDTH
docProp.NSTR_WIDTH )
) }
} key={index}
key={index} sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()} id={docProp.SFORMATTED_ID}
id={docProp.SFORMATTED_ID} type={
type={ docProp.NFORMAT < 2
docProp.NFORMAT < 2 ? "string"
? "string" : docProp.NFORMAT === 2
: docProp.NFORMAT === 2 ? docProp.NDATA_SUBTYPE === 0
? docProp.NDATA_SUBTYPE === 0 ? "date"
? "date" : "datetime-local"
: "datetime-local" : "time"
: "time" }
} label={docProp.SNAME}
label={docProp.SNAME} fullWidth
fullWidth value={initPropValue(docProp)}
value={initPropValue(docProp)} variant="standard"
variant="standard" onChange={e => onPropEdit(e.target.id, e.target.value)}
onChange={e => onPropEdit(e.target.id, e.target.value)} inputProps={
inputProps={ (docProp.NFORMAT === 2 && docProp.NDATA_SUBTYPE === 2) || (docProp.NFORMAT === 3 && docProp.NDATA_SUBTYPE === 1)
(docProp.NFORMAT === 2 && docProp.NDATA_SUBTYPE === 2) || (docProp.NFORMAT === 3 && docProp.NDATA_SUBTYPE === 1) ? { step: 1 }
? { step: 1 } : {}
: {} }
} InputProps={
InputProps={ docProp.NENTRY_TYPE > 0 ? getInputProps(() => handleDictOpen(docProp, task.docProps[docProp.SFORMATTED_ID])) : null
docProp.NENTRY_TYPE > 0 }
? getInputProps(() => handleDictOpen(docProp, task.docProps[docProp.SFORMATTED_ID])) InputLabelProps={
: null docProp.NFORMAT < 2
} ? {}
InputLabelProps={ : {
docProp.NFORMAT < 2 shrink: true
? {} }
: { }
shrink: true required={docProp.BREQUIRE}
} disabled={docProp.BREADONLY}
} />
required={docProp.BREQUIRE} ) : null;
disabled={docProp.BREADONLY} })}
/>
) : null;
})}
</Box>
</Box> </Box>
</Box> </Box>
); );

2
app/panels/clnt_task_board/styles.js
View File

@ -29,7 +29,7 @@ export const COMMON_STYLES = {
} }
: {}) : {})
}), }),
BOX_WITH_LEGEND: { border: "1px solid #939393", marginBottom: "1px" }, BOX_WITH_LEGEND: { border: "1px solid #939393" },
BOX_SINGLE_COLUMN: { display: "flex", flexDirection: "column", gap: "10px" }, BOX_SINGLE_COLUMN: { display: "flex", flexDirection: "column", gap: "10px" },
LEGEND: { textAlign: "left" }, LEGEND: { textAlign: "left" },
SELECT_MENU: width => { SELECT_MENU: width => {

64
app/panels/clnt_task_board/task_dialog.js
View File

@ -9,18 +9,29 @@
import React, { useState, useCallback, useContext, useEffect } from "react"; //Классы React import React, { useState, useCallback, useContext, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
import { useClientEvent } from "./hooks/task_dialog_hooks"; //Хук для события import { useClientEvent } from "./hooks/task_dialog_hooks"; //Хук для события
import { useDocsProps } from "./hooks/task_dialog_hooks"; //Хук для получения доп. свойств раздела "События" import { useDocsProps } from "./hooks/task_dialog_hooks"; //Хук для получения доп. свойств раздела "События"
import { TaskForm } from "./components/task_form"; //Форма события import { TaskForm } from "./components/task_form"; //Форма события
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
import { COMMON_STYLES } from "./styles"; //Общие стили
import { hasValue } from "../../core/utils"; //Вспомогательные процедуры и функции import { hasValue } from "../../core/utils"; //Вспомогательные процедуры и функции
import { P8PDialog } from "../../components/p8p_dialog"; //Типовой диалог
//--------- //---------
//Константы //Константы
//--------- //---------
//Стили
const STYLES = {
DIALOG_CONTENT: {
paddingBottom: "0px",
maxHeight: "740px",
minHeight: "740px",
...COMMON_STYLES.SCROLL
}
};
//----------- //-----------
//Тело модуля //Тело модуля
//----------- //-----------
@ -138,24 +149,39 @@ const TaskDialog = ({ taskRn, taskType, editable, onTasksReload, onClose }) => {
return ( return (
<> <>
{!task.init && docProps.loaded && ( {!task.init && docProps.loaded && (
<P8PDialog <Dialog open onClose={onClose ? onClose : null} fullWidth>
title={task.nRn ? `Исправление события${task.nClosed ? " [аннулировано]" : ""}` : "Добавление события"} <DialogContent sx={STYLES.DIALOG_CONTENT}>
fullWidth={true} <TaskForm
onOk={() => (taskRn ? handleUpdateEvent(onClose).then(onTasksReload) : handleInsertTask(onClose).then(onTasksReload))} task={task}
onClose={onClose ? onClose : null} taskType={taskType}
okDisabled={taskRn ? task.updateDisabled || !editable || !docPropsReady : task.insertDisabled || !docPropsReady} editable={!taskRn || editable ? true : false}
scrollContent={false} docProps={docProps.props}
> onTaskChange={handleTaskChange}
<TaskForm onEventNextNumbGet={handleEventNextNumbGet}
task={task} />
taskType={taskType} </DialogContent>
editable={!taskRn || editable ? true : false} {onClose ? (
docProps={docProps.props} <DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
onTaskChange={handleTaskChange} {taskRn ? (
onEventNextNumbGet={handleEventNextNumbGet} <Button
/> onClick={() => handleUpdateEvent(onClose).then(onTasksReload)}
</P8PDialog> disabled={task.updateDisabled || !editable || !docPropsReady}
)} >
Исправить
</Button>
) : (
<Button
onClick={() => handleInsertTask(onClose).then(onTasksReload)}
disabled={task.insertDisabled || !docPropsReady}
>
Добавить
</Button>
)}
<Button onClick={onClose}>Закрыть</Button>
</DialogActions>
) : null}
</Dialog>
)}{" "}
</> </>
); );
}; };