seitime-frappe/frappe/templates/generators/web_form.html
Rushabh Mehta b8b2811aa6 [minor]
2016-10-18 14:23:06 +05:30

814 lines
22 KiB
HTML

{% extends "templates/web.html" %}
{% block title %}{{ title }}{% endblock %}
{% block header %}
<h1>{{ title }}</h1>
{% endblock %}
{% block breadcrumbs %}
{% if has_header %}
{% include "templates/includes/breadcrumbs.html" %}
{% endif %}
{% endblock %}
{% block header_actions %}
{% if not read_only and has_header %}
<div style="padding-bottom: 15px;">
<a href="{{ cancel_url or pathname }}" class="btn btn-default btn-sm">
{{ _("Cancel") }}</a>
<button type="submit" class="btn btn-primary btn-sm btn-form-submit">
{{ _("Save") }}</button>
</div>
{% endif %}
{% if is_list %}
<div style="padding-bottom: 15px;">
<a href="/{{ pathname }}{{ delimeter }}new=1" class="btn btn-primary btn-new btn-sm">
{{ _("New") }}
</a>
</div>
{% endif %}
{%- if allow_print and not is_list and not _login_required -%}
<div class='text-right'>
<a class='text-muted small' href='/print?doctype={{ doc.doctype}}&name={{ doc.name }}
{%- if print_format -%}&format={{ print_format }}{%- endif -%}' target="_blank">
<i class='icon icon-print'></i> {{ _("Print") }}</a>
</div>
{%- endif -%}
{% endblock %}
{% block page_content %}
<div class="introduction">
{% if introduction_text %}
<p class="text-muted">{{ introduction_text }}</p>
{% endif %}
</div>
<div class="form-message alert alert-warning hide"></div>
{% if _login_required %}
<div class="login-required">
<div class="text-muted">
{{ _("Please sign-up or login to begin") }}
</div>
<p>
<a href="/login?redirect-to=/{{ pathname }}" class="btn btn-primary">
{{ _("Login") }}
</a>
</p>
</div>
{% elif is_list %}
{% include "templates/includes/list/list.html" %}
<script>{% include "templates/includes/list/list.js" %}</script>
{% else %}
<br>
{%- macro properties(field) %}
name="{{ field.fieldname }}"
{% if field.placeholder -%} placeholder="{{ _(field.placeholder) }}" {%- endif %}
data-label="{{ _(field.label) }}" data-fieldtype="{{ field.fieldtype }}"
data-doctype="{{ field.parent }}" data-default="{{ field.default or "" }}"
{{ field.reqd and "data-reqd=1" or "" }}
{{ (read_only or field.read_only) and "disabled" or "" }}
{% endmacro -%}
{%- macro value(field, _doc) -%}
{%- if _doc -%}
{%- set _value = _doc.get(field.fieldname) or frappe.form_dict.get(field.fieldname) -%}
{%- else -%}
{%- set _value = frappe.form_dict.get(field.fieldname) or field.default -%}
{%- endif -%}
{{ "" if _value==None else _value }}
{%- endmacro -%}
{%- macro help(field) -%}
{% if field.description -%}
<span class="help-block small text-muted">{{ _(field.description) }}</span>
{%- endif -%}
{%- endmacro %}
{% macro label(field) %}
<label for="{{ field.fieldname }}" class="control-label text-muted small">
{{ _(field.label) }}</label>
{% endmacro %}
{% macro render_field(field, _doc=None, with_label=True) %}
{% if field.hidden %}
<input type="hidden" data-doctype="{{ field.parent }}"
name="{{ field.fieldname }}" value="{{ value(field, _doc) }}">
{% elif field.fieldtype == "HTML" and field.options %}
<div class="form-group">
{{ field.options }}
</div>
{% elif field.fieldtype in ("Data", "Date", "Datetime", "Int", "Float") %}
<div class="form-group{% if field.reqd %} has-error{% endif %}">
{% if with_label %}{{ label(field) }}{% endif %}
<input type={{ "number" if field.fieldtype in ("Int", "Float") else "text" }}
class="form-control" {{ properties(field) }}
value="{{ value(field, _doc) }}"
{%- if field.fieldtype=="Int" %} pattern="[0-9]*"{% endif %}
{%- if field.max_length %} maxlength={{ field.max_length }}{% endif %}>
{{ help(field) }}
</div>
{% elif field.fieldtype=="Link" %}
<div class="form-group{% if field.reqd %} has-error{% endif %}">
{% if with_label %}{{ label(field) }}{% endif %}
<select class="form-control" {{ properties(field) }}>
{% for option in ([{"name":""}] + frappe.get_all(field.options)) -%}
<option value="{{ option.name }}"
{{ 'selected="selected"' if value(field, _doc)==option.name else '' }}>
{{ option.name }}</option>
{%- endfor %}
</select>
{{ help(field) }}
</div>
{% elif field.fieldtype=="Select" %}
<div class="form-group{% if field.reqd %} has-error{% endif %}">
{% if with_label %}{{ label(field) }}{% endif %}
<select class="form-control" {{ properties(field) }}>
{% for option in field.options.split("\n") -%}
<option value="{{ option }}"
{{ 'selected="selected"' if value(field, _doc)==option else '' }}>
{{ option }}</option>
{%- endfor %}
</select>
{{ help(field) }}
</div>
{% elif field.fieldtype=="Text" %}
<div class="form-group{% if field.reqd %} has-error{% endif %}">
{% if with_label %}{{ label(field) }}{% endif %}
{{ help(field) }}
<textarea class="form-control" style="height: 200px;"
{{ properties(field) }}>{{ value(field, _doc) }}</textarea>
</div>
{% elif field.fieldtype=="Attach" %}
<div class="form-group">
{% if with_label %}{{ label(field) }}{% endif %}
{% if value(field, _doc) -%}
<p class="small">
<a href="{{ doc.get(field.fieldname) }}" target="blank">
{{ _doc.get(field.fieldname) }}
</a>
<br><button class="btn btn-small btn-default btn-xs
change-attach" style="margin-top: 5px;">Change</button>
</p>
{%- endif %}
<p class="{{ value(field, _doc) and 'hide' or '' }} attach-input-wrap">
<input type="file" style="margin-top: 7px;"
{{ properties(field) }}
{%- if value(field, _doc) -%} data-value="{{ value(field, _doc) }}"{%- endif -%}>
<p class='text-muted small' style='margin-bottom: 20px;'>
{{ _("Max attachment size is {0}MB").format(max_attachment_size) }}
</p>
</p>
{{ help(field) }}
</div>
{% elif field.fieldtype=="Check" %}
<div class="form-group">
<div class="checkbox">
{% if with_label %}
<label class='text-muted'>
<input type="checkbox" id="{{ field.fieldname }}"
name="{{ field.fieldname }}" data-doctype="{{ field.parent }}"
{{ _doc and _doc.get(field.fieldname) and 'checked' or '' }}>
{{ _(field.label) }}
</label>
{% endif %}
{{ help(field) }}
</div>
</div>
{% endif %}
{% endmacro %}
{% macro render_row(field, d=None, hidden=False) %}
<tr class="web-form-grid-row {% if hidden %}hidden{% endif %}"
{% if d != None %}data-name="{{ d.name or "" }}" data-child-row=1{% endif %}>
{% for df in frappe.get_meta(field.options).fields %}
{% if df.in_list_view %}
<{{ 'th' if d==None else 'td' }} style="width: {{ (df.columns or 2) * 8.3333 }}%;">
{% if d!=None %}
{{ render_field(df, d, False) }}
{% else %}
<span class='text-muted small'>{{ _(df.label) }}</span>
{% endif %}
</{{ 'th' if d.name==None else 'td' }}>
{% endif %}
{% endfor %}
<td style="width: 8.3333%">
{% if d!=None %}
<button class='btn btn-default btn-sm btn-remove'><i class='icon-remove'></i></button>
{% endif %}
</td>
</tr>
{% endmacro %}
{% macro render_table(field) %}
{{ label(field) }}
<div class='web-form-grid'
data-fieldname='{{ field.fieldname }}' data-doctype='{{ field.options }}'>
<table class='table table-bordered'>
<thead>
{{ render_row(field) }}
</thead>
<tbody>
{{ render_row(field, {}, True) }}
{% if doc and doc.get(field.fieldname) %}
{% for d in doc.get(field.fieldname) %}
{{ render_row(field, d) }}
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
<p><button class='btn btn-default btn-sm btn-add-row'
data-fieldname='{{ field.fieldname }}'>{{ _("Add Row") }}</button></p>
{% endmacro %}
<!-- pagination -->
{% if not frappe.form_dict.new and layout|len > 1 %}
<div class="text-center slide-progress text-extra-muted">
{% for page in layout %}
<i data-idx="{{ loop.index }}" data-toggle="tooltip" data-placement="top"
title="{{ page.label or _("Page {0}").format(loop.index) }}" class="icon-fixed-width
{% if loop.index==1 %}icon-circle{% else %}icon-circle-blank{% endif %}"></i>
{% endfor %}
</div>
{% endif %}
<form role="form"
data-web-form="{{ name }}" data-owner="{{ doc.owner }}">
{% if frappe.form_dict.name and web_page_link_text %}
<div class="row">
<div class="col-sm-9">
<p class="text-muted">
<a class="btn btn-default btn-sm" href="{{ doc.route }}" target="_blank">
{{ web_page_link_text }}</a>
</p>
</div>
</div>
{% endif %}
{% for page in layout %}
{% set last_page = True if loop.index == layout|len else False %}
<div class="web-form-page{% if loop.index > 1 %} hidden{% endif %}"
data-idx="{{ loop.index }}"
data-label="{{ page.label or _("Page {0}").format(loop.index) }}">
{% if page.label %}
<h2 class='text-center'>{{ page.label }}</h2>
{% endif %}
{% if page.description %}
<p class='text-center text-muted small'>{{ page.description }}</p>
<br>
{% endif %}
{% for section in page.sections %}
<div class="section">
{% if section.label %}
<h5 class='uppercase'>{{ _(section.label) }}</h5>
{% endif %}
<div class="row">
{% for column in section.columns %}
<div class="col-sm-{{ (12 / (section.columns|len))|int }}">
{% for field in column %}
{% if field.fieldtype=='Table' %}
{{ render_table(field) }}
{% else %}
{{ render_field(field, doc) }}
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
{% if last_page and accept_payment %}
<div class="well payment-details">
{% if not doc.paid %}
{% if payment_button_help %}
<div class='text-muted' style='padding-bottom: 15px;'>
{{ payment_button_help }}</div>
{% endif %}
<a class="btn btn-primary btn-payment">
{{ payment_button_label }}</a>
{% else %}
<div>{{ _("Payment Complete") }}</div>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
<!-- page footer buttons -->
<div>
{% if layout|len > 1 %}
<p class='text-muted small text-center'>
{{ _("Page {0} of {1}").format(loop.index, layout|len) }}</p>
{% endif %}
<br>
<p class='text-right'>
{%- if loop.index > 1 -%}
<button class='btn btn-sm btn-default btn-change-section'
data-idx="{{ loop.index - 1 }}">
{{ _("Previous") }}</button>
{%- endif -%}
<!-- save/next button -->
{% if (loop.index == layout|len or frappe.form_dict.new) %}
{% if not read_only %}
<button type="submit" class="btn btn-primary btn-sm btn-form-submit">
{{ _("Save") }}</button>
{% endif %}
{% elif layout|len > 1 %}
<button class="btn btn-primary btn-sm btn-change-section"
data-idx="{{ loop.index + 1 }}">
{{ _("Next") }}</button>
{% endif %}
</p>
</div>
</div>
{% endfor %}
</form>
{% if allow_comments and not frappe.form_dict.new -%}
<div class="comments">
<br><br>
<h3>{{ _("Comments") }}</h3>
{% include 'templates/includes/comments/comments.html' %}
</div>
{%- endif %}
{% endif %}
<div class="padding"></div>
{% endblock %}
{% block script %}
<script>
frappe.ready(function() {
frappe.file_reading = false;
frappe.allow_incomplete = {{ allow_incomplete or 0 }};
frappe.success_message = "{{ success_message or "" }}";
frappe.success_link = '{{ success_message }}<p><a href="{{ success_url }}">{{ _("Continue") }}</a></p>'
frappe.datepicker_format = "{{ frappe.date_format.replace('yyyy', 'yy') }}";
frappe.web_form_doctype = "{{ doc_type }}";
frappe.web_form_name = "{{ name }}";
frappe.is_new = {{ 1 if frappe.form_dict.new else 0 }};
frappe.is_read_only = {{ 1 if read_only else 0 }};
frappe.doc_name = "{{ frappe.form_dict.name or "" }}";
frappe.form_dirty = false;
frappe.max_attachment_size = {{ max_attachment_size }};
moment.defaultFormat = "{{ frappe.date_format.upper() }}";
{% if row_template %}frappe.web_form_row_template = "{{ row_template }}";{% endif %}
$('[data-toggle="tooltip"]').tooltip();
var $form = $("form[data-web-form='{{ name }}']");
// read file attachment
$form.on("change", "[type='file']", function() {
var $input = $(this);
if($input.attr("type")==="file") {
var input = $input.get(0);
var reader = new FileReader();
if(input.files.length) {
file = input.files[0];
frappe.file_reading = true;
reader.onload = function(e) {
input.filedata = {
"__file_attachment": 1,
"filename": file.name,
"dataurl": reader.result
};
if(input.filedata.dataurl.length >
(frappe.max_attachment_size * 1024 * 1024)) {
frappe.msgprint(__('Max file size allowed is {0}MB',
[frappe.max_attachment_size]));
input.filedata = null
// clear attachment
$(input).val('');
$(input).attr('data-value', '');
};
frappe.file_reading = false;
}
reader.readAsDataURL(file);
}
}
});
var set_mandatory_class = function(input) {
if($(input).attr('data-reqd')) {
$(input).parent().toggleClass('has-error', !!!$(input).val());
}
}
// show mandatory fields as red
$('.form-group input, .form-group textarea, .form-group select').on('change', function() {
set_mandatory_class(this);
}).on('keypress', function() {
set_mandatory_class(this);
// validate maxlength
var maxlength = parseInt($(this).attr('maxlength'));
if(maxlength && (($(this).val() || '') + '').length > maxlength-1) {
$(this).val($(this).val().substr(0, maxlength-1));
};
}).each(function() { set_mandatory_class(this); });
// if changed, set dirty flag
$form.on('change', function() {
frappe.form_dirty = true;
});
$form.on('submit', function() {
return false;
});
// allow payment only if
$('.btn-payment').on('click', function() {
save(true);
return false;
});
// change attach
$form.on("click", ".change-attach", function() {
var input_wrapper = $(this).parent().addClass("hide")
.parent().find(".attach-input-wrap").removeClass("hide");
input_wrapper.find('input').val('').attr('data-value', '');
frappe.form_dirty = true;
return false;
});
// change section
$('.btn-change-section, .slide-progress .icon-fixed-width').on('click', function() {
var idx = $(this).attr('data-idx');
if(!frappe.form_dirty || frappe.is_read_only) {
show_slide(idx);
} else {
if(save()!==false) {
show_slide(idx);
}
}
return false;
});
show_slide = function(idx) {
// hide all sections
$('.web-form-page').addClass('hidden');
// slide-progress
$('.slide-progress .icon-fixed-width.icon-circle')
.removeClass('icon-circle').addClass('icon-circle-blank');
$('.slide-progress .icon-fixed-width[data-idx="'+idx+'"]')
.removeClass('icon-circle-blank').addClass('icon-circle');
// un hide target section
$('.web-form-page[data-idx="'+idx+'"]')
.removeClass('hidden')
.find(':input:first').focus();
}
// add row
$('.btn-add-row').on('click', function() {
var fieldname = $(this).attr('data-fieldname');
var grid = $('.web-form-grid[data-fieldname="'+fieldname+'"]');
var new_row = grid.find('.web-form-grid-row.hidden').clone()
.appendTo(grid.find('tbody'))
.attr('data-name', '')
.removeClass('hidden');
new_row.find('input').each(function() {
$(this)
.val($(this).attr('data-default') || "")
.removeClass('hasDatepicker')
.attr('id', '');
});
setup_date_picker(new_row);
return false;
});
// remove row
$('.web-form-grid').on('click', '.btn-remove', function() {
$(this).parents('.web-form-grid-row:first').addClass('hidden').remove();
frappe.form_dirty = true;
return false;
});
// get document data
var get_data = function() {
frappe.mandatory_missing_in_last_doc = [];
var doc = get_data_for_doctype($form, frappe.web_form_doctype);
doc.doctype = frappe.web_form_doctype;
if(frappe.doc_name) {
doc.name = frappe.doc_name;
}
frappe.mandatory_missing = frappe.mandatory_missing_in_last_doc;
// get data from child tables
$('.web-form-grid').each(function() {
var fieldname = $(this).attr('data-fieldname');
var doctype = $(this).attr('data-doctype');
doc[fieldname] = [];
// get data from each row
$(this).find('[data-child-row=1]').each(function() {
if(!$(this).hasClass('hidden')) {
frappe.mandatory_missing_in_last_doc = [];
var d = get_data_for_doctype($(this), doctype, true);
// set name of child record (if set)
var name = $(this).attr('data-name');
if(name) { d.name = name; }
// check if child table has value
var has_value = false;
for(key in d) {
if(typeof d[key]==='string') {
d[key] = d[key].trim();
}
if(d[key] !== null && d[key] !== undefined && d[key] !== '') {
has_value = true;
break;
}
}
// only add if any value is set
if(has_value) {
doc[fieldname].push(d);
frappe.mandatory_missing =
frappe.mandatory_missing.concat(frappe.mandatory_missing_in_last_doc);
}
}
});
});
return doc;
}
// get data from input elements
// for the given doctype
var get_data_for_doctype = function(parent, doctype) {
var out = {};
parent.find("[name][data-doctype='"+ doctype +"']").each(function() {
var $input = $(this);
var input_type = $input.attr("type");
var no_attachment = false;
if(input_type==="file") {
// save filedata dict as value
if($input.get(0).filedata) {
var val = $input.get(0).filedata;
} else {
// original value
var val = $input.attr('data-value');
if (!val) {
val = {'__no_attachment': 1}
no_attachment = true;
}
}
} else if(input_type==="checkbox") {
var val = $input.prop("checked") ? 1 : 0;
} else if($input.attr("data-fieldtype")==="Date") {
// convert from user format to YYYY-MM-DD
if($input.val()) {
var val = moment($input.val(), moment.defaultFormat).format('YYYY-MM-DD');
} else {
var val = null;
}
} else {
var val = $input.val();
}
if(typeof val==='string') {
val = val.trim();
}
if($input.attr("data-reqd")
&& (val===undefined || val===null || val==='' || no_attachment)) {
frappe.mandatory_missing_in_last_doc.push([$input.attr("data-label"),
$input.parents('.web-form-page:first').attr('data-label')]);
}
out[$input.attr("name")] = val;
});
return out;
}
function save(for_payment) {
if(window.saving)
return false;
window.saving = true;
frappe.form_dirty = false;
if(frappe.file_reading) {
window.saving = false;
frappe.msgprint(__("Uploading files please wait for a few seconds."));
return false;
}
var data = get_data();
if((!frappe.allow_incomplete || for_payment) && frappe.mandatory_missing.length) {
window.saving = false;
show_mandatory_missing();
return false;
}
frappe.call({
type: "POST",
method: "frappe.website.doctype.web_form.web_form.accept",
args: {
data: data,
web_form: frappe.web_form_name,
for_payment: for_payment
},
freeze: true,
btn: $form.find("[type='submit']"),
callback: function(data) {
if(!data.exc) {
frappe.doc_name = data.message;
if(frappe.success_message) {
$form.addClass("hide");
$(".comments, .introduction").addClass("hide");
scroll(0, 0);
set_message(frappe.success_message);
} else {
set_message(__('Saved'));
}
if(frappe.is_new) {
window.location.href = window.location.pathname + "?name=" + frappe.doc_name;
}
if(for_payment && data.message) {
window.location.href = data.message;
}
} else {
set_message(__('Not Saved'));
}
},
always: function() {
window.saving = false;
}
});
return true;
}
function show_mandatory_missing() {
var text = [], last_section = null;
frappe.mandatory_missing.forEach(function(d) {
if(last_section != d[1]) {
text.push('');
text.push(d[1].bold());
last_section = d[1];
}
text.push(d[0]);
});
frappe.msgprint(__('The following mandatory fields must be filled:<br>')
+ text.join('<br>'));
}
function set_message(msg) {
$(".form-message")
.html(msg)
.removeClass("hide");
setTimeout(function() {
$(".form-message").addClass('hide');
}, 5000);
}
// submit
$(".btn-form-submit").on("click", function() {
save();
return false;
});
// close button
$(".close").on("click", function() {
var name = $(this).attr("data-name");
if(name) {
frappe.call({
type:"POST",
method: "frappe.website.doctype.web_form.web_form.delete",
args: {
"web_form": "{{ name }}",
"name": name
},
callback: function(r) {
if(!r.exc) {
location.reload();
}
}
});
}
})
// setup datepicker in all inputs within the given element
var setup_date_picker = function(ele) {
var $dates = ele.find("[data-fieldtype='Date']");
var $date_times = ele.find("[data-fieldtype='Datetime']");
// setup date
if($dates.length) {
frappe.require("assets/frappe/js/lib/jquery/jquery-ui.min.js");
frappe.require("assets/frappe/js/lib/jquery/bootstrap_theme/jquery-ui.selected.css");
$dates.datepicker({
altFormat:'yy-mm-dd',
changeYear: true,
yearRange: "-70Y:+10Y",
dateFormat: frappe.datepicker_format,
});
// initialize dates from YYYY-MM-DD to user format
$dates.each(function() {
var val = $(this).attr('value');
if(val) {
$(this).val(moment(val, 'YYYY-MM-DD').format()).trigger('change');
}
});
}
// setup datetime
if($date_times.length) {
frappe.require("assets/frappe/js/lib/jquery/jquery.ui.slider.min.js");
frappe.require("assets/frappe/js/lib/jquery/jquery.ui.sliderAccess.js");
frappe.require("assets/frappe/js/lib/jquery/jquery.ui.timepicker-addon.css");
frappe.require("assets/frappe/js/lib/jquery/jquery.ui.timepicker-addon.js");
$date_times.datetimepicker({
altFormat:'yy-mm-dd',
changeYear: true,
yearRange: "-70Y:+10Y",
dateFormat: frappe.datepicker_format,
});
}
}
setup_date_picker($form);
});
{% if script is defined %}
{{ script }}
{% endif %}
</script>
{% endblock %}
{% block style %}
<style>
.introduction {
border-bottom: 1px solid #e1e9f0;
padding: 15px;
padding-top: 0px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 15px;
}
.form-group label {
font-weight: normal;
}
input[type='checkbox'] {
margin-top: 3px;
}
.checkbox label {
font-size: 12px;
}
.web-form-page, .web-form-page .section {
padding: 20px 0px;
}
.web-form-grid-row input, .web-form-grid-row select {
border: 0px;
padding: 0px;
}
.web-form-grid-row input:focus, .web-form-grid-row select:focus {
box-shadow: none;
}
.web-form-grid-row .form-group {
margin: 0px;
}
.slide-progress {
/*border-top: 1px solid #d1d8dd;*/
margin-top: -10px;
}
.slide-progress .icon-fixed-width {
vertical-align: middle;
margin-right: 9px;
padding-left: 2px;
cursor: pointer;
}
.slide-progress .icon-circle-blank {
font-size: 12px;
}
.slide-progress .icon-circle {
font-size: 14px;
}
{% if style is defined %}{{ style }}{% endif %}
</style>
{% endblock %}