Added preview do admin interface for form config.

app/assets/javascripts/app/controllers/_channel/form.coffee

@@ -47,6 +47,17 @@ class App.ChannelForm extends App.ControllerSubContent
           paramString += "    #{key}: '#{quote(value)}'"
     @$('.js-modal-params').html(paramString)
 
+    # rebuild preview
+    if params.modal
+      @$('.js-formInline').addClass('hide')
+      @$('.js-formBtn').removeClass('hide')
+      @$('.js-formBtn').ZammadForm(params)
+      @$('.js-formBtn').text('Feedback')
+    else
+      @$('.js-formBtn').addClass('hide')
+      @$('.js-formInline').removeClass('hide')
+      @$('.js-formInline').ZammadForm(params)
+
   toggleFormSetting: =>
     value = @formSetting.prop('checked')
     App.Setting.set('form_ticket_create', value)

app/assets/javascripts/app/views/channel/form.jst.eco

@@ -93,7 +93,19 @@
     </table>
   </form>
 
-  <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
+  <label class="formGroup-label"><%- @T('Preview') %></label>
+
+  <div class="browser form-demo js-browser">
+    <div class="browser-body js-browserBody">
+      <div class="browser-website centered vertical fit">
+        <div class="btn js-formBtn"><%- @T('Feedback') %></div>
+        <div class="js-formInline" style="width: 300px;"></div>
+        <script id="zammad_form_script" src="/assets/form/form.js"></script>
+      </div>
+    </div>
+  </div>
+
+  <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:</p>
 
   <pre><code class="language-html js-paramsBlock">&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
 

app/controllers/form_controller.rb

@@ -87,28 +87,27 @@ class FormController < ApplicationController
       )
     end
 
+    # set current user
+    UserInfo.current_user_id = customer.id
+
     ticket = Ticket.create(
       group_id: 1,
       customer_id: customer.id,
       title: params[:title],
       state_id: Ticket::State.find_by(name: 'new').id,
       priority_id: Ticket::Priority.find_by(name: '2 normal').id,
-      updated_by_id: customer.id,
-      created_by_id: customer.id,
     )
-
     article = Ticket::Article.create(
       ticket_id: ticket.id,
       type_id: Ticket::Article::Type.find_by(name: 'web').id,
       sender_id: Ticket::Article::Sender.find_by(name: 'Customer').id,
       body: params[:body],
-      from: email,
       subject: params[:title],
       internal: false,
-      updated_by_id: customer.id,
-      created_by_id: customer.id,
     )
 
+    UserInfo.current_user_id = 1
+
     result = {}
     render json: result, status: :ok
   end

public/assets/form/form.css

@@ -26,7 +26,7 @@
   text-align: center;
 }
 
