Добавление настроек в localStorage

FRONT/DEV/src/components/settings/SettingItem.tsx

@@ -66,19 +66,23 @@ const LabelCheckbox = styled.label`
     }
 `
 
+interface SettingItemProps {
+    setting: Setting;
+    value: any;
+    onChange: (value: any) => void;
+}
 
-export const SettingItem = ({ setting }: { setting: Setting }) => {
-    const { updateSetting } = useSettingsStore();
+export const SettingItem = ({ setting, value, onChange }: SettingItemProps) => {
     const theme = useTheme();
+    const { updateSetting } = useSettingsStore();
 
-    const handleChange = (
-        e: ChangeEvent<HTMLInputElement | HTMLSelectElement>
-    ) => {
-        const value =
-            setting.type === 'boolean'
-                ? (e.target as HTMLInputElement).checked
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const newValue = setting.type === 'boolean'
+            ? (e.target as HTMLInputElement).checked
+            : setting.type === 'number'
+                ? Number(e.target.value)
                 : e.target.value;
-        updateSetting(setting.id, value);
+        onChange(newValue);
     };
 
     return (
@@ -122,7 +126,7 @@ export const SettingItem = ({ setting }: { setting: Setting }) => {
                 <MainButton
                     type="button"
                     size="small"
-                    title={setting.value}
+                    title={setting.defaultValue || ''}
                 />
             )}
         </SettingBlock>

FRONT/DEV/src/components/settings/Settings.tsx

@@ -53,32 +53,45 @@ const CloseBtn = styled.span`
 `
 
 export const Settings = ({onClose}: Props) => {
-    const {settings, activeSection, setActiveSection, initializeSettings} = useSettingsStore();
+    const {
+        settingsConfig,
+        settingsValues,
+        activeSection,
+        setActiveSection,
+        initializeSettings,
+        updateSetting
+    } = useSettingsStore();
+
+    const settingsBySection = useMemo(() => {
+        return settingsConfig.reduce((acc, setting) => {
+            if (!acc[setting.sectionId]) {
+                acc[setting.sectionId] = [];
+            }
+            acc[setting.sectionId].push({
+                ...setting,
+                value: settingsValues[setting.id] ?? setting.defaultValue
+            });
+            return acc;
+        }, {} as Record<string, Setting[]>);
+    }, [settingsConfig, settingsValues]);
+
+    const sections = Object.keys(settingsBySection);
 
     useEffect(() => {
         initializeSettings();
     }, [initializeSettings]);
 
-    const settingsBySection = useMemo(() => {
-        return settings.reduce((acc, setting) => {
-            if (!acc[setting.sectionId]) {
-                acc[setting.sectionId] = [];
-            }
-            acc[setting.sectionId].push(setting);
-            return acc;
-        }, {} as Record<string, Setting[]>);
-    }, [settings]);
-
-
-    const sections = Object.keys(settingsBySection);
-
-
     useEffect(() => {
         if (sections.length > 0 && !activeSection) {
             setActiveSection(sections[0]);
         }
     }, [sections, activeSection, setActiveSection]);
 
+    const handleSave = () => {
+        onClose();
+    };
+
+
     return (
         <ModalContainer style={{ height: '60vh', width: '50vw'}}>
             <ModalTitle>
@@ -104,8 +117,13 @@ export const Settings = ({onClose}: Props) => {
                 <SectionActive>
                     {activeSection && settingsBySection[activeSection] && (
                         <>
-                            {settingsBySection[activeSection].map((setting)=>(
-                                <SettingItem setting={setting} key={setting.id}/>
+                            {settingsBySection[activeSection].map((setting) => (
+                                <SettingItem
+                                    key={setting.id}
+                                    setting={setting}
+                                    value={settingsValues[setting.id] ?? setting.defaultValue}
+                                    onChange={(value) => updateSetting(setting.id, value)}
+                                />
                             ))}
                         </>
                     )}
@@ -117,7 +135,7 @@ export const Settings = ({onClose}: Props) => {
                     type="button"
                     size="small"
                     title='Сохранить'
-                    onClick={onClose}
+                    onClick={handleSave}
                 />
             </ButtonContainer>
         </ModalContainer>

FRONT/DEV/src/components/workSpace/modules/appModules/usersScanner/modules/TableScanner.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import { DeviceUser } from '../../../../../../store/useDeviceStore';
 
 interface TableScannerProps {
@@ -10,6 +10,7 @@ import {buttonNames} from "../../../../../../const/buttons/names";
 import {ModalMap} from "../../../../../modalwindows/windowsType";
 import {useModalContext} from "../../../../../../store";
 import Pagination from "../../../../../UI/Pagination";
+import {useSettingsStore} from "../../../../../../store/settingsStore";
 
 const TableContainer = styled.div`
   width: 100%;
@@ -74,9 +75,19 @@ const TableScanner = ({devices}:TableScannerProps) => {
         });
     };
 
+    const paginateSetting = useSettingsStore(state =>
+        state.settingsValues['paginate-nodes'] ??
+        state.settingsConfig.find(s => s.id === 'paginate-nodes')?.defaultValue ??
+        15
+    );
+
     // Пагинация
     const [currentPage, setCurrentPage] = useState(1);
-    const [devicesPerPage] = useState(15);
+    const [devicesPerPage, setDevicesPerPage] = useState(paginateSetting);
+
+    useEffect(() => {
+        setDevicesPerPage(paginateSetting);
+    }, [paginateSetting]);
 
     const indexOfLastDevice = currentPage * devicesPerPage;
     const indexOfFirstDevice = indexOfLastDevice - devicesPerPage;