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

50
app/routes/Apps/Files/Files.js Executable file
View File

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

26
app/routes/Apps/Files/FilesGrid.js Executable file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { CardColumns } from './../../../components';
import { FilesCardGrid } from "../../components/Files/FilesCardGrid";
import { Paginations } from "../../components/Paginations";
const FilesGrid = () => (
<React.Fragment>
<CardColumns>
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
<FilesCardGrid />
</CardColumns>
<div className="d-flex justify-content-center">
<Paginations />
</div>
</React.Fragment>
);
export default FilesGrid;

50
app/routes/Apps/Files/FilesList.js Executable file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import {
Card,
CardFooter,
Table
} from './../../../components';
import { Paginations } from "../../components/Paginations";
import { TrTableFilesList } from "./components/TrTableFilesList";
const FilesList = () => (
<Card className="mb-3">
{ /* START Table */}
<div className="table-responsive-xl">
<Table className="mb-0" hover>
<thead>
<tr>
<th className="align-middle bt-0">Directory</th>
<th className="align-middle bt-0">Last Change</th>
<th className="align-middle bt-0">Share</th>
<th className="align-middle bt-0">Tags</th>
<th className="align-middle bt-0 text-right">
Actions
</th>
</tr>
</thead>
<tbody>
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
<TrTableFilesList />
</tbody>
</Table>
</div>
{ /* END Table */}
<CardFooter className="d-flex justify-content-center pb-0">
<Paginations />
</CardFooter>
</Card>
);
export default FilesList;

113
app/routes/Apps/Files/components/TrTableFilesList.js Executable file
View File

@@ -0,0 +1,113 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import {
Badge,
Avatar,
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
AvatarAddOn,
Media,
DropdownItem
} from './../../../../components';
import { randomArray, randomAvatar } from './../../../../utilities';
const badges = [
"secondary"
];
const status = [
"success",
"danger",
"warning",
"secondary"
];
const TrTableFilesList = () => (
<React.Fragment>
<tr>
<td className="align-middle">
<Media>
<Media left middle>
<i className="fa fa-fw fa-folder-o fa-3x mr-2"></i>
</Media>
<Media body>
<div className="text-inverse">
{ faker.commerce.department() }
</div>
<span>
{ faker.finance.amount() } Mb
</span>
</Media>
</Media>
</td>
<td className="align-middle">
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018<br />
12:23 PM
</td>
<td className="align-middle">
<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"
/>
]}
/>
</td>
<td className="align-middle">
<Badge color={ randomArray(badges) } pill className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge color={ randomArray(badges) } pill className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge color={ randomArray(badges) } pill className="mr-1">
{ faker.commerce.department() }
</Badge>
</td>
<td className="align-middle text-right">
<UncontrolledButtonDropdown>
<DropdownToggle color="link">
<i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<i className="fa fa-fw fa-reply mr-2"></i>
Share
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-download mr-2"></i>
Download
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-trash mr-2"></i>
Delete
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-pencil mr-2"></i>
Edit
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<i className="fa fa-fw fa-files-o mr-2"></i>
Copy
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</td>
</tr>
</React.Fragment>
)
export { TrTableFilesList };

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

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