diff --git a/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx b/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx index 8c6e7c92c..13784260b 100644 --- a/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx +++ b/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx @@ -174,6 +174,7 @@ export default function SchemaAndCrosswalkActionMenu({ } }; + useEffect(() => { setIsEditModeActive(isMappingsEditModeActive); }, [isMappingsEditModeActive]); @@ -182,6 +183,8 @@ export default function SchemaAndCrosswalkActionMenu({ dispatch(clearNotification()); }, [dispatch]); + + return ( <> diff --git a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx index 8b2c99a91..3b20e7a97 100644 --- a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx +++ b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx @@ -6,3 +6,11 @@ export const ActionMenuWrapper = styled.div` z-index: 200; position: relative; `; + +export const TestButton = styled.div` + margin-bottom: -40px; + margin-top: 18px; + margin-left: 20px; + z-index: 200; + position: relative; + `; \ No newline at end of file diff --git a/mscr-ui/src/modules/crosswalk-editor/index.tsx b/mscr-ui/src/modules/crosswalk-editor/index.tsx index bd926fc76..ff926181c 100644 --- a/mscr-ui/src/modules/crosswalk-editor/index.tsx +++ b/mscr-ui/src/modules/crosswalk-editor/index.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import TreeItem from '@mui/lab/TreeItem'; -import {useEffect} from 'react'; +import { useEffect } from 'react'; import { + Button, Notification, Button as Sbutton, - Text + Text, } from 'suomifi-ui-components'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; @@ -28,25 +29,27 @@ import { useGetMappingsQuery, useGetCrosswalkWithRevisionsQuery, } from '@app/common/components/crosswalk/crosswalk.slice'; -import { - useGetCrosswalkMappingFunctionsQuery -} from '@app/common/components/crosswalk-functions/crosswalk-functions.slice'; -import {createTheme, Grid, ThemeProvider} from '@mui/material'; +import { useGetCrosswalkMappingFunctionsQuery } from '@app/common/components/crosswalk-functions/crosswalk-functions.slice'; +import { createTheme, Grid, ThemeProvider } from '@mui/material'; import HasPermission from '@app/common/utils/has-permission'; import VersionHistory from '@app/common/components/version-history'; import SchemaInfo from '@app/common/components/schema-info'; -import {useTranslation} from 'next-i18next'; -import {State} from '@app/common/interfaces/state.interface'; +import { useTranslation } from 'next-i18next'; +import { State } from '@app/common/interfaces/state.interface'; import MetadataStub from '@app/modules/form/metadata-form/metadata-stub'; -import {ActionMenuTypes, Type} from '@app/common/interfaces/search.interface'; +import { ActionMenuTypes, Type } from '@app/common/interfaces/search.interface'; import SchemaAndCrosswalkActionMenu from '@app/common/components/schema-and-crosswalk-actionmenu'; -import { ActionMenuWrapper } from '@app/modules/crosswalk-editor/crosswalk-editor.styles'; +import { + ActionMenuWrapper, + TestButton, +} from '@app/modules/crosswalk-editor/crosswalk-editor.styles'; import { setNotification } from '@app/common/components/notifications/notifications.slice'; import { useStoreDispatch } from '@app/store'; +import OperationalizeModal from '../operationalize-modal'; export default function CrosswalkEditor({ - crosswalkId, - }: { + crosswalkId, +}: { crosswalkId: string; }) { const theme = createTheme({ @@ -60,7 +63,7 @@ export default function CrosswalkEditor({ }, }); - const {t} = useTranslation('common'); + const { t } = useTranslation('common'); const dispatch = useStoreDispatch(); const emptyTreeSelection: RenderTree = { @@ -72,15 +75,19 @@ export default function CrosswalkEditor({ properties: undefined, uri: '', children: [], - qname: '' + qname: '', }; // STATE VARIABLES const [sourceSchemaUrn, setSourceSchemaUrn] = React.useState(''); const [targetSchemaUrn, setTargetSchemaUrn] = React.useState(''); - const [selectedSourceNodes, setSelectedSourceNodes] = React.useState([]); - const [selectedTargetNodes, setSelectedTargetNodes] = React.useState([]); + const [selectedSourceNodes, setSelectedSourceNodes] = React.useState< + RenderTree[] + >([]); + const [selectedTargetNodes, setSelectedTargetNodes] = React.useState< + RenderTree[] + >([]); const [patchSourceNodes, setPatchSourceNodes] = React.useState([ emptyTreeSelection, ]); @@ -91,7 +98,9 @@ export default function CrosswalkEditor({ const [nodeMappings, setNodeMappings] = React.useState([]); - const [jointToBeEdited, setJointToBeEdited] = React.useState(undefined); + const [jointToBeEdited, setJointToBeEdited] = React.useState< + CrosswalkConnectionNew | undefined + >(undefined); const [linkingError, setLinkingError] = React.useState(''); const [selectedTab, setSelectedTab] = React.useState(1); @@ -122,16 +131,18 @@ export default function CrosswalkEditor({ const [deleteMapping, deleteMappingResponse] = useDeleteMappingMutation(); const [patchMapping, patchMappingResponse] = usePatchMappingMutation(); - const [sourceTreeSelection, setSourceTreeSelection] = React.useState([]); + const [sourceTreeSelection, setSourceTreeSelection] = React.useState< + string[] + >([]); - const [targetTreeSelection, setTargetTreeSelection] = React.useState([]); + const [targetTreeSelection, setTargetTreeSelection] = React.useState< + string[] + >([]); - const { - data: mappingFunctions, - isLoading: mappingFunctionsIsLoading, - } = useGetCrosswalkMappingFunctionsQuery(''); + const { data: mappingFunctions, isLoading: mappingFunctionsIsLoading } = + useGetCrosswalkMappingFunctionsQuery(''); - const {data: mappingFilters, isLoading: mappingFiltersIsLoading} = + const { data: mappingFilters, isLoading: mappingFiltersIsLoading } = useGetCrosswalkMappingFunctionsQuery('FILTERS'); const { @@ -143,7 +154,10 @@ export default function CrosswalkEditor({ refetch: refetchCrosswalkData, } = useGetCrosswalkWithRevisionsQuery(crosswalkId); - const hasEditRights = HasPermission({actions: ['EDIT_CROSSWALK_MAPPINGS'], owner: getCrosswalkData?.owner}); + const hasEditRights = HasPermission({ + actions: ['EDIT_CROSSWALK_MAPPINGS'], + owner: getCrosswalkData?.owner, + }); const fromTree = (nodes: any) => ( item.pid === patchPid); + const originalMapping: NodeMapping[] = nodeMappings.filter( + (item) => item.pid === patchPid + ); const jointsToBeAdded: CrosswalkConnectionNew[] = []; sourceNodes.forEach((sourceNode) => { @@ -332,7 +347,8 @@ export default function CrosswalkEditor({ target: targetNodes[0], id: patchPid, notes: originalMapping.length > 0 ? originalMapping[0].notes : '', - predicate: originalMapping.length > 0 ? originalMapping[0].predicate : '', + predicate: + originalMapping.length > 0 ? originalMapping[0].predicate : '', isSelected: true, isDraft: true, sourceJsonPath: undefined, @@ -355,7 +371,7 @@ export default function CrosswalkEditor({ function findNodesFromTree( tree: any, itemsToFind: string[], - results: RenderTree[], + results: RenderTree[] ) { tree.forEach((item: RenderTree) => { if (itemsToFind.includes(item.id)) { @@ -372,7 +388,7 @@ export default function CrosswalkEditor({ // Called from accordion const selectFromTreeByNodeMapping = ( node: NodeMapping | undefined, - isSourceTree: boolean, + isSourceTree: boolean ) => { const nodeIds: string[] = []; if (node) { @@ -389,7 +405,7 @@ export default function CrosswalkEditor({ const performCallbackFromAccordionAction = ( joint: NodeMapping, action: string, - value: string, + value: string ) => { if (action === 'remove') { removeJoint(joint); @@ -415,7 +431,7 @@ export default function CrosswalkEditor({ const performCallbackFromSchemaInfo = ( nodeIds: RenderTree[], - isSourceTree: boolean, + isSourceTree: boolean ) => { if (nodeIds.length > 0) { if (isSourceTree) { @@ -432,9 +448,7 @@ export default function CrosswalkEditor({ } }; - const performCallbackFromActionMenu = ( - action: any, - ) => { + const performCallbackFromActionMenu = (action: any) => { if (action === 'edit') { if (isEditModeActive) { dispatch(setNotification('FINISH_EDITING_MAPPINGS')); @@ -449,7 +463,7 @@ export default function CrosswalkEditor({ const performCallbackFromMappingsModal = ( action: any, mappingPayload: any, - patchPid: string, + patchPid: string ) => { if (action === 'closeModal') { setIsJointPatchOperation(false); @@ -457,22 +471,22 @@ export default function CrosswalkEditor({ } if (action === 'addJoint') { setNodeMappingsModalOpen(false); - putMapping({payload: mappingPayload, pid: crosswalkId}); + putMapping({ payload: mappingPayload, pid: crosswalkId }); const sourceIds: string[] = []; const targetIds: string[] = []; mappingPayload.source.forEach((node: { id: string }) => - sourceIds.push(node.id), + sourceIds.push(node.id) ); setSourceTreeSelection(sourceIds); mappingPayload.target.forEach((node: { id: string }) => - targetIds.push(node.id), + targetIds.push(node.id) ); setTargetTreeSelection(targetIds); } if (action === 'save') { setIsJointPatchOperation(false); setNodeMappingsModalOpen(false); - patchMapping({payload: mappingPayload, pid: patchPid}); + patchMapping({ payload: mappingPayload, pid: patchPid }); } }; @@ -483,7 +497,7 @@ export default function CrosswalkEditor({ } function CustomTabPanel(props: TabPanelProps) { - const {children, value, index, ...other} = props; + const { children, value, index, ...other } = props; return (
{value === index && ( - + {children} )} @@ -511,7 +525,7 @@ export default function CrosswalkEditor({ const changeTab = ( event: React.SyntheticEvent | undefined, - newValue: number, + newValue: number ) => { setSelectedTab(newValue); }; @@ -544,7 +558,7 @@ export default function CrosswalkEditor({ <> + + + + + + )}
{/* LEFT COLUMN */} -
+
<>
{/* SOURCE TREE */} @@ -696,11 +722,13 @@ export default function CrosswalkEditor({ {selectedTab === 1 && ( <>
-
-

Mappings

+
+
+

Mappings

+
-
-{/* // TODO: this can be shown when attribute qnames are available for accordion. Those are temporarily replaced with attribute ids. +
+ {/* // TODO: this can be shown when attribute qnames are available for accordion. Those are temporarily replaced with attribute ids. { @@ -714,7 +742,7 @@ export default function CrosswalkEditor({
-

{t('metadata.versions')}

+

{t('metadata.versions')}

@@ -766,7 +794,7 @@ export default function CrosswalkEditor({ <> diff --git a/mscr-ui/src/modules/operationalize-modal/index.tsx b/mscr-ui/src/modules/operationalize-modal/index.tsx new file mode 100644 index 000000000..2b6313e92 --- /dev/null +++ b/mscr-ui/src/modules/operationalize-modal/index.tsx @@ -0,0 +1,102 @@ +import { useRouter } from 'next/router'; +import { useCallback, useEffect, useState } from 'react'; +import { + Button, + Modal, + ModalContent, + ModalFooter, + ModalTitle, + Text, +} from 'suomifi-ui-components'; +import { BorderedText } from './operationalize-modal.styles'; +import { Grid } from '@mui/material'; +import { sourceXmlContent,targetXMLContent } from './testdata'; +import { ButtonBlock } from '../workspace/workspace.styles'; + +interface OperationalizeProps { + sourceSchemaPid?: string; + targetSchemaPid?: string; + crosswalkPid?: string; +} +export default function OperationalizeModal({ + sourceSchemaPid, + targetSchemaPid, + crosswalkPid, +}: OperationalizeProps) { + const [visible, setVisible] = useState(false); + const [, setIsValid] = useState(false); + const [documentViewArea, setDocumentViewArea] = useState(false); + + const handleOpen = () => { + setVisible(true); + }; + + const handleClose = useCallback(() => { + setVisible(false); + setDocumentViewArea(false); + }, []); + + function renderButton() { + return ( + + ); + } + + useEffect(() => {}, [setDocumentViewArea]); + + const handleClick = () => { + setDocumentViewArea(true); + }; + + return ( + <> +
{renderButton()}
+ handleClose()} + > + + {'Test Crosswalk'} + + +
+ + + {sourceXmlContent} + +
+
+ + + {documentViewArea && ( +
+ + + {targetXMLContent} + +
+ )} +
+
+
+ + + + + + +
+ + ); +} diff --git a/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx new file mode 100644 index 000000000..71899d2be --- /dev/null +++ b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + + export const BorderedText=styled.div` + + border:solid; + padding:4px; + + `; \ No newline at end of file diff --git a/mscr-ui/src/modules/operationalize-modal/testdata.tsx b/mscr-ui/src/modules/operationalize-modal/testdata.tsx new file mode 100644 index 000000000..d96df34c0 --- /dev/null +++ b/mscr-ui/src/modules/operationalize-modal/testdata.tsx @@ -0,0 +1,129 @@ +export const sourceXmlContent = ` + + 10.5072/example-full + + + Miller, Elizabeth + Elizabeth + Miller + 0000-0001-5000-0007 + DataCite + + + + Full DataCite XML Example + Demonstration of DataCite Properties. + + DataCite + 2014 + + 000 computer science + + + + Starr, Joan + Joan + Starr + 0000-0002-7285-027X + California Digital Library + + + + 2017-09-13 + + en-US + XML + + + https://schema.datacite.org/meta/kernel-4.1/example/datacite-example-full-v4.1.xml + + + + + https://data.datacite.org/application/citeproc+json/10.5072/example-full + + arXiv:0706.0001 + + + 4 kB + + +application/xml + +4.1 + +CC0 1.0 Universal + + + +XML example of all DataCite Metadata Schema v4.1 properties. + + + + +Atlantic Ocean + +-67.302 +31.233 + + +-71.032 +-68.211 +41.090 +42.893 + + + +41.991 +-71.032 + + +42.893 +-69.622 + + +41.991 +-68.211 + + +41.090 +-69.622 + + +41.991 +-71.032 + + + + + + +National Science Foundation +https://doi.org/10.13039/100000001 +CBET-106 +Full DataCite XML Example + + +`; + +export const targetXMLContent = ` + + https://doi.org/10.5072/example-full + en-US + 2017-09-13 + http://creativecommons.org/publicdomain/zero/1.0/ + Software + XML + https://creativecommons.org/licenses/by-nc/4.0/ + Full DataCite XML Example - Demonstration of DataCite Properties. + XML example of all DataCite Metadata Schema v4.1 properties. + DataCite + Miller, Elizabeth + Starr, Joan + 000 computer science + +`; +