From 5ebb28dbcc9ad898c47329ce506fb1270d1f4738 Mon Sep 17 00:00:00 2001
From: popovspiridon99 <popovspiridon0799@mail.ru>
Date: Wed, 22 Oct 2025 10:45:47 +0900
Subject: [PATCH] Map view grid

---
 client/src/components/map/MapComponent.tsx | 257 ++++++++++-----------
 1 file changed, 128 insertions(+), 129 deletions(-)

diff --git a/client/src/components/map/MapComponent.tsx b/client/src/components/map/MapComponent.tsx
index 1f69a0a..0f8119d 100644
--- a/client/src/components/map/MapComponent.tsx
+++ b/client/src/components/map/MapComponent.tsx
@@ -33,7 +33,7 @@ import GisService from '../../services/GisService'
 import MapMode from './MapMode'
 import { satMapsProviders, schemas } from '../../constants/map'
 import MapPrint from './MapPrint/MapPrint'
-import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown, Tooltip, Drawer, DrawerHeader, DrawerBody, Text, Link } from '@fluentui/react-components'
+import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown, Tooltip, Drawer, DrawerHeader, DrawerBody, Text, Link, List } from '@fluentui/react-components'
 import { IRegion } from '../../interfaces/fuel'
 import { useAppStore } from '../../store/app'
 import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
@@ -604,7 +604,7 @@ const MapComponent = ({
     }, [selectedYear])
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%', height: '100%' }}>
+        <div style={{ display: 'grid', gridTemplateRows: 'auto min-content', position: 'relative', width: '100%', height: '100%' }}>
             <MapPrint id={id} mapElement={mapElement} />
 
             {active &&
@@ -681,13 +681,121 @@ const MapComponent = ({
                 </Portal >
             }
 
+            <div style={{ gridRow: '1 / span 1', display: 'grid', gridTemplateColumns: 'min-content auto', position: 'relative' }}>
+                <div style={{ gridColumn: '1 / span 1', width: 'min-content', height: '100%', position: 'relative', display: 'flex', zIndex: '2' }}>
+                    <Drawer style={{ position: 'absolute', width: '300px', height: '100%', inset: 0, zIndex: 1 }} open={!selectedRegion || (!!selectedRegion && !selectedYear)} type='inline'>
+                        {!!selectedRegion && !selectedYear &&
+                            <DrawerHeader style={{ flexDirection: 'row' }}>
+                                <Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
+                                    if (selectedDistrict) {
+                                        setSelectedDistrict(id, null)
+                                        districtSelect.getFeatures().clear()
+                                        regionsLayer.setOpacity(1)
+                                    } else {
+                                        setSelectedRegion(id, null)
+                                        regionSelect.getFeatures().clear()
 
-            <div id='mapcomponent' style={{ position: 'relative', width: '100%', height: '100%', display: 'flex' }}>
-                <div style={{ maxWidth: '30%', maxHeight: '100%' }}>
-                    {!selectedRegion &&
-                        <Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!selectedRegion} type='inline'>
+                                        if (map) {
+                                            const extent = regionsLayer.getSource()?.getExtent()
+
+                                            if (extent) {
+                                                map.getView().fit(fromExtent(extent), { duration: 100 })
+                                                regionsLayer.setOpacity(1)
+                                            }
+                                        }
+                                    }
+                                }} />
+
+                                {selectedDistrict ?
+                                    <Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
+                                    :
+                                    <Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
+
+                                <Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
+                                    setSelectedYear(id, null)
+                                    setSelectedDistrict(id, null)
+                                    setSelectedRegion(id, null)
+
+                                    if (map) {
+                                        const extent = regionsLayer.getSource()?.getExtent()
+
+                                        if (extent) {
+                                            map.getView().fit(fromExtent(extent), { duration: 100 })
+                                            regionsLayer.setOpacity(1)
+                                        }
+                                    }
+                                }} />
+                            </DrawerHeader>
+                        }
+
+                        {!!selectedRegion && !selectedYear ?
                             <DrawerBody>
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '0' }}>
+                                <div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                                    {selectedDistrict ?
+                                        selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
+                                            <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                                <span>{key}</span>
+                                                <span>{value}</span>
+                                            </div>
+                                        ))
+                                        :
+                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                                            <div>
+                                                {selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
+                                                    <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                                        <span>{key}</span>
+                                                        <span>{value}</span>
+                                                    </div>
+                                                ))}
+                                            </div>
+
+                                            {districtsData && districtsData.map((district: IDistrict) => (
+                                                <Link key={district.id} onClick={() => {
+                                                    setSelectedDistrict(id, district.id)
+                                                    map?.removeInteraction(districtSelect)
+                                                }}
+                                                    onMouseEnter={() => {
+                                                        const feature = getFeatureByEntityId(district.id, districtsLayer)
+
+                                                        if (feature) {
+                                                            districtSelect.getFeatures().push(feature)
+                                                        }
+                                                    }}
+                                                    onMouseLeave={() => {
+                                                        districtSelect.getFeatures().clear()
+                                                    }}
+                                                >{district.name}</Link>
+                                            ))}
+                                        </div>
+                                    }
+
+                                    {selectedDistrict &&
+                                        <Field label="Схема" >
+                                            <Dropdown
+                                                style={{ minWidth: 'auto' }}
+                                                value={selectedYear ? selectedYear.toString() : ""}
+                                                selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
+                                                onOptionSelect={(_ev, data) => {
+                                                    if (data.optionValue) {
+                                                        setSelectedYear(id, Number(data.optionValue));
+                                                    } else {
+                                                        setSelectedYear(id, null);
+                                                    }
+                                                }}
+                                            >
+                                                {schemas.map((el) => (
+                                                    <Option key={el} value={el} text={el}>
+                                                        {el}
+                                                    </Option>
+                                                ))}
+                                            </Dropdown>
+                                        </Field>
+                                    }
+                                </div>
+                            </DrawerBody>
+                            :
+                            <DrawerBody>
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                                     {regionsData && regionsData.map((region: IRegion) => (
                                         <Link key={region.id} onClick={() => {
                                             setSelectedRegion(id, region.id)
@@ -707,117 +815,21 @@ const MapComponent = ({
                                     ))}
                                 </div>
                             </DrawerBody>
-                        </Drawer>}
+                        }
 
-                    <Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!!selectedRegion && !selectedYear} type='inline'>
-                        <DrawerHeader style={{ flexDirection: 'row' }}>
-                            <Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
-                                if (selectedDistrict) {
-                                    setSelectedDistrict(id, null)
-                                    districtSelect.getFeatures().clear()
-                                    regionsLayer.setOpacity(1)
-                                } else {
-                                    setSelectedRegion(id, null)
-                                    regionSelect.getFeatures().clear()
-
-                                    if (map) {
-                                        const extent = regionsLayer.getSource()?.getExtent()
-
-                                        if (extent) {
-                                            map.getView().fit(fromExtent(extent), { duration: 100 })
-                                            regionsLayer.setOpacity(1)
-                                        }
-                                    }
-                                }
-                            }} />
-
-                            {selectedDistrict ?
-                                <Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
-                                :
-                                <Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
-
-                            <Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
-                                setSelectedYear(id, null)
-                                setSelectedDistrict(id, null)
-                                setSelectedRegion(id, null)
-
-                                if (map) {
-                                    const extent = regionsLayer.getSource()?.getExtent()
-
-                                    if (extent) {
-                                        map.getView().fit(fromExtent(extent), { duration: 100 })
-                                        regionsLayer.setOpacity(1)
-                                    }
-                                }
-                            }} />
-                        </DrawerHeader>
-
-                        <DrawerBody>
-                            <div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxHeight: '0' }}>
-                                {selectedDistrict ?
-                                    selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
-                                        <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                            <span>{key}</span>
-                                            <span>{value}</span>
-                                        </div>
-                                    ))
-                                    :
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                        <div>
-                                            {selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
-                                                <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                                    <span>{key}</span>
-                                                    <span>{value}</span>
-                                                </div>
-                                            ))}
-                                        </div>
-
-                                        {districtsData && districtsData.map((district: IDistrict) => (
-                                            <Link key={district.id} onClick={() => {
-                                                setSelectedDistrict(id, district.id)
-                                                map?.removeInteraction(districtSelect)
-                                            }}
-                                                onMouseEnter={() => {
-                                                    const feature = getFeatureByEntityId(district.id, districtsLayer)
-
-                                                    if (feature) {
-                                                        districtSelect.getFeatures().push(feature)
-                                                    }
-                                                }}
-                                                onMouseLeave={() => {
-                                                    districtSelect.getFeatures().clear()
-                                                }}
-                                            >{district.name}</Link>
-                                        ))}
-                                    </div>
-                                }
-
-                                {selectedDistrict &&
-                                    <Field label="Схема" >
-                                        <Dropdown
-                                            style={{ minWidth: 'auto' }}
-                                            value={selectedYear ? selectedYear.toString() : ""}
-                                            selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
-                                            onOptionSelect={(_ev, data) => {
-                                                if (data.optionValue) {
-                                                    setSelectedYear(id, Number(data.optionValue));
-                                                } else {
-                                                    setSelectedYear(id, null);
-                                                }
-                                            }}
-                                        >
-                                            {schemas.map((el) => (
-                                                <Option key={el} value={el} text={el}>
-                                                    {el}
-                                                </Option>
-                                            ))}
-                                        </Dropdown>
-                                    </Field>
-                                }
-                            </div>
-                        </DrawerBody>
                     </Drawer>
