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

138
app/routes/Apps/Inbox/Inbox.js Executable file
View File

@@ -0,0 +1,138 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import { Link } from 'react-router-dom';
import _ from 'lodash';
import {
Container,
Row,
Col,
ButtonToolbar,
Avatar,
AvatarAddOn,
Card,
Button,
ButtonGroup,
CardBody,
CardFooter,
CustomInput,
Table,
Badge,
InputGroup,
InputGroupAddon,
Input,
UncontrolledTooltip
} from './../../../components';
import { HeaderMain } from "../../components/HeaderMain";
import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav";
import { Paginations } from "../../components/Paginations";
import { TrTableInbox } from "./components/TrTableInbox";
const Inbox = () => (
<React.Fragment>
<Container>
<HeaderMain
title="Inbox"
className="mb-5 mt-4"
/>
{ /* START Content */}
<Row>
<Col lg={ 3 }>
<MailboxLeftNav />
</Col>
<Col lg={ 9 }>
<Card className="mb-3">
<CardBody>
<div className="d-lg-flex justify-content-end">
<div className="mr-auto d-flex align-items-center mb-3 mb-lg-0">
<InputGroup>
<Input placeholder="Search for..." />
<InputGroupAddon addonType="append">
<Button color="secondary" outline>
<i className="fa fa-search"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</div>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button color="link" className="text-decoration-none align-self-center" id="tooltipRefresh">
<i className="fa fa-fw fa-refresh"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipRefresh">
Refresh
</UncontrolledTooltip>
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFav">
<i className="fa fa-fw fa-star"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipFav">
Add to Favorites
</UncontrolledTooltip>
<Button color="link" className="text-decoration-none align-self-center" id="tooltipTag">
<i className="fa fa-fw fa-tag"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipTag">
Tag
</UncontrolledTooltip>
<Button color="link" className="text-decoration-none align-self-center" id="tooltipBan">
<i className="fa fa-fw fa-ban"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipBan">
Ban this User
</UncontrolledTooltip>
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDelete">
<i className="fa fa-fw fa-trash"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipDelete">
Delete
</UncontrolledTooltip>
</ButtonGroup>
<ButtonGroup className="ml-auto ml-lg-0">
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/new-email" id="tooltipAddNew">
<i className="fa fa-fw fa-pencil"></i>
</Button>
<UncontrolledTooltip placement="bottom" target="tooltipAddNew">
Add New
</UncontrolledTooltip>
</ButtonGroup>
</ButtonToolbar>
</div>
</CardBody>
{ /* START Table */}
<Table className="mb-0" hover responsive>
<thead>
<tr>
<th className="bt-0"></th>
<th className="bt-0"></th>
<th className="bt-0">From</th>
<th className="bt-0">Subject</th>
<th className="text-right bt-0">
Date
</th>
</tr>
</thead>
<tbody>
{
_.times(11, (index) => (
<TrTableInbox
id={index.toString()}
key={index}
/>
))
}
</tbody>
</Table>
{ /* END Table */}
<CardFooter className="d-flex justify-content-center pb-0">
<Paginations />
</CardFooter>
</Card>
</Col>
</Row>
{ /* END Content */}
</Container>
</React.Fragment>
);
export default Inbox;

114
app/routes/Apps/Inbox/components/TrTableInbox.js Executable file
View File

@@ -0,0 +1,114 @@
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,
UncontrolledTooltip,
CustomInput,
AvatarAddOn,
Media
} from './../../../../components';
import { randomArray, randomAvatar } from './../../../../utilities';
const status = [
"warning",
"danger",
"success",
"secondary"
];
const tag = [
"primary",
"secondary",
"info"
];
const TrTableInbox = (props) => (
<React.Fragment>
<tr>
<td className="align-middle">
{
(Math.round(Math.random())) ? (
<span>
<i className="fa fa-circle fa-fw text-primary" id={`newMessage-${ props.id }` }></i>
<UncontrolledTooltip placement="bottom" target={`#newMessage-${ props.id }` }>
New Message
</UncontrolledTooltip>
</span>
) : (
<span></span>
)
}
</td>
<td className="align-middle">
<CustomInput type="checkbox" label="" id={` mailboxCheckbox-${ props.id }` } />
</td>
<td className="align-middle">
<Media>
<Media left className="d-flex align-self-center mr-3">
<div className="mr-2">
<a href="#" id="tooltipAddToFavorites">
<i className="fa fa-fw fa-star-o"></i>
</a>
<UncontrolledTooltip placement="top" target="tooltipAddToFavorites">
Add To Favorites
</UncontrolledTooltip>
</div>
<Avatar.Image
size="md"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color={ randomArray(status) }
key="avatar-icon-fg"
/>
]}
/>
</Media>
<Media body>
<a className="mt-0 text-decoration-none d-flex" href="#">
{ faker.name.firstName() } { faker.name.lastName() }
</a>
<span>
{ faker.address.state() }
</span>
</Media>
</Media>
</td>
<td className="align-middle">
<Link to="/apps/email-details" className="text-decoration-none">
{ faker.company.catchPhrase() }
</Link>
<br />
{ faker.lorem.sentence() }
<br />
<Badge pill color={ randomArray(tag) }>
{ faker.commerce.department() }
</Badge> <i className="fa fa-paperclip ml-2"></i>
</td>
<td className="align-middle text-right">
30-Jun-2014<br />
01:54 PM
</td>
</tr>
</React.Fragment>
)
TrTableInbox.propTypes = {
id: PropTypes.string
};
export { TrTableInbox };

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

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