project page ticket tab done

client/src/components/HorizontalCard.tsx

@@ -1,54 +1,44 @@
 import React, { FC, MouseEvent } from "react";
 import { AvatarList } from "./AvatarList";
+import { Link } from "react-router-dom";
 
 interface IProps {
   title: string;
-  tasksTotalCount?: number;
-  tasksDone?: number;
   remainingDays?: number;
-  avatars: string[];
   validateTicket: (event: MouseEvent) => void;
   archiveTicket: (event: MouseEvent) => void;
 }
 
 export const HorizontalCard: FC<IProps> = ({
   title,
-  tasksDone,
-  tasksTotalCount,
   remainingDays,
-  avatars,
   archiveTicket,
   validateTicket
 }) => {
   return (
-    <div className="col s12">
-      <div className="card horizontal">
-        <div className="card-stacked">
-          <div className="card-content">
-            <div className="row">
-              <div className="card-title">
-                <h6>{title}</h6>
-              </div>
-              <span>Due {remainingDays} days</span>
-              {/* <AvatarList avatars={avatars} /> */}
-              <div className="right">
-                {/* <i className=" material-icons">playlist_add_check</i>
-                <span>
-                  {" "}
-                  {tasksDone}/{tasksTotalCount}
-                </span> */}
-
-                <a>
-                  <i className="material-icons" onClick={validateTicket}>
-                    check
-                  </i>
-                </a>
-                <a>
-                  <i className="material-icons" onClick={archiveTicket}>
-                    archive
-                  </i>
-                </a>
-              </div>
+    <div className="card horizontal">
+      <div className="card-stacked">
+        <div className="card-content">
+          <div className="row">
+            <div className="card-title">
+              <h6>
+                <Link to="#">
+                  <b>{title}</b>
+                </Link>
+              </h6>
+            </div>
+            <span>Due {remainingDays} days</span>
+            <div className="right">
+              <a>
+                <i className="material-icons" onClick={validateTicket}>
+                  check
+                </i>
+              </a>
+              <a>
+                <i className="material-icons" onClick={archiveTicket}>
+                  archive
+                </i>
+              </a>
             </div>
           </div>
         </div>

client/src/components/TabRouter.tsx

@@ -6,36 +6,22 @@ import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom";
 
 interface IProps {
   tickets: Ticket[];
-  tasksTotalCount?: number;
-  tasksDone?: number;
   remainingDays?: number;
-  avatars: string[];
+  tabNames: string[];
 }
 
-export const TabRouter: FC<IProps> = ({
-  tickets,
-  tasksDone,
-  tasksTotalCount,
-  remainingDays,
-  avatars
-}) => {
+export const TabRouter: FC<IProps> = ({ tickets, remainingDays, tabNames }) => {
   const { url } = useRouteMatch();
   return (
     <>
       <Switch>
         <div className="row">
-          <TabRouterHeader />
+          <TabRouterHeader nTabs={tabNames.length} tabNames={tabNames} />
 
           <Redirect from={url} to={`${url}/tickets`} />
 
           <Route path={`${url}/tickets`}>
-            <TicketList
-              tickets={tickets}
-              tasksDone={tasksDone}
-              tasksTotalCount={tasksTotalCount}
-              remainingDays={remainingDays}
-              avatars={avatars}
-            />
+            <TicketList tickets={tickets} remainingDays={remainingDays} />
           </Route>
 
           <Route path={`${url}/files`}>

client/src/components/TabRouterHeader.tsx

@@ -1,12 +1,51 @@
 import React, { FC, useState } from "react";
 import { Link, useRouteMatch } from "react-router-dom";
 
+interface IProps {
+  tabClass?: string;
+  nTabs: number;
+  tabNames: string[];
+}
+
+export const TabRouterHeader: FC<IProps> = ({
+  tabClass = "tab col s4",
+  nTabs,
+  tabNames
+}) => {
+  const [isActive, setIsActive] = useState(0);
+
+  return (
+    <>
+      <ul className="tabs z-depth-1">
+        {tabNames.map((name, i) => (
+          <TabUnit
+            text={name}
+            value={i.toString()}
+            tabClass={tabClass}
+            isActive={isActive}
+            setIsActive={setIsActive}
+            nTabs={nTabs}
+          />
+        ))}
+        <li
+          className="indicator"
+          style={{
+            left: `${(isActive / nTabs) * 100}%`,
+            right: `${(1 - (isActive + 1) / nTabs) * 100}%`
+          }}
+        ></li>
+      </ul>
+    </>
+  );
+};
+
 interface TabUnitProps {
   tabClass: string;
   isActive: number;
   setIsActive: React.Dispatch<React.SetStateAction<number>>;
   text: string;
   value: string;
+  nTabs: number;
 }
 
 const TabUnit: FC<TabUnitProps> = ({
@@ -14,15 +53,23 @@ const TabUnit: FC<TabUnitProps> = ({
   isActive,
   setIsActive,
   text,
-  value
+  value,
+  nTabs
 }) => {
   const { url } = useRouteMatch();
   return (
-    <li className={tabClass} key={value}>
+    <li
+      className={tabClass}
+      key={value}
+      style={{
+        left: `${(isActive / nTabs) * 100}%`,
+        right: `${(1 - (isActive + 1) / nTabs) * 100}%`
+      }}
+    >
       <Link
         to={`${url}/${text}`}
         id={value}
-        className={isActive === parseInt(value) ? "active" : ""}
+        className={isActive === parseInt(value) ? "active pink lighten-5" : ""}
         onClick={() => setIsActive(parseInt(value))}
       >
         {text}
@@ -30,50 +77,3 @@ const TabUnit: FC<TabUnitProps> = ({
     </li>
   );
 };
-
-interface IProps {
-  tabClass?: string;
-}
-
-export const TabRouterHeader: FC<IProps> = ({
-  tabClass = "tab col s3",
-
-  children
-}) => {
-  const [isActive, setIsActive] = useState(1);
-
-  //   const switchTab = (e: React.MouseEvent<HTMLAnchorElement>): void => {
-  //     e.preventDefault();
-  //     setIsActive(e.target.id);
-  //   };
-
-  return (
-    <>
-      <div className="row col s12">
-        <ul className="tabs">
-          <TabUnit
-            text="Tickets"
-            value="1"
-            tabClass={tabClass}
-            isActive={isActive}
-            setIsActive={setIsActive}
-          />
-          <TabUnit
-            text="Files"
-            value="2"
-            tabClass={tabClass}
-            isActive={isActive}
-            setIsActive={setIsActive}
-          />
-          <TabUnit
-            text="Activity"
-            value="3"
-            tabClass={tabClass}
-            isActive={isActive}
-            setIsActive={setIsActive}
-          />
-        </ul>
-      </div>
-    </>
-  );
-};

client/src/components/TicketList.tsx

@@ -5,48 +5,33 @@ import { HorizontalCard } from "./HorizontalCard";
 
 type TicketListProps = {
   tickets: Ticket[];
-  tasksTotalCount?: number;
-  tasksDone?: number;
   remainingDays?: number;
-  avatars: string[];
 };
 
-export const TicketList: FC<TicketListProps> = ({
-  tickets,
-  tasksDone,
-  tasksTotalCount,
-  remainingDays,
-  avatars
-}) => {
+export const TicketList: FC<TicketListProps> = ({ tickets, remainingDays }) => {
   const archiveTicket = () => {};
   const validateTicket = () => {};
 
   return (
-    <div className="col s12">
+    <>
       <div className="row valign-wrapper">
-        <div className="col s6 m4">
-          <h2>Tickets</h2>
-        </div>
-        <div className="col s6 m8">
-          <FloatingButton color="grey" size="big" />
-        </div>
+        <h3>Tickets</h3>
+        <FloatingButton color=" blue-grey lighten-4" size="big" />
       </div>
-
-      <ul>
-        {tickets.map((t: Ticket) => (
-          <li key={t.id}>
-            <HorizontalCard
-              title={t.title}
-              tasksDone={tasksDone}
-              tasksTotalCount={tasksTotalCount}
-              remainingDays={remainingDays}
-              avatars={avatars}
-              validateTicket={validateTicket}
-              archiveTicket={archiveTicket}
-            />
-          </li>
-        ))}
-      </ul>
-    </div>
+      <div className="col s12 grey">
+        <ul>
+          {tickets.map((t: Ticket) => (
+            <li key={t.id}>
+              <HorizontalCard
+                title={t.title}
+                remainingDays={remainingDays}
+                validateTicket={validateTicket}
+                archiveTicket={archiveTicket}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 };

client/src/pages/ProjectPage.tsx

@@ -20,6 +20,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     ticketsTotalCount,
     remainingDays
   } = viewModel;
+  const tabNames: string[] = ["Tickets", "Files", "Activity"];
   return (
     <div className="section">
       <div className="container">
@@ -35,11 +36,9 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           remainingDays={remainingDays}
         />
         <TabRouter
+          tabNames={tabNames}
           tickets={tickets}
-          tasksDone={ticketsDone}
-          tasksTotalCount={ticketsTotalCount}
           remainingDays={remainingDays}
-          avatars={avatars}
         />
       </div>
     </div>