Maximilian Stubhan
901c5c426e
Reworks the app from a two-role (hr_admin/manager) model to a single HR-only role gated by profiles.is_active, fixes transfer/promote/karenz/ reorg RPCs to actually defer future-dated changes via a new pending_org_changes table instead of writing them immediately (applied by a daily Vercel Cron route), makes reorg undo append-only instead of deleting history, adds Karenz-return and history-date integrity guards, deprecates the salary column, and adds explicit schema grants + perf indexes needed to run against a fresh (non-hosted) Postgres instance. Adds vitest unit + integration test suites (the latter against a real local Supabase instance) covering all of the above, plus lint/typecheck/ build wiring (`npm run check`).
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
type CountryPickerProps = {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
countries: string[];
|
|
placeholder?: string;
|
|
};
|
|
|
|
// Searchable text combobox constrained to a fixed list (UN member states)
|
|
// rather than a Lookup-style "selected card" — a country is a single text
|
|
// value, not an object with its own detail fields.
|
|
export function CountryPicker({ value, onChange, countries, placeholder = "Land suchen…" }: CountryPickerProps) {
|
|
const [query, setQuery] = useState(value);
|
|
const [prevValue, setPrevValue] = useState(value);
|
|
const [open, setOpen] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Re-sync the local draft text when `value` changes externally (e.g. the
|
|
// surrounding form loads a different employee). Adjusting state directly
|
|
// during render — rather than in an effect — avoids an extra render pass
|
|
// and the synchronous setState-in-effect this used to do.
|
|
if (value !== prevValue) {
|
|
setPrevValue(value);
|
|
setQuery(value);
|
|
}
|
|
|
|
useEffect(() => {
|
|
function onClickOutside(e: MouseEvent) {
|
|
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
|
setOpen(false);
|
|
setQuery(value);
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", onClickOutside);
|
|
return () => document.removeEventListener("mousedown", onClickOutside);
|
|
}, [value]);
|
|
|
|
const filtered = query.trim() ? countries.filter((c) => c.toLowerCase().includes(query.trim().toLowerCase())) : countries;
|
|
|
|
return (
|
|
<div ref={containerRef} className="relative">
|
|
<input
|
|
value={query}
|
|
onChange={(e) => {
|
|
setQuery(e.target.value);
|
|
setOpen(true);
|
|
}}
|
|
onFocus={() => setOpen(true)}
|
|
placeholder={placeholder}
|
|
className="w-full rounded border border-border px-3 py-2 text-sm"
|
|
/>
|
|
{open && (
|
|
<div className="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded border border-border bg-white shadow-lg">
|
|
{filtered.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
|
|
{filtered.slice(0, 50).map((c) => (
|
|
<button
|
|
key={c}
|
|
type="button"
|
|
onClick={() => {
|
|
onChange(c);
|
|
setQuery(c);
|
|
setOpen(false);
|
|
}}
|
|
className="block w-full px-3 py-2 text-left text-sm hover:bg-surface"
|
|
>
|
|
{c}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|