ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-12 11:46:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update horizontalCard

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-03 11:59:14 +02:00
parent 05660e55aa
commit 6d5aedd499
2 changed files with 71 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
client/src/components/HorizontalCard.tsx
View file

@ -1,5 +1,11 @@
import React, { FC, MouseEvent } from "react"; import React, { FC, MouseEvent } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
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 { getRemainingdays } from "../utils/methods";
interface IProps { interface IProps {
@ -9,47 +15,60 @@ interface IProps {
link?: string; link?: string;
} }
const useStyles = makeStyles({
root: {
minWidth: 275
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)"
},
title: {
fontSize: 14
},
pos: {
marginBottom: 12
}
});
export const HorizontalCard: FC<IProps> = ({ export const HorizontalCard: FC<IProps> = ({
title, title,
remainingDays, remainingDays,
link = "#", link = "#",
validateTicket validateTicket
}) => { }) => {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return ( return (
<li> <Card className={classes.root}>
<div className="card horizontal"> <CardContent>
<div className="card-stacked"> <Typography variant="h5" component="h2">
<div className="card-content"> <Link to={link}>
<div className="row"> <b>{title ?? "Nothing to do"}</b>
<div className="card-title"> </Link>
<h6> </Typography>
<Link to={link}>
<b>{title ?? "Nothing to do"}</b> <Typography variant="body2" component="p">
</Link> <span>
</h6> Due{" "}
</div> {remainingDays ? (
getRemainingdays(remainingDays)
) : (
<span> <span>
Due{" "} <del>Too much</del> 0
{remainingDays ? (
getRemainingdays(remainingDays)
) : (
<span>
<del>Too much</del> 0
</span>
)}{" "}
days
</span> </span>
<div className="right"> )}{" "}
<Link to="#"> days
<i className="material-icons" onClick={validateTicket}> </span>
check </Typography>
</i> </CardContent>
</Link> <CardActions>
</div> <Button size="small" onClick={validateTicket}>
</div> Mark as done
</div> </Button>
</div> </CardActions>
</div> </Card>
</li>
); );
}; };

40
client/src/components/ProjectList.tsx
View file

@ -44,27 +44,25 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
</Grid> </Grid>
</Grid> </Grid>
<div className="col s12 grey lighten-1"> <div className="col s12 grey lighten-1">
<ul> {filteredTickets.length === 0 ? (
{filteredTickets.length === 0 ? ( <HorizontalCard />
<HorizontalCard /> ) : (
) : ( filteredTickets.map((t: Project) => (
filteredTickets.map((t: Project) => ( <HorizontalCard
<HorizontalCard key={t.id}
key={t.id} title={t.title}
title={t.title} remainingDays={t.endingDate}
remainingDays={t.endingDate} link={`/projects/${t.id}`}
link={`/projects/${t.id}`} validateTicket={async (e: MouseEvent) => {
validateTicket={async (e: MouseEvent) => { e.preventDefault();
e.preventDefault(); await put<HttpResponse<Ticket>>(
await put<HttpResponse<Ticket>>( `${Constants.ticketsURI}/${t.id}/closed`,
`${Constants.ticketsURI}/${t.id}/closed`, {}
{} );
); }}
}} />
/> ))
)) )}
)}
</ul>
</div> </div>
</> </>
); );