-.modal {
+.zammad-form-modal {
     position: fixed;
     left: 0;
     top: 0;
@@ -36,7 +36,7 @@
     z-index: 999;
 }
 
-.modal:before {
+.zammad-form-modal:before {
     content: "";
     display: inline-block;
     height: 100%;
@@ -44,7 +44,7 @@
     margin-right: -0.25em;
 }
 
-.modal-backdrop {
+.zammad-form-modal-backdrop {
     position: absolute;
     left: 0;
     top: 0;
@@ -54,7 +54,7 @@
     background-color: gray;
 }
 
-.modal-body {
+.zammad-form-modal-body {
     text-align: left;
     background: white;
     border-radius: 5px;

public/assets/form/form.js

@@ -11,10 +11,10 @@
 <script>
 $(function() {
   $('#feedback-form').ZammadForm({
-    messageTitle: 'Feedback Form',
-    messageSubmit: 'Submit',
-    messageThankYou: 'Thank you for your inquiry! We\'ll contact you soon as possible.',
-    messageNoConfig: 'Unable to load form config from server. Maybe featrue is disabled.',
+    messageTitle: 'Feedback Form', // optional
+    messageSubmit: 'Submit', // optional
+    messageThankYou: 'Thank you for your inquiry! We\'ll contact you soon as possible.', // optional
+    messageNoConfig: 'Unable to load form config from server. Maybe featrue is disabled.', // optional
     showTitle: true,
     modal: true,
     attributes: [
@@ -80,11 +80,11 @@ $(function() {
     ]
   };
 
-  function Plugin( element, options ) {
+  function Plugin(element, options) {
     this.element  = element;
     this.$element = $(element)
 
-    this.options = $.extend( {}, defaults, options) ;
+    this.options = $.extend({}, defaults, options);
 
     this._defaults = defaults;
     this._name     = pluginName;
@@ -99,12 +99,11 @@ $(function() {
     this.endpoint_config = this._src.replace(this._script_location, this._endpoint_config)
     this.endpoint_submit = this._src.replace(this._script_location, this._endpoint_submit)
 
-    this._config  = {}
+    this._config = {}
 
     this.init();
   }
 
-
   Plugin.prototype.init = function () {
     var _this = this
 
@@ -140,7 +139,7 @@ $(function() {
 
     // bind form on call
     else {
-      this.$element.on('click', function (e) {
+      this.$element.off('click.zammad-form').on('click.zammad-form', function (e) {
         e.preventDefault()
         _this.render()
         return true
@@ -175,6 +174,9 @@ $(function() {
       }
     }
 
+    // disable form
+    _this.$form.find('button').prop('disabled', true)
+
     $.ajax({
       method: 'post',
       url: _this.endpoint_submit,
@@ -189,6 +191,7 @@ $(function() {
         $.each(data.errors, function( key, value ) {
           _this.$form.find('[name=' + key + ']').closest('.form-group').addClass('has-error')
         })
+        _this.$form.find('button').prop('disabled', false)
         return
       }
 
@@ -196,6 +199,7 @@ $(function() {
       _this.thanks()
 
     }).fail(function() {
+      _this.$form.find('button').prop('disabled', false)
       alert('Faild to submit form!')
     });
   }
@@ -229,9 +233,9 @@ $(function() {
     _this.modalOpenTime = new Date()
     _this.log('debug', 'modalOpenTime:', _this.modalOpenTime)
 
-    var element = '<div class="modal">\
-      <div class="modal-backdrop js-close"></div>\
-      <div class="modal-body">\
+    var element = '<div class="zammad-form-modal">\
+      <div class="zammad-form-modal-backdrop js-close"></div>\
+      <div class="zammad-form-modal-body">\
         <form class="zammad-form"></form>\
       </div>\
     </div>'
@@ -245,7 +249,7 @@ $(function() {
     if (this.options.showTitle && this.options.messageTitle != '') {
       $form.append('<h2>' + this.options.messageTitle + '</h2>')
     }
-    $.each(this.options.attributes, function( index, value ) {
+    $.each(this.options.attributes, function(index, value) {
       var item = $('<div class="form-group"><label>' + value.display + '</label></div>')
       if (value.tag == 'input') {
         item.append('<input class="form-control" name="' + value.name + '" type="' + value.type + '" placeholder="' + value.placeholder + '">')
@@ -261,14 +265,14 @@ $(function() {
     this.$form  = $form
 
     // bind on close
-    $element.find('.js-close').on('click', function (e) {
+    $element.find('.js-close').off('click.zammad-form').on('click.zammad-form', function (e) {
       e.preventDefault()
       _this.closeModal()
       return true
     })
 
     // bind form submit
-    $element.on('submit', function (e) {
+    $element.off('submit.zammad-form').on('submit.zammad-form', function (e) {
       e.preventDefault()
       _this.submit()
       return true
@@ -327,12 +331,17 @@ $(function() {
     $('.js-logDisplay').prepend('<div>' + logString + '</div>')
   }
 
-  $.fn[pluginName] = function ( options ) {
+  $.fn[pluginName] = function (options) {
     return this.each(function () {
-      if (!$.data(this, 'plugin_' + pluginName)) {
-        $.data(this, 'plugin_' + pluginName,
-        new Plugin( this, options ));
+      var instance = $.data(this, 'plugin_' + pluginName)
+      if (instance) {
+        instance.$element.empty()
+        $.data(this, 'plugin_' + pluginName, undefined)
       }
+      $.data(
+        this, 'plugin_' + pluginName,
+        new Plugin(this, options)
+      );
     });
   }