update MapComponent + ObjectParameters

client/src/components/map/MapComponent.tsx

@@ -68,11 +68,11 @@ const MapComponent = ({
         { title: 'Неразмещенные', value: 'unplaced', view: <></> },
         { title: 'Другие', value: 'other', view: <></> },
     ]
-    const paramsPane: ITabsPane[] = [
+    // const paramsPane: ITabsPane[] = [
-        { title: 'История изменений', value: 'history', view: <></> },
+    //     { title: 'История изменений', value: 'history', view: <></> },
-        { title: 'Параметры', value: 'parameters', view: <ObjectParameters map_id={id} /> },
+    //     { title: 'Параметры', value: 'parameters', view: <ObjectParameters map_id={id} /> },
-        { title: 'Вычисляемые', value: 'calculated', view: <></> }
+    //     { title: 'Вычисляемые', value: 'calculated', view: <></> }
-    ]
+    // ]
 
     // Map
     const mapElement = useRef<HTMLDivElement | null>(null)
@@ -519,7 +519,8 @@ const MapComponent = ({
                                 <Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 1 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
                                     <TabsPane defaultTab='objects' tabs={objectsPane} />
                                     <Divider />
-                                    <TabsPane defaultTab='parameters' tabs={paramsPane} />
+                                    <ObjectParameters map_id={id} />
+                                    {/* <TabsPane defaultTab='parameters' tabs={paramsPane} /> */}
                                 </Drawer>
 
                                 {!!selectedRegion && !!selectedDistrict && !!selectedYear &&

client/src/components/map/ObjectParameters/ObjectParameters.tsx

@@ -4,7 +4,8 @@ import useSWR from 'swr';
 import { BASE_URL } from '../../../constants';
 import { fetcher } from '../../../http/axiosInstance';
 import { useObjectsStore } from '../../../store/objects';
-import { Spinner, Table, TableBody, TableHeader, TableHeaderCell, TableRow } from '@fluentui/react-components';
+import { Spinner, Tab, Table, TableBody, TableHeader, TableHeaderCell, TableRow, TabList, Text } from '@fluentui/react-components';
+import { useState } from 'react';
 
 const ObjectParameters = ({
     map_id
@@ -23,6 +24,112 @@ const ObjectParameters = ({
         }
     )
 
+    const [selectedTab, setSelectedTab] = useState<string | unknown>('parameters')
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            maxHeight: '50%',
+        }}>
+            <div style={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                maxWidth: '100%',
+                overflowX: 'auto',
+                minHeight: 'min-content',
+                borderBottom: '1px solid var(--colorNeutralShadowKey)'
+            }}>
+                <TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
+                    <Tab key={'history'} value={'history'}>
+                        <Text size={200}>{'История изменений'}</Text>
+                    </Tab>
+
+                    <Tab key={'parameters'} value={'parameters'}>
+                        <Text size={200}>{'Параметры'}</Text>
+                    </Tab>
+
+                    <Tab key={'calculated'} value={'calculated'}>
+                        <Text size={200}>{'Вычисляемые'}</Text>
+                    </Tab>
+                </TabList>
+            </div>
+
+
+            <div style={{
+                display: 'flex',
+                overflow: 'auto',
+                position: 'relative'
+            }}>
+                {(valuesValidating) && (
+                    <div
+                        style={{
+                            position: "absolute",
+                            inset: 0,
+                            backgroundColor: "rgba(255, 255, 255, 0.6)",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            zIndex: 9999,
+                        }}
+                    >
+                        <Spinner size="large" label="Загрузка..." />
+                    </div>
+                )}
+
+                <div style={{ display: selectedTab !== 'history' ? 'none' : 'initial' }}>
+
+                </div>
+
+                <div style={{ display: selectedTab !== 'parameters' ? 'none' : 'initial' }}>
+                    <Table size='extra-small'>
+                        <TableHeader>
+                            <TableRow appearance='neutral'>
+                                <TableHeaderCell>Параметр</TableHeaderCell>
+
+                                <TableHeaderCell>Значение</TableHeaderCell>
+                            </TableRow>
+                        </TableHeader>
+
+                        <TableBody>
+                            {Array.isArray(valuesData) &&
+                                valuesData.filter((param: IObjectParam) => param.format !== 'calculate').map((param: IObjectParam) => (
+                                    <>
+                                        <ObjectParameter map_id={map_id} key={param.id_param} param={param} />
+                                    </>
+                                ))
+                            }
+                        </TableBody>
+                    </Table>
+                </div>
+
+                <div style={{ display: selectedTab !== 'calculated' ? 'none' : 'initial' }}>
+                    <Table size='extra-small'>
+                        <TableHeader>
+                            <TableRow appearance='neutral'>
+                                <TableHeaderCell>Параметр</TableHeaderCell>
+
+                                <TableHeaderCell>Значение</TableHeaderCell>
+                            </TableRow>
+                        </TableHeader>
+
+                        <TableBody>
+                            {Array.isArray(valuesData) &&
+                                valuesData.filter((param: IObjectParam) => param.format === 'calculate').map((param: IObjectParam) => (
+                                    <>
+                                        <ObjectParameter map_id={map_id} key={param.id_param} param={param} />
+                                    </>
+                                ))
+                            }
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
+        </div>
+    )
+
     return (
         <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column', position: 'relative' }}>
             {(valuesValidating) && (