aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components/dashboard/rules/RuleEngineEventSelector.tsx
blob: ae37945e0fa0d9a0a6b4884c7154fa38048f1274 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { Card, CardContent } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslation } from "react-i18next";

import type { RuleEngineEvent } from "@karakeep/shared/types/rules";

import { BookmarkListSelector } from "../lists/BookmarkListSelector";
import { TagAutocomplete } from "../tags/TagAutocomplete";

interface EventSelectorProps {
  value: RuleEngineEvent;
  onChange: (event: RuleEngineEvent) => void;
}

export function EventSelector({ value, onChange }: EventSelectorProps) {
  const { t } = useTranslation();
  const handleTypeChange = (type: RuleEngineEvent["type"]) => {
    switch (type) {
      case "bookmarkAdded":
        onChange({ type: "bookmarkAdded" });
        break;
      case "tagAdded":
        onChange({ type: "tagAdded", tagId: "" });
        break;
      case "tagRemoved":
        onChange({ type: "tagRemoved", tagId: "" });
        break;
      case "addedToList":
        onChange({ type: "addedToList", listId: "" });
        break;
      case "removedFromList":
        onChange({ type: "removedFromList", listId: "" });
        break;
      case "favourited":
        onChange({ type: "favourited" });
        break;
      case "archived":
        onChange({ type: "archived" });
        break;
      default: {
        const _exhaustiveCheck: never = type;
        return null;
      }
    }
  };

  return (
    <Card>
      <CardContent className="p-4">
        <div className="flex gap-4">
          <Select value={value.type} onValueChange={handleTypeChange}>
            <SelectTrigger id="event-type">
              <SelectValue placeholder="Select event type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="bookmarkAdded">
                {t("settings.rules.events_types.bookmark_added")}
              </SelectItem>
              <SelectItem value="tagAdded">
                {t("settings.rules.events_types.tag_added")}
              </SelectItem>
              <SelectItem value="tagRemoved">
                {t("settings.rules.events_types.tag_removed")}
              </SelectItem>
              <SelectItem value="addedToList">
                {t("settings.rules.events_types.added_to_list")}
              </SelectItem>
              <SelectItem value="removedFromList">
                {t("settings.rules.events_types.removed_from_list")}
              </SelectItem>
              <SelectItem value="favourited">
                {t("settings.rules.events_types.favourited")}
              </SelectItem>
              <SelectItem value="archived">
                {t("settings.rules.events_types.archived")}
              </SelectItem>
            </SelectContent>
          </Select>

          {/* Additional fields based on event type */}
          {(value.type === "tagAdded" || value.type === "tagRemoved") && (
            <TagAutocomplete
              className="w-full"
              tagId={value.tagId}
              onChange={(t) => onChange({ type: value.type, tagId: t ?? "" })}
            />
          )}

          {(value.type === "addedToList" ||
            value.type === "removedFromList") && (
            <BookmarkListSelector
              listTypes={["manual"]}
              value={value.listId}
              onChange={(l) => onChange({ type: value.type, listId: l })}
            />
          )}
        </div>
      </CardContent>
    </Card>
  );
}