Skip to content

Commit f97da82

Browse files
sametkabaysametkabay
committed
add dashboard and about page
1 parent e852bf4 commit f97da82

File tree

5 files changed

+187
-10
lines changed

5 files changed

+187
-10
lines changed

‎reactjs/src/scenes/About/index.tsx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import * as React from 'react';
2+
import { Row, Col } from 'antd';
3+
4+
export class About extends React.Component<any>{
5+
6+
render() {
7+
return (
8+
<Row>
9+
<Col>
10+
<div >
11+
<div>
12+
<h2>
13+
About This Template
14+
</h2>
15+
</div>
16+
<div>
17+
<p>
18+
This is a simple startup template based on ASP.NET Boilerplate framework and Module Zero.
19+
If you need an enterprise startup project, check <a href="http://aspnetzero.com?ref=abptmpl" target="_blank">ASP.NET ZERO</a>.
20+
</p>
21+
22+
<h3>What is ASP.NET Boilerplate?</h3>
23+
24+
<p>
25+
ASP.NET Boilerplate is an application framework built on latest <strong>ASP.NET Core</strong> framework.
26+
It makes easy to use authorization, dependency injection, validation, exception handling, localization, logging, caching, background jobs and so on.
27+
It's built on already familiar tools like Entity Framework, AutoMapper, Castle Windsor...
28+
</p>
29+
30+
<p>
31+
ASP.NET Boilerplate implements <strong>NLayer architecture</strong> (Domain, Application, Infrastructure and Presentation Layers)
32+
and <strong>Domain Driven Design</strong> (Entities, Repositories, Domain/Application Services, DTO's...).
33+
Also implements and provides a good infrastructure to implement common software development <strong>best practices</strong>.
34+
</p>
35+
36+
<h3>What is Module Zero?</h3>
37+
38+
<p>
39+
ASP.NET Boilerplate framework is designed to be independent of any database
40+
schema and to be as generic as possible. Therefore, It leaves some concepts
41+
<strong>abstract</strong> and <strong>optional</strong> (like audit logging, permission and setting stores)
42+
which requires some <strong>data store</strong>.
43+
</p>
44+
<p>
45+
<strong>Module Zero </strong>implements all fundamental concepts of ASP.NET
46+
Boilerplate framework such as <a href="http://www.aspnetboilerplate.com/Pages/Documents/Zero/Tenant-Management">tenant management</a> (<strong>multi-tenancy</strong>),
47+
<a href="http://www.aspnetboilerplate.com/Pages/Documents/Zero/Role-Management">
48+
role management
49+
</a>, <a href="http://www.aspnetboilerplate.com/Pages/Documents/Zero/User-Management">user management</a>,
50+
<a href="http://www.aspnetboilerplate.com/Pages/Documents/Authorization">authorization</a> (<a href="http://www.aspnetboilerplate.com/Pages/Documents/Zero/Permission-Management">
51+
permission management
52+
</a>),
53+
<a href="http://www.aspnetboilerplate.com/Pages/Documents/Setting-Management">setting management</a>, <a href="http://www.aspnetboilerplate.com/Pages/Documents/Zero/Language-Management">
54+
language management
55+
</a>, <a href="http://www.aspnetboilerplate.com/Pages/Documents/Audit-Logging">audit logging</a>
56+
and so on.
57+
</p>
58+
<p>
59+
Module-Zero defines entities and implements <strong>domain logic</strong>
60+
(domain layer) and leaves application and presentation layers to you.
61+
</p>
62+
63+
<h4>Based on Microsoft ASP.NET Core Identity</h4>
64+
65+
<p>
66+
Module Zero is based on Microsoft's
67+
<a href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity" target="_blank">ASP.NET Core Identity</a> library.
68+
It extends user and role managers and implements user and role stores using generic repositories.
69+
</p>
70+
71+
<h3>Documentation</h3>
72+
73+
<ul>
74+
<li>
75+
<a href="https://www.aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core">Documentation for this template</a>
76+
</li>
77+
<li>
78+
<a href="http://www.aspnetboilerplate.com/Pages/Documents">ASP.NET Boilerplate documentation</a>
79+
</li>
80+
</ul>
81+
82+
<h3>Source code</h3>
83+
84+
<p>
85+
This template is developed open source on Github. You can contribute to the template.
86+
<a href="https://github.com/aspnetboilerplate/module-zero-core-template" target="_blank">https://github.com/aspnetboilerplate/module-zero-core-template</a>
87+
</p>
88+
</div>
89+
</div>
90+
</Col>
91+
</Row>
92+
)
93+
}
94+
}
95+
export default About;

‎reactjs/src/scenes/Dashboard/index.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
3+
export class Dashboard extends React.Component<any>{
4+
5+
render() {
6+
return (
7+
<p>Dashboard</p>
8+
)
9+
}
10+
}
11+
12+
export default Dashboard;

‎reactjs/src/scenes/Layout/components/Header/index.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react';
2+
import { Col, Icon, Layout, Avatar, Menu, Dropdown, Badge } from 'antd';
3+
4+
export interface LayoutHeaderProps {
5+
collapsed?: any;
6+
toggle?: any;
7+
}
8+
9+
const userDropdownMenu = (
10+
<Menu>
11+
<Menu.Item key="2">
12+
<Icon type="logout" />
13+
<span>Logout</span>
14+
</Menu.Item>
15+
</Menu>
16+
)
17+
const languageMenu = (
18+
<Menu>
19+
<Menu.Item key="1">
20+
<span>English</span>
21+
</Menu.Item>
22+
<Menu.Item key="2">
23+
<span>Deutsch</span>
24+
</Menu.Item>
25+
<Menu.Item key="3">
26+
<span>Türkçe</span>
27+
</Menu.Item>
28+
</Menu>
29+
)
30+
31+
export class LayoutHeader extends React.Component<LayoutHeaderProps>{
32+
33+
render() {
34+
return (
35+
<Layout.Header style={{ background: '#fff', minHeight: 83, padding: 0 }} >
36+
<Col style={{ textAlign: "left" }} span={12}>
37+
<Icon
38+
style={{ marginTop: 10, marginRight: 10, textAlign: "left" }}
39+
className="trigger"
40+
type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
41+
onClick={this.props.toggle} />
42+
</Col>
43+
<Col style={{ margin: 15, marginLeft: 10, textAlign: "right" }} >
44+
45+
<Dropdown overlay={languageMenu} trigger={['click']}>
46+
<Icon style={{ margin: 20 }} type="global" />
47+
</Dropdown>
48+
<Dropdown overlay={userDropdownMenu} trigger={['click']}>
49+
<Badge style={{ margin: 10 }} count={3}>
50+
<Avatar style={{ margin: 10 }}
51+
size={48}
52+
alt={"profile"}
53+
src="https://sametkabay.com/images/smtkby/smtkby240.png" />
54+
</Badge>
55+
</Dropdown>
56+
</Col>
57+
58+
59+
</Layout.Header>
60+
)
61+
}
62+
}
63+
export default LayoutHeader;

‎reactjs/src/scenes/Layout/index.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,7 @@
3737
}
3838
::-webkit-scrollbar-thumb:window-inactive {
3939
background: #455A64;
40+
}
41+
.sidebar {
42+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 3px 10px 30px 3px rgba(0, 0, 0, 0.19);
4043
}

