Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Custom fields (in Form & Edit subscriber)

Browse Source
This commit is contained in:
Jonathan Labreuille
2016-01-21 17:27:34 +01:00
parent daec56191f
commit ad925de801
13 changed files with 664 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/js/src/form/fields/checkbox.jsx
View File

@ -1,31 +1,31 @@
define([
'react',
'react-checkbox-group'
'react'
],
function(
React,
CheckboxGroup
React
) {
var FormFieldCheckbox = React.createClass({
const FormFieldCheckbox = React.createClass({
onValueChange: function(e) {
e.target.value = this.refs.checkbox.checked ? '1' : '';
return this.props.onValueChange(e);
},
render: function() {
var selected_values = this.props.item[this.props.field.name] || '';
if(
selected_values !== undefined
&& selected_values.constructor !== Array
) {
selected_values = selected_values.split(';').map(function(value) {
return value.trim();
});
}
var count = Object.keys(this.props.field.values).length;
const isChecked = !!(this.props.item[this.props.field.name]);
var options = Object.keys(this.props.field.values).map(
const options = Object.keys(this.props.field.values).map(
function(value, index) {
return (
<p key={ 'checkbox-' + index }>
<label>
<input type="checkbox" value={ value } />
&nbsp;{ this.props.field.values[value] }
<input
ref="checkbox"
type="checkbox"
value="1"
checked={ isChecked }
onChange={ this.onValueChange }
name={ this.props.field.name }
/>
{ this.props.field.values[value] }
</label>
</p>
);
@ -33,30 +33,10 @@ function(
);
return (
<CheckboxGroup
name={ this.props.field.name }
value={ selected_values }
ref={ this.props.field.name }
onChange={ this.handleValueChange }>
<div>
{ options }
</CheckboxGroup>
</div>
);
},
handleValueChange: function() {
var field = this.props.field.name;
var group = this.refs[field];
var selected_values = [];
if(group !== undefined) {
selected_values = group.getCheckedValues();
}
return this.props.onValueChange({
target: {
name: field,
value: selected_values.join(';')
}
});
}
});

181
assets/js/src/form/fields/date.jsx Normal file
View File

@ -0,0 +1,181 @@
define([
'react',
'moment',
], function(
React,
Moment
) {
class FormFieldDateYear extends React.Component {
render() {
const years = [];
const currentYear = Moment().year();
for (let i = currentYear; i >= currentYear - 100; i--) {
years.push((
<option
key={ i }
value={ i }
>{ i }</option>
));
}
return (
<select
name={ this.props.name + '[year]' }
value={ this.props.year }
onChange={ this.props.onValueChange }
>
{ years }
</select>
);
}
}
class FormFieldDateMonth extends React.Component {
render() {
const months = [];
for (let i = 1; i <= 12; i++) {
months.push((
<option
key={ i }
value={ i }
>{ this.props.monthNames[i - 1] }</option>
));
}
return (
<select
name={ this.props.name + '[month]' }
value={ this.props.month }
onChange={ this.props.onValueChange }
>
{ months }
</select>
);
}
}
class FormFieldDateDay extends React.Component {
render() {
const days = [];
for (let i = 1; i <= 31; i++) {
days.push((
<option
key={ i }
value={ i }
>{ i }</option>
));
}
return (
<select
name={ this.props.name + '[day]' }
value={ this.props.day }
onChange={ this.props.onValueChange }
>
{ days }
</select>
);
}
}
class FormFieldDate extends React.Component {
constructor(props) {
super(props);
this.state = {
year: Moment().year(),
month: 1,
day: 1
}
}
componentDidMount() {
}
componentDidUpdate(prevProps, prevState) {
if(
(this.props.item !== undefined && prevProps.item !== undefined)
&& (this.props.item.id !== prevProps.item.id)
) {
this.extractTimeStamp();
}
}
extractTimeStamp() {
const timeStamp = parseInt(this.props.item[this.props.field.name], 10);
this.setState({
year: Moment.unix(timeStamp).year(),
month: Moment.unix(timeStamp).month() + 1,
day: Moment.unix(timeStamp).date()
});
}
onValueChange(e) {
// extract property from name
const matches = e.target.name.match(/.*?\[(.*?)\]/);
let property = null;
if(matches !== null && matches.length === 2) {
property = matches[1];
}
let value = parseInt(e.target.value, 10);
switch(property) {
case 'year':
this.setState({ year: value });
break;
case 'month':
this.setState({ month: value });
break;
case 'day':
this.setState({ day: value });
break;
}
}
render() {
const monthNames = window.mailpoet_month_names || [];
const dateType = this.props.field.params.date_type;
const dateSelects = dateType.split('_');
const fields = dateSelects.map(type => {
switch(type) {
case 'year':
return (<FormFieldDateYear
onValueChange={ this.onValueChange.bind(this) }
ref={ 'year' }
key={ 'year' }
name={ this.props.field.name }
year={ this.state.year }
/>);
break;
case 'month':
return (<FormFieldDateMonth
onValueChange={ this.onValueChange.bind(this) }
ref={ 'month' }
key={ 'month' }
name={ this.props.field.name }
month={ this.state.month }
monthNames={ monthNames }
/>);
break;
case 'day':
return (<FormFieldDateDay
onValueChange={ this.onValueChange.bind(this) }
ref={ 'day' }
key={ 'day' }
name={ this.props.field.name }
day={ this.state.day }
/>);
break;
}
});
return (
<div>
{fields}
</div>
);
}
};
return FormFieldDate;
});

14
assets/js/src/form/fields/field.jsx
View File

@ -5,7 +5,8 @@ define([
'form/fields/select.jsx',
'form/fields/radio.jsx',
'form/fields/checkbox.jsx',
'form/fields/selection.jsx'
'form/fields/selection.jsx',
'form/fields/date.jsx',
],
function(
React,
@ -14,7 +15,8 @@ function(
FormFieldSelect,
FormFieldRadio,
FormFieldCheckbox,
FormFieldSelection
FormFieldSelection,
FormFieldDate
) {
var FormField = React.createClass({
renderField: function(data, inline = false) {
@ -55,6 +57,10 @@ function(
case 'selection':
field = (<FormFieldSelection {...data} />);
break;
case 'date':
field = (<FormFieldDate {...data} />);
break;
}
if(inline === true) {
@ -66,10 +72,10 @@ function(
);
} else {
return (
<p key={ 'field-' + (data.index || 0) }>
<div key={ 'field-' + (data.index || 0) }>
{ field }
{ description }
</p>
</div>
);
}
},

3
assets/js/src/form/fields/radio.jsx
View File

@ -7,7 +7,6 @@ function(
var FormFieldRadio = React.createClass({
render: function() {
var selected_value = this.props.item[this.props.field.name];
var count = Object.keys(this.props.field.values).length;
var options = Object.keys(this.props.field.values).map(
function(value, index) {
@ -20,7 +19,7 @@ function(
value={ value }
onChange={ this.props.onValueChange }
name={ this.props.field.name } />
&nbsp;{ this.props.field.values[value] }
{ this.props.field.values[value] }
</label>
</p>
);

22
assets/js/src/subscribers/form.jsx
View File

@ -51,6 +51,28 @@ define(
}
];
var custom_fields = window.mailpoet_custom_fields || [];
custom_fields.map(custom_field => {
if(custom_field.type === 'input') {
custom_field.type = 'text';
}
let field = {
name: 'cf_' + custom_field.id,
label: custom_field.name,
type: custom_field.type
};
if(custom_field.params) {
field.params = custom_field.params;
}
if(custom_field.params.values) {
field.values = custom_field.params.values;
}
fields.push(field);
});
var messages = {
onUpdate: function() {
MailPoet.Notice.success('Subscriber successfully updated!');

608
composer.lock generated
View File

File diff suppressed because it is too large Load Diff

25
lib/Config/Menu.php
View File

@ -296,7 +296,7 @@ class Menu {
} else {
// check if users can register
$flags['registration_enabled'] =
(bool) get_option('users_can_register', false);
(bool)get_option('users_can_register', false);
}
return $flags;
@ -307,6 +307,29 @@ class Menu {
$data['segments'] = Segment::findArray();
$data['custom_fields'] = array_map(function($field) {
$field['params'] = unserialize($field['params']);
if(!empty($field['params']['values'])) {
$values = array();
foreach($field['params']['values'] as $value) {
$values[$value['value']] = $value['value'];
}
$field['params']['values'] = $values;
}
return $field;
}, CustomField::findArray());
$data['date_formats'] = Block\Date::getDateFormats();
$data['month_names'] = Block\Date::getMonthNames();
// print "<pre>";
// print_r($data['custom_fields']);
// print "</pre>";
// exit;
echo $this->renderer->render('subscribers/subscribers.html', $data);
}

7
lib/Form/Block/Checkbox.php
View File

@ -13,7 +13,12 @@ class Checkbox extends Base {
$html .= static::renderLabel($block);
foreach($block['params']['values'] as $option) {
$options = (!empty($block['params']['values'])
? $block['params']['values']
: array()
);
foreach($options as $option) {
$html .= '<label class="mailpoet_checkbox_label">';
$html .= '<input type="checkbox" class="mailpoet_checkbox" ';

7
lib/Form/Block/Radio.php
View File

@ -13,7 +13,12 @@ class Radio extends Base {
$html .= static::renderLabel($block);
foreach($block['params']['values'] as $option) {
$options = (!empty($block['params']['values'])
? $block['params']['values']
: array()
);
foreach($options as $option) {
$html .= '<label class="mailpoet_radio_label">';
$html .= '<input type="radio" class="mailpoet_radio" ';

28
lib/Form/Block/Segment.php
View File

@ -13,21 +13,23 @@ class Segment extends Base {
$html .= static::renderLabel($block);
if(!empty($block['params']['values'])) {
// display values
foreach($block['params']['values'] as $segment) {
if(!isset($segment['id']) || !isset($segment['name'])) continue;
$options = (!empty($block['params']['values'])
? $block['params']['values']
: array()
);
$is_checked = (isset($segment['is_checked']) && $segment['is_checked']) ? 'checked="checked"' : '';
foreach($options as $option) {
if(!isset($option['id']) || !isset($option['name'])) continue;
$html .= '<label class="mailpoet_checkbox_label">';
$html .= '<input type="checkbox" class="mailpoet_checkbox" ';
$html .= 'name="'.$field_name.'[]" ';
$html .= 'value="'.$segment['id'].'" '.$is_checked.' ';
$html .= $field_validation;
$html .= ' />'.$segment['name'];
$html .= '</label>';
}
$is_checked = (isset($option['is_checked']) && $option['is_checked']) ? 'checked="checked"' : '';
$html .= '<label class="mailpoet_checkbox_label">';
$html .= '<input type="checkbox" class="mailpoet_checkbox" ';
$html .= 'name="'.$field_name.'[]" ';
$html .= 'value="'.$option['id'].'" '.$is_checked.' ';
$html .= $field_validation;
$html .= ' />'.$option['name'];
$html .= '</label>';
}
$html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';

29
lib/Models/Subscriber.php
View File

@ -247,13 +247,6 @@ class Subscriber extends Model {
}
}
if(!empty($custom_fields)) {
foreach($custom_fields as $custom_field_id => $value) {
$subscriber->setCustomField($custom_field_id, $value);
}
}
if($subscriber === false) {
$subscriber = static::create();
$subscriber->hydrate($data);
@ -261,24 +254,28 @@ class Subscriber extends Model {
$subscriber->set($data);
}
$subscriber->save();
if($subscriber->save()) {
if(!empty($custom_fields)) {
foreach($custom_fields as $custom_field_id => $value) {
$subscriber->setCustomField($custom_field_id, $value);
}
}
}
return $subscriber;
}
function getCustomFields() {
$relation = CustomField::select('id')->findArray();
if(empty($relation)) return $this;
$custom_fields = CustomField::select('id')->findArray();
if(empty($custom_fields)) return $this;
$custom_field_ids = Helpers::arrayColumn($relation, 'id');
$custom_fields = SubscriberCustomField::select('id')
$custom_field_ids = Helpers::arrayColumn($custom_fields, 'id');
$relations = SubscriberCustomField::select('custom_field_id')
->select('value')
->whereIn('custom_field_id', $custom_field_ids)
->where('subscriber_id', $this->id())
->findMany();
foreach($custom_fields as $custom_field) {
$this->{'cf_'.$custom_field->id()} = $custom_field->value;
foreach($relations as $relation) {
$this->{'cf_'.$relation->custom_field_id} = $relation->value;
}
return $this;

1
package.json
View File

@ -25,7 +25,6 @@
"papaparse": "4.1.1",
"parsleyjs": "^2.1.2",
"react": "0.14.3",
"react-checkbox-group": "0.2.2",
"react-dom": "0.14.3",
"react-infinity": "1.2.2",
"react-prefixr": "0.1.0",

2
views/subscribers/subscribers.html
View File

@ -16,5 +16,7 @@
<script type="text/javascript">
var mailpoet_segments = <%= json_encode(segments) %>;
var mailpoet_custom_fields = <%= json_encode(custom_fields) %>;
var mailpoet_month_names = <%= json_encode(month_names) %>;
</script>
<% endblock %>