@visns-studio/visns-components 6.17.2 → 6.20.1

package/src/components/vault/VaultClientPicker.jsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Building2, Loader2, X } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Vault.module.scss';
+import useDebouncedValue from './useDebouncedValue';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+
+/**
+ * Attach a vault entry to a client.
+ *
+ * A typeahead rather than a select, because the practice has thousands of
+ * clients and a select of that size is unusable — and rather than a free-text
+ * box, because the entry stores a foreign key and a typed name that matches
+ * nothing would silently save as "no client".
+ *
+ * The chosen client is held as `{ id, label }` so the field can render the
+ * current selection on an existing entry without a lookup: the list payload
+ * already carries `client_id` and `client_label`.
+ *
+ * The endpoint is optional. When the host app has not configured a client
+ * model the route answers with an empty list, so this degrades to a field that
+ * finds nothing rather than to an error.
+ */
+const VaultClientPicker = ({
+    value = null,
+    onChange,
+    endpoints,
+    disabled = false,
+    placeholder = 'Search clients…',
+}) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const [term, setTerm] = useState('');
+    const [results, setResults] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [active, setActive] = useState(0);
+
+    const debounced = useDebouncedValue(term, 220);
+    const mountedRef = useRef(true);
+    const boxRef = useRef(null);
+
+    // The last term actually requested, so a response that arrives out of
+    // order cannot overwrite the results for what the user is typing now.
+    const inFlightRef = useRef('');
+
+    useEffect(() => () => {
+        mountedRef.current = false;
+    }, []);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        const onDocClick = (e) => {
+            if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false);
+        };
+
+        document.addEventListener('mousedown', onDocClick);
+
+        return () => document.removeEventListener('mousedown', onDocClick);
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+
+        inFlightRef.current = debounced;
+        setLoading(true);
+
+        CustomFetch(
+            routes.clients,
+            'GET',
+            { q: debounced },
+            (result) => {
+                if (!mountedRef.current || inFlightRef.current !== debounced) return;
+
+                setResults(result?.data || []);
+                setActive(0);
+                setLoading(false);
+            },
+            null
+        ).catch(() => {
+            if (!mountedRef.current || inFlightRef.current !== debounced) return;
+
+            // A picker that cannot reach the server shows nothing rather than
+            // a toast — it is one optional field on a form.
+            setResults([]);
+            setLoading(false);
+        });
+    }, [debounced, open, routes.clients]);
+
+    const choose = (client) => {
+        onChange?.(client);
+        setTerm('');
+        setOpen(false);
+    };
+
+    const onKeyDown = (e) => {
+        if (!open) return;
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActive((i) => Math.min(i + 1, results.length - 1));
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActive((i) => Math.max(i - 1, 0));
+        } else if (e.key === 'Enter' && results[active]) {
+            e.preventDefault();
+            choose(results[active]);
+        } else if (e.key === 'Escape') {
+            setOpen(false);
+        }
+    };
+
+    if (value?.id) {
+        return (
+            <div className={styles.clientChosen}>
+                <Building2 size={15} strokeWidth={2} />
+                <span className={styles.clientChosenLabel}>{value.label}</span>
+                {!disabled && (
+                    <button
+                        type="button"
+                        className={styles.clientClear}
+                        onClick={() => onChange?.(null)}
+                        aria-label={`Detach this entry from ${value.label}`}
+                    >
+                        <X size={13} strokeWidth={2.5} />
+                    </button>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.clientPicker} ref={boxRef}>
+            <input
+                id="vault-client"
+                className={styles.input}
+                value={term}
+                disabled={disabled}
+                placeholder={placeholder}
+                autoComplete="off"
+                role="combobox"
+                aria-expanded={open}
+                aria-controls="vault-client-results"
+                onFocus={() => setOpen(true)}
+                onChange={(e) => {
+                    setTerm(e.target.value);
+                    setOpen(true);
+                }}
+                onKeyDown={onKeyDown}
+            />
+
+            {loading && <Loader2 size={15} className={styles.clientSpinner} />}
+
+            {open && (
+                <ul className={styles.clientResults} id="vault-client-results" role="listbox">
+                    {results.map((client, i) => (
+                        <li key={client.id} role="option" aria-selected={i === active}>
+                            <button
+                                type="button"
+                                className={i === active ? styles.clientResultActive : styles.clientResult}
+                                onMouseEnter={() => setActive(i)}
+                                onClick={() => choose(client)}
+                            >
+                                <Building2 size={14} strokeWidth={2} />
+                                {client.label}
+                            </button>
+                        </li>
+                    ))}
+
+                    {!loading && results.length === 0 && (
+                        <li className={styles.clientEmpty}>
+                            {term ? `No client matches “${term}”` : 'Start typing to find a client'}
+                        </li>
+                    )}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default VaultClientPicker;

package/src/components/vault/VaultEntryForm.jsx

@@ -16,6 +16,7 @@ import CustomFetch from '../Fetch';
 import StandardModal from '../generic/StandardModal';
 import styles from '../styles/Vault.module.scss';
 import PasswordGenerator from './PasswordGenerator';
+import VaultClientPicker from './VaultClientPicker';
 import QrScanner from './QrScanner';
 import { decodeFromBlob, imageFromTransfer } from './qrDecode';
 import { resolveVaultEndpoints } from './vaultEndpoints';
@@ -76,6 +77,14 @@ const VaultEntryForm = ({
     const [tags, setTags] = useState(() => parseTags(entry?.tags || prefill.tags || []));
     const [tagDraft, setTagDraft] = useState('');
 
+    // Held as {id, label} so an existing entry renders its client without a
+    // lookup — the list payload already carries both.
+    const [client, setClient] = useState(() => {
+        const id = entry?.client_id ?? prefill.client_id ?? null;
+
+        return id ? { id, label: entry?.client_label || prefill.client_label || `#${id}` } : null;
+    });
+
     const [password, setPassword] = useState('');
     const [clearPassword, setClearPassword] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
@@ -260,6 +269,9 @@ const VaultEntryForm = ({
             notes: values.notes || '',
             tags,
             visibility: values.visibility,
+            // Always sent, including as null — that is how an entry gets
+            // detached from a client it was attached to by mistake.
+            client_id: client?.id ?? null,
         };
 
         // Key presence is the contract — see the note at the top of the file.
@@ -370,6 +382,17 @@ const VaultEntryForm = ({
                     />
                 )}
 
+                {field(
+                    'client_id',
+                    'Client',
+                    <VaultClientPicker
+                        value={client}
+                        onChange={setClient}
+                        endpoints={endpoints}
+                    />,
+                    'Attach this credential to the client it belongs to, so it turns up on their record.'
+                )}
+
                 {field(
                     'username',
                     'Username',