basic listing files
This commit is contained in:
Jonathan Labreuille
56
assets/js/src/forms/form.jsx
Normal file
56
assets/js/src/forms/form.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Router from 'react-router'
|
||||
import MailPoet from 'mailpoet'
|
||||
import Form from 'form/form.jsx'
|
||||
|
||||
const fields = [
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
name: 'segments',
|
||||
label: 'Lists',
|
||||
type: 'selection',
|
||||
endpoint: 'segments'
|
||||
}
|
||||
]
|
||||
|
||||
const messages = {
|
||||
updated: function() {
|
||||
MailPoet.Notice.success('Form successfully updated!');
|
||||
},
|
||||
created: function() {
|
||||
MailPoet.Notice.success('Form successfully added!');
|
||||
}
|
||||
}
|
||||
|
||||
const FormForm = React.createClass({
|
||||
mixins: [
|
||||
Router.History
|
||||
],
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="title">
|
||||
Form <a
|
||||
href="javascript:;"
|
||||
className="add-new-h2"
|
||||
onClick={ this.history.goBack }
|
||||
>Back to list</a>
|
||||
</h2>
|
||||
|
||||
<Form
|
||||
endpoint="forms"
|
||||
fields={ fields }
|
||||
params={ this.props.params }
|
||||
messages={ messages }
|
||||
onSuccess={ this.history.goBack } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = FormForm
|
||||
29
assets/js/src/forms/forms.jsx
Normal file
29
assets/js/src/forms/forms.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Router, Route, IndexRoute, Link } from 'react-router'
|
||||
import FormList from 'forms/list.jsx'
|
||||
import FormForm from 'forms/form.jsx'
|
||||
import createHashHistory from 'history/lib/createHashHistory'
|
||||
|
||||
let history = createHashHistory({ queryKey: false })
|
||||
|
||||
const App = React.createClass({
|
||||
render() {
|
||||
return this.props.children
|
||||
}
|
||||
});
|
||||
|
||||
let container = document.getElementById('forms_container');
|
||||
|
||||
if(container) {
|
||||
ReactDOM.render((
|
||||
<Router history={ history }>
|
||||
<Route path="/" component={ App }>
|
||||
<IndexRoute component={ FormList } />
|
||||
<Route path="new" component={ FormForm } />
|
||||
<Route path="edit/:id" component={ FormForm } />
|
||||
<Route path="*" component={ FormList } />
|
||||
</Route>
|
||||
</Router>
|
||||
), container);
|
||||
}
|
||||
202
assets/js/src/forms/list.jsx
Normal file
202
assets/js/src/forms/list.jsx
Normal file
@ -0,0 +1,202 @@
|
||||
define(
|
||||
[
|
||||
'react',
|
||||
'react-router',
|
||||
'listing/listing.jsx',
|
||||
'classnames',
|
||||
'mailpoet'
|
||||
],
|
||||
function(
|
||||
React,
|
||||
Router,
|
||||
Listing,
|
||||
classNames,
|
||||
MailPoet
|
||||
) {
|
||||
var columns = [
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Name',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'created_at',
|
||||
label: 'Created on',
|
||||
sortable: true
|
||||
}
|
||||
];
|
||||
|
||||
var messages = {
|
||||
onDelete: function(response) {
|
||||
var count = ~~response.segments;
|
||||
var message = null;
|
||||
|
||||
if(count === 1 || response === true) {
|
||||
message = (
|
||||
'1 segment was moved to the trash.'
|
||||
);
|
||||
} else if(count > 1) {
|
||||
message = (
|
||||
'%$1d segments were moved to the trash.'
|
||||
).replace('%$1d', count);
|
||||
}
|
||||
|
||||
if(message !== null) {
|
||||
MailPoet.Notice.success(message);
|
||||
}
|
||||
},
|
||||
onConfirmDelete: function(response) {
|
||||
var count = ~~response.segments;
|
||||
var message = null;
|
||||
|
||||
if(count === 1 || response === true) {
|
||||
message = (
|
||||
'1 segment was permanently deleted.'
|
||||
);
|
||||
} else if(count > 1) {
|
||||
message = (
|
||||
'%$1d segments were permanently deleted.'
|
||||
).replace('%$1d', count);
|
||||
}
|
||||
|
||||
if(message !== null) {
|
||||
MailPoet.Notice.success(message);
|
||||
}
|
||||
},
|
||||
onRestore: function(response) {
|
||||
var count = ~~response.segments;
|
||||
var message = null;
|
||||
|
||||
if(count === 1 || response === true) {
|
||||
message = (
|
||||
'1 segment has been restored from the trash.'
|
||||
);
|
||||
} else if(count > 1) {
|
||||
message = (
|
||||
'%$1d segments have been restored from the trash.'
|
||||
).replace('%$1d', count);
|
||||
}
|
||||
|
||||
if(message !== null) {
|
||||
MailPoet.Notice.success(message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var Link = Router.Link;
|
||||
var item_actions = [
|
||||
{
|
||||
name: 'edit',
|
||||
link: function(item) {
|
||||
return (
|
||||
<Link to={ `/edit/${item.id}` }>Edit</Link>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'duplicate_segment',
|
||||
refresh: true,
|
||||
link: function(item) {
|
||||
return (
|
||||
<a
|
||||
href="javascript:;"
|
||||
onClick={ this.onDuplicate.bind(null, item) }
|
||||
>Duplicate</a>
|
||||
);
|
||||
},
|
||||
onDuplicate: function(item) {
|
||||
MailPoet.Ajax.post({
|
||||
endpoint: 'segments',
|
||||
action: 'duplicate',
|
||||
data: item.id
|
||||
}).done(function() {
|
||||
MailPoet.Notice.success(
|
||||
('List "%$1s" has been duplicated.').replace('%$1s', item.name)
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'view_subscribers',
|
||||
link: function(item) {
|
||||
return (
|
||||
<a href={ item.subscribers_url }>View subscribers</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var bulk_actions = [
|
||||
{
|
||||
name: 'trash',
|
||||
label: 'Trash',
|
||||
getData: function() {
|
||||
return {
|
||||
confirm: false
|
||||
}
|
||||
},
|
||||
onSuccess: messages.onDelete
|
||||
}
|
||||
];
|
||||
|
||||
var Link = Router.Link;
|
||||
|
||||
var SegmentList = React.createClass({
|
||||
renderItem: function(segment, actions) {
|
||||
var rowClasses = classNames(
|
||||
'manage-column',
|
||||
'column-primary',
|
||||
'has-row-actions'
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<td className={ rowClasses }>
|
||||
<strong>
|
||||
<a>{ segment.name }</a>
|
||||
</strong>
|
||||
{ actions }
|
||||
</td>
|
||||
<td className="column-date" data-colname="Description">
|
||||
<abbr>{ segment.description }</abbr>
|
||||
</td>
|
||||
<td className="column-date" data-colname="Subscribed">
|
||||
<abbr>{ segment.subscribed || 0 }</abbr>
|
||||
</td>
|
||||
<td className="column-date" data-colname="Unconfirmed">
|
||||
<abbr>{ segment.unconfirmed || 0 }</abbr>
|
||||
</td>
|
||||
<td className="column-date" data-colname="Unsubscribed">
|
||||
<abbr>{ segment.unsubscribed || 0 }</abbr>
|
||||
</td>
|
||||
<td className="column-date" data-colname="Created on">
|
||||
<abbr>{ segment.created_at }</abbr>
|
||||
</td>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="title">
|
||||
Segments <Link className="add-new-h2" to="/new">New</Link>
|
||||
</h2>
|
||||
|
||||
<Listing
|
||||
messages={ messages }
|
||||
search={ false }
|
||||
limit={ 1000 }
|
||||
endpoint="segments"
|
||||
onRenderItem={ this.renderItem }
|
||||
columns={ columns }
|
||||
bulk_actions={ bulk_actions }
|
||||
item_actions={ item_actions }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return SegmentList;
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user