Max - WIP
This commit is contained in:
ivan
parent
2703f82253
commit
0324decae3
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react'
|
||||
import Icon from 'core-components/icon'
|
||||
|
||||
class TopicViewer extends React.Component {
|
||||
static propTypes = {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
icon: React.PropTypes.string.isRequired,
|
||||
iconColor: React.PropTypes.string.isRequired,
|
||||
articles: React.PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="topic-viewer">
|
||||
<div className="topic-viewer__header">
|
||||
<Icon className="topic-viewer__icon" name={this.props.icon} size="2x" color={this.props.iconColor}/>
|
||||
<span className="topic-viewer__title">{this.props.name}</span>
|
||||
</div>
|
||||
<ul className="topic-viewer__list">
|
||||
{this.props.articles.map(function (article) {
|
||||
return <li className="topic-viewer__list-item">{article.title}</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TopicViewer;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@import "../scss/vars";
|
||||
|
||||
.topic-viewer {
|
||||
text-align: left;
|
||||
//font-weight: bold;
|
||||
&__header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&__icon {
|
||||
color: $primary-green;
|
||||
}
|
||||
&__title {
|
||||
font-size: $font-size--lg;
|
||||
margin-left: 15px;
|
||||
}
|
||||
&__list {
|
||||
&-item {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
color: $secondary-blue;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&-item:before {
|
||||
content: "• ";
|
||||
color: $grey;
|
||||
}
|
||||
//
|
||||
&-item:nth-child(even) {
|
||||
//background: red;
|
||||
}
|
||||
&-item:nth-child(odd) {
|
||||
//background: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,46 @@
|
|||
import React from 'react';
|
||||
|
||||
import API from 'lib-app/api-call';
|
||||
import TopicViewer from 'app-components/topic-viewer';
|
||||
|
||||
class AdminPanelListArticles extends React.Component {
|
||||
|
||||
state = {
|
||||
loading: true,
|
||||
topics: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
API.call({
|
||||
path: '/article/get-all',
|
||||
data: {}
|
||||
}).then(this.onRetrieveSuccess.bind(this));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
/admin/panel/articles/list-articles
|
||||
{this.state.loading ? 'loading' : this.renderTopics()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderTopics() {
|
||||
return (
|
||||
<div>
|
||||
{this.state.topics.map(function (topic) {
|
||||
return <TopicViewer {...topic} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
onRetrieveSuccess(result) {
|
||||
this.setState({
|
||||
loading: false,
|
||||
topics: result.data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminPanelListArticles;
|
||||
|
|
@ -5,6 +5,7 @@ class Icon extends React.Component {
|
|||
|
||||
static propTypes = {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
color: React.PropTypes.string,
|
||||
size: React.PropTypes.string
|
||||
};
|
||||
|
||||
|
|
@ -18,7 +19,7 @@ class Icon extends React.Component {
|
|||
|
||||
renderFontIcon() {
|
||||
return (
|
||||
<span className={this.getFontIconClass()} aria-hidden="true" />
|
||||
<span className={this.getFontIconClass()} aria-hidden="true" style={{color: this.props.color}}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
module.exports = [
|
||||
{
|
||||
path: '/article/get-all',
|
||||
time: 100,
|
||||
response: function () {
|
||||
return {
|
||||
status: 'success',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Membership Settings',
|
||||
icon: 'user',
|
||||
iconColor: 'green',
|
||||
articles: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Mannaging apps for your account',
|
||||
content: 'Curabitur sed dignissim turpis, sed lacinia urna. Vestibulum semper suscipit interdum. Proin sed sem gravida massa tristique rhoncus auctor eu diam. Donec fringilla in ex non dignissim. Praesent sed ultricies eros. Nullam vel augue eget libero volutpat sodales sit amet et orci.',
|
||||
lastEdited: 20160516,
|
||||
position: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'How to assign new task and files',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150429,
|
||||
position: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Updating your profile picture',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150429,
|
||||
position: 3
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Deleting your account',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150929,
|
||||
position: 4
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Upload files to your cloud drive',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20131229,
|
||||
position: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Billing and plans',
|
||||
icon: 'credit-card',
|
||||
iconColor: 'red',
|
||||
articles: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Mannaging apps for your account',
|
||||
content: 'Curabitur sed dignissim turpis, sed lacinia urna. Vestibulum semper suscipit interdum. Proin sed sem gravida massa tristique rhoncus auctor eu diam. Donec fringilla in ex non dignissim. Praesent sed ultricies eros. Nullam vel augue eget libero volutpat sodales sit amet et orci.',
|
||||
lastEdited: 20160516,
|
||||
position: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'How to assign new task and files',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150429,
|
||||
position: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Updating your profile picture',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150429,
|
||||
position: 3
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Deleting your account',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20150929,
|
||||
position: 4
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Upload files to your cloud drive',
|
||||
content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
|
||||
lastEdited: 20131229,
|
||||
position: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -20,6 +20,7 @@ fixtures.add(require('data/fixtures/user-fixtures'));
|
|||
fixtures.add(require('data/fixtures/staff-fixtures'));
|
||||
fixtures.add(require('data/fixtures/ticket-fixtures'));
|
||||
fixtures.add(require('data/fixtures/system-fixtures'));
|
||||
fixtures.add(require('data/fixtures/article-fixtures'));
|
||||
|
||||
_.each(fixtures.getAll(), function (fixture) {
|
||||
mockjax({
|
||||
|
|
|
|||
Loading…
Reference in New Issue