Tomasz Owczarczyk
120
app/routes/Dashboards/Projects/DraggableProjects.js
Executable file
120
app/routes/Dashboards/Projects/DraggableProjects.js
Executable file
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import uid from 'uuid/v4';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import _ from 'lodash';
|
||||
|
||||
import {
|
||||
ProjectsList
|
||||
} from "../../components/ProjectsDashboards/ProjectsList";
|
||||
|
||||
const reorder = (list, startIndex, endIndex) => {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export class DraggableProjects extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
projects: [
|
||||
{
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "success",
|
||||
badgeTitle: "Active",
|
||||
progressValue: "76",
|
||||
completeValue: "13",
|
||||
myTasksValue: "35",
|
||||
daysDueValue: "6"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "danger",
|
||||
badgeTitle: "Suspended",
|
||||
progressValue: "23",
|
||||
completeValue: "6",
|
||||
myTasksValue: "87",
|
||||
daysDueValue: "15"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "secondary",
|
||||
badgeTitle: "Archived",
|
||||
progressValue: "4",
|
||||
completeValue: "98",
|
||||
myTasksValue: "21",
|
||||
daysDueValue: "7"
|
||||
}, {
|
||||
id: uid(),
|
||||
title: faker.commerce.productName(),
|
||||
badgeColor: "warning",
|
||||
badgeTitle: "Paused",
|
||||
progressValue: "63",
|
||||
completeValue: "98",
|
||||
myTasksValue: "21",
|
||||
daysDueValue: "7"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
onDragEnd(result) {
|
||||
if (!result.destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const projects = reorder(
|
||||
this.state.projects,
|
||||
result.source.index,
|
||||
result.destination.index
|
||||
);
|
||||
|
||||
this.setState({
|
||||
projects,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DragDropContext onDragEnd={this.onDragEnd}>
|
||||
<Droppable droppableId="droppable">
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="list-group list-group-flush"
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{_.map(this.state.projects, ({id, ...project}, index) => (
|
||||
<Draggable key={id} draggableId={id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="list-group-item"
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={{
|
||||
...provided.draggableProps.style,
|
||||
borderLeft: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)',
|
||||
borderRight: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)'
|
||||
}}
|
||||
>
|
||||
<ProjectsList
|
||||
{ ...project }
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
}
|
||||
}
|
||||
304
app/routes/Dashboards/Projects/ProjectsDashboard.js
Executable file
304
app/routes/Dashboards/Projects/ProjectsDashboard.js
Executable file
@@ -0,0 +1,304 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
Table,
|
||||
CardTitle,
|
||||
Button,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
Media,
|
||||
Col
|
||||
} from './../../../components';
|
||||
import { setupPage } from './../../../components/Layout/setupPage';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import {
|
||||
TasksMedia
|
||||
} from "../../components/ProjectsDashboards/TasksMedia";
|
||||
import {
|
||||
TinyDonutChart
|
||||
} from "../../components/ProjectsDashboards/TinyDonutChart"
|
||||
import {
|
||||
TinyDonutChartAllProjects
|
||||
} from "../../components/ProjectsDashboards/TinyDonutChartAllProjects"
|
||||
import {
|
||||
TimelineMini
|
||||
} from "../../components/Timeline/TimelineMini"
|
||||
import { DraggableProjects } from './DraggableProjects';
|
||||
|
||||
const ProjectsDashboard = () => (
|
||||
<Container>
|
||||
<Row className="mb-5">
|
||||
<Col lg={ 12 }>
|
||||
<HeaderMain
|
||||
title="Projects"
|
||||
className="mb-4 mb-lg-5"
|
||||
/>
|
||||
<p>
|
||||
{ faker.lorem.paragraph() }
|
||||
</p>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div className="hr-text hr-text-center my-2">
|
||||
<span>Payments</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-primary mr-2"></i>
|
||||
Today
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$3,267
|
||||
</h4>
|
||||
</Col>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-info mr-2"></i>
|
||||
This Month
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$8,091
|
||||
</h4>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="hr-text hr-text-center mb-2 mt-3">
|
||||
<span>Invoices</span>
|
||||
</div>
|
||||
<Row className="mb-4 mb-xl-0">
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-warning mr-2"></i>
|
||||
Due
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$4,007
|
||||
</h4>
|
||||
</Col>
|
||||
<Col xs={ 6 } className="text-center">
|
||||
<p className="text-center mb-0">
|
||||
<i className="fa fa-circle text-danger mr-2"></i>
|
||||
Overdue
|
||||
</p>
|
||||
<h4 className="mt-2 mb-0">
|
||||
$11,091
|
||||
</h4>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 }>
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>All Tasks</span>
|
||||
</div>
|
||||
<Media>
|
||||
<Media left className="mr-3">
|
||||
<TinyDonutChart />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-yellow"></i>
|
||||
<span className="text-inverse">23</span> Pending
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-danger"></i>
|
||||
<span className="text-inverse">3</span> Behind
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-success"></i>
|
||||
<span className="text-inverse">34</span> Completed
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } className="mb-4 mb-lg-0">
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>All Projects</span>
|
||||
</div>
|
||||
<Media>
|
||||
<Media left className="mr-3">
|
||||
<TinyDonutChartAllProjects />
|
||||
</Media>
|
||||
<Media body>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-info"></i>
|
||||
<span className="text-inverse">14</span> Pending
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-primary"></i>
|
||||
<span className="text-inverse">24</span> Behind
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa fa-circle mr-1 text-purple"></i>
|
||||
<span className="text-inverse">2</span> Completed
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<div className="hr-text hr-text-left my-2">
|
||||
<span>My Stats</span>
|
||||
</div>
|
||||
<Table size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-inverse bt-0">Active Projects</td>
|
||||
<td className="text-right bt-0">
|
||||
<Badge color="success" pill>6</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Open Tasks</td>
|
||||
<td className="text-right">
|
||||
<Badge color="primary" pill>4</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Support Tickets</td>
|
||||
<td className="text-right">
|
||||
<Badge color="info" pill>15</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-inverse">Active Timers</td>
|
||||
<td className="text-right">
|
||||
<Badge color="secondary" pill>0</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Tasks
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Tasks..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/tasks/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="success"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="danger"
|
||||
id="2"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="warning"
|
||||
id="3"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
id="4"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/tasks/list" className="text-center">
|
||||
View All Tasks
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Timeline Mini
|
||||
</CardTitle>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="2 Days ago"
|
||||
icon="times-circle"
|
||||
iconClassName="text-danger"
|
||||
badgeTitle="Alert"
|
||||
badgeColor="danger"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="question-circle"
|
||||
iconClassName="text-warning"
|
||||
badgeTitle="Warning"
|
||||
badgeColor="warning"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="info-circle"
|
||||
iconClassName="text-info"
|
||||
badgeTitle="Info"
|
||||
badgeColor="info"
|
||||
/>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="Yesterday"
|
||||
icon="plus-circle"
|
||||
iconClassName="text-primary"
|
||||
badgeTitle="Message"
|
||||
badgeColor="primary"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="check-circle"
|
||||
iconClassName="text-success"
|
||||
badgeTitle="Success"
|
||||
badgeColor="success"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="circle"
|
||||
badgeTitle="Obsolete"
|
||||
/>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action tag={ Link } to="/pages/timeline" className="text-center">
|
||||
Timeline Details
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Projects
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Projects..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/projects/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<DraggableProjects />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default setupPage({
|
||||
pageTitle: 'Projects Dashboard'
|
||||
})(ProjectsDashboard);
|
||||
3
app/routes/Dashboards/Projects/index.js
Executable file
3
app/routes/Dashboards/Projects/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ProjectsDashboard from './ProjectsDashboard';
|
||||
|
||||
export default ProjectsDashboard;
|
||||
Reference in New Issue
Block a user