mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

use name of source instead

Browse source
This commit is contained in:
Jorrin 2024-04-15 17:15:15 +02:00
parent df89bda66a
commit 42d7be106e
2 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/form/SortableList.tsx
View file

@ -19,9 +19,14 @@ import classNames from "classnames";
import { Icon, Icons } from "../Icon";
function SortableItem(props: { id: string }) {
export interface Item {
id: string;
name: string;
}
function SortableItem(props: { item: Item }) {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: props.id });
useSortable({ id: props.item.id });
const style = {
transform: CSS.Transform.toString(transform),
@ -39,15 +44,15 @@ function SortableItem(props: { id: string }) {
transform && "cursor-grabbing",
)}
>
<span className="flex-1 text-white font-bold">{props.id}</span>
<span className="flex-1 text-white font-bold">{props.item.name}</span>
<Icon icon={Icons.MENU} />
</div>
);
}
export function SortableList(props: {
items: string[];
setItems: (items: string[]) => void;
items: Item[];
setItems: (items: Item[]) => void;
}) {
const sensors = useSensors(
useSensor(PointerSensor),
@ -61,8 +66,8 @@ export function SortableList(props: {
if (!over) return;
if (active.id !== over.id) {
const currentItems = props.items;
const oldIndex = currentItems.indexOf(active.id as string);
const newIndex = currentItems.indexOf(over.id as string);
const oldIndex = currentItems.findIndex((item) => item.id === active.id);
const newIndex = currentItems.findIndex((item) => item.id === over.id);
const newItems = arrayMove(currentItems, oldIndex, newIndex);
props.setItems(newItems);
}
@ -79,8 +84,8 @@ export function SortableList(props: {
strategy={verticalListSortingStrategy}
>
<div className="flex flex-col gap-2">
{props.items.map((id) => (
<SortableItem key={id} id={id} />
{props.items.map((item) => (
<SortableItem key={item.id} item={item} />
))}
</div>
</SortableContext>

14
src/pages/parts/settings/PreferencesPart.tsx
View file

@ -1,6 +1,8 @@
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { getCachedMetadata } from "@/backend/helpers/providerApi";
import { getProviders } from "@/backend/providers/providers";
import { Toggle } from "@/components/buttons/Toggle";
import { FlagIcon } from "@/components/FlagIcon";
import { Dropdown } from "@/components/form/Dropdown";
@ -107,8 +109,16 @@ export function PreferencesPart(props: {
</p>
<SortableList
items={props.sourceOrder}
setItems={props.setSourceOrder}
items={props.sourceOrder.map((id) => ({
id,
name:
getProviders()
.listSources()
.find((s) => s.id === id)?.name || id,
}))}
setItems={(items) =>
props.setSourceOrder(items.map((item) => item.id))
}
/>
</div>
</div>