Custom fields filter UI

ui/v2.5/src/components/Galleries/GallerySelect.tsx

@@ -29,7 +29,7 @@ import { sortByRelevance } from "src/utils/query";
 import { galleryTitle } from "src/core/galleries";
 import { PatchComponent, PatchFunction } from "src/patch";
 import {
-  Criterion,
+  ModifierCriterion,
   CriterionValue,
 } from "src/models/list-filter/criteria/criterion";
 import { PathCriterion } from "src/models/list-filter/criteria/path";
@@ -46,7 +46,7 @@ type Option = SelectOption<Gallery>;
 type ExtraGalleryProps = {
   hoverPlacement?: Placement;
   excludeIds?: string[];
-  extraCriteria?: Array<Criterion<CriterionValue>>;
+  extraCriteria?: Array<ModifierCriterion<CriterionValue>>;
 };
 
 type FindGalleriesResult = Awaited<

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

@@ -1,19 +1,18 @@
 import cloneDeep from "lodash-es/cloneDeep";
 import React, { useCallback, useMemo } from "react";
-import { Button, Form } from "react-bootstrap";
 import { CriterionModifier } from "src/core/generated-graphql";
 import {
   DurationCriterion,
   CriterionValue,
-  Criterion,
+  ModifierCriterion,
   IHierarchicalLabeledIdCriterion,
   NumberCriterion,
   ILabeledIdCriterion,
   DateCriterion,
   TimestampCriterion,
   BooleanCriterion,
+  Criterion,
 } from "src/models/list-filter/criteria/criterion";
