Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Second version of forms.

Browse source
This commit is contained in:
Martin Edenhofer 2015-08-10 10:56:55 +02:00
parent c4097e0fc7
commit 6cfaabfc40
6 changed files with 237 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/app/controllers/_channel/form.js.coffee
View file

@ -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)

53
app/assets/javascripts/app/views/channel/form.jst.eco
View file

@ -9,34 +9,45 @@
<div class="js-settings"></div>
<h2><%- @T('Settings') %></h2>
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Option') %></th>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="checkbox" name="debug"/> <%- @T('Debug') %></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="modal"/> <%- @T('Modal Dialog') %></label></td>
</tr>
<tr>
<td><label><input type="checkbox"/> <%- @T('Debug') %></label></td>
</tr>
</tbody>
</table>
<form class="js-params">
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Option') %></th>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="text" name="title" value="<%- @T('Feedback Form') %>" style="display: inline; width: auto;"/> <%- @T('Title of the form.') %></label></td>
</tr>
<tr>
<td><label><input type="text" name="submit" value="<%- @T('Submit') %>" style="display: inline; width: auto;"/> <%- @T('Name of submit button.') %></label></td>
</tr>
<tr>
<td><label><input type="text" name="thank_you" value="<%- @T('Thank you for your inquiry!') %>" style="display: inline; width: auto;"/> <%- @T('Message after sending form.') %></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="debug" value="true"/> <%- @T('Enable debugging for implementation.') %></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="modal" value="true" checked/> <%- @T('Start modal dialog for form.') %></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="noCSS" value="true"/> <%- @T('Load no CSS for form. You need to generate your own CSS for the form.') %></label></td>
</tr>
</tbody>
</table>
</form>
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
<pre>
&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
&lt;script id="zammad_form_script" src="<%= @baseurl %>/assets/form/form.js"&gt;&lt;/script&gt;
&lt;script&gt;
$('#feedback-form').zammad_form({
lang: 'de-de',
debug: true,
modal: false,
<span class="js-modal-params"></span>
});
&lt;/script&gt;</pre>
</div>

7
app/controllers/form_controller.rb
View file

@ -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,

48
public/assets/form/form.css
View file

@ -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;
}

38
public/assets/form/form.html
View file

@ -5,13 +5,47 @@
</head>
<body>
<div id="example_form"></div>
<p>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.</p>
<h1>Feedback as Modal</h1>
<button id="feedback-form-modal">Feedback as Modal</button>
<h1>Feedback Inline</h1>
<div id="feedback-form-inline"></div>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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</p>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script id="zammad_form_script" src="http://localhost:3000/assets/form/form.js"></script>
<script>
$('#example_form').zammad_form({debug:true});
$('#feedback-form-modal').zammad_form({
modal: true,
});
$('#feedback-form-inline').zammad_form({
modal: false,
});
</script>

130
public/assets/form/form.js
View file

@ -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 = $('<form class="zammad-form"></form>')
var _this = this
_this.closeModal()
var element = '<div class="modal">\
<div class="modal-backdrop js-close"></div>\
<div class="modal-body">\
<form class="zammad-form"></form>\
</div>\
</div>'
if (!this.options.modal) {
element = '<div><form class="zammad-form"></form></div>'
}
var $element = $(element)
var $form = $element.find('form')
$form.append('<h2>' + this.options.title + '</h2>')
$.each(this.attributes, function( index, value ) {
var item = $('<div class="form-group"><label>' + value.display + '</label></div>')
if (value.tag == 'input') {
@ -146,18 +191,43 @@
else if (value.tag == 'textarea') {
item.append('<textarea class="form-control" name="' + value.name + '" placeholder="' + value.placeholder + '"></textarea>')
}
form.append(item)
$form.append(item)
})
form.append('<button type="submit">' + 'Submit' + '</button')
this.$element.html(form)
return form
$form.append('<button type="submit" class="btn">' + this.options.submit + '</button')
this.$modal = $element
this.$form = $form
// bind on close
$element.find('.js-close').on('click', function (e) {
e.preventDefault()
_this.closeModal()
return true
})
// bind form submit
$element.on('submit', function (e) {
e.preventDefault()
_this.submit()
return true
})
// show form
if (!this.options.modal) {
_this.$element.html($element)
}
// append modal to body
else {
$('body').append($element)
}
}
// thanks
Plugin.prototype.thanks = function(e) {
var form = $('<div>Thank you for your inquery!</div>')
this.$element.html(form)
return form
var thanks = $('<div>Thank you for your inquery!</div>')
this.$form.html(thanks)
}
// log method