terra-view/templates/partials/project_picker.html

{#
Project Picker Component
A reusable HTMX-based autocomplete for selecting projects.

Usage: include "partials/project_picker.html" with context

Variables available in context:
- selected_project_id: Pre-selected project UUID (optional)
- selected_project_display: Display text for pre-selected project (optional)
- input_name: Name attribute for the hidden input (default: "project_id")
- picker_id: Unique ID suffix for multiple pickers on same page (default: "")
#}

{% set picker_id = picker_id|default("") %}
{% set input_name = input_name|default("project_id") %}
{% set selected_project_id = selected_project_id|default("") %}
{% set selected_project_display = selected_project_display|default("") %}

<div class="project-picker relative" id="project-picker-container{{ picker_id }}">
    <!-- Hidden input for form submission (stores project UUID) -->
    <input type="hidden"
           name="{{ input_name }}"
           id="project-picker-value{{ picker_id }}"
           value="{{ selected_project_id }}">

    <!-- Search Input -->
    <div class="relative">
        <input type="text"
               id="project-picker-search{{ picker_id }}"
               placeholder="Search by project number, client, or name..."
               class="w-full px-4 py-2 pr-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange focus:border-seismo-orange"
               autocomplete="off"
               value="{{ selected_project_display }}"
               hx-get="/api/projects/search"
               hx-trigger="keyup changed delay:300ms, focus"
               hx-target="#project-picker-dropdown{{ picker_id }}"
               hx-vals='{"picker_id": "{{ picker_id }}"}'
               name="q"
               onfocus="showProjectDropdown('{{ picker_id }}')"
               oninput="handleProjectSearchInput('{{ picker_id }}', this.value)">

        <!-- Search icon -->
        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </div>

        <!-- Clear button (shown when project is selected) -->
        <button type="button"
                id="project-picker-clear{{ picker_id }}"
                class="absolute inset-y-0 right-8 flex items-center pr-1 {{ 'hidden' if not selected_project_id else '' }}"
                onclick="clearProjectSelection('{{ picker_id }}')"
                title="Clear selection">
            <svg class="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>

    <!-- Dropdown Results Container -->
    <div id="project-picker-dropdown{{ picker_id }}"
         class="hidden absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
        <!-- Results loaded via HTMX -->
    </div>
</div>

<script>
// Project picker functions - defined once, work for any picker_id
if (typeof selectProject === 'undefined') {
    function selectProject(projectId, displayText, pickerId = '') {
        const valueInput = document.getElementById('project-picker-value' + pickerId);
        const searchInput = document.getElementById('project-picker-search' + pickerId);
        const dropdown = document.getElementById('project-picker-dropdown' + pickerId);
        const clearBtn = document.getElementById('project-picker-clear' + pickerId);

        if (valueInput) valueInput.value = projectId;
        if (searchInput) searchInput.value = displayText;
        if (dropdown) dropdown.classList.add('hidden');
        if (clearBtn) clearBtn.classList.remove('hidden');
    }

    function clearProjectSelection(pickerId = '') {
        const valueInput = document.getElementById('project-picker-value' + pickerId);
        const searchInput = document.getElementById('project-picker-search' + pickerId);
        const clearBtn = document.getElementById('project-picker-clear' + pickerId);

        if (valueInput) valueInput.value = '';
        if (searchInput) {
            searchInput.value = '';
            searchInput.focus();
        }
        if (clearBtn) clearBtn.classList.add('hidden');
    }

    function showProjectDropdown(pickerId = '') {
        const dropdown = document.getElementById('project-picker-dropdown' + pickerId);
        if (dropdown) dropdown.classList.remove('hidden');
    }

    function hideProjectDropdown(pickerId = '') {
        const dropdown = document.getElementById('project-picker-dropdown' + pickerId);
        if (dropdown) dropdown.classList.add('hidden');
    }

    function handleProjectSearchInput(pickerId, value) {
        const valueInput = document.getElementById('project-picker-value' + pickerId);
        const clearBtn = document.getElementById('project-picker-clear' + pickerId);

        // If user clears the search box, also clear the hidden value
        if (!value.trim()) {
            if (valueInput) valueInput.value = '';
            if (clearBtn) clearBtn.classList.add('hidden');
        }
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const pickers = document.querySelectorAll('.project-picker');
        pickers.forEach(picker => {
            if (!picker.contains(event.target)) {
                const dropdown = picker.querySelector('[id^="project-picker-dropdown"]');
                if (dropdown) dropdown.classList.add('hidden');
            }
        });
    });
}
</script>