tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-27 15:54:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add listing component for custom responses [skip ci]

Browse Source
This commit is contained in:
ivan 2016-10-11 12:47:22 -03:00
parent 884bea6713
commit 2a3ea5006a
5 changed files with 105 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
View File

@ -1,14 +1,35 @@
import React from 'react';
import i18n from 'lib-app/i18n';
import Header from 'core-components/header';
import Listing from 'core-components/listing';
class AdminPanelCustomResponses extends React.Component {
render() {
return (
<div>
/admin/panel/tickets/custom-responses
<div className="admin-panel-custom-responses">
<Header title={i18n('CUSTOM_RESPONSES')} description={i18n('CUSTOM_RESPONSES_DESCRIPTION')} />
<div className="row">
<div className="col-md-3">
<Listing {...this.getListingProps()}/>
</div>
<div className="col-md-9">
Custom response form
</div>
</div>
</div>
);
}
getListingProps() {
return {
title: 'Custom Responses',
items: [{content: 'Connection issue'}, {content: 'Change existent name'}, {content: 'Connection issue'}],
enableAddNew: true
};
}
}
export default AdminPanelCustomResponses;

47
client/src/core-components/listing.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import Menu from 'core-components/menu';
import Button from 'core-components/button';
import Icon from 'core-components/icon';
class Listing extends React.Component {
static propTypes = {
title: React.PropTypes.string,
enableAddNew: React.PropTypes.bool,
items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
selectedIndex: React.PropTypes.number,
onChange: React.PropTypes.func,
onAddClick: React.PropTypes.func
};
static defaultProps = {
addNewText: 'Add new'
};
render() {
return (
<div className="listing">
<div className="listing__header">
{this.props.title}
</div>
<div className="listing__menu">
<Menu tabbable type="secondary" selectedIndex={this.props.selectedIndex} items={this.props.items} onItemClick={this.props.onChange}/>
</div>
{(this.props.enableAddNew) ? this.renderAddButton() : null}
</div>
);
}
renderAddButton() {
return (
<div className="listing__add">
<Button type="secondary" size="auto" className="listing__add-button">
<Icon name="plus-circle"/> {this.props.addNewText}
</Button>
</div>
);
}
}
export default Listing;

25
client/src/core-components/listing.scss Normal file
View File

@ -0,0 +1,25 @@
@import "../scss/vars";
.listing {
border: 2px solid $grey;
min-height: 300px;
&__header {
padding: 15px 0;
}
&__menu {
text-align: left;
}
&__add {
&-button {
border-radius: 0;
height: 36px;
font-size: $font-size--sm;
text-transform: none;
width: 100%;
}
}
}

2
client/src/core-components/menu.js
View File

@ -11,7 +11,7 @@ class Menu extends React.Component {
id: React.PropTypes.string,
itemsRole: React.PropTypes.string,
header: React.PropTypes.string,
type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation']),
type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation', 'horizontal', 'horizontal-list']),
items: React.PropTypes.arrayOf(React.PropTypes.shape({
content: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
icon: React.PropTypes.string

15
client/src/data/languages/en.js
View File

@ -18,14 +18,8 @@ export default {
'EDIT_PROFILE': 'Edit Profile',
'CLOSE_SESSION': 'Close session',
'CREATE_TICKET': 'Create Ticket',
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
'TICKET_LIST': 'Ticket List',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
'SUPPORT_CENTER': 'Support Center',
'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
'DEPARTMENT': 'Department',
'AUTHOR': 'Author',
'DATE': 'Date',
@ -61,6 +55,15 @@ export default {
'MEDIUM': 'Medium',
'LOW': 'Low',
'TITLE': 'Title',
//VIEW DESCRIPTIONS
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
'CUSTOM_RESPONSES_DESCRIPTION': 'Custom responses are automated responses for common problems',
//ERRORS
'EMAIL_OR_PASSWORD': 'Email or password invalid',