-import { useIntl } from "react-intl";
 import {
   criterionIsHierarchicalLabelValue,
   criterionIsNumberValue,
@@ -45,21 +44,21 @@ import { TagsCriterion } from "src/models/list-filter/criteria/tags";
 import TagsFilter from "./Filters/TagsFilter";
 import { PhashCriterion } from "src/models/list-filter/criteria/phash";
 import { PhashFilter } from "./Filters/PhashFilter";
-import cx from "classnames";
 import { PathCriterion } from "src/models/list-filter/criteria/path";
+import { ModifierSelectorButtons } from "./ModifierSelect";
+import { CustomFieldsCriterion } from "src/models/list-filter/criteria/custom-fields";
+import { CustomFieldsFilter } from "./Filters/CustomFieldsFilter";
 
 interface IGenericCriterionEditor {
-  criterion: Criterion<CriterionValue>;
-  setCriterion: (c: Criterion<CriterionValue>) => void;
+  criterion: ModifierCriterion<CriterionValue>;
+  setCriterion: (c: ModifierCriterion<CriterionValue>) => void;
 }
 
 const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
   criterion,
   setCriterion,
 }) => {
-  const intl = useIntl();
-
-  const { options, modifierOptions } = criterion.criterionOption;
+  const { options, modifierOptions } = criterion.modifierCriterionOption();
 
   const showModifierSelector = useMemo(() => {
     if (
@@ -97,26 +96,17 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
     }
 
     return (
-      <Form.Group className="modifier-options">
-        {modifierOptions.map((m) => (
-          <Button
-            className={cx("modifier-option", {
-              selected: criterion.modifier === m,
-            })}
-            key={m}
-            onClick={() => onChangedModifierSelect(m)}
-          >
-            {Criterion.getModifierLabel(intl, m)}
-          </Button>
-        ))}
-      </Form.Group>
+      <ModifierSelectorButtons
+        options={modifierOptions}
+        value={criterion.modifier}
+        onChanged={onChangedModifierSelect}
+      />
     );
   }, [
     showModifierSelector,
     modifierOptions,
     onChangedModifierSelect,
     criterion.modifier,
-    intl,
   ]);
 
   const valueControl = useMemo(() => {
@@ -268,8 +258,8 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
 };
 
 interface ICriterionEditor {
-  criterion: Criterion<CriterionValue>;
-  setCriterion: (c: Criterion<CriterionValue>) => void;
+  criterion: Criterion;
+  setCriterion: (c: Criterion) => void;
 }
 
 export const CriterionEditor: React.FC<ICriterionEditor> = ({
@@ -283,12 +273,22 @@ export const CriterionEditor: React.FC<ICriterionEditor> = ({
       );
     }
 
-    return (
-      <GenericCriterionEditor
-        criterion={criterion}
-        setCriterion={setCriterion}
-      />
-    );
+    if (criterion instanceof CustomFieldsCriterion) {
+      return (
+        <CustomFieldsFilter criterion={criterion} setCriterion={setCriterion} />
+      );
+    }
+
+    if (criterion instanceof ModifierCriterion) {
+      return (
+        <GenericCriterionEditor
+          criterion={criterion}
+          setCriterion={setCriterion}
+        />
+      );
+    }
+
+    return null;
   }, [criterion, setCriterion]);
 
   return <div className="criterion-editor">{filterControl}</div>;

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

@@ -10,7 +10,6 @@ import React, {
 import { Accordion, Button, Card, Form, Modal } from "react-bootstrap";
 import cx from "classnames";
 import {
-  CriterionValue,
   Criterion,
   CriterionOption,
 } from "src/models/list-filter/criteria/criterion";
@@ -38,8 +37,8 @@ import ScreenUtils from "src/utils/screen";
 
 interface ICriterionList {
   criteria: string[];
-  currentCriterion?: Criterion<CriterionValue>;
-  setCriterion: (c: Criterion<CriterionValue>) => void;
+  currentCriterion?: Criterion;
+  setCriterion: (c: Criterion) => void;
   criterionOptions: CriterionOption[];
   pinnedCriterionOptions: CriterionOption[];
   selected?: CriterionOption;
@@ -228,7 +227,7 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
   const [currentFilter, setCurrentFilter] = useState<ListFilterModel>(
     cloneDeep(filter)
   );
-  const [criterion, setCriterion] = useState<Criterion<CriterionValue>>();
+  const [criterion, setCriterion] = useState<Criterion>();
 
   const [searchRef, setSearchFocus] = useFocusOnce(!ScreenUtils.isTouch());
 
@@ -364,7 +363,7 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
     }
   }
 
-  function replaceCriterion(c: Criterion<CriterionValue>) {
+  function replaceCriterion(c: Criterion) {
     const newFilter = cloneDeep(currentFilter);
 
     if (!c.isValid()) {
@@ -397,18 +396,26 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
     setCriterion(c);
   }
 
-  function removeCriterion(c: Criterion<CriterionValue>) {
-    const newFilter = cloneDeep(currentFilter);
-
-    const newCriteria = criteria.filter((cc) => {
-      return cc.getId() !== c.getId();
-    });
+  function removeCriterion(c: Criterion, valueIndex?: number) {
+    if (valueIndex !== undefined) {
+      setCurrentFilter(
+        currentFilter.removeCustomFieldCriterion(
+          c.criterionOption.type,
+          valueIndex
+        )
+      );
+    } else {
+      const newFilter = cloneDeep(currentFilter);
+      const newCriteria = criteria.filter((cc) => {
+        return cc.getId() !== c.getId();
+      });
 
-    newFilter.criteria = newCriteria;
+      newFilter.criteria = newCriteria;
 
-    setCurrentFilter(newFilter);
-    if (criterion?.getId() === c.getId()) {
-      optionSelected(undefined);
+      setCurrentFilter(newFilter);
+      if (criterion?.getId() === c.getId()) {
+        optionSelected(undefined);
+      }
     }
   }
 
@@ -462,7 +469,7 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
                 <FilterTags
                   criteria={criteria}
                   onEditCriterion={(c) => optionSelected(c.criterionOption)}
-                  onRemoveCriterion={(c) => removeCriterion(c)}
+                  onRemoveCriterion={removeCriterion}
                   onRemoveAll={() => onClearAll()}
                 />
               </div>

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

@@ -1,17 +1,50 @@
-import React from "react";
-import { Badge, Button } from "react-bootstrap";
-import {
-  Criterion,
-  CriterionValue,
-} from "src/models/list-filter/criteria/criterion";
+import React, { PropsWithChildren } from "react";
+import { Badge, BadgeProps, Button } from "react-bootstrap";
+import { Criterion } from "src/models/list-filter/criteria/criterion";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "../Shared/Icon";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { BsPrefixProps, ReplaceProps } from "react-bootstrap/esm/helpers";
+import { CustomFieldsCriterion } from "src/models/list-filter/criteria/custom-fields";
+
+type TagItemProps = PropsWithChildren<
+  ReplaceProps<"span", BsPrefixProps<"span"> & BadgeProps>
+>;
+
+export const TagItem: React.FC<TagItemProps> = (props) => {
+  const { children } = props;
+  return (
+    <Badge className="tag-item" variant="secondary" {...props}>
+      {children}
+    </Badge>
+  );
+};
+
+export const FilterTag: React.FC<{
+  label: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLSpanElement>;
+  onRemove: React.MouseEventHandler<HTMLElement>;
+}> = ({ label, onClick, onRemove }) => {
+  return (
+    <TagItem onClick={onClick}>
+      {label}
+      <Button
+        variant="secondary"
+        onClick={(e) => {
+          onRemove(e);
+          e.stopPropagation();
+        }}
+      >
+        <Icon icon={faTimes} />
+      </Button>
+    </TagItem>
+  );
+};
 
 interface IFilterTagsProps {
-  criteria: Criterion<CriterionValue>[];
-  onEditCriterion: (c: Criterion<CriterionValue>) => void;
-  onRemoveCriterion: (c: Criterion<CriterionValue>) => void;
+  criteria: Criterion[];
+  onEditCriterion: (c: Criterion) => void;
+  onRemoveCriterion: (c: Criterion, valueIndex?: number) => void;
   onRemoveAll: () => void;
 }
 
@@ -24,59 +57,62 @@ export const FilterTags: React.FC<IFilterTagsProps> = ({
   const intl = useIntl();
 
   function onRemoveCriterionTag(
-    criterion: Criterion<CriterionValue>,
-    $event: React.MouseEvent<HTMLElement, MouseEvent>
+    criterion: Criterion,
+    $event: React.MouseEvent<HTMLElement, MouseEvent>,
+    valueIndex?: number
   ) {
     if (!criterion) {
       return;
     }
-    onRemoveCriterion(criterion);
+    onRemoveCriterion(criterion, valueIndex);
     $event.stopPropagation();
   }
 
-  function onClickCriterionTag(criterion: Criterion<CriterionValue>) {
+  function onClickCriterionTag(criterion: Criterion) {
     onEditCriterion(criterion);
   }
 
-  function renderFilterTags() {
-    return criteria.map((criterion) => (
-      <Badge
-        className="tag-item"
-        variant="secondary"
-        key={criterion.getId()}
-        onClick={() => onClickCriterionTag(criterion)}
-      >
-        {criterion.getLabel(intl)}
-        <Button
-          variant="secondary"
-          onClick={($event) => onRemoveCriterionTag(criterion, $event)}
-        >
-          <Icon icon={faTimes} />
-        </Button>
-      </Badge>
-    ));
-  }
-
-  function maybeRenderClearAll() {
-    if (criteria.length < 3) {
-      return;
+  function renderFilterTags(criterion: Criterion) {
+    if (
+      criterion instanceof CustomFieldsCriterion &&
+      criterion.value.length > 1
+    ) {
+      return criterion.value.map((value, index) => {
+        return (
+          <FilterTag
+            key={index}
+            label={criterion.getValueLabel(intl, value)}
+            onClick={() => onClickCriterionTag(criterion)}
+            onRemove={($event) =>
+              onRemoveCriterionTag(criterion, $event, index)
+            }
+          />
+        );
+      });
     }
 
     return (
-      <Button
-        variant="minimal"
-        className="clear-all-button"
-        onClick={() => onRemoveAll()}
-      >
-        <FormattedMessage id="actions.clear" />
-      </Button>
+      <FilterTag
+        key={criterion.getId()}
+        label={criterion.getLabel(intl)}
+        onClick={() => onClickCriterionTag(criterion)}
+        onRemove={($event) => onRemoveCriterionTag(criterion, $event)}
+      />
     );
   }
 
   return (
     <div className="d-flex justify-content-center mb-2 wrap-tags filter-tags">
-      {renderFilterTags()}
-      {maybeRenderClearAll()}
+      {criteria.map(renderFilterTags)}
+      {criteria.length >= 3 && (
+        <Button
+          variant="minimal"
+          className="clear-all-button"
+          onClick={() => onRemoveAll()}
+        >
+          <FormattedMessage id="actions.clear" />
+        </Button>
+      )}
     </div>
   );
 };