WEB APP: Панель "Редактор настроек РО" - ЦИТК-823 - правки пул-реквеста по примечанию от 10.07.2024

app/panels/rrp_conf_editor/hooks.js

@@ -17,15 +17,18 @@ import { useState, useLayoutEffect } from "react"; //Классы React
 const useWindowResize = () => {
     //Состояние размера рабочей области
     const [size, setSize] = useState([0, 0]);
+
     //При изменении размера
     useLayoutEffect(() => {
-        function updateSize() {
+        const updateSize = () => {
             setSize([document.documentElement.clientWidth, document.documentElement.clientHeight]);
-        }
+        };
         window.addEventListener("resize", updateSize);
         updateSize();
         return () => window.removeEventListener("resize", updateSize);
     }, []);
+
+    //Вернём размеры
     return size;
 };
 

app/panels/rrp_conf_editor/iud_form_text_field.js

@@ -16,7 +16,7 @@ import { Box, FormControl, InputLabel, Input, InputAdornment, IconButton, Icon }
 //---------
 
 //Стили
-export const STYLES = {
+const STYLES = {
     DIALOG_WINDOW_WIDTH: { width: 400 }
 };
 
@@ -24,6 +24,7 @@ export const STYLES = {
 //Тело компонента
 //---------------
 
+//Поле ввода
 const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dictionary, ...other }) => {
     //Значение элемента
     const [value, setValue] = useState(elementValue);
@@ -45,7 +46,7 @@ const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dict
 
     //Генерация содержимого
     return (
-        <Box sx={{ p: 1 }}>
+        <Box p={1}>
             <FormControl variant="standard" sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
                 <InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
                 <Input

app/panels/rrp_conf_editor/layouts.js

@@ -24,24 +24,19 @@ export const STYLES = {
 //Тело модуля
 //-----------
 
-//Генерация представления ячейки c данными
+//Генерация представления ячейки c данными показателя раздела регламентированного отчета
-export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => {
+export const confSctnMrkCellRender = ({ row, columnDef, onLinkClick, onEditClick, onDeleteClick }) => {
     let data = row[columnDef.name];
     columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true
         ? (data = (
               <Box sx={STYLES.BOX_ROW}>
-                  <Link
+                  <Link sx={STYLES.LINK_STYLE} onClick={() => (onLinkClick ? onLinkClick(row["NRN_" + columnDef.name.substring(5)]) : null)}>
-                      sx={STYLES.LINK_STYLE}
-                      onClick={() => {
-                          showRrpConfSctnMrk(row["NRN_" + columnDef.name.substring(5)]);
-                      }}
-                  >
                       {row[columnDef.name]}
                   </Link>
-                  <IconButton onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
+                  <IconButton onClick={() => (onEditClick ? onEditClick(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name]) : null)}>
                       <Icon>edit</Icon>
                   </IconButton>
-                  <IconButton onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
+                  <IconButton onClick={() => (onDeleteClick ? onDeleteClick(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name]) : null)}>
                       <Icon>delete</Icon>
                   </IconButton>
               </Box>

app/panels/rrp_conf_editor/rrp_conf_editor.js

@@ -17,11 +17,11 @@ import { NavigationCtx } from "../../context/navigation"; //Контекст н
 import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
 import { SectionTabPanel } from "./section_tab_panel"; //Компонент вкладки раздела
 import { IUDFormDialog } from "./iud_form_dialog"; //Диалог добавления/исправления/удаления компонентов настройки регламентированного отчёта
-import { dataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
+import { confSctnMrkCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
 import { STATUSES } from "./iud_form_dialog"; //Статусы диалогового окна
 import { TEXTS } from "../../../app.text"; //Текстовые константы
 import { STYLES as COMMON_STYLES } from "./layouts"; //Общие стили
-import { useWindowResize } from "./hooks";
+import { useWindowResize } from "./hooks"; //Пользовательские хуки
 
 //---------
 //Константы
@@ -35,18 +35,21 @@ const pxPanelHeaderH = 64;
 const pxSectionAddButtonW = 40;
 
 //Стили
-export const STYLES = {
+const STYLES = {
+    CONTAINER: { width: "100%" },
     PANELS_MAIN_COLOR: { backgroundColor: "#1976d2" },
     ICON_WHITE: { color: "white" },
     TABS_BOTTOM_LINE: { borderBottom: 1, borderColor: "divider" },
     TABS_PADDING: { padding: "5px" },
-    TABS_SIZES: { maxHeight: 150 },
+    TABS_SIZES: (width, pxSectionAddButtonW) => ({ maxHeight: 150, maxWidth: width - pxSectionAddButtonW }),
     GRID_PADDING: { paddingTop: 1, paddingBottom: 1 },
-    GRID_SIZES: {
+    GRID_SIZES: (width, height, pxOuterMenuH, pxPanelHeaderH, pxTabsH) => ({
         padding: 0,
-        minWidth: 400,
+        minWidth: width * 0.95,
-        minHeight: 300
+        minHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88,
-    }
+        maxWidth: width * 0.95,
+        maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88
+    })
 };
 
 //-----------
@@ -165,23 +168,45 @@ const RrpConfEditor = () => {
     };
 
     //Отработка нажатия на кнопку добавления показателя раздела
-    const addRRPCONFSCTNMRKClick = (prn, sctnCode, sctnName) => {
+    const addSectionMarkClick = (prn, sctnCode, sctnName) => {
         setFormData({ status: STATUSES.RRPCONFSCTNMRK_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName });
         openForm();
     };
 
     //Отработка нажатия на кнопку исправления показателя раздела
-    const editRRPCONFSCTNMRKClick = (rn, name) => {
+    const editSectionMarkClick = (rn, name) => {
         setFormData({ status: STATUSES.RRPCONFSCTNMRK_EDIT, rn: rn, name: name });
         openForm();
     };
 
     //Отработка нажатия на кнопку удаления показателя раздела
-    const deleteRRPCONFSCTNMRKClick = (rn, name) => {
+    const deleteSectionMarkClick = (rn, name) => {
         setFormData({ status: STATUSES.RRPCONFSCTNMRK_DELETE, rn: rn, name: name });
         openForm();
     };
 
+    //Отображение показателя раздела
+    const showSectionMark = async rn => {
+        const data = await executeStored({
+            stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODES",
+            args: {
+                NRN: rn
+            },
+            tagValueProcessor: () => undefined
+        });
+        if (data) {
+            pOnlineShowUnit({
+                unitCode: "RRPConfig",
+                showMethod: "main_mrk_settings",
+                inputParameters: [
+                    { name: "in_CODE", value: data.SRRPCONF },
+                    { name: "in_SCTN_CODE", value: data.SRRPCONFSCTN },
+                    { name: "in_MRK_CODE", value: data.SRRPCONFSCTNMRK }
+                ]
+            });
+        } else showMsgErr(TEXTS.NO_DATA_FOUND);
+    };
+
     //Формирование разделов
     const a11yProps = index => {
         return {
@@ -269,27 +294,6 @@ const RrpConfEditor = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rrpDoc.reload, rrpDoc.docLoaded, dataGrid.reload, dataGrid.docLoaded, executeStored]);
 
-    //Отбор показателя раздела по ид.
-    const showRrpConfSctnMrk = async rn => {
-        const data = await executeStored({
-            stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODES",
-            args: {
-                NRN: rn
-            }
-        });
-        if (data) {
-            pOnlineShowUnit({
-                unitCode: "RRPConfig",
-                showMethod: "main_mrk_settings",
-                inputParameters: [
-                    { name: "in_CODE", value: data.SRRPCONF },
-                    { name: "in_SCTN_CODE", value: data.SRRPCONFSCTN },
-                    { name: "in_MRK_CODE", value: data.SRRPCONFSCTNMRK }
-                ]
-            });
-        } else showMsgErr(TEXTS.NO_DATA_FOUND);
-    };
-
     //При необходимости обновить данные таблицы
     useEffect(() => {
         loadData();
@@ -319,7 +323,7 @@ const RrpConfEditor = () => {
 
     //Генерация содержимого
     return (
-        <Box sx={{ width: "100%" }}>
+        <Box sx={STYLES.CONTAINER}>
             {formOpen ? <IUDFormDialog initial={formData} onClose={handleDialogClose} onReload={handleDialogReload} /> : null}
             {rrpDoc.docLoaded ? (
                 <Box>
@@ -332,7 +336,7 @@ const RrpConfEditor = () => {
                             scrollButtons={false}
                             visibleScrollbar
                             aria-label="section tab"
-                            sx={{ ...STYLES.TABS_SIZES, maxWidth: width - pxSectionAddButtonW }}
+                            sx={STYLES.TABS_SIZES(width, pxSectionAddButtonW)}
                         >
                             {rrpDoc.sections.map((s, i) => {
                                 return (
@@ -365,18 +369,14 @@ const RrpConfEditor = () => {
                     {rrpDoc.sections.map((s, i) => {
                         return (
                             <SectionTabPanel key={s.rn} value={tabValue} index={i}>
-                                <Button onClick={() => addRRPCONFSCTNMRKClick(s.rn, s.code, s.name)}>Добавить</Button>
+                                <Button onClick={() => addSectionMarkClick(s.rn, s.code, s.name)}>Добавить</Button>
                                 {s.dataLoaded && s.columnsDef.length > 1 ? (
                                     <Box sx={{ ...STYLES.GRID_PADDING, ...COMMON_STYLES.BOX_ROW }}>
                                         <P8PDataGrid
                                             {...P8P_DATA_GRID_CONFIG_PROPS}
                                             containerComponentProps={{
                                                 elevation: 6,
-                                                style: {
+                                                style: STYLES.GRID_SIZES(width, height, pxOuterMenuH, pxPanelHeaderH, pxTabsH)
-                                                    ...STYLES.GRID_SIZES,
-                                                    maxWidth: width * 0.95,
-                                                    maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88
-                                                }
                                             }}
                                             columnsDef={s.columnsDef}
                                             groups={s.groups}
@@ -386,7 +386,12 @@ const RrpConfEditor = () => {
                                             size={P8P_DATA_GRID_SIZE.LARGE}
                                             reloading={s.reload}
                                             dataCellRender={prms =>
-                                                dataCellRender({ ...prms }, showRrpConfSctnMrk, editRRPCONFSCTNMRKClick, deleteRRPCONFSCTNMRKClick)
+                                                confSctnMrkCellRender({
+                                                    ...prms,
+                                                    onLinkClick: showSectionMark,
+                                                    onEditClick: editSectionMarkClick,
+                                                    onDeleteClick: deleteSectionMarkClick
+                                                })
                                             }
                                         />
                                     </Box>

app/panels/rrp_conf_editor/section_tab_panel.js

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