Splitted ProgressBar and Info into 2 components; add progress bar to horizontal card top

README.md

@@ -54,3 +54,4 @@
 - [x] Azure
 - [ ] Refactor TabPanels code
 - [ ] Refactor Lists code
+- [ ] Query project members in UserPage

client/src/components/HorizontalCard.tsx

@@ -4,13 +4,13 @@ import { makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
-import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
-import { getRemainingdays } from "../utils/methods";
+import { ProgressBar } from "./ProgressBar";
 
 interface IProps {
   title?: string;
   link?: string;
+  progress?: number;
   content: ReactNode;
   actions?: ReactNode;
 }
@@ -26,11 +26,13 @@ export const HorizontalCard: FC<IProps> = ({
   link = "#",
   content,
   actions,
+  progress = 0,
 }) => {
   const classes = useStyles();
 
   return (
     <Card className={classes.root}>
+      <ProgressBar value={progress} />
       <CardContent>
         <Typography variant="h5" component="h2">
           <Link to={link}>

client/src/components/ProgressBar.tsx

@@ -6,10 +6,6 @@ import { PlaylistAddCheck } from "@material-ui/icons";
 
 type IProps = {
   value: number;
-  max?: number;
-  tasksTotalCount?: number;
-  tasksDone?: number;
-  remainingDays?: number;
 };
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -17,19 +13,13 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       width: "100%",
       "& > * + *": {
-        marginTop: theme.spacing(2)
-      }
-    }
+        marginTop: theme.spacing(2),
+      },
+    },
   })
 );
 
-export const ProgressBar: FC<IProps> = ({
-  value,
-  // max = 100,
-  tasksDone,
-  tasksTotalCount,
-  remainingDays
-}) => {
+export const ProgressBar: FC<IProps> = ({ value }) => {
   // const styleString: CSSProperties = { width: `${value}%` };
   // let barColor: string = "green";
 
@@ -46,27 +36,17 @@ export const ProgressBar: FC<IProps> = ({
   const classes = useStyles();
 
   return (
-    <>
-      <div className="row">
-        <Box className="row">
-          <div className={classes.root}>
-            <LinearProgress variant="determinate" value={value} />
-            {/* <LinearProgress variant="determinate" value={value} color={barColor} /> */}
-          </div>
-        </Box>
-        {/* <div className="progress">
-          <div className={`determinate ${barColor}`} style={styleString}></div>
-        </div> */}
-        <Box>
-          <PlaylistAddCheck />
-          <span>
-            {tasksDone}/{tasksTotalCount}
-          </span>
-          <Box className="right">
-            <span>Due {remainingDays} days</span>
-          </Box>
-        </Box>
+    <Box className="row">
+      <div className={classes.root}>
+        <LinearProgress variant="determinate" value={value} />
+        {/* <LinearProgress variant="determinate" value={value} color={barColor} /> */}
       </div>
-    </>
+    </Box>
   );
 };
+
+{
+  /* <div className="progress">
+  <div className={`determinate ${barColor}`} style={styleString}></div>
+</div> */
+}

client/src/components/ProgressInfo.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import { Box } from "@material-ui/core";
+import { PlaylistAddCheck } from "@material-ui/icons";
+
+type IProps = {
+  tasksTotalCount?: number;
+  tasksDone?: number;
+  remainingDays?: number;
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: "100%",
+      "& > * + *": {
+        marginTop: theme.spacing(2),
+      },
+    },
+  })
+);
+
+export const ProgressInfo: FC<IProps> = ({
+  tasksDone,
+  tasksTotalCount,
+  remainingDays,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Box>
+      <PlaylistAddCheck />
+      <span>
+        {tasksDone}/{tasksTotalCount}
+      </span>
+      <Box className="right">
+        <span>Due {remainingDays} days</span>
+      </Box>
+    </Box>
+  );
+};

client/src/components/ProjectCard.tsx

@@ -1,34 +1,60 @@
-import React, { FC, MouseEvent } from "react";
+import React, { FC } from "react";
 import { HorizontalCard } from "./HorizontalCard";
