idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 02:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(settings): make lists sortable (#800)

Browse source 
* initial commit

* sorting for clients and networks

* sort feeds

* cursor pointer on hover
This commit is contained in:
soup 2023-03-30 22:27:24 +02:00 • committed by GitHub
parent 30cf9c55f0
commit 59f41be3ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 305 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

80
web/src/screens/settings/Feed.tsx
View file

@ -4,7 +4,7 @@ import { APIClient } from "../../api/APIClient";
import { Menu, Switch, Transition } from "@headlessui/react";
import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "../../utils";
import { Fragment, useRef, useState } from "react";
import { Fragment, useRef, useState, useMemo } from "react";
import { toast } from "react-hot-toast";
import Toast from "../../components/notifications/Toast";
import { queryClient } from "../../App";
@ -20,6 +20,62 @@ import { FeedUpdateForm } from "../../forms/settings/FeedForms";
import { EmptySimple } from "../../components/emptystates";
import { ImplementationBadges } from "./Indexer";
interface SortConfig {
key: keyof ListItemProps["feed"] | "enabled";
direction: "ascending" | "descending";
}
function useSort(items: ListItemProps["feed"][], config?: SortConfig) {
const [sortConfig, setSortConfig] = useState(config);
const sortedItems = useMemo(() => {
if (!sortConfig) {
return items;
}
const sortableItems = [...items];
sortableItems.sort((a, b) => {
const aValue = sortConfig.key === "enabled" ? (a[sortConfig.key] ?? false) as number | boolean | string : a[sortConfig.key] as number | boolean | string;
const bValue = sortConfig.key === "enabled" ? (b[sortConfig.key] ?? false) as number | boolean | string : b[sortConfig.key] as number | boolean | string;
if (aValue < bValue) {
return sortConfig.direction === "ascending" ? -1 : 1;
}
if (aValue > bValue) {
return sortConfig.direction === "ascending" ? 1 : -1;
}
return 0;
});
return sortableItems;
}, [items, sortConfig]);
const requestSort = (key: keyof ListItemProps["feed"] | "enabled") => { let direction: "ascending" | "descending" = "ascending";
if (
sortConfig &&
sortConfig.key === key &&
sortConfig.direction === "ascending"
) {
direction = "descending";
}
setSortConfig({ key, direction });
};
const getSortIndicator = (key: keyof ListItemProps["feed"]) => {
if (!sortConfig || sortConfig.key !== key) {
return "";
}
return sortConfig.direction === "ascending" ? "↑" : "↓";
};
return { items: sortedItems, requestSort, sortConfig, getSortIndicator };
}
function FeedSettings() {
const { data } = useQuery(
"feeds",
@ -27,6 +83,8 @@ function FeedSettings() {
{ refetchOnWindowFocus: false }
);
const sortedFeeds = useSort(data || []);
return (
<div className="lg:col-span-9">
<div className="py-6 px-4 sm:p-6 lg:pb-8">
@ -44,20 +102,28 @@ function FeedSettings() {
<ol className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div
className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
className="flex col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
onClick={() => sortedFeeds.requestSort("enabled")}>
Enabled <span className="sort-indicator">{sortedFeeds.getSortIndicator("enabled")}</span>
</div>
<div
className="col-span-6 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
className="col-span-6 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
onClick={() => sortedFeeds.requestSort("name")}>
Name <span className="sort-indicator">{sortedFeeds.getSortIndicator("name")}</span>
</div>
<div
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
onClick={() => sortedFeeds.requestSort("type")}>
Type <span className="sort-indicator">{sortedFeeds.getSortIndicator("type")}</span>
</div>
<div
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
onClick={() => sortedFeeds.requestSort("last_run")}>
Last run <span className="sort-indicator">{sortedFeeds.getSortIndicator("last_run")}</span>
</div>
</li>
{data && data.map((f) => (
<ListItem key={f.id} feed={f}/>
{sortedFeeds.items.map((feed, idx) => (
<ListItem key={feed.id} feed={feed}/>
))}
</ol>
</section>