Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/routes/Apps/Tasks/Tasks.js Executable file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Container,
Row,
Col
} from './../../../components';
import { HeaderMain } from "../../components/HeaderMain";
import TasksList from './TasksList';
import TasksGrid from './TasksGrid';
import { ProjectsLeftNav } from "../../components/Projects/ProjectsLeftNav";
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
const Tasks = (props) => (
<React.Fragment>
<Container>
<HeaderMain
title="Tasks"
className="mb-5 mt-4"
/>
<Row>
<Col lg={ 3 }>
<ProjectsLeftNav />
</Col>
<Col lg={ 9 }>
<ProjectsSmHeader
subTitle="Projects"
subTitleLink="/apps/projects/list"
title={props.match.params.type === "list"?"Tasks List":"Tasks Grid"}
linkList="/apps/tasks/list"
linkGrid="/apps/tasks/grid"
btnShowKanban
/>
{
props.match.params.type === "list" ?
<TasksList /> :
<TasksGrid />
}
</Col>
</Row>
</Container>
</React.Fragment>
);
Tasks.propTypes = {
match: PropTypes.object.isRequired
};
export default Tasks;

42
app/routes/Apps/Tasks/TasksGrid.js Executable file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { CardColumns } from './../../../components';
import { Paginations } from "../../components/Paginations";
import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid";
const TasksGrid = () => (
<React.Fragment>
<CardColumns>
<TasksCardGrid />
<TasksCardGrid
id="2"
/>
<TasksCardGrid
id="3"
/>
<TasksCardGrid
id="4"
/>
<TasksCardGrid
id="5"
/>
<TasksCardGrid
id="6"
/>
<TasksCardGrid
id="7"
/>
<TasksCardGrid
id="8"
/>
<TasksCardGrid
id="9"
/>
</CardColumns>
<div className="d-flex justify-content-center">
<Paginations />
</div>
</React.Fragment>
);
export default TasksGrid;

97
app/routes/Apps/Tasks/TasksList.js Executable file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import {
Pagination,
PaginationItem,
PaginationLink,
Card,
CardFooter,
Table
} from './../../../components';
import { TrTableTasksList } from "./components/TrTableTasksList";
const TasksList = () => (
<Card className="mb-3">
{ /* START Table */}
<div className="table-responsive-xl">
<Table className="mb-0" hover>
<thead>
<tr>
<th className="align-middle bt-0">#</th>
<th className="align-middle bt-0">Priority</th>
<th className="align-middle bt-0">Title & Description</th>
<th className="align-middle bt-0">People</th>
<th className="align-middle bt-0">Update</th>
<th className="align-middle bt-0 text-right">
Actions
</th>
</tr>
</thead>
<tbody>
<TrTableTasksList />
<TrTableTasksList
id="2"
/>
<TrTableTasksList
id="3"
/>
<TrTableTasksList
id="4"
/>
<TrTableTasksList
id="5"
/>
<TrTableTasksList
id="6"
/>
<TrTableTasksList
id="7"
/>
<TrTableTasksList
id="8"
/>
<TrTableTasksList
id="9"
/>
<TrTableTasksList
id="10"
/>
</tbody>
</Table>
</div>
{ /* END Table */}
<CardFooter className="d-flex justify-content-center pb-0">
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-angle-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardFooter>
</Card>
);
export default TasksList;

159
app/routes/Apps/Tasks/components/TrTableTasksList.js Executable file
View File

@@ -0,0 +1,159 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import {
Badge,
Avatar,
CustomInput,
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
AvatarAddOn
} from './../../../../components';
import { randomArray, randomAvatar } from './../../../../utilities';
const badges = [
"secondary"
];
const avatarStatus = [
"secondary",
"warning",
"danger",
"success"
];
const prioStatus = [
<React.Fragment key="1">
<i className="fa fa-circle text-success mr-2"></i>
Small<i className="fa fa-angle-down ml-2" />
</React.Fragment>,
<React.Fragment key="2">
<i className="fa fa-circle text-primary mr-2"></i>
Normal<i className="fa fa-angle-down ml-2" />
</React.Fragment>,
<React.Fragment key="3">
<i className="fa fa-circle text-warning mr-2"></i>
High<i className="fa fa-angle-down ml-2" />
</React.Fragment>,
<React.Fragment key="3">
<i className="fa fa-circle text-danger mr-2"></i>
Big<i className="fa fa-angle-down ml-2" />
</React.Fragment>
];
const TrTableTasksList = (props) => (
<React.Fragment>
<tr>
<td className="align-middle">
<CustomInput type="checkbox" id={`TrTableTasksList-${ props.id }` } label="" inline />
</td>
<td className="align-middle">
<UncontrolledButtonDropdown>
<DropdownToggle color="link" link size="sm" className="pl-0 mb-3 text-decoration-none">
{ randomArray(prioStatus) }
</DropdownToggle>
<DropdownMenu>
<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>
<i className="fa fa-circle text-success mr-2"></i>
Small
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</td>
<td className="align-middle">
<div>
<span className="mr-2">#{ faker.random.number() }</span>
<Link to="/apps/task-details" className="text-decoration-none">
{ faker.hacker.phrase() }
</Link>
</div>
<p className="mb-0">
<span className="mr-2">
{ faker.lorem.sentence() }
</span>
<Badge pill color={ randomArray(badges) } className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge pill color={ randomArray(badges) } className="mr-1">
{ faker.commerce.department() }
</Badge>
</p>
</td>
<td className="align-middle">
<Avatar.Image
size="md"
src={ randomAvatar() }
className="mr-3"
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color={ randomArray(avatarStatus) }
key="avatar-icon-fg"
/>
]}
/>
</td>
<td className="align-middle">
16-Jul-2016
</td>
<td className="align-middle text-right">
<UncontrolledButtonDropdown className="align-self-center ml-auto">
<DropdownToggle color="link" size="sm">
<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>
</td>
</tr>
</React.Fragment>
)
TrTableTasksList.propTypes = {
id: PropTypes.node
};
TrTableTasksList.defaultProps = {
id: "1"
};
export { TrTableTasksList };

3
app/routes/Apps/Tasks/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Tasks from './Tasks';
export default Tasks;