-import { Typography } from "@material-ui/core";
+import { Typography, makeStyles, Theme, createStyles } from "@material-ui/core";
 import { getRemainingdays } from "../utils/methods";
+import { User } from "../types/User";
+import { AvatarList } from "./AvatarList";
+import { ProgressBar } from "./ProgressBar";
+import { ProgressInfo } from "./ProgressInfo";
 
 interface IProps {
   title?: string;
   remainingDays?: string;
   link?: string;
+  members?: User[];
+  progress?: number;
 }
 
-const ProjectCard: FC<IProps> = ({ title, remainingDays, link = "#" }) => {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    progress: {
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+    },
+  })
+);
+
+const ProjectCard: FC<IProps> = ({
+  title,
+  remainingDays,
+  link = "#",
+  members,
+  progress = 0,
+}) => {
+  const classes = useStyles();
+
   const Content: FC = () => {
     return (
-      <Typography variant="body2" component="p">
-        <span>
-          Due{" "}
-          {remainingDays ? (
-            getRemainingdays(remainingDays)
-          ) : (
-            <span>
-              <del>Too much</del> 0
-            </span>
-          )}{" "}
-          days
-        </span>
-      </Typography>
+      <>
+        {members && <AvatarList users={members} />}
+        <div className={classes.progress}>
+          {/* <Typography variant="body2" component="p">
+            Progression:
+          </Typography> */}
+          <ProgressInfo />
+        </div>
+      </>
     );
   };
 
-  return <HorizontalCard title={title} link={link} content={<Content />} />;
+  return (
+    <HorizontalCard
+      title={title}
+      link={link}
+      content={<Content />}
+      progress={progress}
+    />
+  );
 };
 
 export default ProjectCard;

client/src/components/ProjectList.tsx

@@ -6,14 +6,9 @@ import {
   createStyles,
   Theme,
 } from "@material-ui/core";
-import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
-import { Ticket } from "../types/Ticket";
-import { HttpResponse } from "../types/HttpResponse";
-import { Project } from "../types/Project";
-import { put } from "../utils/http";
-import { Constants } from "../utils/Constants";
 import ProjectCard from "./ProjectCard";
+import { Project } from "../types/Project";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,7 +32,7 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
     setFilterText(e.target.value);
   };
 
-  let filteredTickets = projects.filter(
+  let filteredProjects = projects.filter(
     (t) =>
       t.status !== "Done" &&
       t.title.toLowerCase().includes(filterText.toLowerCase())
@@ -65,22 +60,17 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
       </Grid>
       <Grid item xs={12}>
         <div className="col s12 grey lighten-1">
-          {filteredTickets.length === 0 ? (
+          {filteredProjects.length === 0 ? (
             <ProjectCard />
           ) : (
-            filteredTickets.map((t: Project) => (
+            filteredProjects.map((t: Project) => (
               <ProjectCard
                 key={t.id}
                 title={t.title}
                 remainingDays={t.endingDate}
                 link={`/projects/${t.id}`}
-                // validateTicket={async (e: MouseEvent) => {
-                //   e.preventDefault();
-                //   await put<HttpResponse<Ticket>>(
-                //     `${Constants.ticketsURI}/${t.id}/closed`,
-                //     {}
-                //   );
-                // }}
+                members={t.users}
+                progress={t.progression}
               />
             ))
           )}

client/src/pages/ProjectPage.tsx

@@ -8,6 +8,7 @@ import { UsersModal } from "../components/UsersModal";
 import { ProjectTabPanel } from "../components/ProjectTabPanel";
 import ProjectVM from "../VM/ProjectVM";
 import PageLayout from "../layouts/PageLayout";
+import { ProgressInfo } from "../components/ProgressInfo";
 
 interface IProps {
   viewModel: ProjectVM;
@@ -67,8 +68,8 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
         </Grid>
 
         <div className={classes.root}>
-          <ProgressBar
-            value={progression}
+          <ProgressBar value={progression} />
+          <ProgressInfo
             tasksDone={ticketsDone}
             tasksTotalCount={ticketsTotalCount}
             remainingDays={remainingDays}