mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-09-11 10:45:42 +03:00
6206 get table page size from local storage
Updates #6206
Squashed commit of the following:
commit 03089136a749fbda7da9be1af5997a24738eabb6
Merge: 7078c449c 3ce3c41b5
Author: Ildar Kamalov <ik@adguard.com>
Date: Wed Oct 11 15:25:11 2023 +0300
Merge branch 'master' into ADG-7558
commit 7078c449cb02039b47bdd085de12145b6982ea2c
Author: Ildar Kamalov <ik@adguard.com>
Date: Mon Oct 9 19:47:58 2023 +0300
fix default page size
commit 64569487a916797bbb42246eb935f1388626590e
Author: Ildar Kamalov <ik@adguard.com>
Date: Mon Oct 9 19:47:22 2023 +0300
remove unused
commit 17614fa76b5aab617b807e226f743b9fd461c247
Author: Ildar Kamalov <ik@adguard.com>
Date: Mon Oct 9 19:30:22 2023 +0300
ADG-7473 get table page size from local storage
This commit is contained in:
parent
3ce3c41b59
commit
6a36615629
@ -4,6 +4,7 @@ import ReactTable from 'react-table';
|
|||||||
import { withTranslation } from 'react-i18next';
|
import { withTranslation } from 'react-i18next';
|
||||||
import { sortIp } from '../../../helpers/helpers';
|
import { sortIp } from '../../../helpers/helpers';
|
||||||
import { MODAL_TYPE } from '../../../helpers/constants';
|
import { MODAL_TYPE } from '../../../helpers/constants';
|
||||||
|
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
|
||||||
|
|
||||||
class Table extends Component {
|
class Table extends Component {
|
||||||
cellWrap = ({ value }) => (
|
cellWrap = ({ value }) => (
|
||||||
@ -85,7 +86,8 @@ class Table extends Component {
|
|||||||
loading={processing || processingAdd || processingDelete}
|
loading={processing || processingAdd || processingDelete}
|
||||||
className="-striped -highlight card-table-overflow"
|
className="-striped -highlight card-table-overflow"
|
||||||
showPagination
|
showPagination
|
||||||
defaultPageSize={10}
|
defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE) || 10}
|
||||||
|
onPageSizeChange={(size) => LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE, size)}
|
||||||
minRows={5}
|
minRows={5}
|
||||||
ofText="/"
|
ofText="/"
|
||||||
previousText={t('previous_btn')}
|
previousText={t('previous_btn')}
|
||||||
|
@ -6,6 +6,7 @@ import CellWrap from '../ui/CellWrap';
|
|||||||
import { MODAL_TYPE } from '../../helpers/constants';
|
import { MODAL_TYPE } from '../../helpers/constants';
|
||||||
import { formatDetailedDateTime } from '../../helpers/helpers';
|
import { formatDetailedDateTime } from '../../helpers/helpers';
|
||||||
import { isValidAbsolutePath } from '../../helpers/form';
|
import { isValidAbsolutePath } from '../../helpers/form';
|
||||||
|
import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from '../../helpers/localStorageHelper';
|
||||||
|
|
||||||
class Table extends Component {
|
class Table extends Component {
|
||||||
getDateCell = (row) => CellWrap(row, formatDetailedDateTime);
|
getDateCell = (row) => CellWrap(row, formatDetailedDateTime);
|
||||||
@ -126,12 +127,17 @@ class Table extends Component {
|
|||||||
loading, filters, t, whitelist,
|
loading, filters, t, whitelist,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
const localStorageKey = whitelist
|
||||||
|
? LOCAL_STORAGE_KEYS.ALLOWLIST_PAGE_SIZE
|
||||||
|
: LOCAL_STORAGE_KEYS.BLOCKLIST_PAGE_SIZE;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactTable
|
<ReactTable
|
||||||
data={filters}
|
data={filters}
|
||||||
columns={this.columns}
|
columns={this.columns}
|
||||||
showPagination
|
showPagination
|
||||||
defaultPageSize={10}
|
defaultPageSize={LocalStorageHelper.getItem(localStorageKey) || 10}
|
||||||
|
onPageSizeChange={(size) => LocalStorageHelper.setItem(localStorageKey, size)}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
minRows={6}
|
minRows={6}
|
||||||
ofText="/"
|
ofText="/"
|
||||||
|
@ -9,6 +9,7 @@ import CellWrap from '../../ui/CellWrap';
|
|||||||
import whoisCell from './whoisCell';
|
import whoisCell from './whoisCell';
|
||||||
import LogsSearchLink from '../../ui/LogsSearchLink';
|
import LogsSearchLink from '../../ui/LogsSearchLink';
|
||||||
import { sortIp } from '../../../helpers/helpers';
|
import { sortIp } from '../../../helpers/helpers';
|
||||||
|
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
|
||||||
|
|
||||||
const COLUMN_MIN_WIDTH = 200;
|
const COLUMN_MIN_WIDTH = 200;
|
||||||
|
|
||||||
@ -85,7 +86,10 @@ class AutoClients extends Component {
|
|||||||
]}
|
]}
|
||||||
className="-striped -highlight card-table-overflow"
|
className="-striped -highlight card-table-overflow"
|
||||||
showPagination
|
showPagination
|
||||||
defaultPageSize={10}
|
defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE) || 10}
|
||||||
|
onPageSizeChange={(size) => (
|
||||||
|
LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE, size)
|
||||||
|
)}
|
||||||
minRows={5}
|
minRows={5}
|
||||||
ofText="/"
|
ofText="/"
|
||||||
previousText={t('previous_btn')}
|
previousText={t('previous_btn')}
|
||||||
|
@ -19,6 +19,7 @@ import Card from '../../../ui/Card';
|
|||||||
import CellWrap from '../../../ui/CellWrap';
|
import CellWrap from '../../../ui/CellWrap';
|
||||||
import LogsSearchLink from '../../../ui/LogsSearchLink';
|
import LogsSearchLink from '../../../ui/LogsSearchLink';
|
||||||
import Modal from '../Modal';
|
import Modal from '../Modal';
|
||||||
|
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../../helpers/localStorageHelper';
|
||||||
|
|
||||||
const ClientsTable = ({
|
const ClientsTable = ({
|
||||||
clients,
|
clients,
|
||||||
@ -342,7 +343,10 @@ const ClientsTable = ({
|
|||||||
]}
|
]}
|
||||||
className="-striped -highlight card-table-overflow"
|
className="-striped -highlight card-table-overflow"
|
||||||
showPagination
|
showPagination
|
||||||
defaultPageSize={10}
|
defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE) || 10}
|
||||||
|
onPageSizeChange={(size) => (
|
||||||
|
LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE, size)
|
||||||
|
)}
|
||||||
minRows={5}
|
minRows={5}
|
||||||
ofText="/"
|
ofText="/"
|
||||||
previousText={t('previous_btn')}
|
previousText={t('previous_btn')}
|
||||||
|
@ -553,6 +553,4 @@ export const DISABLE_PROTECTION_TIMINGS = {
|
|||||||
TOMORROW: 24 * 60 * 60 * 1000,
|
TOMORROW: 24 * 60 * 60 * 1000,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LOCAL_STORAGE_THEME_KEY = 'account_theme';
|
|
||||||
|
|
||||||
export const LOCAL_TIMEZONE_VALUE = 'Local';
|
export const LOCAL_TIMEZONE_VALUE = 'Local';
|
||||||
|
@ -26,8 +26,8 @@ import {
|
|||||||
STANDARD_WEB_PORT,
|
STANDARD_WEB_PORT,
|
||||||
SPECIAL_FILTER_ID,
|
SPECIAL_FILTER_ID,
|
||||||
THEMES,
|
THEMES,
|
||||||
LOCAL_STORAGE_THEME_KEY,
|
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from './localStorageHelper';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param time {string} The time to format
|
* @param time {string} The time to format
|
||||||
@ -680,37 +680,13 @@ export const setHtmlLangAttr = (language) => {
|
|||||||
window.document.documentElement.lang = language;
|
window.document.documentElement.lang = language;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Set local storage field
|
|
||||||
*
|
|
||||||
* @param {string} key
|
|
||||||
* @param {string} value
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const setStorageItem = (key, value) => {
|
|
||||||
if (window.localStorage) {
|
|
||||||
window.localStorage.setItem(key, value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get local storage field
|
|
||||||
*
|
|
||||||
* @param {string} key
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const getStorageItem = (key) => (window.localStorage
|
|
||||||
? window.localStorage.getItem(key)
|
|
||||||
: null);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set local storage theme field
|
* Set local storage theme field
|
||||||
*
|
*
|
||||||
* @param {string} theme
|
* @param {string} theme
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const setTheme = (theme) => {
|
export const setTheme = (theme) => {
|
||||||
setStorageItem(LOCAL_STORAGE_THEME_KEY, theme);
|
LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.THEME, theme);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -719,7 +695,7 @@ export const setTheme = (theme) => {
|
|||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const getTheme = () => getStorageItem(LOCAL_STORAGE_THEME_KEY) || THEMES.light;
|
export const getTheme = () => LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.THEME) || THEMES.light;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets UI theme.
|
* Sets UI theme.
|
||||||
|
44
client/src/helpers/localStorageHelper.js
Normal file
44
client/src/helpers/localStorageHelper.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
export const LOCAL_STORAGE_KEYS = {
|
||||||
|
THEME: 'account_theme',
|
||||||
|
BLOCKLIST_PAGE_SIZE: 'blocklist_page_size',
|
||||||
|
ALLOWLIST_PAGE_SIZE: 'allowlist_page_size',
|
||||||
|
CLIENTS_PAGE_SIZE: 'clients_page_size',
|
||||||
|
REWRITES_PAGE_SIZE: 'rewrites_page_size',
|
||||||
|
AUTO_CLIENTS_PAGE_SIZE: 'auto_clients_page_size',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LocalStorageHelper = {
|
||||||
|
setItem(key, value) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, JSON.stringify(value));
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error setting ${key} in local storage: ${error.message}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getItem(key) {
|
||||||
|
try {
|
||||||
|
const item = localStorage.getItem(key);
|
||||||
|
return item ? JSON.parse(item) : null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error getting ${key} from local storage: ${error.message}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeItem(key) {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(key);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error removing ${key} from local storage: ${error.message}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
try {
|
||||||
|
localStorage.clear();
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error clearing local storage: ${error.message}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user