diff --git a/frappe/public/js/frappe/form/multi_select_dialog.js b/frappe/public/js/frappe/form/multi_select_dialog.js index cdd385a6ea..41b87e0207 100644 --- a/frappe/public/js/frappe/form/multi_select_dialog.js +++ b/frappe/public/js/frappe/form/multi_select_dialog.js @@ -1,110 +1,62 @@ -// Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors -// MIT License. See license.txt - -frappe.ui.form.MultiSelectDialog = Class.extend({ - init: function(opts) { - /* Options: doctype, target, setters, get_query, action */ - $.extend(this, opts); - +frappe.ui.form.MultiSelectDialog = class MultiSelectDialog { + constructor(opts) { + /* Options: doctype, target, setters, get_query, action, add_filters_group, data_fields, primary_action_label */ + Object.assign(this, opts); var me = this; - if(this.doctype!="[Select]") { - frappe.model.with_doctype(this.doctype, function(r) { + if (this.doctype != "[Select]") { + frappe.model.with_doctype(this.doctype, function () { me.make(); }); } else { this.make(); } - }, - make: function() { - let me = this; + } + make() { + let me = this; this.page_length = 20; this.start = 0; + let fields = this.get_primary_filters(); - let fields = [ - { - fieldtype: "Data", - label: __("Search Term"), - fieldname: "search_term" - }, - { - fieldtype: "Column Break" - } - ]; - let count = 0; - if(!this.date_field) { - this.date_field = "transaction_date"; - } - - // setters can be defined as a dict or a list of fields - // setters define the additional filters that get applied - // for selection - - // CASE 1: DocType name and fieldname is the same, example "customer" and "customer" - // setters define the filters applied in the modal - // if the fieldnames and doctypes are consistently named, - // pass a dict with the setter key and value, for example - // {customer: [customer_name]} - - // CASE 2: if the fieldname of the target is different, - // then pass a list of fields with appropriate fieldname - - if($.isArray(this.setters)) { - for (let df of this.setters) { - fields.push(df, {fieldtype: "Column Break"}); - } - } else { - Object.keys(this.setters).forEach(function(setter) { - fields.push({ - fieldtype: me.target.fields_dict[setter].df.fieldtype, - label: me.target.fields_dict[setter].df.label, - fieldname: setter, - options: me.target.fields_dict[setter].df.options, - default: me.setters[setter] - }); - if (count++ < Object.keys(me.setters).length) { - fields.push({fieldtype: "Column Break"}); - } - }); - } - + // Make results area fields = fields.concat([ - { - "fieldname":"date_range", - "label": __("Date Range"), - "fieldtype": "DateRange", - }, - { fieldtype: "Section Break" }, { fieldtype: "HTML", fieldname: "results_area" }, - { fieldtype: "Button", fieldname: "more_btn", label: __("More"), - click: function(){ - me.start += 20; - frappe.flags.auto_scroll = true; - me.get_results(); + { + fieldtype: "Button", fieldname: "more_btn", label: __("More"), + click: () => { + this.start += 20; + this.get_results(); } } ]); - let doctype_plural = !this.doctype.endsWith('y') ? this.doctype + 's' - : this.doctype.slice(0, -1) + 'ies'; + // Custom Data Fields + if (this.data_fields) { + fields.push({ fieldtype: "Section Break" }); + fields = fields.concat(this.data_fields); + } + + let doctype_plural = this.doctype.plural(); + this.dialog = new frappe.ui.Dialog({ - title: __("Select {0}", [(this.doctype=='[Select]') ? __("value") : __(doctype_plural)]), + title: __("Select {0}", [(this.doctype == '[Select]') ? __("value") : __(doctype_plural)]), fields: fields, - primary_action_label: __("Get Items"), + primary_action_label: this.primary_action_label || __("Get Items"), secondary_action_label: __("Make {0}", [me.doctype]), - primary_action: function() { - me.action(me.get_checked_values(), me.args); + primary_action: function () { + let filters_data = me.get_custom_filters(); + me.action(me.get_checked_values(), cur_dialog.get_values(), me.args, filters_data); }, - secondary_action: function(e) { + secondary_action: function (e) { // If user wants to close the modal if (e) { frappe.route_options = {}; - if($.isArray(me.setters)) { + if (Array.isArray(me.setters)) { for (let df of me.setters) { frappe.route_options[df.fieldname] = me.dialog.fields_dict[df.fieldname].get_value() || undefined; } } else { - Object.keys(me.setters).forEach(function(setter) { + Object.keys(me.setters).forEach(function (setter) { frappe.route_options[setter] = me.dialog.fields_dict[setter].get_value() || undefined; }); } @@ -114,6 +66,10 @@ frappe.ui.form.MultiSelectDialog = Class.extend({ } }); + if (this.add_filters_group) { + this.make_filter_area(); + } + this.$parent = $(this.dialog.body); this.$wrapper = this.dialog.fields_dict.results_area.$wrapper.append(`
`); @@ -126,9 +82,89 @@ frappe.ui.form.MultiSelectDialog = Class.extend({ this.bind_events(); this.get_results(); this.dialog.show(); - }, + } - bind_events: function() { + get_primary_filters() { + let fields = []; + + let columns = new Array(3); + + // Hack for three column layout + // To add column break + columns[0] = [ + { + fieldtype: "Data", + label: __("Search"), + fieldname: "search_term" + } + ]; + columns[1] = []; + columns[2] = []; + + Object.keys(this.setters).forEach((setter, index) => { + let df_prop = frappe.meta.docfield_map[this.doctype][setter]; + + // Index + 1 to start filling from index 1 + // Since Search is a standrd field already pushed + columns[(index + 1) % 3].push({ + fieldtype: df_prop.fieldtype, + label: df_prop.label, + fieldname: setter, + options: df_prop.options, + default: this.setters[setter] + }); + }); + + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal + if (Object.seal) { + Object.seal(columns); + // now a is a fixed-size array with mutable entries + } + + fields = [ + ...columns[0], + { fieldtype: "Column Break" }, + ...columns[1], + { fieldtype: "Column Break" }, + ...columns[2], + { fieldtype: "Section Break", fieldname: "primary_filters_sb" } + ]; + + if (this.add_filters_group) { + fields.push( + { + fieldtype: 'HTML', + fieldname: 'filter_area', + } + ); + } + + return fields; + } + + make_filter_area() { + this.filter_group = new frappe.ui.FilterGroup({ + parent: this.dialog.get_field('filter_area').$wrapper, + doctype: this.doctype, + on_change: () => { + this.get_results(); + } + }); + } + + get_custom_filters() { + if (this.add_filters_group && this.filter_group) { + return this.filter_group.get_filters().reduce((acc, filter) => { + return Object.assign(acc, { + [filter[1]]: [filter[2], filter[3]] + }); + }, {}); + } else { + return []; + } + } + + bind_events() { let me = this; this.$results.on('click', '.list-item-container', function (e) { @@ -136,48 +172,44 @@ frappe.ui.form.MultiSelectDialog = Class.extend({ $(this).find(':checkbox').trigger('click'); } }); + this.$results.on('click', '.list-item--head :checkbox', (e) => { this.$results.find('.list-item-container .list-row-check') .prop("checked", ($(e.target).is(':checked'))); }); - this.$parent.find('.input-with-feedback').on('change', (e) => { + this.$parent.find('.input-with-feedback').on('change', () => { frappe.flags.auto_scroll = false; this.get_results(); }); - this.$parent.find('[data-fieldname="date_range"]').on('blur', (e) => { - frappe.flags.auto_scroll = false; - this.get_results(); - }); - - this.$parent.find('[data-fieldname="search_term"]').on('input', (e) => { + this.$parent.find('[data-fieldtype="Data"]').on('input', () => { var $this = $(this); clearTimeout($this.data('timeout')); - $this.data('timeout', setTimeout(function() { + $this.data('timeout', setTimeout(function () { frappe.flags.auto_scroll = false; me.empty_list(); me.get_results(); }, 300)); }); - }, + } - get_checked_values: function() { + get_checked_values() { // Return name of checked value. - return this.$results.find('.list-item-container').map(function() { - if ($(this).find('.list-row-check:checkbox:checked').length > 0 ) { + return this.$results.find('.list-item-container').map(function () { + if ($(this).find('.list-row-check:checkbox:checked').length > 0) { return $(this).attr('data-item-name'); } }).get(); - }, + } - get_checked_items: function() { + get_checked_items() { // Return checked items with all the column values. let checked_values = this.get_checked_values(); return this.results.filter(res => checked_values.includes(res.name)); - }, + } - make_list_row: function(result={}) { + make_list_row(result = {}) { var me = this; // Make a head row by default (if result not passed) let head = Object.keys(result).length === 0; @@ -185,26 +217,17 @@ frappe.ui.form.MultiSelectDialog = Class.extend({ let contents = ``; let columns = ["name"]; - if($.isArray(this.setters)) { - for (let df of this.setters) { - columns.push(df.fieldname); - } - } else { - columns = columns.concat(Object.keys(this.setters)); - } - columns.push("Date"); + columns = columns.concat(Object.keys(this.setters)); - columns.forEach(function(column) { + columns.forEach(function (column) { contents += `