91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
|
|
import { useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { FiMenu, FiMonitor } from 'react-icons/fi';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
|
|
|
|
function SettingsButton({
|
|
appFilter,
|
|
setAppFilter,
|
|
bookmarkFilter,
|
|
setBookmarkFilter,
|
|
}: any) {
|
|
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
|
|
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
if (data) {
|
|
const list: [any] =
|
|
data.map((category: any) => {
|
|
return { value: category.filterName, label: category.filterName };
|
|
}) || [];
|
|
list.unshift({ value: 'All', label: 'All' });
|
|
setCategories(list);
|
|
}
|
|
}, [data, isFetched]);
|
|
|
|
function runWakeCommand() {
|
|
const requestOptions = {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
};
|
|
fetch(`/${import.meta.env.VITE_BASE_URL}/api/wakeDakota`, requestOptions);
|
|
}
|
|
return (
|
|
<Menu withinPortal={false} withArrow shadow='md' position='top'>
|
|
<Menu.Target>
|
|
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
|
<FiMenu />
|
|
</Button>
|
|
</Menu.Target>
|
|
<Menu.Dropdown className={menuClasses.dropdown}>
|
|
<NavLink
|
|
label='Settings'
|
|
component='a'
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
|
|
/>
|
|
<NavLink
|
|
label='Quick Actions'
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
>
|
|
<NavLink
|
|
label='Wake Dakota'
|
|
leftSection={<FiMonitor />}
|
|
onClick={() => runWakeCommand()}
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
/>
|
|
</NavLink>
|
|
<MultiSelect
|
|
label='App Filter'
|
|
data={categories ?? []}
|
|
defaultValue={appFilter}
|
|
withCheckIcon={false}
|
|
onChange={(data: any) => {
|
|
setAppFilter(data);
|
|
}}
|
|
classNames={selectClasses}
|
|
comboboxProps={{ withinPortal: false }}
|
|
/>
|
|
<MultiSelect
|
|
label='Bookmark Filter'
|
|
data={categories ?? []}
|
|
defaultValue={bookmarkFilter}
|
|
withCheckIcon={false}
|
|
onChange={(data: any) => {
|
|
setBookmarkFilter(data);
|
|
}}
|
|
classNames={selectClasses}
|
|
comboboxProps={{ withinPortal: false }}
|
|
/>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default SettingsButton;
|