update InputFile; AppFileList

client/src/components/AppFileList.tsx

@@ -3,6 +3,7 @@ import { AppFile } from "../types/AppFile";
 import { FileCollection } from "./FileCollection";
 import { InputFile } from "./InputFile";
 import { FilterBar } from "./FilterBar";
+import { Grid, Typography } from "@material-ui/core";
 
 type IProps = {
   files: AppFile[];
@@ -18,14 +19,20 @@ export const FileList: FC<IProps> = ({ files }) => {
   };
   return (
     <>
-      <div className="row valign-wrapper">
+      <Grid container>
-        <h3>Files</h3>
+        <Grid item xs>
+          <Typography variant="h4" component="h4">
+            Files
+          </Typography>
+        </Grid>
+        <Grid item xs={4}>
           <FilterBar
             filterText={filterText}
             handleChange={handleChange}
             clearFilterText={clearFilterText}
           />
-      </div>
+        </Grid>
+      </Grid>
       <InputFile />
       <FileCollection files={files} filterText={filterText} />
     </>

client/src/components/AvatarList.tsx

@@ -13,7 +13,7 @@ export const AvatarList: FC<AvatarListProps> = ({ users }) => {
     <></>
   ) : (
     <>
-      <AvatarGroup max={2}>
+      <AvatarGroup max={5}>
         {users.map((user: User, i: number) => (
           <Link to={`/users/${user.id}`} key={i}>
             <Avatar src={user.picture} alt={user.fullName} />

client/src/components/InputFile.tsx

@@ -1,27 +1,62 @@
 import React, { FC } from "react";
+import { CloudUpload } from "@material-ui/icons";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
 
 export const InputFile: FC = () => {
   return (
     <>
       <form action="/upload">
         <div className="file-field input-field">
-          <div className="btn indigo lighten-1">
+          <UploadButton>
-            <i className="material-icons ">cloud_upload</i>
+            <CloudUpload />
             <input
               type="file"
               multiple
               accept=".doc,.docx,.pdf,.md,.gdoc,.zip,image/*"
             />
-          </div>
+          </UploadButton>
-          <div className="file-path-wrapper">
-            <input
-              className="file-path validate"
-              type="text"
-              placeholder="Upload one or more files"
-            />
-          </div>
         </div>
       </form>
     </>
   );
 };
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      "& > *": {
+        margin: theme.spacing(1)
+      }
+    },
+    input: {
+      display: "none"
+    }
+  })
+);
+
+const UploadButton: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <input
+        accept=".doc,.docx,.pdf,.md,.gdoc,.zip,image/*"
+        className={classes.input}
+        id="contained-button-file"
+        multiple
+        type="file"
+      />
+      <label htmlFor="contained-button-file">
+        <Button
+          variant="contained"
+          color="primary"
+          component="span"
+          startIcon={<CloudUpload />}
+        >
+          Upload files
+        </Button>
+      </label>
+    </div>
+  );
+};

client/src/components/ProjectTabPanel.tsx

@@ -0,0 +1,110 @@
+import React, { FC } 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 { FileList } from "./AppFileList";
+import { TicketList } from "./TicketList";
+import { AppFile } from "../types/AppFile";
+
+interface TabProps {
+  children?: React.ReactNode;
+  dir?: string;
+  index: any;
+  value: any;
+}
+
+const TabPanel: FC<TabProps> = (props: TabProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`full-width-tabpanel-${index}`}
+      aria-labelledby={`full-width-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box p={3}>{children}</Box>}
+    </Typography>
+  );
+};
+
+const a11yProps = (index: any) => {
+  return {
+    id: `full-width-tab-${index}`,
+    "aria-controls": `full-width-tabpanel-${index}`
+  };
+};
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: "#ffffff",
+    flexGrow: 1
+  }
+}));
+
+interface IProps {
+  tickets: Ticket[];
+  remainingDays?: number;
+  tabNames: string[];
+  files: AppFile[];
+  // activities: Activity[];
+  allProjects: Project[];
+}
+
+export const ProjectTabPanel: FC<IProps> = ({
+  tickets,
+  tabNames,
+  files
+  // allProjects
+}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
+
+  const handleChangeIndex = (index: number) => {
+    setValue(index);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static" color="inherit">
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          indicatorColor="primary"
+          textColor="primary"
+          variant="fullWidth"
+          aria-label="full width tabs example"
+        >
+          {tabNames.map((t: string, i: number) => (
+            <Tab key={i} label={t} {...a11yProps({ i })} />
+          ))}
+        </Tabs>
+      </AppBar>
+      <SwipeableViews
+        axis={theme.direction === "rtl" ? "x-reverse" : "x"}
+        index={value}
+        onChangeIndex={handleChangeIndex}
+      >
+        <TabPanel value={value} index={0} dir={theme.direction}>
+          <TicketList tickets={tickets} allProjects={[]} addButton={false} />
+        </TabPanel>
+        <TabPanel value={value} index={1} dir={theme.direction}>
+          <FileList files={files} />
+        </TabPanel>
+      </SwipeableViews>
+    </div>
+  );
+};

client/src/components/TicketList.tsx

@@ -42,7 +42,6 @@ export const TicketList: FC<TicketListProps> = ({
   );
   return (
     <>
-      <div className="row valign-wrapper">
       <NewTicketModal
         handleClose={() => {
           setShowNew(false);
@@ -93,7 +92,6 @@ export const TicketList: FC<TicketListProps> = ({
           </div>
         </Grid>
       </Grid>
-      </div>
     </>
   );
 };

client/src/pages/ProjectPage.tsx

@@ -6,6 +6,8 @@ import { ProgressBar } from "../components/ProgressBar";
 import { TabRouter } from "../components/TabRouter";
 import { FloatingButton } from "../components/FloatingButton";
 import { UsersModal } from "../components/UsersModal";
+import { Container, Grid } from "@material-ui/core";
+import { ProjectTabPanel } from "../components/ProjectTabPanel";
 
 interface IProps {
   viewModel: ProjectVM;
@@ -32,38 +34,43 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
   const [showModal, setShowModal] = useState<boolean>(false);
 
   return (
-    <div className="section">
+    <Container maxWidth="md">
-      <div className="container">
       <Header title={title} description={description} />
-        <div className="row valign-wrapper">
-          <AvatarList users={users} />
-          <FloatingButton
-            icon="add"
-            color="default"
-            size="small"
-            onClick={() => setShowModal(true)}
-          />
       <UsersModal
         show={showModal}
         users={users}
         allUsers={allUsers}
         handleClose={() => setShowModal(false)}
       />
-        </div>
+
+      <Grid container>
+        <Grid item xs={3}>
+          <AvatarList users={users} />
+        </Grid>
+        <Grid item xs={9}>
+          <FloatingButton
+            icon="add"
+            color="default"
+            size="small"
+            onClick={() => setShowModal(true)}
+          />
+        </Grid>
+      </Grid>
+
       <ProgressBar
         value={progression}
         tasksDone={ticketsDone}
         tasksTotalCount={ticketsTotalCount}
         remainingDays={remainingDays}
       />
-        <TabRouter
+
+      <ProjectTabPanel
         tabNames={tabNames}
         tickets={tickets}
         files={files}
-          activities={activities}
+        // activities={activities}
         allProjects={allProjects}
       />
-      </div>
+    </Container>
-    </div>
   );
 };