ЦИТК-823 ч.2

app/panels/rrp_conf_editor/iud_form_dialog.js

@@ -7,40 +7,123 @@
 //Подключение библиотек
 //---------------------
 
-import React from "react"; //Классы React
+import React, { useState, useContext } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
 import { Dialog, DialogTitle, IconButton, Icon, DialogContent, Typography, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
 //import { MessagingСtx } from "../../context/messaging";
-import { IUDFormTextField } from "./iud_form_text_filed"; //Кастомные строки ввода
+import { ApplicationСtx } from "../../context/application"; //Контекст приложения
-import { STATUSES, STYLES } from "./layouts"; //Статусы и стили диалогового окна
+import { IUDFormTextField } from "./iud_form_text_field"; //Кастомные строки ввода
+import { STATUSES } from "./layouts"; //Статусы и стили диалогового окна
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    DIALOG_ACTIONS: { justifyContent: "center" },
+    CLOSE_BUTTON: {
+        position: "absolute",
+        right: 8,
+        top: 8,
+        color: theme => theme.palette.grey[500]
+    }
+};
+
+//Выбор подразделения
+// const selectInsDepartment = (showDictionary, callBack) => {
+//     showDictionary({
+//         unitCode: "INS_DEPARTMENT",
+//         callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null))
+//     });
+// };
+
+//Выбор строки
+const selectRow = (showDictionary, callBack) => {
+    showDictionary({
+        unitCode: "RRPRow",
+        callBack: res =>
+            res.success === true
+                ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION)
+                : callBack(null)
+    });
+    // pOnlineShowDictionary({
+    //     unitCode: "RRPRow",
+    //     callBack: res =>
+    //         res.success === true
+    //             ? setFormData(pv => ({
+    //                   ...pv,
+    //                   rowCode: res.outParameters.out_CODE,
+    //                   rowVCode: res.outParameters.out_RRPVERSION_CODE,
+    //                   rowVRn: res.outParameters.out_RRPVERSION
+    //               }))
+    //             : null
+    // });
+};
+
+//Выбор графы
+const selectColumn = (showDictionary, callBack) => {
+    showDictionary({
+        unitCode: "RRPColumn",
+        callBack: res =>
+            res.success === true
+                ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION)
+                : callBack(null)
+    });
+    // pOnlineShowDictionary({
+    //     unitCode: "RRPColumn",
+    //     callBack: res =>
+    //         res.success === true
+    //             ? setFormData(pv => ({
+    //                   ...pv,
+    //                   colCode: res.outParameters.out_CODE,
+    //                   colVCode: res.outParameters.out_RRPVERSION_CODE,
+    //                   colVRn: res.outParameters.out_RRPVERSION
+    //               }))
+    //             : null
+    // });
+};
 
 //---------------
 //Тело компонента
 //---------------
 
