mirror of
https://github.com/stashapp/stash.git
synced 2025-12-18 12:54:38 +03:00
Item list refactor and related bug fixes (#3474)
* Replace ListHook with ItemList * Cache ItemList pagination * Fix SceneMarkerList Helmet * Prevent ItemList query string conflicts * Tweak saved filter clearing search term * Hide pagination on filter changes * Fix debounce of query term --------- Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
This commit is contained in:
DingDongSoLong4
@@ -3,30 +3,44 @@ import { useIntl } from "react-intl";
|
||||
import cloneDeep from "lodash-es/cloneDeep";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import Mousetrap from "mousetrap";
|
||||
import * as GQL from "src/core/generated-graphql";
|
||||
import {
|
||||
FindStudiosQueryResult,
|
||||
SlimStudioDataFragment,
|
||||
} from "src/core/generated-graphql";
|
||||
queryFindStudios,
|
||||
useFindStudios,
|
||||
useStudiosDestroy,
|
||||
} from "src/core/StashService";
|
||||
import {
|
||||
showWhenSelected,
|
||||
makeItemList,
|
||||
PersistanceLevel,
|
||||
useStudiosList,
|
||||
} from "src/hooks/ListHook";
|
||||
showWhenSelected,
|
||||
} from "../List/ItemList";
|
||||
import { ListFilterModel } from "src/models/list-filter/filter";
|
||||
import { DisplayMode } from "src/models/list-filter/types";
|
||||
import { queryFindStudios, useStudiosDestroy } from "src/core/StashService";
|
||||
import { ExportDialog } from "../Shared/ExportDialog";
|
||||
import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
|
||||
import { StudioCard } from "./StudioCard";
|
||||
|
||||
const StudioItemList = makeItemList({
|
||||
filterMode: GQL.FilterMode.Studios,
|
||||
useResult: useFindStudios,
|
||||
getItems(result: GQL.FindStudiosQueryResult) {
|
||||
return result?.data?.findStudios?.studios ?? [];
|
||||
},
|
||||
getCount(result: GQL.FindStudiosQueryResult) {
|
||||
return result?.data?.findStudios?.count ?? 0;
|
||||
},
|
||||
});
|
||||
|
||||
interface IStudioList {
|
||||
fromParent?: boolean;
|
||||
filterHook?: (filter: ListFilterModel) => ListFilterModel;
|
||||
alterQuery?: boolean;
|
||||
}
|
||||
|
||||
export const StudioList: React.FC<IStudioList> = ({
|
||||
fromParent,
|
||||
filterHook,
|
||||
alterQuery,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
@@ -49,10 +63,10 @@ export const StudioList: React.FC<IStudioList> = ({
|
||||
},
|
||||
];
|
||||
|
||||
const addKeybinds = (
|
||||
result: FindStudiosQueryResult,
|
||||
function addKeybinds(
|
||||
result: GQL.FindStudiosQueryResult,
|
||||
filter: ListFilterModel
|
||||
) => {
|
||||
) {
|
||||
Mousetrap.bind("p r", () => {
|
||||
viewRandom(result, filter);
|
||||
});
|
||||
@@ -60,14 +74,14 @@ export const StudioList: React.FC<IStudioList> = ({
|
||||
return () => {
|
||||
Mousetrap.unbind("p r");
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
async function viewRandom(
|
||||
result: FindStudiosQueryResult,
|
||||
result: GQL.FindStudiosQueryResult,
|
||||
filter: ListFilterModel
|
||||
) {
|
||||
// query for a random studio
|
||||
if (result.data && result.data.findStudios) {
|
||||
if (result.data?.findStudios) {
|
||||
const { count } = result.data.findStudios;
|
||||
|
||||
const index = Math.floor(Math.random() * count);
|
||||
@@ -75,13 +89,8 @@ export const StudioList: React.FC<IStudioList> = ({
|
||||
filterCopy.itemsPerPage = 1;
|
||||
filterCopy.currentPage = index + 1;
|
||||
const singleResult = await queryFindStudios(filterCopy);
|
||||
if (
|
||||
singleResult &&
|
||||
singleResult.data &&
|
||||
singleResult.data.findStudios &&
|
||||
singleResult.data.findStudios.studios.length === 1
|
||||
) {
|
||||
const { id } = singleResult!.data!.findStudios!.studios[0];
|
||||
if (singleResult.data.findStudios.studios.length === 1) {
|
||||
const { id } = singleResult.data.findStudios.studios[0];
|
||||
// navigate to the studio page
|
||||
history.push(`/studios/${id}`);
|
||||
}
|
||||
@@ -98,10 +107,15 @@ export const StudioList: React.FC<IStudioList> = ({
|
||||
setIsExportDialogOpen(true);
|
||||
}
|
||||
|
||||
function maybeRenderExportDialog(selectedIds: Set<string>) {
|
||||
if (isExportDialogOpen) {
|
||||
return (
|
||||
<>
|
||||
function renderContent(
|
||||
result: GQL.FindStudiosQueryResult,
|
||||
filter: ListFilterModel,
|
||||
selectedIds: Set<string>,
|
||||
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void
|
||||
) {
|
||||
function maybeRenderExportDialog() {
|
||||
if (isExportDialogOpen) {
|
||||
return (
|
||||
<ExportDialog
|
||||
exportInput={{
|
||||
studios: {
|
||||
@@ -109,83 +123,74 @@ export const StudioList: React.FC<IStudioList> = ({
|
||||
all: isExportAll,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
setIsExportDialogOpen(false);
|
||||
}}
|
||||
onClose={() => setIsExportDialogOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const renderDeleteDialog = (
|
||||
selectedStudios: SlimStudioDataFragment[],
|
||||
onClose: (confirmed: boolean) => void
|
||||
) => (
|
||||
<DeleteEntityDialog
|
||||
selected={selectedStudios}
|
||||
onClose={onClose}
|
||||
singularEntity={intl.formatMessage({ id: "studio" })}
|
||||
pluralEntity={intl.formatMessage({ id: "studios" })}
|
||||
destroyMutation={useStudiosDestroy}
|
||||
/>
|
||||
);
|
||||
function renderStudios() {
|
||||
if (!result.data?.findStudios) return;
|
||||
|
||||
const listData = useStudiosList({
|
||||
renderContent,
|
||||
filterHook,
|
||||
addKeybinds,
|
||||
otherOperations,
|
||||
selectable: true,
|
||||
persistState: !fromParent ? PersistanceLevel.ALL : PersistanceLevel.NONE,
|
||||
renderDeleteDialog,
|
||||
});
|
||||
|
||||
function renderStudios(
|
||||
result: FindStudiosQueryResult,
|
||||
filter: ListFilterModel,
|
||||
selectedIds: Set<string>
|
||||
) {
|
||||
if (!result.data?.findStudios) return;
|
||||
|
||||
if (filter.displayMode === DisplayMode.Grid) {
|
||||
return (
|
||||
<div className="row px-xl-5 justify-content-center">
|
||||
{result.data.findStudios.studios.map((studio) => (
|
||||
<StudioCard
|
||||
key={studio.id}
|
||||
studio={studio}
|
||||
hideParent={fromParent}
|
||||
selecting={selectedIds.size > 0}
|
||||
selected={selectedIds.has(studio.id)}
|
||||
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
|
||||
listData.onSelectChange(studio.id, selected, shiftKey)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
if (filter.displayMode === DisplayMode.Grid) {
|
||||
return (
|
||||
<div className="row px-xl-5 justify-content-center">
|
||||
{result.data.findStudios.studios.map((studio) => (
|
||||
<StudioCard
|
||||
key={studio.id}
|
||||
studio={studio}
|
||||
hideParent={fromParent}
|
||||
selecting={selectedIds.size > 0}
|
||||
selected={selectedIds.has(studio.id)}
|
||||
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
|
||||
onSelectChange(studio.id, selected, shiftKey)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (filter.displayMode === DisplayMode.List) {
|
||||
return <h1>TODO</h1>;
|
||||
}
|
||||
if (filter.displayMode === DisplayMode.Wall) {
|
||||
return <h1>TODO</h1>;
|
||||
}
|
||||
}
|
||||
if (filter.displayMode === DisplayMode.List) {
|
||||
return <h1>TODO</h1>;
|
||||
}
|
||||
if (filter.displayMode === DisplayMode.Wall) {
|
||||
return <h1>TODO</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
function renderContent(
|
||||
result: FindStudiosQueryResult,
|
||||
filter: ListFilterModel,
|
||||
selectedIds: Set<string>
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
{maybeRenderExportDialog(selectedIds)}
|
||||
{renderStudios(result, filter, selectedIds)}
|
||||
{maybeRenderExportDialog()}
|
||||
{renderStudios()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return listData.template;
|
||||
function renderDeleteDialog(
|
||||
selectedStudios: GQL.SlimStudioDataFragment[],
|
||||
onClose: (confirmed: boolean) => void
|
||||
) {
|
||||
return (
|
||||
<DeleteEntityDialog
|
||||
selected={selectedStudios}
|
||||
onClose={onClose}
|
||||
singularEntity={intl.formatMessage({ id: "studio" })}
|
||||
pluralEntity={intl.formatMessage({ id: "studios" })}
|
||||
destroyMutation={useStudiosDestroy}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<StudioItemList
|
||||
selectable
|
||||
filterHook={filterHook}
|
||||
persistState={fromParent ? PersistanceLevel.NONE : PersistanceLevel.ALL}
|
||||
alterQuery={alterQuery}
|
||||
otherOperations={otherOperations}
|
||||
addKeybinds={addKeybinds}
|
||||
renderContent={renderContent}
|
||||
renderDeleteDialog={renderDeleteDialog}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user