Skip to content

Commit

Permalink
MWB-888: add tabs for elements definition
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Dec 6, 2024
1 parent 00baf79 commit a239994
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 160 deletions.
45 changes: 8 additions & 37 deletions mapping_workbench/frontend/src/pages/app/fields-and-nodes/develop/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,29 @@ import {parseString} from "xml2js";
import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';

import Link from "@mui/material/Link";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Autocomplete from "@mui/material/Autocomplete";

import {paths} from "src/paths";
import {Seo} from "src/components/seo";
import {sessionApi} from "src/api/session";
import {Layout as AppLayout} from 'src/layouts/app';
import {RouterLink} from "src/components/router-link";
import File from 'src/sections/app/fields-and-nodes/file'
import {FormTextField} from "src/components/app/form/text-field";
import {BreadcrumbsSeparator} from "src/components/breadcrumbs-separator";
import {executeXPaths} from "src/sections/app/fields-and-nodes/utils";
import {ElementsDefinitionTabs} from 'src/sections/app/elements-definition';
import {fieldsRegistryApi as fieldsRegistry} from 'src/api/fields-registry'
import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
import XpathEvaluator from "src/sections/app/fields-and-nodes/xpath-evaluator";
import RelativeXpathFinder from "src/sections/app/fields-and-nodes/relative-xpath-finder";
import {genericTripleMapFragmentsApi as tripleMapFragments} from "src/api/triple-map-fragments/generic";
import {sessionApi} from "src/api/session";
import {executeXPaths} from "src/sections/app/fields-and-nodes/utils";

const SECTION_TITLE = 'Fields Develop'