‎reactjs/src/scenes/Layout/index.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import * as React from "react";
22
import { Layout, Menu, Icon, Avatar, Col } from "antd";
33
import "./index.css";
44
import { Route, Switch, withRouter } from 'react-router';
5-
import Logins from '../Login';
65
import Users from '../Users';
76
import Tenants from '../Tenants';
87
import Rules from '../Rules';
98
import SubMenu from 'antd/lib/menu/SubMenu';
109
import AbpLogo from "src/images/abp-logo-long.png";
10+
import About from '../About';
11+
import Dashboard from '../Dashboard';
12+
import LayoutHeader from './components/Header';
1113

12-
const { Header, Sider, Content } = Layout;
14+
const { Sider, Content } = Layout;
1315

1416
class LayoutComponent extends React.Component<any> {
1517
state = {
@@ -28,9 +30,10 @@ class LayoutComponent extends React.Component<any> {
2830
render() {
2931
return (
3032

31-
3233
<Layout style={{ minHeight: '100vh' }}>
3334
<Sider
35+
trigger={null}
36+
className={"sidebar"}
3437
width={256}
3538
collapsible
3639
collapsed={this.state.collapsed}
@@ -43,7 +46,7 @@ class LayoutComponent extends React.Component<any> {
4346
</Col>}
4447

4548
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
46-
<Menu.Item onClick={() => this.props.history.push("/")} key="1">
49+
<Menu.Item onClick={() => this.props.history.push("/dashboard")} key="1">
4750
<Icon type="home" />
4851
<span>Home</span>
4952
</Menu.Item>
@@ -108,18 +111,19 @@ class LayoutComponent extends React.Component<any> {
108111

109112
</Sider>
110113
<Layout>
111-
<Header style={{ background: '#fff', minHeight: 83, padding: 0 }} >
112-
<Col style={{ marginTop: 10, marginRight: 10, textAlign: "right" }}>
113-
<Avatar size={64} icon="user" />
114-
</Col>
115-
</Header>
114+
<LayoutHeader
115+
collapsed={this.state.collapsed}
116+
toggle={this.toggle}
117+
/>
116118
<Content style={{ margin: '0 16px' }}>
117119
<div style={{ marginTop: 24, padding: 24, background: '#fff', minHeight: 360 }}>
118120
<Switch>
119-
<Route path="/login" component={Logins} />
121+
{/* <Route path="/login" component={Logins} /> */}
122+
<Route path="/dashboard" component={Dashboard} />
120123
<Route path="/users" component={Users} />
121124
<Route path="/tenants" component={Tenants} />
122125
<Route path="/rules" component={Rules} />
126+
<Route path="/about" component={About} />
123127
</Switch>
124128
</div>
125129
</Content>

0 commit comments

Comments
 (0)