PageRenderTime 59ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/addons/web/static/src/js/views/search_view.js

https://gitlab.com/thanhchatvn/cloud-odoo
JavaScript | 960 lines | 781 code | 39 blank | 140 comment | 119 complexity | 60f1f61e7b0fad603666e1d3bf829f4d MD5 | raw file
  1. odoo.define('web.SearchView', function (require) {
  2. "use strict";
  3. var AutoComplete = require('web.AutoComplete');
  4. var core = require('web.core');
  5. var FavoriteMenu = require('web.FavoriteMenu');
  6. var FilterMenu = require('web.FilterMenu');
  7. var GroupByMenu = require('web.GroupByMenu');
  8. var Model = require('web.DataModel');
  9. var pyeval = require('web.pyeval');
  10. var search_inputs = require('web.search_inputs');
  11. var utils = require('web.utils');
  12. var Widget = require('web.Widget');
  13. var Backbone = window.Backbone;
  14. var FacetValue = Backbone.Model.extend({});
  15. var FacetValues = Backbone.Collection.extend({
  16. model: FacetValue
  17. });
  18. var Facet = Backbone.Model.extend({
  19. initialize: function (attrs) {
  20. var values = attrs.values;
  21. delete attrs.values;
  22. Backbone.Model.prototype.initialize.apply(this, arguments);
  23. this.values = new FacetValues(values || []);
  24. this.values.on('add remove change reset', function (_, options) {
  25. this.trigger('change', this, options);
  26. }, this);
  27. },
  28. get: function (key) {
  29. if (key !== 'values') {
  30. return Backbone.Model.prototype.get.call(this, key);
  31. }
  32. return this.values.toJSON();
  33. },
  34. set: function (key, value) {
  35. if (key !== 'values') {
  36. return Backbone.Model.prototype.set.call(this, key, value);
  37. }
  38. this.values.reset(value);
  39. },
  40. toJSON: function () {
  41. var out = {};
  42. var attrs = this.attributes;
  43. for(var att in attrs) {
  44. if (!attrs.hasOwnProperty(att) || att === 'field') {
  45. continue;
  46. }
  47. out[att] = attrs[att];
  48. }
  49. out.values = this.values.toJSON();
  50. return out;
  51. }
  52. });
  53. var SearchQuery = Backbone.Collection.extend({
  54. model: Facet,
  55. initialize: function () {
  56. Backbone.Collection.prototype.initialize.apply(
  57. this, arguments);
  58. this.on('change', function (facet) {
  59. if(!facet.values.isEmpty()) { return; }
  60. this.remove(facet, {silent: true});
  61. }, this);
  62. },
  63. add: function (values, options) {
  64. options = options || {};
  65. if (!values) {
  66. values = [];
  67. } else if (!(values instanceof Array)) {
  68. values = [values];
  69. }
  70. _(values).each(function (value) {
  71. var model = this._prepareModel(value, options);
  72. var previous = this.detect(function (facet) {
  73. return facet.get('category') === model.get('category') &&
  74. facet.get('field') === model.get('field');
  75. });
  76. if (previous) {
  77. previous.values.add(model.get('values'), _.omit(options, 'at', 'merge'));
  78. return;
  79. }
  80. Backbone.Collection.prototype.add.call(this, model, options);
  81. }, this);
  82. // warning: in backbone 1.0+ add is supposed to return the added models,
  83. // but here toggle may delegate to add and return its value directly.
  84. // return value of neither seems actually used but should be tested
  85. // before change, probably
  86. return this;
  87. },
  88. toggle: function (value, options) {
  89. options = options || {};
  90. var facet = this.detect(function (facet) {
  91. return facet.get('category') === value.category
  92. && facet.get('field') === value.field;
  93. });
  94. if (!facet) {
  95. return this.add(value, options);
  96. }
  97. var changed = false;
  98. _(value.values).each(function (val) {
  99. var already_value = facet.values.detect(function (v) {
  100. return v.get('value') === val.value
  101. && v.get('label') === val.label;
  102. });
  103. // toggle value
  104. if (already_value) {
  105. facet.values.remove(already_value, {silent: true});
  106. } else {
  107. facet.values.add(val, {silent: true});
  108. }
  109. changed = true;
  110. });
  111. // "Commit" changes to values array as a single call, so observers of
  112. // change event don't get misled by intermediate incomplete toggling
  113. // states
  114. facet.trigger('change', facet);
  115. return this;
  116. }
  117. });
  118. var InputView = Widget.extend({
  119. template: 'SearchView.InputView',
  120. events: {
  121. focus: function () { this.trigger('focused', this); },
  122. blur: function () { this.$el.text(''); this.trigger('blurred', this); },
  123. keydown: 'onKeydown',
  124. paste: 'onPaste',
  125. },
  126. getSelection: function () {
  127. this.el.normalize();
  128. // get Text node
  129. var root = this.el.childNodes[0];
  130. if (!root || !root.textContent) {
  131. // if input does not have a child node, or the child node is an
  132. // empty string, then the selection can only be (0, 0)
  133. return {start: 0, end: 0};
  134. }
  135. var range = window.getSelection().getRangeAt(0);
  136. // In Firefox, depending on the way text is selected (drag, double- or
  137. // triple-click) the range may start or end on the parent of the
  138. // selected text node‽ Check for this condition and fixup the range
  139. // note: apparently with C-a this can go even higher?
  140. if (range.startContainer === this.el && range.startOffset === 0) {
  141. range.setStart(root, 0);
  142. }
  143. if (range.endContainer === this.el && range.endOffset === 1) {
  144. range.setEnd(root, root.length);
  145. }
  146. utils.assert(range.startContainer === root,
  147. "selection should be in the input view");
  148. utils.assert(range.endContainer === root,
  149. "selection should be in the input view");
  150. return {
  151. start: range.startOffset,
  152. end: range.endOffset
  153. };
  154. },
  155. onKeydown: function (e) {
  156. this.el.normalize();
  157. var sel;
  158. switch (e.which) {
  159. // Do not insert newline, but let it bubble so searchview can use it
  160. case $.ui.keyCode.ENTER:
  161. e.preventDefault();
  162. break;
  163. // FIXME: may forget content if non-empty but caret at index 0, ok?
  164. case $.ui.keyCode.BACKSPACE:
  165. sel = this.getSelection();
  166. if (sel.start === 0 && sel.start === sel.end) {
  167. e.preventDefault();
  168. var preceding = this.getParent().siblingSubview(this, -1);
  169. if (preceding && (preceding instanceof FacetView)) {
  170. preceding.model.destroy();
  171. }
  172. }
  173. break;
  174. // let left/right events propagate to view if caret is at input border
  175. // and not a selection
  176. case $.ui.keyCode.LEFT:
  177. sel = this.getSelection();
  178. if (sel.start !== 0 || sel.start !== sel.end) {
  179. e.stopPropagation();
  180. }
  181. break;
  182. case $.ui.keyCode.RIGHT:
  183. sel = this.getSelection();
  184. var len = this.$el.text().length;
  185. if (sel.start !== len || sel.start !== sel.end) {
  186. e.stopPropagation();
  187. }
  188. break;
  189. }
  190. },
  191. setCursorAtEnd: function () {
  192. this.el.normalize();
  193. var sel = window.getSelection();
  194. sel.removeAllRanges();
  195. var range = document.createRange();
  196. // in theory, range.selectNodeContents should work here. In practice,
  197. // MSIE9 has issues from time to time, instead of selecting the inner
  198. // text node it would select the reference node instead (e.g. in demo
  199. // data, company news, copy across the "Company News" link + the title,
  200. // from about half the link to half the text, paste in search box then
  201. // hit the left arrow key, getSelection would blow up).
  202. //
  203. // Explicitly selecting only the inner text node (only child node
  204. // since we've normalized the parent) avoids the issue
  205. range.selectNode(this.el.childNodes[0]);
  206. range.collapse(false);
  207. sel.addRange(range);
  208. },
  209. onPaste: function () {
  210. this.el.normalize();
  211. // In MSIE and Webkit, it is possible to get various representations of
  212. // the clipboard data at this point e.g.
  213. // window.clipboardData.getData('Text') and
  214. // event.clipboardData.getData('text/plain') to ensure we have a plain
  215. // text representation of the object (and probably ensure the object is
  216. // pastable as well, so nobody puts an image in the search view)
  217. // (nb: since it's not possible to alter the content of the clipboard
  218. // — at least in Webkit — to ensure only textual content is available,
  219. // using this would require 1. getting the text data; 2. manually
  220. // inserting the text data into the content; and 3. cancelling the
  221. // paste event)
  222. //
  223. // But Firefox doesn't support the clipboard API (as of FF18)
  224. // although it correctly triggers the paste event (Opera does not even
  225. // do that) => implement lowest-denominator system where onPaste
  226. // triggers a followup "cleanup" pass after the data has been pasted
  227. setTimeout(function () {
  228. // Read text content (ignore pasted HTML)
  229. var data = this.$el.text();
  230. if (!data)
  231. return;
  232. // paste raw text back in
  233. this.$el.empty().text(data);
  234. this.el.normalize();
  235. // Set the cursor at the end of the text, so the cursor is not lost
  236. // in some kind of error-spawning limbo.
  237. this.setCursorAtEnd();
  238. }.bind(this), 0);
  239. }
  240. });
  241. var FacetView = Widget.extend({
  242. template: 'SearchView.FacetView',
  243. events: {
  244. 'focus': function () { this.trigger('focused', this); },
  245. 'blur': function () { this.trigger('blurred', this); },
  246. 'click': function (e) {
  247. if ($(e.target).is('.oe_facet_remove')) {
  248. this.model.destroy();
  249. return false;
  250. }
  251. this.$el.focus();
  252. e.stopPropagation();
  253. },
  254. 'keydown': function (e) {
  255. var keys = $.ui.keyCode;
  256. switch (e.which) {
  257. case keys.BACKSPACE:
  258. case keys.DELETE:
  259. this.model.destroy();
  260. return false;
  261. }
  262. }
  263. },
  264. init: function (parent, model) {
  265. this._super(parent);
  266. this.model = model;
  267. this.model.on('change', this.model_changed, this);
  268. },
  269. destroy: function () {
  270. this.model.off('change', this.model_changed, this);
  271. this._super();
  272. },
  273. start: function () {
  274. var self = this;
  275. var $e = this.$('> span:last-child');
  276. return $.when(this._super()).then(function () {
  277. return $.when.apply(null, self.model.values.map(function (value) {
  278. return new FacetValueView(self, value).appendTo($e);
  279. }));
  280. });
  281. },
  282. model_changed: function () {
  283. this.$el.text(this.$el.text() + '*');
  284. }
  285. });
  286. var FacetValueView = Widget.extend({
  287. template: 'SearchView.FacetView.Value',
  288. init: function (parent, model) {
  289. this._super(parent);
  290. this.model = model;
  291. this.model.on('change', this.model_changed, this);
  292. },
  293. destroy: function () {
  294. this.model.off('change', this.model_changed, this);
  295. this._super();
  296. },
  297. model_changed: function () {
  298. this.$el.text(this.$el.text() + '*');
  299. }
  300. });
  301. var SearchView = Widget.extend(/** @lends instance.web.SearchView# */{
  302. template: "SearchView",
  303. events: {
  304. // focus last input if view itself is clicked
  305. 'click': function (e) {
  306. if (e.target === this.$('.oe_searchview_facets')[0]) {
  307. this.$('.oe_searchview_input:last').focus();
  308. }
  309. },
  310. // search button
  311. 'click div.oe_searchview_search': function (e) {
  312. e.stopImmediatePropagation();
  313. this.do_search();
  314. },
  315. 'click .oe_searchview_unfold_drawer': function (e) {
  316. e.stopImmediatePropagation();
  317. $(e.target).toggleClass('fa-caret-down fa-caret-up');
  318. localStorage.visible_search_menu = (localStorage.visible_search_menu !== 'true');
  319. this.toggle_buttons();
  320. },
  321. 'keydown .oe_searchview_input, .oe_searchview_facet': function (e) {
  322. switch(e.which) {
  323. case $.ui.keyCode.LEFT:
  324. this.focusPreceding(e.target);
  325. e.preventDefault();
  326. break;
  327. case $.ui.keyCode.RIGHT:
  328. if (!this.autocomplete.is_expandable()) {
  329. this.focusFollowing(e.target);
  330. }
  331. e.preventDefault();
  332. break;
  333. }
  334. },
  335. 'autocompleteopen': function () {
  336. this.$el.autocomplete('widget').css('z-index', 9999);
  337. },
  338. },
  339. /**
  340. * @constructs instance.web.SearchView
  341. * @extends instance.web.Widget
  342. *
  343. * @param parent
  344. * @param dataset
  345. * @param view_id
  346. * @param defaults
  347. * @param {Object} [options]
  348. * @param {Boolean} [options.hidden=false] hide the search view
  349. * @param {Boolean} [options.disable_custom_filters=false] do not load custom filters from ir.filters
  350. */
  351. init: function(parent, dataset, view_id, defaults, options) {
  352. this.options = _.defaults(options || {}, {
  353. hidden: false,
  354. disable_filters: false,
  355. disable_groupby: false,
  356. disable_favorites: false,
  357. disable_custom_filters: false,
  358. });
  359. this._super(parent);
  360. this.query = undefined;
  361. this.dataset = dataset;
  362. this.view_id = view_id;
  363. this.title = options.action && options.action.name;
  364. this.search_fields = [];
  365. this.filters = [];
  366. this.groupbys = [];
  367. this.visible_filters = (localStorage.visible_search_menu === 'true');
  368. this.input_subviews = []; // for user input in searchbar
  369. this.defaults = defaults || {};
  370. this.headless = this.options.hidden && _.isEmpty(this.defaults);
  371. this.$buttons = this.options.$buttons;
  372. this.filter_menu = undefined;
  373. this.groupby_menu = undefined;
  374. this.favorite_menu = undefined;
  375. this.action_id = this.options && this.options.action && this.options.action.id;
  376. },
  377. start: function() {
  378. if (this.headless) {
  379. this.do_hide();
  380. }
  381. this.toggle_visibility(false);
  382. this.$facets_container = this.$('div.oe_searchview_facets');
  383. this.setup_global_completion();
  384. this.query = new SearchQuery()
  385. .on('add change reset remove', this.proxy('do_search'))
  386. .on('change', this.proxy('renderChangedFacets'))
  387. .on('add reset remove', this.proxy('renderFacets'));
  388. var load_view = this.dataset._model.fields_view_get({
  389. view_id: this.view_id,
  390. view_type: 'search',
  391. context: this.dataset.get_context(),
  392. });
  393. this.$('.oe_searchview_unfold_drawer')
  394. .toggleClass('fa-caret-down', !this.visible_filters)
  395. .toggleClass('fa-caret-up', this.visible_filters);
  396. return this.alive($.when(this._super(), this.alive(load_view).then(this.view_loaded.bind(this))));
  397. },
  398. get_title: function() {
  399. return this.title;
  400. },
  401. view_loaded: function (r) {
  402. var menu_defs = [];
  403. this.fields_view_get = r;
  404. this.view_id = this.view_id || r.view_id;
  405. this.prepare_search_inputs();
  406. if (this.$buttons) {
  407. var fields_def = new Model(this.dataset.model).call('fields_get', {
  408. context: this.dataset.get_context()
  409. });
  410. if (!this.options.disable_filters) {
  411. this.filter_menu = new FilterMenu(this, this.filters, fields_def);
  412. menu_defs.push(this.filter_menu.appendTo(this.$buttons));
  413. }
  414. if (!this.options.disable_groupby) {
  415. this.groupby_menu = new GroupByMenu(this, this.groupbys, fields_def);
  416. menu_defs.push(this.groupby_menu.appendTo(this.$buttons));
  417. }
  418. if (!this.options.disable_favorites) {
  419. this.favorite_menu = new FavoriteMenu(this, this.query, this.dataset.model, this.action_id);
  420. menu_defs.push(this.favorite_menu.appendTo(this.$buttons));
  421. }
  422. }
  423. return $.when.apply($, menu_defs).then(this.proxy('set_default_filters'));
  424. },
  425. set_default_filters: function () {
  426. var self = this,
  427. default_custom_filter = this.$buttons && this.favorite_menu.get_default_filter();
  428. if (!self.options.disable_custom_filters && default_custom_filter) {
  429. return this.favorite_menu.toggle_filter(default_custom_filter, true);
  430. }
  431. if (!_.isEmpty(this.defaults)) {
  432. var inputs = this.search_fields.concat(this.filters, this.groupbys),
  433. defaults = _.invoke(inputs, 'facet_for_defaults', this.defaults);
  434. return $.when.apply(null, defaults).then(function () {
  435. self.query.reset(_(arguments).compact(), {preventSearch: true});
  436. });
  437. }
  438. this.query.reset([], {preventSearch: true});
  439. return $.when();
  440. },
  441. /**
  442. * Performs the search view collection of widget data.
  443. *
  444. * If the collection went well (all fields are valid), then triggers
  445. * :js:func:`instance.web.SearchView.on_search`.
  446. *
  447. * If at least one field failed its validation, triggers
  448. * :js:func:`instance.web.SearchView.on_invalid` instead.
  449. *
  450. * @param [_query]
  451. * @param {Object} [options]
  452. */
  453. do_search: function (_query, options) {
  454. if (options && options.preventSearch) {
  455. return;
  456. }
  457. var search = this.build_search_data();
  458. this.trigger('search_data', search.domains, search.contexts, search.groupbys);
  459. },
  460. /**
  461. * Extract search data from the view's facets.
  462. *
  463. * Result is an object with 3 (own) properties:
  464. *
  465. * domains
  466. * Array of domains
  467. * contexts
  468. * Array of contexts
  469. * groupbys
  470. * Array of domains, in groupby order rather than view order
  471. *
  472. * @return {Object}
  473. */
  474. build_search_data: function () {
  475. var domains = [], contexts = [], groupbys = [];
  476. this.query.each(function (facet) {
  477. var field = facet.get('field');
  478. var domain = field.get_domain(facet);
  479. if (domain) {
  480. domains.push(domain);
  481. }
  482. var context = field.get_context(facet);
  483. if (context) {
  484. contexts.push(context);
  485. }
  486. var group_by = field.get_groupby(facet);
  487. if (group_by) {
  488. groupbys.push.apply(groupbys, group_by);
  489. }
  490. });
  491. return {
  492. domains: domains,
  493. contexts: contexts,
  494. groupbys: groupbys,
  495. };
  496. },
  497. toggle_visibility: function (is_visible) {
  498. this.do_toggle(!this.headless && is_visible);
  499. if (this.$buttons) {
  500. this.$buttons.toggle(!this.headless && is_visible && this.visible_filters);
  501. }
  502. if (!this.headless && is_visible) {
  503. this.$('div.oe_searchview_input').last().focus();
  504. }
  505. },
  506. toggle_buttons: function (is_visible) {
  507. this.visible_filters = is_visible || !this.visible_filters;
  508. if (this.$buttons) {
  509. this.$buttons.toggle(this.visible_filters);
  510. }
  511. },
  512. /**
  513. * Sets up search view's view-wide auto-completion widget
  514. */
  515. setup_global_completion: function () {
  516. var self = this;
  517. this.autocomplete = new AutoComplete(this, {
  518. source: this.proxy('complete_global_search'),
  519. select: this.proxy('select_completion'),
  520. get_search_string: function () {
  521. return self.$('div.oe_searchview_input').text();
  522. },
  523. });
  524. this.autocomplete.appendTo(this.$el);
  525. },
  526. /**
  527. * Provide auto-completion result for req.term (an array to `resp`)
  528. *
  529. * @param {Object} req request to complete
  530. * @param {String} req.term searched term to complete
  531. * @param {Function} resp response callback
  532. */
  533. complete_global_search: function (req, resp) {
  534. var inputs = this.search_fields.concat(this.filters, this.groupbys);
  535. $.when.apply(null, _(inputs).chain()
  536. .filter(function (input) { return input.visible(); })
  537. .invoke('complete', req.term)
  538. .value()).then(function () {
  539. resp(_(arguments).chain()
  540. .compact()
  541. .flatten(true)
  542. .value());
  543. });
  544. },
  545. /**
  546. * Action to perform in case of selection: create a facet (model)
  547. * and add it to the search collection
  548. *
  549. * @param {Object} e selection event, preventDefault to avoid setting value on object
  550. * @param {Object} ui selection information
  551. * @param {Object} ui.item selected completion item
  552. */
  553. select_completion: function (e, ui) {
  554. e.preventDefault();
  555. var input_index = _(this.input_subviews).indexOf(
  556. this.subviewForRoot(
  557. this.$('div.oe_searchview_input:focus')[0]));
  558. this.query.add(ui.item.facet, {at: input_index / 2});
  559. },
  560. subviewForRoot: function (subview_root) {
  561. return _(this.input_subviews).detect(function (subview) {
  562. return subview.$el[0] === subview_root;
  563. });
  564. },
  565. siblingSubview: function (subview, direction, wrap_around) {
  566. var index = _(this.input_subviews).indexOf(subview) + direction;
  567. if (wrap_around && index < 0) {
  568. index = this.input_subviews.length - 1;
  569. } else if (wrap_around && index >= this.input_subviews.length) {
  570. index = 0;
  571. }
  572. return this.input_subviews[index];
  573. },
  574. focusPreceding: function (subview_root) {
  575. return this.siblingSubview(
  576. this.subviewForRoot(subview_root), -1, true)
  577. .$el.focus();
  578. },
  579. focusFollowing: function (subview_root) {
  580. return this.siblingSubview(
  581. this.subviewForRoot(subview_root), +1, true)
  582. .$el.focus();
  583. },
  584. /**
  585. * @param {openerp.web.search.SearchQuery | undefined} Undefined if event is change
  586. * @param {openerp.web.search.Facet}
  587. * @param {Object} [options]
  588. */
  589. renderFacets: function (collection, model, options) {
  590. var self = this;
  591. var started = [];
  592. _.invoke(this.input_subviews, 'destroy');
  593. this.input_subviews = [];
  594. var i = new InputView(this);
  595. started.push(i.appendTo(this.$facets_container));
  596. this.input_subviews.push(i);
  597. this.query.each(function (facet) {
  598. var f = new FacetView(this, facet);
  599. started.push(f.appendTo(self.$facets_container));
  600. self.input_subviews.push(f);
  601. var i = new InputView(this);
  602. started.push(i.appendTo(self.$facets_container));
  603. self.input_subviews.push(i);
  604. }, this);
  605. _.each(this.input_subviews, function (childView) {
  606. childView.on('focused', self, self.proxy('childFocused'));
  607. childView.on('blurred', self, self.proxy('childBlurred'));
  608. });
  609. $.when.apply(null, started).then(function () {
  610. if (options && options.focus_input === false) return;
  611. var input_to_focus;
  612. // options.at: facet inserted at given index, focus next input
  613. // otherwise just focus last input
  614. if (!options || typeof options.at !== 'number') {
  615. input_to_focus = _.last(self.input_subviews);
  616. } else {
  617. input_to_focus = self.input_subviews[(options.at + 1) * 2];
  618. }
  619. input_to_focus.$el.focus();
  620. });
  621. },
  622. childFocused: function () {
  623. this.$el.addClass('active');
  624. },
  625. childBlurred: function () {
  626. this.$el.val('').removeClass('active').trigger('blur');
  627. this.autocomplete.close();
  628. },
  629. /**
  630. * Call the renderFacets method with the correct arguments.
  631. * This is due to the fact that change events are called with two arguments
  632. * (model, options) while add, reset and remove events are called with
  633. * (collection, model, options) as arguments
  634. */
  635. renderChangedFacets: function (model, options) {
  636. this.renderFacets(undefined, model, options);
  637. },
  638. // it should parse the arch field of the view, instantiate the corresponding
  639. // filters/fields, and put them in the correct variables:
  640. // * this.search_fields is a list of all the fields,
  641. // * this.filters: groups of filters
  642. // * this.group_by: group_bys
  643. prepare_search_inputs: function () {
  644. var self = this,
  645. arch = this.fields_view_get.arch;
  646. var filters = [].concat.apply([], _.map(arch.children, function (item) {
  647. return item.tag !== 'group' ? eval_item(item) : item.children.map(eval_item);
  648. }));
  649. function eval_item (item) {
  650. var category = 'filters';
  651. if (item.attrs.context) {
  652. try {
  653. var context = pyeval.eval('context', item.attrs.context);
  654. if (context.group_by) {
  655. category = 'group_by';
  656. }
  657. } catch (e) {}
  658. }
  659. return {
  660. item: item,
  661. category: category,
  662. };
  663. }
  664. var current_group = [],
  665. current_category = 'filters',
  666. categories = {filters: this.filters, group_by: this.groupbys};
  667. _.each(filters.concat({category:'filters', item: 'separator'}), function (filter) {
  668. if (filter.item.tag === 'filter' && filter.category === current_category) {
  669. return current_group.push(new search_inputs.Filter(filter.item, self));
  670. }
  671. if (current_group.length) {
  672. var group = new search_inputs.FilterGroup(current_group, self);
  673. categories[current_category].push(group);
  674. current_group = [];
  675. }
  676. if (filter.item.tag === 'field') {
  677. var attrs = filter.item.attrs;
  678. var field = self.fields_view_get.fields[attrs.name];
  679. // M2O combined with selection widget is pointless and broken in search views,
  680. // but has been used in the past for unsupported hacks -> ignore it
  681. if (field.type === "many2one" && attrs.widget === "selection") {
  682. attrs.widget = undefined;
  683. }
  684. var Obj = core.search_widgets_registry.get_any([attrs.widget, field.type]);
  685. if (Obj) {
  686. self.search_fields.push(new (Obj) (filter.item, field, self));
  687. }
  688. }
  689. if (filter.item.tag === 'filter') {
  690. current_group.push(new search_inputs.Filter(filter.item, self));
  691. }
  692. current_category = filter.category;
  693. });
  694. },
  695. });
  696. _.extend(SearchView, {
  697. SearchQuery: SearchQuery,
  698. Facet: Facet,
  699. });
  700. return SearchView;
  701. });
  702. odoo.define('web.AutoComplete', function (require) {
  703. "use strict";
  704. var Widget = require('web.Widget');
  705. return Widget.extend({
  706. template: "SearchView.autocomplete",
  707. // Parameters for autocomplete constructor:
  708. //
  709. // parent: this is used to detect keyboard events
  710. //
  711. // options.source: function ({term:query}, callback). This function will be called to
  712. // obtain the search results corresponding to the query string. It is assumed that
  713. // options.source will call callback with the results.
  714. // options.select: function (ev, {item: {facet:facet}}). Autocomplete widget will call
  715. // that function when a selection is made by the user
  716. // options.get_search_string: function (). This function will be called by autocomplete
  717. // to obtain the current search string.
  718. init: function (parent, options) {
  719. this._super(parent);
  720. this.$input = parent.$el;
  721. this.source = options.source;
  722. this.select = options.select;
  723. this.get_search_string = options.get_search_string;
  724. this.current_result = null;
  725. this.searching = true;
  726. this.search_string = '';
  727. this.current_search = null;
  728. },
  729. start: function () {
  730. var self = this;
  731. this.$input.on('keyup', function (ev) {
  732. if (ev.which === $.ui.keyCode.RIGHT) {
  733. self.searching = true;
  734. ev.preventDefault();
  735. return;
  736. }
  737. if (ev.which === $.ui.keyCode.ENTER) {
  738. if (self.search_string.length) {
  739. self.select_item(ev);
  740. }
  741. return;
  742. }
  743. var search_string = self.get_search_string();
  744. if (self.search_string !== search_string) {
  745. if (search_string.length) {
  746. self.search_string = search_string;
  747. self.initiate_search(search_string);
  748. } else {
  749. self.close();
  750. }
  751. }
  752. });
  753. this.$input.on('keypress', function (ev) {
  754. self.search_string = self.search_string + String.fromCharCode(ev.which);
  755. if (self.search_string.length) {
  756. self.searching = true;
  757. var search_string = self.search_string;
  758. self.initiate_search(search_string);
  759. } else {
  760. self.close();
  761. }
  762. });
  763. this.$input.on('keydown', function (ev) {
  764. switch (ev.which) {
  765. case $.ui.keyCode.ENTER:
  766. // TAB and direction keys are handled at KeyDown because KeyUp
  767. // is not guaranteed to fire.
  768. // See e.g. https://github.com/aef-/jquery.masterblaster/issues/13
  769. case $.ui.keyCode.TAB:
  770. if (self.search_string.length) {
  771. self.select_item(ev);
  772. }
  773. break;
  774. case $.ui.keyCode.DOWN:
  775. self.move('down');
  776. self.searching = false;
  777. ev.preventDefault();
  778. break;
  779. case $.ui.keyCode.UP:
  780. self.move('up');
  781. self.searching = false;
  782. ev.preventDefault();
  783. break;
  784. case $.ui.keyCode.RIGHT:
  785. self.searching = false;
  786. var current = self.current_result;
  787. if (current && current.expand && !current.expanded) {
  788. self.expand();
  789. self.searching = true;
  790. }
  791. ev.preventDefault();
  792. break;
  793. case $.ui.keyCode.ESCAPE:
  794. self.close();
  795. self.searching = false;
  796. break;
  797. }
  798. });
  799. },
  800. initiate_search: function (query) {
  801. if (query === this.search_string && query !== this.current_search) {
  802. this.search(query);
  803. }
  804. },
  805. search: function (query) {
  806. var self = this;
  807. this.current_search = query;
  808. this.source({term:query}, function (results) {
  809. if (results.length) {
  810. self.render_search_results(results);
  811. self.focus_element(self.$('li:first-child'));
  812. } else {
  813. self.close();
  814. }
  815. });
  816. },
  817. render_search_results: function (results) {
  818. var self = this;
  819. var $list = this.$('ul');
  820. $list.empty();
  821. var render_separator = false;
  822. results.forEach(function (result) {
  823. if (result.is_separator) {
  824. if (render_separator)
  825. $list.append($('<li>').addClass('oe-separator'));
  826. render_separator = false;
  827. } else {
  828. var $item = self.make_list_item(result).appendTo($list);
  829. result.$el = $item;
  830. render_separator = true;
  831. }
  832. });
  833. this.show();
  834. },
  835. make_list_item: function (result) {
  836. var self = this;
  837. var $li = $('<li>')
  838. .hover(function () {self.focus_element($li);})
  839. .mousedown(function (ev) {
  840. if (ev.button === 0) { // left button
  841. self.select(ev, {item: {facet: result.facet}});
  842. self.close();
  843. } else {
  844. ev.preventDefault();
  845. }
  846. })
  847. .data('result', result);
  848. if (result.expand) {
  849. var $expand = $('<span class="oe-expand">').text('▶').appendTo($li);
  850. $expand.mousedown(function (ev) {
  851. ev.preventDefault();
  852. ev.stopPropagation();
  853. if (result.expanded)
  854. self.fold();
  855. else
  856. self.expand();
  857. });
  858. result.expanded = false;
  859. }
  860. if (result.indent) $li.addClass('oe-indent');
  861. $li.append($('<span>').html(result.label));
  862. return $li;
  863. },
  864. expand: function () {
  865. var self = this;
  866. var current_result = this.current_result;
  867. current_result.expand(this.get_search_string()).then(function (results) {
  868. (results || [{label: '(no result)'}]).reverse().forEach(function (result) {
  869. result.indent = true;
  870. var $li = self.make_list_item(result);
  871. current_result.$el.after($li);
  872. });
  873. current_result.expanded = true;
  874. current_result.$el.find('span.oe-expand').html('▼');
  875. });
  876. },
  877. fold: function () {
  878. var $next = this.current_result.$el.next();
  879. while ($next.hasClass('oe-indent')) {
  880. $next.remove();
  881. $next = this.current_result.$el.next();
  882. }
  883. this.current_result.expanded = false;
  884. this.current_result.$el.find('span.oe-expand').html('▶');
  885. },
  886. focus_element: function ($li) {
  887. this.$('li').removeClass('oe-selection-focus');
  888. $li.addClass('oe-selection-focus');
  889. this.current_result = $li.data('result');
  890. },
  891. select_item: function (ev) {
  892. if (this.current_result.facet) {
  893. this.select(ev, {item: {facet: this.current_result.facet}});
  894. this.close();
  895. }
  896. },
  897. show: function () {
  898. this.$el.show();
  899. },
  900. close: function () {
  901. this.current_search = null;
  902. this.search_string = '';
  903. this.searching = true;
  904. this.$el.hide();
  905. },
  906. move: function (direction) {
  907. var $next;
  908. if (direction === 'down') {
  909. $next = this.$('li.oe-selection-focus').nextAll(':not(.oe-separator)').first();
  910. if (!$next.length) $next = this.$('li:first-child');
  911. } else {
  912. $next = this.$('li.oe-selection-focus').prevAll(':not(.oe-separator)').first();
  913. if (!$next.length) $next = this.$('li:not(.oe-separator)').last();
  914. }
  915. this.focus_element($next);
  916. },
  917. is_expandable: function () {
  918. return !!this.$('.oe-selection-focus .oe-expand').length;
  919. },
  920. });
  921. });