').appendTo(this.parent);
- } else {
- this.$wrapper = $('
').appendTo(this.parent);
- }
- },
- toggle_label: function(show) {
- this.$wrapper.find(".control-label").toggleClass("hide", !show);
- },
- toggle_description: function(show) {
- this.$wrapper.find(".help-box").toggleClass("hide", !show);
- },
- set_input_areas: function() {
- if(this.only_input) {
- this.input_area = this.wrapper;
- } else {
- this.label_area = this.label_span = this.$wrapper.find("label").get(0);
- this.input_area = this.$wrapper.find(".control-input").get(0);
- // keep a separate display area to rendered formatted values
- // like links, currencies, HTMLs etc.
- this.disp_area = this.$wrapper.find(".control-value").get(0);
- }
- },
- set_max_width: function() {
- if(this.horizontal) {
- this.$wrapper.addClass("input-max-width");
- }
- },
-
- // update input value, label, description
- // display (show/hide/read-only),
- // mandatory style on refresh
- refresh_input: function() {
- var me = this;
- var make_input = function() {
- if(!me.has_input) {
- me.make_input();
- if(me.df.on_make) {
- me.df.on_make(me);
- }
- }
- };
-
- var update_input = function() {
- if(me.doctype && me.docname) {
- me.set_input(me.value);
- } else {
- me.set_input(me.value || null);
- }
- };
-
- if(me.disp_status != "None") {
- // refresh value
- if(me.doctype && me.docname) {
- me.value = frappe.model.get_value(me.doctype, me.docname, me.df.fieldname);
- }
-
- if(me.disp_status=="Write") {
- me.disp_area && $(me.disp_area).toggle(false);
- $(me.input_area).toggle(true);
- me.$input && me.$input.prop("disabled", false);
- make_input();
- update_input();
- } else {
- if(me.only_input) {
- make_input();
- update_input();
- } else {
- $(me.input_area).toggle(false);
- if (me.disp_area) {
- me.set_disp_area(me.value);
- $(me.disp_area).toggle(true);
- }
- }
- me.$input && me.$input.prop("disabled", true);
- }
-
- me.set_description();
- me.set_label();
- me.set_mandatory(me.value);
- me.set_bold();
- }
- },
-
- set_disp_area: function(value) {
- if(in_list(["Currency", "Int", "Float"], this.df.fieldtype)
- && (this.value === 0 || value === 0)) {
- // to set the 0 value in readonly for currency, int, float field
- value = 0;
- } else {
- value = this.value || value;
- }
- this.disp_area && $(this.disp_area)
- .html(frappe.format(value, this.df, {no_icon:true, inline:true},
- this.doc || (this.frm && this.frm.doc)));
- },
-
- bind_change_event: function() {
- var me = this;
- this.$input && this.$input.on("change", this.change || function(e) {
- me.parse_validate_and_set_in_model(me.get_input_value(), e);
- });
- },
- bind_focusout: function() {
- // on touchscreen devices, scroll to top
- // so that static navbar and page head don't overlap the input
- if (frappe.dom.is_touchscreen()) {
- var me = this;
- this.$input && this.$input.on("focusout", function() {
- if (frappe.dom.is_touchscreen()) {
- frappe.utils.scroll_to(me.$wrapper);
- }
- });
- }
- },
- set_label: function(label) {
- if(label) this.df.label = label;
-
- if(this.only_input || this.df.label==this._label)
- return;
-
- var icon = "";
- this.label_span.innerHTML = (icon ? '
' : "") +
- __(this.df.label) || " ";
- this._label = this.df.label;
- },
- set_description: function() {
- if(this.only_input || this.df.description===this._description)
- return;
- if(this.df.description) {
- this.$wrapper.find(".help-box").html(__(this.df.description));
- } else {
- this.set_empty_description();
- }
- this._description = this.df.description;
- },
- set_new_description: function(description) {
- this.$wrapper.find(".help-box").html(description);
- },
- set_empty_description: function() {
- this.$wrapper.find(".help-box").html("");
- },
- set_mandatory: function(value) {
- this.$wrapper.toggleClass("has-error", (this.df.reqd && is_null(value)) ? true : false);
- },
- set_bold: function() {
- if(this.$input) {
- this.$input.toggleClass("bold", !!(this.df.bold || this.df.reqd));
- }
- if(this.disp_area) {
- $(this.disp_area).toggleClass("bold", !!(this.df.bold || this.df.reqd));
- }
- }
-});
-
-frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
- html_element: "input",
- input_type: "text",
- make_input: function() {
- if(this.$input) return;
-
- this.$input = $("<"+ this.html_element +">")
- .attr("type", this.input_type)
- .attr("autocomplete", "off")
- .addClass("input-with-feedback form-control")
- .prependTo(this.input_area);
-
- if (in_list(['Data', 'Link', 'Dynamic Link', 'Password', 'Select', 'Read Only', 'Attach', 'Attach Image'],
- this.df.fieldtype)) {
- this.$input.attr("maxlength", this.df.length || 140);
- }
-
- this.set_input_attributes();
- this.input = this.$input.get(0);
- this.has_input = true;
- this.bind_change_event();
- this.bind_focusout();
-
- // somehow this event does not bubble up to document
- // after v7, if you can debug, remove this
- },
- set_input_attributes: function() {
- this.$input
- .attr("data-fieldtype", this.df.fieldtype)
- .attr("data-fieldname", this.df.fieldname)
- .attr("placeholder", this.df.placeholder || "");
- if(this.doctype) {
- this.$input.attr("data-doctype", this.doctype);
- }
- if(this.df.input_css) {
- this.$input.css(this.df.input_css);
- }
- if(this.df.input_class) {
- this.$input.addClass(this.df.input_class);
- }
- },
- set_input: function(value) {
- this.last_value = this.value;
- this.value = value;
- this.set_formatted_input(value);
- this.set_disp_area(value);
- this.set_mandatory && this.set_mandatory(value);
- },
- set_formatted_input: function(value) {
- this.$input && this.$input.val(this.format_for_input(value));
- },
- get_input_value: function() {
- return this.$input ? this.$input.val() : undefined;
- },
- format_for_input: function(val) {
- return val==null ? "" : val;
- },
- validate: function(v) {
- if(this.df.options == 'Phone') {
- if(v+''=='') {
- return '';
- }
- var v1 = '';
- // phone may start with + and must only have numbers later, '-' and ' ' are stripped
- v = v.replace(/ /g, '').replace(/-/g, '').replace(/\(/g, '').replace(/\)/g, '');
-
- // allow initial +,0,00
- if(v && v.substr(0,1)=='+') {
- v1 = '+'; v = v.substr(1);
- }
- if(v && v.substr(0,2)=='00') {
- v1 += '00'; v = v.substr(2);
- }
- if(v && v.substr(0,1)=='0') {
- v1 += '0'; v = v.substr(1);
- }
- v1 += cint(v) + '';
- return v1;
- } else if(this.df.options == 'Email') {
- if(v+''=='') {
- return '';
- }
-
- var email_list = frappe.utils.split_emails(v);
- if (!email_list) {
- // invalid email
- return '';
- } else {
- var invalid_email = false;
- email_list.forEach(function(email) {
- if (!validate_email(email)) {
- frappe.msgprint(__("Invalid Email: {0}", [email]));
- invalid_email = true;
- }
- });
-
- if (invalid_email) {
- // at least 1 invalid email
- return '';
- } else {
- // all good
- return v;
- }
- }
-
- } else {
- return v;
- }
- }
-});
-
-frappe.ui.form.ControlReadOnly = frappe.ui.form.ControlData.extend({
- get_status: function(explain) {
- var status = this._super(explain);
- if(status==="Write")
- status = "Read";
- return;
- },
-});
-
-frappe.ui.form.ControlPassword = frappe.ui.form.ControlData.extend({
- input_type: "password",
- make: function() {
- this._super();
- },
- make_input: function() {
- var me = this;
- this._super();
- this.$input.parent().append($('
'));
- this.$wrapper.find('.control-input-wrapper').append($('
'));
-
- this.indicator = this.$wrapper.find('.password-strength-indicator');
- this.message = this.$wrapper.find('.help-box');
-
- this.$input.on('input', () => {
- var $this = $(this);
- clearTimeout($this.data('timeout'));
- $this.data('timeout', setTimeout(() => {
- var txt = me.$input.val();
- me.get_password_strength(txt);
- }), 300);
- });
- },
- get_password_strength: function(value) {
- var me = this;
- frappe.call({
- type: 'GET',
- method: 'frappe.core.doctype.user.user.test_password_strength',
- args: {
- new_password: value || ''
- },
- callback: function(r) {
- if (r.message && r.message.entropy) {
- var score = r.message.score,
- feedback = r.message.feedback;
-
- feedback.crack_time_display = r.message.crack_time_display;
-
- var indicators = ['grey', 'red', 'orange', 'yellow', 'green'];
- me.set_strength_indicator(indicators[score]);
-
- }
- }
-
- });
- },
- set_strength_indicator: function(color) {
- var message = __("Include symbols, numbers and capital letters in the password");
- this.indicator.removeClass().addClass('password-strength-indicator indicator ' + color);
- this.message.html(message).removeClass('hidden');
- }
-});
-
-frappe.ui.form.ControlInt = frappe.ui.form.ControlData.extend({
- make: function() {
- this._super();
- // $(this.label_area).addClass('pull-right');
- // $(this.disp_area).addClass('text-right');
- },
- make_input: function() {
- var me = this;
- this._super();
- this.$input
- // .addClass("text-right")
- .on("focus", function() {
- setTimeout(function() {
- if(!document.activeElement) return;
- document.activeElement.value
- = me.validate(document.activeElement.value);
- document.activeElement.select();
- }, 100);
- return false;
- });
- },
- parse: function(value) {
- return cint(value, null);
- }
-});
-
-frappe.ui.form.ControlFloat = frappe.ui.form.ControlInt.extend({
- parse: function(value) {
- return isNaN(parseFloat(value)) ? null : flt(value, this.get_precision());
- },
-
- format_for_input: function(value) {
- var number_format;
- if (this.df.fieldtype==="Float" && this.df.options && this.df.options.trim()) {
- number_format = this.get_number_format();
- }
- var formatted_value = format_number(parseFloat(value), number_format, this.get_precision());
- return isNaN(parseFloat(value)) ? "" : formatted_value;
- },
-
- // even a float field can be formatted based on currency format instead of float format
- get_number_format: function() {
- var currency = frappe.meta.get_field_currency(this.df, this.get_doc());
- return get_number_format(currency);
- },
-
- get_precision: function() {
- // round based on field precision or float precision, else don't round
- return this.df.precision || cint(frappe.boot.sysdefaults.float_precision, null);
- }
-});
-
-frappe.ui.form.ControlCurrency = frappe.ui.form.ControlFloat.extend({
- format_for_input: function(value) {
- var formatted_value = format_number(parseFloat(value), this.get_number_format(), this.get_precision());
- return isNaN(parseFloat(value)) ? "" : formatted_value;
- },
-
- get_precision: function() {
- // always round based on field precision or currency's precision
- // this method is also called in this.parse()
- if (!this.df.precision) {
- if(frappe.boot.sysdefaults.currency_precision) {
- this.df.precision = frappe.boot.sysdefaults.currency_precision;
- } else {
- this.df.precision = get_number_format_info(this.get_number_format()).precision;
- }
- }
-
- return this.df.precision;
- }
-});
-
-frappe.ui.form.ControlPercent = frappe.ui.form.ControlFloat;
-
-frappe.ui.form.ControlColor = frappe.ui.form.ControlData.extend({
- make_input: function () {
- this._super();
- this.colors = [
- "#ffc4c4", "#ff8989", "#ff4d4d", "#a83333",
- "#ffe8cd", "#ffd19c", "#ffb868", "#a87945",
- "#ffd2c2", "#ffa685", "#ff7846", "#a85b5b",
- "#ffd7d7", "#ffb1b1", "#ff8989", "#a84f2e",
- "#fffacd", "#fff168", "#fff69c", "#a89f45",
- "#ebf8cc", "#d9f399", "#c5ec63", "#7b933d",
- "#cef6d1", "#9deca2", "#6be273", "#428b46",
- "#d2f8ed", "#a4f3dd", "#77ecca", "#49937e",
- "#d2f1ff", "#a6e4ff", "#78d6ff", "#4f8ea8",
- "#d2d2ff", "#a3a3ff", "#7575ff", "#4d4da8",
- "#dac7ff", "#b592ff", "#8e58ff", "#5e3aa8",
- "#f8d4f8", "#f3aaf0", "#ec7dea", "#934f92"
- ];
- this.make_color_input();
- },
- make_color_input: function () {
- this.$wrapper
- .find('.control-input-wrapper')
- .append(`
`);
- this.$color_pallete = this.$wrapper.find('.color-picker-pallete');
-
- var color_html = this.colors.map(this.get_color_box).join("");
- this.$color_pallete.append(color_html);
- this.$color_pallete.hide();
- this.bind_events();
- },
- get_color_box: function (hex) {
- return `
`;
- },
- set_formatted_input: function(value) {
- this._super(value);
-
- if(!value) value = '#ffffff';
- this.$input.css({
- "background-color": value
- });
- },
- bind_events: function () {
- var mousedown_happened = false;
- this.$wrapper.on("click", ".color-box", (e) => {
- mousedown_happened = false;
-
- var color_val = $(e.target).data("color");
- this.set_value(color_val);
- // set focus so that we can blur it later
- this.set_focus();
- });
-
- this.$wrapper.find(".color-box").mousedown(() => {
- mousedown_happened = true;
- });
-
- this.$input.on("focus", () => {
- this.$color_pallete.show();
- });
- this.$input.on("blur", () => {
- if (mousedown_happened) {
- // cancel the blur event
- mousedown_happened = false;
- } else {
- // blur event is okay
- $(this.$color_pallete).hide();
- }
- });
- },
- validate: function (value) {
- if(value === '') {
- return '';
- }
- var is_valid = /^#[0-9A-F]{6}$/i.test(value);
- if(is_valid) {
- return value;
- }
- frappe.msgprint(__("{0} is not a valid hex color", [value]));
- return null;
- }
-});
-
-frappe.ui.form.ControlDate = frappe.ui.form.ControlData.extend({
- make_input: function() {
- this._super();
- this.set_date_options();
- this.set_datepicker();
- this.set_t_for_today();
- },
- set_formatted_input: function(value) {
- this._super(value);
- if(!value) return;
-
- let should_refresh = this.last_value && this.last_value !== value;
-
- if (!should_refresh) {
- if(this.datepicker.selectedDates.length > 0) {
- // if date is selected but different from value, refresh
- const selected_date =
- moment(this.datepicker.selectedDates[0])
- .format(moment.defaultDateFormat);
- should_refresh = selected_date !== value;
- } else {
- // if datepicker has no selected date, refresh
- should_refresh = true;
- }
- }
-
- if(should_refresh) {
- this.datepicker.selectDate(frappe.datetime.str_to_obj(value));
- }
- },
- set_date_options: function() {
- var me = this;
- var lang = frappe.boot.user.language;
- if(!$.fn.datepicker.language[lang]) {
- lang = 'en';
- }
- this.today_text = __("Today");
- this.datepicker_options = {
- language: lang,
- autoClose: true,
- todayButton: frappe.datetime.now_date(true),
- dateFormat: (frappe.boot.sysdefaults.date_format || 'yyyy-mm-dd'),
- startDate: frappe.datetime.now_date(true),
- onSelect: () => {
- this.$input.trigger('change');
- },
- onShow: () => {
- this.datepicker.$datepicker
- .find('.datepicker--button:visible')
- .text(me.today_text);
-
- this.update_datepicker_position();
- }
- };
- },
- update_datepicker_position: function() {
- if(!this.frm) return;
- // show datepicker above or below the input
- // based on scroll position
- var window_height = $(window).height();
- var window_scroll_top = $(window).scrollTop();
- var el_offset_top = this.$input.offset().top + 280;
- var position = 'top left';
- if(window_height + window_scroll_top >= el_offset_top) {
- position = 'bottom left';
- }
- this.datepicker.update('position', position);
- },
- set_datepicker: function() {
- this.$input.datepicker(this.datepicker_options);
- this.datepicker = this.$input.data('datepicker');
- },
- set_t_for_today: function() {
- var me = this;
- this.$input.on("keydown", function(e) {
- if(e.which===84) { // 84 === t
- if(me.df.fieldtype=='Date') {
- me.set_value(frappe.datetime.nowdate());
- } if(me.df.fieldtype=='Datetime') {
- me.set_value(frappe.datetime.now_datetime());
- } if(me.df.fieldtype=='Time') {
- me.set_value(frappe.datetime.now_time());
- }
- return false;
- }
- });
- },
- parse: function(value) {
- if(value) {
- return frappe.datetime.user_to_str(value);
- }
- },
- format_for_input: function(value) {
- if(value) {
- return frappe.datetime.str_to_user(value);
- }
- return "";
- },
- validate: function(value) {
- if(value && !frappe.datetime.validate(value)) {
- frappe.msgprint(__("Date must be in format: {0}", [frappe.sys_defaults.date_format || "yyyy-mm-dd"]));
- return '';
- }
- return value;
- }
-});
-
-frappe.ui.form.ControlDatetime = frappe.ui.form.ControlDate.extend({
- set_date_options: function() {
- this._super();
- this.today_text = __("Now");
- $.extend(this.datepicker_options, {
- timepicker: true,
- timeFormat: "hh:ii:ss",
- todayButton: frappe.datetime.now_datetime(true)
- });
- },
- set_description: function() {
- const { description } = this.df;
- const { time_zone } = frappe.sys_defaults;
- if (!frappe.datetime.is_timezone_same()) {
- if (!description) {
- this.df.description = time_zone;
- } else if (!description.includes(time_zone)) {
- this.df.description += '
' + time_zone;
- }
- }
- this._super();
- }
-});
-
-frappe.ui.form.ControlTime = frappe.ui.form.ControlData.extend({
- make_input: function() {
- var me = this;
- this._super();
- this.$input.datepicker({
- language: "en",
- timepicker: true,
- onlyTimepicker: true,
- timeFormat: "hh:ii:ss",
- startDate: frappe.datetime.now_time(true),
- onSelect: function() {
- me.$input.trigger('change');
- },
- onShow: function() {
- $('.datepicker--button:visible').text(__('Now'));
- },
- todayButton: frappe.datetime.now_time(true)
- });
- this.datepicker = this.$input.data('datepicker');
- this.refresh();
- },
- set_input: function(value) {
- this._super(value);
- if(value
- && ((this.last_value && this.last_value !== this.value)
- || (!this.datepicker.selectedDates.length))) {
-
- var date_obj = frappe.datetime.moment_to_date_obj(moment(value, 'hh:mm:ss'));
- this.datepicker.selectDate(date_obj);
- }
- },
- set_description: function() {
- const { description } = this.df;
- const { time_zone } = frappe.sys_defaults;
- if (!frappe.datetime.is_timezone_same()) {
- if (!description) {
- this.df.description = time_zone;
- } else if (!description.includes(time_zone)) {
- this.df.description += '
' + time_zone;
- }
- }
- this._super();
- }
-});
-
-frappe.ui.form.ControlDateRange = frappe.ui.form.ControlData.extend({
- make_input: function() {
- this._super();
- this.set_date_options();
- this.set_datepicker();
- this.refresh();
- },
- set_date_options: function() {
- var me = this;
- this.datepicker_options = {
- language: "en",
- range: true,
- autoClose: true,
- toggleSelected: false
- };
- this.datepicker_options.dateFormat =
- (frappe.boot.sysdefaults.date_format || 'yyyy-mm-dd');
- this.datepicker_options.onSelect = function() {
- me.$input.trigger('change');
- };
- },
- set_datepicker: function() {
- this.$input.datepicker(this.datepicker_options);
- this.datepicker = this.$input.data('datepicker');
- },
- set_input: function(value, value2) {
- this.last_value = this.value;
- if (value && value2) {
- this.value = [value, value2];
- } else {
- this.value = value;
- }
- if (this.value) {
- let formatted = this.format_for_input(this.value[0], this.value[1]);
- this.$input && this.$input.val(formatted);
- } else {
- this.$input && this.$input.val("");
- }
- this.set_disp_area(value || '');
- this.set_mandatory && this.set_mandatory(value);
- },
- parse: function(value) {
- // replace the separator (which can be in user language) with comma
- const to = __('{0} to {1}').replace('{0}', '').replace('{1}', '');
- value = value.replace(to, ',');
-
- if(value && value.includes(',')) {
- var vals = value.split(',');
- var from_date = moment(frappe.datetime.user_to_obj(vals[0])).format('YYYY-MM-DD');
- var to_date = moment(frappe.datetime.user_to_obj(vals[vals.length-1])).format('YYYY-MM-DD');
- return [from_date, to_date];
- }
- },
- format_for_input: function(value1, value2) {
- if(value1 && value2) {
- value1 = frappe.datetime.str_to_user(value1);
- value2 = frappe.datetime.str_to_user(value2);
- return __("{0} to {1}").format([value1, value2]);
- }
- return "";
- }
-});
-
-frappe.ui.form.ControlText = frappe.ui.form.ControlData.extend({
- html_element: "textarea",
- horizontal: false,
- make_wrapper: function() {
- this._super();
- this.$wrapper.find(".like-disabled-input").addClass("for-description");
- },
- make_input: function() {
- this._super();
- this.$input.css({'height': '300px'});
- }
-});
-
-frappe.ui.form.ControlLongText = frappe.ui.form.ControlText;
-frappe.ui.form.ControlSmallText = frappe.ui.form.ControlText.extend({
- make_input: function() {
- this._super();
- this.$input.css({'height': '150px'});
- }
-});
-
-frappe.ui.form.ControlCheck = frappe.ui.form.ControlData.extend({
- input_type: "checkbox",
- make_wrapper: function() {
- this.$wrapper = $('
').appendTo(this.parent);
- },
- set_input_areas: function() {
- this.label_area = this.label_span = this.$wrapper.find(".label-area").get(0);
- this.input_area = this.$wrapper.find(".input-area").get(0);
- this.disp_area = this.$wrapper.find(".disp-area").get(0);
- },
- make_input: function() {
- this._super();
- this.$input.removeClass("form-control");
- },
- get_input_value: function() {
- return this.input && this.input.checked ? 1 : 0;
- },
- validate: function(value) {
- return cint(value);
- },
- set_input: function(value) {
- if(this.input) {
- this.input.checked = (value ? 1 : 0);
- }
- this.last_value = value;
- this.set_mandatory(value);
- this.set_disp_area(value);
- }
-});
-
-frappe.ui.form.ControlButton = frappe.ui.form.ControlData.extend({
- make_input: function() {
- var me = this;
- this.$input = $('