feature/MWB12-34

mapping_workbench/frontend/src/hooks/use-items-store.js

@@ -1,16 +1,19 @@
-import PropTypes from 'prop-types';
 import {useEffect, useState} from 'react';
 
 export const useItemsStore = (sectionApi) => {
     const [state, setState] = useState({
         items: [],
-        itemsCount: 0
+        itemsCount: 0,
+        load: true
     });
 
     const handleItemsGet = () => {
         sectionApi.getItems()
             .then(res => setState({items: res.items, itemsCount: res.count}))
-            .catch(err => console.error(err))
+            .catch(err => {
+                setState(prev => ({...prev, error: true}))
+                console.error(err)
+            })
     }
 
     useEffect(() => {

mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js

@@ -17,6 +17,7 @@ import {conceptualMappingRulesApi as sectionApi} from 'src/api/conceptual-mappin
 import AddEditDrawer from "src/sections/app/conceptual-mapping-rule/develop/add-edit-drawer";
 import {ConceptualMappingTabs} from 'src/sections/app/conceptual-mapping-rule/conceptual-mapping-tabs';
 import {NavigationTabsWrapper} from '../../../../components/navigation-tabs-wrapper';
+import {TableLoadWrapper} from '../../../../sections/components/table-load-wrapper';
 
 const SEARCH_COLUMNS = [
     "source_structural_element_sdk_element_id",
@@ -34,7 +35,8 @@ export const Page = () => {
 
     const [itemsStore, setItemsStore] = useState({
         items: [],
-        itemsCount: 0
+        itemsCount: 0,
+        load: true
     });
 
 
@@ -46,7 +48,10 @@ export const Page = () => {
     const handleItemsGet = () => {
         sectionApi.getItems({rowsPerPage: -1})
             .then(res => setItemsStore({items: res.items, itemsCount: res.count}))
-            .catch(err => console.warn(err))
+            .catch(err => {
+                setItemsStore(prev => ({...prev, error: true}))
+                console.warn(err)
+            })
     }
 
     const handleGetOntologyFragments = () => {
@@ -120,19 +125,22 @@ export const Page = () => {
                         Add
                     </Button>
                 </Stack>
-                <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}
-                />
+                <TableLoadWrapper data={itemsStore.items}
+                                  dataState={itemsStore}>
+                    <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}
+                    />
+                </TableLoadWrapper>
                 <AddEditDrawer open={state.openDrawer}
                                onClose={handleCloseDrawer}
                                item={state.item}

mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js

@@ -30,12 +30,13 @@ import {Filter} from 'src/sections/components/filter';
 import useItemsSearch from 'src/hooks/use-items-search';
 import {useItemsStore} from 'src/hooks/use-items-store';
 import {TableSearchBar} from 'src/sections/components/table-search-bar';
+import {NavigationTabsWrapper} from 'src/components/navigation-tabs-wrapper';
 import {toastError, toastLoad, toastSuccess} from 'src/components/app-toast';
 import {ListTable} from "src/sections/app/conceptual-mapping-rule/list-table";
 import {conceptualMappingRulesApi as sectionApi} from 'src/api/conceptual-mapping-rules';
 import {ConceptualMappingTabs} from 'src/sections/app/conceptual-mapping-rule/conceptual-mapping-tabs';
 import {MappingPackageFormSelect} from 'src/sections/app/mapping-package/components/mapping-package-form-select';
-import {NavigationTabsWrapper} from '../../../../components/navigation-tabs-wrapper';
+import {TableLoadWrapper} from '../../../../sections/components/table-load-wrapper';
 
 const FILTER_VALUES = [{label: 'All', value: ''},
     {label: 'Valid', value: 'valid'},
@@ -157,17 +158,20 @@ const Page = () => {
                     </Stack>
                 </Stack>
 
-                <ListTable
-                    sectionApi={sectionApi}
-                    items={itemsSearch.pagedItems}
-                    count={itemsSearch.count}
-                    page={itemsSearch.state.page}
-                    onPageChange={itemsSearch.handlePageChange}
-                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                    rowsPerPage={itemsSearch.state.rowsPerPage}
-                    onSort={itemsSearch.handleSort}
-                    sort={itemsSearch.state.sort}
-                />
+                <TableLoadWrapper data={itemsStore.items}
+                                  dataState={itemsStore}>
+                    <ListTable
+                        sectionApi={sectionApi}
+                        items={itemsSearch.pagedItems}
+                        count={itemsSearch.count}
+                        page={itemsSearch.state.page}
+                        onPageChange={itemsSearch.handlePageChange}
+                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                        rowsPerPage={itemsSearch.state.rowsPerPage}
+                        onSort={itemsSearch.handleSort}
+                        sort={itemsSearch.state.sort}
+                    />
+                </TableLoadWrapper>
                 <Dialog id='shacl_generate_dialog'
                         open={generateSHACLDialog.open}
                         onClose={generateSHACLDialog.handleClose}

mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js

@@ -21,6 +21,7 @@ import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {fieldsOverviewApi as sectionApi} from 'src/api/fields-overview';
 import {ElementsDefinitionTabs} from 'src/sections/app/elements-definition';
 import {NavigationTabsWrapper} from '../../../../components/navigation-tabs-wrapper';
+import {TableLoadWrapper} from '../../../../sections/components/table-load-wrapper';
 
 const FILTER_VALUES = [
     {label: 'All', value: ''},
@@ -33,16 +34,17 @@ const SEARCH_COLUMNS = ["sdk_element_id", "relative_xpath", "absolute_xpath"];
 const useItemsStore = () => {
     const [state, setState] = useState({
         items: [],
-        itemsCount: 0
+        itemsCount: 0,
+        load: true
     });
 
     const handleItemsGet = () => {
         sectionApi.getItems({}, null, '/fields_registry/elements')
-            .then(res => setState({
-                items: res.items,
-                itemsCount: res.count
-            }))
-            .catch(err => console.error(err))
+            .then(res => { setState({items: res.items, itemsCount: res.count, load: false}) })
+            .catch(err => {
+                setState(prev => ({...prev, error: true}))
+                console.error(err)
+            })
     }
 
     useEffect(() => {
@@ -63,6 +65,8 @@ const Page = () => {
 
     usePageView();
 
+    // const {load,error} = itemsStore
+
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
@@ -129,17 +133,21 @@ const Page = () => {
                         </Button>
                     </Stack>
                 </Stack>
-                <ListTable
-                    onPageChange={itemsSearch.handlePageChange}
-                    onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
-                    sort={itemsSearch.state.sort}
-                    onSort={itemsSearch.handleSort}
-                    page={itemsSearch.state.page}
-                    items={itemsSearch.pagedItems}
-                    count={itemsSearch.count}
-                    rowsPerPage={itemsSearch.state.rowsPerPage}
-                    sectionApi={sectionApi}
-                />
+
+                <TableLoadWrapper data={itemsStore.items}
+                                  dataState={itemsStore}>
+                    <ListTable
+                        onPageChange={itemsSearch.handlePageChange}
+                        onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
+                        sort={itemsSearch.state.sort}
+                        onSort={itemsSearch.handleSort}
+                        page={itemsSearch.state.page}
+                        items={itemsSearch.pagedItems}
+                        count={itemsSearch.count}
+                        rowsPerPage={itemsSearch.state.rowsPerPage}
+                        sectionApi={sectionApi}
+                    />
+                </TableLoadWrapper>
             </Stack>
         </>
     );

mapping_workbench/frontend/src/pages/app/fields-and-nodes/tree-view/index.js

@@ -1,12 +1,11 @@
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
 
 import {Seo} from 'src/components/seo';
 import {Layout as AppLayout} from 'src/layouts/app';
 import TreeView from "src/sections/app/tree-view/tree-view";
 import {fieldsRegistryApi as sectionApi} from 'src/api/fields-registry';
 import {ElementsDefinitionTabs} from 'src/sections/app/elements-definition';
-import {NavigationTabsWrapper} from '../../../../components/navigation-tabs-wrapper';
+import {NavigationTabsWrapper} from 'src/components/navigation-tabs-wrapper';
 
 export const Page = () => {
     return (
@@ -15,12 +14,9 @@ export const Page = () => {
             <NavigationTabsWrapper>
                 <ElementsDefinitionTabs/>
             </NavigationTabsWrapper>
-            <Stack spacing={4}
-                   mt={5}>
-                <Card>
-                    <TreeView sectionApi={sectionApi}/>
-                </Card>
-            </Stack>
+            <Paper>
+                <TreeView sectionApi={sectionApi}/>
+            </Paper>
         </>
     )
 };

mapping_workbench/frontend/src/sections/app/tree-view/tree-view.js

@@ -1,12 +1,13 @@
 import {useEffect, useState} from "react";
 
-import {SimpleTreeView} from '@mui/x-tree-view/SimpleTreeView';
+import AlbumIcon from '@mui/icons-material/Album';
+import AdjustIcon from '@mui/icons-material/Adjust';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import {TreeItem, treeItemClasses} from "@mui/x-tree-view";
+
 import Stack from "@mui/material/Stack";
-import AlbumIcon from '@mui/icons-material/Album';
-import AdjustIcon from '@mui/icons-material/Adjust';
+import {TreeItem, treeItemClasses} from "@mui/x-tree-view";
+import {SimpleTreeView} from '@mui/x-tree-view/SimpleTreeView';
 import CircularProgress from "@mui/material/CircularProgress";
 import {TableErrorFetching, TableNoData} from "../shacl-validation-report/utils";
 
@@ -51,6 +52,7 @@ const TreeView = (props) => {
 
     if (state.loading) {
         return <Stack justifyContent="center"
+                      padding={3}
         direction="row">
             <CircularProgress/>
         </Stack>

mapping_workbench/frontend/src/sections/components/table-load-wrapper.js

@@ -0,0 +1,33 @@
+import Alert from '@mui/material/Alert';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export const TableLoadWrapper = ({children, data, dataState, lines}) => {
+    if (dataState.load) return <TableSkeleton lines={lines}/>
+    if (dataState.error) return <TableErrorFetching/>
+    if (!data.length) return <TableNoData/>
+    return children
+}
+
+
+export const TableSkeleton = ({lines = 5}) => {
+    return <div>
+        {new Array(lines).fill("").map((e, i) =>
+            <Skeleton key={'line' + i}
+                      height={50}/>)}
+        </div>
+}
+
+export const TableNoData = () => {
+    return <Stack justifyContent="center"
+                  direction="row">
+        <Alert severity="info">No Data !</Alert>
+    </Stack>
+}
+
+export const TableErrorFetching = () => {
+    return <Stack justifyContent="center"
+                  direction="row">
+        <Alert severity="error">Error on fetching data !</Alert>
+    </Stack>
+}