FInished NewTicketForm layout

client/src/components/MemberList.tsx

@@ -0,0 +1,50 @@
+import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
+import { TabRouterHeader } from "./TabRouterHeader";
+import { TicketList } from "./TicketList";
+import { FileList } from "./AppFileList";
+import { Ticket } from "../types/Ticket";
+import { AppFile } from "../types/AppFile";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
+import { ActivityList } from "./ActivityList";
+import { Activity } from "../types/Activity";
+import { NewTicketModal } from "./NewTicketModal";
+import { User } from "../types/User";
+import { UsersModalEntry } from "./UsersModalEntry";
+import { FilterBar } from "./FilterBar";
+
+interface IProps {
+  users: User[];
+}
+
+export const MemberList: FC<IProps> = ({ users }) => {
+  const [members, setMembers] = useState<User[]>([]);
+  const [filterText, setFilterText] = useState<string>("");
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
+  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    setFilterText(e.target.value);
+  };
+  return (
+    <>
+      <FilterBar
+        filterText={filterText}
+        clearFilterText={clearFilterText}
+        handleChange={handleChange}
+      />
+      <ul>
+        {users.map((u: User) => (
+          <li key={u.id}>
+            <UsersModalEntry
+              user={u}
+              members={members}
+              setMembers={setMembers}
+            />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

client/src/components/NewTicketForm.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+
+interface IProps {}
+
+export const NewTicketForm: FC<IProps> = () => {
+  return (
+    <>
+      <div className="row">
+        <div className="input-field">
+          <i className="material-icons prefix">note_add</i>
+          <input id="title" type="text" className="validate" />
+          <label htmlFor="title">Title</label>
+        </div>
+
+        <div className="input-field">
+          <i className="material-icons prefix">mode_edit</i>
+          <textarea
+            id="description"
+            className="materialize-textarea validate"
+          ></textarea>
+          <label htmlFor="description">Description</label>
+        </div>
+
+        <div className="input-field">
+          <i className="material-icons prefix">date_range</i>
+          <input id="Due Date" type="text" className="datepicker" />
+          <label htmlFor="Due Date">Due Date</label>
+        </div>
+
+        <div className="input-field">
+          <select id="project" className="browser-default">
+            <option value="" disabled selected>
+              Project
+            </option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};

client/src/components/NewTicketModal.tsx

@@ -9,19 +9,20 @@ import { Constants } from "../utils/Constants";
 import { UsersModalEntry } from "./UsersModalEntry";
 import { useParams } from "react-router-dom";
 import _ from "underscore";
+import { NewTicketTabRouter } from "./NewTicketTabRouter";
 
 interface IProps {
   show: boolean;
   handleClose(): void;
   // users: User[];
-  // allUsers: User[];
+  allUsers: User[];
 }
 
 export const NewTicketModal: FC<IProps> = ({
   show,
-  handleClose
+  handleClose,
   // users,
-  // allUsers
+  allUsers
 }) => {
   const [filterText, setFilterText] = useState<string>("");
   // const [members, setMembers] = useState<User[]>(users);
@@ -48,26 +49,24 @@ export const NewTicketModal: FC<IProps> = ({
   useEffect(() => {});
   return (
     <Modal show={show} handleClose={handleClose}>
-      <div className="row valign-wrapper blue">
+      <div className="row valign-wrapper indigo">
         <div className="col s10">
           <h4 className="white-text">New Ticket</h4>
         </div>
         <div className="col s2">
           <i
-            className="right material-icons blue lighten-3 circle"
+            className="right material-icons indigo lighten-3 circle"
             onClick={handleClose}
           >
             close
           </i>
         </div>
       </div>
-      <div className="center">
-        {/* <AvatarList users={users} /> */}
-        {/* <FilterBar
-          filterText={filterText}
-          clearFilterText={() => setFilterText("")}
-          handleChange={handleChange}
-        /> */}
+      <div className="row">
+        <NewTicketTabRouter
+          tabNames={["Details", "Members"]}
+          users={allUsers}
+        />
       </div>
 
       <form onSubmit={handleSubmit}>
@@ -82,11 +81,11 @@ export const NewTicketModal: FC<IProps> = ({
             </li>
           ))}
         </ul> */}
-        <div className="modal-footer">
+        <div className="modal-footer grey lighten-3">
           <input
             type="submit"
-            className="modal-close waves-effect waves-green btn"
-            value="Done"
+            className="modal-close waves-effect waves-green btn indigo"
+            value="Create Task"
           />
         </div>
       </form>

client/src/components/NewTicketTabRouter.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
+import { TabRouterHeader } from "./TabRouterHeader";
+import { NewTicketForm } from "./NewTicketForm";
+import { MemberList } from "./MemberList";
+import { User } from "../types/User";
+
+interface IProps {
+  tabNames: string[];
+  users: User[];
+}
+
+export const NewTicketTabRouter: FC<IProps> = ({ tabNames, users }) => {
+  const { url } = useRouteMatch();
+  return (
+    <>
+      <div className="row">
+        <TabRouterHeader tabNames={tabNames} />
+
+        <Redirect from={url} to={`${url}/details`} />
+
+        <form onSubmit={() => {}}>
+          <Route path={`${url}/details`}>
+            <NewTicketForm />
+          </Route>
+
+          <Route path={`${url}/members`}>
+            <MemberList users={users} />
+          </Route>
+        </form>
+      </div>
+    </>
+  );
+};

client/src/components/ProjectList.tsx

@@ -4,9 +4,8 @@ import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
 import { put } from "../utils/http";
-import { HttpResponse } from "../types/HttpResponse";
 import { Constants } from "../utils/Constants";
-import { NewTicketModal } from "./NewTicketModal";
+import { HttpResponse } from "../types/HttpResponse";
 import { Project } from "../types/Project";
 
 type IProps = {
@@ -39,12 +38,13 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
   return (
     <>
       <div className="row valign-wrapper">
-        <NewTicketModal
+        {/* <NewTicketModal
           handleClose={() => {
             setShowNew(false);
           }}
           show={showNew}
-        />
+          allUsers={users}
+        /> */}
         <h3>Projects</h3>
         <FloatingButton
           color="indigo lighten-1"

client/src/components/TabRouter.tsx

@@ -8,6 +8,7 @@ import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { ActivityList } from "./ActivityList";
 import { Activity } from "../types/Activity";
 import { NewTicketModal } from "./NewTicketModal";
+import { User } from "../types/User";
 
 interface IProps {
   tickets: Ticket[];
@@ -15,13 +16,15 @@ interface IProps {
   tabNames: string[];
   files: AppFile[];
   activities: Activity[];
+  allUsers: User[];
 }
 
 export const TabRouter: FC<IProps> = ({
   tickets,
   tabNames,
   files,
-  activities
+  activities,
+  allUsers
 }) => {
   const { url } = useRouteMatch();
 
@@ -33,7 +36,7 @@ export const TabRouter: FC<IProps> = ({
         <Redirect from={url} to={`${url}/tickets`} />
 
         <Route path={`${url}/tickets`}>
-          <TicketList tickets={tickets} />
+          <TicketList tickets={tickets} users={allUsers} />
         </Route>
 
         <Route path={`${url}/files`}>

client/src/components/TabRouterHeader.tsx

@@ -7,11 +7,12 @@ interface IProps {
 }
 
 export const TabRouterHeader: FC<IProps> = ({
-  tabClass = "tab col s4",
-  tabNames
+  tabNames,
+  tabClass = `tab col s${12 / tabNames.length}`
 }) => {
   const [isActive, setIsActive] = useState(0);
   const nTabs = tabNames.length;
+
   return (
     <>
       <ul className="tabs">

client/src/components/TicketList.tsx

@@ -3,16 +3,18 @@ import { Ticket } from "../types/Ticket";
 import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
 import { FilterBar } from "./FilterBar";
-import { put } from "../utils/http";
+import { User } from "../types/User";
 import { HttpResponse } from "../types/HttpResponse";
+import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { NewTicketModal } from "./NewTicketModal";
 
 type TicketListProps = {
   tickets: Ticket[];
+  users: User[];
 };
 
-export const TicketList: FC<TicketListProps> = ({ tickets }) => {
+export const TicketList: FC<TicketListProps> = ({ tickets, users }) => {
   const [filterText, setFilterText] = useState<string>("");
   const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
     setFilterText("");
@@ -43,10 +45,11 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
             setShowNew(false);
           }}
           show={showNew}
+          allUsers={users}
         />
         <h3>Tickets</h3>
         <FloatingButton
-          color="indigo lighten-1"
+          color="indigo lighten-3"
           size="small"
           onClick={onClick}
         />

client/src/components/UserTabRouter.tsx

@@ -1,13 +1,10 @@
 import React, { FC } from "react";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { TicketList } from "./TicketList";
-
-import { Ticket } from "../types/Ticket";
-
-import { Route, useRouteMatch, Redirect } from "react-router-dom";
-
-import { Project } from "../types/Project";
 import { ProjectList } from "./ProjectList";
+import { Ticket } from "../types/Ticket";
+import { Project } from "../types/Project";
 
 interface IProps {
   tabNames: string[];
@@ -29,9 +26,9 @@ export const UserTabRouter: FC<IProps> = ({ tickets, tabNames, projects }) => {
           <ProjectList projects={projects} />
         </Route>
 
-        <Route path={`${url}/tickets`}>
+        {/* <Route path={`${url}/tickets`}>
           <TicketList tickets={tickets} />
-        </Route>
+        </Route> */}
       </div>
     </>
   );

client/src/components/UsersModal.tsx

@@ -45,13 +45,13 @@ export const UsersModal: FC<IProps> = ({
   useEffect(() => {});
   return (
     <Modal show={show} handleClose={handleClose}>
-      <div className="row valign-wrapper blue">
+      <div className="row valign-wrapper indigo">
         <div className="col s10">
           <h4 className="white-text">Manage users</h4>
         </div>
         <div className="col s2">
           <i
-            className="right material-icons blue lighten-3 circle"
+            className="right material-icons indigo lighten-3 circle"
             onClick={handleClose}
           >
             close
@@ -79,10 +79,10 @@ export const UsersModal: FC<IProps> = ({
             </li>
           ))}
         </ul>
-        <div className="modal-footer">
+        <div className="modal-footer grey lighten-3">
           <input
             type="submit"
-            className="modal-close waves-effect waves-green btn"
+            className="modal-close waves-effect waves-green btn indigo"
             value="Done"
           />
         </div>

client/src/pages/ProjectPage.tsx

@@ -37,7 +37,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           <AvatarList users={users} />
           <FloatingButton
             icon="add"
-            color="indigo lighten-1"
+            color="indigo lighten-3"
             size="small"
             onClick={() => setShowModal(true)}
           />
@@ -59,6 +59,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           tickets={tickets}
           files={files}
           activities={activities}
+          allUsers={allUsers}
         />
       </div>
     </div>