691 lines
23 KiB
JavaScript
691 lines
23 KiB
JavaScript
import { useEffect, useRef, useState } from 'react';
|
|
import { TabView, TabPanel } from 'primereact/tabview';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
import { InputSwitch } from 'primereact/inputswitch';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Tag } from 'primereact/tag';
|
|
|
|
function normalizeText(value) {
|
|
return String(value || '').trim().toLowerCase();
|
|
}
|
|
|
|
function normalizeSettingKey(value) {
|
|
return String(value || '').trim().toLowerCase();
|
|
}
|
|
|
|
const GENERAL_TOOL_KEYS = new Set([
|
|
'makemkv_command',
|
|
'makemkv_registration_key',
|
|
'makemkv_min_length_minutes',
|
|
'mediainfo_command',
|
|
'handbrake_command',
|
|
'handbrake_restart_delete_incomplete_output',
|
|
'script_test_timeout_ms'
|
|
]);
|
|
|
|
const HANDBRAKE_PRESET_SETTING_KEYS = new Set([
|
|
'handbrake_preset',
|
|
'handbrake_preset_bluray',
|
|
'handbrake_preset_dvd'
|
|
]);
|
|
|
|
const NOTIFICATION_EVENT_TOGGLE_KEYS = new Set([
|
|
'pushover_notify_metadata_ready',
|
|
'pushover_notify_rip_started',
|
|
'pushover_notify_encoding_started',
|
|
'pushover_notify_job_finished',
|
|
'pushover_notify_job_error',
|
|
'pushover_notify_job_cancelled',
|
|
'pushover_notify_reencode_started',
|
|
'pushover_notify_reencode_finished'
|
|
]);
|
|
|
|
const PUSHOVER_ENABLED_SETTING_KEY = 'pushover_enabled';
|
|
const EXPERT_MODE_SETTING_KEY = 'ui_expert_mode';
|
|
const ALWAYS_HIDDEN_SETTING_KEYS = new Set([
|
|
'drive_device',
|
|
'makemkv_rip_mode',
|
|
'makemkv_rip_mode_bluray',
|
|
'makemkv_rip_mode_dvd',
|
|
'makemkv_backup_mode'
|
|
]);
|
|
const EXPERT_ONLY_SETTING_KEYS = new Set([
|
|
'pushover_device',
|
|
'pushover_priority',
|
|
'pushover_timeout_ms',
|
|
'makemkv_source_index',
|
|
'disc_poll_interval_ms',
|
|
'hardware_monitoring_interval_ms',
|
|
'makemkv_command',
|
|
'mediainfo_command',
|
|
'handbrake_command',
|
|
'mediainfo_extra_args_bluray',
|
|
'mediainfo_extra_args_dvd',
|
|
'makemkv_analyze_extra_args_bluray',
|
|
'makemkv_analyze_extra_args_dvd',
|
|
'makemkv_rip_extra_args_bluray',
|
|
'makemkv_rip_extra_args_dvd',
|
|
'cdparanoia_command'
|
|
]);
|
|
|
|
function toBoolean(value) {
|
|
if (typeof value === 'boolean') {
|
|
return value;
|
|
}
|
|
if (typeof value === 'number') {
|
|
return value !== 0;
|
|
}
|
|
const normalized = normalizeText(value);
|
|
if (!normalized) {
|
|
return false;
|
|
}
|
|
return normalized === 'true' || normalized === '1' || normalized === 'yes' || normalized === 'on';
|
|
}
|
|
|
|
function shouldHideSettingByExpertMode(settingKey, expertModeEnabled) {
|
|
const key = normalizeSettingKey(settingKey);
|
|
if (!key) {
|
|
return false;
|
|
}
|
|
if (ALWAYS_HIDDEN_SETTING_KEYS.has(key)) {
|
|
return true;
|
|
}
|
|
if (key === EXPERT_MODE_SETTING_KEY) {
|
|
return true;
|
|
}
|
|
return !expertModeEnabled && EXPERT_ONLY_SETTING_KEYS.has(key);
|
|
}
|
|
|
|
function filterSettingsByVisibility(settings, expertModeEnabled) {
|
|
const list = Array.isArray(settings) ? settings : [];
|
|
return list.filter((setting) => !shouldHideSettingByExpertMode(setting?.key, expertModeEnabled));
|
|
}
|
|
|
|
function buildToolSections(settings) {
|
|
const list = Array.isArray(settings) ? settings : [];
|
|
const generalBucket = {
|
|
id: 'general',
|
|
title: 'General',
|
|
description: 'Gemeinsame Tool-Settings für alle Medien.',
|
|
settings: []
|
|
};
|
|
const blurayBucket = {
|
|
id: 'bluray',
|
|
title: 'BluRay',
|
|
description: 'Profil-spezifische Settings für Blu-ray.',
|
|
settings: []
|
|
};
|
|
const dvdBucket = {
|
|
id: 'dvd',
|
|
title: 'DVD',
|
|
description: 'Profil-spezifische Settings für DVD.',
|
|
settings: []
|
|
};
|
|
const fallbackBucket = {
|
|
id: 'other',
|
|
title: 'Weitere Tool-Settings',
|
|
description: null,
|
|
settings: []
|
|
};
|
|
|
|
for (const setting of list) {
|
|
const key = normalizeSettingKey(setting?.key);
|
|
if (GENERAL_TOOL_KEYS.has(key)) {
|
|
generalBucket.settings.push(setting);
|
|
continue;
|
|
}
|
|
if (key.endsWith('_bluray')) {
|
|
blurayBucket.settings.push(setting);
|
|
continue;
|
|
}
|
|
if (key.endsWith('_dvd')) {
|
|
dvdBucket.settings.push(setting);
|
|
continue;
|
|
}
|
|
fallbackBucket.settings.push(setting);
|
|
}
|
|
|
|
const sections = [
|
|
generalBucket,
|
|
blurayBucket,
|
|
dvdBucket
|
|
].filter((item) => item.settings.length > 0);
|
|
if (fallbackBucket.settings.length > 0) {
|
|
sections.push(fallbackBucket);
|
|
}
|
|
return sections;
|
|
}
|
|
|
|
// Path keys per medium — _owner keys are rendered inline
|
|
const BLURAY_PATH_KEYS = ['raw_dir_bluray', 'movie_dir_bluray', 'output_template_bluray'];
|
|
const DVD_PATH_KEYS = ['raw_dir_dvd', 'movie_dir_dvd', 'output_template_dvd'];
|
|
const CD_PATH_KEYS = ['raw_dir_cd', 'movie_dir_cd', 'cd_output_template'];
|
|
const LOG_PATH_KEYS = ['log_dir'];
|
|
|
|
function buildSectionsForCategory(categoryName, settings) {
|
|
const list = Array.isArray(settings) ? settings : [];
|
|
const normalizedCategory = normalizeText(categoryName);
|
|
if (normalizedCategory === 'tools') {
|
|
const sections = buildToolSections(list);
|
|
if (sections.length > 0) {
|
|
return sections;
|
|
}
|
|
}
|
|
return [
|
|
{
|
|
id: 'all',
|
|
title: null,
|
|
description: null,
|
|
settings: list
|
|
}
|
|
];
|
|
}
|
|
|
|
function isHandBrakePresetSetting(setting) {
|
|
const key = String(setting?.key || '').trim().toLowerCase();
|
|
return HANDBRAKE_PRESET_SETTING_KEYS.has(key);
|
|
}
|
|
|
|
function isNotificationEventToggleSetting(setting) {
|
|
return setting?.type === 'boolean' && NOTIFICATION_EVENT_TOGGLE_KEYS.has(normalizeSettingKey(setting?.key));
|
|
}
|
|
|
|
function SettingField({
|
|
setting,
|
|
value,
|
|
error,
|
|
dirty,
|
|
ownerSetting,
|
|
ownerValue,
|
|
ownerError,
|
|
ownerDirty,
|
|
onChange,
|
|
variant = 'default'
|
|
}) {
|
|
const ownerKey = ownerSetting?.key;
|
|
const pathHasValue = Boolean(String(value ?? '').trim());
|
|
const isNotificationToggleBox = variant === 'notification-toggle' && setting?.type === 'boolean';
|
|
|
|
return (
|
|
<div className={`setting-row${isNotificationToggleBox ? ' notification-toggle-box' : ''}`}>
|
|
{isNotificationToggleBox ? (
|
|
<div className="notification-toggle-head">
|
|
<label htmlFor={setting.key}>
|
|
{setting.label}
|
|
{setting.required && <span className="required">*</span>}
|
|
</label>
|
|
<InputSwitch
|
|
id={setting.key}
|
|
checked={Boolean(value)}
|
|
onChange={(event) => onChange?.(setting.key, event.value)}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<label htmlFor={setting.key}>
|
|
{setting.label}
|
|
{setting.required && <span className="required">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
{setting.type === 'string' || setting.type === 'path' ? (
|
|
<InputText
|
|
id={setting.key}
|
|
value={value ?? ''}
|
|
onChange={(event) => onChange?.(setting.key, event.target.value)}
|
|
/>
|
|
) : null}
|
|
|
|
{setting.type === 'number' ? (
|
|
<InputNumber
|
|
id={setting.key}
|
|
value={value ?? 0}
|
|
onValueChange={(event) => onChange?.(setting.key, event.value)}
|
|
mode="decimal"
|
|
useGrouping={false}
|
|
/>
|
|
) : null}
|
|
|
|
{setting.type === 'boolean' && !isNotificationToggleBox ? (
|
|
<InputSwitch
|
|
id={setting.key}
|
|
checked={Boolean(value)}
|
|
onChange={(event) => onChange?.(setting.key, event.value)}
|
|
/>
|
|
) : null}
|
|
|
|
{setting.type === 'select' ? (
|
|
<Dropdown
|
|
id={setting.key}
|
|
value={value}
|
|
options={setting.options}
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
optionDisabled="disabled"
|
|
onChange={(event) => onChange?.(setting.key, event.value)}
|
|
/>
|
|
) : null}
|
|
|
|
<small className="setting-description">{setting.description || ''}</small>
|
|
{isHandBrakePresetSetting(setting) ? (
|
|
<small>
|
|
Preset-Erklärung:{' '}
|
|
<a
|
|
href="https://handbrake.fr/docs/en/latest/technical/official-presets.html"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
HandBrake Official Presets
|
|
</a>
|
|
</small>
|
|
) : null}
|
|
{error ? (
|
|
<small className="error-text">{error}</small>
|
|
) : (
|
|
<Tag
|
|
value={dirty ? 'Ungespeichert' : 'Gespeichert'}
|
|
severity={dirty ? 'warning' : 'success'}
|
|
className="saved-tag"
|
|
/>
|
|
)}
|
|
|
|
{ownerSetting ? (
|
|
<div className="setting-owner-row">
|
|
<label htmlFor={ownerKey} className="setting-owner-label">
|
|
Eigentümer (user:gruppe)
|
|
</label>
|
|
<InputText
|
|
id={ownerKey}
|
|
value={ownerValue ?? ''}
|
|
placeholder="z.B. michael:ripster"
|
|
disabled={!pathHasValue}
|
|
onChange={(event) => onChange?.(ownerKey, event.target.value)}
|
|
/>
|
|
{ownerError ? (
|
|
<small className="error-text">{ownerError}</small>
|
|
) : (
|
|
<Tag
|
|
value={ownerDirty ? 'Ungespeichert' : 'Gespeichert'}
|
|
severity={ownerDirty ? 'warning' : 'success'}
|
|
className="saved-tag"
|
|
/>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PathMediumCard({ title, pathSettings, settingsByKey, values, errors, dirtyKeys, onChange }) {
|
|
// Filter out _owner keys since they're rendered inline
|
|
const visibleSettings = pathSettings.filter(
|
|
(s) => !String(s?.key || '').endsWith('_owner')
|
|
);
|
|
|
|
if (visibleSettings.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="path-medium-card">
|
|
<div className="path-medium-card-header">
|
|
<h4>{title}</h4>
|
|
</div>
|
|
<div className="settings-grid">
|
|
{visibleSettings.map((setting) => {
|
|
const value = values?.[setting.key];
|
|
const error = errors?.[setting.key] || null;
|
|
const dirty = Boolean(dirtyKeys?.has?.(setting.key));
|
|
const ownerKey = `${setting.key}_owner`;
|
|
const ownerSetting = settingsByKey.get(ownerKey) || null;
|
|
const ownerValue = values?.[ownerKey];
|
|
const ownerError = errors?.[ownerKey] || null;
|
|
const ownerDirty = Boolean(dirtyKeys?.has?.(ownerKey));
|
|
|
|
return (
|
|
<SettingField
|
|
key={setting.key}
|
|
setting={setting}
|
|
value={value}
|
|
error={error}
|
|
dirty={dirty}
|
|
ownerSetting={ownerSetting}
|
|
ownerValue={ownerValue}
|
|
ownerError={ownerError}
|
|
ownerDirty={ownerDirty}
|
|
onChange={onChange}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PathCategoryTab({ settings, values, errors, dirtyKeys, onChange, effectivePaths }) {
|
|
const list = Array.isArray(settings) ? settings : [];
|
|
const settingsByKey = new Map(list.map((s) => [s.key, s]));
|
|
|
|
const bluraySettings = list.filter((s) => BLURAY_PATH_KEYS.includes(s.key) || (s.key.endsWith('_owner') && BLURAY_PATH_KEYS.includes(s.key.replace('_owner', ''))));
|
|
const dvdSettings = list.filter((s) => DVD_PATH_KEYS.includes(s.key) || (s.key.endsWith('_owner') && DVD_PATH_KEYS.includes(s.key.replace('_owner', ''))));
|
|
const cdSettings = list.filter((s) => CD_PATH_KEYS.includes(s.key) || (s.key.endsWith('_owner') && CD_PATH_KEYS.includes(s.key.replace('_owner', ''))));
|
|
const logSettings = list.filter((s) => LOG_PATH_KEYS.includes(s.key));
|
|
|
|
const defaultRaw = effectivePaths?.defaults?.raw || 'data/output/raw';
|
|
const defaultMovies = effectivePaths?.defaults?.movies || 'data/output/movies';
|
|
const defaultCd = effectivePaths?.defaults?.cd || 'data/output/cd';
|
|
|
|
const ep = effectivePaths || {};
|
|
const blurayRaw = ep.bluray?.raw || defaultRaw;
|
|
const blurayMovies = ep.bluray?.movies || defaultMovies;
|
|
const dvdRaw = ep.dvd?.raw || defaultRaw;
|
|
const dvdMovies = ep.dvd?.movies || defaultMovies;
|
|
const cdRaw = ep.cd?.raw || defaultCd;
|
|
const cdMovies = ep.cd?.movies || cdRaw;
|
|
|
|
const isDefault = (path, def) => path === def;
|
|
|
|
return (
|
|
<div className="path-category-tab">
|
|
{/* Effektive Pfade Übersicht */}
|
|
<div className="path-overview-card">
|
|
<div className="path-overview-header">
|
|
<h4>Effektive Pfade</h4>
|
|
<small>Zeigt die tatsächlich verwendeten Pfade entsprechend der aktuellen Konfiguration.</small>
|
|
</div>
|
|
<table className="path-overview-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Medium</th>
|
|
<th>RAW-Ordner</th>
|
|
<th>Film-Ordner</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Blu-ray</strong></td>
|
|
<td>
|
|
<code>{blurayRaw}</code>
|
|
{isDefault(blurayRaw, defaultRaw) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
<td>
|
|
<code>{blurayMovies}</code>
|
|
{isDefault(blurayMovies, defaultMovies) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>DVD</strong></td>
|
|
<td>
|
|
<code>{dvdRaw}</code>
|
|
{isDefault(dvdRaw, defaultRaw) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
<td>
|
|
<code>{dvdMovies}</code>
|
|
{isDefault(dvdMovies, defaultMovies) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>CD / Audio</strong></td>
|
|
<td>
|
|
<code>{cdRaw}</code>
|
|
{isDefault(cdRaw, defaultCd) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
<td>
|
|
<code>{cdMovies}</code>
|
|
{isDefault(cdMovies, cdRaw) && <span className="path-default-badge">Standard</span>}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Medium-Karten */}
|
|
<div className="path-medium-cards">
|
|
<PathMediumCard
|
|
title="Blu-ray"
|
|
pathSettings={bluraySettings}
|
|
settingsByKey={settingsByKey}
|
|
values={values}
|
|
errors={errors}
|
|
dirtyKeys={dirtyKeys}
|
|
onChange={onChange}
|
|
/>
|
|
<PathMediumCard
|
|
title="DVD"
|
|
pathSettings={dvdSettings}
|
|
settingsByKey={settingsByKey}
|
|
values={values}
|
|
errors={errors}
|
|
dirtyKeys={dirtyKeys}
|
|
onChange={onChange}
|
|
/>
|
|
<PathMediumCard
|
|
title="CD / Audio"
|
|
pathSettings={cdSettings}
|
|
settingsByKey={settingsByKey}
|
|
values={values}
|
|
errors={errors}
|
|
dirtyKeys={dirtyKeys}
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
|
|
{/* Log-Ordner */}
|
|
{logSettings.length > 0 && (
|
|
<div className="path-medium-card">
|
|
<div className="path-medium-card-header">
|
|
<h4>Logs</h4>
|
|
</div>
|
|
<div className="settings-grid">
|
|
{logSettings.map((setting) => {
|
|
const value = values?.[setting.key];
|
|
const error = errors?.[setting.key] || null;
|
|
const dirty = Boolean(dirtyKeys?.has?.(setting.key));
|
|
return (
|
|
<SettingField
|
|
key={setting.key}
|
|
setting={setting}
|
|
value={value}
|
|
error={error}
|
|
dirty={dirty}
|
|
ownerSetting={null}
|
|
ownerValue={null}
|
|
ownerError={null}
|
|
ownerDirty={false}
|
|
onChange={onChange}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function DynamicSettingsForm({
|
|
categories,
|
|
values,
|
|
errors,
|
|
dirtyKeys,
|
|
onChange,
|
|
effectivePaths
|
|
}) {
|
|
const safeCategories = Array.isArray(categories) ? categories : [];
|
|
const expertModeEnabled = toBoolean(values?.[EXPERT_MODE_SETTING_KEY]);
|
|
const visibleCategories = safeCategories
|
|
.map((category) => ({
|
|
...category,
|
|
settings: filterSettingsByVisibility(category?.settings, expertModeEnabled)
|
|
}))
|
|
.filter((category) => Array.isArray(category?.settings) && category.settings.length > 0);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const rootRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (visibleCategories.length === 0) {
|
|
setActiveIndex(0);
|
|
return;
|
|
}
|
|
if (activeIndex < 0 || activeIndex >= visibleCategories.length) {
|
|
setActiveIndex(0);
|
|
}
|
|
}, [activeIndex, visibleCategories.length]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return undefined;
|
|
}
|
|
const syncToggleHeights = () => {
|
|
const root = rootRef.current;
|
|
if (!root) {
|
|
return;
|
|
}
|
|
const grids = root.querySelectorAll('.notification-toggle-grid');
|
|
for (const grid of grids) {
|
|
const cards = Array.from(grid.querySelectorAll('.notification-toggle-box'));
|
|
if (cards.length === 0) {
|
|
continue;
|
|
}
|
|
for (const card of cards) {
|
|
card.style.minHeight = '0px';
|
|
}
|
|
const maxHeight = cards.reduce((acc, card) => Math.max(acc, Number(card.offsetHeight || 0)), 0);
|
|
if (maxHeight <= 0) {
|
|
continue;
|
|
}
|
|
for (const card of cards) {
|
|
card.style.minHeight = `${maxHeight}px`;
|
|
}
|
|
}
|
|
};
|
|
|
|
const frameId = window.requestAnimationFrame(syncToggleHeights);
|
|
window.addEventListener('resize', syncToggleHeights);
|
|
return () => {
|
|
window.cancelAnimationFrame(frameId);
|
|
window.removeEventListener('resize', syncToggleHeights);
|
|
};
|
|
}, [activeIndex, visibleCategories, values]);
|
|
|
|
if (visibleCategories.length === 0) {
|
|
return <p>Keine Kategorien vorhanden.</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="dynamic-settings-form" ref={rootRef}>
|
|
<TabView
|
|
className="settings-tabview"
|
|
activeIndex={activeIndex}
|
|
onTabChange={(event) => setActiveIndex(Number(event.index || 0))}
|
|
scrollable
|
|
>
|
|
{visibleCategories.map((category, categoryIndex) => (
|
|
<TabPanel
|
|
key={`${category.category || 'category'}-${categoryIndex}`}
|
|
header={category.category || `Kategorie ${categoryIndex + 1}`}
|
|
>
|
|
{normalizeText(category?.category) === 'pfade' ? (
|
|
<PathCategoryTab
|
|
settings={category?.settings || []}
|
|
values={values}
|
|
errors={errors}
|
|
dirtyKeys={dirtyKeys}
|
|
onChange={onChange}
|
|
effectivePaths={effectivePaths}
|
|
/>
|
|
) : (() => {
|
|
const sections = buildSectionsForCategory(category?.category, category?.settings || []);
|
|
const grouped = sections.length > 1;
|
|
const isNotificationCategory = normalizeText(category?.category) === 'benachrichtigungen';
|
|
const pushoverEnabled = toBoolean(values?.[PUSHOVER_ENABLED_SETTING_KEY]);
|
|
|
|
return (
|
|
<div className="settings-sections">
|
|
{sections.map((section) => (
|
|
<section
|
|
key={`${category?.category || 'category'}-${section.id}`}
|
|
className={`settings-section${grouped ? ' grouped' : ''}`}
|
|
>
|
|
{section.title ? (
|
|
<div className="settings-section-head">
|
|
<h4>{section.title}</h4>
|
|
{section.description ? <small>{section.description}</small> : null}
|
|
</div>
|
|
) : null}
|
|
{(() => {
|
|
const ownerKeySet = new Set(
|
|
(section.settings || [])
|
|
.filter((s) => String(s.key || '').endsWith('_owner'))
|
|
.map((s) => s.key)
|
|
);
|
|
const settingsByKey = new Map(
|
|
(section.settings || []).map((s) => [s.key, s])
|
|
);
|
|
const baseSettings = (section.settings || []).filter(
|
|
(s) => !ownerKeySet.has(s.key)
|
|
);
|
|
const notificationToggleSettings = isNotificationCategory
|
|
? baseSettings.filter((setting) => isNotificationEventToggleSetting(setting))
|
|
: [];
|
|
const notificationToggleKeys = new Set(
|
|
notificationToggleSettings.map((setting) => normalizeSettingKey(setting?.key))
|
|
);
|
|
const regularSettings = baseSettings.filter(
|
|
(setting) => !notificationToggleKeys.has(normalizeSettingKey(setting?.key))
|
|
);
|
|
const renderSetting = (setting, variant = 'default') => {
|
|
const value = values?.[setting.key];
|
|
const error = errors?.[setting.key] || null;
|
|
const dirty = Boolean(dirtyKeys?.has?.(setting.key));
|
|
|
|
const ownerKey = `${setting.key}_owner`;
|
|
const ownerSetting = settingsByKey.get(ownerKey) || null;
|
|
const ownerValue = values?.[ownerKey];
|
|
const ownerError = errors?.[ownerKey] || null;
|
|
const ownerDirty = Boolean(dirtyKeys?.has?.(ownerKey));
|
|
|
|
return (
|
|
<SettingField
|
|
key={setting.key}
|
|
setting={setting}
|
|
value={value}
|
|
error={error}
|
|
dirty={dirty}
|
|
ownerSetting={ownerSetting}
|
|
ownerValue={ownerValue}
|
|
ownerError={ownerError}
|
|
ownerDirty={ownerDirty}
|
|
onChange={onChange}
|
|
variant={variant}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{regularSettings.length > 0 ? (
|
|
<div className="settings-grid">
|
|
{regularSettings.map((setting) => renderSetting(setting))}
|
|
</div>
|
|
) : null}
|
|
{pushoverEnabled && notificationToggleSettings.length > 0 ? (
|
|
<div className="notification-toggle-grid">
|
|
{notificationToggleSettings.map((setting) => renderSetting(setting, 'notification-toggle'))}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
})()}
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
})()}
|
|
</TabPanel>
|
|
))}
|
|
</TabView>
|
|
</div>
|
|
);
|
|
}
|