mirror of
https://github.com/rjNemo/ticket_manager
synced 2026-06-06 00:36:39 +00:00
horizontal card
This commit is contained in:
parent
057a6f9b13
commit
ed237a6342
6 changed files with 140 additions and 36 deletions
|
|
@ -1,18 +1,16 @@
|
|||
import React, { FC } from "react";
|
||||
import { Button } from "./Button";
|
||||
import { FloatingButton } from "./FloatingButton";
|
||||
|
||||
type AvatarListProps = {
|
||||
interface AvatarListProps {
|
||||
avatars: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export const AvatarList: FC<AvatarListProps> = ({ avatars }) => {
|
||||
return (
|
||||
<div className="row valign-wrapper">
|
||||
<>
|
||||
{avatars.map((avatar: string) => (
|
||||
<img className="circle" src={avatar} width="32vh" height="32vh" />
|
||||
))}
|
||||
<FloatingButton icon="add" color="grey" size="small" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
41
client/src/components/HorizontalCard.tsx
Normal file
41
client/src/components/HorizontalCard.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import React, { FC } from "react";
|
||||
import { AvatarList } from "./AvatarList";
|
||||
|
||||
interface IProps {
|
||||
title: string;
|
||||
tasksTotalCount?: number;
|
||||
tasksDone?: number;
|
||||
remainingDays?: number;
|
||||
avatars: string[];
|
||||
}
|
||||
|
||||
export const HorizontalCard: FC<IProps> = ({
|
||||
title,
|
||||
tasksDone,
|
||||
tasksTotalCount,
|
||||
remainingDays,
|
||||
avatars
|
||||
}) => {
|
||||
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="right">
|
||||
<span>Due {remainingDays} days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,50 @@
|
|||
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";
|
||||
|
||||
interface IProps {}
|
||||
export const TabRouter: FC<IProps> = ({ children }) => {
|
||||
interface IProps {
|
||||
tickets: Ticket[];
|
||||
tasksTotalCount?: number;
|
||||
tasksDone?: number;
|
||||
remainingDays?: number;
|
||||
avatars: string[];
|
||||
}
|
||||
|
||||
export const TabRouter: FC<IProps> = ({
|
||||
tickets,
|
||||
tasksDone,
|
||||
tasksTotalCount,
|
||||
remainingDays,
|
||||
avatars
|
||||
}) => {
|
||||
const { url } = useRouteMatch();
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<TabRouterHeader />
|
||||
<div id="test1" className="col s12">
|
||||
Tickets
|
||||
<Switch>
|
||||
<div className="row">
|
||||
<TabRouterHeader />
|
||||
|
||||
<Route path={`${url}/tickets`}>
|
||||
<TicketList
|
||||
tickets={tickets}
|
||||
tasksDone={tasksDone}
|
||||
tasksTotalCount={tasksTotalCount}
|
||||
remainingDays={remainingDays}
|
||||
avatars={avatars}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route path={`${url}/files`}>
|
||||
{/* <TicketList tickets={tickets} /> */}
|
||||
</Route>
|
||||
|
||||
<Route path={`${url}/activity`}>
|
||||
{/* <TicketList tickets={tickets} /> */}
|
||||
</Route>
|
||||
</div>
|
||||
<div id="test2" className="col s12">
|
||||
Files
|
||||
</div>
|
||||
<div id="test3" className="col s12">
|
||||
Activity
|
||||
</div>
|
||||
</div>
|
||||
</Switch>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { FC, useState } from "react";
|
||||
import { Link, useRouteMatch } from "react-router-dom";
|
||||
|
||||
interface TabUnitProps {
|
||||
tabClass: string;
|
||||
|
|
@ -15,16 +16,17 @@ const TabUnit: FC<TabUnitProps> = ({
|
|||
text,
|
||||
value
|
||||
}) => {
|
||||
const { url } = useRouteMatch();
|
||||
return (
|
||||
<li className={tabClass} key={value}>
|
||||
<a
|
||||
<Link
|
||||
to={`${url}/${text}`}
|
||||
id={value}
|
||||
className={isActive === parseInt(value) ? "active" : ""}
|
||||
href={`#${text}`}
|
||||
onClick={() => setIsActive(parseInt(value))}
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
|
@ -47,7 +49,7 @@ export const TabRouterHeader: FC<IProps> = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="col s12">
|
||||
<div className="row col s12">
|
||||
<ul className="tabs">
|
||||
<TabUnit
|
||||
text="Tickets"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,47 @@
|
|||
import React, { FC } from "react";
|
||||
import { Ticket } from "../types/Ticket";
|
||||
import { FloatingButton } from "./FloatingButton";
|
||||
import { HorizontalCard } from "./HorizontalCard";
|
||||
|
||||
type TicketListProps = {
|
||||
tickets: Ticket[];
|
||||
tasksTotalCount?: number;
|
||||
tasksDone?: number;
|
||||
remainingDays?: number;
|
||||
avatars: string[];
|
||||
};
|
||||
|
||||
export const TicketList: FC<TicketListProps> = ({ tickets }) => {
|
||||
export const TicketList: FC<TicketListProps> = ({
|
||||
tickets,
|
||||
tasksDone,
|
||||
tasksTotalCount,
|
||||
remainingDays,
|
||||
avatars
|
||||
}) => {
|
||||
return (
|
||||
<div className="row">
|
||||
{tickets.map((t: Ticket) => (
|
||||
<li key={t.id}>{t.title}</li>
|
||||
))}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{tickets.map((t: Ticket) => (
|
||||
<li key={t.id}>
|
||||
<HorizontalCard
|
||||
title={t.title}
|
||||
tasksDone={tasksDone}
|
||||
tasksTotalCount={tasksTotalCount}
|
||||
remainingDays={remainingDays}
|
||||
avatars={avatars}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import React, { FC } from "react";
|
|||
import { Header } from "../components/Header";
|
||||
import { AvatarList } from "../components/AvatarList";
|
||||
import { ProgressBar } from "../components/ProgressBar";
|
||||
import { TicketList } from "../components/TicketList";
|
||||
import ProjectVM from "../viewModels/ProjectVM";
|
||||
import { TabRouter } from "../components/TabRouter";
|
||||
import { FloatingButton } from "../components/FloatingButton";
|
||||
|
||||
interface IProps {
|
||||
viewModel: ProjectVM;
|
||||
|
|
@ -24,19 +24,23 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
|
|||
<div className="section">
|
||||
<div className="container">
|
||||
<Header title={title} description={description} />
|
||||
<AvatarList avatars={avatars} />
|
||||
<div className="row valign-wrapper">
|
||||
<AvatarList avatars={avatars} />
|
||||
<FloatingButton icon="add" color="grey" size="small" />
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={value}
|
||||
tasksDone={ticketsDone}
|
||||
tasksTotalCount={ticketsTotalCount}
|
||||
remainingDays={remainingDays}
|
||||
/>
|
||||
<TabRouter>
|
||||
{/* <TabRouterSelector/> */}
|
||||
<TicketList tickets={tickets} />
|
||||
{/* <ChildFile />
|
||||
<ChildActivity /> */}
|
||||
</TabRouter>
|
||||
<TabRouter
|
||||
tickets={tickets}
|
||||
tasksDone={ticketsDone}
|
||||
tasksTotalCount={ticketsTotalCount}
|
||||
remainingDays={remainingDays}
|
||||
avatars={avatars}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue