diff --git a/mapping_workbench/frontend/cypress/e2e/activities.feature b/mapping_workbench/frontend/cypress/e2e/activities.feature index 18e057669..78350ec31 100644 --- a/mapping_workbench/frontend/cypress/e2e/activities.feature +++ b/mapping_workbench/frontend/cypress/e2e/activities.feature @@ -5,9 +5,9 @@ Feature: Activities Background: Given Session Login Then Go Home - Then I open side menu Scenario: Import Packages + When I open side menu Then I go to Mapping Packages Then I get redirected to Mapping Packages list page When I click on Mapping Packages import @@ -16,12 +16,13 @@ Feature: Activities Then I get success upload Scenario: View Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks - Scenario: Refresh Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks @@ -29,14 +30,16 @@ Feature: Activities Then I receive Tasks Scenario: Delete Activity + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks + When I open actions menu When I delete Task Then I get success delete - Scenario: Delete all Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks diff --git a/mapping_workbench/frontend/cypress/e2e/cleanUp.feature b/mapping_workbench/frontend/cypress/e2e/cleanUp.feature index dd0eb846d..adf6f1ead 100644 --- a/mapping_workbench/frontend/cypress/e2e/cleanUp.feature +++ b/mapping_workbench/frontend/cypress/e2e/cleanUp.feature @@ -12,6 +12,7 @@ Feature: CleanUp after test Then I get redirected to projects list page Then I type project name + When I open actions menu When I click on delete button Then I click yes button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/common/common.js b/mapping_workbench/frontend/cypress/e2e/common/common.js index 45f27a8db..020800756 100644 --- a/mapping_workbench/frontend/cypress/e2e/common/common.js +++ b/mapping_workbench/frontend/cypress/e2e/common/common.js @@ -34,6 +34,9 @@ When('I select project', () => { cy.get('#project_switch').click().get('ul > li > p').contains('TEST_PROJECT').click() }) +When('I open actions menu',() => { + cy.get('#actions-menu-button').click() +}) Then('I expand tasks', () => { cy.get('#nav_tasks').click() diff --git a/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature b/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature index 8ad47f590..3158d24c0 100644 --- a/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature +++ b/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature @@ -15,7 +15,7 @@ Feature: Mapping Packages Then I click on upload button Then I get success upload - Scenario: View Pacakges + Scenario: View Packages Then I receive Mapping Packages When I expand first package details @@ -26,9 +26,9 @@ Feature: Mapping Packages Then I click on submit button Then I get success create - Scenario: Update Package Then I search for Mapping Package + When I open actions menu Then I edit Mapping Package Then I update name Then I click on submit button @@ -36,6 +36,7 @@ Feature: Mapping Packages Scenario: Delete Package Then I search for updated Mapping Package + When I open actions menu When I delete Mapping Package Then I click yes Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature b/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature index 7084de818..d2fac1077 100644 --- a/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature +++ b/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature @@ -9,6 +9,7 @@ Feature: Mapping Packages States Then I go to Mapping Packages Then I get redirected to Mapping Packages list page Then I search for Mapping Package + When I open actions menu Then I click on View Last State Then I receive Mapping Packages State @@ -20,7 +21,7 @@ Feature: Mapping Packages States Then I click on "" Data Then I receive Mapping Packages Test "" Examples: - | tab_name | - | Xpath | - | Sparql | - | Shacl | \ No newline at end of file + | tab_name | + | Xpath | + | Sparql | + | Shacl | \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature index 5e23fec75..d2012aa3d 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature +++ b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature @@ -16,6 +16,7 @@ Feature: Namespaces Scenario: Update Namespace Then I search for Namespaces + When I open actions menu Then I click edit Namespace button Then I get redirected to edit page @@ -24,6 +25,7 @@ Feature: Namespaces Scenario: Delete Namespace Then I search for updated Namespace + When I open actions menu Then I click delete Namespace button Then I get success delete @@ -34,6 +36,8 @@ Feature: Namespaces Then I successfully create Namespace Scenario: Delete Custom Namespace Ontology + Then I search for updated Namespace Then I search for Custom Namespaces + When I open actions menu Then I click delete Custom Namespace button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js index 91be77baa..168c70cd1 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js +++ b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js @@ -112,7 +112,7 @@ Then('I search for Custom Namespaces', () => { Then('I click delete Custom Namespace button', () => { cy.intercept('DELETE', appURLPrefix + 'ontology/namespaces_custom/*').as('delete') - cy.get('#ontology_namespaces_custom #delete_button').click() + cy.get('#delete_button').click() cy.get('#yes_dialog_button').click() }) diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature b/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature index 80f281d85..94a20036f 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature +++ b/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature @@ -20,5 +20,6 @@ Feature: Ontology Terms Scenario: Delete Ontology Term Then I search for Ontology Terms + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/projects.feature b/mapping_workbench/frontend/cypress/e2e/projects.feature index 72f277625..854e9ac15 100644 --- a/mapping_workbench/frontend/cypress/e2e/projects.feature +++ b/mapping_workbench/frontend/cypress/e2e/projects.feature @@ -22,6 +22,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I select project Then I get success select @@ -33,6 +34,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on edit button Then I get redirected to project edit page Then I update project description @@ -48,6 +50,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on view button Then I get redirected to project view page Then I read description @@ -61,6 +64,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on delete button Then I click yes button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature b/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature index 705490d6d..611c35159 100644 --- a/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature @@ -19,6 +19,7 @@ Feature: SHACL Test Suite Scenario: Update SHACL Test Suite Then I search for suite + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -28,5 +29,6 @@ Feature: SHACL Test Suite Scenario: Delete SHACL Test Suite Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature b/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature index a5fda81e4..ecefebc4c 100644 --- a/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature @@ -18,6 +18,7 @@ Feature: SPARQL Test Suites Scenario: Update SPARQL Test Suite Then I search for suite + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -27,5 +28,6 @@ Feature: SPARQL Test Suites Scenario: Delete SPARQL Test Suite Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature b/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature index 40b84f5b9..1988b1dd4 100644 --- a/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature @@ -16,6 +16,7 @@ Feature: Test Data Suites Scenario: Update Test Data Then I search for suite + When I open actions menu Then I click view button Then I click edit button Then I get redirected to edit page @@ -25,5 +26,6 @@ Feature: Test Data Suites Scenario: Delete Test Data Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature b/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature index 793c8df94..b829dca4f 100644 --- a/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature +++ b/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature @@ -20,6 +20,7 @@ Feature: Generic Triple Maps Then I get redirected to Generic Triple Maps Then I search for Generic Triple Map + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -31,5 +32,6 @@ Feature: Generic Triple Maps Then I get redirected to Generic Triple Maps Then I search for updated Generic Triple Map + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature b/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature index 9104be6b4..22ac9197b 100644 --- a/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature +++ b/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature @@ -20,6 +20,7 @@ Feature: Resources Then I get redirected to Resources Then I search for resource + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -31,5 +32,6 @@ Feature: Resources Then I get redirected to Resources Then I search for updated resource + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js index d5468fb76..a14e50e39 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js @@ -1,17 +1,18 @@ -import {Button} from '@mui/material'; +import {useCallback, useState} from "react"; +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; -import {usePopover} from 'src/hooks/use-popover'; -import {useCallback, useState} from "react"; import {paths} from 'src/paths'; -import {useRouter} from "../../../hooks/use-router"; +import {useRouter} from "next/router"; +import {MenuActionButton} from '../../menu-actions'; import ConfirmDialog from "../dialog/confirm-dialog"; export const ListFileCollectionActions = (props) => { const router = useRouter(); const {itemctx} = props; - const popover = usePopover(); const handleResourceManagerAction = useCallback(async () => { router.push({ @@ -48,116 +49,32 @@ export const ListFileCollectionActions = (props) => { return ( <> -
- {/**/} - - - - - Are you sure you want to delete it? - -
- {/* - - - - - - - } + /> + } + /> + setConfirmOpen(true)} + title='Delete' + icon={} + /> + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */} + Are you sure you want to delete it? + ); }; diff --git a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js index e792edd38..a713be75e 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js @@ -2,20 +2,21 @@ import {useState} from "react"; import {useRouter} from "next/router"; import PropTypes from 'prop-types'; -import {Button} from '@mui/material'; -import {Box} from "@mui/system"; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + import {paths} from 'src/paths'; -import {usePopover} from 'src/hooks/use-popover'; import {ACTION} from "../../../api/section"; +import {MenuActionButton} from '../../menu-actions'; + import ConfirmDialog from "../dialog/confirm-dialog"; import {toastError} from "../../app-toast"; export const ListItemActions = (props) => { const router = useRouter(); - const {itemctx, pathnames, onDeleteAction, confirmDialogContent, confirmDialogFooter} = props; - const popover = usePopover(); const handleViewAction = () => { if (pathnames?.view) @@ -55,44 +56,26 @@ export const ListItemActions = (props) => { const [confirmOpen, setConfirmOpen] = useState(false); return ( - - {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.VIEW) && } - {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.EDIT) && } + icon={} + title='Edit' + />} {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.DELETE) && <> - + icon={} + title='Delete' + /> { <>{confirmDialogContent} } - - {/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */} - + ); }; diff --git a/mapping_workbench/frontend/src/components/menu-actions.js b/mapping_workbench/frontend/src/components/menu-actions.js new file mode 100644 index 000000000..4d65c8df1 --- /dev/null +++ b/mapping_workbench/frontend/src/components/menu-actions.js @@ -0,0 +1,43 @@ +import {cloneElement, useState} from 'react'; + +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; + +import Menu from '@mui/material/Menu'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; +import {useTheme} from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; + +export const MenuActions = ({children}) => { + const [anchor, setAnchor] = useState(null) + return <> + + setAnchor(e.target)}> + + + + setAnchor(null)}> + {children} + + +} + +export const MenuActionButton = ({icon, title, ...other}) => { + const theme = useTheme() + return + {icon && + {cloneElement(icon, {color: 'primary'})} + + } + { + title && {title} + } + +} \ No newline at end of file diff --git a/mapping_workbench/frontend/src/layouts/app/config.js b/mapping_workbench/frontend/src/layouts/app/config.js index 15297df0e..d3fd32d05 100644 --- a/mapping_workbench/frontend/src/layouts/app/config.js +++ b/mapping_workbench/frontend/src/layouts/app/config.js @@ -1,3 +1,7 @@ +import ArchiveIcon from '@mui/icons-material/Archive'; +import TaskAltIcon from '@mui/icons-material/TaskAlt'; +import ModeStandbyIcon from '@mui/icons-material/ModeStandby'; +import VerifiedIcon from '@mui/icons-material/Verified'; import {useTranslation} from 'react-i18next'; import SvgIcon from '@mui/material/SvgIcon'; @@ -28,22 +32,18 @@ export const useSections = () => { } ] }], - mappingProcess: [ + sourceAndTarget: [ { items: [{ - title: t(tokens.nav.mapping_process), + title: t(tokens.nav.source_and_target), path: paths.app.test_data_suites.index, - icon: ( - - - - ) + icon: () }] } ], - projectFiles: [{ + elementsDefinition: [{ items: [{ - title: t(tokens.nav.project_files), + title: t(tokens.nav.elements_definition), path: paths.app.fields_and_nodes.develop.index, icon: ( @@ -52,6 +52,39 @@ export const useSections = () => { ), }] }], + conceptualMappings: [{ + items: [{ + title: t(tokens.nav.conceptual_mappings), + path: paths.app.conceptual_mapping_rules.develop.index, + icon: ( + + + + ), + }] + }], + technical_mappings: [{ + items: [{ + title: t(tokens.nav.technical_mappings), + path: paths.app.triple_map_fragments.index, + icon: ( + + + + ), + }] + }], + quality_control: [{ + items: [{ + title: t(tokens.nav.quality_control), + path: paths.app.sparql_test_suites.index, + icon: ( + + + + ), + }] + }], mappingPackages: [ { items: [ @@ -60,7 +93,7 @@ export const useSections = () => { path: paths.app.mapping_packages.index, icon: ( - + ), }] @@ -73,7 +106,7 @@ export const useSections = () => { path: paths.app.tasks.index, icon: ( - + ) }] diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js index 87837329a..56964a75e 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js @@ -4,9 +4,9 @@ import MenuItem from "@mui/material/MenuItem"; import TextField from "@mui/material/TextField"; import Typography from "@mui/material/Typography"; -import {ProjectsContext} from "../../../contexts/projects"; -import {useRouter} from "../../../hooks/use-router"; import {paths} from 'src/paths'; +import {useRouter} from "next/router"; +import {ProjectsContext} from "src/contexts/projects"; export const ProjectSwitch = () => { diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js index a2a66d208..30429ce12 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js @@ -1,23 +1,34 @@ -import Menu from '@mui/material/Menu'; -import {Box} from '@mui/system'; import {useContext, useState} from "react"; import AddIcon from '@mui/icons-material/Add'; import SearchIcon from '@mui/icons-material/Search'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; +import Menu from '@mui/material/Menu'; import Stack from '@mui/material/Stack'; +import Tooltip from '@mui/material/Tooltip'; import Divider from '@mui/material/Divider'; import {useTheme} from '@mui/material/styles'; import MenuItem from "@mui/material/MenuItem"; import Typography from "@mui/material/Typography"; import OutlinedInput from '@mui/material/OutlinedInput'; import InputAdornment from '@mui/material/InputAdornment'; -import {Scrollbar} from '../../../components/scrollbar'; -import {ProjectsContext} from "../../../contexts/projects"; -import {useRouter} from "next/router"; import {paths} from 'src/paths'; +import {useRouter} from "next/router"; +import {Scrollbar} from 'src/components/scrollbar'; +import {ProjectsContext} from "src/contexts/projects"; + +const colors = ['error', 'info', 'primary', 'secondary', 'success', 'warning']; + +const getColorForId = (id) => { + const hash = Array.from(id).reduce((sum, char) => sum + char.charCodeAt(0), 0); + return colors[hash % colors.length]; +}; + +const Circle = ({color}) => { + return +} export const ProjectSwitch = ({small}) => { const [anchorEl, setAnchorEl] = useState(null); @@ -26,7 +37,6 @@ export const ProjectSwitch = ({small}) => { const router = useRouter(); const theme = useTheme() - const handleProjectSelect = (value) => { if (value) projectsStore.handleSessionProjectChange(value) @@ -42,26 +52,36 @@ export const ProjectSwitch = ({small}) => { setAnchorEl(null); }; + const currentProject = projectsStore.items?.find(project => project._id === projectsStore.sessionProject) + return ( - - {!small && projectsStore.items?.find(project => project._id === projectsStore.sessionProject)?.title} - - + + + {!!currentProject && + + {!small && currentProject.title} + } + + + { vertical: 'top', horizontal: 'left', }} - width={'250px'} + width='250px' > @@ -101,9 +121,12 @@ export const ProjectSwitch = ({small}) => { sx={{px: '15px', py: '8px'}} onClick={() => handleProjectSelect(project._id)} > + + {project.title} diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js index 98d7e0c65..13a4fd46f 100644 --- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js +++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js @@ -199,6 +199,7 @@ export const SideNavItem = (props) => { ...(depth >= -1 && { borderTopRightRadius: 0, borderBottomRightRadius: 0, + paddingRight: '12px', borderRight: '4px solid var(--nav-item-icon-active-color)', }) diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js index 203f05e40..c9c3c167d 100644 --- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js +++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js @@ -167,7 +167,7 @@ export const SideNav = (props) => { backgroundColor: 'var(--nav-bg)', color: 'var(--nav-color)', width: small ? SIDE_NAV_WIDTH_SMALL : SIDE_NAV_WIDTH, - borderRight: '1px solid #E4E7EC' + borderRight: '1px solid var(--nav-border-color)' } }} variant="permanent" diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js index 5675e1124..5add0e79f 100644 --- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js +++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js @@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import {alpha} from '@mui/system/colorManipulator'; import useMediaQuery from '@mui/material/useMediaQuery'; +import {sessionApi} from '../../../api/session'; import {AccountButton} from '../account-button'; import {LanguageSwitch} from '../language-switch'; @@ -20,6 +21,7 @@ const SIDE_NAV_WIDTH = 280; export const TopNav = (props) => { const {onMobileNavOpen, ...other} = props; const breakPointUp = useMediaQuery((theme) => theme.breakpoints.up(BREAK_POINT)); + const project = sessionApi.getSessionProject() return ( { - + {project && - + } diff --git a/mapping_workbench/frontend/src/locales/tokens.js b/mapping_workbench/frontend/src/locales/tokens.js index dd545e721..f9ab174d4 100644 --- a/mapping_workbench/frontend/src/locales/tokens.js +++ b/mapping_workbench/frontend/src/locales/tokens.js @@ -71,7 +71,9 @@ export const tokens = { terms: 'nav.terms', dissemination: 'nav.dissemination', - mapping_process: 'nav,mapping_process', + elements_definition: 'nav.elements_definition', + source_and_target: 'nav.source_and_target', + mapping_process: 'nav.mapping_process', mapping_packages: 'nav.mapping_packages', conceptual_mapping_rules: 'nav.conceptual_mapping_rules', triple_map_fragments: 'nav.triple_map_fragments', diff --git a/mapping_workbench/frontend/src/locales/translations/en.js b/mapping_workbench/frontend/src/locales/translations/en.js index 48bd6e5f2..531249e68 100644 --- a/mapping_workbench/frontend/src/locales/translations/en.js +++ b/mapping_workbench/frontend/src/locales/translations/en.js @@ -77,6 +77,8 @@ export const en = { [tokens.nav.namespaces_custom]: 'Custom Namespaces', [tokens.nav.terms]: 'Terms', [tokens.nav.resource_collections]: 'Resources', + [tokens.nav.elements_definition]: 'Elements Definition', + [tokens.nav.source_and_target]: 'Source & Target', [tokens.nav.mapping_packages]: 'Mapping Packages', [tokens.nav.mapping_process]: 'Mapping Process', [tokens.nav.conceptual_mapping_rules]: 'Conceptual Mappings', diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js index a4b1ddb2c..f2faffa50 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js @@ -1,10 +1,10 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; + +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; -import Divider from "@mui/material/Divider"; +import Button from '@mui/material/Button'; import {Seo} from 'src/components/seo'; import {Layout as AppLayout} from 'src/layouts/app'; @@ -97,39 +97,38 @@ export const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]} + placeholder='Search Terms'/> + - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search Terms'/> - - - + { - const [detailedView, setDetailedView] = useState(true) const {t} = useTranslation(); + const [filterPopover, setFilterPopover] = useState(null) const itemsStore = useItemsStore(sectionApi); const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ['source_structural_element_sdk_element_id', 'target_class_path', 'target_property_path'], @@ -91,12 +88,42 @@ const Page = () => { <> + - + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({terms: e})}/> + + + { component={RouterLink} href={paths.app[sectionApi.section].overview.create} id="add-mapping-rules-button" - startIcon={( - - - - )} + startIcon={} variant="contained" > Add @@ -123,47 +146,25 @@ const Page = () => { id="generate_button" component={RouterLink} href={paths.app[sectionApi.section].tasks.generate_cm_assertions_queries} - startIcon={( - - - - )} + startIcon={} variant="contained" > {t(tokens.nav.generate_cm_assertions_queries)} - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - - itemsSearch.handleFiltersChange({terms: e})}/> - - - - - + + { }; }; - const Page = () => { const itemsStore = useItemsStore(); const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, SEARCH_COLUMNS, {element_type: ''}); + const [filterPopover, setFilterPopover] = useState(null) usePageView(); @@ -68,53 +69,75 @@ const Page = () => { - - - + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({element_type: e})}/> + + + + - Add - - - + + + - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - itemsSearch.handleFiltersChange({element_type: e})}/> - - - + ); diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/states/index.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/states/index.js index 67c50d397..bef7224b5 100644 --- a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/states/index.js +++ b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/states/index.js @@ -1,74 +1,26 @@ import {useEffect, useState} from "react"; -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import Breadcrumbs from "@mui/material/Breadcrumbs"; import Link from "@mui/material/Link"; import Card from "@mui/material/Card"; import Chip from "@mui/material/Chip"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Breadcrumbs from "@mui/material/Breadcrumbs"; import {paths} from "src/paths"; import {Seo} from "src/components/seo"; +import {useRouter} from "src/hooks/use-router"; +import {usePageView} from "src/hooks/use-page-view"; import {Layout as AppLayout} from "src/layouts/app"; -import {BreadcrumbsSeparator} from "src/components/breadcrumbs-separator"; import {RouterLink} from "src/components/router-link"; -import {FileCollectionListSearch} from "src/sections/app/file-manager/file-collection-list-search"; -import {usePageView} from "src/hooks/use-page-view"; -import {useRouter} from "src/hooks/use-router"; +import useItemsSearch from 'src/hooks/use-items-search'; +import {BreadcrumbsSeparator} from "src/components/breadcrumbs-separator"; import {ListTable} from "src/sections/app/mapping-package/state/list-table"; -import {mappingPackageStatesApi as sectionApi} from "src/api/mapping-packages/states"; import {mappingPackagesApi as upperSectionApi} from "src/api/mapping-packages"; +import {mappingPackageStatesApi as sectionApi} from "src/api/mapping-packages/states"; +import {FileCollectionListSearch} from "src/sections/app/file-manager/file-collection-list-search"; -const useItemsSearch = () => { - const [state, setState] = useState({ - filters: { - name: undefined, - category: [], - status: [], - inStock: undefined, - sortField: "", - sortDirection: undefined, - }, - page: sectionApi.DEFAULT_PAGE, - rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE - }); - - const handleFiltersChange = filters => { - setState(prevState => ({ - ...prevState, - filters, - page: 0 - })); - } - - const handlePageChange = (event, page) => { - setState(prevState => ({ - ...prevState, - page - })); - } - - const handleRowsPerPageChange = event => { - setState(prevState => ({ - ...prevState, - rowsPerPage: parseInt(event.target.value, 10) - })); - } - - const handleSort = (sortField) => { - setState(prevState => ({sortField, sortDirection: state.sortField === sortField && prevState.sortDirection === -1 ? 1 : -1 })) - } - - return { - handleSort, - handleFiltersChange, - handlePageChange, - handleRowsPerPageChange, - state - }; -}; - const Page = () => { const [state, setState] = useState({ items: [], @@ -76,7 +28,7 @@ const Page = () => { }); const router = useRouter(); - const itemsSearch = useItemsSearch(); + const itemsSearch = useItemsSearch(state.items,sectionApi); const {id} = router.query; diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js index 872a57736..275159dce 100644 --- a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js +++ b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js @@ -1,14 +1,14 @@ import {useEffect, useState} from 'react'; import dynamic from "next/dynamic"; -import ArrowLeftIcon from '@untitled-ui/icons-react/build/esm/ArrowLeft'; +import ArrowBack from '@mui/icons-material/ArrowBack'; + import Tab from '@mui/material/Tab'; import Chip from '@mui/material/Chip'; import Link from '@mui/material/Link'; import Tabs from '@mui/material/Tabs'; import Stack from '@mui/material/Stack'; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Typography from '@mui/material/Typography'; import {paths} from 'src/paths'; @@ -29,7 +29,6 @@ const StatesView = dynamic(() => import("src/sections/app/mapping-package/state/states_view")); - const tabs = [ {label: 'Details', value: 'details'}, {label: 'Resources', value: 'resources'}, @@ -60,7 +59,6 @@ const Page = () => { -
{ }} underline="hover" > - - - + {sectionApi.SECTION_TITLE} -
{ spacing={2} > - + {item.title} { justifyContent="space-between" spacing={4} > - - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + { spacing={{xs: 3, lg: 4}} > - + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js index 3755e30a6..9215a1283 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js @@ -1,12 +1,10 @@ import AddIcon from '@mui/icons-material/Add'; -import Card from '@mui/material/Card'; -import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Grid from '@mui/material/Unstable_Grid2'; import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -18,7 +16,6 @@ import {useItemsStore} from 'src/hooks/use-items-store'; import {SourceAndTargetTabs} from 'src/sections/app/source-and-target'; import {TableSearchBar} from 'src/sections/components/table-search-bar'; import {ListTable} from "src/sections/app/ontology-namespace/list-table"; -import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; import {ontologyNamespacesApi as sectionApi} from 'src/api/ontology-namespaces'; import OntologyNamespacesCustom from 'src/pages/app/ontology-namespaces-custom'; @@ -35,32 +32,18 @@ const Page = () => { + + {sectionApi.SECTION_TITLE} + - - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - + diff --git a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js index 9f3361082..4db523e62 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js @@ -1,8 +1,13 @@ +import {useState} from 'react'; + import AddIcon from '@mui/icons-material/Add'; import SearchIcon from '@mui/icons-material/Search'; +import FilterListIcon from '@mui/icons-material/FilterList'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; +import Popover from '@mui/material/Popover'; import Grid from "@mui/material/Unstable_Grid2"; import {paths} from 'src/paths'; @@ -11,14 +16,27 @@ import {useRouter} from "src/hooks/use-router"; import {Layout as AppLayout} from 'src/layouts/app'; import {usePageView} from 'src/hooks/use-page-view'; import {RouterLink} from 'src/components/router-link'; -import OntologyTerms from "src/sections/app/ontology/ontology-terms"; import {ontologyTermsApi as sectionApi} from 'src/api/ontology-terms'; import {SourceAndTargetTabs} from 'src/sections/app/source-and-target'; import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; +import useItemsSearch from '../../../hooks/use-items-search'; +import {useItemsStore} from '../../../hooks/use-items-store'; +import {ListTable} from '../../../sections/app/ontology-term/list-table'; +import {Filter} from '../../../sections/components/filter'; +import {TableSearchBar} from '../../../sections/components/table-search-bar'; + +const FILTER_VALUES = [{label: 'All', value: ''}, + {label: 'CLASS', value: 'CLASS'}, + {label: 'PROPERTY', value: 'PROPERTY'}] const Page = () => { const router = useRouter() + const itemsStore = useItemsStore(sectionApi); + const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["short_term", "term"], {type: ''}); + + const [filterPopover, setFilterPopover] = useState(null) + const handleDiscover = () => { const toastId = toastLoad('Discovering terms ...') sectionApi.discoverTerms() @@ -41,38 +59,74 @@ const Page = () => { - - - + - - + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]} + placeholder='Search Terms'/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({type: e})}/> + + + + + + + - + diff --git a/mapping_workbench/frontend/src/pages/app/projects/index.js b/mapping_workbench/frontend/src/pages/app/projects/index.js index 9088fd130..5e78b2639 100644 --- a/mapping_workbench/frontend/src/pages/app/projects/index.js +++ b/mapping_workbench/frontend/src/pages/app/projects/index.js @@ -1,177 +1,63 @@ -import { useState } from 'react'; +import AddIcon from '@mui/icons-material/Add'; -import PlusIcon from '@untitled-ui/icons-react/build/esm/Plus'; - -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; -import SvgIcon from '@mui/material/SvgIcon'; +import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; +import Breadcrumbs from '@mui/material/Breadcrumbs'; -import {projectsApi as sectionApi} from 'src/api/projects'; import {paths} from 'src/paths'; +import {Seo} from 'src/components/seo'; +import {useProjects} from "src/hooks/use-projects"; import {Layout as AppLayout} from 'src/layouts/app'; -import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; import {RouterLink} from 'src/components/router-link'; -import {Seo} from 'src/components/seo'; -import {ListSearch} from 'src/sections/app/project/list-search'; +import useItemsSearch from 'src/hooks/use-items-search'; +import {projectsApi as sectionApi} from 'src/api/projects'; import {ListTable} from 'src/sections/app/project/list-table'; -import {useProjects} from "../../../hooks/use-projects"; - -const useItemsSearch = (items) => { - const [state, setState] = useState({ - filters: {}, - sort: { - column: "", - direction: "desc" - }, - search: '', - searchColumns:["title","description"], - page: sectionApi.DEFAULT_PAGE, - rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE - }); - - const {show, ...filters} = state.filters - - const searchItems = state.search ? items.filter(item => { - let returnItem = null; - state.searchColumns.forEach(column => { - if(item[column]?.toLowerCase()?.includes(state.search.toLowerCase())) - returnItem = item - }) - return returnItem - }) : items - - const filteredItems = searchItems.filter((item) => { - let returnItem = item; - Object.entries(filters).forEach(filter=> { - const [key, value] = filter - if(value !== "" && value !== undefined && typeof item[key] === "boolean" && item[key] !== (value == "true")) - returnItem = null - if(value !== undefined && typeof item[key] === "string" && !item[key].toLowerCase().includes(value.toLowerCase)) - returnItem = null - }) - return returnItem - }) - - const sortedItems = () => { - const sortColumn = state.sort.column - if(!sortColumn) { - return filteredItems - } else { - return filteredItems.sort((a,b) => { - if (typeof a[sortColumn] === "string") - return state.sort.direction === "asc" ? - a[sortColumn]?.localeCompare(b[sortColumn]) : - b[sortColumn]?.localeCompare(a[sortColumn]) - else - return state.sort.direction === "asc" ? - a[sortColumn] - b[sortColumn] : - b[sortColumn] - a[sortColumn] - }) - } - } - - const pagedItems = sortedItems().filter((item, i) => { - const pageSize = state.page * state.rowsPerPage - if((pageSize <= i && pageSize + state.rowsPerPage > i) || state.rowsPerPage < 0) - return item - }) - - const handleSearchItems = (filters) => { - setState(prevState => ({...prevState, search: filters.q, page: 0 })) - } - - const handleFiltersChange = (filters) => { - setState(prevState => ({ - ...prevState, - filters, - page: 0 - })); - } - - const handlePageChange = (event, page) => { - setState(prevState => ({ - ...prevState, - page - })); - } - - const handleSort = (column, desc) => { - setState(prevState=> ({ ...prevState, sort: {column, - direction: prevState.sort.column === column - ? prevState.sort.direction === "desc" - ? "asc" - : "desc" - : desc - ? "desc" - : "asc"}})) - - } - - const handleRowsPerPageChange = (event) => { - setState(prevState => ({ - ...prevState, - rowsPerPage: parseInt(event.target.value, 10) - })); - } +import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; +import {TableSearchBar} from 'src/sections/components/table-search-bar'; - return { - handleFiltersChange, - handlePageChange, - handleRowsPerPageChange, - handleSort, - handleSearchItems, - pagedItems, - count: pagedItems.length, - state - }; -}; export const Page = () => { const itemsStore = useProjects(); - const itemsSearch = useItemsSearch(itemsStore.items); + const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["title", "description"]); return ( <> + + + {sectionApi.SECTION_TITLE} + + }> + + App + + + {sectionApi.SECTION_TITLE} + + + - - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - List - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]} + placeholder='Search by Project Title'/> + { id="add_button" component={RouterLink} href={paths.app[sectionApi.section].create} - startIcon={( - - - - )} + startIcon={} variant="contained" > Add - - - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js index 0ef28a078..e02b51811 100644 --- a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js @@ -2,10 +2,9 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Card from '@mui/material/Card'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -59,12 +58,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + ); diff --git a/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js index b2ba2d777..73066b4dc 100644 --- a/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js @@ -2,10 +2,9 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Card from '@mui/material/Card'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Divider from "@mui/material/Divider"; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -58,12 +57,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/tasks/index.js b/mapping_workbench/frontend/src/pages/app/tasks/index.js index eb747570b..b06e3f71a 100644 --- a/mapping_workbench/frontend/src/pages/app/tasks/index.js +++ b/mapping_workbench/frontend/src/pages/app/tasks/index.js @@ -3,12 +3,10 @@ import {useEffect, useState} from 'react'; import AutorenewIcon from '@mui/icons-material/Autorenew'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; -import Card from '@mui/material/Card'; import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Typography from '@mui/material/Typography'; import Breadcrumbs from '@mui/material/Breadcrumbs'; @@ -93,32 +91,36 @@ export const Page = () => { <> + + + {sectionApi.TASKS_TITLE} + + }> + + App + + + {sectionApi.TASKS_TITLE} + + + - - - {sectionApi.TASKS_TITLE} - - }> - - App - - - {sectionApi.TASKS_TITLE} - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search by Project Title'/> - - - - - + + + ) diff --git a/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js b/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js index 7f8fb01ee..3190b4cd7 100644 --- a/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js @@ -3,10 +3,9 @@ import {useEffect, useState} from "react"; import AddIcon from '@mui/icons-material/Add'; import UploadIcon from '@mui/icons-material/Upload'; -import Card from '@mui/material/Card'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Divider from "@mui/material/Divider"; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -61,56 +60,58 @@ const Page = () => { return ( <> - - - - - - + + + - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + { const uploadDialog = useDialog(); @@ -45,12 +44,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - - - + ) diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index bfe22a169..c4789f35f 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -3,6 +3,10 @@ import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import PropTypes from 'prop-types'; +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Dialog from "@mui/material/Dialog"; import Button from "@mui/material/Button"; @@ -18,8 +22,9 @@ import {useDialog} from "src/hooks/use-dialog"; import {Scrollbar} from 'src/components/scrollbar'; import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; -import TablePagination from "src/sections/components/table-pagination"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import TablePagination from "src/sections/components/table-pagination-pages"; export const ListTableRow = (props) => { const { @@ -47,11 +52,7 @@ export const ListTableRow = (props) => { {item.source_structural_element_sdk_element_id} - + { {item.target_property_path} - - + + } + onClick={() => onEdit(item)}/> + } + onClick={() => setConfirmOpen(true)} + title='Delete'/> + { showFirstButton showLastButton > - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + + + + + + + + + + + + + + + + + + + + + + - - Actions - - - - - {items.map(item => )} - -
- + + + + + {items.map(item => )} + + + + ); diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js index 54999d477..b77e78464 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js @@ -7,7 +7,6 @@ import parse from "html-react-parser"; import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; import EditIcon from '@untitled-ui/icons-react/build/esm/Edit05'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import CheckIcon from "@mui/icons-material/Check"; import CloseIcon from "@mui/icons-material/Close"; import InfoIcon from '@mui/icons-material/Info'; @@ -17,6 +16,7 @@ import Card from "@mui/material/Card"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; import Link from "@mui/material/Link"; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from "@mui/material/Stack"; import Alert from "@mui/material/Alert"; @@ -36,7 +36,6 @@ import TableHead from '@mui/material/TableHead'; import TextField from "@mui/material/TextField"; import FormLabel from "@mui/material/FormLabel"; import CardHeader from "@mui/material/CardHeader"; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; import FormControl from "@mui/material/FormControl"; @@ -47,13 +46,16 @@ import {sessionApi} from "src/api/session"; import {useDialog} from "src/hooks/use-dialog"; import {Scrollbar} from 'src/components/scrollbar'; import {toastSuccess} from "src/components/app-toast"; +import {MenuActions} from 'src/components/menu-actions'; import {PropertyList} from 'src/components/property-list'; import {mappingPackagesApi} from "src/api/mapping-packages"; import {PropertyListItem} from 'src/components/property-list-item'; import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import {FormCodeTextArea} from "src/components/app/form/code-text-area"; -import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {genericTripleMapFragmentsApi} from "src/api/triple-map-fragments/generic"; import {sparqlTestFileResourcesApi} from "src/api/sparql-test-suites/file-resources"; @@ -62,7 +64,6 @@ import {ListSelectorSelect as ResourceListSelector} from "src/components/app/lis import { MappingPackageCheckboxList } from 'src/sections/app/mapping-package/components/mapping-package-real-checkbox-list'; -import TableSorterHeader from '../../components/table-sorter-header'; export const ListTableTripleMapFragment = (props) => { @@ -724,14 +725,8 @@ export const ListTableRow = (props) => { }) }} > - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> {item.sort_order} { - paths.app.conceptual_mapping_rules.overview - }} - /> + + paths.app.conceptual_mapping_rules.overview + }} + /> + {isCurrent && ( @@ -933,9 +930,10 @@ export const ListTable = (props) => { const { count = 0, items = [], onPageChange = () => { }, onRowsPerPageChange, page = 0, rowsPerPage = 0, sectionApi, onPackagesUpdate = () => { - }, sort, sortField, onSort, detailedView + }, sort, sortField, onSort } = props; + const [detailedView, setDetailedView] = useState(true) const [currentItem, setCurrentItem] = useState(null); const [hoveredItem, setHoveredItem] = useState(null); const notesDialog = useDialog() @@ -979,6 +977,7 @@ export const ListTable = (props) => { if (!isProjectDataReady) return null; + return ( { showFirstButton showLastButton > - - - - - - - - Conceptual Field/Group - - - Min XSD - - - Max XSD - - - Ontology Fragment Class path - - - Ontology Fragment Property path - - - RML Triple Map - - - Mapping Package - - - SPARQL assertions - - - Notes - - + + setDetailedView(e.target.checked)}/>} + label='Detailed View'/> + + +
+ + + + + + Conceptual Field/Group + + + Min XSD + + + Max XSD + + + Ontology Fragment Class path + + + Ontology Fragment Property path + + + RML Triple Map + + + Mapping Package + + + SPARQL assertions + + + Notes + + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; + const isHovered = item_id === hoveredItem; + + return ( + ) + })} + - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; - const isHovered = item_id === hoveredItem; - - return ( - ) - })} - - - - - - - {notesDialog.data?.mapping_notes && <> - Mapping Notes: - {notesDialog.data.mapping_notes.map((mapping_note, i) => - )} - } - - {notesDialog.data?.editorial_notes && <> - Editorial Notes: - {notesDialog.data.editorial_notes.map((editorial_note, i) => - )} - } - - {notesDialog.data?.feedback_notes && <> - Feedback Notes: - {notesDialog.data.feedback_notes.map((feedback_note, i) => - - )} - } - - - - - -
- + + + + + + {notesDialog.data?.mapping_notes && <> + Mapping Notes: + {notesDialog.data.mapping_notes.map((mapping_note, i) => + )} + } + + {notesDialog.data?.editorial_notes && <> + Editorial Notes: + {notesDialog.data.editorial_notes.map((editorial_note, i) => + + )} + } + + {notesDialog.data?.feedback_notes && <> + Feedback Notes: + {notesDialog.data.feedback_notes.map((feedback_note, i) => + + )} + } + + + + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js index 32d707456..aa2953c8b 100644 --- a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js @@ -1,32 +1,31 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; - -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; import List from "@mui/material/List"; import Grid from "@mui/material/Grid"; import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import TableRow from '@mui/material/TableRow'; import ListItem from "@mui/material/ListItem"; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; import {paths} from "src/paths"; import {Scrollbar} from 'src/components/scrollbar'; +import {MenuActions} from 'src/components/menu-actions'; import {PropertyList} from "src/components/property-list"; import {PropertyListItem} from "src/components/property-list-item"; -import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; -import TablePagination from "src/sections/components/table-pagination"; +import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {useHighlighterTheme} from "../../../hooks/use-highlighter-theme"; export const ListTable = (props) => { @@ -63,18 +62,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -89,9 +88,7 @@ export const ListTable = (props) => { - - Actions - + @@ -123,14 +120,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -164,14 +155,16 @@ export const ListTable = (props) => { {item.element_type} - paths.app.fields_and_nodes.overview.elements, - edit: () => paths.app.fields_and_nodes.overview.elements.edit(item_id), - view: () => paths.app.fields_and_nodes.overview.elements.view(item_id) - }} - /> + + paths.app.fields_and_nodes.overview.elements, + edit: () => paths.app.fields_and_nodes.overview.elements.edit(item_id), + view: () => paths.app.fields_and_nodes.overview.elements.view(item_id) + }} + /> + {isCurrent && ( @@ -258,8 +251,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index dbb699fe6..295cb85d6 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,24 +1,23 @@ import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import UploadIcon from '@mui/icons-material/Upload'; import Box from "@mui/system/Box"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import IconButton from '@mui/material/IconButton'; -import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; +import CardContent from '@mui/material/CardContent'; import {paths} from "src/paths"; import {useDialog} from "src/hooks/use-dialog"; @@ -29,12 +28,14 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from "src/components/property-list"; import {mappingPackagesApi} from "src/api/mapping-packages"; import {PropertyListItem} from 'src/components/property-list-item'; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import {FileUploader} from "src/sections/app/file-manager/file-uploader"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; -import TableSorterHeader from '../../components/table-sorter-header'; export const ListTableRow = (props) => { const { @@ -96,14 +97,8 @@ export const ListTableRow = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -132,16 +127,15 @@ export const ListTableRow = (props) => { {timeTransformer(item.created_at, timeSetting)} - - + + } + onClick={() => openUploadModal?.(item._id)} + title='Upload' + /> - + {isCurrent && ( @@ -309,16 +303,6 @@ export const FileCollectionListTable = (props) => { return (<> - - - - { showFirstButton showLastButton > - - - - - - handleItemsSelectAll(event.target.checked)} - /> - - - - Packages - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + + + + + +
+ + + + handleItemsSelectAll(event.target.checked)} + /> + + + + Packages + + + + + + + {items.map((item) => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - ) - })} - -
- + return ( + + ) + })} + + + + { const { item, @@ -103,10 +104,8 @@ export const ListTableRow = (props) => { > Are you sure you want to delete it? - + { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -153,7 +149,7 @@ export const ListTableRow = (props) => { .map(mapping_package => ) } @@ -163,15 +159,14 @@ export const ListTableRow = (props) => { {timeTransformer(item.created_at, timeSetting)} - - + + uploadDialog.handleOpen({id: item_id})} + icon={} + title='Import test data'/> - + {isCurrent && ( @@ -336,28 +331,30 @@ export const TestDataCollectionListTable = (props) => { ) } - return (<> - - - - - + return ( + + + + + + + @@ -365,23 +362,17 @@ export const TestDataCollectionListTable = (props) => { handleItemsSelectAll(event.target.checked)} + onChange={event => handleItemsSelectAll(event.target.checked)} /> - - {/**/} - {/* Title*/} - {/**/} + Packages - {/**/} - {/* Created*/} - {/**/} - Actions @@ -408,8 +399,8 @@ export const TestDataCollectionListTable = (props) => {
- - + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/files-form/item-list.js b/mapping_workbench/frontend/src/sections/app/files-form/item-list.js index c1e12ed5b..5f098d889 100644 --- a/mapping_workbench/frontend/src/sections/app/files-form/item-list.js +++ b/mapping_workbench/frontend/src/sections/app/files-form/item-list.js @@ -10,7 +10,7 @@ import {Scrollbar} from 'src/components/scrollbar'; import {TableNoData} from '../shacl-validation-report/utils'; import {ItemListCard} from './item-list-card'; import {ItemListRow} from './item-list-row'; -import TablePagination from "../../components/table-pagination"; +import TablePagination from "../../components/table-pagination-pages"; export const ItemList = (props) => { const { @@ -84,24 +84,23 @@ export const ItemList = (props) => { : return ( - - - + + + {content} - - - - + + + ); } ; diff --git a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js index d449eeea0..6c267060d 100644 --- a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js +++ b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js @@ -1,138 +1,98 @@ -import { useRef } from 'react'; +import {useRef} from 'react'; import PropTypes from 'prop-types'; -import Grid01Icon from '@untitled-ui/icons-react/build/esm/Grid01'; -import ListIcon from '@untitled-ui/icons-react/build/esm/List'; -import SearchMdIcon from '@untitled-ui/icons-react/build/esm/SearchMd'; + +import SearchIcon from '@mui/icons-material/Search'; +import GridViewIcon from '@mui/icons-material/GridView'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; + import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; -import InputAdornment from '@mui/material/InputAdornment'; -import OutlinedInput from '@mui/material/OutlinedInput'; import Stack from '@mui/material/Stack'; -import SvgIcon from '@mui/material/SvgIcon'; import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; - -const sortOptions = [ - { - label: 'Latest', - value: 'desc' - }, - { - label: 'Oldest', - value: 'asc' - } -]; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputAdornment from '@mui/material/InputAdornment'; +import ToggleButtonGroup, {toggleButtonGroupClasses} from '@mui/material/ToggleButtonGroup'; export const ItemSearch = (props) => { - const { - onFiltersChange, onSortChange, onViewChange, view = 'grid', - sortBy = 'createdAt', - sortDir = 'asc' - } = props; - const queryRef = useRef(null); - - const handleQueryChange = (event) => { - event.preventDefault(); - const query = queryRef.current?.value || ''; + const { + onFiltersChange, onSortChange, onViewChange, view = 'grid' + } = props; + const queryRef = useRef(null); - onFiltersChange?.(query); - } + const handleQueryChange = (event) => { + event.preventDefault(); + const query = queryRef.current?.value || ''; - const handleSortChange = (event) => { - const sortDir = event.target.value; - onSortChange?.(sortDir); - } + onFiltersChange?.(query); + } - const handleViewChange = (event, value) => { - onViewChange?.(value); - } + const handleViewChange = (event, value) => { + onViewChange?.(value); + } - return ( - - - - - - - - - )} - /> - - - - - - - - - - - - - - {/**/} - {/* {sortOptions.map((option) => (*/} - {/* */} - {/* {option.label}*/} - {/* */} - {/* ))}*/} - {/**/} - - - ); + return ( + + + + + + + )} + /> + + + + + + + + + + + + ); }; ItemSearch.propTypes = { - onFiltersChange: PropTypes.func, - onSortChange: PropTypes.func, - onViewChange: PropTypes.func, - sortBy: PropTypes.string, - sortDir: PropTypes.oneOf(['asc', 'desc']), - view: PropTypes.oneOf(['grid', 'list']) + onFiltersChange: PropTypes.func, + onSortChange: PropTypes.func, + onViewChange: PropTypes.func, + sortBy: PropTypes.string, + sortDir: PropTypes.oneOf(['asc', 'desc']), + view: PropTypes.oneOf(['grid', 'list']) }; diff --git a/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js b/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js index 6e4531433..0f61eee50 100644 --- a/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js @@ -2,11 +2,11 @@ import {Fragment, useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import EditIcon from '@untitled-ui/icons-react/build/esm/Edit05'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import Box from "@mui/system/Box"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -16,7 +16,6 @@ import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -24,14 +23,16 @@ import {sessionApi} from 'src/api/session'; import {useDialog} from 'src/hooks/use-dialog'; import {Scrollbar} from 'src/components/scrollbar'; import {toastSuccess} from 'src/components/app-toast'; +import {MenuActions} from 'src/components/menu-actions'; import timeTransformer from "src/utils/time-transformer"; import {useGlobalState} from "src/hooks/use-global-state"; import {mappingPackagesApi} from "src/api/mapping-packages"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import CodeMirrorDefault from 'src/components/app/form/codeMirrorDefault'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; -import {genericTripleMapFragmentsApi} from 'src/api/triple-map-fragments/generic'; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import TablePagination from "src/sections/components/table-pagination-pages"; +import {genericTripleMapFragmentsApi} from 'src/api/triple-map-fragments/generic'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import { MappingPackageCheckboxList @@ -170,7 +171,7 @@ export const ListTable = (props) => { return a }, {}) - return (
+ return ( { showFirstButton showLastButton > - - - - - - - - - - Packages - - - - - - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + + + + + Packages + + + + + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; + + return ( + + + {item.triple_map_content && + handleItemToggle(item_id)} + isCurrent={isCurrent}/>} + - return ( - - + + {item.triple_map_uri} + + + setHoveredItem(item._id)} + onMouseLeave={() => setHoveredItem(null)}> + {projectMappingPackagesMap && } + + + {timeTransformer(item.created_at, timeSetting)} + + + + + + + + {isCurrent && ( + { width: 3, height: 'calc(100% + 1px)' } - }) - }} - width="25%" - > - {item.triple_map_content && - handleItemToggle(item_id)}> - - {} - - } - - - - - {item.triple_map_uri} - - - setHoveredItem(item._id)} - onMouseLeave={() => setHoveredItem(null)}> - {projectMappingPackagesMap && } - - - {timeTransformer(item.created_at, timeSetting)} - - - - - - {isCurrent && ( - - - - - Content: - + }} + > + + + + Content: + + - - - - )} - ); - })} - -
- + + + )} + ); + })} + + + + -
); + ); }; ListTable.propTypes = { diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index ace4da9f3..0cf061bed 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -2,22 +2,20 @@ import {Fragment, useState} from 'react'; import {useRouter} from "next/router"; import PropTypes from 'prop-types'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import DownloadDoneOutlinedIcon from '@mui/icons-material/DownloadDoneOutlined'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import Box from "@mui/system/Box"; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; -import Stack from "@mui/material/Stack"; -import Button from "@mui/material/Button"; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; import CardContent from '@mui/material/CardContent'; import FormControlLabel from "@mui/material/FormControlLabel"; @@ -29,10 +27,12 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from 'src/components/property-list'; import {PropertyListItem} from 'src/components/property-list-item'; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import TableSorterHeader from '../../components/table-sorter-header'; import {MappingPackageProcessForm} from './components/mapping-package-process-form'; import {MappingPackagesBulkActions} from './components/mapping-packages-bulk-actions'; @@ -87,15 +87,8 @@ const MappingPackageRowFragment = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)} - id="expand_button"> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -110,31 +103,22 @@ const MappingPackageRowFragment = (props) => { {timeTransformer(item.created_at, timeSetting)} - - + + handleGoLastState(item_id)} + title='View Last State' + icon={} + /> - - + icon={} + title='Delete'/> + {isCurrent && ( @@ -247,7 +231,6 @@ export const ListTable = (props) => { setSelectedItems(items => checked ? [...items, itemId] : items.filter(item => item !== itemId)); } - const handleItemToggle = itemId => { setCurrentItem(prevItemId => prevItemId === itemId ? null : itemId); } @@ -282,21 +265,21 @@ export const ListTable = (props) => { } return ( -
- selectedItems.includes(item._id))} - disabled={!selectedItems.length}/> - - + + + selectedItems.includes(item._id))} + disabled={!selectedItems.length}/> + @@ -313,9 +296,7 @@ export const ListTable = (props) => { - - Actions - + @@ -343,28 +324,41 @@ export const ListTable = (props) => {
- -
+ + ); }; ListTable.propTypes = { count: PropTypes.number, - items: PropTypes.array, - onPageChange: PropTypes.func, - onRowsPerPageChange: PropTypes.func, - page: PropTypes.number, - rowsPerPage: PropTypes.number, - sectionApi: PropTypes.object + items: + PropTypes.array, + onPageChange: + PropTypes.func, + onRowsPerPageChange: + PropTypes.func, + page: + PropTypes.number, + rowsPerPage: + PropTypes.number, + sectionApi: + PropTypes.object }; MappingPackageRowFragment.propTypes = { item_id: PropTypes.string, - item: PropTypes.object, - isCurrent: PropTypes.bool, - handleItemToggle: PropTypes.func, - handleGoLastState: PropTypes.func, - handleDeleteAction: PropTypes.func, - timeSetting: PropTypes.number, - sectionApi: PropTypes.object + item: + PropTypes.object, + isCurrent: + PropTypes.bool, + handleItemToggle: + PropTypes.func, + handleGoLastState: + PropTypes.func, + handleDeleteAction: + PropTypes.func, + timeSetting: + PropTypes.number, + sectionApi: + PropTypes.object } \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js b/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js index d46d9690e..c0f41c621 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js @@ -1,11 +1,14 @@ -import Divider from '@mui/material/Divider'; -import FormControlLabel from '@mui/material/FormControlLabel'; +import {useEffect, useState} from "react"; + +import FilterListIcon from '@mui/icons-material/FilterList'; + import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Switch from '@mui/material/Switch'; -import {useEffect, useState} from "react"; +import Button from '@mui/material/Button'; +import Popover from '@mui/material/Popover'; +import FormControlLabel from '@mui/material/FormControlLabel'; -import Card from "@mui/material/Card"; import { conceptualMappingRulesApi as sectionApi, @@ -14,7 +17,6 @@ import { import useItemsSearch from '../../../hooks/use-items-search'; import {Filter} from '../../components/filter'; import {TableSearchBar} from '../../components/table-search-bar'; -import {ListSearch as MappingRulesListSearch} from "../conceptual-mapping-rule/list-search"; import {ListTable as MappingRulesListTable} from "../conceptual-mapping-rule/list-table"; @@ -67,9 +69,8 @@ const useMappingRulesStore = (mappingPackage) => { handleItemsGet, ...state }; }; -const MappingPackageRulesView = (props) => { - const [detailedView, setDetailedView] = useState(true) - const {id} = props +const MappingPackageRulesView = ({id}) => { + const [filterPopover, setFilterPopover] = useState(null) const mappingRulesStore = useMappingRulesStore(id); // const mappingRulesSearch = useMappingRulesSearch(mappingRulesStore); @@ -88,23 +89,37 @@ const MappingPackageRulesView = (props) => { return ( - - mappingRulesSearch.handleSearchItems([e])} - value={mappingRulesSearch.state.search[0]}/> - + <> - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - - mappingRulesSearch.handleFiltersChange({terms: e})}/> + spacing={3}> + + mappingRulesSearch.handleSearchItems([e])} + value={mappingRulesSearch.state.search[0]}/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + mappingRulesSearch.handleFiltersChange({terms: e})}/> + - { rowsPerPage={mappingRulesSearch.state.rowsPerPage} sectionApi={conceptualMappingRulesApi} onPackagesUpdate={handlePackagesUpdate} - detailedView={detailedView} /> - + ) } diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js index d47b23ee7..f5124cf92 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js @@ -1,24 +1,27 @@ import {useState} from 'react'; import PropTypes from 'prop-types'; +import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined'; + import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; +import Stack from "@mui/material/Stack"; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Stack from "@mui/material/Stack"; -import Button from "@mui/material/Button"; import {paths} from "src/paths"; import {Scrollbar} from 'src/components/scrollbar'; +import timeTransformer from "src/utils/time-transformer"; +import {useGlobalState} from "src/hooks/use-global-state"; +import exportPackage from "src/utils/export-mapping-package"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import exportPackage from "../../../../utils/export-mapping-package"; -import TablePagination from "../../../components/table-pagination"; -import timeTransformer from "../../../../utils/time-transformer"; -import {useGlobalState} from "../../../../hooks/use-global-state"; -import TableSorterHeader from '../../../components/table-sorter-header'; export const ListTable = (props) => { const { @@ -64,67 +67,70 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - Actions - - - - - {items?.map(item => { - const item_id = item._id; - return ( - - - - {item.title} - - - - {item.description} - - - {item.mapping_version} - - - {timeTransformer(item.created_at, timeSetting)} - - - - paths.app[sectionApi.section].states.view(id, item_id), - }} - /> - - - - - - ); - })} - -
- + + + + + + + + + + + Actions + + + + + {items?.map(item => { + const item_id = item._id; + return ( + + + + {item.title} + + + + {item.description} + + + {item.mapping_version} + + + {timeTransformer(item.created_at, timeSetting)} + + + + + paths.app[sectionApi.section].states.view(id, item_id), + }} + /> + handleExport(item)} + icon={} + disabled={isExporting} + title={isExporting ? "Exporting..." : "Export"}/> + + + + + ); + })} + +
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js index 584cfdb2a..5262eeae0 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js @@ -1,62 +1,13 @@ import {useEffect, useState} from "react"; +import Paper from '@mui/material/Paper'; import Stack from "@mui/material/Stack"; import Alert from "@mui/material/Alert"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; -import {mappingPackageStatesApi as sectionApi} from 'src/api/mapping-packages/states'; -import useItemsSearch from '../../../../hooks/use-items-search'; -import {TableSearchBar} from '../../../components/table-search-bar'; import {ListTable} from "./list-table"; -import {FileCollectionListSearch} from "../../file-manager/file-collection-list-search"; - -// -// -// const useItemsSearch = () => { -// const [state, setState] = useState({ -// filters: {}, -// page: sectionApi.DEFAULT_PAGE, -// rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE, -// sortField: "", -// sortDirection: undefined, -// }); -// -// const handleFiltersChange = filters => { -// setState(prevState => ({ -// ...prevState, -// filters, -// page: 0 -// })); -// } -// -// const handlePageChange = (event, page) => { -// setState(prevState => ({ -// ...prevState, -// page -// })); -// }; -// -// const handleRowsPerPageChange = (event) => { -// setState(prevState => ({ -// ...prevState, -// rowsPerPage: parseInt(event.target.value, 10) -// })); -// }; -// -// const handleSort = (sortField) => { -// setState(prevState => ({...prevState, sortField, sortDirection: state.sortField === sortField && prevState.sortDirection === -1 ? 1 : -1 })) -// } -// -// return { -// handleFiltersChange, -// handlePageChange, -// handleRowsPerPageChange, -// handleSort, -// state -// }; -// }; - +import useItemsSearch from 'src/hooks/use-items-search'; +import {TableSearchBar} from 'src/sections/components/table-search-bar'; +import {mappingPackageStatesApi as sectionApi} from 'src/api/mapping-packages/states'; const useItemsStore = (id, searchState) => { const [state, setState] = useState({ @@ -95,10 +46,13 @@ const StatesView = ({id}) => { const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, SEARCH_COLUMNS); return ( - - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> + + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + + { itemsStore.itemsCount ? { No Data ! } - - + ) } diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js index 1117dac85..9ff0d7675 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js @@ -1,19 +1,20 @@ import PropTypes from 'prop-types'; + +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import TableSortLabel from '@mui/material/TableSortLabel'; import TableHead from '@mui/material/TableHead'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Tooltip from "@mui/material/Tooltip"; import {Scrollbar} from 'src/components/scrollbar'; +import TablePagination from 'src/sections/components/table-pagination-pages'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; -import TableSorterHeader from '../../components/table-sorter-header'; +import {MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { const { @@ -55,65 +56,58 @@ export const ListTable = (props) => { } return ( -
- - - - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; + + + +
+ + + + + + + + + {items.map((item) => { + const item_id = item._id; - return ( - - - - {item.prefix} - - - - {item.uri} - - - handleDeleteAction(item_id)} - /> - - - ); - })} - -
- - -
+ return ( + + + + {item.prefix} + + + + {item.uri} + + + + handleDeleteAction(item_id)} + /> + + + + ); + })} + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js index 178d9ab60..77abe2ebb 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Switch from "@mui/material/Switch"; import TableRow from '@mui/material/TableRow'; @@ -9,11 +10,12 @@ import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; import {Scrollbar} from 'src/components/scrollbar'; +import {MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; +import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; -import TablePagination from "../../components/table-pagination"; -import TableSorterHeader from '../../components/table-sorter-header'; export const ListTable = (props) => { const { @@ -54,18 +56,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -75,9 +77,7 @@ export const ListTable = (props) => { Syncable - - Actions - + @@ -105,10 +105,12 @@ export const ListTable = (props) => { /> - handleDeleteAction(item_id)} - /> + + handleDeleteAction(item_id)} + /> + ); @@ -116,8 +118,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js index dbd9fe439..ad33233fd 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js @@ -1,24 +1,22 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronDownIcon from '@untitled-ui/icons-react/build/esm/ChevronDown'; -import ChevronRightIcon from '@untitled-ui/icons-react/build/esm/ChevronRight'; -import CardContent from '@mui/material/CardContent'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; +import Divider from '@mui/material/Divider'; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; +import CardContent from '@mui/material/CardContent'; import {Scrollbar} from 'src/components/scrollbar'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; - import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import TablePagination from "../../components/table-pagination"; +import {MenuActions} from '../../../components/menu-actions'; +import {ChevronButton} from '../../components/chevron-button'; +import TablePagination from "../../components/table-pagination-pages"; import TableSorterHeader from "../../components/table-sorter-header"; @@ -57,18 +55,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -78,9 +76,7 @@ export const ListTable = (props) => { title='Term'/> - - Actions - + @@ -112,11 +108,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -127,8 +120,10 @@ export const ListTable = (props) => { {item.type} - + + + {isCurrent && ( @@ -164,8 +159,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js b/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js deleted file mode 100644 index 278a940d2..000000000 --- a/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js +++ /dev/null @@ -1,48 +0,0 @@ -import Card from "@mui/material/Card"; -import Stack from "@mui/material/Stack"; -import Divider from "@mui/material/Divider"; - -import {Filter} from "src/sections/components/filter"; -import useItemsSearch from 'src/hooks/use-items-search'; -import {useItemsStore} from 'src/hooks/use-items-store'; -import {ListTable} from "src/sections/app/ontology-term/list-table"; -import {ontologyTermsApi as sectionApi} from "src/api/ontology-terms"; -import {TableSearchBar} from "src/sections/components/table-search-bar"; - -const filterValues = [{label: 'All', value: ''}, - {label: 'CLASS', value: 'CLASS'}, - {label: 'PROPERTY', value: 'PROPERTY'}] - -const OntologyTerms = () => { - const itemsStore = useItemsStore(sectionApi); - const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["short_term", "term"], {type: ''}); - - return ( - - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search Terms'/> - - itemsSearch.handleFiltersChange({type: e})}/> - - - - - ) -} - -export default OntologyTerms \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/app/project/list-table.js b/mapping_workbench/frontend/src/sections/app/project/list-table.js index ed02fc5af..5d29b9e9c 100644 --- a/mapping_workbench/frontend/src/sections/app/project/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/project/list-table.js @@ -1,33 +1,33 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronDownIcon from '@untitled-ui/icons-react/build/esm/ChevronDown'; -import ChevronRightIcon from '@untitled-ui/icons-react/build/esm/ChevronRight'; -import CardContent from '@mui/material/CardContent'; -import Divider from '@mui/material/Divider'; +import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; +import CleaningServicesOutlinedIcon from '@mui/icons-material/CleaningServicesOutlined'; + import Grid from '@mui/material/Grid'; -import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; +import Divider from '@mui/material/Divider'; +import TableRow from '@mui/material/TableRow'; +import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Button from "@mui/material/Button"; +import CardContent from '@mui/material/CardContent'; +import {useProjects} from "src/hooks/use-projects"; +import {Scrollbar} from 'src/components/scrollbar'; +import timeTransformer from "src/utils/time-transformer"; +import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from 'src/components/property-list'; +import {SeverityPill} from "src/components/severity-pill"; import {PropertyListItem} from 'src/components/property-list-item'; -import {Scrollbar} from 'src/components/scrollbar'; +import {ChevronButton} from 'src/sections/components/chevron-button'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; +import TablePagination from "src/sections/components/table-pagination-pages"; +import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {SeverityPill} from "../../../components/severity-pill"; -import {useProjects} from "../../../hooks/use-projects"; -import TablePagination from "../../components/table-pagination"; -import {useGlobalState} from "../../../hooks/use-global-state"; -import timeTransformer from "../../../utils/time-transformer"; -import TableSorterHeader from "../../components/table-sorter-header"; -import ConfirmDialog from "../../../components/app/dialog/confirm-dialog"; export const ListTable = (props) => { @@ -62,18 +62,17 @@ export const ListTable = (props) => { ) } return ( - <> - + + @@ -92,9 +91,7 @@ export const ListTable = (props) => { - - Actions - + @@ -125,11 +122,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> { {timeTransformer(item.created_at, timeSetting)} - - projectStore.handleDeleteProject(item_id)} - itemctx={new ForListItemAction(item_id, sectionApi)}/> - + + projectStore.handleSessionProjectChange(item_id)} + title='Select' + icon={} + /> + projectStore.handleProjectCleanup(item_id)} + icon={} + title='Cleanup' + /> + projectStore.handleDeleteProject(item_id)} + itemctx={new ForListItemAction(item_id, sectionApi)}/> + {isCurrent && ( @@ -298,8 +288,8 @@ export const ListTable = (props) => {
- - + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js index 571561095..ed5889482 100644 --- a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js @@ -2,14 +2,14 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; import moment from "moment"; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import List from '@mui/material/List'; import Grid from '@mui/material/Grid'; -import Stack from '@mui/material/Stack'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; -import Button from '@mui/material/Button'; -import SvgIcon from '@mui/material/SvgIcon'; +import Stack from '@mui/material/Stack'; import Popover from '@mui/material/Popover'; import Divider from '@mui/material/Divider'; import ListItem from '@mui/material/ListItem'; @@ -17,7 +17,6 @@ import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableCell from '@mui/material/TableCell'; import TableBody from '@mui/material/TableBody'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -26,8 +25,10 @@ import {Scrollbar} from 'src/components/scrollbar'; import timeTransformer from "src/utils/time-transformer"; import {useGlobalState} from "src/hooks/use-global-state"; import {SeverityPill} from "src/components/severity-pill"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import TablePagination from "src/sections/components/table-pagination-pages"; import {mapStatusColor, TaskActions, TaskLine, taskProgressStatus as taskStatuses} from "./task-actions"; @@ -88,214 +89,205 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - - - - - - - Started By - - - - - - Duration - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item.task_id; - const isCurrent = item_id === currentItem; - return ( - - - - {(item.exception_message || !!item.warnings?.length) && - handleItemToggle(item_id)}> - - - - } - - - - {item.task_name} - - - - {timeTransformer(item.created_at, timeSetting)} - - - {timeTransformer(item.started_at, timeSetting)} - - - {item?.created_by} - - - {timeTransformer(item.finished_at, timeSetting)} - - - {item?.finished_at ? moment.utc(moment(item?.finished_at).diff(moment(item?.started_at))).format("HH:mm:ss") : '-'} - - - handlePopoverEnter(event, item)} - onMouseLeave={handlePopoverLeave}> - - {item?.task_status} - - - - - - {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) - && - } - - - - {isCurrent && ( - + + +
+ + + + + + + + + + + + + + Started By + + + + + + Duration + + + + + + + + + {items.map((item) => { + const item_id = item.task_id; + const isCurrent = item_id === currentItem; + return ( + + - - - {item.exception_message && <> - - Message - - - - {nl2br(item.exception_message)} - - } - {!!item.warnings?.length && - <> + {(item.exception_message || !!item.warnings?.length) && + handleItemToggle(item_id)} + isCurrent={isCurrent}/>} + + + + {item.task_name} + + + + {timeTransformer(item.created_at, timeSetting)} + + + {timeTransformer(item.started_at, timeSetting)} + + + {item?.created_by} + + + {timeTransformer(item.finished_at, timeSetting)} + + + {item?.finished_at ? moment.utc(moment(item?.finished_at).diff(moment(item?.started_at))).format("HH:mm:ss") : '-'} + + + handlePopoverEnter(event, item)} + onMouseLeave={handlePopoverLeave}> + + {item?.task_status} + + + + + + + {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) + && onCancelAction(item_id)} + title='Cancel' + icon={} + > + Cancel + + } + onDeleteAction(item_id)} + title='Delete' + icon={} + /> + + + + {isCurrent && ( + + + + + {item.exception_message && <> - Warning + color="error"> + Message - - {item.warnings.map((warning, key) => - - {warning} - - )} - + + {nl2br(item.exception_message)} + } - - - - - - )} - - ); - })} - -
- - - - + {!!item.warnings?.length && + <> + + Warning + + + + {item.warnings.map((warning, key) => + + {warning} + + )} + + } + + + + + + )} + + ); + })} + + + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js b/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js index 4680ac206..c18f2f9b1 100644 --- a/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js +++ b/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js @@ -1,3 +1,4 @@ +import ApiIcon from '@mui/icons-material/Api'; import Link from 'next/link'; import {useRouter} from 'next/router'; @@ -20,9 +21,7 @@ const ArrowButton = ({children, id, icon, style, active, href = '#', first, last } -const ArrowButtonGroup = ({ - children - }) => { +const ArrowButtonGroup = ({children}) => { return
{children} @@ -46,7 +45,7 @@ export const ArrowButtons = () => { } href={paths.app.fields_and_nodes.develop.index}> Elements Definition @@ -78,7 +77,7 @@ export const ArrowButtons = () => { style={{marginRight: '4px'}}/>} href={paths.app.mapping_packages.index} last> - Export Mapping + Mapping Packages ) } \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/components/chevron-button.js b/mapping_workbench/frontend/src/sections/components/chevron-button.js new file mode 100644 index 000000000..6eafbe096 --- /dev/null +++ b/mapping_workbench/frontend/src/sections/components/chevron-button.js @@ -0,0 +1,12 @@ +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import IconButton from '@mui/material/IconButton'; + +export const ChevronButton = ({isCurrent, onClick}) => { + return + + +} \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js new file mode 100644 index 000000000..f64d17397 --- /dev/null +++ b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js @@ -0,0 +1,72 @@ +import {useState} from 'react'; + +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; + +import Stack from '@mui/material/Stack'; +import {Pagination} from '@mui/material'; +import Button from '@mui/material/Button'; +import Popover from '@mui/material/Popover'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; + +const TablePagination = ({ + children, + onRowsPerPageChange, + rowsPerPage, + rowsPerPageOptions, + onPageChange, + count, + page, + ...otherProps + }) => { + + const [rppAnchor, setRppAnchor] = useState(null) + const handleChange = (event) => { + onRowsPerPageChange(event) + setRppAnchor(null) + } + + return ( + <> + {/**/} + {children} + + + + + setRppAnchor(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + {rowsPerPageOptions.map(option => + {option.label ?? option} + )} + + onPageChange(e,page - 1)} + count={Math.ceil(count / (rowsPerPage > 0 ? rowsPerPage : count))} + {...otherProps}/> + + + ) +} + +export default TablePagination + diff --git a/mapping_workbench/frontend/src/sections/components/table-search-bar.js b/mapping_workbench/frontend/src/sections/components/table-search-bar.js index 5a7cf5e09..efeac8b39 100644 --- a/mapping_workbench/frontend/src/sections/components/table-search-bar.js +++ b/mapping_workbench/frontend/src/sections/components/table-search-bar.js @@ -7,8 +7,7 @@ import ClearIcon from '@mui/icons-material/Clear'; import IconButton from '@mui/material/IconButton'; import SearchIcon from '@mui/icons-material/Search'; -export const TableSearchBar = (props) => { - const {onChange, value, placeholder} = props; +export const TableSearchBar = ({onChange, value, placeholder}) => { const [localValue, setLocalValue] = useState(value ?? '') const queryRef = useRef(null); @@ -23,7 +22,6 @@ export const TableSearchBar = (props) => { onChange('') } - return ( { direction="row" onSubmit={(event) => handleChange(event, localValue)} spacing={2} - sx={{p: 1}} + sx={{p: '3px'}} > onChange(localValue)} disabled={value === localValue}> diff --git a/mapping_workbench/frontend/src/theme/colors.js b/mapping_workbench/frontend/src/theme/colors.js index 4160ac766..67d0b89f4 100644 --- a/mapping_workbench/frontend/src/theme/colors.js +++ b/mapping_workbench/frontend/src/theme/colors.js @@ -12,6 +12,7 @@ const withAlphas = (color) => { }; export const neutral = { + 0: '#FFF', 50: '#F8F9FA', 100: '#F3F4F6', 200: '#E5E7EB', diff --git a/mapping_workbench/frontend/src/theme/light/create-components.js b/mapping_workbench/frontend/src/theme/light/create-components.js index ad4a0174f..2466d1566 100644 --- a/mapping_workbench/frontend/src/theme/light/create-components.js +++ b/mapping_workbench/frontend/src/theme/light/create-components.js @@ -143,7 +143,7 @@ export const createComponents = ({ palette }) => { styleOverrides: { root: { [`& .${tableCellClasses.root}`]: { - backgroundColor: palette.neutral[50], + backgroundColor: palette.neutral[0], color: palette.neutral[700] } }