Form editor

- fixed validations on radio type - fixed date format for months - added custom fields storing on subscribe - fixed date widget (select today's date) - fixed validation on form widget
2015-12-08 16:55:30 +01:00
parent 9fb04bc3c0
commit 7be1a11d1e
15 changed files with 166 additions and 98 deletions
--- a/assets/css/src/admin.styl
+++ b/assets/css/src/admin.styl
@ -5,13 +5,15 @@
@require 'common'
@require 'modal'
@require 'notice'
-@require 'parsley'

@require 'form_editor'
@require 'listing'
@require 'box'
@require 'breadcrumb'
+
@require 'form'
+@require 'parsley'
+@require 'form_validation'

@require 'settings'
@require 'progress_bar'
--- a/assets/css/src/form_validation.styl
+++ b/assets/css/src/form_validation.styl
@ -0,0 +1,6 @@
+.parsley-errors-list
+  margin-top: 8px
+
+.parsley-required
+.parsley-custom-error-message
+  color: #b94a48
--- a/assets/css/src/public.styl
+++ b/assets/css/src/public.styl
@ -1,3 +1,4 @@
@import 'nib'

@require 'parsley'
+@require 'form_validation'
--- a/assets/js/src/form_editor/form_editor.js
+++ b/assets/js/src/form_editor/form_editor.js
@ -231,7 +231,7 @@ var WysijaHistory = {

 /* MailPoet Form */
 var WysijaForm = {
-  version: '0.6',
+  version: '0.7',
  options: {
    container: 'mailpoet_form_container',
    editor: 'mailpoet_form_editor',
--- a/assets/js/src/public.js
+++ b/assets/js/src/public.js
@ -20,7 +20,10 @@ function(
      $('form.mailpoet_form').each(function() {
        var form = $(this);

-        form.parsley().on('form:submit', function(parsley) {
+        form.parsley({
+          errorsWrapper: '<p></p>',
+          errorTemplate: '<span></span>'
+        }).on('form:submit', function(parsley) {

          var data = form.serializeObject() || {};

--- a/lib/Config/Menu.php
+++ b/lib/Config/Menu.php
@ -374,7 +374,8 @@ class Menu {
        ->findArray(),
      'styles' => FormRenderer::getStyles($form),
      'date_types' => Block\Date::getDateTypes(),
-      'date_formats' => Block\Date::getDateFormats()
+      'date_formats' => Block\Date::getDateFormats(),
+      'month_names' => Block\Date::getMonthNames()
    );

    echo $this->renderer->render('form/editor.html', $data);
--- a/lib/Form/Block/Base.php
+++ b/lib/Form/Block/Base.php
@ -29,7 +29,13 @@ abstract class Base {
      }
    }

-    $validation = '';
+    if($block['type'] === 'radio') {
+      $rules['group'] = 'custom_field_'.$block['id'];
+      $rules['errors-container'] = '.mailpoet_error_'.$block['id'];
+      $rules['required-message'] = __('You need to select at least one option.');
+    }
+
+    $validation = array();

    if(!empty($rules)) {
      $rules = array_unique($rules);
@ -37,10 +43,10 @@ abstract class Base {
        if(is_bool($value)) {
          $value = ($value) ? 'true' : 'false';
        }
-        $validation .= 'data-parsley-'.$rule.'="'.$value.'"';
+        $validation[] = 'data-parsley-'.$rule.'="'.$value.'"';
      }
    }
-    return $validation;
+    return join(' ', $validation);
  }

  protected static function renderLabel($block) {
@ -86,8 +92,12 @@ abstract class Base {

  // return field name depending on block data
  protected static function getFieldName($block = array()) {
+    if((int)$block['id'] > 0) {
+      return 'cf_'.$block['id'];
+    } else {
      return $block['id'];
    }
+  }

  protected static function getFieldLabel($block = array()) {
    return (isset($block['params']['label'])
@ -98,6 +108,6 @@ abstract class Base {
  protected static function getFieldValue($block = array()) {
    return (isset($block['params']['value'])
            && strlen(trim($block['params']['value'])) > 0)
-            ? trim($block['params']['value']) : '';
+            ? esc_attr(trim($block['params']['value'])) : '';
  }
 }
--- a/lib/Form/Block/Radio.php
+++ b/lib/Form/Block/Radio.php
@ -9,14 +9,12 @@ class Radio extends Base {
    $field_name = static::getFieldName($block);
    $field_validation = static::getInputValidation($block);

-    // TODO: check if it still makes sense
-    // create hidden default value
-    // $html .= '<input type="hidden"name="'.$field_name.'" value="0" '.static::getInputValidation($block).'/>';
-
    $html .= '<p class="mailpoet_paragraph">';

    $html .= static::renderLabel($block);

+    $html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';
+
    foreach($block['params']['values'] as $option) {
      $html .= '<label class="mailpoet_radio_label">';

@ -24,13 +22,13 @@ class Radio extends Base {

      $html .= 'name="'.$field_name.'" ';

-      $html .= 'value="'.$option['value'].'" ';
+      $html .= 'value="'.esc_attr($option['value']).'" ';

      $html .= (isset($option['is_checked']) && $option['is_checked'])
                ? 'checked="checked"' : '';
      $html .= $field_validation;

-      $html .= ' />&nbsp;'.$option['value'];
+      $html .= ' />&nbsp;'.esc_attr($option['value']);

      $html .= '</label>';
    }
--- a/lib/Router/Subscribers.php
+++ b/lib/Router/Subscribers.php
@ -4,6 +4,7 @@ namespace MailPoet\Router;
 use MailPoet\Listing;
 use MailPoet\Models\Subscriber;
 use MailPoet\Models\SubscriberSegment;
+use MailPoet\Models\SubscriberCustomField;
 use MailPoet\Models\Segment;
 use MailPoet\Models\Setting;
 use MailPoet\Models\Form;
@ -140,32 +141,37 @@ class Subscribers {
        ? 'unconfirmed' : 'subscribed'
      );

-      // // set custom fields
-      // $meta_fields = $mailpoet->getOption('mailpoet_subscriber_meta', array());
-      // if(!empty($meta_fields)) {
-      //   // loop through data to see if any meta field has been passed
-      //   foreach($meta_fields as $field => $field_data) {
-      //     // check if it's a mandatory field
-      //     $is_required = (isset($field_data['params']['required']) && (bool)$field_data['params']['required'] === true);
-
-      //     if(array_key_exists($field, $data)) {
-      //       // check if it's a mandatory field
-      //       if($is_required === true && empty($data[$field])) {
-      //         // if it's missing, throw an error
-      //         $errors[] = sprintf(__('&quot;%s&quot; is required'), $field_data['name']);
-      //       } else {
-      //         // assign field to subscriber
-      //         $subscriber[$field] = $data[$field];
-      //       }
-      //     }
-      //   }
-      // }
+      // custom fields
+      $custom_fields = array();
+      foreach($data as $key => $value) {
+        if(strpos($key, 'cf_') === 0) {
+          $custom_fields[substr($key, 3)] = $value;
+          unset($data[$key]);
+        }
+      }

      // insert new subscriber
      $subscriber = Subscriber::createOrUpdate($data);

      if($subscriber === false || !$subscriber->id()) {
        $errors = array_merge($errors, $subscriber->getValidationErrors());
+      } else {
+        // add custom fields
+        if(!empty($custom_fields)) {
+          foreach($custom_fields as $custom_field_id => $value) {
+            if(is_array($value)) {
+              // date
+              $value = mktime(0, 0, 0, $value['month'], $value['day'], $value['year']);
+            }
+            $subscriber_custom_field = SubscriberCustomField::create();
+            $subscriber_custom_field->hydrate(array(
+              'subscriber_id' => $subscriber->id(),
+              'custom_field_id' => $custom_field_id,
+              'value' => $value
+            ));
+            $subscriber_custom_field->save();
+          }
+        }
      }
    } else {
      $subscriber->set('status', (
--- a/views/form/editor.html
+++ b/views/form/editor.html
@ -118,7 +118,7 @@
      <!-- Toolbar: Shortcodes / Export -->
      <div class="mailpoet_toolbar_section closed" data-section="shortcodes">
        <a href="javascript:;" class="mailpoet_toggle"><br /></a>
-        <h3><%= __('Position') %></h3>
+        <h3><%= __('Form Placement') %></h3>

        <div>
          <!-- Form export links -->
@ -257,6 +257,14 @@
    ];

    jQuery(function($) {
+      function mailpoet_form_toggle_segments() {
+        // hide list selection if a list widget has been dragged into the editor
+        $('mailpoet_settings_segment_selection')[
+          (($$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0) === true)
+          ? 'hide' : 'show'
+        ]();
+      }
+
      function mailpoet_form_fields() {
        // form editor: default fields
        var template = Handlebars.compile(jQuery('#form_template_fields').html());
@ -272,8 +280,13 @@
          if(response !== false) {
            data.fields  = $.merge(response, data.fields);
          }
+
          // render toolbar
          jQuery('#mailpoet_toolbar_fields').html(template(data));
+
+          setTimeout(function() {
+            WysijaForm.init();
+          }, 1);
        });
      }
      window.mailpoet_form_fields = mailpoet_form_fields;
@ -302,7 +315,7 @@
      });

      // toolbar: open default section
-      $('.mailpoet_toolbar_section[data-section="settings"]')
+      $('.mailpoet_toolbar_section[data-section="fields"]')
        .removeClass('closed');

      // form: edit name (in place editor)
@ -468,7 +481,7 @@
            action: 'exportsEditor',
            data: $('#mailpoet_form_id').val()
          }).done(function(response) {
-            if(response !== false) {
+            if(response.result !== false) {
              $('#mailpoet_form_export').html(template({ exports: response }));
            }
          });
@ -486,11 +499,7 @@
          // open popup
          MailPoet.Modal.popup({
            title: "<%= __('Add new field') %>",
-            template: $('#form_template_field_new').html(),
-            onSuccess: function(data) {
-              // toggle widgets
-              WysijaForm.toggleWidgets();
-            }
+            template: $('#form_template_field_new').html()
          });

          return false;
@ -505,7 +514,7 @@
            action: 'get',
            data: id
          }).done(function(response) {
-            if(response !== false) {
+            if(response.result !== false) {
              MailPoet.Modal.popup({
                title: "<%= __('Edit field') %>",
                template: $('#form_template_field_new').html(),
@ -528,8 +537,8 @@
              endpoint: 'customFields',
              action: 'delete',
              data: id
-            }).done(function(response) {
-              if(response === true) {
+            }).done(function(result) {
+              if(result === true) {
                item.remove();
                mailpoet_form_fields();
                MailPoet.Notice.success(
@ -549,15 +558,13 @@
        });

        // get form fields
-        mailpoet_form_fields().done(function() {
-          WysijaForm.init();
-        });
+        mailpoet_form_fields();

        // toolbar: segment selection
        var selected_segments = <%= form.settings.segments | json_encode | raw %>;

        //  enable select2 for segment selection
-        $('#mailpoet_form_segments').select2({
+        var select2 = $('#mailpoet_form_segments').select2({
          width:'100%',
          templateResult: function(item) {
            if(item.element && item.element.selected) {
@ -566,7 +573,23 @@
              return item.text;
            }
          }
-        }).select2('val', <%= form.settings.segments | json_encode | raw %>);
+        });
+
+        var hasRemoved = false;
+        select2.on('select2:unselecting', function(e) {
+          hasRemoved = true;
+        });
+        select2.on('select2:opening', function(e) {
+          if(hasRemoved === true) {
+            hasRemoved = false;
+            e.preventDefault();
+          }
+        });
+
+        // set selected values
+        $('#mailpoet_form_segments')
+          .val(<%= form.settings.segments | json_encode | raw %>)
+          .trigger('change');
      });
    });
  </script>
--- a/views/form/templates/blocks/date_days.hbs
+++ b/views/form/templates/blocks/date_days.hbs
@ -1,10 +1,10 @@
-<% set currentDay = 'now'|date("d") %>
-
+<% set currentDay = 'now' | date('d') | number_format %>
 <select id="{{ id }}_days">
  <% for day in 1..31 %>
    <option
-      {{#if params.is_default_today}}
-        {{#ifCond day "==" "<%= currentDay %>"}}selected="selected"{{/ifCond}}
-      {{/if}}><%= day %></option>
+    <% if(currentDay == day) %>
+      {{#if params.is_default_today}}selected="selected"{{/if}}
+    <% endif %>
+    ><%= day %></option>
  <% endfor %>
 </select>
--- a/views/form/templates/blocks/date_months.hbs
+++ b/views/form/templates/blocks/date_months.hbs
@ -1,11 +1,12 @@
 <% set currentMonth = 'now'|date('n') %>
-
 <select id="{{ id }}_months">
  <% for month in 1..12 %>
    <option
-      {{#if params.is_default_today}}
-        {{#ifCond month "==" "<%= currentMonth %>"}}selected="selected"{{/ifCond}}
-      {{/if}}
-    ><%= month |date('1984-' ~ month ~ '-01') |date('F') %></option>
+      <% if(currentMonth == month) %>
+      {{#if params.is_default_today}}selected="selected"{{/if}}
+      <% endif %>
+    >
+    <%= month_names[month - 1] %>
+    </option>
  <% endfor %>
 </select>
--- a/views/form/templates/blocks/date_years.hbs
+++ b/views/form/templates/blocks/date_years.hbs
@ -4,8 +4,9 @@
 <select id="{{ id }}_years">
  <% for year in currentYear..minYear %>
    <option
-      {{#if params.is_default_today}}
-        {{#ifCond year "==" "<%= year %>"}}selected="selected"{{/ifCond}}
-      {{/if}}><%= year %></option>
+      <% if(currentYear == year) %>
+      {{#if params.is_default_today}}selected="selected"{{/if}}
+      <% endif %>
+    ><%= year %></option>
  <% endfor %>
 </select>
--- a/views/form/templates/settings/field_new.hbs
+++ b/views/form/templates/settings/field_new.hbs
@ -1,9 +1,20 @@

-<form id="form_field_new" name="form_field_new" action="" method="post">
+<form
+  id="form_field_new"
+  name="form_field_new"
+  action=""
+  method="post"
+  data-parsley-validate="true"
+>
  {{#if id}}<input type="hidden" id="field_id" name="id" value="{{ id }}" />{{/if}}
  <p>
    <label for="field_type"><%= __('Select a field type:') %></label>
-    <select id="field_type" name="type">
+    <select
+      id="field_type"
+      name="type"
+      data-parsley-required="true"
+      data-parsley-required-message="<%= __('You need to specify a type') %>"
+    >
      <option value="">--</option>
      <option
        {{#ifCond type '==' 'input'}}selected="selected"{{/ifCond}}
@ -33,7 +44,13 @@
  </p>
  <p>
    <label><%= __("Field's name:") %></label>
-    <input type="text" name="name" value="{{ name }}" />
+    <input
+      type="text"
+      name="name"
+      value="{{ name }}"
+      data-parsley-required="true"
+      data-parsley-required-message="<%= __('You need to specify a name') %>"
+    />
  </p>
  <hr />

@ -49,13 +66,12 @@

    $(function() {
      loadFieldForm();
-    });
-
-    $('#form_field_new').on('submit', function(e) {
-      e.preventDefault();

+      $('#form_field_new').parsley().on('form:submit', function(parsley) {
        // get data
-      var data = $(this).serializeObject();
+        var data = $(this.$element).serializeObject();
+
+        // save custom field
        MailPoet.Ajax.post({
          endpoint: 'customFields',
          action: 'save',
@ -73,17 +89,18 @@
              );
            }

+            // close popup
+            MailPoet.Modal.success();
          } else {
            if(response.errors.length > 0) {
-            for(error in response.errors) {
+              $(response.errors).each(function(i, error) {
                MailPoet.Notice.error(error);
-            }
+              });
            }
          }
        });
-
-      // close popup
-      return MailPoet.Modal.success();
+        return false;
+      });
    });

    $('#form_field_new #field_type').on('change', function() {
--- a/views/form/widget.html
+++ b/views/form/widget.html
@ -15,7 +15,6 @@
      #>
      class="mailpoet_form mailpoet_form_<%= form_type %>"
      novalidate
-      data-parsley-validate
    >
      <div class="mailpoet_message"></div>