) {
const navigate = useNavigate();
const notify = useNotifications();
const tr = useTranslations();
@@ -46,9 +48,14 @@ export function DeleteProjectDialog({ projectId, message, disabled }: Readonly
}
onClick={() => setIsDialogOpen(true)}
diff --git a/frontend/src/views/Project/InvestmentProject.tsx b/frontend/src/views/Project/InvestmentProject.tsx
index 2514b88c..8c08d14e 100644
--- a/frontend/src/views/Project/InvestmentProject.tsx
+++ b/frontend/src/views/Project/InvestmentProject.tsx
@@ -1,10 +1,10 @@
import { css } from '@emotion/react';
-import { AccountTree, Euro, KeyTwoTone, ListAlt, Map, Undo } from '@mui/icons-material';
-import { Box, Breadcrumbs, Button, Chip, Paper, Tab, Tabs, Typography } from '@mui/material';
-import { useAtomValue } from 'jotai';
+import { AccountTree, Euro, KeyTwoTone, ListAlt, Map } from '@mui/icons-material';
+import { Box, Breadcrumbs, Chip, Paper, Tab, Tabs, Typography } from '@mui/material';
+import { useAtomValue, useSetAtom } from 'jotai';
import VectorSource from 'ol/source/Vector';
import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';
@@ -14,14 +14,22 @@ import { MapWrapper } from '@frontend/components/Map/MapWrapper';
import {
DRAW_LAYER_Z_INDEX,
addFeaturesFromGeoJson,
+ deleteSelectedFeatures,
featuresFromGeoJSON,
+ getGeoJSONFeaturesString,
} from '@frontend/components/Map/mapInteractions';
-import { treMunicipalityGeometry } from '@frontend/components/Map/mapOptions';
+import { mapOptions, treMunicipalityGeometry } from '@frontend/components/Map/mapOptions';
import { getProjectAreaStyle } from '@frontend/components/Map/styles';
-import { useNotifications } from '@frontend/services/notification';
import { asyncUserAtom } from '@frontend/stores/auth';
import { useTranslations } from '@frontend/stores/lang';
-import { getProjectMunicipalityLayer, getProjectObjectsLayer } from '@frontend/stores/map';
+import {
+ featureSelectorAtom,
+ getProjectMunicipalityLayer,
+ getProjectObjectsLayer,
+ mapProjectionAtom,
+ selectionSourceAtom,
+} from '@frontend/stores/map';
+import { projectEditingAtom } from '@frontend/stores/projectView';
import { ProjectRelations } from '@frontend/views/Project/ProjectRelations';
import { ProjectObjectList } from '@frontend/views/ProjectObject/ProjectObjectList';
@@ -32,19 +40,19 @@ import {
ownsProject,
} from '@shared/schema/userPermissions';
-import { DeleteProjectDialog } from './DeleteProjectDialog';
import { InvestmentProjectForm } from './InvestmentProjectForm';
import { ProjectAreaSelectorForm } from './ProjectAreaSelectorForm';
import { ProjectFinances } from './ProjectFinances';
import { ProjectPermissions } from './ProjectPermissions';
+import { ProjectViewWrapper } from './ProjectViewWrapper';
const pageContentStyle = css`
display: grid;
grid-template-columns: minmax(384px, 1fr) minmax(512px, 2fr);
gap: 16px;
- height: 100%;
flex: 1;
overflow: hidden;
+ padding: 0 16px;
`;
const mapContainerStyle = css`
@@ -99,21 +107,23 @@ function getTabs(projectId: string) {
export function InvestmentProject() {
const routeParams = useParams() as { projectId: string };
const [searchParams] = useSearchParams();
- const navigate = useNavigate();
const tabView = searchParams.get('tab') || 'default';
const user = useAtomValue(asyncUserAtom);
+ const setFeatureSelector = useSetAtom(featureSelectorAtom);
+ const selectionSource = useAtomValue(selectionSourceAtom);
+ const mapProjection = useAtomValue(mapProjectionAtom);
+ const editing = useAtomValue(projectEditingAtom);
const projectId = routeParams?.projectId;
const project = trpc.investmentProject.get.useQuery(
{ projectId },
{ enabled: Boolean(projectId), queryKey: ['investmentProject.get', { projectId }] },
);
+
const [coversMunicipality, setCoversMunicipality] = useState(
project.data?.coversMunicipality ?? false,
);
- const [formsEditing, setFormsEditing] = useState(false);
-
const userCanModify = Boolean(
project.data &&
user &&
@@ -125,26 +135,7 @@ export function InvestmentProject() {
);
const tabIndex = tabs.findIndex((tab) => tab.tabView === tabView);
- const [geom, setGeom] = useState(null);
-
const tr = useTranslations();
- const notify = useNotifications();
- const geometryUpdate = trpc.project.updateGeometry.useMutation({
- onSuccess: () => {
- project.refetch();
- notify({
- severity: 'success',
- title: tr('project.notifyGeometryUpdateTitle'),
- duration: 5000,
- });
- },
- onError: () => {
- notify({
- severity: 'error',
- title: tr('project.notifyGeometryUpdateFailedTitle'),
- });
- },
- });
const projectObjects = trpc.projectObject.getByProjectId.useQuery(
{ projectId },
@@ -195,15 +186,18 @@ export function InvestmentProject() {
}
}, [project.data]);
- useEffect(() => {
- setFormsEditing(!projectId);
- }, [projectId]);
-
function mapIsEditable() {
if (coversMunicipality) return false;
return !projectId || userCanModify;
}
+ function handleFormCancel(formRef: React.RefObject<{ onCancel: () => void }>) {
+ if (formRef.current?.onCancel) {
+ formRef.current?.onCancel();
+ addFeaturesFromGeoJson(drawSource, project?.data?.geom ?? null);
+ }
+ }
+
if (projectId && project.isLoading) {
return {tr('loading')};
}
@@ -220,177 +214,161 @@ export function InvestmentProject() {
}
return (
-
-
-
- {project.data ? (
-
- ) : (
-
- )}
-
- {!projectId && (
- }
- variant="contained"
- sx={{ mt: 2 }}
- onClick={() => navigate(-1)}
- >
- {tr('cancel')}
-
- )}
-
-
-
-
- {
- addFeaturesFromGeoJson(drawSource, project?.data?.geom ?? null);
- }}
- />
- {project.data && (
-
- )}
-
-
-
handleFormCancel(formRef)}
+ renderHeaderContent={() => (
+
- {tabs.length > 0 && (
-
- {tabs.map((tab) => (
-
- ))}
-
- )}
+
+ {project.data ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+ renderMainContent={(tabRefs) => (
+
+
+ {
+ return getGeoJSONFeaturesString(
+ drawSource.getFeatures(),
+ mapProjection?.getCode() ?? mapOptions.projection.code,
+ );
+ }}
+ onCancel={() => {
+ addFeaturesFromGeoJson(drawSource, project?.data?.geom ?? null);
+ }}
+ />
+
+
+
+ {tabs.length > 0 && (
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ )}
- {tabView === 'default' && (
-
- {(!projectId || formsEditing) && (
- {
- if (isChecked) {
- setGeom(null);
- }
- setCoversMunicipality(isChecked);
+ {tabView === 'default' && (
+
+ {(!projectId || editing) && (
+ setCoversMunicipality(isChecked)}
+ />
+ )}
+ {
+ setFeatureSelector((prev) => ({
+ features: deleteSelectedFeatures(drawSource, selectionSource),
+ pos: prev.pos,
+ }));
+ addFeaturesFromGeoJson(drawSource, project?.data?.geom ?? null);
+ },
}}
+ drawSource={drawSource}
+ fitExtent="geoJson"
+ vectorLayers={[
+ ...(coversMunicipality ? [municipalityGeometryLayer] : []),
+ projectObjectsLayer,
+ ]}
+ projectObjects={
+ projectObjects.data?.map((obj) => ({
+ ...obj,
+ objectStage: obj.objectStage ?? '',
+ project: {
+ projectId: projectId,
+ projectName: project.data?.projectName ?? '',
+ projectType: 'investmentProject',
+ coversMunicipality: project.data?.coversMunicipality ?? false,
+ },
+ })) ?? []
+ }
+ interactiveLayers={['projectObjects']}
/>
- )}
- {
- if (!project.data || coversMunicipality !== project.data.coversMunicipality) {
- setGeom(features);
- } else {
- geometryUpdate.mutate({ projectId, features });
- }
- },
- }}
- fitExtent="geoJson"
- vectorLayers={[
- ...(coversMunicipality ? [municipalityGeometryLayer] : []),
- projectObjectsLayer,
- ]}
- projectObjects={
- projectObjects.data?.map((obj) => ({
- ...obj,
- objectStage: obj.objectStage ?? '',
- project: {
- projectId: projectId,
- projectName: project.data?.projectName ?? '',
- projectType: 'investmentProject',
- coversMunicipality: project.data?.coversMunicipality ?? false,
- },
- })) ?? []
- }
- interactiveLayers={['projectObjects']}
- />
-
- )}
+
+ )}
- {tabView !== 'default' && (
-
- {tabView === 'talous' && (
-
- )}
- {tabView === 'kohteet' && (
-
- )}
- {tabView === 'sidoshankkeet' && (
-
- )}
- {tabView === 'luvitus' && (
-
- )}
-
- )}
-
-
+