+                </div>
 
+                <div ref={mapElement} id={id} key={id} style={{ gridColumn: '2 / span 1', position: 'relative', width: '100%', height: '100%', maxHeight: '100%', zIndex: '1', filter: colorScheme === 'dark' ? 'invert(100%) hue-rotate(180deg)' : 'unset' }} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
+                    <div>
+                        {statusText && active && !selectedYear &&
+                            <Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
+                                <div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
+                                    {/* {statusText} */}
+                                </div>
+                            </Tooltip>
+                        }
+                    </div>
                 </div>
 
                 <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
@@ -864,21 +876,8 @@ const MapComponent = ({
                         </div>
                     </div>
                 </div>
-
-                <div id={id} key={id} style={{ position: 'relative', width: '100%', height: '100%', maxHeight: '100%', filter: colorScheme === 'dark' ? 'invert(100%) hue-rotate(180deg)' : 'unset' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
-                    <div>
-                        {statusText && active && !selectedYear &&
-                            <Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
-                                <div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
-                                    {/* {statusText} */}
-                                </div>
-                            </Tooltip>
-                        }
-                    </div>
-                </div>
             </div>
 
-
             {(linesValidating || figuresValidating) && (
                 <div
                     style={{
@@ -895,7 +894,7 @@ const MapComponent = ({
                 </div>
             )}
 
-            <div style={{ display: 'flex', bottom: '0', width: '100%' }}>
+            <div style={{ gridRow: '2 / span 1', display: 'flex', bottom: '0', width: '100%' }}>
                 <MapStatusbar
                     map_id={id}
                 />