ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-06 00:36:39 +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 { 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";
interface IProps {
@ -9,47 +15,60 @@ interface IProps {
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> = ({
title,
remainingDays,
link = "#",
validateTicket
}) => {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<li>
<div className="card horizontal">
<div className="card-stacked">
<div className="card-content">
<div className="row">
<div className="card-title">
<h6>
<Link to={link}>
<b>{title ?? "Nothing to do"}</b>
</Link>
</h6>
</div>
<Card className={classes.root}>
<CardContent>
<Typography variant="h5" component="h2">
<Link to={link}>
<b>{title ?? "Nothing to do"}</b>
</Link>
</Typography>
<Typography variant="body2" component="p">
<span>
Due{" "}
{remainingDays ? (
getRemainingdays(remainingDays)
) : (
<span>
Due{" "}
{remainingDays ? (
getRemainingdays(remainingDays)
) : (
<span>
<del>Too much</del> 0
</span>
)}{" "}
days
<del>Too much</del> 0
</span>
<div className="right">
<Link to="#">
<i className="material-icons" onClick={validateTicket}>
check
</i>
</Link>
</div>
</div>
</div>
</div>
</div>
</li>
)}{" "}
days
</span>
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={validateTicket}>
Mark as done
</Button>
</CardActions>
</Card>
);
};

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

@ -44,27 +44,25 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
</Grid>
</Grid>
<div className="col s12 grey lighten-1">
<ul>
{filteredTickets.length === 0 ? (
<HorizontalCard />
) : (
filteredTickets.map((t: Project) => (
<HorizontalCard
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`,
{}
);
}}
/>
))
)}
</ul>
{filteredTickets.length === 0 ? (
<HorizontalCard />
) : (
filteredTickets.map((t: Project) => (
<HorizontalCard
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`,
{}
);
}}
/>
))
)}
</div>
</>
);