-const IUDFormDialog = props => {
+const IUDFormDialog = ({ initial, onOk, onCancel }) => {
     //Свойства компонента
-    const {
+    // const {
-        formOpen,
+    //     formOpen,
-        closeForm,
+    //     closeForm,
-        curStatus,
+    //     curStatus,
-        curCode,
+    //     curCode,
-        curName,
+    //     curName,
-        curColCode,
+    //     curColCode,
-        curRowCode,
+    //     curRowCode,
-        btnOkClick,
+    //     btnOkClick,
-        codeOnChange,
+    //     codeOnChange,
-        nameOnChange,
+    //     nameOnChange,
-        dictColumnClick,
+    //     dictColumnClick,
-        dictRowClick
+    //     dictRowClick
-    } = props;
+
+    // } = props;
+
+    //Собственное состояние
+    const [formData, setFormData] = useState({ ...initial });
 
     //Подключение к контексту сообщений
     //const { showMsgWarn } = useContext(MessagingСtx);
 
+    //Подключение к контексту приложения
+    const { pOnlineShowDictionary } = useContext(ApplicationСtx);
+
+    //При закрытии диалога без изменений
+    const handleCancel = () => (onCancel ? onCancel() : null);
+
+    //При закрытии диалога с изменениями
+    const handleOK = () => (onOk ? onOk(formData) : null);
+
     //Формирование заголовка диалогового окна
     const formTitle = () => {
-        switch (curStatus) {
+        switch (formData.status) {
             case STATUSES.CREATE:
                 return "Добавление раздела";
             case STATUSES.EDIT:
@@ -59,7 +142,7 @@ const IUDFormDialog = props => {
     //Отрисовка диалогового окна
     const renderSwitch = () => {
         var btnText = "";
-        switch (curStatus) {
+        switch (formData.status) {
             case STATUSES.CREATE:
             case STATUSES.COLUMNROW_CREATE:
                 btnText = "Добавить";
@@ -73,52 +156,43 @@ const IUDFormDialog = props => {
                 btnText = "Удалить";
                 break;
         }
-        return <Button onClick={btnOkClick}>{btnText}</Button>;
+        return <Button onClick={handleOK}>{btnText}</Button>;
     };
 
     return (
-        <Dialog open={formOpen} onClose={closeForm}>
+        <Dialog open onClose={handleCancel}>
             <DialogTitle>{formTitle()}</DialogTitle>
-            <IconButton
+            <IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
-                aria-label="close"
-                onClick={closeForm}
-                sx={{
-                    position: "absolute",
-                    right: 8,
-                    top: 8,
-                    color: theme => theme.palette.grey[500]
-                }}
-            >
                 <Icon>close</Icon>
             </IconButton>
             <DialogContent>
-                {curStatus == STATUSES.DELETE || curStatus == STATUSES.COLUMNROW_DELETE ? (
+                {formData.status == STATUSES.DELETE || formData.status == STATUSES.COLUMNROW_DELETE ? (
-                    curStatus == STATUSES.DELETE ? (
+                    formData.status == STATUSES.DELETE ? (
-                        <Typography>Вы хотите удалить раздел {curName}?</Typography>
+                        <Typography>Вы хотите удалить раздел {formData.name}?</Typography>
                     ) : (
-                        <Typography>Вы хотите удалить показатель раздела {curName}?</Typography>
+                        <Typography>Вы хотите удалить показатель раздела {formData.name}?</Typography>
                     )
                 ) : (
                     <div>
-                        {curStatus != STATUSES.COLUMNROW_EDIT ? (
+                        {formData.status != STATUSES.COLUMNROW_EDIT ? (
-                            <IUDFormTextField elementCode="code" elementValue={curCode} labelText="Мнемокод" changeFunc={codeOnChange} />
+                            <IUDFormTextField elementCode="code" elementValue={formData.code} labelText="Мнемокод" onChange={handleOK} />
                         ) : null}
-                        <IUDFormTextField elementCode="name" elementValue={curName} labelText="Наименование" changeFunc={nameOnChange} />
+                        <IUDFormTextField elementCode="name" elementValue={formData.name} labelText="Наименование" onChange={handleOK} />
-                        {curStatus == STATUSES.COLUMNROW_CREATE ? (
+                        {formData.status == STATUSES.COLUMNROW_CREATE ? (
                             <div>
                                 <IUDFormTextField
                                     elementCode="row"
-                                    elementValue={curRowCode}
+                                    elementValue={formData.rowCode}
                                     labelText="Строка"
-                                    changeFunc={dictRowClick}
+                                    onChange={handleOK}
-                                    withDictionary={true}
+                                    dictionary={callBack => selectRow(pOnlineShowDictionary, callBack)}
                                 />
                                 <IUDFormTextField
                                     elementCode="column"
-                                    elementValue={curColCode}
+                                    elementValue={formData.colCode}
                                     labelText="Графа"
-                                    changeFunc={dictColumnClick}
+                                    onChange={handleOK}
-                                    withDictionary={true}
+                                    dictionary={callBack => selectColumn(pOnlineShowDictionary, callBack)}
                                 />
                             </div>
                         ) : null}
@@ -127,7 +201,7 @@ const IUDFormDialog = props => {
             </DialogContent>
             <DialogActions sx={STYLES.PADDING_DIALOG_BUTTONS_RIGHT}>
                 {renderSwitch()}
-                <Button onClick={closeForm}>Отмена</Button>
+                <Button onClick={handleCancel}>Отмена</Button>
             </DialogActions>
         </Dialog>
     );
@@ -135,18 +209,9 @@ const IUDFormDialog = props => {
 
 //Контроль свойств - Диалог
 IUDFormDialog.propTypes = {
-    formOpen: PropTypes.bool.isRequired,
+    initial: PropTypes.object.isRequired,
-    closeForm: PropTypes.func.isRequired,
+    onOk: PropTypes.func,
-    curStatus: PropTypes.oneOf(Object.values(STATUSES).filter(x => typeof x === "number")),
+    onCancel: PropTypes.func
-    curCode: PropTypes.string,
-    curName: PropTypes.string,
-    curColCode: PropTypes.string,
-    curRowCode: PropTypes.string,
-    btnOkClick: PropTypes.func.isRequired,
-    codeOnChange: PropTypes.func.isRequired,
-    nameOnChange: PropTypes.func.isRequired,
-    dictColumnClick: PropTypes.func.isRequired,
-    dictRowClick: PropTypes.func.isRequired
 };
 
 //--------------------

app/panels/rrp_conf_editor/iud_form_text_field.js

@@ -16,42 +16,55 @@ import { STYLES } from "./layouts"; //Стили диалогового окна
 //Тело компонента
 //---------------
 
-const IUDFormTextField = props => {
+const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dictionary, ...other }) => {
-    //Свойства
+    //Значение элемента
-    const { elementCode, elementValue, labelText, changeFunc, withDictionary, ...other } = props;
+    const [value, setValue] = useState(elementValue);
-
-    //Состояние идентификатора элемента
-    const [elementId, setElementId] = useState("");
 
     //Формирование идентификатора элемента
-    const generateId = useCallback(async () => {
+    // const generateId = useCallback(async () => {
-        setElementId(`${elementCode}-input`);
+    //     setElementId(`${elementCode}-input`);
-    }, [elementCode]);
+    // }, [elementCode]);
 
     //При рендере поля ввода
+    // useEffect(() => {
+    //     generateId();
+    // }, [generateId]);
+
+    //При получении нового значения из вне
     useEffect(() => {
-        generateId();
+        setValue(elementValue);
-    }, [generateId]);
+    }, [elementValue]);
+
+    //Выбор значения из словаря
+    const handleDictionaryClick = () =>
+        dictionary ? dictionary(res => (res ? handleChange({ target: { name: elementCode, value: res } }) : null)) : null;
+
+    //Изменение значения элемента
+    const handleChange = e => {
+        setValue(e.target.value);
+        if (onChange) onChange(e.target.name, e.target.value);
+    };
 
     return (
         <Box sx={{ p: 1 }}>
             <FormControl sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
-                <InputLabel htmlFor={elementId}>{labelText}</InputLabel>
+                <InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
                 <Input
-                    id={elementId}
+                    id={elementCode}
-                    value={elementValue ? elementValue : ""}
+                    name={elementCode}
-                    onChange={!withDictionary ? e => changeFunc(e.target.value) : null}
+                    value={value}
-                    aria-describedby={`${elementCode}-helper-text`}
-                    label={labelText}
                     endAdornment={
-                        withDictionary ? (
+                        dictionary ? (
                             <InputAdornment position="end">
-                                <IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
+                                <IconButton aria-label={`${elementCode} select`} onClick={handleDictionaryClick} edge="end">
                                     <Icon>list</Icon>
                                 </IconButton>
                             </InputAdornment>
                         ) : null
                     }
+                    aria-describedby={`${elementCode}-helper-text`}
+                    label={labelText}
+                    onChange={handleChange}
                 />
             </FormControl>
         </Box>
@@ -63,8 +76,8 @@ IUDFormTextField.propTypes = {
     elementCode: PropTypes.string.isRequired,
     elementValue: PropTypes.string,
     labelText: PropTypes.string.isRequired,
-    changeFunc: PropTypes.func.isRequired,
+    onChange: PropTypes.func,
-    withDictionary: PropTypes.bool
+    dictionary: PropTypes.func
 };
 
 //--------------------

app/panels/rrp_conf_editor/layouts.js

@@ -29,6 +29,7 @@ export const STATUSES = { CREATE: 0, EDIT: 1, DELETE: 2, COLUMNROW_CREATE: 3, CO
 //Генерация представления ячейки c данными
 export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => {
     let data = row[columnDef.name];
+    let cellStyle = { display: "flex" };
     columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true
         ? (data = (
               <Stack direction="row">
@@ -41,10 +42,10 @@ export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, d
                   >
                       {row[columnDef.name]}
                   </Link>
-                  <IconButton justifyContent="flex-end" onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
+                  <IconButton onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
                       <Icon>edit</Icon>
                   </IconButton>
-                  <IconButton justifyContent="flex-end" onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
+                  <IconButton onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
                       <Icon>delete</Icon>
                   </IconButton>
               </Stack>

app/panels/rrp_conf_editor/rrp_conf_editor.js

@@ -32,6 +32,8 @@ const RrpConfEditor = () => {
         columnsDef: [],
         groups: [],
         rows: [],
+        fixedHeader: false,
+        fixedColumns: 0,
         reload: false
     };
 
@@ -140,38 +142,6 @@ const RrpConfEditor = () => {
         openForm();
     };
 
-    //Отработка нажатия на словарь граф
-    const dictColumnClick = () => {
-        pOnlineShowDictionary({
-            unitCode: "RRPColumn",
-            callBack: res =>
-                res.success === true
-                    ? setFormData(pv => ({
-                          ...pv,
-                          colCode: res.outParameters.out_CODE,
-                          colVCode: res.outParameters.out_RRPVERSION_CODE,
-                          colVRn: res.outParameters.out_RRPVERSION
-                      }))
-                    : null
-        });
-    };
-
-    //Отработка нажатия на словарь строк
-    const dictRowClick = () => {
-        pOnlineShowDictionary({
-            unitCode: "RRPRow",
-            callBack: res =>
-                res.success === true
-                    ? setFormData(pv => ({
-                          ...pv,
-                          rowCode: res.outParameters.out_CODE,
-                          rowVCode: res.outParameters.out_RRPVERSION_CODE,
-                          rowVRn: res.outParameters.out_RRPVERSION
-                      }))
-                    : null
-        });
-    };
-
     //Нажатие на кнопку подтверждения создания/исправления/удаления на форме
     const formBtnOkClick = () => {
         let formStateProps = {};
@@ -338,6 +308,8 @@ const RrpConfEditor = () => {
                     columnsDef: [...(s.XDATA.XCOLUMNS_DEF || [])],
                     groups: [...(s.XDATA.XGROUPS || [])],
                     rows: [...(s.XDATA.XROWS || [])],
+                    fixedHeader: s.XDATA.XDATA_GRID.fixedHeader,
+                    fixedColumns: s.XDATA.XDATA_GRID.fixedColumns,
                     reload: false
                 });
                 //Ищем загружен ли уже раздел с таким же ид.
@@ -414,25 +386,19 @@ const RrpConfEditor = () => {
             : null;
     }, [formData.colCode, formData.rowCode, formData.sctnCode, formData.sctnName, formData.status, getSctnMrkCodeName]);
 
+    //При изменении фильтра в диалоге
+    const handleFilterOk = filter => {
+        setFormData(filter);
+        setForm(false);
+    };
+
+    //При закрытии диалога фильтра
+    const handleFilterCancel = () => setForm(false);
+
     //Генерация содержимого
     return (
         <Box sx={{ width: "100%" }}>
-            {formOpen ? (
+            {formOpen ? <IUDFormDialog initial={formData} onOk={handleFilterOk} onCancel={handleFilterCancel} /> : null}
-                <IUDFormDialog
-                    formOpen={formOpen}
-                    closeForm={closeForm}
-                    curStatus={formData.status}
-                    curCode={formData.code}
-                    curName={formData.name}
-                    curColCode={formData.colCode}
-                    curRowCode={formData.rowCode}
-                    btnOkClick={formBtnOkClick}
-                    codeOnChange={v => setFormData(pv => ({ ...pv, code: v }))}
-                    nameOnChange={v => setFormData(pv => ({ ...pv, name: v }))}
-                    dictColumnClick={dictColumnClick}
-                    dictRowClick={dictRowClick}
-                />
-            ) : null}
             {rrpDoc.docLoaded ? (
                 <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                     <Stack direction="row">
@@ -445,12 +411,8 @@ const RrpConfEditor = () => {
                                         label={
                                             <Stack direction="row" textAlign="center">
                                                 {s.name}
-                                                <IconButton onClick={() => editSectionClick(s.rn, s.code, s.name)}>
+                                                <Icon onClick={() => editSectionClick(s.rn, s.code, s.name)}>edit</Icon>
-                                                    <Icon>edit</Icon>
+                                                <Icon onClick={() => deleteSectionClick(s.rn, s.code, s.name)}>delete</Icon>
-                                                </IconButton>
-                                                <IconButton onClick={() => deleteSectionClick(s.rn, s.code, s.name)}>
-                                                    <Icon>delete</Icon>
-                                                </IconButton>
                                             </Stack>
                                         }
                                         wrapped
@@ -472,6 +434,8 @@ const RrpConfEditor = () => {
                                         columnsDef={s.columnsDef}
                                         groups={s.groups}
                                         rows={s.rows}
+                                        fixedHeader={s.fixedHeader}
+                                        fixedColumns={s.fixedColumns}
                                         size={P8P_DATA_GRID_SIZE.LARGE}
                                         reloading={s.reload}
                                         dataCellRender={prms =>

app/panels/rrp_conf_editor/section_tab_panel.js

@@ -22,7 +22,7 @@ const SectionTabPanel = props => {
         <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
             {value === index && (
                 <Box sx={{ p: 3 }}>
-                    <Typography>{children}</Typography>
+                    <Typography component={"span"}>{children}</Typography>
                 </Box>
             )}
         </div>