-
+
-
- Files
-
+
+ {users.map((user: User, i: number) => (
+
+
+
+ );
+};
diff --git a/client/src/components/Avatars/UserAvatar.tsx b/client/src/components/Avatars/UserAvatar.tsx
new file mode 100644
index 0000000..6bbd826
--- /dev/null
+++ b/client/src/components/Avatars/UserAvatar.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from "react";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+
+interface IProps {
+ picture: string;
+ alt: string;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: "flex",
+ "& > *": {
+ margin: theme.spacing(1)
+ }
+ },
+ small: {
+ width: theme.spacing(3),
+ height: theme.spacing(3)
+ },
+ large: {
+ width: theme.spacing(10),
+ height: theme.spacing(10)
+ }
+ })
+);
+
+export const UserAvatar: FC
+
+ );
+};
diff --git a/client/src/components/ButtonAppBar.tsx b/client/src/components/ButtonAppBar.tsx
new file mode 100644
index 0000000..d652d15
--- /dev/null
+++ b/client/src/components/ButtonAppBar.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import { useAuth0 } from "../authentication/auth0";
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1
+ },
+ menuButton: {
+ marginRight: theme.spacing(2)
+ },
+ title: {
+ flexGrow: 1
+ }
+ })
+);
+
+export default function ButtonAppBar() {
+ const classes = useStyles();
+ const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
+
+ return (
+
+
+
+
+
+
+
+
+ {!isAuthenticated ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
diff --git a/client/src/components/Button.tsx b/client/src/components/Buttons/Button.tsx
similarity index 100%
rename from client/src/components/Button.tsx
rename to client/src/components/Buttons/Button.tsx
diff --git a/client/src/components/Buttons/FloatingButton.tsx b/client/src/components/Buttons/FloatingButton.tsx
new file mode 100644
index 0000000..ea28e6d
--- /dev/null
+++ b/client/src/components/Buttons/FloatingButton.tsx
@@ -0,0 +1,26 @@
+import React, { FC, MouseEvent } from "react";
+import { Fab } from "@material-ui/core";
+import AddIcon from "@material-ui/icons/Add";
+
+interface IProps {
+ icon?: string;
+ color?: "inherit" | "primary" | "secondary" | "default" | undefined;
+ onClick?: (e: MouseEvent) => void;
+ size?: "small" | "medium" | "large" | undefined;
+ text?: string;
+}
+
+export const FloatingButton: FC
+
+
+ );
+ };
+
+ return (
+ -
- {files.length === 0 ? (
-
-
+ {files.length === 0 ? (
+
![]({require("../images/user_1.jpg")})
*/}
- folder
- {file ? file.name : "Add your first file"}
- - {file ? file.size : 0}kb {file ? file.format : "pdf"} -
- - more_vert - -
-
-
+
+
+
);
};
diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/FloatingButton.tsx
deleted file mode 100644
index 0031443..0000000
--- a/client/src/components/FloatingButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { FC, MouseEvent } from "react";
-import { Button } from "./Button";
-
-interface IProps {
- icon?: string;
- size?: string;
- color?: string;
- onClick?: (e: MouseEvent) => void;
-}
-
-export const FloatingButton: FC
-
+
+
+
- {title}
-{description}
- +
-
-
-
-
-
-
- Too much 0
-
- )}{" "}
- days
-
-
-
-
-
- Due{" "}
- {remainingDays ? (
- getRemainingdays(remainingDays)
- ) : (
-
- - - {title ?? "Nothing to do"} - -
-
-
-
- check
-
-
- {/*
-
- archive
-
- */}
-
-
+
+
+
+ );
+};
diff --git a/client/src/components/ActivityList.tsx b/client/src/components/Lists/ActivityList.tsx
similarity index 73%
rename from client/src/components/ActivityList.tsx
rename to client/src/components/Lists/ActivityList.tsx
index 5f597c0..c70082c 100644
--- a/client/src/components/ActivityList.tsx
+++ b/client/src/components/Lists/ActivityList.tsx
@@ -1,7 +1,7 @@
import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
-import { ActivityCollection } from "./ActivityCollection";
-import { Activity } from "../types/Activity";
-import { FilterBar } from "./FilterBar";
+import { ActivityCollection } from "../ActivityCollection";
+import { Activity } from "../../types/Activity";
+import { FilterBar } from "../FilterBar";
type IProps = {
activities: Activity[];
@@ -12,9 +12,7 @@ export const ActivityList: FC
+ {filteredProjects.length === 0 ? (
+ t.status === "Done").length
+ }
+ />
+ ))
+ )}
+
+
+ {filteredTickets.length === 0 ? (
+ {
+ e.preventDefault();
+ await put>(
+ `${Constants.ticketsURI}/${t.id}/closed`,
+ {}
+ );
+ }}
+ />
+ ))
+ )}
+
+
-
- );
-};
diff --git a/client/src/components/Modals/Modal.tsx b/client/src/components/Modals/Modal.tsx
new file mode 100644
index 0000000..705f172
--- /dev/null
+++ b/client/src/components/Modals/Modal.tsx
@@ -0,0 +1,79 @@
+import React, { FC } from "react";
+import Dialog from "@material-ui/core/Dialog";
+import {
+ DialogTitle,
+ Typography,
+ IconButton,
+ DialogContent,
+ makeStyles,
+ Theme,
+ createStyles,
+ DialogActions,
+ Button,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+
+interface IProps {
+ handleClose: () => void;
+ show: boolean;
+ action: string;
+ handleAction: (e: React.FormEvent) => Promise{children}
- -
+ {allUsers.map((u: User) => (
+
@@ -22,7 +22,7 @@ export const UsersModalEntry: FC = ({ user, setMembers, members }) => {
onChange={() => {
!match(user.id)
? setMembers([...members, user])
- : setMembers(members.filter(p => p.id !== user.id));
+ : setMembers(members.filter((p) => p.id !== user.id));
}}
/>
diff --git a/client/src/components/NewTicketForm.tsx b/client/src/components/NewTicketForm.tsx
index 97e0108..aac5205 100644
--- a/client/src/components/NewTicketForm.tsx
+++ b/client/src/components/NewTicketForm.tsx
@@ -1,4 +1,5 @@
import React, { FC } from "react";
+import { TextField, MenuItem } from "@material-ui/core";
import { Project } from "../types/Project";
interface IProps {
@@ -22,45 +23,17 @@ export const NewTicketForm: FC = ({
setEndingDate,
allProjects,
projectId,
- setProjectId
+ setProjectId,
}) => {
return (
<>
- = ({
- show,
- handleClose,
- allProjects
-}) => {
- const [title, setTitle] = useState("");
- const [description, setDescription] = useState("");
- const [endingDate, setEndingDate] = useState("");
-
- const { url } = useRouteMatch();
- const id = url.split("/")[2];
- const [projectId, setProjectId] = useState(id);
-
- const handleSubmit: (event: FormEvent) => void = async (
- e: FormEvent
- ) => {
- e.preventDefault();
- let newTicket = {
- title: title,
- description: description,
- endingDate: new Date(endingDate).toISOString(),
- creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94",
- projectId: parseInt(projectId)
- };
-
- // const response: HttpResponse =
- await post(`${Constants.ticketsURI}`, newTicket);
- handleClose();
- };
-
- return (
-
-
- );
-};
diff --git a/client/src/components/NewTicketTabRouter.tsx b/client/src/components/NewTicketTabRouter.tsx
deleted file mode 100644
index 0b68000..0000000
--- a/client/src/components/NewTicketTabRouter.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { FC } from "react";
-import { useRouteMatch } from "react-router-dom";
-import { TabRouterHeader } from "./TabRouterHeader";
-
-interface IProps {
- tabNames: string[];
- description: string;
- setDescription: React.Dispatch>;
- title: string;
- setTitle: React.Dispatch>;
- endingDate: string;
- setEndingDate: React.Dispatch>;
-}
-
-export const NewTicketTabRouter: FC = ({
- tabNames,
- description,
- setDescription,
- title,
- setTitle,
- endingDate,
- setEndingDate
-}) => {
- const { url } = useRouteMatch();
- return (
- <>
- = (props: TabProps) => {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && {children} }
+
+ );
+};
+
+const a11yProps = (index: any) => {
+ return {
+ id: `full-width-tab-${index}`,
+ "aria-controls": `full-width-tabpanel-${index}`,
+ };
+};
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ backgroundColor: "#E9ECEF",
+ borderRadius: "20px",
+ },
+}));
+
+interface IProps {
+ tickets: Ticket[];
+ remainingDays?: number;
+ tabNames: string[];
+ files: AppFile[];
+ // activities: Activity[];
+ allProjects: Project[];
+}
+
+export const ProjectTabPanel: FC = ({
+ tickets,
+ tabNames,
+ files,
+ allProjects,
+}) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [value, setValue] = useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ const handleChangeIndex = (index: number) => {
+ setValue(index);
+ };
+
+ return (
+ = ({
tabNames,
files,
activities,
- allProjects
+ allProjects,
}) => {
const { url } = useRouteMatch();
diff --git a/client/src/components/TabRouterHeader.tsx b/client/src/components/Panels/TabRouterHeader.tsx
similarity index 100%
rename from client/src/components/TabRouterHeader.tsx
rename to client/src/components/Panels/TabRouterHeader.tsx
diff --git a/client/src/components/Panels/UserTabPanel.tsx b/client/src/components/Panels/UserTabPanel.tsx
new file mode 100644
index 0000000..ad0c2ba
--- /dev/null
+++ b/client/src/components/Panels/UserTabPanel.tsx
@@ -0,0 +1,109 @@
+import React, { FC, useState, ReactNode } from "react";
+import SwipeableViews from "react-swipeable-views";
+import { makeStyles, Theme, useTheme } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import { Ticket } from "../../types/Ticket";
+import { Project } from "../../types/Project";
+import { ProjectList } from "../Lists/ProjectList";
+import { TicketList } from "../Lists/TicketList";
+import { User } from "../../types/User";
+
+interface TabProps {
+ children?: ReactNode;
+ dir?: string;
+ index: any;
+ value: any;
+}
+
+const TabPanel: FC = (props: TabProps) => {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && {children} }
+
+ );
+};
+
+const a11yProps = (index: any) => {
+ return {
+ id: `full-width-tab-${index}`,
+ "aria-controls": `full-width-tabpanel-${index}`,
+ };
+};
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ backgroundColor: "#E9ECEF",
+ borderRadius: "20px",
+ },
+ topbar: { borderTopLeftRadius: "10px", borderTopRightRadius: "10px" },
+}));
+
+interface IProps {
+ tabNames: string[];
+ tickets: Ticket[];
+ projects: Project[];
+ allUsers: User[];
+}
+
+export const UserTabPanel: FC = ({
+ tickets,
+ tabNames,
+ projects,
+ allUsers,
+}) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [value, setValue] = useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ const handleChangeIndex = (index: number) => {
+ setValue(index);
+ };
+
+ return (
+ = ({ tickets, tabNames, projects }) => {
-
diff --git a/client/src/components/ProfileSelector.tsx b/client/src/components/ProfileSelector.tsx
index f689262..3c6fdb9 100644
--- a/client/src/components/ProfileSelector.tsx
+++ b/client/src/components/ProfileSelector.tsx
@@ -1,6 +1,5 @@
import React, { FC } from "react";
-import { HorizontalCard } from "./HorizontalCard";
-import { Avatar } from "./Avatar";
+import { UserAvatar } from "./Avatars/UserAvatar";
import { Link } from "react-router-dom";
export const ProfileSelector: FC = () => {
@@ -10,7 +9,10 @@ export const ProfileSelector: FC = () => {
= ({ value }) => {
+ // const styleString: CSSProperties = { width: `${value}%` };
+ // let barColor: string = "green";
+
+ // if (value < 100) {
+ // barColor = "yellow";
+ // }
+ // if (value < 200 / 3) {
+ // barColor = "orange";
+ // }
+ // if (value < 100 / 3) {
+ // barColor = "red";
+ // }
+
+ const classes = useStyles();
+
+ return (
+
+
+ );
+};
diff --git a/client/src/components/Progress/ProgressInfo.tsx b/client/src/components/Progress/ProgressInfo.tsx
new file mode 100644
index 0000000..eaaf028
--- /dev/null
+++ b/client/src/components/Progress/ProgressInfo.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+// import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import { Box } from "@material-ui/core";
+import { PlaylistAddCheck } from "@material-ui/icons";
+
+type IProps = {
+ tasksTotalCount?: number;
+ tasksDone?: number;
+ remainingDays?: number;
+};
+
+// const useStyles = makeStyles((theme: Theme) =>
+// createStyles({
+// root: {
+// width: "100%",
+// "& > * + *": {
+// marginTop: theme.spacing(2),
+// },
+// },
+// })
+// );
+
+export const ProgressInfo: FC = ({
+ tasksDone,
+ tasksTotalCount,
+ remainingDays,
+}) => {
+ // const classes = useStyles();
+
+ return (
+
+
+ Due in {remainingDays} days
+
+
+ );
+};
diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx
deleted file mode 100644
index bf0ff90..0000000
--- a/client/src/components/ProgressBar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { FC, CSSProperties } from "react";
-
-type ProgressBarProps = {
- value: number;
- max?: number;
- tasksTotalCount?: number;
- tasksDone?: number;
- remainingDays?: number;
-};
-
-export const ProgressBar: FC = ({
- value,
- max = 100,
- tasksDone,
- tasksTotalCount,
- remainingDays
-}) => {
- const styleString: CSSProperties = { width: `${value}%` };
- let barColor: string = "green";
-
- if (value < 100) {
- barColor = "yellow";
- }
- if (value < 200 / 3) {
- barColor = "orange";
- }
- if (value < 100 / 3) {
- barColor = "red";
- }
-
- return (
- <>
- = ({ projects }) => {
- const [filterText, setFilterText] = useState("");
- const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
- setFilterText("");
- };
-
- const handleChange: (e: ChangeEvent) => void = (
- e: ChangeEvent
- ) => {
- setFilterText(e.target.value);
- };
-
- let filteredTickets = projects.filter(
- t =>
- t.status !== "Done" &&
- t.title.toLowerCase().includes(filterText.toLowerCase())
- );
- return (
- <>
-
+
+
+
+ );
+}
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
deleted file mode 100644
index 149eabe..0000000
--- a/client/src/components/TicketList.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
-import { Ticket } from "../types/Ticket";
-import { FloatingButton } from "./FloatingButton";
-import { HorizontalCard } from "./HorizontalCard";
-import { FilterBar } from "./FilterBar";
-import { HttpResponse } from "../types/HttpResponse";
-import { put } from "../utils/http";
-import { Constants } from "../utils/Constants";
-import { NewTicketModal } from "./NewTicketModal";
-import { Project } from "../types/Project";
-
-type TicketListProps = {
- tickets: Ticket[];
- allProjects: Project[];
- addButton?: Boolean;
-};
-
-export const TicketList: FC = ({
- tickets,
- allProjects,
- addButton = true
-}) => {
- const [filterText, setFilterText] = useState("");
- const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
- setFilterText("");
- };
-
- const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
- e.preventDefault();
- setShowNew(true);
- };
- const handleChange: (e: ChangeEvent) => void = (
- e: ChangeEvent
- ) => {
- setFilterText(e.target.value);
- };
-
- const [showNew, setShowNew] = useState(false);
- let filteredTickets = tickets.filter(
- t =>
- t.status !== "Done" &&
- t.title.toLowerCase().includes(filterText.toLowerCase())
- );
- return (
- <>
- = ({ fullName, presentation, picture }) => {
+ // const classes = useStyles();
return (
- ({} as User);
const [hasError, setHasError] = useState(false);
const [error, setError] = useState("");
+ const [allUsers, setAllUsers] = useState([]);
const { id } = useParams();
async function httpGetUser(id: string): Promise {
@@ -32,9 +33,24 @@ export const UserController: FC = () => {
}
}
+ async function httpGetAllUsers(): Promise {
+ try {
+ const response: HttpResponse = await get(
+ `${Constants.usersURI}`
+ );
+ if (response.parsedBody !== undefined) {
+ setAllUsers((response.parsedBody as unknown) as User[]);
+ }
+ } catch (ex) {
+ setHasError(true);
+ setError(ex);
+ }
+ }
+
useEffect(() => {
if (id !== undefined) {
httpGetUser(id);
+ httpGetAllUsers();
} else {
setHasError(true);
setError("Bad Request");
@@ -45,6 +61,6 @@ export const UserController: FC = () => {
return = ({ header, content }) => {
+ const classes = useStyles();
+ return (
+
+
+ );
+};
+
+export default PageLayout;
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index d6676c9..e6fe164 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -1,21 +1,23 @@
import React from "react";
-import { LogInForm } from "../components/LogInForm";
-import { ProfileSelector } from "../components/ProfileSelector";
+// import { LogInForm } from "../components/LogInForm";
+// import { ProfileSelector } from "../components/ProfileSelector";
+import SignInSide from "../components/SignInSide";
export const HomePage: React.FC = () => {
return (
-
-
- {/* = () => {
return (
- = ({ viewModel }) => {
const {
// id,
@@ -24,46 +35,65 @@ export const ProjectPage: FC = ({ viewModel }) => {
ticketsTotalCount,
remainingDays,
files,
- activities,
- allProjects
+ // activities,
+ allProjects,
} = viewModel;
- const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
+ const tabNames: string[] = ["Tickets"]; //, "Files", "Activity"];
const [showModal, setShowModal] = useState(false);
- return (
-
-
+
*/}
);
};
diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
deleted file mode 100644
index 055974f..0000000
--- a/client/src/components/NewTicketModal.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { FC, useState, FormEvent } from "react";
-import { useRouteMatch } from "react-router-dom";
-import { Modal } from "./Modal";
-import { NewTicketForm } from "./NewTicketForm";
-import { Ticket } from "../types/Ticket";
-import { Project } from "../types/Project";
-import { post } from "../utils/http";
-import { Constants } from "../utils/Constants";
-// import { HttpResponse } from "../types/HttpResponse";
-
-interface IProps {
- show: boolean;
- handleClose(): void;
- allProjects: Project[];
-}
-
-export const NewTicketModal: FC
- note_add
- ) =>
- setTitle(e.target.value)
- }
- />
-
-
-
-
- mode_edit
-
-
-
-
+ {/*
date_range
) =>
setEndingDate(e.target.value)
}
@@ -81,14 +54,14 @@ export const NewTicketForm: FC = ({
- {allProjects.map(p => (
+ {allProjects.map((p) => (
))}
-
-
-
-
-
-
-
- New Ticket
-
-
- close
-
-
-
-
-
- );
-};
diff --git a/client/src/components/Panels/ProjectTabPanel.tsx b/client/src/components/Panels/ProjectTabPanel.tsx
new file mode 100644
index 0000000..b3fb77f
--- /dev/null
+++ b/client/src/components/Panels/ProjectTabPanel.tsx
@@ -0,0 +1,118 @@
+import React, { FC, useState, ReactNode } from "react";
+import { makeStyles, Theme, useTheme } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import SwipeableViews from "react-swipeable-views";
+import { Ticket } from "../../types/Ticket";
+import { Project } from "../../types/Project";
+import { TicketList } from "../Lists/TicketList";
+// import { FileList } from "./AppFileList";
+import { AppFile } from "../../types/AppFile";
+
+interface TabProps {
+ children?: ReactNode;
+ dir?: string;
+ index: any;
+ value: any;
+}
+
+const TabPanel: FC
+
+
+ {tabNames.map((t: string, i: number) => (
+
+
+
+
+
+ {/*
+ */}
+
+
+ );
+};
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/Panels/TabRouter.tsx
similarity index 74%
rename from client/src/components/TabRouter.tsx
rename to client/src/components/Panels/TabRouter.tsx
index 8ecfaba..24f9286 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/Panels/TabRouter.tsx
@@ -1,13 +1,12 @@
import React, { FC } from "react";
import { Route, useRouteMatch, Redirect } from "react-router-dom";
import { TabRouterHeader } from "./TabRouterHeader";
-import { TicketList } from "./TicketList";
-import { FileList } from "./AppFileList";
-// import { ActivityList } from "./ActivityList";
-import { Ticket } from "../types/Ticket";
-import { AppFile } from "../types/AppFile";
-import { Activity } from "../types/Activity";
-import { Project } from "../types/Project";
+import { TicketList } from "../Lists/TicketList";
+import { FileList } from "../Lists/AppFileList";
+import { Ticket } from "../../types/Ticket";
+import { AppFile } from "../../types/AppFile";
+import { Activity } from "../../types/Activity";
+import { Project } from "../../types/Project";
interface IProps {
tickets: Ticket[];
@@ -23,7 +22,7 @@ export const TabRouter: FC
+
+
+ {tabNames.map((t: string, i: number) => (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/client/src/components/UserTabRouter.tsx b/client/src/components/Panels/UserTabRouter.tsx
similarity index 74%
rename from client/src/components/UserTabRouter.tsx
rename to client/src/components/Panels/UserTabRouter.tsx
index af30bf3..6a45d4d 100644
--- a/client/src/components/UserTabRouter.tsx
+++ b/client/src/components/Panels/UserTabRouter.tsx
@@ -1,10 +1,10 @@
import React, { FC } from "react";
import { Route, useRouteMatch, Redirect } from "react-router-dom";
import { TabRouterHeader } from "./TabRouterHeader";
-import { ProjectList } from "./ProjectList";
-import { Ticket } from "../types/Ticket";
-import { Project } from "../types/Project";
-import { TicketList } from "./TicketList";
+import { ProjectList } from "../Lists/ProjectList";
+import { Ticket } from "../../types/Ticket";
+import { Project } from "../../types/Project";
+import { TicketList } from "../Lists/TicketList";
interface IProps {
tabNames: string[];
@@ -23,7 +23,7 @@ export const UserTabRouter: FCSelect a profile
-Demo User
+
+
-
-
- );
-};
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
deleted file mode 100644
index a574d41..0000000
--- a/client/src/components/ProjectList.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
-import { Ticket } from "../types/Ticket";
-import { HorizontalCard } from "./HorizontalCard";
-import { FilterBar } from "./FilterBar";
-import { put } from "../utils/http";
-import { Constants } from "../utils/Constants";
-import { HttpResponse } from "../types/HttpResponse";
-import { Project } from "../types/Project";
-
-type IProps = {
- projects: Project[];
-};
-
-export const ProjectList: FC
-
-
-
- playlist_add_check
-
- {tasksDone}/{tasksTotalCount}
-
-
-
- Due {remainingDays} days
-
-
-
- Projects
-
-
-
- );
-};
diff --git a/client/src/components/SignInSide.tsx b/client/src/components/SignInSide.tsx
new file mode 100644
index 0000000..bb58e38
--- /dev/null
+++ b/client/src/components/SignInSide.tsx
@@ -0,0 +1,118 @@
+import React from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: "100vh"
+ },
+ image: {
+ backgroundImage: "url(https://source.unsplash.com/daily?dev)",
+ backgroundRepeat: "no-repeat",
+ backgroundColor:
+ theme.palette.type === "light"
+ ? theme.palette.grey[50]
+ : theme.palette.grey[900],
+ backgroundSize: "cover",
+ backgroundPosition: "center"
+ },
+ paper: {
+ margin: theme.spacing(8, 4),
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center"
+ },
+ avatar: {
+ margin: theme.spacing(1),
+ backgroundColor: theme.palette.secondary.main
+ },
+ form: {
+ width: "100%",
+ marginTop: theme.spacing(1)
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2)
+ }
+ })
+);
+
+export default function SignInSide() {
+ const classes = useStyles();
+
+ return (
+ -
- {filteredTickets.length === 0 ? (
-
+
+
+
+ Sign in
+
+
+
+
- {
- setShowNew(false);
- }}
- show={showNew}
- allProjects={allProjects}
- />
-
- Tickets
- {addButton && ( -
-
-
- );
-};
diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx
index 3242e63..98f6ff9 100644
--- a/client/src/components/UserHeader.tsx
+++ b/client/src/components/UserHeader.tsx
@@ -1,21 +1,36 @@
import React, { FC } from "react";
import { Header } from "../components/Header";
-import { Avatar } from "../components/Avatar";
+import { UserAvatar } from "./Avatars/UserAvatar";
+import {
+ Grid,
+ // makeStyles, Theme
+} from "@material-ui/core";
interface IProps {
fullName: string;
presentation: string;
picture: string;
}
+
+// const useStyles = makeStyles((theme: Theme) => ({
+// root: {
+// paddingTop: theme.spacing(2),
+// flexGrow: 1,
+// },
+// }));
+
export const UserHeader: FC-
- {filteredTickets.length === 0 ? (
-
-
);
};
diff --git a/client/src/controllers/UserController.tsx b/client/src/controllers/UserController.tsx
index 181a3fa..fc31881 100644
--- a/client/src/controllers/UserController.tsx
+++ b/client/src/controllers/UserController.tsx
@@ -14,6 +14,7 @@ export const UserController: FC = () => {
const [user, setUser] = useState
-
-
+ //
+
+
+ //
+
+
+
+
-
+
+
+ {/*
+ );
+};
+
+export default MainLayout;
diff --git a/client/src/layouts/PageLayout.tsx b/client/src/layouts/PageLayout.tsx
new file mode 100644
index 0000000..3c1c099
--- /dev/null
+++ b/client/src/layouts/PageLayout.tsx
@@ -0,0 +1,43 @@
+import React, { FC, ReactNode } from "react";
+import { makeStyles, Theme, Container } from "@material-ui/core";
+
+/**
+ * @function useStyles creates the css styles used in the following component.
+ */
+const useStyles = makeStyles((theme: Theme) => ({
+ // root style allow for fixed footer
+ header: {
+ margin: theme.spacing(1),
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+ flexGrow: 1,
+ },
+ content: {
+ margin: theme.spacing(1),
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+}));
+
+interface IProps {
+ header: ReactNode;
+ content: ReactNode;
+}
+
+/**
+ * PageLayout divide the page in 2 parts: Header and Content, to ensure cohesion.
+ *
+ * @param Header - The encapsulated component.
+ * @param Content - The encapsulated component.
+ */
+const PageLayout: FC{header}
+ {content}
+
-
+ //
-
- Ticket Manager
-
-
-
-
-
-
-
+ //
+
+ //
+ // Ticket Manager
+ //
+ //
+ //
+ //
+ //
+ //
+ //
-
+ error
-error
} + /> ); }; diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 464d0e4..43e12cd 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -1,16 +1,27 @@ import React, { FC, useState } from "react"; -import ProjectVM from "../VM/ProjectVM"; +import { Grid, makeStyles, Theme } from "@material-ui/core"; import { Header } from "../components/Header"; -import { AvatarList } from "../components/AvatarList"; -import { ProgressBar } from "../components/ProgressBar"; -import { TabRouter } from "../components/TabRouter"; -import { FloatingButton } from "../components/FloatingButton"; -import { UsersModal } from "../components/UsersModal"; +import { AvatarList } from "../components/Avatars/AvatarList"; +import { ProgressBar } from "../components/Progress/ProgressBar"; +import { FloatingButton } from "../components/Buttons/FloatingButton"; +import { UsersModal } from "../components/Modals/UsersModal"; +import { ProjectTabPanel } from "../components/Panels/ProjectTabPanel"; +import ProjectVM from "../VM/ProjectVM"; +import PageLayout from "../layouts/PageLayout"; +import { ProgressInfo } from "../components/Progress/ProgressInfo"; interface IProps { viewModel: ProjectVM; } +const useStyles = makeStyles((theme: Theme) => ({ + root: { + marginTop: theme.spacing(4), + marginBottom: theme.spacing(4), + flexGrow: 1, + }, +})); + export const ProjectPage: FC
- = ({ viewModel }) => {
const {
title,
@@ -19,61 +38,98 @@ export const TicketPage: FC = ({ viewModel }) => {
status,
category,
impact,
- difficulty
+ difficulty,
} = viewModel;
const daysToEnd: number = getRemainingdays(endingDate);
// let notes: string = "";
+ const classes = useStyles();
- return (
-
-
+
+ );
+ };
+
+ return (
+
- setShowModal(true)}
- />
- setShowModal(false)}
+ const classes = useStyles();
+
+ const Content: FC = () => {
+ return (
+ <>
+ setShowModal(false)}
+ />
+
+
+
+ setShowModal(true)}
+ />
+
+
+
+
-
+
-
-
- = (info: InfoProps) => {
+// const classes = useStyles();
+
+// return (
+//
+//
+//
+//
+// );
+// };
diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx
index 2b908af..b3d8e2c 100644
--- a/client/src/pages/UserPage.tsx
+++ b/client/src/pages/UserPage.tsx
@@ -1,28 +1,41 @@
import React, { FC } from "react";
import { UserVM } from "../VM/UserVM";
import { UserHeader } from "../components/UserHeader";
-import { UserTabRouter } from "../components/UserTabRouter";
+import { UserTabPanel } from "../components/Panels/UserTabPanel";
+import PageLayout from "../layouts/PageLayout";
interface IProps {
viewModel: UserVM;
}
+
export const UserPage: FC = ({ viewModel }) => {
- const { fullName, presentation, picture, projects, tickets } = viewModel;
+ const {
+ fullName,
+ presentation,
+ picture,
+ projects,
+ tickets,
+ allUsers,
+ } = viewModel;
const tabNames: string[] = ["Projects", "Tickets"];
+
return (
-
-
+
+
+
);
};
-
+
+ );
+ };
+ return (
+
-
- - In project: {" "} - {project.title} -
-
- timer
- Due in {daysToEnd} days
-
+
+
+
+
+ Project:
+ {project.title}
+
+
+
+
+
-
-
-
- Status: {status}
- {/* close */}
-
-
-
- Category: {category}
- {/* close */}
-
-
-
- Impact: {impact}
- {/* close */}
-
-
-
- Difficulty: {difficulty}
- {/* close */}
-
-
+
+ {/* ) =>
+ // setDescription(e.target.value)
+ // }
+ > */}
-
-
+ }
+ />
);
};
diff --git a/client/src/types/enums/category.ts b/client/src/types/enums/category.ts
new file mode 100644
index 0000000..07e06d0
--- /dev/null
+++ b/client/src/types/enums/category.ts
@@ -0,0 +1,3 @@
+const Category: string[] = ["Product", "Tech", "Design", "Marketing", "Test"];
+
+export default Category;
diff --git a/client/src/types/enums/difficulty.ts b/client/src/types/enums/difficulty.ts
new file mode 100644
index 0000000..746c54d
--- /dev/null
+++ b/client/src/types/enums/difficulty.ts
@@ -0,0 +1,3 @@
+const Difficulty: string[] = ["Easy", "Medium", "Hard"];
+
+export default Difficulty;
diff --git a/client/src/types/enums/impact.ts b/client/src/types/enums/impact.ts
new file mode 100644
index 0000000..1584183
--- /dev/null
+++ b/client/src/types/enums/impact.ts
@@ -0,0 +1,3 @@
+const Impact: string[] = ["High", "Medium", "Low"];
+
+export default Impact;
diff --git a/client/src/utils/PrivateRoute.jsx b/client/src/utils/PrivateRoute.jsx
new file mode 100644
index 0000000..61f1d4d
--- /dev/null
+++ b/client/src/utils/PrivateRoute.jsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+import { Route } from "react-router-dom";
+import { useAuth0 } from "../authentication/auth0";
+
+export const PrivateRoute = ({ component: Component, path, ...rest }) => {
+ const { loading, isAuthenticated, loginWithRedirect } = useAuth0();
+
+ useEffect(() => {
+ if (loading || isAuthenticated) {
+ return;
+ }
+ const fn = async () => {
+ await loginWithRedirect({
+ appState: { targetUrl: window.location.pathname }
+ });
+ };
+ fn();
+ }, [loading, isAuthenticated, loginWithRedirect, path]);
+
+ const render = props =>
+ isAuthenticated === true ?
+
-
-
- {/*
- */}
+
+ {/*
+ */}
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-