Procházet zdrojové kódy

20230222: integrated pagination for WG, Proposals

mkbeefcake před 1 rokem
rodič
revize
04aab01006

+ 1 - 15
public/index.html

@@ -1,15 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="manifest.json" />
-    <title>JoystreamStats</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script src='bundle.js'></script>
-  </body>
-</html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="manifest.json"/><title>JoystreamStats</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="bundle.js"></script></body></html>

+ 66 - 24
src/components/Dashboard/Proposals.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import SubBlock from "./ui/SubBlock";
 import { ElectedCouncil } from "@/queries";
 import { useProposals } from '@/hooks';
-import { WorkingGroup } from "../../types";
+import { Proposal, WorkingGroup } from "../../types";
 
 import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 import Table from "@material-ui/core/Table";
@@ -13,18 +13,55 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import TableFooter from '@material-ui/core/TableFooter';
 import TablePagination from '@material-ui/core/TablePagination';
-import IconButton from '@material-ui/core/IconButton';
-import FirstPageIcon from '@material-ui/icons/FirstPage';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import LastPageIcon from '@material-ui/icons/LastPage';
+import TablePaginationActions from "./ui/TablePaginationActions";
+
+const useStyles2 = makeStyles({
+	table: {
+		minWidth: 500,
+	}
+})
+
+const ProposalWorker = (props: {proposal: Proposal} ) => {
+	const { proposal } = props;
+
+	return (
+		<TableRow key={proposal.id}>
+			<TableCell>{proposal.title}</TableCell>
+			<TableCell><i>{proposal.createdAt}</i></TableCell>
+			<TableCell>
+				<a
+					href={`https://pioneerapp.xyz/#/proposals/preview/${proposal.id}`}
+					target="_blank"
+					rel="noreferrer"
+					style={{color: 'blue'}}
+				>
+					<i>Link to proposal</i>
+				</a>
+			</TableCell>
+			<TableCell><i>{proposal.status}</i></TableCell>
+		</TableRow>								
+	);
+};
 
 const Proposals = (props: { council: ElectedCouncil | undefined}) => {
   const { council } = props;
   const { proposals, loading, error } = useProposals({ council });
 
+	const classes = useStyles2();
+	const [page, setPage] = React.useState(0);
+	const [rowsPerPage, setRowsPerPage] = React.useState(4);
+	
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
 	return (
-    <SubBlock title="Proposals" stretch={true}>
+    <SubBlock title="Proposals" stretch={6}>
       { !loading && (
 				<>
 					<TableContainer>
@@ -39,26 +76,31 @@ const Proposals = (props: { council: ElectedCouncil | undefined}) => {
 							</TableHead>
 							{proposals && ( <>
 								<TableBody>
-									{
-										proposals.map((proposal) => 
-											<TableRow key={proposal.id}>
-												<TableCell>{proposal.title}</TableCell>
-												<TableCell><i>{proposal.createdAt}</i></TableCell>
-												<TableCell>
-													<a
-														href={`https://pioneerapp.xyz/#/proposals/preview/${proposal.id}`}
-														target="_blank"
-														rel="noreferrer"
-													>
-														Link to porposal
-													</a>
-												</TableCell>
-												<TableCell><i>{proposal.status}</i></TableCell>
-											</TableRow>								
-										)
+									{rowsPerPage > 0 ? 
+											proposals.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
+												.map((proposal) => <ProposalWorker proposal={proposal}/>)
+										: proposals.map((proposal) => <ProposalWorker proposal={proposal} />)
 									}
 								</TableBody>
 							</>)}
+							<TableFooter>
+								<TableRow>
+									<TablePagination
+										rowsPerPageOptions={[4]}
+										colSpan={4}
+										count={proposals ? proposals.length : 0}
+										rowsPerPage={rowsPerPage}
+										page={page}
+										onPageChange={handleChangePage}
+										SelectProps={{
+											inputProps: { 'aria-label': 'rows per page' },
+											native: true,
+										}}
+										onRowsPerPageChange={handleChangeRowsPerPage}
+										ActionsComponent={TablePaginationActions}
+									/>
+								</TableRow>
+							</TableFooter>
 						</Table>
 					</TableContainer>
 				</>

+ 9 - 86
src/components/Dashboard/Workgroup.tsx

@@ -13,81 +13,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import TableFooter from '@material-ui/core/TableFooter';
 import TablePagination from '@material-ui/core/TablePagination';
-import IconButton from '@material-ui/core/IconButton';
-import FirstPageIcon from '@material-ui/icons/FirstPage';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import LastPageIcon from '@material-ui/icons/LastPage';
-
-const useStyles1 = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexShrink: 0,
-      marginLeft: theme.spacing(2.5),
-    },
-  }),
-);
-
-interface TablePaginationActionsProps {
-  count: number;
-  page: number;
-  rowsPerPage: number;
-  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-}
-
-const TablePaginationActions = (props: TablePaginationActionsProps) => {
-  const theme = useTheme();
-  const { count, page, rowsPerPage, onPageChange } = props;
-
-  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		console.log('first button is clicked')
-    onPageChange(event, 0);
-  };
-
-  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		console.log('back button is clicked')
-    onPageChange(event, page - 1);
-  };
-
-  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		console.log('next button is clicked')
-    onPageChange(event, page + 1);
-  };
-
-  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		console.log('last button is clicked')
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-  };
-
-  return (
-    <div >
-      <IconButton
-        onClick={handleFirstPageButtonClick}
-        disabled={page === 0}
-        aria-label="first page"
-      >
-        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
-      </IconButton>
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
-        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
-      </IconButton>
-      <IconButton
-        onClick={handleNextButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="next page"
-      >
-        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
-      </IconButton>
-      <IconButton
-        onClick={handleLastPageButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="last page"
-      >
-        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
-      </IconButton>
-    </div>
-  );
-}
+import TablePaginationActions from './ui/TablePaginationActions';
 
 export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : WorkingGroup }) {
 
@@ -136,7 +62,6 @@ export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : Wo
 
 const useStyles2 = makeStyles({
 	table: {
-		minWidth: 500,
 	}
 })
 
@@ -149,18 +74,16 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 	const [rowsPerPage, setRowsPerPage] = React.useState(4);
 	
   const handleChangePage = (event: unknown, newPage: number) => {
-		console.log(`handlechangepage : ${newPage}`)
     setPage(newPage);
   };
 
   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-		console.log(`handleChangeRowsPerPage: ${parseInt(event.target.value, 10)}`)
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
   };
 
 	return (
-    <SubBlock title="WorkGroup" stretch={true}>
+    <SubBlock title="WorkGroup" stretch={6}>
       { !loading && (
 				<>
 					<TableContainer>
@@ -173,20 +96,20 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 									<TableCell>Budget/Debt at end of Term</TableCell>
 								</TableRow>
 							</TableHead>
-							{workingGroups && ( <>
+							{workingGroups && ( 
 								<TableBody>
-									{ /*rowsPerPage > 0 ? 
+									{ rowsPerPage > 0 ? 
 											workingGroups.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
 												.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
-										:*/ workingGroups.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
+										: workingGroups.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
 									}
 								</TableBody>
-							</>)}
-							{/* <TableFooter>
+							)}
+							<TableFooter>
 								<TableRow>
 									<TablePagination
 										rowsPerPageOptions={[4]}
-										colSpan={3}
+										colSpan={4}
 										count={workingGroups ? workingGroups.length : 0}
 										rowsPerPage={rowsPerPage}
 										page={page}
@@ -199,7 +122,7 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 										ActionsComponent={TablePaginationActions}
 									/>
 								</TableRow>
-							</TableFooter> */}
+							</TableFooter>
 						</Table>
 					</TableContainer>
 				</>

+ 6 - 14
src/components/Dashboard/index.tsx

@@ -43,23 +43,15 @@ const Dashboard = (props: IProps) => {
           <Banner description={description1}/>
         </Grid>
         <Grid container spacing={3}>
-          <Memberships council={council}
-          />
-          <Channels council={council}
-          />
-          <Videos council={council}
-          />
-          <Forum council={council}
-          />
-          <Election council={council}
-          />  
-          <Validation council={council}
-          />
+          <Memberships council={council}/>
+          <Channels council={council}/>
+          <Videos council={council}/>
+          <Forum council={council}/>
+          <Election council={council}/>  
+          <Validation council={council}/>
         </Grid>
         <Grid container spacing={3}>
           <WorkGroup council={council}/>
-        </Grid>
-        <Grid container spacing={3}>
           <Proposals council={council} />
         </Grid>
       </Container>

+ 2 - 2
src/components/Dashboard/ui/SubBlock.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const SubBlock = (props: {
   title: string,
-  stretch: boolean,
+  stretch: number,
   children: any
 }) => { 
   const { 
@@ -43,7 +43,7 @@ const SubBlock = (props: {
   const classes = useStyles();
 
   return (
-    <Grid className={classes.grid} item xs={stretch == true? 12: 4} md={stretch == true? 12: 4} sm={12}>
+    <Grid className={classes.grid} item xs={stretch? stretch: 4} md={stretch? stretch: 4} sm={12}>
       <Paper className={classes.paper}>
         { title && 
           <AppBar className={classes.root} position="static">

+ 76 - 0
src/components/Dashboard/ui/TablePaginationActions.tsx

@@ -0,0 +1,76 @@
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+
+import IconButton from '@material-ui/core/IconButton';
+import FirstPageIcon from '@material-ui/icons/FirstPage';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import LastPageIcon from '@material-ui/icons/LastPage';
+
+const useStyles1 = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexShrink: 0,
+      marginLeft: theme.spacing(2.5),
+    },
+  }),
+);
+
+interface TablePaginationActionsProps {
+  count: number;
+  page: number;
+  rowsPerPage: number;
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+
+const TablePaginationActions = (props: TablePaginationActionsProps) => {
+	const classes = useStyles1();
+  const theme = useTheme();
+  const { count, page, rowsPerPage, onPageChange } = props;
+
+  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, 0);
+  };
+
+  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page - 1);
+  };
+
+  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page + 1);
+  };
+
+  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <div className={classes.root}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </div>
+  );
+}
+
+export default TablePaginationActions;

+ 34 - 37
webpack.config.js

@@ -50,42 +50,42 @@ module.exports = {
                 use: 'raw-loader',
             },
             {
-                test: /\.(less)$/,
-                exclude: /\.module\.less$/,
-                use: [
-                  {
-                    loader: 'css-loader',
-                    options: {
-                      importLoaders: 2,
-                      sourceMap: !!DEV,
-                    },
+              test: /\.(less)$/,
+              exclude: /\.module\.less$/,
+              use: [
+                {
+                  loader: 'css-loader',
+                  options: {
+                    importLoaders: 2,
+                    sourceMap: !!DEV,
                   },
-                  {
-                    loader: 'less-loader',
-                    options: {
-                      sourceMap: !!DEV,
-                    },
+                },
+                {
+                  loader: 'less-loader',
+                  options: {
+                    sourceMap: !!DEV,
                   },
-                ],
-              },
-              {
-                test: /\.(sass|scss)$/,
-                use: [
-                  {
-                    loader: 'css-loader',
-                    options: {
-                      importLoaders: 2,
-                      sourceMap: !!DEV,
-                    },
+                },
+              ],
+            },
+            {
+              test: /\.(sass|scss)$/,
+              use: [
+                {
+                  loader: 'css-loader',
+                  options: {
+                    importLoaders: 2,
+                    sourceMap: !!DEV,
                   },
-                  {
-                    loader: 'sass-loader',
-                    options: {
-                      sourceMap: !!DEV,
-                    },
+                },
+                {
+                  loader: 'sass-loader',
+                  options: {
+                    sourceMap: !!DEV,
                   },
-                ],
-              },            
+                },
+              ],
+            },
         ]
     },
     resolve: {
@@ -98,14 +98,11 @@ module.exports = {
             fs: false,
         },
         plugins: [ new TsconfigPathsPlugin({ configFile: "./tsconfig.json" }) ]
-        // alias: {
-        //   '@': path.resolve(__dirname, './src/'),
-        //   'react/jsx-runtime': require.resolve('react/jsx-runtime'),
-        // },
       },
     plugins:[
       new HtmlWebpackPlugin({
-          template: path.join(__dirname,'/public/index.html')
+        inject: false,
+        template: path.resolve(__dirname, "public/index.html"),
       }),
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],