Tomasz Owczarczyk
123
app/routes/components/Projects/ProjectsCardGrid.js
Executable file
123
app/routes/components/Projects/ProjectsCardGrid.js
Executable file
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
CardFooter,
|
||||
Progress,
|
||||
Avatar,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from './../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../utilities';
|
||||
|
||||
const badges = [
|
||||
<Badge pill color="success" className="mb-2" key="badge-active">
|
||||
Active
|
||||
</Badge>,
|
||||
<Badge pill color="danger" className="mb-2" key="badge-suspended">
|
||||
Suspended
|
||||
</Badge>,
|
||||
<Badge pill color="warning" className="mb-2" key="badge-waiting">
|
||||
Waiting
|
||||
</Badge>,
|
||||
<Badge pill color="secondary" className="mb-2" key="badge-paused">
|
||||
Paused
|
||||
</Badge>,
|
||||
];
|
||||
|
||||
const taskCompleted = [
|
||||
"15",
|
||||
"28",
|
||||
"30",
|
||||
"80",
|
||||
"57",
|
||||
"90"
|
||||
];
|
||||
|
||||
const ProjectsCardGrid = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Card */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
{ randomArray(badges) }
|
||||
<div className="mb-2">
|
||||
<a href="#" className="mr-2">
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</a>
|
||||
<Link to="/apps/tasks/grid" className="text-decoration-none">
|
||||
{ faker.company.catchPhrase() }
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
Last Edited by: { faker.name.firstName() } { faker.name.lastName() } <br />
|
||||
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Progress value={ randomArray(taskCompleted) } style={{height: "5px"}} className="mb-2" />
|
||||
<div>
|
||||
Tasks Completed:
|
||||
<span className="text-inverse">
|
||||
36/94
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
/>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
/>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
/>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<span className="align-self-center">
|
||||
20 Sep, Fri, 2018
|
||||
</span>
|
||||
<UncontrolledButtonDropdown className="align-self-center ml-auto">
|
||||
<DropdownToggle color="link" size="sm" className="pr-0">
|
||||
<i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-folder-open mr-2"></i>
|
||||
View
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-ticket mr-2"></i>
|
||||
Add Task
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-paperclip mr-2"></i>
|
||||
Add Files
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-trash mr-2"></i>
|
||||
Delete
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { ProjectsCardGrid };
|
||||
179
app/routes/components/Projects/ProjectsLeftNav.js
Executable file
179
app/routes/components/Projects/ProjectsLeftNav.js
Executable file
@@ -0,0 +1,179 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
InputGroup,
|
||||
Button,
|
||||
Input,
|
||||
InputGroupAddon,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Badge,
|
||||
Media,
|
||||
Avatar
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
|
||||
const ProjectsLeftNav = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
Search
|
||||
</div>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search for..." className="bg-white" />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button outline color="secondary">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
Favorites
|
||||
</div>
|
||||
<Nav pills vertical>
|
||||
<NavItem>
|
||||
<NavLink href="#" active>
|
||||
<i className="fa fa-fw fa-line-chart mr-2"></i>
|
||||
Overview
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<i className="fa fa-fw fa-calendar-o mr-2"></i>
|
||||
Calendar
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
Projects
|
||||
</div>
|
||||
<Nav pills vertical>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
|
||||
Analytics Redesign
|
||||
<Badge color="secondary" pill className="ml-auto align-self-center">
|
||||
12
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
|
||||
New Website
|
||||
<Badge color="secondary" pill className="ml-auto align-self-center">
|
||||
4
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
|
||||
Chart for Newsletter
|
||||
<Badge color="secondary" pill className="ml-auto align-self-center">
|
||||
9
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#">
|
||||
<i className="fa fa-fw fa-plus mr-2"></i>
|
||||
Add New Project
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</div>
|
||||
{ /* END Left Nav */}
|
||||
{ /* START Left Nav */}
|
||||
<div className="mb-4">
|
||||
<div className="small mb-3">
|
||||
People
|
||||
</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 */}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { ProjectsLeftNav };
|
||||
110
app/routes/components/Projects/ProjectsSmHeader.js
Executable file
110
app/routes/components/Projects/ProjectsSmHeader.js
Executable file
@@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { NavLink, Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Breadcrumb,
|
||||
ButtonToolbar,
|
||||
UncontrolledTooltip,
|
||||
BreadcrumbItem,
|
||||
ButtonGroup,
|
||||
} from './../../../components';
|
||||
|
||||
const ProjectsSmHeader = (props ) => (
|
||||
<React.Fragment>
|
||||
{ /* START Header Nav */}
|
||||
<div className="d-flex flex-column flex-md-row mb-3 mb-md-0">
|
||||
<Breadcrumb className="mr-auto d-flex align-items-center">
|
||||
{ /* START 1st */}
|
||||
<BreadcrumbItem active>
|
||||
<Link to="/">
|
||||
<i className="fa fa-home"></i>
|
||||
</Link>
|
||||
</BreadcrumbItem>
|
||||
{ /* END 1st */}
|
||||
|
||||
{ /* START 2nd */}
|
||||
{
|
||||
props.title ? (
|
||||
<BreadcrumbItem>
|
||||
<Link to={ props.subTitleLink }>
|
||||
{props.subTitle}
|
||||
</Link>
|
||||
</BreadcrumbItem>
|
||||
): (
|
||||
<BreadcrumbItem active>
|
||||
{props.subTitle}
|
||||
</BreadcrumbItem>
|
||||
)
|
||||
}
|
||||
{ /* END 2nd */}
|
||||
|
||||
{ /* START 3rd */}
|
||||
{
|
||||
props.title && (
|
||||
<BreadcrumbItem active>
|
||||
{props.title}
|
||||
</BreadcrumbItem>
|
||||
)
|
||||
}
|
||||
{ /* END 3rd */}
|
||||
</Breadcrumb>
|
||||
<ButtonToolbar>
|
||||
<ButtonGroup className="mr-auto mr-md-2">
|
||||
<Button tag={ NavLink } to={ `${ props.linkList }` } color="secondary" outline className="align-self-center" id="tooltipShowList">
|
||||
<i className="fa-fw fa fa-bars"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipShowList">
|
||||
Show List
|
||||
</UncontrolledTooltip>
|
||||
<Button tag={ NavLink } to={ `${ props.linkGrid }` } color="secondary" outline className="align-self-center" id="tooltipShowGrid">
|
||||
<i className="fa-fw fa fa-th-large"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipShowGrid">
|
||||
Show Grid
|
||||
</UncontrolledTooltip>
|
||||
{
|
||||
props.btnShowKanban && (
|
||||
<React.Fragment>
|
||||
<Button tag={ NavLink } to={ `${ props.linkKanban }` } color="secondary" outline className="align-self-center" id="tooltipShowKanban">
|
||||
<i className="fa-fw fa fa-trello"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipShowKanban">
|
||||
Show Kanban
|
||||
</UncontrolledTooltip>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button color="primary" className="align-self-center" id="tooltipAddNew">
|
||||
<i className="fa-fw fa fa-plus"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipAddNew">
|
||||
Add New
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
{ /* END Header Nav */}
|
||||
</React.Fragment>
|
||||
)
|
||||
ProjectsSmHeader.propTypes = {
|
||||
subTitle: PropTypes.node,
|
||||
title: PropTypes.node,
|
||||
subTitleLink: PropTypes.string,
|
||||
linkList: PropTypes.node,
|
||||
linkGrid: PropTypes.node,
|
||||
btnShowKanban: PropTypes.bool,
|
||||
linkKanban: PropTypes.node
|
||||
};
|
||||
ProjectsSmHeader.defaultProps = {
|
||||
subTitle: "Folder",
|
||||
linkList: "#",
|
||||
linkGrid: "#",
|
||||
btnShowKanban: false,
|
||||
linkKanban: "/apps/tasks-kanban"
|
||||
};
|
||||
|
||||
export { ProjectsSmHeader };
|
||||
Reference in New Issue
Block a user