|
|
|
@ -1,4 +1,4 @@
|
|
|
|
import { Button } from "antd";
|
|
|
|
import { Button, Checkbox } from "antd";
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
useHasManualEdits,
|
|
|
|
useHasManualEdits,
|
|
|
|
usePointSelection,
|
|
|
|
usePointSelection,
|
|
|
|
@ -10,11 +10,16 @@ import { useMode } from "../../stores/useMode";
|
|
|
|
import { MODES } from "../../config";
|
|
|
|
import { MODES } from "../../config";
|
|
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
import { SelectedLocations } from "./InitialSidebar/SelectedLocations";
|
|
|
|
import { SelectedLocations } from "./InitialSidebar/SelectedLocations";
|
|
|
|
|
|
|
|
import { forwardRef } from "react";
|
|
|
|
|
|
|
|
import { LAYER_IDS } from "../../Map/Layers/constants";
|
|
|
|
|
|
|
|
import { useLayersVisibility } from "../../stores/useLayersVisibility";
|
|
|
|
|
|
|
|
import { Title } from "../../components/Title";
|
|
|
|
|
|
|
|
|
|
|
|
export const Sidebar = ({ isCollapsed }) => {
|
|
|
|
export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
|
|
|
|
const hasManualEdits = useHasManualEdits();
|
|
|
|
const hasManualEdits = useHasManualEdits();
|
|
|
|
const { mode } = useMode();
|
|
|
|
const { mode } = useMode();
|
|
|
|
const { reset: resetSelection } = usePointSelection();
|
|
|
|
const { reset: resetSelection } = usePointSelection();
|
|
|
|
|
|
|
|
const { isVisible, toggleVisibility } = useLayersVisibility();
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
@ -22,12 +27,34 @@ export const Sidebar = ({ isCollapsed }) => {
|
|
|
|
"h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
|
|
|
|
"h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
|
|
|
|
isCollapsed ? "basis-0 p-0 -translate-x-[320px]" : "basis-[320px] p-3"
|
|
|
|
isCollapsed ? "basis-0 p-0 -translate-x-[320px]" : "basis-[320px] p-3"
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
ref={ref}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<Header />
|
|
|
|
<Header />
|
|
|
|
<div className="space-y-5 flex flex-col justify-between flex-1">
|
|
|
|
<div className="space-y-5 flex flex-col justify-between flex-1">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<Filters disabled={hasManualEdits} />
|
|
|
|
<Filters disabled={hasManualEdits} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{mode === MODES.APPROVE_WORKING && (
|
|
|
|
|
|
|
|
<div className="mt-4">
|
|
|
|
|
|
|
|
<Title text="Статусы" />
|
|
|
|
|
|
|
|
<div className="space-y-2">
|
|
|
|
|
|
|
|
<Checkbox
|
|
|
|
|
|
|
|
onChange={() => toggleVisibility(LAYER_IDS.approve)}
|
|
|
|
|
|
|
|
checked={isVisible[LAYER_IDS.approve]}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Согласование-установка
|
|
|
|
|
|
|
|
</Checkbox>
|
|
|
|
|
|
|
|
<Checkbox
|
|
|
|
|
|
|
|
className={"!ml-0"}
|
|
|
|
|
|
|
|
onChange={() => toggleVisibility(LAYER_IDS.working)}
|
|
|
|
|
|
|
|
checked={isVisible[LAYER_IDS.working]}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Работает
|
|
|
|
|
|
|
|
</Checkbox>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
{mode === MODES.INITIAL && hasManualEdits ? (
|
|
|
|
{mode === MODES.INITIAL && hasManualEdits ? (
|
|
|
|
<Button block className={"mt-2"} onClick={resetSelection}>
|
|
|
|
<Button block className={"mt-2"} onClick={resetSelection}>
|
|
|
|
Отменить ручное редактирование
|
|
|
|
Отменить ручное редактирование
|
|
|
|
@ -46,4 +73,4 @@ export const Sidebar = ({ isCollapsed }) => {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
Platon Yasev
3 years ago
