smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Updates to settings to allow sorting
All checks were successful
Deploy to production / build (push) Successful in 20s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-13 11:37:27 -05:00
parent 01dd6b1aa2
commit e4b07a3907
10 changed files with 220 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/SettingsHeader.tsx
View File

@@ -35,6 +35,7 @@ export function SettingsHeader({
setIsLoading,
sortBy,
setSortBy,
customSearchEnabled,
}: {
setDragging: undefined | ((dragging: boolean) => void);
openModal: undefined | (() => void);
@@ -51,6 +52,7 @@ export function SettingsHeader({
setIsLoading: (isLoading: boolean) => void;
sortBy: string;
setSortBy: undefined | ((sortBy: string) => void);
customSearchEnabled: boolean;
}) {
const { isMobile, theme } = useCommonHooks();
const [disabled, setDisabled] = useState(false);
@@ -245,21 +247,25 @@ export function SettingsHeader({
>
{'Oldest'}
</Menu.Item>
<Menu.Item
onClick={() => {
setSortBy('Custom');
}}
style={{
color:
sortBy === 'Custom'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Custom' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'Custom'}
</Menu.Item>
{customSearchEnabled && (
<Menu.Item
onClick={() => {
setSortBy('Custom');
}}
style={{
color:
sortBy === 'Custom'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Custom'
? 'var(--mantine-color-primary-0)'
: undefined,
}}
>
{'Custom'}
</Menu.Item>
)}
</Menu.Dropdown>
</Menu>
)}

1
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -166,6 +166,7 @@ export function Applications() {
setIsLoading={setIsLoading}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled
/>
{modalOpened && (
<AddItemModal

44
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -19,6 +19,7 @@ import type { Bookmark, BookmarkGroup } from 'types';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
export function Bookmarks() {
const [sortBy, setSortBy] = useState('Custom');
const defaultGroup = {
id: null,
categoryName: '',
@@ -32,6 +33,7 @@ export function Bookmarks() {
filterName: isNotEmpty('Filter name is required'),
},
});
const [dragging, setDragging] = useState(false);
const bookmarksEndpoint = 'api/bookmarks';
const { data: bookmarkData, isFetching: bookmarkDataIsFetching } = useQueryAPI({
endpoint: bookmarksEndpoint,
@@ -41,7 +43,6 @@ export function Bookmarks() {
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: categoriesEndpoint,
});
const [dragging, setDragging] = useState(false);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { isMobile, reorder, theme } = useCommonHooks();
@@ -71,6 +72,7 @@ export function Bookmarks() {
const foundGroups: BookmarkGroup[] = groupData?.filter((a: BookmarkGroup) =>
a.categoryName.toLowerCase().includes((debouncedGroupSearch as string).toLowerCase()),
);
const handleClose = () => {
closeModal();
form.reset();
@@ -99,15 +101,44 @@ export function Bookmarks() {
useEffect(() => {
if (groupData && groupsIsFetched) {
const groupList = [...new Set([...foundBookmarkGroups, ...foundGroups])].sort(
(a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,
(a: BookmarkGroup, b: BookmarkGroup) => {
if (!dragging) {
switch (sortBy) {
case 'A>Z':
return a.categoryName.toLocaleLowerCase() >
b.categoryName.toLocaleLowerCase()
? 1
: -1;
case 'Z>A':
return a.categoryName.toLocaleLowerCase() <
b.categoryName.toLocaleLowerCase()
? 1
: -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
case 'Custom':
return a.categoryIndex > b.categoryIndex ? 1 : -1;
default:
return 0;
}
}
return a.categoryIndex > b.categoryIndex ? 1 : -1;
},
);
setGroups(groupList);
}
if (debouncedGroupSearch === searchValue) {
setIsLoading(false);
}
}, [groupData, groupsIsFetched, debouncedGroupSearch]);
}, [groupData, groupsIsFetched, debouncedGroupSearch, sortBy, dragging]);
useEffect(() => {
if (groupList.length > 0 && groupList !== groups) {
@@ -221,8 +252,9 @@ export function Bookmarks() {
searchPlaceholder={'Search Bookmarks...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>

47
src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx
View File

@@ -23,6 +23,7 @@ import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
export function GuacamoleClients() {
const [sortBy, setSortBy] = useState('Oldest');
const defaultGuacamoleClient: GuacamoleClient = {
id: undefined,
clientName: '',
@@ -46,13 +47,40 @@ export function GuacamoleClients() {
endpoint: endpoint,
});
const guacamoleClients: GuacamoleClient[] =
guacamoleClientsData.filter(
(a: GuacamoleClient) =>
a.clientName.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.clientIdentifier
.toLowerCase()
.includes((debouncedSearch as string).toLowerCase()),
) || [];
guacamoleClientsData
.filter(
(a: GuacamoleClient) =>
a.clientName
.toLowerCase()
.includes((debouncedSearch as string).toLowerCase()) ||
a.clientIdentifier
.toLowerCase()
.includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: GuacamoleClient, b: GuacamoleClient) => {
switch (sortBy) {
case 'A>Z':
return a.clientName.toLocaleLowerCase() > b.clientName.toLocaleLowerCase()
? 1
: -1;
case 'Z>A':
return a.clientName.toLocaleLowerCase() < b.clientName.toLocaleLowerCase()
? 1
: -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
default:
return 0;
}
}) || [];
const { mutateAsync } = useMutationAPI();
const { isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -210,8 +238,9 @@ export function GuacamoleClients() {
searchPlaceholder={'Search Clients...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled={false}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}

33
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -29,14 +29,36 @@ export function Messages() {
message: isNotEmpty('Message is required'),
},
});
const [sortBy, setSortBy] = useState('Oldest');
const [searchValue, setSearchValue] = useState<string | number>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const messages: Message[] =
messageData?.filter((m: Message) =>
m.message.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
) || [];
messageData
?.filter((m: Message) =>
m.message.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: Message, b: Message) => {
switch (sortBy) {
case 'A>Z':
return a.message.toLocaleLowerCase() > b.message.toLocaleLowerCase() ? 1 : -1;
case 'Z>A':
return a.message.toLocaleLowerCase() < b.message.toLocaleLowerCase() ? 1 : -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
default:
return 0;
}
}) || [];
const [message, setMessage] = useState({});
const [debounced] = useDebouncedValue(message, 1000);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -82,8 +104,9 @@ export function Messages() {
searchPlaceholder={'Search Messages...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled={false}
/>
{modalOpened && (
<AddItemModal

1
src/pages/settings/components/Search/SearchHistory.tsx
View File

@@ -88,6 +88,7 @@ export function SearchHistory() {
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
customSearchEnabled={false}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}

27
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -36,6 +36,7 @@ import DebouncedSearchProvider from './DebouncedSearchProvider';
import SearchProviderSettingsItem from './SearchProviderSettingsItem';
export function SearchProviders() {
const [sortBy, setSortBy] = useState('Oldest');
const allIcons: any = { ...fa6, ...vsc, ...si };
const defaultProvider: Provider = {
id: undefined,
@@ -68,7 +69,26 @@ export function SearchProviders() {
a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.prefix.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)) ?? [];
.sort((a: Provider, b: Provider) => {
switch (sortBy) {
case 'A>Z':
return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
case 'Z>A':
return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
default:
return 0;
}
}) ?? [];
const { isMobile, theme, iconFilter } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -281,8 +301,9 @@ export function SearchProviders() {
searchPlaceholder={'Search Providers...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled={false}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}

5
src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
View File

@@ -58,7 +58,7 @@ export function ThemePlaylists() {
}, [close]);
const handleSavePlaylist = useCallback(() => {
mutateAsync({
void mutateAsync({
method: selectedPlaylist?.id === undefined ? 'POST' : 'PATCH',
endpoint: themePlaylistsEndpoint,
body: selectedPlaylist ?? {},
@@ -162,6 +162,9 @@ export function ThemePlaylists() {
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
customSearchEnabled={false}
/>
<Stack mt={isMobile ? '10rem' : '6rem'}>
<LoadingOverlay

35
src/pages/settings/components/Theming/Themes/Themes.tsx
View File

@@ -28,11 +28,33 @@ export function Themes() {
const { data: allThemeData, isFetching: allThemeDataIsFetching } = useQueryAPI({
endpoint: 'api/themes',
});
const [sortBy, setSortBy] = useState('Oldest');
const [searchValue, setSearchValue] = useState<string | number>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const allThemes: Theme[] = allThemeData?.filter((a: Theme) =>
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
);
const allThemes: Theme[] = allThemeData
?.filter((a: Theme) =>
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: Theme, b: Theme) => {
switch (sortBy) {
case 'A>Z':
return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
case 'Z>A':
return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
default:
return 0;
}
});
const { data: backgroundData, isFetching: backgroundDataIsFetching } = useQueryAPI({
endpoint: backgroundsEndpoint,
});
@@ -139,6 +161,9 @@ export function Themes() {
searchPlaceholder={'Search Themes...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled={false}
/>
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
<LoadingOverlay
@@ -296,7 +321,9 @@ export function Themes() {
<Button
onClick={() => {
if (currentThemePlaylist === 'All') {
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
void navigate(
`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
);
} else {
setCurrentThemePlaylist('All');
setCurrentTheme(theme.name);

41
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -38,14 +38,40 @@ export function WolClients() {
const { data: wolClientsData, isFetching: wolClientsIsFetching } = useQueryAPI({
endpoint: endpoint,
});
const [sortBy, setSortBy] = useState('Oldest');
const [searchValue, setSearchValue] = useState<string | number>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const wolClients: WolClient[] =
wolClientsData.filter(
(a: WolClient) =>
a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
) || [];
wolClientsData
.filter(
(a: WolClient) =>
a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: WolClient, b: WolClient) => {
switch (sortBy) {
case 'A>Z':
return a.hostname.toLocaleLowerCase() > b.hostname.toLocaleLowerCase()
? 1
: -1;
case 'Z>A':
return a.hostname.toLocaleLowerCase() < b.hostname.toLocaleLowerCase()
? 1
: -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
default:
return 0;
}
}) || [];
const { mutateAsync } = useMutationAPI();
const { isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -151,8 +177,9 @@ export function WolClients() {
searchPlaceholder={'Search Clients...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
sortBy={''}
setSortBy={undefined}
sortBy={sortBy}
setSortBy={setSortBy}
customSearchEnabled={false}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}