mirror of
https://github.com/rjNemo/ticket_manager
synced 2026-06-06 00:36:39 +00:00
Extracted TicketChipsArray in own component. Used on ticketPage
This commit is contained in:
parent
5e057d1c72
commit
8a3e1d96d5
3 changed files with 147 additions and 110 deletions
|
|
@ -3,12 +3,11 @@ import { Button, Typography, Grid } from "@material-ui/core";
|
|||
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
||||
import Chip from "@material-ui/core/Chip";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import CategoryIcon from "@material-ui/icons/Category";
|
||||
import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
|
||||
import SpeedIcon from "@material-ui/icons/Speed";
|
||||
|
||||
import { HorizontalCard } from "./HorizontalCard";
|
||||
import { Ticket } from "../../types/Ticket";
|
||||
import { getRemainingdays } from "../../utils/methods";
|
||||
import TicketChipsArray from "./TicketChipsArray";
|
||||
|
||||
interface IProps {
|
||||
ticket?: Ticket;
|
||||
|
|
@ -16,74 +15,20 @@ interface IProps {
|
|||
link?: string;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
listStyle: "none",
|
||||
padding: theme.spacing(0.5),
|
||||
margin: 0,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
},
|
||||
chip: {
|
||||
margin: theme.spacing(0.5),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const TicketCard: FC<IProps> = ({ link = "#", validateTicket, ticket }) => {
|
||||
const ChipsArray: FC = () => {
|
||||
const classes = useStyles();
|
||||
const chipData = [
|
||||
// { label: "status", value: ticket?.status },
|
||||
{ label: "category", value: ticket?.category },
|
||||
{ label: "impact", value: ticket?.impact },
|
||||
{ label: "difficulty", value: ticket?.difficulty },
|
||||
];
|
||||
|
||||
return (
|
||||
// <Paper component="ul" className={classes.root}>
|
||||
<Grid component="ul" className={classes.root}>
|
||||
{chipData.map((data, i: number) => {
|
||||
let icon = <CategoryIcon />;
|
||||
let color:
|
||||
| "inherit"
|
||||
| "default"
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| undefined;
|
||||
|
||||
if (data.label === "impact") {
|
||||
color = "primary";
|
||||
icon = <PriorityHighIcon />;
|
||||
}
|
||||
if (data.label === "difficulty") {
|
||||
color = "secondary";
|
||||
icon = <SpeedIcon />;
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={i}>
|
||||
<Chip
|
||||
icon={icon}
|
||||
color={color}
|
||||
label={data.value}
|
||||
className={classes.chip}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
const TicketCard: FC<IProps> = ({
|
||||
link = "#",
|
||||
validateTicket,
|
||||
ticket = {} as Ticket,
|
||||
}) => {
|
||||
const Content: FC = () => {
|
||||
return (
|
||||
<Grid container justify="space-between" alignItems="center">
|
||||
<ChipsArray />
|
||||
<TicketChipsArray
|
||||
status={ticket.status}
|
||||
category={ticket.category}
|
||||
impact={ticket.impact}
|
||||
difficulty={ticket.difficulty}
|
||||
/>
|
||||
<Typography variant="body2" component="p">
|
||||
<span>
|
||||
Due in{" "}
|
||||
|
|
|
|||
77
client/src/components/Cards/TicketChipsArray.tsx
Normal file
77
client/src/components/Cards/TicketChipsArray.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import React, { FC } from "react";
|
||||
import { Grid, Chip, makeStyles, Theme, createStyles } from "@material-ui/core";
|
||||
import CategoryIcon from "@material-ui/icons/Category";
|
||||
import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
|
||||
import SpeedIcon from "@material-ui/icons/Speed";
|
||||
import { Ticket } from "../../types/Ticket";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
listStyle: "none",
|
||||
padding: theme.spacing(0.5),
|
||||
margin: 0,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
},
|
||||
chip: {
|
||||
margin: theme.spacing(0.5),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
interface IProps {
|
||||
status: string;
|
||||
category: string;
|
||||
impact: string;
|
||||
difficulty: string;
|
||||
}
|
||||
const TicketChipsArray: FC<IProps> = ({
|
||||
status,
|
||||
category,
|
||||
impact,
|
||||
difficulty,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
const chipData = [
|
||||
// { label: "status", value: status },
|
||||
{ label: "category", value: category },
|
||||
{ label: "impact", value: impact },
|
||||
{ label: "difficulty", value: difficulty },
|
||||
];
|
||||
|
||||
return (
|
||||
// <Paper component="ul" className={classes.root}>
|
||||
<Grid component="ul" className={classes.root}>
|
||||
{chipData.map((data, i: number) => {
|
||||
let icon = <CategoryIcon />;
|
||||
let color: "inherit" | "default" | "primary" | "secondary" | undefined;
|
||||
|
||||
if (data.label === "impact") {
|
||||
color = "primary";
|
||||
icon = <PriorityHighIcon />;
|
||||
}
|
||||
if (data.label === "difficulty") {
|
||||
color = "secondary";
|
||||
icon = <SpeedIcon />;
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={i}>
|
||||
<Chip
|
||||
icon={icon}
|
||||
color={color}
|
||||
label={data.value}
|
||||
className={classes.chip}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketChipsArray;
|
||||
|
|
@ -7,14 +7,14 @@ 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 { AvatarList } from "../components/Avatars/AvatarList";
|
||||
import { TicketVM } from "../VM/TicketVM";
|
||||
import { getRemainingdays } from "../utils/methods";
|
||||
|
||||
import { makeStyles, Theme, Grid, Typography } from "@material-ui/core";
|
||||
import { Timer } from "@material-ui/icons";
|
||||
import PageLayout from "../layouts/PageLayout";
|
||||
import { TicketVM } from "../VM/TicketVM";
|
||||
import { Header } from "../components/Header";
|
||||
import { AvatarList } from "../components/Avatars/AvatarList";
|
||||
import TicketChipsArray from "../components/Cards/TicketChipsArray";
|
||||
import { getRemainingdays } from "../utils/methods";
|
||||
|
||||
interface IProps {
|
||||
viewModel: TicketVM;
|
||||
|
|
@ -23,10 +23,15 @@ interface IProps {
|
|||
const useStyles = makeStyles((theme: Theme) => ({
|
||||
root: {
|
||||
margin: theme.spacing(1),
|
||||
flexGrow: 1,
|
||||
// flexGrow: 1,
|
||||
},
|
||||
table: {
|
||||
minWidth: 650,
|
||||
margin: "auto",
|
||||
maxWidth: 650,
|
||||
alignItems: "center",
|
||||
},
|
||||
subtitle: {
|
||||
marginTop: 20,
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -54,8 +59,12 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
|
|||
<div className={classes.root}>
|
||||
<Grid container>
|
||||
<Grid item xs={9}>
|
||||
<Typography variant="h5" component="h5">
|
||||
<b>In project: </b>{" "}
|
||||
<Typography
|
||||
variant="h5"
|
||||
component="h5"
|
||||
className={classes.subtitle}
|
||||
>
|
||||
<b>Project: </b>
|
||||
<Link to={`/projects/${project.id}`}>{project.title}</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
|
@ -65,8 +74,14 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
|
|||
</Grid>
|
||||
</div>
|
||||
|
||||
<div className={classes.root}>
|
||||
<InfoTable
|
||||
<div className={classes.table}>
|
||||
{/* <InfoTable
|
||||
status={status}
|
||||
category={category}
|
||||
impact={impact}
|
||||
difficulty={difficulty}
|
||||
/> */}
|
||||
<TicketChipsArray
|
||||
status={status}
|
||||
category={category}
|
||||
impact={impact}
|
||||
|
|
@ -92,36 +107,36 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
|
|||
);
|
||||
};
|
||||
|
||||
interface InfoProps {
|
||||
status: string;
|
||||
category: string;
|
||||
impact: string;
|
||||
difficulty: string;
|
||||
}
|
||||
// interface InfoProps {
|
||||
// status: string;
|
||||
// category: string;
|
||||
// impact: string;
|
||||
// difficulty: string;
|
||||
// }
|
||||
|
||||
const InfoTable: FC<InfoProps> = (info: InfoProps) => {
|
||||
const classes = useStyles();
|
||||
// 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>
|
||||
);
|
||||
};
|
||||
// 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>
|
||||
// );
|
||||
// };
|
||||
|
|
|
|||
Loading…
Reference in a new issue