Skip to content

Commit

Permalink
added styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@kslazykv
kslazykv committed Feb 12, 2025
1 parent 81ed877 commit 6cf4cb7
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 123 deletions.
34 changes: 32 additions & 2 deletions src/components/TreeView/TreeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
} from './style';
import Spinner from '../Spinner';
import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
import { Link, useLocation } from 'react-router-dom';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useLibraryContext } from '@procosys/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview';

/**
* @param id Unique identifier across all nodes in the tree (number or string).
Expand Down Expand Up @@ -56,6 +57,29 @@ const TreeView = ({
const [isNodeExpanded, setIsNodeExpanded] = useState(false);
const [executionCount, setExecutionCount] = useState(0);
const { pathname } = useLocation();
const navigate = useNavigate();

const { newJourney } = useLibraryContext();

// useEffect(() => {
// const getBasePath = (pathname: string): string => {
// const segments = pathname.split('/').filter(Boolean);
// if (segments.length < 2) return '';
// return `/${segments[0]}/${segments[1]}`;
// };

// const baseLibraryPath = getBasePath(pathname);

// if (newJourney?.project?.description && newJourney?.title) {
// const updatedPath = `${baseLibraryPath}/Preservation%20journeys/${encodeURIComponent(
// newJourney.project.description
// )}/${encodeURIComponent(newJourney.title)}`;

// if (pathname !== updatedPath) {
// navigate(updatedPath, { replace: true });
// }
// }
// }, [newJourney, pathname, navigate]);

const getNodeChildCountAndCollapse = (
parentNodeId: string | number
Expand Down Expand Up @@ -307,6 +331,7 @@ const TreeView = ({
handleOnClick(node);
}}
isSelected={node.isSelected ? true : false}
title={node.name}
>
{node.name}
</NodeLink>
Expand All @@ -319,7 +344,12 @@ const TreeView = ({
return (
<Link
to={finalPath}
style={{ textDecoration: 'none', color: 'inherit' }}
title={node.name}
style={{
textDecoration: 'none',
color: 'inherit',
width: '100%',
}}
>
{linkContent}
</Link>
Expand Down
3 changes: 3 additions & 0 deletions src/components/TreeView/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { tokens } from '@equinor/eds-tokens';
export const TreeContainer = styled.div`
display: flex;
flex-direction: column;
max-width: 100%;
`;

interface NodeContainerProps {
Expand All @@ -17,6 +18,8 @@ export const NodeContainer = styled.div<NodeContainerProps>`
margin-left: ${(props): string =>
`calc(var(--grid-unit) * ${props.indentMultiplier} - 4px)`};
margin-left: ${(props): string =>
`calc(var(--grid-unit) * ${props.indentMultiplier} - 4px)`};
`;

interface ExpandCollapseIconProps {
Expand Down
83 changes: 46 additions & 37 deletions src/modules/PlantConfig/views/Library/Library.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import React, { useEffect, useReducer, useState } from 'react';
import { Helmet } from 'react-helmet';
//import withAccessControl from '../../../../core/security/withAccessControl';
import LibraryItemDetails from './LibraryItemDetails';
import LibraryTreeview from './LibraryTreeview/LibraryTreeview';
import LibraryTreeview, {
LibraryProvider,
} from './LibraryTreeview/LibraryTreeview';
import { hot } from 'react-hot-loader';

import { Route, Routes } from 'react-router-dom';
Expand Down Expand Up @@ -111,43 +113,50 @@ const Library = (): JSX.Element => {
};

return (
<Container>
{selectedLibraryType && (
<Helmet>
<title>{` - ${selectedLibraryType}`}</title>
</Helmet>
)}
<LibraryTreeview
forceUpdate={forceUpdate}
setSelectedLibraryType={setSelectedLibraryType}
setSelectedLibraryItem={setSelectedLibraryItem}
dirtyLibraryType={dirtyLibraryType}
resetDirtyLibraryType={(): void => setDirtyLibraryType('')}
/>

<Divider />
<Routes>
<Route
path="/"
element={
<LibraryItemContainer
addPaddingRight={
selectedLibraryType !== LibraryType.TAG_FUNCTION
}
>
<LibraryItemDetails
forceUpdate={update}
libraryType={selectedLibraryType}
libraryItem={selectedLibraryItem}
setSelectedLibraryType={setSelectedLibraryType}
setSelectedLibraryItem={setSelectedLibraryItem}
setDirtyLibraryType={setDirtyLibraryType}
/>
</LibraryItemContainer>
}
<LibraryProvider>
<Container>
{selectedLibraryType && (
<Helmet>
<title>{` - ${selectedLibraryType}`}</title>
</Helmet>
)}
<LibraryTreeview
forceUpdate={forceUpdate}
setSelectedLibraryType={setSelectedLibraryType}
setSelectedLibraryItem={setSelectedLibraryItem}
dirtyLibraryType={dirtyLibraryType}
resetDirtyLibraryType={(): void => setDirtyLibraryType('')}
/>
</Routes>
</Container>

<Divider />
<Routes>
<Route
path="/"
element={
<LibraryItemContainer
addPaddingRight={
selectedLibraryType !==
LibraryType.TAG_FUNCTION
}
>
<LibraryItemDetails
forceUpdate={update}
libraryType={selectedLibraryType}
libraryItem={selectedLibraryItem}
setSelectedLibraryType={
setSelectedLibraryType
}
setSelectedLibraryItem={
setSelectedLibraryItem
}
setDirtyLibraryType={setDirtyLibraryType}
/>
</LibraryItemContainer>
}
/>
</Routes>
</Container>
</LibraryProvider>
);
};

Expand Down
1 change: 1 addition & 0 deletions src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export const Container = styled.div`
padding-top: var(--margin-module--top);
padding-right: calc(var(--grid-unit) * 5);
padding-left: calc(var(--grid-unit) * 5);
width: 20vw;
`;
38 changes: 37 additions & 1 deletion src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TreeView, {

import { Container } from './LibraryTreeview.style';
import { LibraryType } from '../Library';
import React from 'react';
import React, { createContext, useContext, useState } from 'react';
import { showSnackbarNotification } from '../../../../../core/services/NotificationService';
import { usePlantConfigContext } from '../../../context/PlantConfigContext';
import {
Expand Down Expand Up @@ -282,3 +282,39 @@ const LibraryTreeview = (props: LibraryTreeviewProps): JSX.Element => {
};

export default LibraryTreeview;

interface LibraryContextType {
newJourney: Journey;

Check failure on line 287 in src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.tsx

View workflow job for this annotation

GitHub Actions / Build 

Cannot find name 'Journey'.
setNewJourney: (journey: Journey) => void;

Check failure on line 288 in src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.tsx

View workflow job for this annotation

GitHub Actions / Build 

Cannot find name 'Journey'.
}

const LibraryContext = createContext<LibraryContextType | undefined>(undefined);

export const LibraryProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const [newJourney, setNewJourney] = useState<Journey>({

Check failure on line 296 in src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.tsx

View workflow job for this annotation

GitHub Actions / Build 

Cannot find name 'Journey'.
id: -1,
title: '',
isVoided: false,
isInUse: false,
steps: [],
rowVersion: '',
});

return (
<LibraryContext.Provider value={{ newJourney, setNewJourney }}>
{children}
</LibraryContext.Provider>
);
};

export const useLibraryContext = (): LibraryContextType => {
const context = useContext(LibraryContext);
if (!context) {
throw new Error(
'useLibraryContext must be used within a LibraryProvider'
);
}
return context;
};
Loading

0 comments on commit 6cf4cb7

Please sign in to comment.