mirror of
https://github.com/opensupports/opensupports.git
synced 2025-07-27 15:54:23 +02:00
Ivan - Add listing component for custom responses [skip ci]
This commit is contained in:
parent
884bea6713
commit
2a3ea5006a
@ -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
47
client/src/core-components/listing.js
Normal 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
25
client/src/core-components/listing.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user