85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
import { gql, useQuery } from "@apollo/client";
|
|
import { Link } from "@curi/react-dom";
|
|
import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
|
|
import { FC } from "react";
|
|
import { Project } from "../generated/graphql";
|
|
import { ListItemText } from "@material-ui/core";
|
|
import { Button } from "@material-ui/core";
|
|
import { AddBox } from "@material-ui/icons";
|
|
import { ActiveLink } from "../commons/route/active-link";
|
|
|
|
const PROJECTS = gql`
|
|
query Projects {
|
|
projects {
|
|
id
|
|
name
|
|
comment
|
|
sshUrl
|
|
webUrl
|
|
webHookSecret
|
|
}
|
|
}
|
|
`;
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
item: {
|
|
position: "relative",
|
|
".active &": {
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
".active &::before": {
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
content: '""',
|
|
display: "block",
|
|
borderLeftColor: theme.palette.secondary.main,
|
|
borderLeftWidth: 4,
|
|
borderLeftStyle: "solid",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export function ProjectPanel() {
|
|
return (
|
|
<section>
|
|
<Box m={2}>
|
|
<Link name="create-project">
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
title="New Project"
|
|
startIcon={<AddBox />}
|
|
>
|
|
New Project
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
<ProjectList />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const ProjectList: FC<{}> = () => {
|
|
const { data } = useQuery<{
|
|
projects: Project[];
|
|
}>(PROJECTS);
|
|
const projects = data?.projects;
|
|
|
|
const classes = useStyles();
|
|
|
|
const items = projects?.map((item) => (
|
|
<ActiveLink
|
|
name="project-detail"
|
|
params={{ projectId: item.id }}
|
|
key={item.id}
|
|
>
|
|
<ListItem button className={classes.item}>
|
|
<ListItemText primary={item.name} secondary={item.comment} />
|
|
</ListItem>
|
|
</ActiveLink>
|
|
));
|
|
return <List>{items}</List>;
|
|
};
|