const Page = () => {
const [files, setFiles] = useState([])
Expand All @@ -41,7 +38,6 @@ const Page = () => {
const [xPaths, setXPaths] = useState([])
const [xmlContent, setXmlContent] = useState('')
const [fileContent, setFileContent] = useState()
const SECTION_TITLE = 'Fields Develop'

useEffect(() => {
const project = sessionApi.getSessionProject()
Expand Down Expand Up @@ -146,34 +142,9 @@ const Page = () => {
<>
<Seo title={`App: ${SECTION_TITLE} List`}/>
<Stack spacing={4}>
<Stack
direction="row"
justifyContent="space-between"
spacing={4}
>
<Stack spacing={1}>
<Typography variant="h4">
{SECTION_TITLE}
</Typography>
<Breadcrumbs separator={<BreadcrumbsSeparator/>}>
<Link
color="text.primary"
component={RouterLink}
href={paths.index}
variant="subtitle2"
>
App
</Link>
<Typography
color="text.secondary"
variant="subtitle2"
>
{SECTION_TITLE}
</Typography>
</Breadcrumbs>
</Stack>
<Stack>
<ElementsDefinitionTabs/>
</Stack>

<form onSubmit={formik.handleSubmit}>
<Card sx={{p: 2}}>
<Grid container
Expand Down Expand Up @@ -289,7 +260,7 @@ const Page = () => {
</Grid>
</Grid>
<Stack direction='row'
sx={{mt:2}}>
sx={{mt: 2}}>
<Button type='submit'
disabled={!!fileError || !xmlContent || formik.isSubmitting}>Save</Button>
<Button onClick={handleClear}
Expand Down
102 changes: 36 additions & 66 deletions mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,9 @@ import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';

import Card from '@mui/material/Card';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Button from "@mui/material/Button";
import SvgIcon from "@mui/material/SvgIcon";
import Divider from "@mui/material/Divider";
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';

import {paths} from 'src/paths';
import {Seo} from 'src/components/seo';
Expand All @@ -22,15 +18,15 @@ import useItemsSearch from 'src/hooks/use-items-search';
import {ListTable} from 'src/sections/app/fields-registry/list-table';
import {TableSearchBar} from "src/sections/components/table-search-bar";
import {fieldsOverviewApi as sectionApi} from 'src/api/fields-overview';
import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator';
import {ElementsDefinitionTabs} from 'src/sections/app/elements-definition';


const filterValues = [{label: 'All', value: ''},
const FILTER_VALUE = [
{label: 'All', value: ''},
{label: 'Node', value: 'node'},
{label: 'Field', value: 'field'}]

const searchColumns = ["sdk_element_id", "relative_xpath", "absolute_xpath"];
{label: 'Field', value: 'field'}
]

const SEARCH_COLUMNS = ["sdk_element_id", "relative_xpath", "absolute_xpath"];

const useItemsStore = () => {
const [state, setState] = useState({
Expand Down Expand Up @@ -61,79 +57,53 @@ const useItemsStore = () => {

const Page = () => {
const itemsStore = useItemsStore();
const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, searchColumns, {element_type: ''});
const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, SEARCH_COLUMNS, {element_type: ''});

usePageView();

return (
<>
<Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
<Stack spacing={4}>
<Stack>
<ElementsDefinitionTabs/>
</Stack>

<Stack
alignItems="center"
justifyContent='end'
direction="row"
justifyContent="space-between"
spacing={4}
spacing={3}
>
<Stack spacing={1}>
<Typography variant="h4">
{sectionApi.SECTION_TITLE}
</Typography>
<Breadcrumbs separator={<BreadcrumbsSeparator/>}>
<Link
color="text.primary"
component={RouterLink}
href={paths.index}
variant="subtitle2"
>
App
</Link>
<Typography
color="text.secondary"
variant="subtitle2"
>
{sectionApi.SECTION_TITLE}
</Typography>
</Breadcrumbs>
</Stack>
<Stack
alignItems="center"
direction="row"
spacing={3}
<Button
component={RouterLink}
href={paths.app.fields_and_nodes.overview.elements.create}
id="add-field-button"
startIcon={(
<AddIcon/>
)}
variant="contained"
>
Add
</Button>
<Button
id="import_shema_button"
component={RouterLink}
href={paths.app.fields_and_nodes.overview.import}
startIcon={(
<UploadIcon/>
)}
variant="contained"
>
<Button
component={RouterLink}
href={paths.app.fields_and_nodes.overview.elements.create}
id="add-field-button"
startIcon={(
<SvgIcon>
<AddIcon/>
</SvgIcon>
)}
variant="contained"
>
Add
</Button>
<Button
id="import_shema_button"
component={RouterLink}
href={paths.app.fields_and_nodes.overview.import}
startIcon={(
<SvgIcon>
<UploadIcon/>
</SvgIcon>
)}
variant="contained"
>
Import schema from github
</Button>
</Stack>
Import schema from github
</Button>

</Stack>
<Card>
<TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
value={itemsSearch.state.search[0]}/>
<Divider/>
<Filter values={filterValues}
<Filter values={FILTER_VALUE}
value={itemsSearch.state.filters.element_type}
onValueChange={e => itemsSearch.handleFiltersChange({element_type: e})}/>
<Divider/>
Expand Down
39 changes: 4 additions & 35 deletions mapping_workbench/frontend/src/pages/app/fields-and-nodes/tree-view/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,20 @@
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Card from '@mui/material/Card';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

import {paths} from 'src/paths';
import {Seo} from 'src/components/seo';
import {Layout as AppLayout} from 'src/layouts/app';
import {RouterLink} from 'src/components/router-link';
import TreeView from "src/sections/app/tree-view/tree-view";
import {fieldsRegistryApi as sectionApi} from 'src/api/fields-registry';
import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator';

import {ElementsDefinitionTabs} from 'src/sections/app/elements-definition';

export const Page = () => {

return (
<>
<Seo title={`App: ${sectionApi.SECTION_TREE_TITLE} List`}/>
<Stack spacing={4}>
<Stack
direction="row"
justifyContent="space-between"
spacing={4}
>
<Stack spacing={1}>
<Typography variant="h4">
{sectionApi.SECTION_TREE_TITLE}
</Typography>
<Breadcrumbs separator={<BreadcrumbsSeparator/>}>
<Link
color="text.primary"
component={RouterLink}
href={paths.index}
variant="subtitle2"
>
App
</Link>
<Typography
color="text.secondary"
variant="subtitle2"
>
{sectionApi.SECTION_TREE_TITLE}
</Typography>
</Breadcrumbs>
</Stack>
</Stack>
<Stack>
<ElementsDefinitionTabs/>
</Stack>
<Card>
<TreeView sectionApi={sectionApi}/>
</Card>
Expand Down
30 changes: 30 additions & 0 deletions mapping_workbench/frontend/src/sections/app/elements-definition/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import {useRouter} from 'next/router';
import {paths} from '../../../paths';

const TABS = [
{
label: 'Define',
value: paths.app.fields_and_nodes.develop.index
},
{
label: 'Tree View',
value: paths.app.fields_and_nodes.tree_view.index
},
{
label: 'Overview',
value: paths.app.fields_and_nodes.overview.index
}]

export const ElementsDefinitionTabs = () => {
const router = useRouter()
const handleTabsChange = (event, value) => router.push(value)

return <Tabs value={router.pathname}
onChange={handleTabsChange}>
{TABS.map(tab => <Tab key={tab.value}
label={tab.label}
value={tab.value}/>)}
</Tabs>
}
39 changes: 17 additions & 22 deletions mapping_workbench/frontend/src/sections/app/source-and-target/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,25 @@ import Tabs from '@mui/material/Tabs';
import {useRouter} from 'next/router';
import {paths} from '../../../paths';

const TABS = [
{
label: 'Source Files',
value: paths.app.test_data_suites.index
}, {
label: 'Ontology Files',
value: paths.app.ontology_files.index
},
{
label: 'Ontology Terms',
value: paths.app.ontology_terms.index
}, {
label: 'Namespaces',
value: paths.app.ontology_namespaces.index
}]

export const SourceAndTargetTabs = () => {
const router = useRouter()

const TABS = [
{
label: 'Source Files',
value: paths.app.test_data_suites.index
}, {
label: 'Ontology Files',
value: paths.app.ontology_files.index
},
{
label: 'Ontology Terms',
value: paths.app.ontology_terms.index
}, {
label: 'Namespaces',
value: paths.app.ontology_namespaces.index
}]

const handleTabsChange = (event, value) => {
return router.push(value)
}

console.log(router)
const handleTabsChange = (event, value) => router.push(value)

return <Tabs value={router.pathname}
onChange={handleTabsChange}>
Expand Down

0 comments on commit a239994

Please sign in to comment.