+ {sceneNumber !== undefined && ( + +
- -
-
{maybeRenderTab()}
+
+ {!isEditing && (
+
-
+ {groups.map((entry) => (
+
-
+
+
+ ))}
+
@@ -394,6 +447,7 @@ export const GroupEditPanel: React.FC = ({
{renderInputField("aliases")}
{renderDurationField("duration")}
{renderDateField("date")}
+ {renderContainingGroupsField()}
{renderStudioField()}
{renderInputField("director")}
{renderURLListField("urls", onScrapeGroupURL, urlScrapable)}
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupScenesPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupScenesPanel.tsx
index acca9f0aae1..ab9ec3fea24 100644
--- a/ui/v2.5/src/components/Groups/GroupDetails/GroupScenesPanel.tsx
+++ b/ui/v2.5/src/components/Groups/GroupDetails/GroupScenesPanel.tsx
@@ -1,6 +1,9 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
-import { GroupsCriterion } from "src/models/list-filter/criteria/groups";
+import {
+ GroupsCriterion,
+ GroupsCriterionOption,
+} from "src/models/list-filter/criteria/groups";
import { ListFilterModel } from "src/models/list-filter/filter";
import { SceneList } from "src/components/Scenes/SceneList";
import { View } from "src/components/List/views";
@@ -8,13 +11,14 @@ import { View } from "src/components/List/views";
interface IGroupScenesPanel {
active: boolean;
group: GQL.GroupDataFragment;
+ showSubGroupContent?: boolean;
}
-export const GroupScenesPanel: React.FC = ({
- active,
- group,
-}) => {
- function filterHook(filter: ListFilterModel) {
+function useFilterHook(
+ group: Pick,
+ showSubGroupContent?: boolean
+) {
+ return (filter: ListFilterModel) => {
const groupValue = { id: group.id, label: group.name };
// if group is already present, then we modify it, otherwise add
let groupCriterion = filter.criteria.find((c) => {
@@ -28,23 +32,35 @@ export const GroupScenesPanel: React.FC = ({
) {
// add the group if not present
if (
- !groupCriterion.value.find((p) => {
+ !groupCriterion.value.items.find((p) => {
return p.id === group.id;
})
) {
- groupCriterion.value.push(groupValue);
+ groupCriterion.value.items.push(groupValue);
}
groupCriterion.modifier = GQL.CriterionModifier.IncludesAll;
} else {
// overwrite
- groupCriterion = new GroupsCriterion();
- groupCriterion.value = [groupValue];
+ groupCriterion = new GroupsCriterion(GroupsCriterionOption);
+ groupCriterion.value = {
+ items: [groupValue],
+ depth: showSubGroupContent ? -1 : 0,
+ excluded: [],
+ };
filter.criteria.push(groupCriterion);
}
return filter;
- }
+ };
+}
+
+export const GroupScenesPanel: React.FC = ({
+ active,
+ group,
+ showSubGroupContent,
+}) => {
+ const filterHook = useFilterHook(group, showSubGroupContent);
if (group && group.id) {
return (
@@ -53,6 +69,7 @@ export const GroupScenesPanel: React.FC = ({
defaultSort="group_scene_number"
alterQuery={active}
view={View.GroupScenes}
+ fromGroupId={group.id}
/>
);
}
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupSubGroupsPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupSubGroupsPanel.tsx
new file mode 100644
index 00000000000..a2bb26e9511
--- /dev/null
+++ b/ui/v2.5/src/components/Groups/GroupDetails/GroupSubGroupsPanel.tsx
@@ -0,0 +1,204 @@
+import React, { useMemo } from "react";
+import * as GQL from "src/core/generated-graphql";
+import { GroupList } from "../GroupList";
+import { ListFilterModel } from "src/models/list-filter/filter";
+import {
+ ContainingGroupsCriterionOption,
+ GroupsCriterion,
+} from "src/models/list-filter/criteria/groups";
+import {
+ useRemoveSubGroups,
+ useReorderSubGroupsMutation,
+} from "src/core/StashService";
+import { ButtonToolbar } from "react-bootstrap";
+import { ListOperationButtons } from "src/components/List/ListOperationButtons";
+import { useListContext } from "src/components/List/ListProvider";
+import {
+ PageSizeSelector,
+ SearchTermInput,
+} from "src/components/List/ListFilter";
+import { useFilter } from "src/components/List/FilterProvider";
+import { IFilteredListToolbar } from "src/components/List/FilteredListToolbar";
+import {
+ showWhenNoneSelected,
+ showWhenSelected,
+} from "src/components/List/ItemList";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useIntl } from "react-intl";
+import { useToast } from "src/hooks/Toast";
+import { useModal } from "src/hooks/modal";
+import { AddSubGroupsDialog } from "./AddGroupsDialog";
+
+const useContainingGroupFilterHook = (
+ group: Pick,
+ showSubGroupContent?: boolean
+) => {
+ return (filter: ListFilterModel) => {
+ const groupValue = { id: group.id, label: group.name };
+ // if studio is already present, then we modify it, otherwise add
+ let groupCriterion = filter.criteria.find((c) => {
+ return c.criterionOption.type === "containing_groups";
+ }) as GroupsCriterion | undefined;
+
+ if (groupCriterion) {
+ // add the group if not present
+ if (
+ !groupCriterion.value.items.find((p) => {
+ return p.id === group.id;
+ })
+ ) {
+ groupCriterion.value.items.push(groupValue);
+ }
+ } else {
+ groupCriterion = new GroupsCriterion(ContainingGroupsCriterionOption);
+ groupCriterion.value = {
+ items: [groupValue],
+ excluded: [],
+ depth: showSubGroupContent ? -1 : 0,
+ };
+ groupCriterion.modifier = GQL.CriterionModifier.Includes;
+ filter.criteria.push(groupCriterion);
+ }
+
+ filter.sortBy = "sub_group_order";
+ filter.sortDirection = GQL.SortDirectionEnum.Asc;
+
+ return filter;
+ };
+};
+
+const Toolbar: React.FC = ({
+ onEdit,
+ onDelete,
+ operations,
+}) => {
+ const { getSelected, onSelectAll, onSelectNone } = useListContext();
+ const { filter, setFilter } = useFilter();
+
+ return (
+
+ setFilter(filter.setPageSize(size))}
+ />
+ 0}
+ otherOperations={operations}
+ onEdit={onEdit}
+ onDelete={onDelete}
+ />
+
+ );
+};
+
+interface IGroupSubGroupsPanel {
+ active: boolean;
+ group: GQL.GroupDataFragment;
+}
+
+export const GroupSubGroupsPanel: React.FC = ({
+ active,
+ group,
+}) => {
+ const intl = useIntl();
+ const Toast = useToast();
+ const { modal, showModal, closeModal } = useModal();
+
+ const [reorderSubGroups] = useReorderSubGroupsMutation();
+ const mutateRemoveSubGroups = useRemoveSubGroups();
+
+ const filterHook = useContainingGroupFilterHook(group);
+
+ const defaultFilter = useMemo(() => {
+ const sortBy = "sub_group_order";
+ const ret = new ListFilterModel(GQL.FilterMode.Groups, undefined, {
+ defaultSortBy: sortBy,
+ });
+
+ // unset the sort by so that its not included in the URL
+ ret.sortBy = undefined;
+
+ return ret;
+ }, []);
+
+ async function removeSubGroups(
+ result: GQL.FindGroupsQueryResult,
+ filter: ListFilterModel,
+ selectedIds: Set
+ ) {
+ try {
+ await mutateRemoveSubGroups(group.id, Array.from(selectedIds.values()));
+
+ Toast.success(
+ intl.formatMessage(
+ { id: "toast.removed_entity" },
+ {
+ count: selectedIds.size,
+ singularEntity: intl.formatMessage({ id: "group" }),
+ pluralEntity: intl.formatMessage({ id: "groups" }),
+ }
+ )
+ );
+ } catch (e) {
+ Toast.error(e);
+ }
+ }
+
+ async function onAddSubGroups() {
+ showModal(
+ ;
+
+export interface IRelatedGroupEntry {
+ group: Group;
+ description?: GQL.InputMaybe | undefined;
+}
+
+export const RelatedGroupTable: React.FC<{
+ value: IRelatedGroupEntry[];
+ onUpdate: (input: IRelatedGroupEntry[]) => void;
+ excludeIDs?: string[];
+ filterHook?: (f: ListFilterModel) => ListFilterModel;
+ disabled?: boolean;
+}> = (props) => {
+ const { value, onUpdate } = props;
+
+ const groupIDs = useMemo(() => value.map((m) => m.group.id), [value]);
+
+ const excludeIDs = useMemo(
+ () => [...groupIDs, ...(props.excludeIDs ?? [])],
+ [props.excludeIDs, groupIDs]
+ );
+
+ const updateFieldChanged = (index: number, description: string | null) => {
+ const newValues = value.map((existing, i) => {
+ if (i === index) {
+ return {
+ ...existing,
+ description,
+ };
+ }
+ return existing;
+ });
+
+ onUpdate(newValues);
+ };
+
+ function onGroupSet(index: number, groups: Group[]) {
+ if (!groups.length) {
+ // remove this entry
+ const newValues = value.filter((_, i) => i !== index);
+ onUpdate(newValues);
+ return;
+ }
+
+ const group = groups[0];
+
+ const newValues = value.map((existing, i) => {
+ if (i === index) {
+ return {
+ ...existing,
+ group: group,
+ };
+ }
+ return existing;
+ });
+
+ onUpdate(newValues);
+ }
+
+ function onNewGroupSet(groups: Group[]) {
+ if (!groups.length) {
+ return;
+ }
+
+ const group = groups[0];
+
+ const newValues = [
+ ...value,
+ {
+ group: group,
+ scene_index: null,
+ },
+ ];
+
+ onUpdate(newValues);
+ }
+
+ return (
+ ;
+ isExportAll?: boolean;
+ onClose: () => void;
+}> = ({ open = false, selectedIds, isExportAll = false, onClose }) => {
+ if (!open) {
+ return null;
+ }
+
+ return (
+
+> = ({ alterQuery, filterHook, defaultFilter, view, selectable, children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+interface IGroupList extends IGroupListContext {
+ fromGroupId?: string;
+ onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
+ renderToolbar?: (props: IFilteredListToolbar) => React.ReactNode;
+ otherOperations?: IItemListOperation[];
}
export const GroupList: React.FC = ({
filterHook,
alterQuery,
+ defaultFilter,
view,
+ fromGroupId,
+ onMove,
+ selectable,
+ renderToolbar,
+ otherOperations: providedOperations = [],
}) => {
const intl = useIntl();
const history = useHistory();
const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
const [isExportAll, setIsExportAll] = useState(false);
- const filterMode = GQL.FilterMode.Groups;
-
const otherOperations = [
{
text: intl.formatMessage({ id: "actions.view_random" }),
@@ -58,6 +120,7 @@ export const GroupList: React.FC = ({
text: intl.formatMessage({ id: "actions.export_all" }),
onClick: onExportAll,
},
+ ...providedOperations,
];
function addKeybinds(
@@ -110,42 +173,23 @@ export const GroupList: React.FC = ({
selectedIds: Set,
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void
) {
- function maybeRenderGroupExportDialog() {
- if (isExportDialogOpen) {
- return (
- setIsExportDialogOpen(false)}
- />
- );
- }
- }
-
- function renderGroups() {
- if (!result.data?.findGroups) return;
-
- if (filter.displayMode === DisplayMode.Grid) {
- return (
+ return (
+ <>
+ setIsExportDialogOpen(false)}
+ />
+ {filter.displayMode === DisplayMode.Grid && (
= ({
}
return (
-
= ({
renderContent={renderContent}
renderEditDialog={renderEditDialog}
renderDeleteDialog={renderDeleteDialog}
+ renderToolbar={renderToolbar}
/>
-
+
);
};
diff --git a/ui/v2.5/src/components/Groups/GroupSelect.tsx b/ui/v2.5/src/components/Groups/GroupSelect.tsx
index 4f611e5e3b4..dd16088e9e7 100644
--- a/ui/v2.5/src/components/Groups/GroupSelect.tsx
+++ b/ui/v2.5/src/components/Groups/GroupSelect.tsx
@@ -56,13 +56,14 @@ const groupSelectSort = PatchFunction(
sortGroupsByRelevance
);
-const _GroupSelect: React.FC<
+export const GroupSelect: React.FC<
IFilterProps &
IFilterValueProps & {
hoverPlacement?: Placement;
excludeIds?: string[];
+ filterHook?: (f: ListFilterModel) => ListFilterModel;
}
-> = (props) => {
+> = PatchComponent("GroupSelect", (props) => {
const [createGroup] = useGroupCreate();
const { configuration } = React.useContext(ConfigurationContext);
@@ -75,12 +76,17 @@ const _GroupSelect: React.FC<
const exclude = useMemo(() => props.excludeIds ?? [], [props.excludeIds]);
async function loadGroups(input: string): Promise {
- const filter = new ListFilterModel(GQL.FilterMode.Groups);
+ let filter = new ListFilterModel(GQL.FilterMode.Groups);
filter.searchTerm = input;
filter.currentPage = 1;
filter.itemsPerPage = maxOptionsShown;
filter.sortBy = "name";
filter.sortDirection = GQL.SortDirectionEnum.Asc;
+
+ if (props.filterHook) {
+ filter = props.filterHook(filter);
+ }
+
const query = await queryFindGroupsForSelect(filter);
let ret = query.data.findGroups.groups.filter((group) => {
// HACK - we should probably exclude these in the backend query, but
@@ -255,9 +261,7 @@ const _GroupSelect: React.FC<
closeMenuOnSelect={!props.isMulti}
/>
);
-};
-
-export const GroupSelect = PatchComponent("GroupSelect", _GroupSelect);
+});
const _GroupIDSelect: React.FC> = (
props
diff --git a/ui/v2.5/src/components/Groups/GroupTag.tsx b/ui/v2.5/src/components/Groups/GroupTag.tsx
new file mode 100644
index 00000000000..3443d18dfef
--- /dev/null
+++ b/ui/v2.5/src/components/Groups/GroupTag.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { GroupLink } from "../Shared/TagLink";
+
+export const GroupTag: React.FC<{
+ group: Pick;
+ linkType?: "scene" | "sub_group" | "details";
+ description?: string;
+}> = ({ group, linkType, description }) => {
+ return (
+ = ({ group }) => {
+ const { containing_groups: containingGroups } = group;
+
+ const popoverContent = useMemo(() => {
+ if (!containingGroups.length) {
+ return [];
+ }
+
+ return containingGroups.map((entry) => (
+
+
+
+ );
+};
+
+const SubGroupCount: React.FC = ({ group }) => {
+ const intl = useIntl();
+
+ const count = group.sub_group_count;
+
+ if (!count) {
+ return null;
+ }
+
+ function getTitle() {
+ const pluralCategory = intl.formatPlural(count);
+ const options = {
+ one: "sub_group",
+ other: "sub_groups",
+ };
+ const plural = intl.formatMessage({
+ id: options[pluralCategory as "one"] || options.other,
+ });
+ return `${count} ${plural}`;
+ }
+
+ return (
+ {getTitle()}}
+ placement="bottom"
+ >
+
+
+ );
+};
+
+export const RelatedGroupPopoverButton: React.FC = ({ group }) => {
+ return (
+
+
+
+ );
+};
diff --git a/ui/v2.5/src/components/Groups/styles.scss b/ui/v2.5/src/components/Groups/styles.scss
index 3d1868fb815..1b80045c73d 100644
--- a/ui/v2.5/src/components/Groups/styles.scss
+++ b/ui/v2.5/src/components/Groups/styles.scss
@@ -14,7 +14,8 @@
width: 100%;
}
- .group-scene-number {
+ .group-scene-number,
+ .group-containing-group-description {
text-align: center;
}
@@ -89,3 +90,24 @@
}
}
}
+
+.groups-list {
+ list-style-type: none;
+ padding-inline-start: 0;
+
+ li {
+ display: inline;
+ }
+}
+
+.related-group-popover-button {
+ .containing-group-count {
+ display: inline-block;
+ }
+
+ .related-group-count .fa-icon {
+ color: $text-muted;
+ margin-left: 0;
+ margin-right: 0.25rem;
+ }
+}
diff --git a/ui/v2.5/src/components/List/FilteredListToolbar.tsx b/ui/v2.5/src/components/List/FilteredListToolbar.tsx
index d6887c51de0..6018dd836f6 100644
--- a/ui/v2.5/src/components/List/FilteredListToolbar.tsx
+++ b/ui/v2.5/src/components/List/FilteredListToolbar.tsx
@@ -31,14 +31,16 @@ export interface IItemListOperation {
buttonVariant?: string;
}
-export const FilteredListToolbar: React.FC<{
- showEditFilter: (editingCriterion?: string) => void;
+export interface IFilteredListToolbar {
+ showEditFilter?: (editingCriterion?: string) => void;
view?: View;
onEdit?: () => void;
onDelete?: () => void;
operations?: IListFilterOperation[];
zoomable?: boolean;
-}> = ({
+}
+
+export const FilteredListToolbar: React.FC = ({
showEditFilter,
view,
onEdit,
@@ -60,13 +62,15 @@ export const FilteredListToolbar: React.FC<{
}
return (
-
- showEditFilter()}
- view={view}
- />
+
+ {showEditFilter && (
+ showEditFilter()}
+ view={view}
+ />
+ )}
{
@@ -59,6 +63,7 @@ interface IItemListProps {
filter: ListFilterModel,
selectedIds: Set
) => () => void;
+ renderToolbar?: (props: IFilteredListToolbar) => React.ReactNode;
}
export const ItemList = (
@@ -73,6 +78,7 @@ export const ItemList = (
renderDeleteDialog,
renderMetadataByline,
addKeybinds,
+ renderToolbar: providedToolbar,
} = props;
const { filter, setFilter: updateFilter } = useFilter();
@@ -142,28 +148,30 @@ export const ItemList = (
}
}, [addKeybinds, result, effectiveFilter, selectedIds]);
- async function onOperationClicked(o: IItemListOperation) {
- await o.onClick(result, effectiveFilter, selectedIds);
- if (o.postRefetch) {
- result.refetch();
- }
- }
-
- const operations = otherOperations?.map((o) => ({
- text: o.text,
- onClick: () => {
- onOperationClicked(o);
- },
- isDisplayed: () => {
- if (o.isDisplayed) {
- return o.isDisplayed(result, effectiveFilter, selectedIds);
+ const operations = useMemo(() => {
+ async function onOperationClicked(o: IItemListOperation) {
+ await o.onClick(result, effectiveFilter, selectedIds);
+ if (o.postRefetch) {
+ result.refetch();
}
+ }
- return true;
- },
- icon: o.icon,
- buttonVariant: o.buttonVariant,
- }));
+ return otherOperations?.map((o) => ({
+ text: o.text,
+ onClick: () => {
+ onOperationClicked(o);
+ },
+ isDisplayed: () => {
+ if (o.isDisplayed) {
+ return o.isDisplayed(result, effectiveFilter, selectedIds);
+ }
+
+ return true;
+ },
+ icon: o.icon,
+ buttonVariant: o.buttonVariant,
+ }));
+ }, [result, effectiveFilter, selectedIds, otherOperations]);
function onEdit() {
if (!renderEditDialog) {
@@ -215,16 +223,22 @@ export const ItemList = (
updateFilter(filter.clearCriteria());
}
+ const filterListToolbarProps = {
+ showEditFilter,
+ view: view,
+ operations: operations,
+ zoomable: zoomable,
+ onEdit: renderEditDialog ? onEdit : undefined,
+ onDelete: renderDeleteDialog ? onDelete : undefined,
+ };
+
return (
+
+
+
+
+
+
+ {value.map((m, i) => (
+
+ onGroupSet(i, items)}
+ values={[m.group!]}
+ excludeIds={excludeIDs}
+ filterHook={props.filterHook}
+ isDisabled={props.disabled}
+ />
+
+ ) => {
+ updateFieldChanged(
+ i,
+ e.currentTarget.value === "" ? null : e.currentTarget.value
+ );
+ }}
+ disabled={props.disabled}
+ />
+
+
+ ))}
+
+ onNewGroupSet(items)}
+ values={[]}
+ excludeIds={excludeIDs}
+ filterHook={props.filterHook}
+ isDisabled={props.disabled}
+ />
+
+
+
+ );
+};
diff --git a/ui/v2.5/src/components/Groups/GroupList.tsx b/ui/v2.5/src/components/Groups/GroupList.tsx
index ba45912762b..d3f395037d1 100644
--- a/ui/v2.5/src/components/Groups/GroupList.tsx
+++ b/ui/v2.5/src/components/Groups/GroupList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { PropsWithChildren, useState } from "react";
import { useIntl } from "react-intl";
import cloneDeep from "lodash-es/cloneDeep";
import Mousetrap from "mousetrap";
@@ -17,6 +17,35 @@ import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
import { GroupCardGrid } from "./GroupCardGrid";
import { EditGroupsDialog } from "./EditGroupsDialog";
import { View } from "../List/views";
+import {
+ IFilteredListToolbar,
+ IItemListOperation,
+} from "../List/FilteredListToolbar";
+
+const GroupExportDialog: React.FC<{
+ open?: boolean;
+ selectedIds: SetTODO
; - } - } - return ( - <> - {maybeRenderGroupExportDialog()} - {renderGroups()} + )} ); } @@ -173,15 +217,12 @@ export const GroupList: React.FC
+
+ 
+
+
+ );
+};
diff --git a/ui/v2.5/src/components/Groups/RelatedGroupPopover.tsx b/ui/v2.5/src/components/Groups/RelatedGroupPopover.tsx
new file mode 100644
index 00000000000..03095f284a4
--- /dev/null
+++ b/ui/v2.5/src/components/Groups/RelatedGroupPopover.tsx
@@ -0,0 +1,110 @@
+import {
+ faFilm,
+ faArrowUpLong,
+ faArrowDownLong,
+} from "@fortawesome/free-solid-svg-icons";
+import React, { useMemo } from "react";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Count } from "../Shared/PopoverCountButton";
+import { Icon } from "../Shared/Icon";
+import { HoverPopover } from "../Shared/HoverPopover";
+import { Link } from "react-router-dom";
+import NavUtils from "src/utils/navigation";
+import * as GQL from "src/core/generated-graphql";
+import { useIntl } from "react-intl";
+import { GroupTag } from "./GroupTag";
+
+interface IProps {
+ group: Pick<
+ GQL.GroupDataFragment,
+ "id" | "name" | "containing_groups" | "sub_group_count"
+ >;
+}
+
+const ContainingGroupsCount: React.FC
- showEditFilter(c.criterionOption.type)}
@@ -258,6 +272,7 @@ export const ItemList = (
interface IItemListContextProps {
filterMode: GQL.FilterMode;
defaultSort?: string;
+ defaultFilter?: ListFilterModel;
useResult: (filter: ListFilterModel) => T;
getCount: (data: T) => number;
getItems: (data: T) => E[];
@@ -275,6 +290,7 @@ export const ItemListContext = (
const {
filterMode,
defaultSort,
+ defaultFilter: providedDefaultFilter,
useResult,
getCount,
getItems,
@@ -287,10 +303,11 @@ export const ItemListContext = (
const emptyFilter = useMemo(
() =>
+ providedDefaultFilter?.clone() ??
new ListFilterModel(filterMode, undefined, {
defaultSortBy: defaultSort,
}),
- [filterMode, defaultSort]
+ [filterMode, defaultSort, providedDefaultFilter]
);
const [filter, setFilterState] = useState(
@@ -343,3 +360,11 @@ export const showWhenSingleSelection = (
) => {
return selectedIds.size == 1;
};
+
+export const showWhenNoneSelected = (
+ result: T,
+ filter: ListFilterModel,
+ selectedIds: Set
+) => {
+ return selectedIds.size === 0;
+};
diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx
index bff14336cfd..24ea02af1d4 100644
--- a/ui/v2.5/src/components/List/ListFilter.tsx
+++ b/ui/v2.5/src/components/List/ListFilter.tsx
@@ -1,5 +1,11 @@
import cloneDeep from "lodash-es/cloneDeep";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
import Mousetrap from "mousetrap";
import { SortDirectionEnum } from "src/core/generated-graphql";
import {
@@ -102,36 +108,17 @@ export const SearchTermInput: React.FC<{
);
};
-interface IListFilterProps {
- onFilterUpdate: (newFilter: ListFilterModel) => void;
- filter: ListFilterModel;
- view?: View;
- openFilterDialog: () => void;
-}
-
const PAGE_SIZE_OPTIONS = ["20", "40", "60", "120", "250", "500", "1000"];
-export const ListFilter: React.FC = ({
- onFilterUpdate,
- filter,
- openFilterDialog,
- view,
-}) => {
- const [customPageSizeShowing, setCustomPageSizeShowing] = useState(false);
- const perPageSelect = useRef(null);
- const [perPageInput, perPageFocus] = useFocus();
-
- const filterOptions = filter.options;
-
+export const PageSizeSelector: React.FC<{
+ pageSize: number;
+ setPageSize: (pageSize: number) => void;
+}> = ({ pageSize, setPageSize }) => {
const intl = useIntl();
- useEffect(() => {
- Mousetrap.bind("r", () => onReshuffleRandomSort());
-
- return () => {
- Mousetrap.unbind("r");
- };
- });
+ const perPageSelect = useRef(null);
+ const [perPageInput, perPageFocus] = useFocus();
+ const [customPageSizeShowing, setCustomPageSizeShowing] = useState(false);
useEffect(() => {
if (customPageSizeShowing) {
@@ -139,6 +126,27 @@ export const ListFilter: React.FC = ({
}
}, [customPageSizeShowing, perPageFocus]);
+ const pageSizeOptions = useMemo(() => {
+ const ret = PAGE_SIZE_OPTIONS.map((o) => {
+ return {
+ label: o,
+ value: o,
+ };
+ });
+ const currentPerPage = pageSize.toString();
+ if (!ret.find((o) => o.value === currentPerPage)) {
+ ret.push({ label: currentPerPage, value: currentPerPage });
+ ret.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
+ }
+
+ ret.push({
+ label: `${intl.formatMessage({ id: "custom" })}...`,
+ value: "custom",
+ });
+
+ return ret;
+ }, [intl, pageSize]);
+
function onChangePageSize(val: string) {
if (val === "custom") {
// added timeout since Firefox seems to trigger the rootClose immediately
@@ -154,6 +162,94 @@ export const ListFilter: React.FC = ({
return;
}
+ setPageSize(pp);
+ }
+
+ return (
+ = ({
+ onFilterUpdate,
+ filter,
+ openFilterDialog,
+ view,
+}) => {
+ const filterOptions = filter.options;
+
+ const intl = useIntl();
+
+ useEffect(() => {
+ Mousetrap.bind("r", () => onReshuffleRandomSort());
+
+ return () => {
+ Mousetrap.unbind("r");
+ };
+ });
+
+ function onChangePageSize(pp: number) {
const newFilter = cloneDeep(filter);
newFilter.itemsPerPage = pp;
newFilter.currentPage = 1;
@@ -211,25 +307,6 @@ export const ListFilter: React.FC = ({
(o) => o.value === filter.sortBy
);
- const pageSizeOptions = PAGE_SIZE_OPTIONS.map((o) => {
- return {
- label: o,
- value: o,
- };
- });
- const currentPerPage = filter.itemsPerPage.toString();
- if (!pageSizeOptions.find((o) => o.value === currentPerPage)) {
- pageSizeOptions.push({ label: currentPerPage, value: currentPerPage });
- pageSizeOptions.sort(
- (a, b) => parseInt(a.value, 10) - parseInt(b.value, 10)
- );
- }
-
- pageSizeOptions.push({
- label: `${intl.formatMessage({ id: "custom" })}...`,
- value: "custom",
- });
-
return (
<>
= (
= ({
@@ -82,6 +83,7 @@ export const SceneList: React.FC = ({
defaultSort,
view,
alterQuery,
+ fromGroupId,
}) => {
const intl = useIntl();
const history = useHistory();
@@ -297,6 +299,7 @@ export const SceneList: React.FC = ({
zoomIndex={filter.zoomIndex}
selectedIds={selectedIds}
onSelectChange={onSelectChange}
+ fromGroupId={fromGroupId}
/>
);
}
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 57d68f94105..b9df2f7b5c6 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -208,6 +208,10 @@ textarea.scene-description {
&-preview {
aspect-ratio: 16/9;
}
+
+ .scene-group-scene-number {
+ text-align: center;
+ }
}
.scene-card,
diff --git a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
index 1d1a37528d9..33aa24e32cd 100644
--- a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
@@ -1,10 +1,18 @@
-import React, { MutableRefObject, useRef, useState } from "react";
+import React, {
+ MutableRefObject,
+ PropsWithChildren,
+ useRef,
+ useState,
+} from "react";
import { Card, Form } from "react-bootstrap";
import { Link } from "react-router-dom";
import cx from "classnames";
import { TruncatedText } from "../TruncatedText";
import ScreenUtils from "src/utils/screen";
import useResizeObserver from "@react-hook/resize-observer";
+import { Icon } from "../Icon";
+import { faGripLines } from "@fortawesome/free-solid-svg-icons";
+import { DragSide, useDragMoveSelect } from "./dragMoveSelect";
interface ICardProps {
className?: string;
@@ -24,6 +32,10 @@ interface ICardProps {
resumeTime?: number;
duration?: number;
interactiveHeatmap?: string;
+
+ // move logic - both of the following are required to enable move dragging
+ objectId?: string; // required for move dragging
+ onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
}
export const calculateCardWidth = (
@@ -66,60 +78,82 @@ export const useContainerDimensions = (
return [target, dimension];
};
-export const GridCard: React.FC = (props: ICardProps) => {
- function handleImageClick(event: React.MouseEvent) {
- const { shiftKey } = event;
+const Checkbox: React.FC<{
+ selected?: boolean;
+ onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
+}> = ({ selected = false, onSelectedChanged }) => {
+ let shiftKey = false;
- if (!props.onSelectedChanged) {
- return;
- }
+ return (
+ onSelectedChanged!(!selected, shiftKey)}
+ onClick={(event: React.MouseEvent) => {
+ shiftKey = event.shiftKey;
+ event.stopPropagation();
+ }}
+ />
+ );
+};
- if (props.selecting) {
- props.onSelectedChanged(!props.selected, shiftKey);
- event.preventDefault();
- }
+const DragHandle: React.FC<{
+ setInHandle: (inHandle: boolean) => void;
+}> = ({ setInHandle }) => {
+ function onMouseEnter() {
+ setInHandle(true);
}
- function handleDrag(event: React.DragEvent) {
- if (props.selecting) {
- event.dataTransfer.setData("text/plain", "");
- event.dataTransfer.setDragImage(new Image(), 0, 0);
- }
+ function onMouseLeave() {
+ setInHandle(false);
}
- function handleDragOver(event: React.DragEvent) {
- const ev = event;
- const shiftKey = false;
-
- if (!props.onSelectedChanged) {
- return;
- }
+ return (
+
+ > = ({ children }) => {
+ return props.onSelectedChanged!(!props.selected, shiftKey)}
- onClick={(event: React.MouseEvent) => {
- shiftKey = event.shiftKey;
- event.stopPropagation();
- }}
- />
- );
+export const GridCard: React.FC = (props: ICardProps) => {
+ const { setInHandle, moveTarget, dragProps } = useDragMoveSelect({
+ selecting: props.selecting || false,
+ selected: props.selected || false,
+ onSelectedChanged: props.onSelectedChanged,
+ objectId: props.objectId,
+ onMove: props.onMove,
+ });
+
+ function handleImageClick(event: React.MouseEvent) {
+ const { shiftKey } = event;
+
+ if (!props.onSelectedChanged) {
+ return;
+ }
+
+ if (props.selecting) {
+ props.onSelectedChanged(!props.selected, shiftKey);
+ event.preventDefault();
}
}
@@ -156,16 +190,26 @@ export const GridCard: React.FC = (props: ICardProps) => {
- {maybeRenderCheckbox()}
+ {moveTarget !== undefined &&
+ {props.onSelectedChanged && (
+
+ onChangePageSize(e.target.value)}
+ value={pageSize.toString()}
+ className="btn-secondary"
+ >
+ {pageSizeOptions.map((s) => (
+
+ ))}
+
+ setCustomPageSizeShowing(false)}
+ >
+
+
+
+
+
+ );
+};
+
+interface IListFilterProps {
+ onFilterUpdate: (newFilter: ListFilterModel) => void;
+ filter: ListFilterModel;
+ view?: View;
+ openFilterDialog: () => void;
+}
+
+export const ListFilter: React.FC
@@ -301,63 +378,10 @@ export const ListFilter: React.FC = ({
)}
- > = ({
+ children,
+}) => {
+ if (!children) return null;
+
+ return (
+
+
+
+
+ {children}
+
+
+ );
+};
+
export interface IListFilterOperation {
text: string;
onClick: () => void;
@@ -154,6 +171,11 @@ export const ListOperationButtons: React.FC = ({
if (otherOperations) {
otherOperations
.filter((o) => {
+ // buttons with icons are rendered in the button group
+ if (o.icon) {
+ return false;
+ }
+
if (!o.isDisplayed) {
return true;
}
@@ -173,18 +195,11 @@ export const ListOperationButtons: React.FC = ({
});
}
- if (options.length > 0) {
- return (
-
-
-
-
- {options}
-
-
- );
- }
+ return (
+
+ {options.length > 0 ? options : undefined}
+
+ );
}
return (
diff --git a/ui/v2.5/src/components/List/ListProvider.tsx b/ui/v2.5/src/components/List/ListProvider.tsx
index a3a41a93d9f..6ef0d5055c0 100644
--- a/ui/v2.5/src/components/List/ListProvider.tsx
+++ b/ui/v2.5/src/components/List/ListProvider.tsx
@@ -66,6 +66,26 @@ export function useListContext() {
return context as IListContextState;
}
+const emptyState: IListContextState = {
+ selectable: false,
+ selectedIds: new Set(),
+ getSelected: () => [],
+ onSelectChange: () => {},
+ onSelectAll: () => {},
+ onSelectNone: () => {},
+ items: [],
+};
+
+export function useListContextOptional() {
+ const context = React.useContext(ListStateContext);
+
+ if (context === null) {
+ return emptyState as IListContextState;
+ }
+
+ return context as IListContextState;
+}
+
interface IQueryResultContextOptions<
T extends QueryResult,
E extends IHasID = IHasID
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index edfb9d2a791..632ac9533fc 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -572,6 +572,10 @@ input[type="range"].zoom-slider {
}
}
+.filtered-list-toolbar {
+ justify-content: center;
+}
+
.search-term-input {
margin-right: 0.5rem;
}
diff --git a/ui/v2.5/src/components/List/util.ts b/ui/v2.5/src/components/List/util.ts
index 69d3528bd4b..3b85b666d86 100644
--- a/ui/v2.5/src/components/List/util.ts
+++ b/ui/v2.5/src/components/List/util.ts
@@ -7,6 +7,7 @@ import { QueryResult } from "@apollo/client";
import { IHasID } from "src/utils/data";
import { ConfigurationContext } from "src/hooks/Config";
import { View } from "./views";
+import { usePrevious } from "src/hooks/state";
export function useFilterURL(
filter: ListFilterModel,
@@ -180,6 +181,25 @@ export function useListSelect(items: T[]) {
const [selectedIds, setSelectedIds] = useState>(new Set());
const [lastClickedId, setLastClickedId] = useState();
+ const prevItems = usePrevious(items);
+
+ useEffect(() => {
+ if (prevItems === items) {
+ return;
+ }
+
+ // filter out any selectedIds that are no longer in the list
+ const newSelectedIds = new Set();
+
+ selectedIds.forEach((id) => {
+ if (items.some((item) => item.id === id)) {
+ newSelectedIds.add(id);
+ }
+ });
+
+ setSelectedIds(newSelectedIds);
+ }, [prevItems, items, selectedIds]);
+
function singleSelect(id: string, selected: boolean) {
setLastClickedId(id);
diff --git a/ui/v2.5/src/components/List/views.ts b/ui/v2.5/src/components/List/views.ts
index 2b4179014e1..bb36a4c4ea6 100644
--- a/ui/v2.5/src/components/List/views.ts
+++ b/ui/v2.5/src/components/List/views.ts
@@ -31,4 +31,5 @@ export enum View {
StudioChildren = "studio_children",
GroupScenes = "group_scenes",
+ GroupSubGroups = "group_sub_groups",
}
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index cbe3ee64e0c..b5d053c67e7 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -1,15 +1,10 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { Link, useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom";
import cx from "classnames";
import * as GQL from "src/core/generated-graphql";
import { Icon } from "../Shared/Icon";
-import {
- GalleryLink,
- TagLink,
- GroupLink,
- SceneMarkerLink,
-} from "../Shared/TagLink";
+import { GalleryLink, TagLink, SceneMarkerLink } from "../Shared/TagLink";
import { HoverPopover } from "../Shared/HoverPopover";
import { SweatDrops } from "../Shared/SweatDrops";
import { TruncatedText } from "../Shared/TruncatedText";
@@ -20,7 +15,7 @@ import { ConfigurationContext } from "src/hooks/Config";
import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
import { GridCard, calculateCardWidth } from "../Shared/GridCard/GridCard";
import { RatingBanner } from "../Shared/RatingBanner";
-import { FormattedNumber } from "react-intl";
+import { FormattedMessage, FormattedNumber } from "react-intl";
import {
faBox,
faCopy,
@@ -34,6 +29,7 @@ import { PreviewScrubber } from "./PreviewScrubber";
import { PatchComponent } from "src/patch";
import ScreenUtils from "src/utils/screen";
import { StudioOverlay } from "../Shared/GridCard/StudioOverlay";
+import { GroupTag } from "../Groups/GroupTag";
interface IScenePreviewProps {
isPortrait: boolean;
@@ -106,8 +102,26 @@ interface ISceneCardProps {
selected?: boolean | undefined;
zoomIndex?: number;
onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
+ fromGroupId?: string;
}
+const Description: React.FC<{
+ sceneNumber?: number;
+}> = ({ sceneNumber }) => {
+ if (!sceneNumber) return null;
+
+ return (
+ <>
+
+ {sceneNumber !== undefined && ( + +
{maybeRenderTagPopoverButton()}
diff --git a/ui/v2.5/src/components/Scenes/SceneCardsGrid.tsx b/ui/v2.5/src/components/Scenes/SceneCardsGrid.tsx
index b882b5ec543..9884e37a06f 100644
--- a/ui/v2.5/src/components/Scenes/SceneCardsGrid.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCardsGrid.tsx
@@ -10,6 +10,7 @@ interface ISceneCardsGrid {
selectedIds: Set;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+ fromGroupId?: string;
}
export const SceneCardsGrid: React.FC = ({
@@ -18,6 +19,7 @@ export const SceneCardsGrid: React.FC = ({
selectedIds,
zoomIndex,
onSelectChange,
+ fromGroupId,
}) => {
const [componentRef, { width }] = useContainerDimensions();
return (
@@ -35,6 +37,7 @@ export const SceneCardsGrid: React.FC = ({
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(scene.id, selected, shiftKey)
}
+ fromGroupId={fromGroupId}
/>
))}
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneGroupPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneGroupPanel.tsx
index 6f58b504cf9..53a5e174d30 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneGroupPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneGroupPanel.tsx
@@ -13,7 +13,7 @@ export const SceneGroupPanel: React.FC
- onChangePageSize(e.target.value)}
- value={filter.itemsPerPage.toString()}
- className="btn-secondary"
- >
- {pageSizeOptions.map((s) => (
-
- ))}
-
- setCustomPageSizeShowing(false)}
- >
-
-
-
-
-
+ + {sceneNumber !== undefined && ( + +
-
- 
-
-
+ {children}
;
+};
- ev.dataTransfer.dropEffect = "move";
- ev.preventDefault();
+const MoveTarget: React.FC<{ dragSide: DragSide }> = ({ dragSide }) => {
+ if (dragSide === undefined) {
+ return null;
}
- let shiftKey = false;
+ return (
+
+ );
+};
- function maybeRenderCheckbox() {
- if (props.onSelectedChanged) {
- return (
-
void;
+ objectId?: string;
+ onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
+}) {
+ const { selectedIds } = useListContextOptional();
+
+ const [inHandle, setInHandle] = useState(false);
+ const [moveSrc, setMoveSrc] = useState(false);
+ const [moveTarget, setMoveTarget] = useState();
+
+ const canSelect = props.onSelectedChanged && props.selecting;
+ const canMove = !!props.objectId && props.onMove && inHandle;
+ const draggable = canSelect || canMove;
+
+ function onDragStart(event: React.DragEvent) {
+ if (!draggable) {
+ event.preventDefault();
+ return;
+ }
+
+ if (!inHandle && props.selecting) {
+ event.dataTransfer.setData("text/plain", "");
+ // event.dataTransfer.setDragImage(new Image(), 0, 0);
+ event.dataTransfer.effectAllowed = "copy";
+ event.stopPropagation();
+ } else if (inHandle && props.objectId) {
+ if (selectedIds.size > 1 && selectedIds.has(props.objectId)) {
+ // moving all selected
+ const movingIds = Array.from(selectedIds.values()).join(",");
+ event.dataTransfer.setData("text/plain", movingIds);
+ } else {
+ // moving single
+ setMoveSrc(true);
+ event.dataTransfer.setData("text/plain", props.objectId);
+ }
+ event.dataTransfer.effectAllowed = "move";
+ event.stopPropagation();
+ }
+ }
+
+ function doSetMoveTarget(event: React.DragEvent) {
+ const isBefore =
+ event.nativeEvent.offsetX < event.currentTarget.clientWidth / 2;
+ if (isBefore && moveTarget !== DragSide.BEFORE) {
+ setMoveTarget(DragSide.BEFORE);
+ } else if (!isBefore && moveTarget !== DragSide.AFTER) {
+ setMoveTarget(DragSide.AFTER);
+ }
+ }
+
+ function onDragEnter(event: React.DragEvent) {
+ const ev = event;
+ const shiftKey = false;
+
+ if (ev.dataTransfer.effectAllowed === "copy") {
+ if (!props.onSelectedChanged) {
+ return;
+ }
+
+ if (props.selecting && !props.selected) {
+ props.onSelectedChanged(true, shiftKey);
+ }
+
+ ev.dataTransfer.dropEffect = "copy";
+ ev.preventDefault();
+ } else if (ev.dataTransfer.effectAllowed === "move" && !moveSrc) {
+ doSetMoveTarget(event);
+ ev.dataTransfer.dropEffect = "move";
+ ev.preventDefault();
+ } else {
+ ev.dataTransfer.dropEffect = "none";
+ }
+ }
+
+ function onDragLeave(event: React.DragEvent) {
+ if (event.currentTarget.contains(event.relatedTarget as Node)) {
+ return;
+ }
+
+ setMoveTarget(undefined);
+ }
+
+ function onDragOver(event: React.DragEvent) {
+ if (event.dataTransfer.effectAllowed === "move" && moveSrc) {
+ return;
+ }
+
+ doSetMoveTarget(event);
+
+ event.preventDefault();
+ }
+
+ function onDragEnd() {
+ setMoveTarget(undefined);
+ setMoveSrc(false);
+ }
+
+ function onDrop(event: React.DragEvent) {
+ const ev = event;
+
+ if (
+ ev.dataTransfer.effectAllowed === "copy" ||
+ !props.onMove ||
+ !props.objectId
+ ) {
+ return;
+ }
+
+ const srcIds = ev.dataTransfer.getData("text/plain").split(",");
+ const targetId = props.objectId;
+ const after = moveTarget === DragSide.AFTER;
+
+ props.onMove(srcIds, targetId, after);
+
+ onDragEnd();
+ }
+
+ return {
+ inHandle,
+ setInHandle,
+ moveTarget,
+ dragProps: {
+ draggable: draggable || undefined,
+ onDragStart,
+ onDragEnter,
+ onDragLeave,
+ onDragOver,
+ onDragEnd,
+ onDrop,
+ },
+ };
+}
diff --git a/ui/v2.5/src/components/Shared/GridCard/styles.scss b/ui/v2.5/src/components/Shared/GridCard/styles.scss
index fcf699fe234..ece1f280aab 100644
--- a/ui/v2.5/src/components/Shared/GridCard/styles.scss
+++ b/ui/v2.5/src/components/Shared/GridCard/styles.scss
@@ -57,3 +57,28 @@
transition: opacity 0.5s;
}
}
+
+.move-target {
+ align-items: center;
+ background-color: $primary;
+ color: $secondary;
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ opacity: 0.5;
+ pointer-events: none;
+ position: absolute;
+ width: 10%;
+
+ &.move-target-before {
+ left: 0;
+ }
+
+ &.move-target-after {
+ right: 0;
+ }
+}
+
+.card-drag-handle {
+ filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
+}
diff --git a/ui/v2.5/src/components/Shared/Icon.tsx b/ui/v2.5/src/components/Shared/Icon.tsx
index adbc3dcfdd3..32f4d0259f0 100644
--- a/ui/v2.5/src/components/Shared/Icon.tsx
+++ b/ui/v2.5/src/components/Shared/Icon.tsx
@@ -1,23 +1,16 @@
import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconDefinition, SizeProp } from "@fortawesome/fontawesome-svg-core";
+import {
+ FontAwesomeIcon,
+ FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";
import { PatchComponent } from "src/patch";
-interface IIcon {
- icon: IconDefinition;
- className?: string;
- color?: string;
- size?: SizeProp;
-}
-
-export const Icon: React.FC = PatchComponent(
+export const Icon: React.FC = PatchComponent(
"Icon",
- ({ icon, className, color, size }) => (
+ (props) => (
= (props) => {
);
};
-export const MultiSet: React.FC = (props) => {
- const intl = useIntl();
- const modes = [
- GQL.BulkUpdateIdMode.Set,
- GQL.BulkUpdateIdMode.Add,
- GQL.BulkUpdateIdMode.Remove,
- ];
-
- function getModeText(mode: GQL.BulkUpdateIdMode) {
- switch (mode) {
- case GQL.BulkUpdateIdMode.Set:
- return intl.formatMessage({
- id: "actions.overwrite",
- defaultMessage: "Overwrite",
- });
- case GQL.BulkUpdateIdMode.Add:
- return intl.formatMessage({ id: "actions.add", defaultMessage: "Add" });
- case GQL.BulkUpdateIdMode.Remove:
- return intl.formatMessage({
- id: "actions.remove",
- defaultMessage: "Remove",
- });
- }
+function getModeText(intl: IntlShape, mode: GQL.BulkUpdateIdMode) {
+ switch (mode) {
+ case GQL.BulkUpdateIdMode.Set:
+ return intl.formatMessage({
+ id: "actions.overwrite",
+ defaultMessage: "Overwrite",
+ });
+ case GQL.BulkUpdateIdMode.Add:
+ return intl.formatMessage({ id: "actions.add", defaultMessage: "Add" });
+ case GQL.BulkUpdateIdMode.Remove:
+ return intl.formatMessage({
+ id: "actions.remove",
+ defaultMessage: "Remove",
+ });
}
+}
+
+export const MultiSetModeButton: React.FC<{
+ mode: GQL.BulkUpdateIdMode;
+ active: boolean;
+ onClick: () => void;
+ disabled?: boolean;
+}> = ({ mode, active, onClick, disabled }) => {
+ const intl = useIntl();
+
+ return (
+
+ );
+};
+
+const modes = [
+ GQL.BulkUpdateIdMode.Set,
+ GQL.BulkUpdateIdMode.Add,
+ GQL.BulkUpdateIdMode.Remove,
+];
- function onSetMode(mode: GQL.BulkUpdateIdMode) {
- if (mode === props.mode) {
+export const MultiSetModeButtons: React.FC<{
+ mode: GQL.BulkUpdateIdMode;
+ onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+ disabled?: boolean;
+}> = ({ mode, onSetMode, disabled }) => {
+ return (
+
+ {modes.map((m) => (
+ onSetMode(m)}
+ disabled={disabled}
+ />
+ ))}
+
+ );
+};
+
+export const MultiSet: React.FC = (props) => {
+ const { mode, onUpdate, existingIds } = props;
+
+ function onSetMode(m: GQL.BulkUpdateIdMode) {
+ if (m === mode) {
return;
}
// if going to Set, set the existing ids
- if (mode === GQL.BulkUpdateIdMode.Set && props.existingIds) {
- props.onUpdate(props.existingIds);
+ if (m === GQL.BulkUpdateIdMode.Set && existingIds) {
+ onUpdate(existingIds);
// if going from Set, wipe the ids
} else if (
- mode !== GQL.BulkUpdateIdMode.Set &&
- props.mode === GQL.BulkUpdateIdMode.Set
+ m !== GQL.BulkUpdateIdMode.Set &&
+ mode === GQL.BulkUpdateIdMode.Set
) {
- props.onUpdate([]);
+ onUpdate([]);
}
- props.onSetMode(mode);
- }
-
- function renderModeButton(mode: GQL.BulkUpdateIdMode) {
- return (
-
- );
+ props.onSetMode(m);
}
return (
= ({
type,
count,
}) => {
- const { configuration } = React.useContext(ConfigurationContext);
- const abbreviateCounter = configuration?.ui.abbreviateCounters ?? false;
-
const intl = useIntl();
+ // TODO - refactor - create SceneIcon, ImageIcon etc components
function getIcon() {
switch (type) {
case "scene":
@@ -53,6 +75,7 @@ export const PopoverCountButton: React.FC = ({
case "marker":
return faMapMarkerAlt;
case "group":
+ case "sub_group":
return faFilm;
case "performer":
return faUser;
@@ -88,6 +111,11 @@ export const PopoverCountButton: React.FC = ({
one: "group",
other: "groups",
};
+ case "sub_group":
+ return {
+ one: "sub_group",
+ other: "sub_groups",
+ };
case "performer":
return {
one: "performer",
@@ -104,27 +132,12 @@ export const PopoverCountButton: React.FC = ({
function getTitle() {
const pluralCategory = intl.formatPlural(count);
const options = getPluralOptions();
- const plural = options[pluralCategory as "one"] || options.other;
+ const plural = intl.formatMessage({
+ id: options[pluralCategory as "one"] || options.other,
+ });
return `${count} ${plural}`;
}
- const countEl = useMemo(() => {
- if (!abbreviateCounter) {
- return count;
- }
-
- const formatted = TextUtils.abbreviateCounter(count);
- return (
-
- = ({
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
index d01de3eac42..d01eee2d5ff 100644
--- a/ui/v2.5/src/components/Shared/TagLink.tsx
+++ b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -73,12 +73,14 @@ export const PerformerLink: React.FC = ({
interface IGroupLinkProps {
group: INamedObject;
- linkType?: "scene";
+ description?: string;
+ linkType?: "scene" | "sub_group" | "details";
className?: string;
}
export const GroupLink: React.FC = ({
group,
+ description,
linkType = "scene",
className,
}) => {
@@ -86,6 +88,10 @@ export const GroupLink: React.FC = ({
switch (linkType) {
case "scene":
return NavUtils.makeGroupScenesUrl(group);
+ case "sub_group":
+ return NavUtils.makeSubGroupsUrl(group);
+ case "details":
+ return NavUtils.makeGroupUrl(group.id ?? "");
}
}, [group, linkType]);
@@ -93,7 +99,10 @@ export const GroupLink: React.FC = ({
return (
- {title}
+ {title}{" "}
+ {description && (
+ ({description})
+ )}
);
};
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index 30566ab9dad..41b4f293a05 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/ui/v2.5/src/components/Shared/styles.scss
@@ -234,29 +234,47 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active {
height: 5px;
}
- .card-check {
+ .card-controls {
+ align-items: center;
+ display: flex;
left: 0.5rem;
- margin-top: -12px;
- opacity: 0;
- padding-left: 15px;
+
position: absolute;
top: 0.7rem;
- width: 1.2rem;
z-index: 1;
+ }
+
+ .card-check,
+ .card-drag-handle {
+ height: 1.2rem;
+ opacity: 0;
+ width: 1.2rem;
+
+ @media (hover: none), (pointer: coarse) {
+ // always show card controls when hovering not supported
+ opacity: 0.25;
+ }
+ }
+
+ .card-drag-handle {
+ cursor: move;
+ }
+
+ .card-check {
+ padding-left: 15px;
&:checked {
opacity: 0.75;
}
@media (hover: none), (pointer: coarse) {
- // always show card check button when hovering not supported
- opacity: 0.25;
- // and make it bigger
+ // and make it bigger when hovering not supported
width: 1.5rem;
}
}
- &:hover .card-check {
+ &:hover .card-check,
+ &:hover .card-drag-handle {
opacity: 0.75;
transition: opacity 0.5s;
}
diff --git a/ui/v2.5/src/core/StashService.ts b/ui/v2.5/src/core/StashService.ts
index ee1d17ef9e4..89500419f53 100644
--- a/ui/v2.5/src/core/StashService.ts
+++ b/ui/v2.5/src/core/StashService.ts
@@ -1388,6 +1388,60 @@ export const useGroupsDestroy = (input: GQL.GroupsDestroyMutationVariables) =>
},
});
+export function useReorderSubGroupsMutation() {
+ return GQL.useReorderSubGroupsMutation({
+ update(cache) {
+ evictQueries(cache, [
+ GQL.FindGroupsDocument, // various filters
+ ]);
+ },
+ });
+}
+
+export const useAddSubGroups = () => {
+ const [addSubGroups] = GQL.useAddGroupSubGroupsMutation({
+ update(cache, result) {
+ if (!result.data?.addGroupSubGroups) return;
+
+ evictTypeFields(cache, groupMutationImpactedTypeFields);
+ evictQueries(cache, groupMutationImpactedQueries);
+ },
+ });
+
+ return (containingGroupId: string, toAdd: GQL.GroupDescriptionInput[]) => {
+ return addSubGroups({
+ variables: {
+ input: {
+ containing_group_id: containingGroupId,
+ sub_groups: toAdd,
+ },
+ },
+ });
+ };
+};
+
+export const useRemoveSubGroups = () => {
+ const [removeSubGroups] = GQL.useRemoveGroupSubGroupsMutation({
+ update(cache, result) {
+ if (!result.data?.removeGroupSubGroups) return;
+
+ evictTypeFields(cache, groupMutationImpactedTypeFields);
+ evictQueries(cache, groupMutationImpactedQueries);
+ },
+ });
+
+ return (containingGroupId: string, removeIds: string[]) => {
+ return removeSubGroups({
+ variables: {
+ input: {
+ containing_group_id: containingGroupId,
+ sub_group_ids: removeIds,
+ },
+ },
+ });
+ };
+};
+
const sceneMarkerMutationImpactedTypeFields = {
Tag: ["scene_marker_count"],
};
diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
index b76016c8c09..f2c5c5d1fb9 100644
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -4,6 +4,7 @@
"add_directory": "Add Directory",
"add_entity": "Add {entityType}",
"add_manual_date": "Add manual date",
+ "add_sub_groups": "Add Sub-Groups",
"add_o": "Add O",
"add_play": "Add play",
"add_to_entity": "Add to {entityType}",
@@ -91,6 +92,7 @@
"reload_scrapers": "Reload scrapers",
"remove": "Remove",
"remove_date": "Remove date",
+ "remove_from_containing_group": "Remove from Group",
"remove_from_gallery": "Remove from Gallery",
"rename_gen_files": "Rename generated files",
"rescan": "Rescan",
@@ -799,6 +801,9 @@
"websocket_connection_failed": "Unable to make websocket connection: see browser console for details",
"websocket_connection_reestablished": "Websocket connection re-established"
},
+ "containing_group": "Containing Group",
+ "containing_group_count": "Containing Group Count",
+ "containing_groups": "Containing Groups",
"countables": {
"files": "{count, plural, one {File} other {Files}}",
"galleries": "{count, plural, one {Gallery} other {Galleries}}",
@@ -1090,6 +1095,7 @@
"image_index": "Image #",
"images": "Images",
"include_parent_tags": "Include parent tags",
+ "include_sub_group_content": "Include sub-group content",
"include_sub_studio_content": "Include sub-studio content",
"include_sub_studios": "Include subsidiary studios",
"include_sub_tag_content": "Include sub-tag content",
@@ -1424,6 +1430,11 @@
},
"studio_tags": "Studio Tags",
"studios": "Studios",
+ "sub_group": "Sub-Group",
+ "sub_group_count": "Sub-Group Count",
+ "sub_group_of": "Sub-group of {parent}",
+ "sub_group_order": "Sub-Group Order",
+ "sub_groups": "Sub-Groups",
"sub_tag_count": "Sub-Tag Count",
"sub_tag_of": "Sub-tag of {parent}",
"sub_tags": "Sub-Tags",
diff --git a/ui/v2.5/src/models/list-filter/criteria/criterion.ts b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
index 92dd256e97b..d950073be4c 100644
--- a/ui/v2.5/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -319,6 +319,7 @@ export class IHierarchicalLabeledIdCriterion extends Criterion new GroupsCriterion()
-);
+const modifierOptions = [
+ CriterionModifier.Includes,
+ CriterionModifier.Excludes,
+ CriterionModifier.IsNull,
+ CriterionModifier.NotNull,
+];
-export class GroupsCriterion extends ILabeledIdCriterion {
- constructor() {
- super(GroupsCriterionOption);
+const defaultModifier = CriterionModifier.Includes;
+
+class BaseGroupsCriterionOption extends CriterionOption {
+ constructor(messageID: string, type: CriterionType) {
+ super({
+ messageID,
+ type,
+ modifierOptions,
+ defaultModifier,
+ inputType,
+ makeCriterion: () => new GroupsCriterion(this),
+ });
}
}
+
+export const GroupsCriterionOption = new BaseGroupsCriterionOption(
+ "groups",
+ "groups"
+);
+
+export class GroupsCriterion extends IHierarchicalLabeledIdCriterion {}
+
+export const ContainingGroupsCriterionOption = new BaseGroupsCriterionOption(
+ "containing_groups",
+ "containing_groups"
+);
+
+export const SubGroupsCriterionOption = new BaseGroupsCriterionOption(
+ "sub_groups",
+ "sub_groups"
+);
diff --git a/ui/v2.5/src/models/list-filter/filter.ts b/ui/v2.5/src/models/list-filter/filter.ts
index 599a6bbaedc..183b630a25e 100644
--- a/ui/v2.5/src/models/list-filter/filter.ts
+++ b/ui/v2.5/src/models/list-filter/filter.ts
@@ -488,6 +488,12 @@ export class ListFilterModel {
return ret;
}
+ public setPageSize(pageSize: number) {
+ const ret = this.clone();
+ ret.itemsPerPage = pageSize;
+ return ret;
+ }
+
public changePage(page: number) {
const ret = this.clone();
ret.currentPage = page;
diff --git a/ui/v2.5/src/models/list-filter/groups.ts b/ui/v2.5/src/models/list-filter/groups.ts
index 43439a62f33..c96fd8dc6d0 100644
--- a/ui/v2.5/src/models/list-filter/groups.ts
+++ b/ui/v2.5/src/models/list-filter/groups.ts
@@ -13,6 +13,10 @@ import { DisplayMode } from "./types";
import { RatingCriterionOption } from "./criteria/rating";
// import { StudioTagsCriterionOption } from "./criteria/tags";
import { TagsCriterionOption } from "./criteria/tags";
+import {
+ ContainingGroupsCriterionOption,
+ SubGroupsCriterionOption,
+} from "./criteria/groups";
const defaultSortBy = "name";
@@ -23,6 +27,7 @@ const sortByOptions = [
"duration",
"rating",
"tag_count",
+ "sub_group_order",
]
.map(ListFilterOptions.createSortBy)
.concat([
@@ -44,6 +49,10 @@ const criterionOptions = [
RatingCriterionOption,
PerformersCriterionOption,
createDateCriterionOption("date"),
+ ContainingGroupsCriterionOption,
+ SubGroupsCriterionOption,
+ createMandatoryNumberCriterionOption("containing_group_count"),
+ createMandatoryNumberCriterionOption("sub_group_count"),
TagsCriterionOption,
createMandatoryNumberCriterionOption("tag_count"),
createMandatoryTimestampCriterionOption("created_at"),
diff --git a/ui/v2.5/src/models/list-filter/types.ts b/ui/v2.5/src/models/list-filter/types.ts
index 9884c63c81c..b632609ab8b 100644
--- a/ui/v2.5/src/models/list-filter/types.ts
+++ b/ui/v2.5/src/models/list-filter/types.ts
@@ -148,6 +148,10 @@ export type CriterionType =
| "studios"
| "scenes"
| "groups"
+ | "containing_groups"
+ | "containing_group_count"
+ | "sub_groups"
+ | "sub_group_count"
| "galleries"
| "birth_year"
| "age"
diff --git a/ui/v2.5/src/utils/bulkUpdate.ts b/ui/v2.5/src/utils/bulkUpdate.ts
index deb8956bb30..1ded76c27d5 100644
--- a/ui/v2.5/src/utils/bulkUpdate.ts
+++ b/ui/v2.5/src/utils/bulkUpdate.ts
@@ -45,8 +45,11 @@ export function getAggregateStudioId(state: IHasStudio[]) {
return ret;
}
-export function getAggregateIds(sortedLists: string[][]) {
- let ret: string[] = [];
+export function getAggregateIds(
+ sortedLists: T[][],
+ isEqualFn: (a: T[], b: T[]) => boolean = isEqual
+) {
+ let ret: T[] = [];
let first = true;
sortedLists.forEach((l) => {
@@ -54,7 +57,7 @@ export function getAggregateIds(sortedLists: string[][]) {
ret = l;
first = false;
} else {
- if (!isEqual(ret, l)) {
+ if (!isEqualFn(ret, l)) {
ret = [];
}
}
diff --git a/ui/v2.5/src/utils/navigation.ts b/ui/v2.5/src/utils/navigation.ts
index f0e06b0b75b..4b4b2bf69a7 100644
--- a/ui/v2.5/src/utils/navigation.ts
+++ b/ui/v2.5/src/utils/navigation.ts
@@ -12,7 +12,12 @@ import {
TagsCriterionOption,
} from "src/models/list-filter/criteria/tags";
import { ListFilterModel } from "src/models/list-filter/filter";
-import { GroupsCriterion } from "src/models/list-filter/criteria/groups";
+import {
+ ContainingGroupsCriterionOption,
+ GroupsCriterion,
+ GroupsCriterionOption,
+ SubGroupsCriterionOption,
+} from "src/models/list-filter/criteria/groups";
import {
Criterion,
CriterionOption,
@@ -214,10 +219,12 @@ const makeChildStudiosUrl = (studio: Partial) => {
const makeGroupScenesUrl = (group: Partial) => {
if (!group.id) return "#";
const filter = new ListFilterModel(GQL.FilterMode.Scenes, undefined);
- const criterion = new GroupsCriterion();
- criterion.value = [
- { id: group.id, label: group.name || `Group ${group.id}` },
- ];
+ const criterion = new GroupsCriterion(GroupsCriterionOption);
+ criterion.value = {
+ items: [{ id: group.id, label: group.name || `Group ${group.id}` }],
+ excluded: [],
+ depth: 0,
+ };
filter.criteria.push(criterion);
return `/scenes?${filter.makeQueryParameters()}`;
};
@@ -382,6 +389,46 @@ const makePhotographerImagesUrl = (photographer: string) => {
return `/images?${filter.makeQueryParameters()}`;
};
+const makeGroupUrl = (id: string) => {
+ return `/groups/${id}`;
+};
+
+const makeContainingGroupsUrl = (group: Partial) => {
+ if (!group.id) return "#";
+ const filter = new ListFilterModel(GQL.FilterMode.Groups, undefined);
+ const criterion = new GroupsCriterion(SubGroupsCriterionOption);
+ criterion.value = {
+ items: [
+ {
+ id: group.id,
+ label: group.name || `Group ${group.id}`,
+ },
+ ],
+ excluded: [],
+ depth: 0,
+ };
+ filter.criteria.push(criterion);
+ return `/groups?${filter.makeQueryParameters()}`;
+};
+
+const makeSubGroupsUrl = (group: INamedObject) => {
+ if (!group.id) return "#";
+ const filter = new ListFilterModel(GQL.FilterMode.Groups, undefined);
+ const criterion = new GroupsCriterion(ContainingGroupsCriterionOption);
+ criterion.value = {
+ items: [
+ {
+ id: group.id,
+ label: group.name || `Group ${group.id}`,
+ },
+ ],
+ excluded: [],
+ depth: 0,
+ };
+ filter.criteria.push(criterion);
+ return `/groups?${filter.makeQueryParameters()}`;
+};
+
export function handleUnsavedChanges(
intl: IntlShape,
basepath: string,
@@ -409,6 +456,7 @@ const NavUtils = {
makeStudioGroupsUrl: makeStudioGroupsUrl,
makeStudioPerformersUrl,
makeTagUrl,
+ makeGroupUrl,
makeParentTagsUrl,
makeChildTagsUrl,
makeTagSceneMarkersUrl,
@@ -427,6 +475,8 @@ const NavUtils = {
makePhotographerGalleriesUrl,
makePhotographerImagesUrl,
makeDirectorGroupsUrl,
+ makeContainingGroupsUrl,
+ makeSubGroupsUrl,
};
export default NavUtils;
-
- {modes.map((m) => renderModeButton(m))}
-
+
);
diff --git a/ui/v2.5/src/components/Shared/PopoverCountButton.tsx b/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
index aada2fe193f..10152f78ad7 100644
--- a/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
+++ b/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
@@ -7,7 +7,7 @@ import {
faVideo,
faMapMarkerAlt,
} from "@fortawesome/free-solid-svg-icons";
-import React, { useMemo } from "react";
+import React from "react";
import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
import { FormattedNumber, useIntl } from "react-intl";
import { Link } from "react-router-dom";
@@ -15,12 +15,36 @@ import { ConfigurationContext } from "src/hooks/Config";
import TextUtils from "src/utils/text";
import { Icon } from "./Icon";
+export const Count: React.FC<{
+ count: number;
+}> = ({ count }) => {
+ const { configuration } = React.useContext(ConfigurationContext);
+ const abbreviateCounter = configuration?.ui.abbreviateCounters ?? false;
+
+ if (!abbreviateCounter) {
+ return {count};
+ }
+
+ const formatted = TextUtils.abbreviateCounter(count);
+
+ return (
+
+