127 lines
4.2 KiB
TypeScript
127 lines
4.2 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { ColourVariants } from '../api/actions/updateUserConfig';
|
|
import { ColourConstant } from '../configuration/colours/getColours';
|
|
import SettingsNavigation from '../components/SettingsNavigation';
|
|
import Notifications from '../components/Notifications';
|
|
import Button from '../components/Button';
|
|
import loadIsAdmin from '../functions/getIsAdmin';
|
|
import { useUserConfigStore } from '../stores/UserConfigStore';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const SettingsUser = () => {
|
|
const { userConfig, setPartialConfig } = useUserConfigStore();
|
|
const isAdmin = loadIsAdmin();
|
|
const navigate = useNavigate();
|
|
|
|
const [styleSheet, setStyleSheet] = useState<ColourVariants>(userConfig.config.stylesheet);
|
|
const [styleSheetRefresh, setStyleSheetRefresh] = useState(false);
|
|
const [pageSize, setPageSize] = useState<number>(userConfig.config.page_size);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
setStyleSheet(userConfig.config.stylesheet);
|
|
setPageSize(userConfig.config.page_size);
|
|
})();
|
|
}, [userConfig.config.page_size, userConfig.config.stylesheet]);
|
|
|
|
const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
|
|
setPartialConfig({ stylesheet: selectedStyleSheet });
|
|
setStyleSheet(selectedStyleSheet);
|
|
setStyleSheetRefresh(true);
|
|
};
|
|
|
|
const handlePageSizeChange = async () => {
|
|
setPartialConfig({ page_size: pageSize });
|
|
};
|
|
|
|
const handlePageRefresh = () => {
|
|
navigate(0);
|
|
setStyleSheetRefresh(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<title>TA | User Settings</title>
|
|
<div className="boxed-content">
|
|
<SettingsNavigation />
|
|
<Notifications pageName={'all'} />
|
|
|
|
<div className="title-bar">
|
|
<h1>User Configurations</h1>
|
|
</div>
|
|
<div className="info-box">
|
|
<div className="info-box-item">
|
|
<h2>Customize user Interface</h2>
|
|
<div className="settings-box-wrapper">
|
|
<div>
|
|
<p>Switch your color scheme</p>
|
|
</div>
|
|
<div>
|
|
<select
|
|
name="stylesheet"
|
|
id="id_stylesheet"
|
|
value={styleSheet}
|
|
onChange={event => {
|
|
handleStyleSheetChange(event.target.value as ColourVariants);
|
|
}}
|
|
>
|
|
{Object.entries(ColourConstant).map(([key, value]) => {
|
|
return (
|
|
<option key={key} value={value}>
|
|
{key}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
{styleSheetRefresh && <button onClick={handlePageRefresh}>Refresh</button>}
|
|
</div>
|
|
</div>
|
|
<div className="settings-box-wrapper">
|
|
<div>
|
|
<p>Archive view page size</p>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="number"
|
|
name="page_size"
|
|
id="id_page_size"
|
|
value={pageSize || 12}
|
|
onChange={event => {
|
|
setPageSize(Number(event.target.value));
|
|
}}
|
|
/>
|
|
<div className="button-box">
|
|
{userConfig.config.page_size !== pageSize && (
|
|
<>
|
|
<button onClick={handlePageSizeChange}>Update</button>
|
|
<button onClick={() => setPageSize(userConfig.config.page_size)}>
|
|
Cancel
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{isAdmin && (
|
|
<>
|
|
<div className="settings-group">
|
|
<h2>User Management</h2>
|
|
<p>
|
|
Access the admin interface for basic user management functionality like adding and
|
|
deleting users, changing passwords and more.
|
|
</p>
|
|
<a href="/admin/">
|
|
<Button label="Admin Interface" />
|
|
</a>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingsUser;
|