From 1113e283b436c42ad861cecf03ba56e481592266 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Mon, 10 Feb 2020 10:44:17 +0100
Subject: [PATCH] horizontal card done

---
 client/src/components/HorizontalCard.tsx | 37 +++++++++++++++++-------
 client/src/components/TabRouter.tsx      |  4 ++-
 client/src/components/TicketList.tsx     |  5 ++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx
index b613116..a0d20dd 100644
--- a/client/src/components/HorizontalCard.tsx
+++ b/client/src/components/HorizontalCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, MouseEvent } from "react";
 import { AvatarList } from "./AvatarList";
 
 interface IProps {
@@ -7,6 +7,8 @@ interface IProps {
   tasksDone?: number;
   remainingDays?: number;
   avatars: string[];
+  validateTicket: (event: MouseEvent) => void;
+  archiveTicket: (event: MouseEvent) => void;
 }
 
 export const HorizontalCard: FC<IProps> = ({
@@ -14,23 +16,38 @@ export const HorizontalCard: FC<IProps> = ({
   tasksDone,
   tasksTotalCount,
   remainingDays,
-  avatars
+  avatars,
+  archiveTicket,
+  validateTicket
 }) => {
   return (
     <div className="col s12">
       <div className="card horizontal">
         <div className="card-stacked">
           <div className="card-content">
-            <h6>{title}</h6>
-            <AvatarList avatars={avatars} />
             <div className="row">
-              <i className="left material-icons">playlist_add_check</i>
-              <span>
-                {tasksDone}/{tasksTotalCount}
-              </span>
-
+              <div className="card-title">
+                <h6>{title}</h6>
+              </div>
+              <span>Due {remainingDays} days</span>
+              {/* <AvatarList avatars={avatars} /> */}
               <div className="right">
-                <span>Due {remainingDays} days</span>
+                {/* <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>
           </div>
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index 4f16a81..7a5c217 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/TabRouter.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { TicketList } from "./TicketList";
 import { Ticket } from "../types/Ticket";
-import { Switch, Route, useRouteMatch } from "react-router-dom";
+import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom";
 
 interface IProps {
   tickets: Ticket[];
@@ -26,6 +26,8 @@ export const TabRouter: FC<IProps> = ({
         <div className="row">
           <TabRouterHeader />
 
+          <Redirect from={url} to={`${url}/tickets`} />
+
           <Route path={`${url}/tickets`}>
             <TicketList
               tickets={tickets}
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 7a6b655..b7835a0 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -18,6 +18,9 @@ export const TicketList: FC<TicketListProps> = ({
   remainingDays,
   avatars
 }) => {
+  const archiveTicket = () => {};
+  const validateTicket = () => {};
+
   return (
     <div className="col s12">
       <div className="row valign-wrapper">
@@ -38,6 +41,8 @@ export const TicketList: FC<TicketListProps> = ({
               tasksTotalCount={tasksTotalCount}
               remainingDays={remainingDays}
               avatars={avatars}
+              validateTicket={validateTicket}
+              archiveTicket={archiveTicket}
             />
           </li>
         ))}