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

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

@@ -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>
+            <div className="admin-panel-custom-responses">
-                /admin/panel/tickets/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;

client/src/core-components/listing.js

@@ -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;

client/src/core-components/listing.scss

@@ -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%;
+        }
+    }
+}

client/src/core-components/menu.js

@@ -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

client/src/data/languages/en.js

@@ -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',