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 ticketPage Layout

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-03 15:13:33 +02:00
parent 4da0f6a736
commit c5cb741b61
1 changed files with 88 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
client/src/pages/TicketPage.tsx
View file

@ -1,14 +1,41 @@
import React, { FC } from "react"; import React, { FC } from "react";
import { Link } from "react-router-dom";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { Header } from "../components/Header"; import { Header } from "../components/Header";
import { AvatarList } from "../components/AvatarList"; import { AvatarList } from "../components/AvatarList";
import { TicketVM } from "../VM/TicketVM"; import { TicketVM } from "../VM/TicketVM";
import { getRemainingdays } from "../utils/methods"; import { getRemainingdays } from "../utils/methods";
import { Link } from "react-router-dom";
import {
Container,
makeStyles,
Theme,
Grid,
Typography,
Chip
} from "@material-ui/core";
import { Timer, InfoSharp } from "@material-ui/icons";
interface IProps { interface IProps {
viewModel: TicketVM; viewModel: TicketVM;
} }
const useStyles = makeStyles((theme: Theme) => ({
root: {
margin: theme.spacing(1),
flexGrow: 1
},
table: {
minWidth: 650
}
}));
export const TicketPage: FC<IProps> = ({ viewModel }) => { export const TicketPage: FC<IProps> = ({ viewModel }) => {
const { const {
title, title,
@ -23,48 +50,38 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
} = viewModel; } = viewModel;
const daysToEnd: number = getRemainingdays(endingDate); const daysToEnd: number = getRemainingdays(endingDate);
// let notes: string = ""; // let notes: string = "";
const classes = useStyles();
const infos: InfoProps = { status, category, impact, difficulty };
return ( return (
<div className="section"> <Container maxWidth="md">
<div className="container"> <div className={classes.root}>
<Header title={title} description={description} /> <Header title={title} description={description} />
<AvatarList users={users} /> </div>
<AvatarList users={users} />
<div className="row section"> <div className={classes.root}>
<div className="col s9"> <Grid container>
<h5> <Grid item xs={9}>
<Typography variant="h5" component="h5">
<b>In project: </b>{" "} <b>In project: </b>{" "}
<Link to={`/projects/${project.id}`}>{project.title}</Link> <Link to={`/projects/${project.id}`}>{project.title}</Link>
</h5> </Typography>
</div> </Grid>
<div className="col s3"> <Grid item xs>
<i className="left material-icons">timer</i> <Timer /> <span>Due in {daysToEnd} days</span>
<span>Due in {daysToEnd} days</span> </Grid>
</div> </Grid>
</div> </div>
<div className="section white center"> <div className={classes.root}>
<div className="chip"> <InfoTable
<span className="indigo-text">Status: </span> {status} status={status}
{/* <i className="close material-icons">close</i> */} category={category}
</div> impact={impact}
difficulty={difficulty}
<div className="chip"> />
<span className="orange-text">Category: </span> {category} {/* <textarea
{/* <i className="close material-icons">close</i> */}
</div>
<div className="chip">
<span className="green-text">Impact: </span> {impact}
{/* <i className="close material-icons">close</i> */}
</div>
<div className="chip">
<span className="red-text">Difficulty: </span> {difficulty}
{/* <i className="close material-icons">close</i> */}
</div>
{/* <textarea
id="notes" id="notes"
className="materialize-textarea validate" className="materialize-textarea validate"
value={notes} value={notes}
@ -72,8 +89,41 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
// setDescription(e.target.value) // setDescription(e.target.value)
// } // }
></textarea> */} ></textarea> */}
</div>
</div> </div>
</div> </Container>
);
};
interface InfoProps {
status: string;
category: string;
impact: string;
difficulty: string;
}
const InfoTable: FC<InfoProps> = (info: InfoProps) => {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Category</TableCell>
<TableCell>Impact</TableCell>
<TableCell>Difficulty</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>{info.status}</TableCell>
<TableCell>{info.category}</TableCell>
<TableCell>{info.impact}</TableCell>
<TableCell>{info.difficulty}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
); );
}; };