User editor: groups are added on save

Author: zonia3000

src/lib/common/slim_select.js

@@ -11,7 +11,7 @@
 	import { removeDuplicatedItems } from '$lib/common/component_utilities';
 	import StandardDismissableAlert from '../../common/StandardDismissableAlert.svelte';
 	import TimestampCell from '../../jobs/TimestampCell.svelte';
-	import { setSlimSelect, setSlimSelectOptions } from '$lib/common/slim_select';
+	import SlimSelect from 'slim-select';
 
 	/** @type {() => Promise<import('$lib/types').ApplyWorkflow[]>} */
 	export let jobUpdater;
@@ -44,15 +44,15 @@
 	let rows = tableHandler.getRows();
 
 	// Selectors
-	/** @type {import('slim-select').default|undefined} */
+	/** @type {SlimSelect|undefined} */
 	let statusSelect;
-	/** @type {import('slim-select').default|undefined} */
+	/** @type {SlimSelect|undefined} */
 	let projectSelect;
-	/** @type {import('slim-select').default|undefined} */
+	/** @type {SlimSelect|undefined} */
 	let workflowSelect;
-	/** @type {import('slim-select').default|undefined} */
+	/** @type {SlimSelect|undefined} */
 	let inputDatasetSelect;
-	/** @type {import('slim-select').default|undefined} */
+	/** @type {SlimSelect|undefined} */
 	let outputDatasetSelect;
 
 	// Filters
@@ -206,6 +206,44 @@
 		);
 	});
 
+	/**
+	 * Initializes slim-select dropdown on a given HTML element.
+	 * @param {string} id id of HTML element where slim-select has to be configured
+	 * @param {Array<{ name: string, id: number|string }>} values
+	 * @param {(value: string) => void} setter function executed when a dropdown value is selected
+	 * @param {boolean} showSearch
+	 * @returns the SlimSelect instance
+	 */
+	function setSlimSelect(id, values, setter, showSearch = true) {
+		if (!values) {
+			return;
+		}
+		const selectElement = document.getElementById(id);
+		if (!selectElement) {
+			return;
+		}
+		selectElement.classList.remove('invisible');
+		const select = new SlimSelect({
+			select: `#${id}`,
+			settings: {
+				showSearch,
+				allowDeselect: true
+			},
+			events: {
+				afterChange: (selection) => {
+					const selectedOption = selection[0];
+					if (!selectedOption || selectedOption.placeholder) {
+						setter('');
+					} else {
+						setter(selectedOption.value);
+					}
+				}
+			}
+		});
+		setSlimSelectOptions(select, values);
+		return select;
+	}
+
 	/**
 	 * Rebuilds valid slim-select options according to the visible rows.
 	 * Example: if a project filter is selected the user can select only the workflows belonging to that project.
@@ -229,7 +267,7 @@
 	/**
 	 * Updates the available options only when needed, to avoid unsetting the selected value when the desired list of
 	 * options is already set (e.g. if we change the selected dataset we don't want to change the selected workflow).
-	 * @param {import('slim-select').default|undefined} select
+	 * @param {SlimSelect|undefined} select
 	 * @param {{id: number, name: string}[]} validValues
 	 */
 	function setValidSlimSelectOptions(select, validValues) {
@@ -242,6 +280,19 @@
 		}
 	}
 
+	/**
+	 * Updates SlimSelect options. This rebuilds the HTML elements and unset the selected value.
+	 * @param {SlimSelect|undefined} select
+	 * @param {Array<{ name: string, id: number|string }>} values
+	 */
+	function setSlimSelectOptions(select, values) {
+		if (!select) {
+			return;
+		}
+		const options = values.map((p) => ({ text: p.name, value: p.id.toString() }));
+		select.setData([{ text: 'All', placeholder: true }, ...options]);
+	}
+
 	onDestroy(() => {
 		clearTimeout(updateJobsTimeout);
 	});