Tomasz Owczarczyk
323
app/routes/Apps/TasksDetails/TasksDetails.js
Executable file
323
app/routes/Apps/TasksDetails/TasksDetails.js
Executable file
@@ -0,0 +1,323 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Table,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Media,
|
||||
Input,
|
||||
InputGroup,
|
||||
CustomInput,
|
||||
InputGroupAddon,
|
||||
Badge,
|
||||
Avatar
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
|
||||
import { Attachment } from "../../components/Attachment";
|
||||
import { Comment } from "../../components/Comment";
|
||||
|
||||
const TasksDetails = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tasks Details"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-5">
|
||||
<div className="small mb-3">
|
||||
Task Details
|
||||
</div>
|
||||
<Table size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="align-middle">Project</td>
|
||||
<td className="text-right">
|
||||
<a href="#" className="text-decoration-none">Analytics Redo</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Assigned by</td>
|
||||
<td className="text-right">
|
||||
<a href="#" className="text-decoration-none">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Start Date</td>
|
||||
<td className="text-right">
|
||||
Thu 12 May 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">End Date</td>
|
||||
<td className="text-right">
|
||||
Wed 18 May 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Priority</td>
|
||||
<td className="text-right">
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link" className="p-0 text-decoration-none">
|
||||
<i className="fa fa-circle text-success mr-2"></i>
|
||||
Small<i className="fa fa-angle-down ml-2" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem header>Select Priority</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-circle text-danger mr-2"></i>
|
||||
Big
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-circle text-warning mr-2"></i>
|
||||
High
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-circle text-primary mr-2"></i>
|
||||
Normal
|
||||
</DropdownItem>
|
||||
<DropdownItem active>
|
||||
<i className="fa fa-circle text-success mr-2"></i>
|
||||
Small
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Progress</td>
|
||||
<td className="align-middle text-right">
|
||||
30%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Task ID</td>
|
||||
<td className="align-middle text-right">
|
||||
# 6726746
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="align-middle">Date Assigned</td>
|
||||
<td className="align-middle text-right">
|
||||
Wed, 16 Dec 2015, 12:17 PM
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
Assigned to
|
||||
</div>
|
||||
<Nav pills vertical>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<Media>
|
||||
<Media left middle className="mr-3 align-self-center">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="mt-0">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</div>
|
||||
<span className="small">
|
||||
{ faker.address.state() }, { faker.address.stateAbbr() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
<i className="fa fa-fw fa-circle text-success ml-auto align-self-center ml-2"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<Media>
|
||||
<Media left middle className="mr-3 align-self-center">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="mt-0">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</div>
|
||||
<span className="small">
|
||||
{ faker.address.state() }, { faker.address.stateAbbr() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
<i className="fa fa-fw fa-circle text-warning ml-auto align-self-center ml-2"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<Media>
|
||||
<Media left middle className="mr-3 align-self-center">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="mt-0">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</div>
|
||||
<span className="small">
|
||||
{ faker.address.state() }, { faker.address.stateAbbr() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
<i className="fa fa-fw fa-circle text-danger ml-auto align-self-center ml-2"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<i className="fa fa-fw fa-plus mr-2"></i>
|
||||
Add New People
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<ProjectsSmHeader
|
||||
subTitle="Tasks"
|
||||
subTitleLink="/apps/tasks/grid"
|
||||
title="Task Details"
|
||||
/>
|
||||
{ /* START Right Content */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Media>
|
||||
<Media left href="#">
|
||||
<CustomInput type="checkbox" id="checkboxTaskDetails" label="" inline />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div className="mb-3">
|
||||
<h5>
|
||||
<span className="mr-2">
|
||||
#{ faker.random.number() }
|
||||
</span>
|
||||
{ faker.hacker.phrase() }
|
||||
</h5>
|
||||
<Badge pill color="primary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
<Badge pill color="secondary" className="mr-1">
|
||||
{ faker.commerce.department() }
|
||||
</Badge>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
<p className="lead">
|
||||
Animi ea magni voluptates accusamus laboriosam. Unde repellat hic id et aliquam ut qui dignissimos.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
{ faker.lorem.paragraphs() }
|
||||
</p>
|
||||
{ /* START Atachemnts */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-3">
|
||||
<span className="small mr-3">
|
||||
Attachments
|
||||
</span>
|
||||
<Badge pill color="secondary">
|
||||
3
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-word-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-excel-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-success"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Attachment
|
||||
icon="file-powerpoint-o"
|
||||
iconClassName="text-white"
|
||||
BgIconClassName="text-warning"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<a href="#">
|
||||
<i className="fa fa-plus mr-2"></i>
|
||||
Add More Files to this Task
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{ /* END Atachemnts */}
|
||||
<div className="mb-3">
|
||||
<span className="small mr-3">
|
||||
Comments
|
||||
</span>
|
||||
<Badge pill color="secondary">
|
||||
3
|
||||
</Badge>
|
||||
</div>
|
||||
<Comment />
|
||||
<Comment />
|
||||
{ /* END Comment Media */}
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend">
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa fa-paperclip"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Your message..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="primary">
|
||||
<i className="fa fa fa-send"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Right Content */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TasksDetails;
|
||||
Reference in New Issue
Block a user