Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5
2026-07-30 06:11:24 +00:00
parent 5476c1bab5
commit da158cfd84
114 changed files with 26045 additions and 2 deletions
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import styles from './SearchableSelect.module.scss';
+import { Icon } from './Icon';
+import { texts } from '../../texts';
+
+export interface ISearchableOption {
+  value: string;
+  label: string;
+  /** Второстепенная строка под названием — например, компания у отдела. */
+  sublabel?: string;
+}
+
+export interface ISearchableSelectProps {
+  options: ISearchableOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Показывать пункт «очистить» — для необязательных полей. */
+  allowClear?: boolean;
+  clearLabel?: string;
+  /** Текст, когда список опций пуст (не результат поиска, а вообще нечего выбирать). */
+  emptyMessage?: string;
+}
+
+export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = texts.select.placeholder,
+  searchPlaceholder = texts.select.searchPlaceholder,
+  disabled,
+  loading,
+  allowClear,
+  clearLabel = texts.select.notSelected,
+  emptyMessage = texts.select.nothingFound
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState('');
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const searchRef = React.useRef<HTMLInputElement>(null);
+
+  // Сохранённое значение может отсутствовать в справочнике (запись удалили в 1С
+  // или она не проходит текущий фильтр). Показать в этом случае плейсхолдер —
+  // значит соврать, будто поле пустое, и затереть значение при сохранении.
+  // Поэтому подмешиваем недостающую опцию явным образом.
+  const effectiveOptions = React.useMemo(() => {
+    if (!value || options.some(o => o.value === value)) return options;
+    return [{ value, label: value, sublabel: texts.select.missingInDictionary }, ...options];
+  }, [options, value]);
+
+  const selected = effectiveOptions.filter(o => o.value === value)[0];
+
+  // Поиск на клиенте: справочник целиком уже загружен, отделов ~700 —
+  // фильтровать в памяти дешевле, чем ходить на сервер на каждый символ.
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return effectiveOptions;
+    return effectiveOptions.filter(o =>
+      o.label.toLowerCase().indexOf(q) !== -1 ||
+      (o.sublabel ? o.sublabel.toLowerCase().indexOf(q) !== -1 : false)
+    );
+  }, [effectiveOptions, query]);
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const onDocumentMouseDown = (e: MouseEvent): void => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+
+    document.addEventListener('mousedown', onDocumentMouseDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onDocumentMouseDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  React.useEffect(() => {
+    if (open && searchRef.current) searchRef.current.focus();
+  }, [open]);
+
+  const toggle = (): void => {
+    if (disabled) return;
+    setQuery('');
+    setOpen(!open);
+  };
+
+  const pick = (next: string): void => {
+    onChange(next);
+    setOpen(false);
+  };
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      <button
+        type="button"
+        className={`${styles.trigger} ${open ? styles.open : ''}`}
+        onClick={toggle}
+        disabled={disabled || loading}
+      >
+        <span className={`${styles.value} ${selected ? '' : styles.placeholder}`}>
+          {loading ? texts.select.loadingDictionary : (selected ? selected.label : placeholder)}
+        </span>
+        <Icon name="chevron-down" size="sm" className={styles.chevron} />
+      </button>
+
+      {open && (
+        <div className={styles.menu}>
+          <input
+            ref={searchRef}
+            className={styles.search}
+            placeholder={searchPlaceholder}
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+          />
+          <div className={styles.list}>
+            {filtered.length === 0 && (
+              <div className={styles.empty}>
+                {effectiveOptions.length === 0 ? emptyMessage : texts.select.nothingFound}
+              </div>
+            )}
+            {filtered.map(opt => (
+              <button
+                type="button"
+                key={opt.value}
+                className={`${styles.item} ${opt.value === value ? styles.selected : ''}`}
+                onClick={() => pick(opt.value)}
+              >
+                {opt.label}
+                {opt.sublabel && <span className={styles.itemSub}>{opt.sublabel}</span>}
+              </button>
+            ))}
+          </div>
+          {allowClear && value && (
+            <div className={styles.clear}>
+              <button type="button" className={styles.item} onClick={() => pick('')}>
+                {clearLabel}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};