Add folder browser to path filter field (#3570)

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

@@ -12,6 +12,7 @@ import {
   DateCriterion,
   TimestampCriterion,
   BooleanCriterion,
+  PathCriterionOption,
 } from "src/models/list-filter/criteria/criterion";
 import { useIntl } from "react-intl";
 import {
@@ -36,6 +37,7 @@ import { RatingCriterion } from "../../models/list-filter/criteria/rating";
 import { RatingFilter } from "./Filters/RatingFilter";
 import { BooleanFilter } from "./Filters/BooleanFilter";
 import { OptionsListFilter } from "./Filters/OptionsListFilter";
+import { PathFilter } from "./Filters/PathFilter";
 
 interface IGenericCriterionEditor {
   criterion: Criterion<CriterionValue>;
@@ -137,6 +139,11 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
       //   <OptionsFilter criterion={criterion} onValueChanged={onValueChanged} />
       // );
     }
+    if (criterion.criterionOption instanceof PathCriterionOption) {
+      return (
+        <PathFilter criterion={criterion} onValueChanged={onValueChanged} />
+      );
+    }
     if (criterion instanceof DurationCriterion) {
       return (
         <DurationFilter criterion={criterion} onValueChanged={onValueChanged} />

ui/v2.5/src/components/List/Filters/PathFilter.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { FolderSelect } from "src/components/Shared/FolderSelect/FolderSelect";
+import { ConfigurationContext } from "src/hooks/Config";
+import {
+  Criterion,
+  CriterionValue,
+} from "../../../models/list-filter/criteria/criterion";
+
+interface IInputFilterProps {
+  criterion: Criterion<CriterionValue>;
+  onValueChanged: (value: string) => void;
+}
+
+export const PathFilter: React.FC<IInputFilterProps> = ({
+  criterion,
+  onValueChanged,
+}) => {
+  const { configuration } = React.useContext(ConfigurationContext);
+  const libraryPaths = configuration?.general.stashes.map((s) => s.path);
+
+  return (
+    <Form.Group>
+      <FolderSelect
+        currentDirectory={criterion.value ? criterion.value.toString() : ""}
+        setCurrentDirectory={(v) => onValueChanged(v)}
+        collapsible
+        defaultDirectories={libraryPaths}
+      />
+    </Form.Group>
+  );
+};

ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Button, InputGroup, Form } from "react-bootstrap";
+import { Button, InputGroup, Form, Collapse } from "react-bootstrap";
 import { Icon } from "../Icon";
 import { LoadingIndicator } from "../LoadingIndicator";
 import { useDirectory } from "src/core/StashService";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { useDebouncedSetState } from "src/hooks/debounce";
 
 interface IProps {
@@ -12,6 +12,7 @@ interface IProps {
   setCurrentDirectory: (value: string) => void;
   defaultDirectories?: string[];
   appendButton?: JSX.Element;
+  collapsible?: boolean;
 }
 
 export const FolderSelect: React.FC<IProps> = ({
@@ -19,7 +20,9 @@ export const FolderSelect: React.FC<IProps> = ({
   setCurrentDirectory,
   defaultDirectories,
   appendButton,
+  collapsible = false,
 }) => {
+  const [showBrowser, setShowBrowser] = React.useState(false);
   const [directory, setDirectory] = useState(currentDirectory);
   const { data, error, loading } = useDirectory(directory);
   const intl = useIntl();
@@ -31,9 +34,10 @@ export const FolderSelect: React.FC<IProps> = ({
   const debouncedSetDirectory = useDebouncedSetState(setDirectory, 250);
 
   useEffect(() => {
-    if (currentDirectory === "" && !defaultDirectories && data?.directory.path)
-      setCurrentDirectory(data.directory.path);
-  }, [currentDirectory, setCurrentDirectory, data, defaultDirectories]);
+    if (currentDirectory !== directory) {
+      debouncedSetDirectory(currentDirectory);
+    }
+  }, [currentDirectory, directory, debouncedSetDirectory]);
 
   function setInstant(value: string) {
     setCurrentDirectory(value);
@@ -66,6 +70,7 @@ export const FolderSelect: React.FC<IProps> = ({
     <>
       <InputGroup>
         <Form.Control
+          className="btn-secondary"
           placeholder={intl.formatMessage({ id: "setup.folder.file_path" })}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setDebounced(e.currentTarget.value);
@@ -76,6 +81,16 @@ export const FolderSelect: React.FC<IProps> = ({
         {appendButton ? (
           <InputGroup.Append>{appendButton}</InputGroup.Append>
         ) : undefined}
+        {collapsible ? (
+          <InputGroup.Append>
+            <Button
+              variant="secondary"
+              onClick={() => setShowBrowser(!showBrowser)}
+            >
+              <Icon icon={faEllipsis} />
+            </Button>
+          </InputGroup.Append>
+        ) : undefined}
         {!data || !data.directory || loading ? (
           <InputGroup.Append className="align-self-center">
             {loading ? (
@@ -89,18 +104,20 @@ export const FolderSelect: React.FC<IProps> = ({
       {error !== undefined && (
         <h5 className="mt-4 text-break">Error: {error.message}</h5>
       )}
-      <ul className="folder-list">
-        {topDirectory}
-        {selectableDirectories.map((path) => {
-          return (
-            <li key={path} className="folder-list-item">
-              <Button variant="link" onClick={() => setInstant(path)}>
-                {path}
-              </Button>
-            </li>
-          );
-        })}
-      </ul>
+      <Collapse in={!collapsible || showBrowser}>
+        <ul className="folder-list">
+          {topDirectory}
+          {selectableDirectories.map((path) => {
+            return (
+              <li key={path} className="folder-list-item">
+                <Button variant="link" onClick={() => setInstant(path)}>
+                  {path}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </Collapse>
     </>
   );
 };

ui/v2.5/src/models/list-filter/criteria/criterion.ts

@@ -279,6 +279,20 @@ export function createMandatoryStringCriterionOption(
   );
 }
 
+export class PathCriterionOption extends StringCriterionOption {}
+
+export function createPathCriterionOption(
+  value: CriterionType,
+  messageID?: string,
+  parameterName?: string
+) {
+  return new PathCriterionOption(
+    messageID ?? value,
+    value,
+    parameterName ?? messageID ?? value
+  );
+}
+
 export class BooleanCriterionOption extends CriterionOption {
   constructor(messageID: string, value: CriterionType, parameterName?: string) {
     super({

ui/v2.5/src/models/list-filter/criteria/factory.ts

@@ -15,6 +15,7 @@ import {
   DateCriterionOption,
   TimestampCriterion,
   MandatoryTimestampCriterionOption,
+  PathCriterionOption,
 } from "./criterion";
 import { OrganizedCriterion } from "./organized";
 import { FavoriteCriterion, PerformerFavoriteCriterion } from "./favorite";
@@ -65,9 +66,7 @@ export function makeCriteria(
       return new NoneCriterion();
     case "name":
     case "path":
-      return new StringCriterion(
-        new MandatoryStringCriterionOption(type, type)
-      );
+      return new StringCriterion(new PathCriterionOption(type, type));
     case "checksum":
       return new StringCriterion(
         new MandatoryStringCriterionOption("media_info.checksum", type, type)

ui/v2.5/src/models/list-filter/galleries.ts

@@ -4,6 +4,7 @@ import {
   NullNumberCriterionOption,
   createDateCriterionOption,
   createMandatoryTimestampCriterionOption,
+  createPathCriterionOption,
 } from "./criteria/criterion";
 import { PerformerFavoriteCriterionOption } from "./criteria/favorite";
 import { GalleryIsMissingCriterionOption } from "./criteria/is-missing";
@@ -43,7 +44,7 @@ const displayModeOptions = [
 const criterionOptions = [
   createStringCriterionOption("title"),
   createStringCriterionOption("details"),
-  createStringCriterionOption("path"),
+  createPathCriterionOption("path"),
   createStringCriterionOption(
     "galleryChecksum",
     "media_info.checksum",

ui/v2.5/src/models/list-filter/images.ts

@@ -5,6 +5,7 @@ import {
   NullNumberCriterionOption,
   createMandatoryTimestampCriterionOption,
   createDateCriterionOption,
+  createPathCriterionOption,
 } from "./criteria/criterion";
 import { PerformerFavoriteCriterionOption } from "./criteria/favorite";
 import { ImageIsMissingCriterionOption } from "./criteria/is-missing";
@@ -33,7 +34,7 @@ const displayModeOptions = [DisplayMode.Grid, DisplayMode.Wall];
 const criterionOptions = [
   createStringCriterionOption("title"),
   createMandatoryStringCriterionOption("checksum", "media_info.checksum"),
-  createMandatoryStringCriterionOption("path"),
+  createPathCriterionOption("path"),
   OrganizedCriterionOption,
   createMandatoryNumberCriterionOption("o_counter"),
   ResolutionCriterionOption,

ui/v2.5/src/models/list-filter/scenes.ts

@@ -5,6 +5,7 @@ import {
   NullNumberCriterionOption,
   createDateCriterionOption,
   createMandatoryTimestampCriterionOption,
+  createPathCriterionOption,
 } from "./criteria/criterion";
 import { HasMarkersCriterionOption } from "./criteria/has-markers";
 import { SceneIsMissingCriterionOption } from "./criteria/is-missing";
@@ -59,7 +60,7 @@ const displayModeOptions = [
 const criterionOptions = [
   createStringCriterionOption("title"),
   createStringCriterionOption("scene_code"),
-  createMandatoryStringCriterionOption("path"),
+  createPathCriterionOption("path"),
   createStringCriterionOption("details"),
   createStringCriterionOption("director"),
   createMandatoryStringCriterionOption("oshash", "media_info.hash"),