From 6cfaabfc403455c09af10cdbb98b7783fa7e70b1 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Mon, 10 Aug 2015 10:56:55 +0200 Subject: [PATCH] Second version of forms. --- .../app/controllers/_channel/form.js.coffee | 18 ++- .../app/views/channel/form.jst.eco | 53 ++++--- app/controllers/form_controller.rb | 7 +- public/assets/form/form.css | 48 ++++++- public/assets/form/form.html | 38 ++++- public/assets/form/form.js | 130 ++++++++++++++---- 6 files changed, 237 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_channel/form.js.coffee b/app/assets/javascripts/app/controllers/_channel/form.js.coffee index ebc5442a3..203d02ceb 100644 --- a/app/assets/javascripts/app/controllers/_channel/form.js.coffee +++ b/app/assets/javascripts/app/controllers/_channel/form.js.coffee @@ -1,9 +1,13 @@ class App.ChannelForm extends App.Controller + events: + 'change form.js-params': 'updateParams' + 'keyup form.js-params': 'updateParams' + constructor: -> super @title 'Form' @render() - + @updateParams() new App.SettingsArea( el: @el.find('.js-settings') area: 'Form::Base' @@ -13,3 +17,15 @@ class App.ChannelForm extends App.Controller @html App.view('channel/form')( baseurl: window.location.origin ) + + updateParams: -> + params = @formParam(@$('.js-params')) + paramString = '' + for key, value of params + if paramString != '' + paramString += ",\n" + if value == 'true' || value == 'false' + paramString += " #{key}: #{value}" + else + paramString += " #{key}: '#{value}'" + @$('.js-modal-params').html(paramString) \ No newline at end of file diff --git a/app/assets/javascripts/app/views/channel/form.jst.eco b/app/assets/javascripts/app/views/channel/form.jst.eco index bd8ce9853..9d9aab686 100644 --- a/app/assets/javascripts/app/views/channel/form.jst.eco +++ b/app/assets/javascripts/app/views/channel/form.jst.eco @@ -9,34 +9,45 @@

<%- @T('Settings') %>

- - - - - - - - - - - - - - - - - -
<%- @T('Option') %>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
<%- @T('Option') %>
+

<%- @T('You need to add the following Java Script code snipped to your web page') %>: 

+<button id="feedback-form">Feedback</button>
+
 <script id="zammad_form_script" src="<%= @baseurl %>/assets/form/form.js"></script>
 <script>
 $('#feedback-form').zammad_form({
-  lang: 'de-de',
-  debug: true,
-  modal: false,
+
 });
 </script>
\ No newline at end of file diff --git a/app/controllers/form_controller.rb b/app/controllers/form_controller.rb index 6adbc3358..3e6254388 100644 --- a/app/controllers/form_controller.rb +++ b/app/controllers/form_controller.rb @@ -33,6 +33,9 @@ class FormController < ApplicationController if params[:email] !~ /@/ errors['email'] = 'invalid' end + if !params[:title] || params[:title].empty? + errors['title'] = 'required' + end if !params[:body] || params[:body].empty? errors['body'] = 'required' end @@ -65,7 +68,7 @@ class FormController < ApplicationController ticket = Ticket.create( group_id: 1, customer_id: customer.id, - title: '', + 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, @@ -78,7 +81,7 @@ class FormController < ApplicationController sender_id: Ticket::Article::Sender.find_by( name: 'Customer' ).id, body: params[:body], from: email, - subject: '', + subject: params[:title], internal: false, updated_by_id: customer.id, created_by_id: customer.id, diff --git a/public/assets/form/form.css b/public/assets/form/form.css index c6ac53fe2..a25ec6743 100644 --- a/public/assets/form/form.css +++ b/public/assets/form/form.css @@ -1,5 +1,9 @@ .zammad-form { - width: 300px; + width: 100%; +} + +.zammad-form h1, .zammad-form h2 { + margin-top: 0; } .zammad-form .form-group { @@ -16,4 +20,46 @@ } .zammad-form .has-error label { color: #a94442; +} + +.modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + text-align: center; +} + +.modal:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; +} + +.modal-backdrop { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.7; + background-color: gray; +} + +.modal-body { + text-align: left; + background: white; + border-radius: 5px; + padding: 24px 24px 22px; + width: 26em; + margin: 0 auto; + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + box-shadow: 0 0 50px rgba(0,0,0,.3); + color: #949494; } \ No newline at end of file diff --git a/public/assets/form/form.html b/public/assets/form/form.html index 5a1a9ec04..fdbb2bb5f 100644 --- a/public/assets/form/form.html +++ b/public/assets/form/form.html @@ -5,13 +5,47 @@ -
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ +

Feedback as Modal

+ + +

Feedback Inline

+
+ + +

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+ +

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

+ +

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

+ +

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

+ +

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

+ +

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ +

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+ +

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

+ +

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo

+ diff --git a/public/assets/form/form.js b/public/assets/form/form.js index 182a9c313..51f76136b 100644 --- a/public/assets/form/form.js +++ b/public/assets/form/form.js @@ -7,7 +7,10 @@ var pluginName = 'zammad_form', defaults = { debug: false, - loadCss: true, + noCSS: false, + title: 'Zammad Form', + submit: 'Submit', + thank_you: 'Thank you for your inquiry!', }; function Plugin( element, options ) { @@ -20,7 +23,14 @@ this._name = pluginName; this._endpoint_config = '/api/v1/form_config' + this._endpoint_submit = '/api/v1/form_submit' this._script_location = '/assets/form/form.js' + this._css_location = '/assets/form/form.css' + + src = document.getElementById('zammad_form_script').src + this.css_location = src.replace(this._script_location, this._css_location) + this.endpoint_config = src.replace(this._script_location, this._endpoint_config) + this.endpoint_submit = src.replace(this._script_location, this._endpoint_submit) this._config = {} @@ -52,35 +62,40 @@ Plugin.prototype.init = function () { - var _this = this, - src = document.getElementById("zammad_form_script").src, - endpoint_config = src.replace(this._script_location, this._endpoint_config) + var _this = this _this.log('init') - if (_this.options.loadCss) { - _this.loadCss('form.css') + if (!_this.options.noCSS) { + _this.loadCss(_this.css_location) } - _this.log('endpoint_config: ' + endpoint_config) + _this.log('endpoint_config: ' + _this.endpoint_config) + _this.log('endpoint_submit: ' + _this.endpoint_submit) // load config $.ajax({ - url: endpoint_config, + url: _this.endpoint_config, }).done(function(data) { _this.log('config:', data) _this._config = data - _this.render() }).fail(function() { alert('Faild to load form config!') }); - // bind form submit - this.$element.on('submit', function (e) { - e.preventDefault() - _this.submit() - return true - }) + // show form + if (!this.options.modal) { + _this.render() + } + + // bind form on call + else { + this.$element.on('click', function (e) { + e.preventDefault() + _this.render() + return true + }) + } } // load css @@ -97,28 +112,29 @@ Plugin.prototype.submit = function() { var _this = this - _this.log('submit form', _this.getParams()) - $.ajax({ method: 'post', - url: _this._config.endpoint, + url: _this.endpoint_submit, data: _this.getParams(), }).done(function(data) { - _this.log('ok done', _this._config.endpoint) // removed errors - _this.$element.find('.has-error').removeClass('has-error') + _this.$form.find('.has-error').removeClass('has-error') // set errors if (data.errors) { $.each(data.errors, function( key, value ) { - _this.$element.find('[name=' + key + ']').closest('.form-group').addClass('has-error') + _this.$form.find('[name=' + key + ']').closest('.form-group').addClass('has-error') }) return } // ticket has been created _this.thanks() + + // rerender after 6 seconds + _this.render() + }).fail(function() { alert('Faild to submit form!') }); @@ -129,15 +145,44 @@ var _this = this, params = {} - $.each( _this.$element.find('form').serializeArray(), function( index, item ) { + $.each( _this.$form.serializeArray(), function( index, item ) { params[item.name] = item.value }) + + if (!params.title) { + params.title = this.options.title + } + + _this.log('params', params) + return params } + Plugin.prototype.closeModal = function() { + if (this.$modal) { + this.$modal.remove() + } + } + // render form Plugin.prototype.render = function(e) { - var form = $('
') + var _this = this + _this.closeModal() + + var element = '
\ +
\ +
\ +
\ +
\ +
' + + if (!this.options.modal) { + element = '
' + } + + var $element = $(element) + var $form = $element.find('form') + $form.append('

' + this.options.title + '

') $.each(this.attributes, function( index, value ) { var item = $('
') if (value.tag == 'input') { @@ -146,18 +191,43 @@ else if (value.tag == 'textarea') { item.append('') } - form.append(item) + $form.append(item) }) - form.append('