diff --git a/src/js/common/Utilities.js b/src/js/common/Utilities.js index 753674fb1a..b66b1170aa 100644 --- a/src/js/common/Utilities.js +++ b/src/js/common/Utilities.js @@ -1,6 +1,6 @@ -define([], () => { - "use strict"; +"use strict"; +define([], () => { /** * @namespace Utilities * @description A generic utility object that contains functions used throughout MetacatUI to perform useful functions, diff --git a/src/js/models/connectors/Bioontology-Accordion-SearchSelect.js b/src/js/models/connectors/Bioontology-Accordion-SearchSelect.js index 324ce50c75..bda5af80d5 100644 --- a/src/js/models/connectors/Bioontology-Accordion-SearchSelect.js +++ b/src/js/models/connectors/Bioontology-Accordion-SearchSelect.js @@ -87,7 +87,6 @@ define([ ontology: firstOntology.ontology, subTree: firstOntology.subTree, }); - bioontology.fetch(); this.set("bioontology", bioontology); }, diff --git a/src/js/models/ontologies/Bioontology.js b/src/js/models/ontologies/Bioontology.js index 963c1d05f2..c8b8b9c8b6 100644 --- a/src/js/models/ontologies/Bioontology.js +++ b/src/js/models/ontologies/Bioontology.js @@ -116,7 +116,6 @@ define(["backbone", "models/ontologies/BioontologyClass"], ( if (displayContext === false) url += `&display_context=false`; if (displayLinks === false) url += `&display_links=false`; if (include) url += `&include=${include}`; - return url; }, diff --git a/src/js/models/searchSelect/AccountSearchSelect.js b/src/js/models/searchSelect/AccountSearchSelect.js index 0a400a6fed..97dbcf95b6 100644 --- a/src/js/models/searchSelect/AccountSearchSelect.js +++ b/src/js/models/searchSelect/AccountSearchSelect.js @@ -22,7 +22,7 @@ define(["models/searchSelect/SearchSelect", "models/LookupModel"], ( placeholderText: "Start typing a name", inputLabel: "Search for a person or group", allowMulti: true, - allowAdditions: true, + allowAdditions: false, apiSettings: { responseAsync: this.responseAsync.bind(this), }, @@ -33,7 +33,6 @@ define(["models/searchSelect/SearchSelect", "models/LookupModel"], ( initialize() { if (!MetacatUI.appLookupModel) MetacatUI.appLookupModel = new LookupModel(); - this.setOptionsForPreselected(); SearchSelect.prototype.initialize.call(this); }, diff --git a/src/js/models/searchSelect/SearchSelect.js b/src/js/models/searchSelect/SearchSelect.js index 91f3b420fb..ba4dc96ec2 100644 --- a/src/js/models/searchSelect/SearchSelect.js +++ b/src/js/models/searchSelect/SearchSelect.js @@ -56,6 +56,8 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( * @property {string|boolean} icon Set this to a FontAwesome icon to use * instead of the default dropdown (down arrow) icon. Works will with the * buttonStyle option. + * @property {boolean} fluid Set this to true to make the dropdown take up + * the full width of its container. */ defaults() { return { @@ -75,16 +77,21 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( inputLabel: "Select a value", buttonStyle: false, icon: false, + fluid: true, }; }, /** @inheritdoc */ initialize(attributes, _options) { + this.setOptionsForPreselected(); const optionsData = attributes?.options; // Select options must be parsed if they are not already // SearchSelectOption collections if (optionsData && !(optionsData instanceof SearchSelectOptions)) { - this.updateOptions(optionsData); + this.set( + "options", + new SearchSelectOptions(optionsData, { parse: true }), + ); } // Save a reference to the original submenu style to revert to when search // term is removed @@ -116,14 +123,8 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( * @param {object|object[]} options The new options to set for the dropdown */ updateOptions(options) { - this.stopListening(this.get("options")); const parse = typeof options === "object" && !Array.isArray(options); - this.set("options", new SearchSelectOptions(options, { parse })); - this.listenTo( - this.get("options"), - "all", - this.trigger.bind(this, "change:options"), - ); + this.get("options").reset(options, { parse }); }, /** @@ -167,7 +168,7 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( * not a multi-select dropdown, the selected value will replace any existing * value. * @param {string} value - The value to add to the selected list. - * @param {object} options - Additional options to be passed to the 's set + * @param {object} options - Additional options to be passed to the set * method. */ addSelected(value, options = {}) { @@ -267,6 +268,16 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( selected.includes(model.get("value")), ); }, + + /** + * This method is set for extended models that fetch options asynchronously + * on search. This method should be overridden to fetch options from the API + * for the values that are currently selected in the dropdown. This allows + * those values to be populated with the correct label and icon. + */ + setOptionsForPreselected() { + // This method should be overridden in extended models + }, }); return SearchSelect; diff --git a/src/js/models/searchSelect/SolrAutocomplete.js b/src/js/models/searchSelect/SolrAutocomplete.js index 823b01efbc..30de885183 100644 --- a/src/js/models/searchSelect/SolrAutocomplete.js +++ b/src/js/models/searchSelect/SolrAutocomplete.js @@ -53,7 +53,6 @@ define(["models/searchSelect/SearchSelect", "collections/SolrResults"], ( }, formatOptions() { - const results = this.get("searchResults"); const queryField = this.get("queryField"); const facetArray = results.facetCounts[queryField]; diff --git a/src/js/views/ontologies/BioontologyBrowserView.js b/src/js/views/ontologies/BioontologyBrowserView.js index 468eec3d9a..cf6556a613 100644 --- a/src/js/views/ontologies/BioontologyBrowserView.js +++ b/src/js/views/ontologies/BioontologyBrowserView.js @@ -43,12 +43,6 @@ define([ /** @inheritdoc */ className: BASE_CLASS, - /** - * The HTML string to display when parts of the view are loading - * @type {string} - */ - loadingHTML: `Loading...`, - /** * The HTML string to display when no term is selected */ diff --git a/src/js/views/searchSelect/SearchSelectHeaderView.js b/src/js/views/searchSelect/SearchSelectHeaderView.js index 0b2ec33001..50ae6d6334 100644 --- a/src/js/views/searchSelect/SearchSelectHeaderView.js +++ b/src/js/views/searchSelect/SearchSelectHeaderView.js @@ -1,7 +1,6 @@ "use strict"; define(["backbone", "semantic"], (Backbone, Semantic) => { - // The class for the outermost element of the header. const BASE_CLASS = Semantic.CLASS_NAMES.dropdown.header; @@ -70,9 +69,11 @@ define(["backbone", "semantic"], (Backbone, Semantic) => { render() { this.icons = {}; - this.icons.category = this.createIconEl( - [CLASS_NAMES.icon, `${CLASS_NAMES.icon}-${this.categoryIcon}`, CLASS_NAMES.categoryIcon] - ); + this.icons.category = this.createIconEl([ + CLASS_NAMES.icon, + `${CLASS_NAMES.icon}-${this.categoryIcon}`, + CLASS_NAMES.categoryIcon, + ]); this.icons.accordion = this.createIconEl([ CLASS_NAMES.chevronDown, CLASS_NAMES.accordionIcon, diff --git a/src/js/views/searchSelect/SearchSelectView.js b/src/js/views/searchSelect/SearchSelectView.js index 59beb83371..594bc2888c 100644 --- a/src/js/views/searchSelect/SearchSelectView.js +++ b/src/js/views/searchSelect/SearchSelectView.js @@ -227,13 +227,15 @@ define([ * the selected text elements in a single-select dropdown. * @since 0.0.0 */ - addClickToTexts(){ - const showMenu = () => { this.$selectUI.dropdown("show") }; + addClickToTexts() { + const showMenu = () => { + this.$selectUI.dropdown("show"); + }; const texts = this.getTexts(); - if(!texts?.length) return; + if (!texts?.length) return; texts.forEach((text) => text.removeEventListener("click", showMenu)); const text = this.getTexts()?.[0]; - if(!text) return; + if (!text) return; text.addEventListener("click", showMenu); }, diff --git a/src/js/views/searchSelect/SeparatorView.js b/src/js/views/searchSelect/SeparatorView.js index 7e1dfe95e1..5e9d32382a 100644 --- a/src/js/views/searchSelect/SeparatorView.js +++ b/src/js/views/searchSelect/SeparatorView.js @@ -1,9 +1,6 @@ "use strict"; -define([ - "backbone", - "semantic" -], (Backbone, _Semantic) => { +define(["backbone", "semantic"], (Backbone, _Semantic) => { // Default class names for the separator element const BASE_CLASS = "separator"; const CLASS_NAMES = {