MWB-906: update pagination tasks and projects

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

Hide file tree

Showing 10 changed files with 361 additions and 396 deletions.
diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js
@@ -1,3 +1,4 @@
+import Paper from '@mui/material/Paper';
 import {useEffect, useState} from 'react';
 import {saveAs} from 'file-saver';
 
@@ -86,10 +87,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"
@@ -121,19 +122,17 @@ const Page = () => {
                     </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}
+                />
             </Stack>
 
             <PackageImporter

diff --git a/mapping_workbench/frontend/src/pages/app/projects/index.js b/mapping_workbench/frontend/src/pages/app/projects/index.js
@@ -1,7 +1,7 @@
 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 Typography from '@mui/material/Typography';
@@ -53,11 +53,11 @@ export const Page = () => {
                     justifyContent="space-between"
                     spacing={4}
                 >
-                    <Card>
+                    <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}
-                        placeholder='Search by Project Title'/>
-                    </Card>
+                                        placeholder='Search by Project Title'/>
+                    </Paper>
                     <Stack
                         alignItems="center"
                         direction="row"
@@ -74,19 +74,17 @@ export const Page = () => {
                         </Button>
                     </Stack>
                 </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}
-                    />
-                </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}
+                />
             </Stack>
         </>
     )

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
@@ -2,7 +2,7 @@ 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';
 
@@ -64,10 +64,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"
@@ -84,23 +84,20 @@ const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <Card>
-
-                    <FileCollectionListTable
-                        onPageChange={itemsSearch.handlePageChange}
-                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                        page={itemsSearch.state.page}
-                        items={itemsSearch.pagedItems}
-                        itemsForced={itemsStore.force}
-                        count={itemsStore.itemsCount}
-                        sort={itemsSearch.state.sort}
-                        onSort={itemsSearch.handleSort}
-                        rowsPerPage={itemsSearch.state.rowsPerPage}
-                        sectionApi={sectionApi}
-                        fileResourceApi={fileResourceApi}
-                        getItems={itemsStore.handleItemsGet}
-                    />
-                </Card>
+                <FileCollectionListTable
+                    onPageChange={itemsSearch.handlePageChange}
+                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                    page={itemsSearch.state.page}
+                    items={itemsSearch.pagedItems}
+                    itemsForced={itemsStore.force}
+                    count={itemsStore.itemsCount}
+                    sort={itemsSearch.state.sort}
+                    onSort={itemsSearch.handleSort}
+                    rowsPerPage={itemsSearch.state.rowsPerPage}
+                    sectionApi={sectionApi}
+                    fileResourceApi={fileResourceApi}
+                    getItems={itemsStore.handleItemsGet}
+                />
             </Stack>
         </>
     );

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
@@ -2,7 +2,7 @@ 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';
 
@@ -63,10 +63,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"
@@ -83,23 +83,21 @@ const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <Card>
-                    <FileCollectionListTable
-                        onPageChange={itemsSearch.handlePageChange}
-                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                        page={itemsSearch.state.page}
-                        items={itemsSearch.pagedItems}
-                        itemsForced={itemsStore.force}
-                        count={itemsStore.itemsCount}
-                        rowsPerPage={itemsSearch.state.rowsPerPage}
-                        sort={itemsSearch.state.sort}
-                        onSort={itemsSearch.handleSort}
-                        sectionApi={sectionApi}
-                        getItems={itemsStore.handleItemsGet}
-                        selectable={selectable}
-                        fileResourceApi={fileResourcesApi}
-                    />
-                </Card>
+                <FileCollectionListTable
+                    onPageChange={itemsSearch.handlePageChange}
+                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                    page={itemsSearch.state.page}
+                    items={itemsSearch.pagedItems}
+                    itemsForced={itemsStore.force}
+                    count={itemsStore.itemsCount}
+                    rowsPerPage={itemsSearch.state.rowsPerPage}
+                    sort={itemsSearch.state.sort}
+                    onSort={itemsSearch.handleSort}
+                    sectionApi={sectionApi}
+                    getItems={itemsStore.handleItemsGet}
+                    selectable={selectable}
+                    fileResourceApi={fileResourcesApi}
+                />
             </Stack>
         </>
     )

diff --git a/mapping_workbench/frontend/src/pages/app/tasks/index.js b/mapping_workbench/frontend/src/pages/app/tasks/index.js
@@ -144,25 +144,23 @@ export const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <Paper>
-                    <TableLoadWrapper dataState={{load: state.load}}
-                                      lines={5}
-                                      data={state.items}>
-                        <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}
-                            onCancelAction={handleCancelAction}
-                            onDeleteAction={handleDeleteAction}
-                        />
-                    </TableLoadWrapper>
-                </Paper>
+                <TableLoadWrapper dataState={{load: state.load}}
+                                  lines={5}
+                                  data={state.items}>
+                    <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}
+                        onCancelAction={handleCancelAction}
+                        onDeleteAction={handleDeleteAction}
+                    />
+                </TableLoadWrapper>
             </Stack>
         </>
     )

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
@@ -2,22 +2,18 @@ import Paper from '@mui/material/Paper';
 import {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 
-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 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';