refactor: Dependency dropdown in separate component

Author: DanielTMolloy919

src/ui/Dependency.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+    import type {Task} from "../Task/Task";
+    import {computePosition, flip, offset, shift, size} from "@floating-ui/dom";
+    import type {EditableTask} from "./EditableTask";
+
+    export let task: Task;
+    export let editableTask: EditableTask;
+    export let allTasks: Task[];
+    export let _onDescriptionKeyDown: (e: KeyboardEvent) => void;
+    export let type: "blocking" | "blockedBy";
+    export let accesskey: (key: string) => string | null;
+
+    let existingTasks = type === "blocking" ? editableTask.blocking : editableTask.blockedBy;
+
+    console.log(`blockedBy: ${editableTask.blockedBy.map(task => task.description)}`)
+
+    let search: string = '';
+    let searchResults: Task[] | null = null;
+    let searchIndex: number | null = 0;
+
+    let depInputWidth: number;
+
+    let inputFocused = false;
+
+    let displayResultsIfSearchEmpty = false;
+
+    function onFocused() {
+        inputFocused = true;
+        displayResultsIfSearchEmpty = true;
+    }
+
+
+    let dependencyInput: HTMLElement;
+    let dependencyDropdown: HTMLElement;
+
+    function positionDropdown(ref: HTMLElement, content: HTMLElement) {
+        if (!ref || !content) return;
+
+        computePosition(ref, content, {
+            middleware: [
+                offset(6),
+                shift(),
+                flip(),
+                size({
+                    apply() {
+                        content && Object.assign(content.style, { width: `${depInputWidth}px` });
+                    },
+                }),
+            ],
+        }).then(({ x, y }) => {
+            Object.assign(content.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+    }
+
+    const _displayableFilePath = (path: string) => {
+        if (path === task.taskLocation.path) return "";
+
+        return path.slice(0,-3);
+    }
+
+    $: {
+        positionDropdown(dependencyInput, dependencyDropdown);
+    }
+
+    $: {
+        searchResults = inputFocused ? generateSearchResults(search) : null;
+    }
+
+    function taskKeydown(e: KeyboardEvent) {
+        if (searchResults === null) return;
+
+        switch(e.key) {
+            case "ArrowUp":
+                e.preventDefault();
+                if (searchIndex === 0 || searchIndex === null) {
+                    searchIndex = searchResults.length - 1;
+                } else {
+                    searchIndex -= 1;
+                }
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                if (searchIndex === searchResults.length - 1 || searchIndex === null) {
+                    searchIndex = 0;
+                } else {
+                    searchIndex += 1;
+                }
+                break;
+            case "Enter":
+                if (searchIndex !== null) {
+                    e.preventDefault();
+                    addTask(searchResults[searchIndex]);
+                    searchIndex = null;
+                    inputFocused = false
+                } else {
+                    _onDescriptionKeyDown(e);
+                }
+                break;
+            default:
+                searchIndex = 0;
+                break;
+        }
+        searchIndex = searchIndex;
+        if (searchIndex !== null) {
+            dependencyDropdown?.getElementsByTagName('li')[searchIndex]?.scrollIntoView(false)
+        }
+    }
+
+    function showDescriptionTooltip(element: HTMLElement, text: string) {
+        const tooltip = element.createDiv();
+        tooltip.addClasses(['tooltip', 'pop-up']);
+        tooltip.innerText = text;
+
+        computePosition(element, tooltip, {
+            placement: "top",
+            middleware: [
+                offset(-18),
+                shift()
+            ]
+        }).then(({x, y}) => {
+            Object.assign(tooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+
+        element.addEventListener('mouseleave', () => {
+            tooltip.remove();
+        });
+    }
+
+
+    function generateSearchResults(search: string) {
+        if (!search && !displayResultsIfSearchEmpty) return [];
+
+        displayResultsIfSearchEmpty = false;
+
+        let results = allTasks.filter(task => task.description.toLowerCase().includes(search.toLowerCase()));
+
+        // remove itself, and tasks this task already has a relationship with from results
+        results = results.filter((item) => {
+            // line number is unavailable for the task being edited
+            // Known issue - filters out duplicate lines in task file
+            const sameFile = item.description === task.description &&
+                item.taskLocation.path === task.taskLocation.path &&
+                item.originalMarkdown === task.originalMarkdown
+
+            return ![...editableTask.blockedBy, ...editableTask.blocking].includes(item) && !sameFile;
+        });
+
+        // search results favour tasks from the same file as this task
+        results.sort((a, b) => {
+            const aInSamePath = a.taskLocation.path === task.taskLocation.path;
+            const bInSamePath = b.taskLocation.path === task.taskLocation.path;
+
+            // prioritise tasks close to this task in the same file
+            if (aInSamePath && bInSamePath) {
+                return Math.abs(a.taskLocation.lineNumber - task.taskLocation.lineNumber)
+                    - Math.abs(b.taskLocation.lineNumber - task.taskLocation.lineNumber);
+            } else if (aInSamePath) {
+                return -1;
+            } else if (bInSamePath) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+
+        return results.slice(0,20);
+    }
+
+    function addTask(task: Task) {
+        existingTasks = [...existingTasks, task];
+        if (type === "blocking") {
+            editableTask.blocking = existingTasks;
+        } else {
+            editableTask.blockedBy = existingTasks;
+        }
+        search = '';
+        inputFocused = false;
+    }
+
+    function removeTask(task: Task) {
+        existingTasks = existingTasks.filter(item => item !== task);
+        if (type === "blocking") {
+            editableTask.blocking = existingTasks;
+        } else {
+            editableTask.blockedBy = existingTasks;
+        }
+    }
+</script>
+
+<!-- svelte-ignore a11y-accesskey -->
+
+<span class="input" bind:clientWidth={depInputWidth}>
+    <input
+        bind:this={dependencyInput}
+        bind:value={search}
+        on:keydown={(e) => taskKeydown(e)}
+        on:focus={onFocused}
+        on:blur={() => inputFocused = false}
+        accesskey={accesskey("b")}
+        id="{type}"
+        class="input"
+        type="text"
+        placeholder="Type to search..."
+    />
+</span>
+{#if searchResults && searchResults.length !== 0}
+    <ul class="suggested-tasks"
+        bind:this={dependencyDropdown}
+        on:mouseleave={() => searchIndex = null}>
+        {#each searchResults as searchTask, index}
+            {@const filepath = _displayableFilePath(searchTask.taskLocation.path)}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <li on:mousedown={() => addTask(searchTask)}
+                class:selected={search !== null && index === searchIndex}
+                on:mouseenter={() => searchIndex = index}>
+                <div class="{filepath ? 'dependency-name-shared' : 'dependency-name'}"
+                     on:mouseenter={(e) => showDescriptionTooltip(e.currentTarget, searchTask.descriptionWithoutTags)}>
+                    [{searchTask.status.symbol}] {searchTask.descriptionWithoutTags}
+                </div>
+                {#if filepath}
+                    <div class="dependency-location"
+                         on:mouseenter={(e) => showDescriptionTooltip(e.currentTarget, filepath)}>
+                        {filepath}
+                    </div>
+                {/if}
+            </li>
+        {/each}
+    </ul>
+{/if}
+<div class="chip-container results">
+    {#each existingTasks as task}
+        <div class="chip"
+             on:mouseenter={(e) => showDescriptionTooltip(e.currentTarget, task.descriptionWithoutTags)}>
+            <span class="chip-name">[{task.status.symbol}] {task.descriptionWithoutTags}</span>
+
+            <button on:click={() => removeTask(task)} type="button" class="chip-close">
+                <svg style="display: block; margin: auto;" xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+        </div>
+    {/each}
+</div>