From 60af1cf05f9142b94b6237559cc76185db975277 Mon Sep 17 00:00:00 2001
From: Mikhail Chechnev <mim_@mail.ru>
Date: Thu, 21 Dec 2023 20:34:20 +0300
Subject: [PATCH] =?UTF-8?q?WEB=20APP:=20=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D0=B0=D1=85=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D1=80=D0=B0=D0=B7=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D1=87=D0=B8=D0=BA=D0=B0=20(MUI)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/panels/samples/mui.js     | 93 +++++++++++++++++++----------------
 app/panels/samples/samples.js |  9 ++--
 2 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/app/panels/samples/mui.js b/app/panels/samples/mui.js
index ec2138a..fba0534 100644
--- a/app/panels/samples/mui.js
+++ b/app/panels/samples/mui.js
@@ -22,7 +22,10 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
 const STYLES = {
     CONTAINER: { textAlign: "center", paddingTop: "20px" },
     TITLE: { paddingBottom: "15px" },
-    LIST: { width: "100%", maxWidth: "600px", bgcolor: "background.paper" }
+    GRID_CONTAINER: { maxWidth: "500px" },
+    GRID_TEM: { width: "100%" },
+    LIST_CONTAINER: { marginTop: "10pt", maxHeight: "60vh", overflow: "auto", width: "100%" },
+    LIST: { width: "100%", bgcolor: "background.paper" }
 };
 
 //-----------
@@ -109,48 +112,54 @@ const Mui = ({ title }) => {
             <Typography sx={STYLES.TITLE} variant={"h6"}>
                 {title}
             </Typography>
-            <Grid container spacing={0} direction="column" alignItems="center">
-                <Grid item xs={12}>
-                    <TextField
-                        name="agnAbbr"
-                        label="Мнемокод"
-                        value={agentForm.agnAbbr}
-                        variant="standard"
-                        fullWidth
-                        onChange={handleAgentFormChanged}
-                    />
-                    <TextField
-                        name="agnName"
-                        label="Наименование"
-                        value={agentForm.agnName}
-                        variant="standard"
-                        fullWidth
-                        onChange={handleAgentFormChanged}
-                    />
-                    <Box pt="10px">
-                        <Button onClick={handleAgentInsert} variant="contained" fullWidth>
-                            Добавить контрагента
-                        </Button>
-                    </Box>
-                    <List sx={STYLES.LIST}>
-                        {agents.map(a => (
-                            <ListItem
-                                key={a.NRN}
-                                secondaryAction={
-                                    <IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}>
-                                        <Icon>delete</Icon>
-                                    </IconButton>
-                                }
-                                disablePadding
-                            >
-                                <ListItemButton onClick={() => handleAgnetClick(a.NRN)}>
-                                    <ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} />
-                                </ListItemButton>
-                            </ListItem>
-                        ))}
-                    </List>
+            <Box display="flex" justifyContent="center" alignItems="center">
+                <Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" sx={STYLES.GRID_CONTAINER}>
+                    <Grid item xs={12} sx={STYLES.GRID_TEM}>
+                        <TextField
+                            name="agnAbbr"
+                            label="Мнемокод"
+                            value={agentForm.agnAbbr}
+                            variant="standard"
+                            fullWidth
+                            onChange={handleAgentFormChanged}
+                        />
+                        <TextField
+                            name="agnName"
+                            label="Наименование"
+                            value={agentForm.agnName}
+                            variant="standard"
+                            fullWidth
+                            onChange={handleAgentFormChanged}
+                        />
+                        <Box pt="10px">
+                            <Button onClick={handleAgentInsert} variant="contained" fullWidth>
+                                Добавить контрагента
+                            </Button>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12} sx={STYLES.GRID_TEM}>
+                        <Box sx={STYLES.LIST_CONTAINER}>
+                            <List sx={STYLES.LIST}>
+                                {agents.map(a => (
+                                    <ListItem
+                                        key={a.NRN}
+                                        secondaryAction={
+                                            <IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}>
+                                                <Icon>delete</Icon>
+                                            </IconButton>
+                                        }
+                                        disablePadding
+                                    >
+                                        <ListItemButton onClick={() => handleAgnetClick(a.NRN)}>
+                                            <ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} />
+                                        </ListItemButton>
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Box>
+                    </Grid>
                 </Grid>
-            </Grid>
+            </Box>
         </div>
     );
 };
diff --git a/app/panels/samples/samples.js b/app/panels/samples/samples.js
index 2bcbf44..40c8330 100644
--- a/app/panels/samples/samples.js
+++ b/app/panels/samples/samples.js
@@ -35,6 +35,7 @@ const MODES = {
 
 //Стили
 const STYLES = {
+    ROOT: { height: "calc(100vh - 64px)" },
     CONTAINER: { textAlign: "center", paddingTop: "20px" },
     BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
 };
@@ -46,19 +47,19 @@ const STYLES = {
 //Примеры
 const Samples = () => {
     //Собственное состояние
-    const [mode, setMode] = useState("");
+    const [mode, setMode] = useState("MUI");
 
     //Генерация содержимого
     return (
-        <div>
+        <div style={STYLES.ROOT}>
             {mode ? (
-                <div>
+                <>
                     <Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
                         <Icon>arrow_back_ios</Icon>
                         {BUTTONS.NAVIGATE_BACK}
                     </Fab>
                     {React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
-                </div>
+                </>
             ) : (
                 <div style={STYLES.CONTAINER}>
                     {Object.entries(MODES).map(m => (