mirror of
https://github.com/rjNemo/ticket_manager
synced 2026-06-12 11:46:40 +00:00
update horizontalCard
This commit is contained in:
parent
05660e55aa
commit
6d5aedd499
2 changed files with 71 additions and 54 deletions
|
|
@ -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,25 +15,42 @@ 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">
|
|
||||||
<div className="row">
|
|
||||||
<div className="card-title">
|
|
||||||
<h6>
|
|
||||||
<Link to={link}>
|
<Link to={link}>
|
||||||
<b>{title ?? "Nothing to do"}</b>
|
<b>{title ?? "Nothing to do"}</b>
|
||||||
</Link>
|
</Link>
|
||||||
</h6>
|
</Typography>
|
||||||
</div>
|
|
||||||
|
<Typography variant="body2" component="p">
|
||||||
<span>
|
<span>
|
||||||
Due{" "}
|
Due{" "}
|
||||||
{remainingDays ? (
|
{remainingDays ? (
|
||||||
|
|
@ -39,17 +62,13 @@ export const HorizontalCard: FC<IProps> = ({
|
||||||
)}{" "}
|
)}{" "}
|
||||||
days
|
days
|
||||||
</span>
|
</span>
|
||||||
<div className="right">
|
</Typography>
|
||||||
<Link to="#">
|
</CardContent>
|
||||||
<i className="material-icons" onClick={validateTicket}>
|
<CardActions>
|
||||||
check
|
<Button size="small" onClick={validateTicket}>
|
||||||
</i>
|
Mark as done
|
||||||
</Link>
|
</Button>
|
||||||
</div>
|
</CardActions>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,6 @@ 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 />
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -64,7 +63,6 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue