MWB-906: update pagination cm and tm

meaningfy-ws · Dec 12, 2024 · 4695164 · 4695164
1 parent 1d93db0
commit 4695164
Show file tree

Hide file tree

Showing 13 changed files with 435 additions and 462 deletions.
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
@@ -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,18 +97,17 @@ export const Page = () => {
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE}`}/>
             <Stack spacing={4}>
-
                 <ConceptualMappingTabs/>
                 <Stack
                     direction="row"
                     justifyContent="space-between"
                     spacing={4}
                 >
-                    <Card>
+                    <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}
                                         placeholder='Search Terms'/>
-                    </Card>
+                    </Paper>
                     <Button
                         id="add_button"
                         startIcon={<AddIcon/>}
@@ -117,21 +116,19 @@ export const Page = () => {
                         Add
                     </Button>
                 </Stack>
-                <Card>
-                    <ListTable
-                        onPageChange={itemsSearch.handlePageChange}
-                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                        onSort={itemsSearch.handleSort}
-                        sort={itemsSearch.state.sort}
-                        page={itemsSearch.state.page}
-                        items={itemsSearch.pagedItems}
-                        count={itemsSearch.count}
-                        rowsPerPage={itemsSearch.state.rowsPerPage}
-                        sectionApi={sectionApi}
-                        onEdit={handleEdit}
-                        onDelete={handleDelete}
-                    />
-                </Card>
+                <ListTable
+                    onPageChange={itemsSearch.handlePageChange}
+                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                    onSort={itemsSearch.handleSort}
+                    sort={itemsSearch.state.sort}
+                    page={itemsSearch.state.page}
+                    items={itemsSearch.pagedItems}
+                    count={itemsSearch.count}
+                    rowsPerPage={itemsSearch.state.rowsPerPage}
+                    sectionApi={sectionApi}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                />
                 <AddEditDrawer open={state.openDrawer}
                                onClose={handleCloseDrawer}
                                item={state.item}

diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js
@@ -1,5 +1,3 @@
-import FilterListIcon from '@mui/icons-material/FilterList';
-import Popover from '@mui/material/Popover';
 import {useState} from 'react';
 import {useFormik} from 'formik';
 import {useTranslation} from "react-i18next";
@@ -8,17 +6,18 @@ import * as Yup from 'yup';
 import AddIcon from '@mui/icons-material/Add';
 import CachedIcon from '@mui/icons-material/Cached';
 
-import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Alert from "@mui/material/Alert";
 import Switch from '@mui/material/Switch';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
+import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
 import Checkbox from '@mui/material/Checkbox';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 import {paths} from 'src/paths';
@@ -98,11 +97,11 @@ const Page = () => {
                 >
                     <Stack direction='row'
                            spacing={3}>
-                        <Card>
+                        <Paper>
                             <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                             value={itemsSearch.state.search[0]}/>
-                        </Card>
-                        <Card>
+                        </Paper>
+                        <Paper>
                             <Button variant='text'
                                     color={itemsSearch.state.filters.terms ? 'primary' : 'inherit'}
                                     onClick={e => setFilterPopover(e.currentTarget)}
@@ -124,7 +123,7 @@ const Page = () => {
                                         value={itemsSearch.state.filters.terms}
                                         onValueChange={e => itemsSearch.handleFiltersChange({terms: e})}/>
                             </Popover>
-                        </Card>
+                        </Paper>
                     </Stack>
                     <Stack
                         alignItems="center"
@@ -155,27 +154,24 @@ const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <Card>
-                    <Stack direction='row'
-                           padding={3}>
-                        <FormControlLabel control={<Switch checked={detailedView}
-                                                           onChange={e => setDetailedView(e.target.checked)}/>}
-                                          label='Detailed View'/>
-                    </Stack>
-                    <Divider/>
-                    <ListTable
-                        sectionApi={sectionApi}
-                        items={itemsSearch.pagedItems}
-                        count={itemsSearch.count}
-                        detailedView={detailedView}
-                        page={itemsSearch.state.page}
-                        onPageChange={itemsSearch.handlePageChange}
-                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                        rowsPerPage={itemsSearch.state.rowsPerPage}
-                        onSort={itemsSearch.handleSort}
-                        sort={itemsSearch.state.sort}
-                    />
-                </Card>
+                <Stack direction='row'
+                       padding={3}>
+                    <FormControlLabel control={<Switch checked={detailedView}
+                                                       onChange={e => setDetailedView(e.target.checked)}/>}
+                                      label='Detailed View'/>
+                </Stack>
+                <ListTable
+                    sectionApi={sectionApi}
+                    items={itemsSearch.pagedItems}
+                    count={itemsSearch.count}
+                    detailedView={detailedView}
+                    page={itemsSearch.state.page}
+                    onPageChange={itemsSearch.handlePageChange}
+                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                    rowsPerPage={itemsSearch.state.rowsPerPage}
+                    onSort={itemsSearch.handleSort}
+                    sort={itemsSearch.state.sort}
+                />
                 <Dialog id='shacl_generate_dialog'
                         open={generateSHACLDialog.open}
                         onClose={generateSHACLDialog.handleClose}

diff --git a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js
@@ -1,14 +1,14 @@
 import {useEffect, useState} from 'react';
 
+
 import AddIcon from '@mui/icons-material/Add';
-import Card from '@mui/material/Card';
 import UploadIcon from '@mui/icons-material/Upload';
 import FilterListIcon from '@mui/icons-material/FilterList';
 
 import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
 import Button from "@mui/material/Button";
 import Popover from '@mui/material/Popover';
-import Divider from "@mui/material/Divider";
 
 import {paths} from 'src/paths';
 import {Seo} from 'src/components/seo';
@@ -74,11 +74,11 @@ const Page = () => {
                        justifyContent='space-between'>
                     <Stack direction='row'
                            spacing={3}>
-                        <Card>
+                        <Paper>
                             <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                             value={itemsSearch.state.search[0]}/>
-                        </Card>
-                        <Card>
+                        </Paper>
+                        <Paper>
                             <Button variant='text'
                                     color={itemsSearch.state.filters.element_type ? 'primary' : 'inherit'}
                                     onClick={e => setFilterPopover(e.currentTarget)}
@@ -100,7 +100,7 @@ const Page = () => {
                                         value={itemsSearch.state.filters.element_type}
                                         onValueChange={e => itemsSearch.handleFiltersChange({element_type: e})}/>
                             </Popover>
-                        </Card>
+                        </Paper>
                     </Stack>
                     <Stack
                         alignItems="center"

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js
@@ -1,6 +1,6 @@
 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 Typography from '@mui/material/Typography';
@@ -35,10 +35,10 @@ const Page = () => {
                     justifyContent="space-between"
                     spacing={4}
                 >
-                    <Card>
+                    <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}/>
-                    </Card>
+                    </Paper>
                     <Stack
                         alignItems="center"
                         direction="row"

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js
@@ -1,6 +1,6 @@
 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 Grid from '@mui/material/Unstable_Grid2';
@@ -40,12 +40,10 @@ const Page = () => {
                     justifyContent="space-between"
                     spacing={4}
                 >
-                    <Stack spacing={1}>
-                        <Card>
-                            <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
-                                            value={itemsSearch.state.search[0]}/>
-                        </Card>
-                    </Stack>
+                    <Paper>
+                        <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
+                                        value={itemsSearch.state.search[0]}/>
+                    </Paper>
                     <Stack
                         alignItems="center"
                         direction="row"

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
@@ -4,10 +4,10 @@ import AddIcon from '@mui/icons-material/Add';
 import SearchIcon from '@mui/icons-material/Search';
 import FilterListIcon from '@mui/icons-material/FilterList';
 
-import Card from '@mui/material/Card';
-import Popover from '@mui/material/Popover';
+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';
@@ -65,12 +65,12 @@ const Page = () => {
                     >
                         <Stack direction='row'
                                spacing={3}>
-                            <Card>
+                            <Paper>
                                 <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                                 value={itemsSearch.state.search[0]}
                                                 placeholder='Search Terms'/>
-                            </Card>
-                            <Card>
+                            </Paper>
+                            <Paper>
                                 <Button variant='text'
                                         color={itemsSearch.state.filters.type ? 'primary' : 'inherit'}
                                         onClick={e => setFilterPopover(e.currentTarget)}
@@ -90,7 +90,7 @@ const Page = () => {
                                             value={itemsSearch.state.filters.type}
                                             onValueChange={e => itemsSearch.handleFiltersChange({type: e})}/>
                                 </Popover>
-                            </Card>
+                            </Paper>
                         </Stack>
                         <Stack alignItems="center"
                                direction="row"

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
@@ -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';
@@ -67,10 +66,10 @@ const Page = () => {
                 </Stack>
                 <Stack direction='row'
                        justifyContent='space-between'>
-                    <Card sx={{p: 0}}>
+                    <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}/>
-                    </Card>
+                    </Paper>
                     <Stack
                         alignItems="center"
                         direction="row"

diff --git a/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js b/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js
@@ -1,10 +1,10 @@
+import Paper from '@mui/material/Paper';
 import {useFormik} from "formik";
 import * as Yup from "yup";
 
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 
-import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 
@@ -50,10 +50,10 @@ const Page = () => {
                     justifyContent="space-between"
                     spacing={4}
                 >
-                    <Card>
+                    <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}/>
-                    </Card>
+                    </Paper>
                     <Stack
                         alignItems="center"
                         direction="row"
@@ -77,19 +77,17 @@ const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <Card>
-                    <ListTable
-                        onPageChange={itemsSearch.handlePageChange}
-                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                        page={itemsSearch.state.page}
-                        items={itemsSearch.pagedItems}
-                        count={itemsSearch.count}
-                        onSort={itemsSearch.handleSort}
-                        sort={itemsSearch.state.sort}
-                        rowsPerPage={itemsSearch.state.rowsPerPage}
-                        sectionApi={sectionApi}
-                    />
-                </Card>
+                <ListTable
+                    onPageChange={itemsSearch.handlePageChange}
+                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                    page={itemsSearch.state.page}
+                    items={itemsSearch.pagedItems}
+                    count={itemsSearch.count}
+                    onSort={itemsSearch.handleSort}
+                    sort={itemsSearch.state.sort}
+                    rowsPerPage={itemsSearch.state.rowsPerPage}
+                    sectionApi={sectionApi}
+                />
                 <FileUploader
                     onClose={uploadDialog.handleClose}
                     open={uploadDialog.open}