Fix/texture (#330)

* fix: import svg instead of setting bg image

* fix: add user pagination

frontend/src/component/layout/MainLayout/MainLayout.jsx

@@ -10,6 +10,7 @@ import Header from '../../menu/Header/Header';
 import Footer from '../../menu/Footer/Footer';
 import Proclamation from '../../common/Proclamation/Proclamation';
 import BreadcrumbNav from '../../common/BreadcrumbNav/BreadcrumbNav';
+import { ReactComponent as Texture } from '../../../assets/img/texture.svg';
 
 const useStyles = makeStyles(theme => ({
     container: {
@@ -35,13 +36,28 @@ const MainLayout = ({ children, location, uiConfig }) => {
             <Grid container className={muiStyles.container}>
                 <div className={classnames(styles.contentWrapper)}>
                     <Grid item className={styles.content} xs={12} sm={12}>
-                        <div className={muiStyles.contentContainer}>
+                        <div
+                            className={muiStyles.contentContainer}
+                            style={{ zIndex: '100' }}
+                        >
                             <BreadcrumbNav />
                             <Proclamation toast={uiConfig.toast} />
                             {children}
                         </div>
                         <ErrorContainer />
                     </Grid>
+                    <div style={{ overflow: 'hidden' }}>
+                        <div
+                            style={{
+                                position: 'fixed',
+                                right: '0',
+                                bottom: '-4px',
+                                zIndex: '1',
+                            }}
+                        >
+                            <Texture />
+                        </div>
+                    </div>
                 </div>
                 <Footer />
             </Grid>

frontend/src/component/menu/Footer/Footer.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React from 'react';
 
 import { List, ListItem, ListItemText, Grid } from '@material-ui/core';
 

frontend/src/component/menu/Footer/Footer.module.scss

@@ -1,21 +0,0 @@
-.list {
-    padding: 0;
-    margin: 0;
-}
-
-.listItem {
-    padding: 0;
-    margin: 0;
-}
-
-.listItem a {
-    text-decoration: none;
-    color: #000;
-}
-
-.footer {
-    background: #fff;
-    padding: 2rem 4rem;
-    color: #000;
-    width: 100%;
-}

frontend/src/component/menu/Footer/Footer.styles.js

@@ -3,9 +3,10 @@ import { makeStyles } from '@material-ui/styles';
 export const useStyles = makeStyles(theme => ({
     footer: {
         background: theme.palette.footer.background,
-        padding: '2rem 4rem',
+        padding: '2.5rem 4rem',
         width: '100%',
         flexGrow: 1,
+        zIndex: 100,
     },
     list: {
         padding: 0,

frontend/src/component/styles.module.scss

@@ -23,10 +23,6 @@
     flex: 1;
     width: 100%;
     background-color: #ecebeb;
-    background-image: url('../assets/img/texture.svg');
-    background-repeat: no-repeat;
-    background-position-x: right;
-    background-position-y: bottom;
 }
 
 .content {

frontend/src/page/admin/users/UsersList/UsersList.jsx

@@ -21,6 +21,8 @@ import useAdminUsersApi from '../../../../hooks/api/actions/useAdminUsersApi/use
 import UserListItem from './UserListItem/UserListItem';
 import loadingData from './loadingData';
 import useLoading from '../../../../hooks/useLoading';
+import usePagination from '../../../../hooks/usePagination';
+import PaginateUI from '../../../../component/common/PaginateUI/PaginateUI';
 
 function UsersList({ location, closeDialog, showDialog }) {
     const { users, roles, refetch, loading } = useUsers();
@@ -42,6 +44,8 @@ function UsersList({ location, closeDialog, showDialog }) {
     const [delUser, setDelUser] = useState();
     const [updateDialog, setUpdateDialog] = useState({ open: false });
     const ref = useLoading(loading);
+    const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
+        usePagination(users, 50);
 
     const closeDelDialog = () => {
         setDelDialog(false);
@@ -131,7 +135,7 @@ function UsersList({ location, closeDialog, showDialog }) {
             ));
         }
 
-        return users.map(user => {
+        return page.map(user => {
             return (
                 <UserListItem
                     key={user.id}
@@ -164,6 +168,13 @@ function UsersList({ location, closeDialog, showDialog }) {
                     </TableRow>
                 </TableHead>
                 <TableBody>{renderUsers()}</TableBody>
+                <PaginateUI
+                    pages={pages}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                    nextPage={nextPage}
+                    prevPage={prevPage}
+                />
             </Table>
             <br />
 

frontend/src/page/admin/users/index.js

@@ -9,10 +9,12 @@ import { ADMIN } from '../../../component/AccessProvider/permissions';
 import { Alert } from '@material-ui/lab';
 import HeaderTitle from '../../../component/common/HeaderTitle';
 import { Button } from '@material-ui/core';
+import { useStyles } from './index.styles';
 
 const UsersAdmin = ({ history }) => {
     const { hasAccess } = useContext(AccessContext);
     const [showDialog, setDialog] = useState(false);
+    const styles = useStyles();
 
     const openDialog = e => {
         e.preventDefault();
@@ -27,6 +29,7 @@ const UsersAdmin = ({ history }) => {
         <div>
             <AdminMenu history={history} />
             <PageContent
+                bodyClass={styles.userListBody}
                 headerContent={
                     <HeaderTitle
                         title="Users"

frontend/src/page/admin/users/index.styles.js

@@ -0,0 +1,9 @@
+import { makeStyles } from '@material-ui/styles';
+
+export const useStyles = makeStyles(theme => ({
+    userListBody: {
+        paddingBottom: '4rem',
+        minHeight: '50vh',
+        position: 'relative',
+    },
+}));