From 4f0a38501c3c6b712a9852cdc36b1014ae3bb636 Mon Sep 17 00:00:00 2001 From: rquazi Date: Fri, 10 May 2024 10:00:09 +0300 Subject: [PATCH 1/5] create new operationalization modal --- .../modules/operationalize-modal/index.tsx | 0 .../operationalize-modal.styles.tsx | 38 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 mscr-ui/src/modules/operationalize-modal/index.tsx create mode 100644 mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx 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..e69de29bb 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..153bd4ba2 --- /dev/null +++ b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx @@ -0,0 +1,38 @@ +import { useRouter } from 'next/router'; +import { useCallback, useState } from 'react'; +import { Modal } from 'suomifi-ui-components'; + +interface OperationalizeProps { + sourceSchemaPid?: string; + targetSchemaPid?: string; + crosswalkPid?: string; +} +export default function OperationalizeModal({ + sourceSchemaPid, + targetSchemaPid, + crosswalkPid, +}: OperationalizeProps) { + const router = useRouter(); + const [fileData, setFileData] = useState(); + const [visible, setVisible] = useState(false); + + const handleOpen = () => { + setVisible(true); + }; + + const handleClose = useCallback(() => { + setVisible(false); + setFileData(null); + }, []); + + return ( + <> + handleClose()} + children={undefined} + > + + ); +} From b26b9275015b0bbcbafd0a519dce5879e7ffc88b Mon Sep 17 00:00:00 2001 From: rquazi Date: Fri, 10 May 2024 15:05:41 +0300 Subject: [PATCH 2/5] adding the text fields to show fake transformation --- .../schema-and-crosswalk-actionmenu/index.tsx | 3 + .../crosswalk-editor.styles.tsx | 8 ++ .../src/modules/crosswalk-editor/index.tsx | 136 +++++++++++------- .../modules/operationalize-modal/index.tsx | 105 ++++++++++++++ .../operationalize-modal.styles.tsx | 50 ++----- .../modules/operationalize-modal/testdata.tsx | 109 ++++++++++++++ 6 files changed, 319 insertions(+), 92 deletions(-) create mode 100644 mscr-ui/src/modules/operationalize-modal/testdata.tsx 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 index e69de29bb..243fe831f 100644 --- a/mscr-ui/src/modules/operationalize-modal/index.tsx +++ b/mscr-ui/src/modules/operationalize-modal/index.tsx @@ -0,0 +1,105 @@ +import { useRouter } from 'next/router'; +import { useCallback, useEffect, useState } from 'react'; +import { + Button, + Modal, + ModalContent, + ModalFooter, + ModalTitle, + Text, +} from 'suomifi-ui-components'; +import { BorderedText, Test } from './operationalize-modal.styles'; +import { Grid } from '@mui/material'; +import { xmlContent } 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 router = useRouter(); + const [fileData, setFileData] = useState(); + const [visible, setVisible] = useState(false); + const [, setIsValid] = useState(false); + const [documentViewArea, setDocumentViewArea] = useState(false); + + const handleOpen = () => { + setVisible(true); + }; + + const handleClose = useCallback(() => { + setVisible(false); + setFileData(null); + setDocumentViewArea(false); + }, []); + + function renderButton() { + return ( + + ); + } + + useEffect(() => {}, [setDocumentViewArea]); + + const handleClick = () => { + setDocumentViewArea(true); + }; + + return ( + <> +
{renderButton()}
+ handleClose()} + > + + {'Test Croswalk'} + + +
+ + + {xmlContent} + +
+ + + + {documentViewArea && ( +
+ + + {xmlContent} + +
+ )} + + + + + + + + + + + + ); +} diff --git a/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx index 153bd4ba2..443841c2f 100644 --- a/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx +++ b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx @@ -1,38 +1,12 @@ -import { useRouter } from 'next/router'; -import { useCallback, useState } from 'react'; -import { Modal } from 'suomifi-ui-components'; - -interface OperationalizeProps { - sourceSchemaPid?: string; - targetSchemaPid?: string; - crosswalkPid?: string; -} -export default function OperationalizeModal({ - sourceSchemaPid, - targetSchemaPid, - crosswalkPid, -}: OperationalizeProps) { - const router = useRouter(); - const [fileData, setFileData] = useState(); - const [visible, setVisible] = useState(false); - - const handleOpen = () => { - setVisible(true); - }; - - const handleClose = useCallback(() => { - setVisible(false); - setFileData(null); - }, []); - - return ( - <> - handleClose()} - children={undefined} - > - - ); -} +import styled from 'styled-components'; +export const Test = styled.div` + margin-left:10px; + margin-top:10px; + `; + + export const BorderedText=styled.div` + margin-left:10px; + margin-top:10px; + border:1px soilid; + + `; \ 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..ce048a648 --- /dev/null +++ b/mscr-ui/src/modules/operationalize-modal/testdata.tsx @@ -0,0 +1,109 @@ + + +export const xmlContent = ` + + 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 + + +`; From b3f1696df3d005b57c980d84e373818cd0cf3951 Mon Sep 17 00:00:00 2001 From: rquazi Date: Fri, 10 May 2024 15:13:34 +0300 Subject: [PATCH 3/5] style fix for the text box --- .../operationalize-modal.styles.tsx | 10 +++------- mscr-ui/src/modules/operationalize-modal/testdata.tsx | 2 -- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx index 443841c2f..71899d2be 100644 --- a/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx +++ b/mscr-ui/src/modules/operationalize-modal/operationalize-modal.styles.tsx @@ -1,12 +1,8 @@ import styled from 'styled-components'; -export const Test = styled.div` - margin-left:10px; - margin-top:10px; - `; export const BorderedText=styled.div` - margin-left:10px; - margin-top:10px; - border:1px soilid; + + 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 index ce048a648..5fdbb1a1d 100644 --- a/mscr-ui/src/modules/operationalize-modal/testdata.tsx +++ b/mscr-ui/src/modules/operationalize-modal/testdata.tsx @@ -1,5 +1,3 @@ - - export const xmlContent = ` 10.5072/example-full From 413c638e6f8a873750ebd7847589b75b9d465906 Mon Sep 17 00:00:00 2001 From: rquazi Date: Mon, 13 May 2024 15:08:05 +0300 Subject: [PATCH 4/5] New test data for target document --- .../modules/operationalize-modal/index.tsx | 11 ++++----- .../modules/operationalize-modal/testdata.tsx | 24 ++++++++++++++++++- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/mscr-ui/src/modules/operationalize-modal/index.tsx b/mscr-ui/src/modules/operationalize-modal/index.tsx index 243fe831f..feaae96af 100644 --- a/mscr-ui/src/modules/operationalize-modal/index.tsx +++ b/mscr-ui/src/modules/operationalize-modal/index.tsx @@ -8,9 +8,9 @@ import { ModalTitle, Text, } from 'suomifi-ui-components'; -import { BorderedText, Test } from './operationalize-modal.styles'; +import { BorderedText } from './operationalize-modal.styles'; import { Grid } from '@mui/material'; -import { xmlContent } from './testdata'; +import { sourceXmlContent,targetXMLContent } from './testdata'; import { ButtonBlock } from '../workspace/workspace.styles'; interface OperationalizeProps { @@ -23,8 +23,6 @@ export default function OperationalizeModal({ targetSchemaPid, crosswalkPid, }: OperationalizeProps) { - const router = useRouter(); - const [fileData, setFileData] = useState(); const [visible, setVisible] = useState(false); const [, setIsValid] = useState(false); const [documentViewArea, setDocumentViewArea] = useState(false); @@ -35,7 +33,6 @@ export default function OperationalizeModal({ const handleClose = useCallback(() => { setVisible(false); - setFileData(null); setDocumentViewArea(false); }, []); @@ -72,7 +69,7 @@ export default function OperationalizeModal({
- {xmlContent} + {sourceXmlContent}
@@ -82,7 +79,7 @@ export default function OperationalizeModal({
- {xmlContent} + {targetXMLContent}
)} diff --git a/mscr-ui/src/modules/operationalize-modal/testdata.tsx b/mscr-ui/src/modules/operationalize-modal/testdata.tsx index 5fdbb1a1d..d96df34c0 100644 --- a/mscr-ui/src/modules/operationalize-modal/testdata.tsx +++ b/mscr-ui/src/modules/operationalize-modal/testdata.tsx @@ -1,4 +1,4 @@ -export const xmlContent = ` +export const sourceXmlContent = ` 10.5072/example-full @@ -105,3 +105,25 @@ XML example of all DataCite Metadata Schema v4.1 properties. `; + +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 + +`; + From 8ee46bef047f643b5d6aca0c761e54b41e6356ce Mon Sep 17 00:00:00 2001 From: rquazi Date: Mon, 13 May 2024 23:58:59 +0300 Subject: [PATCH 5/5] typo fix --- mscr-ui/src/modules/operationalize-modal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mscr-ui/src/modules/operationalize-modal/index.tsx b/mscr-ui/src/modules/operationalize-modal/index.tsx index feaae96af..2b6313e92 100644 --- a/mscr-ui/src/modules/operationalize-modal/index.tsx +++ b/mscr-ui/src/modules/operationalize-modal/index.tsx @@ -63,7 +63,7 @@ export default function OperationalizeModal({ onEscKeyDown={() => handleClose()} > - {'Test Croswalk'} + {'Test Crosswalk'}