Commit

ui/v2.5/src/components/List/ItemList.tsx

@@ -29,11 +29,16 @@ import { EditFilterDialog } from "src/components/List/EditFilterDialog";
 import { ListFilter } from "./ListFilter";
 import { FilterTags } from "./FilterTags";
 import { ListViewOptions } from "./ListViewOptions";
+import { ListToggleConfigButtons } from "./ListToggleConfigButtons";
 import { ListOperationButtons } from "./ListOperationButtons";
 import { LoadingIndicator } from "../Shared/LoadingIndicator";
+import { ConfigMode } from "src/models/list-filter/types";
 import { DisplayMode } from "src/models/list-filter/types";
 import { ButtonToolbar } from "react-bootstrap";
-
+import {
+  useConfiguration,
+  useConfigureUI,
+} from "src/core/StashService";
 export enum PersistanceLevel {
   // do not load default query or persist display mode
   NONE,
@@ -91,6 +96,7 @@ interface IItemListProps<T extends QueryResult, E extends IDataItem> {
   selectable?: boolean;
   alterQuery?: boolean;
   defaultZoomIndex?: number;
+  configOperations?: IItemListOperation<T>[];
   otherOperations?: IItemListOperation<T>[];
   renderContent: (
     result: T,
@@ -142,6 +148,7 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
     persistState,
     zoomable,
     selectable,
+    configOperations,
     otherOperations,
     renderContent,
     renderEditDialog,
@@ -362,6 +369,9 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       result.refetch();
     }
 
+    function refetch() {
+      result.refetch();
+    };
     function onDelete() {
       setIsDeleteDialogOpen(true);
     }
@@ -430,6 +440,51 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       );
     }
 
+    const activePage = location.pathname.match(/^\/([^/]+)(?:\/[^/]+)?/)![1];
+    const config = useConfiguration();
+    const configSettings = {
+      showChildStudioContent: config.data?.configuration.ui.showChildStudioContent,
+      showChildTagContent: config.data?.configuration.ui.showChildTagContent,
+      showTagCardOnHover: config.data?.configuration.ui.showTagCardOnHover,
+    };
+
+    const [childActive, setChildActive] = useState<boolean>(false);
+    const [saveUI] = useConfigureUI();
+
+    function onSetToggleChildren(mode: string) {
+      // Clone the config object to avoid mutating the original
+      const updatedConfig = { ...config.data?.configuration.ui };
+
+      switch (mode) {
+        case "studios":
+          updatedConfig.showChildStudioContent = !childActive;
+          setChildActive(!childActive);
+          break;
+        case "tags":
+          updatedConfig.showChildTagContent = !childActive;
+          setChildActive(!childActive);
+          break;
+        default:
+          break;
+      }
+
+      // Now, save the updated config object
+      saveUI({
+        variables: {
+          input: {
+            ...config.data?.configuration.ui,
+            ...updatedConfig,
+          },
+        },
+      });
+    }  
+    function onChangeConfigMode(configMode: ConfigMode) {
+      const newFilter = cloneDeep(filter);
+      //newFilter.configMode = configMode;
+     // updateFilter(newFilter);
+     // _onChangePage(1)
+    }
+
     function onChangeDisplayMode(displayMode: DisplayMode) {
       const newFilter = cloneDeep(filter);
       newFilter.displayMode = displayMode;
@@ -477,10 +532,17 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
             onSelectAll={selectable ? onSelectAll : undefined}
             onSelectNone={selectable ? onSelectNone : undefined}
             otherOperations={operations}
+            configOperations={operations}
             itemsSelected={selectedIds.size > 0}
             onEdit={renderEditDialog ? onEdit : undefined}
             onDelete={renderDeleteDialog ? onDelete : undefined}
           />
+         <ListToggleConfigButtons
+            activePage={location.pathname.match(/^\/([^/]+)(?:\/[^/]+)?/)[1]!}
+            configMode={ConfigMode}
+            settings={configSettings}
+            onSetConfigMode={onChangeConfigMode}
+          />
           <ListViewOptions
             displayMode={filter.displayMode}
             displayModeOptions={filterOptions.displayModeOptions}

ui/v2.5/src/components/List/ListFilter.tsx

@@ -21,7 +21,6 @@ import {
   Popover,
   Overlay,
 } from "react-bootstrap";
-
 import { Icon } from "../Shared/Icon";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import useFocus from "src/utils/focus";
@@ -57,6 +56,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
   openFilterDialog,
   persistState,
 }) => {
+
   const [customPageSizeShowing, setCustomPageSizeShowing] = useState(false);
   const [queryRef, setQueryFocus] = useFocus();
   const [queryClearShowing, setQueryClearShowing] = useState(

ui/v2.5/src/components/List/ListOperationButtons.tsx

@@ -16,6 +16,7 @@ import {
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 
+
 interface IListFilterOperation {
   text: string;
   onClick: () => void;
@@ -31,6 +32,8 @@ interface IListOperationButtonsProps {
   onDelete?: () => void;
   itemsSelected?: boolean;
   otherOperations?: IListFilterOperation[];
+  configOperations?: IListFilterOperation[];
+
 }
 
 export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
@@ -43,6 +46,8 @@ export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
 }) => {
   const intl = useIntl();
 
+
+//alert(JSON.stringify(location.pathname));
   useEffect(() => {
     Mousetrap.bind("s a", () => onSelectAll?.());
     Mousetrap.bind("s n", () => onSelectNone?.());
@@ -68,6 +73,7 @@ export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
   });
 
   function maybeRenderButtons() {
+
     const buttons = (otherOperations ?? []).filter((o) => {
       if (!o.icon) {
         return false;