|
1 | 1 | <script> |
2 | 2 | // import { page } from '$app/stores'; |
| 3 | + import { onMount } from 'svelte'; |
| 4 | + import SlimSelect from 'slim-select'; |
3 | 5 | import { greatestVersionDesc } from '$lib/common/component_utilities.js'; |
4 | 6 |
|
5 | 7 | export let tasks = undefined; |
|
9 | 11 | let selectionTasksNames = []; |
10 | 12 | let selectedMapKey; |
11 | 13 | let selectedMapTaskVersions = undefined; |
12 | | -
|
| 14 | + let selectionControl = undefined; |
| 15 | + let filteredTasks = []; |
| 16 | +
|
| 17 | +
|
| 18 | + onMount(() => { |
| 19 | + selectionControl = new SlimSelect({ |
| 20 | + select: '#advanced-select', |
| 21 | + events: { |
| 22 | + afterChange: (selection) => { |
| 23 | + const selectedOption = selection[0]; |
| 24 | + if (!selectedOption.placeholder) { |
| 25 | + selectedMapKey = selectedOption.value; |
| 26 | + selectedMapTaskVersions = selectionTasks.get(selectedMapKey); |
| 27 | + selectedMapTaskVersions.sort(greatestVersionDesc); |
| 28 | + } |
| 29 | + } |
| 30 | + } |
| 31 | + }); |
| 32 | + }); |
13 | 33 |
|
14 | 34 | function setSelectionTasks(group, tasks) { |
15 | 35 | selectionTasks = new Map(); |
16 | 36 | selectionTasksNames = []; |
17 | 37 | selectedMapKey = null; |
18 | 38 | selectedMapTaskVersions = undefined; |
19 | 39 |
|
20 | | - let filteredTasks = []; |
| 40 | + filteredTasks = []; |
21 | 41 |
|
22 | 42 | if (group === 'common') { |
23 | 43 | filteredTasks = tasks.filter(task => task.owner === null); // .filter((task, index, self) => self.findIndex(t => t.name === task.name) === index); |
|
36 | 56 | }); |
37 | 57 | selectionTasksNames = Array.from(selectionTasks.keys()); |
38 | 58 |
|
| 59 | + setSelectionControlData(); |
39 | 60 | } |
40 | 61 |
|
41 | | - function setSelectedGroup(group) { |
42 | | - console.log(group); |
43 | | - selectedTypeOfTask = group; |
| 62 | + function setSelectionControlData() { |
| 63 | + let optionsMap = []; |
| 64 | +
|
| 65 | + if (selectedTypeOfTask === 'common') { |
| 66 | + // Group filtered tasks by source |
| 67 | + optionsMap = filteredTasks.reduce((dataOptions, task) => { |
| 68 | + const source = task.source.split(':')[1]; // Package name |
| 69 | + const sourceIndex = dataOptions.findIndex(d => d.label === source); |
| 70 | + if (sourceIndex === -1) { |
| 71 | + dataOptions.push({ label: source, options: [{ text: task.name, value: task.name }] }); |
| 72 | + } else { |
| 73 | + // If task name already exists in options, don't add it again |
| 74 | + if (!dataOptions[sourceIndex].options.find(o => o.text === task.name)) |
| 75 | + dataOptions[sourceIndex].options.push({ text: task.name, value: task.name }); |
| 76 | + } |
| 77 | + return dataOptions; |
| 78 | + }, []); |
| 79 | + } |
| 80 | +
|
| 81 | + if (selectedTypeOfTask === 'user') { |
| 82 | + optionsMap = filteredTasks.reduce((dataOptions, task) => { |
| 83 | + const source = task.owner; |
| 84 | + const sourceIndex = dataOptions.findIndex(d => d.label === source); |
| 85 | + if (sourceIndex === -1) { |
| 86 | + dataOptions.push({ label: source, options: [{ text: task.name, value: task.name }] }); |
| 87 | + } else { |
| 88 | + // If task name already exists in options, don't add it again |
| 89 | + if (!dataOptions[sourceIndex].options.find(o => o.text === task.name)) |
| 90 | + dataOptions[sourceIndex].options.push({ text: task.name, value: task.name }); |
| 91 | + } |
| 92 | + return dataOptions; |
| 93 | + }, []); |
| 94 | + } |
| 95 | +
|
| 96 | + optionsMap = [{ text: 'Task selection', placeholder: true }, ...optionsMap]; |
| 97 | + selectionControl?.setData(optionsMap); |
44 | 98 | } |
45 | 99 |
|
46 | | - function handleSelectedTaskKey(event) { |
47 | | - selectedMapKey = event.target.value; |
48 | | - selectedMapTaskVersions = selectionTasks.get(selectedMapKey); |
49 | | - selectedMapTaskVersions.sort(greatestVersionDesc); |
| 100 | + function setSelectedGroup(group) { |
| 101 | + selectedTypeOfTask = group; |
50 | 102 | } |
51 | 103 |
|
52 | 104 | $: setSelectionTasks(selectedTypeOfTask, tasks); |
|
73 | 125 | <div class='card-body'> |
74 | 126 | <label for='taskId' class='form-label'>Select task</label> |
75 | 127 | {#if selectedTypeOfTask } |
76 | | - <select on:change={handleSelectedTaskKey} class='form-select' bind:value={selectedMapKey}> |
77 | | - <option selected value={null}>Select available task</option> |
78 | | - {#each selectionTasksNames as taskName} |
79 | | - <option value={taskName}>{taskName}</option> |
80 | | - {/each} |
| 128 | + <select id='advanced-select' class='' bind:value={selectedMapKey}> |
81 | 129 | </select> |
82 | 130 | {/if} |
83 | 131 | <br> |
|
0 commit comments