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

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

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