OSIT-AE-App-Svelte/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte

<script lang="ts">
interface JournalObjLike {
    name?: string;
    cfg_json?: {
        category_li?: Array<{
            code: string;
            name: string;
        }>;
    };
}

interface Props {
    log_lvl?: number;
    lq__journal_obj: JournalObjLike | null | undefined;
}

let { log_lvl = $bindable(0), lq__journal_obj }: Props = $props();

import {
    Library,
    RemoveFormatting
} from '@lucide/svelte';

import {
    ae_loc,
} from '$lib/stores/ae_stores';
import {
    journals_loc,
    journals_sess
} from '$lib/ae_journals/ae_journals_stores';

// *** Functions and Logic
function handle_search_trigger() {
    if ($journals_loc.entry.search_version === undefined) {
        $journals_loc.entry.search_version = 0;
    }
    $journals_loc.entry.search_version++;
}

function prevent_default<T extends Event>(fn: (event: T) => void) {
    return function (event: T) {
        event.preventDefault();
        fn(event);
    };
}
</script>

<div
    class="ae_group filters_and_search flex flex-row flex-wrap items-center justify-center gap-2">
    <!-- Search input form -->
    <span class="flex flex-row flex-wrap items-center justify-center gap-1">
        <form
            onsubmit={prevent_default(() => {
                handle_search_trigger();
            })}
            autocomplete="off"
            class="search_form flex flex-row flex-wrap items-center justify-center gap-1">
            <span class="hidden text-sm text-gray-500 lg:inline">
                Search:
            </span>
            <input
                disabled={false}
                type="text"
                placeholder="Search Journal Entries"
                bind:value={$journals_loc.entry.qry__search_text}
                onkeyup={() => {
                    // Reactive effect in parent handles this debounced
                }}
                title={`Search for Entries in "${lq__journal_obj?.name}. Press Enter to search.`}
                autocomplete="off"
                class="
                    input input-sm
                    w-44 text-sm
                    md:w-52
                    "
                class:bg-red-200={$journals_sess.entry_li == null}
                class:dark:bg-red-800={$journals_sess.entry_li == null} />

            <button
                type="submit"
                class="btn btn-sm preset-filled-primary transition"
                title="Perform detailed search">
                <Library size="1.25em" />
            </button>

            <!-- Clear search text button -->
            <button
                type="button"
                class:hidden={!$journals_loc.entry.qry__search_text &&
                    !$journals_loc.entry.qry__category_code}
                onclick={() => {
                    $journals_loc.entry.qry__search_text = '';
                    $journals_loc.entry.qry__category_code = '';
                    handle_search_trigger();
                }}
                class="
                    btn btn-sm
                    preset-tonal-surface
                    hover:preset-filled-surface-500
                    transition-all
                    "
                title="Clear search query text">
                <RemoveFormatting
                    size="1.25em"
                    class="text-neutral-800/60 dark:text-neutral-50/60" />
                <span class="hidden md:inline"> Clear </span>
            </button>
        </form>
    </span>

    <!-- Give list of categories to base the new entry on -->
    <span class="flex flex-row items-center gap-2">
        <span class="hidden text-sm text-gray-500 md:inline"> Category: </span>
        <select
            class="select select-sm"
            bind:value={$journals_loc.entry.qry__category_code}
            onchange={() => {
                handle_search_trigger();
            }}
            title="Filter by category">
            <option value="">All Categories</option>
            {#each lq__journal_obj?.cfg_json?.category_li as category (category.code)}
                <option value={category.code}>{category.name}</option>
            {/each}
        </select>
    </span>

    {#if $ae_loc.edit_mode && ($ae_loc.manager_access || $ae_loc.trusted_access)}
        <span class="flex flex-row flex-wrap items-center gap-2">
            <span class="hidden text-sm text-gray-500 lg:inline"> Filters: </span>

            {#if $ae_loc.manager_access}
                <label class="flex flex-row items-center gap-1 text-xs font-semibold text-gray-500">
                    <span>Enabled</span>
                    <select
                        class="select select-sm"
                        bind:value={$journals_loc.entry.qry__enabled}
                        onchange={handle_search_trigger}
                        title="Filter by enabled status">
                        <option value="enabled">Enabled Only</option>
                        <option value="not_enabled">Disabled Only</option>
                        <option value="all">All</option>
                    </select>
                </label>
            {/if}

            {#if $ae_loc.trusted_access}
                <label class="flex flex-row items-center gap-1 text-xs font-semibold text-gray-500">
                    <span>Hidden</span>
                    <select
                        class="select select-sm"
                        bind:value={$journals_loc.entry.qry__hidden}
                        onchange={handle_search_trigger}
                        title="Filter by hidden status">
                        <option value="not_hidden">Visible Only</option>
                        <option value="hidden">Hidden Only</option>
                        <option value="all">All</option>
                    </select>
                </label>
            {/if}
        </span>
    {/if}

    <!-- Search Control Toggles -->
    <span
        class="border-surface-300-700 flex flex-row flex-wrap items-center gap-2 border-l pl-2">
        <!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
        <!--
        <label
            class="flex items-center gap-1 cursor-pointer"
            title="When enabled, searches all journals for this person. When disabled, only searches the current journal."
        >
            <span class="text-xs font-semibold text-gray-500"> Global Search? </span>
            <input
                type="checkbox"
                bind:checked={$journals_loc.entry.qry__global_person_search}
                onchange={handle_search_trigger}
                class="checkbox checkbox-sm"
            />
        </label>
        -->

        {#if $ae_loc.edit_mode}
            <label
                class="flex cursor-pointer items-center gap-1"
                title="When enabled, search results are fetched directly from the server first.">
                <span class="text-xs font-semibold text-gray-500">
                    Remote First?
                </span>
                <input
                    type="checkbox"
                    bind:checked={$journals_loc.entry.qry__remote_first}
                    onchange={handle_search_trigger}
                    class="checkbox checkbox-sm" />
            </label>
        {/if}
    </span>
</div>