feat: Add service_name for article list

src/components/ui/MediaView.tsx

@@ -21,6 +21,7 @@ export function MediaView({ media }: Readonly<{ media?: MediaData }>) {
         display: "flex",
         flexGrow: 1,
         justifyContent: "center",
+        margin: "0 auto",
       }}
     >
       {media?.media_type === 1 && (

src/pages/article/list.tsx

@@ -18,7 +18,7 @@ export const ArticleList = observer(() => {
 
   const { dataGridProps } = useDataGrid({
     resource: "article",
-    ...META_LANGUAGE(language)
+    ...META_LANGUAGE(language),
   });
 
   const columns = React.useMemo<GridColDef[]>(
@@ -33,7 +33,7 @@ export const ArticleList = observer(() => {
         headerAlign: "left",
       },
       {
-        field: "heading",
+        field: "service_name",
         headerName: "Заголовок",
         type: "string",
         minWidth: 300,
@@ -43,6 +43,16 @@ export const ArticleList = observer(() => {
         flex: 1,
       },
       // {
+      //   field: "service_name",
+      //   headerName: "Сервисное название (тест)",
+      //   type: "string",
+      //   minWidth: 300,
+      //   display: "flex",
+      //   align: "left",
+      //   headerAlign: "left",
+      //   flex: 1,
+      // },
+      // {
       //   field: 'body',
       //   headerName: 'Контент',
       //   type: 'string',
@@ -66,10 +76,7 @@ export const ArticleList = observer(() => {
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton 
+              <DeleteButton hideText recordItemId={row.id} />
-                hideText 
-                recordItemId={row.id}
-              />
             </>
           );
         },

src/pages/media/list.tsx

@@ -1,88 +1,107 @@
-import {type GridColDef} from '@mui/x-data-grid'
+import { type GridColDef } from "@mui/x-data-grid";
-import {CustomDataGrid} from '../../components/CustomDataGrid'
+import { CustomDataGrid } from "../../components/CustomDataGrid";
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
+import {
-import React from 'react'
+  DeleteButton,
-import {MEDIA_TYPES} from '../../lib/constants'
+  EditButton,
-import { observer } from "mobx-react-lite"
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
+import { MEDIA_TYPES } from "../../lib/constants";
+import { observer } from "mobx-react-lite";
 
-import {localeText} from '../../locales/ru/localeText'
+import { localeText } from "../../locales/ru/localeText";
-import { languageStore, META_LANGUAGE } from '@stores'
+import { languageStore, META_LANGUAGE } from "@stores";
 
 export const MediaList = observer(() => {
   const { language } = languageStore;
-  const {dataGridProps} = useDataGrid({
+  const { dataGridProps } = useDataGrid({
-    ...META_LANGUAGE(language)
+    ...META_LANGUAGE(language),
-  })
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
+        field: "id",
-        headerName: 'ID',
+        headerName: "ID",
-        type: 'number',
+        type: "number",
         minWidth: 350,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'filename',
+        field: "filename",
-        headerName: 'Название файла',
+        headerName: "Название файла",
-        type: 'string',
+        type: "string",
         minWidth: 250,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'media_name',
+        field: "media_name",
-        headerName: 'Название',
+        headerName: "Название",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        display: 'flex',
+        flex: 1,
-        align: 'left',
+        display: "flex",
-        headerAlign: 'left',
+        align: "left",
+        headerAlign: "left",
       },
       {
-        field: 'media_type',
+        field: "media_type",
-        headerName: 'Тип',
+        headerName: "Тип",
-        type: 'string',
+        type: "string",
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
         flex: 1,
         renderCell: (params) => {
-          const value = params.row.media_type
+          const value = params.row.media_type;
-          return MEDIA_TYPES.find((type) => type.value === value)?.label || value
+          return (
+            MEDIA_TYPES.find((type) => type.value === value)?.label || value
+          );
         },
       },
       {
-        field: 'actions',
+        field: "actions",
-        headerName: 'Действия',
+        headerName: "Действия",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'right',
+        align: "right",
-        headerAlign: 'center',
+        headerAlign: "center",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
+    []
-  )
+  );
 
   return (
     <List>
-      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} languageEnabled/>
+      <CustomDataGrid
+        {...dataGridProps}
+        columns={columns}
+        localeText={localeText}
+        getRowId={(row: any) => row.id}
+        languageEnabled
+      />
     </List>
-  )
+  );
 });

src/pages/route/list.tsx

@@ -60,6 +60,7 @@ export const RouteList = observer(() => {
         minWidth: 150,
         display: "flex",
         align: "left",
+        flex: 1,
         headerAlign: "left",
       },
       {
@@ -68,6 +69,7 @@ export const RouteList = observer(() => {
         type: "string",
         minWidth: 120,
         display: "flex",
+
         align: "left",
         headerAlign: "left",
       },

src/pages/sight/edit.tsx

@@ -782,21 +782,9 @@ export const SightEdit = observer(() => {
                 bgcolor: "#806c59",
               }}
             >
-              <Box
+              {leftArticleData?.media && (
-                sx={{
+                <MediaView media={leftArticleData.media} />
-                  mb: 2,
+              )}
-                  margin: "0 auto 40px auto",
-                  display: "flex",
-                  flexDirection: "column",
-                  maxHeight: "300px",
-
-                  gap: 2,
-                }}
-              >
-                {leftArticleData?.media && (
-                  <MediaView media={leftArticleData.media} />
-                )}
-              </Box>
 
               {/* Заголовок статьи */}
               <Typography
@@ -1093,7 +1081,8 @@ export const SightEdit = observer(() => {
                 width: "30%",
 
                 top: "178px",
-                minHeight: "600px",
+                maxHeight: "600px",
+                overflowY: "auto",
                 right: 50,
                 zIndex: 1000,
                 borderRadius: 2,
@@ -1246,14 +1235,56 @@ export const SightEdit = observer(() => {
                           {creatingArticleHeading}
                         </Typography>
 
-                        <Typography
+                        <Box
-                          variant="body1"
+                          sx={{
-                          gutterBottom
+                            mt: -6,
-                          px={2}
+                            p: 2,
-                          sx={{ color: "text.primary" }}
+                            "& img": {
+                              maxWidth: "100%",
+                              height: "auto",
+                              borderRadius: 1,
+                            },
+                            "& h1, & h2, & h3, & h4, & h5, & h6": {
+                              color: "primary.main",
+                              mt: 2,
+                              mb: 1,
+                            },
+                            "& p": {
+                              mb: 2,
+                              color: (theme) =>
+                                theme.palette.mode === "dark"
+                                  ? "grey.300"
+                                  : "grey.800",
+                            },
+                            "& a": {
+                              color: "primary.main",
+                              textDecoration: "none",
+                              "&:hover": {
+                                textDecoration: "underline",
+                              },
+                            },
+                            "& blockquote": {
+                              borderLeft: "4px solid",
+                              borderColor: "primary.main",
+                              pl: 2,
+                              my: 2,
+                              color: "text.secondary",
+                            },
+                            "& code": {
+                              bgcolor: (theme) =>
+                                theme.palette.mode === "dark"
+                                  ? "grey.900"
+                                  : "grey.100",
+                              p: 0.5,
+                              borderRadius: 0.5,
+                              color: "primary.main",
+                            },
+                          }}
                         >
-                          {creatingArticleBody}
+                          <ReactMarkdown rehypePlugins={[rehypeRaw]}>
-                        </Typography>
+                            {creatingArticleBody}
+                          </ReactMarkdown>
+                        </Box>
                       </Box>
                     )}
                     <Box sx={{ mt: "auto" }}>