@vonaffenfels/contentful-teasermanager 1.2.18 → 1.2.22

package/src/components/Contentful/Dialog/LogicEditor.js

@@ -1,534 +1,603 @@
-import {
-    TextInput,
-    Pill,
-    SectionHeading,
-    Checkbox,
-    Button,
-    DragHandle,
-} from "@contentful/f36-components";
-import {
-    DndContext, useDraggable, useDroppable,
-    PointerSensor, useSensor, useSensors,
-} from '@dnd-kit/core';
-import contentfulResolveResponse from "contentful-resolve-response";
-import {
-    useEffect, useState,
-} from "react";
-import useDebounce from "../../../hooks/useDebounce";
-import {getContentfulClient} from "../../../lib/contentfulClient";
-import {PlusIcon} from "@contentful/f36-icons";
-import {CSS} from "@dnd-kit/utilities";
-import {queryFromLogic} from "../../../queryFromLogic";
-import {useQuery} from "@tanstack/react-query";
-export const LogicEditor = (props) => {
-    const [selectedTags, setSelectedTags] = useState([]);
-
-    useEffect(() => {
-        setSelectedTags(props?.logicData?.tags || []);
-    }, [props?.logicData?.tags]);
-
-    const handleDragEnd = (event) => {
-        const {
-            over,
-            active,
-        } = event;
-
-        if (over) {
-            const draggedTagIndex = selectedTags.findIndex(tag => tag.id === active.id);
-            if (draggedTagIndex !== -1) {
-                const updatedTags = [...selectedTags];
-                updatedTags[draggedTagIndex] = {
-                    ...updatedTags[draggedTagIndex],
-                    type: over.id, // "and" or "or"
-                };
-                setSelectedTags(updatedTags);
-            }
-        }
-    };
-
-    return <DndContext onDragEnd={handleDragEnd}>
-        <LogicEditorInner {...props} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
-    </DndContext>;
-};
-
-const LogicEditorInner = ({
-    onSave = () => alert("onSave missing"),
-    sdk,
-    logicData,
-    selectedTags,
-    setSelectedTags,
-}) => {
-    const contentfulClient = getContentfulClient();
-    const [loading, setLoading] = useState(false);
-    const [tags, setTags] = useState([]);
-    const [categories, setCategories] = useState([]);
-    const [searchQuery, setSearchQuery] = useState("");
-    const [addTimepoint, setAddTimepoint] = useState(7);
-    const debouncedSearch = useDebounce(searchQuery, 500);
-    const [selectedTimepoints, setSelectedTimepoints] = useState([]);
-    const {
-        portal,
-        locale = "de",
-    } = sdk.parameters.invocation;
-
-    const {data: articles} = useQuery({
-        enabled: !!selectedTags.length && !!portal && !!contentfulClient,
-        queryKey: ["articles", selectedTags, portal],
-        queryFn: async () => {
-            const query = queryFromLogic({
-                tags: selectedTags,
-                project: portal,
-            });
-
-            try {
-                const result = await contentfulClient.getEntries({
-                    content_type: "article",
-                    locale: "de",
-                    order: "-fields.date",
-                    limit: 10,
-                    ...query,
-                    select: [
-                        "fields.title",
-                        "fields.slug",
-                        "fields.date",
-                        "sys.id",
-                    ].join(","),
-                });
-
-                return result;
-            } catch (e) {
-                console.error(e);
-                return {items: []};
-            }
-        },
-    });
-
-    useEffect(() => {
-        if (logicData?.timepoints) {
-            setSelectedTimepoints(logicData?.timepoints);
-        } else {
-            setSelectedTimepoints([7, 12, 18]);
-        }
-    }, [logicData]);
-    const {
-        setNodeRef: setOrNodeRef,
-        isOver: isOrOver,
-        node: orNode,
-    } = useDroppable({id: 'or'});
-    const {
-        setNodeRef: setAndNodeRef,
-        isOver: isAndOver,
-        node: andNode,
-    } = useDroppable({id: "and"});
-    const {
-        setNodeRef: setExcludeNodeRef,
-        isOver: isExcludeOver,
-        node: excludeNode,
-    } = useDroppable({id: "exclude"});
-
-    useEffect(() => {
-        setLoading(true);
-        const params = {
-            limit: 100,
-            skip: 0,
-            content_type: "tags",
-            locale,
-            order: "-sys.updatedAt",
-            "fields.portal": portal,
-            select: [
-                "fields.title",
-                "fields.isCategory",
-                "fields.hidden",
-                "sys.publishedAt",
-                "sys.id",
-            ].join(","),
-        };
-        const paramsNavigation = {
-            limit: 1,
-            content_type: "navigation",
-            include: 2,
-            locale,
-            "fields.portal": portal,
-            "fields.type": "main",
-        };
-
-        if (debouncedSearch) {
-            params["fields.title[match]"] = debouncedSearch;
-        }
-
-        Promise.all([
-            contentfulClient.getEntries(params),
-            contentfulClient.getEntries(paramsNavigation).then(async (response) => {
-                if (!response?.items?.[0]) {
-                    return [];
-                }
-
-                const references = await sdk.cma.entry.references({entryId: response.items[0].sys.id}, {include: 10});
-                const resolved = contentfulResolveResponse(references);
-                const allCategories = {};
-
-                for (const category of resolved) {
-                    if (!category?.fields?.children?.de) {
-                        continue;
-                    }
-
-                    const children = category.fields.children.de || [];
-
-                    for (const child of children) {
-                        getAllTagsFromCategory(child, allCategories);
-                    }
-                }
-
-                return Object.values(allCategories).filter((c) => c.tags.length > 0);
-            }),
-        ]).then(([tags, categories]) => {
-            setLoading(false);
-            setTags(tags.items);
-            setCategories(categories);
-        });
-    }, [debouncedSearch, portal, locale]);
-
-    const andTags = selectedTags.filter((t) => t.type === "and");
-    const orTags = selectedTags.filter((t) => t.type === "or");
-    const excludeTags = selectedTags.filter((t) => t.type === "exclude");
-
-    return <div className="flex flex-col gap-2 p-4">
-        <div className="z-10 flex w-full flex-col gap-4 border-b border-gray-200 bg-white py-4">
-            <div className="flex w-full flex-row items-center gap-2" style={{minHeight: 36}}>
-                <SectionHeading style={{marginBottom: 0}}>Gewählte Zeitpunkte:</SectionHeading>
-                <div className="flex flex-row items-center gap-2">
-                    {selectedTimepoints.map((timepoint) => {
-                        return <Pill
-                            key={timepoint}
-                            draggable={false}
-                            testId="pill-item"
-                            variant="active"
-                            label={`${timepoint} Uhr`}
-                            onClose={() => {
-                                setSelectedTimepoints(selectedTimepoints.filter((t) => t !== timepoint));
-                            }}
-                        />;
-                    })}
-                    <TextInput
-                        type="number"
-                        min={1}
-                        max={24}
-                        value={addTimepoint}
-                        onChange={(e) => {
-                            setAddTimepoint(e.target.value);
-                        }}
-                    />
-                    <SectionHeading style={{marginBottom: 0}}>Uhr</SectionHeading>
-                    <Button
-                        variant="secondary"
-                        onClick={() => {
-                            if (selectedTimepoints.includes(addTimepoint)) {
-                                return;
-                            }
-
-                            setSelectedTimepoints([...selectedTimepoints, addTimepoint]);
-                        }}
-                    >
-                        <PlusIcon />
-                    </Button>
-                </div>
-            </div>
-            <div className="flex w-full flex-row items-center gap-2" style={{minHeight: 36}}>
-                <SectionHeading style={{marginBottom: 0}}>Gewählte Kategorien & Tags:</SectionHeading>
-                <div className="grid w-full grid-cols-5 gap-4">
-                    <div className="flex w-full flex-col gap-2">
-                        <div>
-                            <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
-                        </div>
-                        <div
-                            ref={setOrNodeRef}
-                            style={{
-                                minHeight: 36,
-                                backgroundColor: isOrOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
-                            }}
-                            className="flex h-full w-full flex-row flex-wrap gap-2"
-                        >
-                            {orTags.map((tag) => {
-                                return <DraggablePill
-                                    key={tag.id}
-                                    id={tag.id}
-                                    variant="active"
-                                    label={(`${tag.label}`)}
-                                    onClose={() => {
-                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
-                                    }}
-                                />;
-                            })}
-                        </div>
-                    </div>
-                    <div className="flex w-full flex-col gap-2">
-                        <SectionHeading style={{marginBottom: 0}}>Und</SectionHeading>
-                        <div
-                            ref={setAndNodeRef}
-                            style={{
-                                minHeight: 36,
-                                backgroundColor: isAndOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
-                            }}
-                            className="flex h-full w-full flex-row flex-wrap gap-2"
-                        >
-                            {andTags.map((tag) => {
-                                return <DraggablePill
-                                    key={tag.id}
-                                    id={tag.id}
-                                    testId={tag.id}
-                                    variant="active"
-                                    label={(`${tag.label}`)}
-                                    onClose={() => {
-                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
-                                    }}
-                                />;
-                            })}
-                        </div>
-                    </div>
-                    <div className="flex w-full flex-col gap-2">
-                        <SectionHeading style={{marginBottom: 0}}>Ausschließen</SectionHeading>
-                        <div
-                            ref={setExcludeNodeRef}
-                            style={{
-                                minHeight: 36,
-                                backgroundColor: isExcludeOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
-                            }}
-                            className="flex h-full w-full flex-row flex-wrap gap-2"
-                        >
-                            {excludeTags.map((tag) => {
-                                return <DraggablePill
-                                    key={tag.id}
-                                    id={tag.id}
-                                    testId={tag.id}
-                                    variant="active"
-                                    label={(`${tag.label}`)}
-                                    onClose={() => {
-                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
-                                    }}
-                                />;
-                            })}
-                        </div>
-                    </div>
-                    <div className="col-span-2 flex w-full flex-col gap-4">
-                        <div>
-                            <SectionHeading style={{marginBottom: 0}}>Artikel</SectionHeading>
-                        </div>
-                        <div className="flex flex-col gap-4">
-                            <table className="w-full max-w-full table-auto gap-4 text-left">
-                                <thead>
-                                    <tr>
-                                        <th>Datum</th>
-                                        <th className="pl-4">Titel</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {articles?.items?.map((article) => {
-                                        return <tr key={article.sys.id}>
-                                            <td className="whitespace-nowrap">
-                                                {new Date(article.fields.date.de).toLocaleString("de-DE", {
-                                                    hour: "2-digit",
-                                                    minute: "2-digit",
-                                                    day: "2-digit",
-                                                    month: "2-digit",
-                                                    year: "numeric",
-                                                })}
-                                            </td>
-                                            <td className="truncate whitespace-nowrap pl-4">
-                                                {article.fields.title.de}
-                                            </td>
-                                        </tr>;
-                                    })}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="flex w-full flex-row gap-2">
-                <TextInput
-                    placeholder="Suche nach Kategorie oder Tag"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                />
-            </div>
-        </div>
-        <div className="grid grid-cols-2 gap-4 overflow-y-auto">
-            <div className="flex flex-col gap-4">
-                <div>
-                    <SectionHeading style={{marginBottom: 0}}>Kategorien</SectionHeading>
-                </div>
-                <div className="grid grid-cols-3 gap-4">
-                    {categories?.map((category) => {
-                        return (
-                            <Checkbox
-                                key={category.id}
-                                isChecked={selectedTags.some((t) => category.tags.some((c) => c.id === t.id))}
-                                onChange={(e) => {
-                                    let newTags = [...selectedTags];
-
-                                    if (e.target.checked) {
-                                        for (const tag of category.tags) {
-                                            if (!selectedTags.find((t) => t.id === tag.id)) {
-                                                newTags.push({
-                                                    label: tag.label,
-                                                    id: tag.id,
-                                                    type: "or",
-                                                });
-                                            }
-                                        }
-                                    } else {
-                                        for (const tag of category.tags) {
-                                            newTags = newTags.filter((t) => t.id !== tag.id);
-                                        }
-                                    }
-
-                                    setSelectedTags(newTags);
-                                }}
-                            >
-                                {category.title} ({selectedTags.filter((t) =>
-                                    category.tags.some((c) => c.id === t.id)).length}/{category.tags.length})
-                            </Checkbox>
-                        );
-                    })}
-                </div>
-            </div>
-            <div className="flex flex-col gap-4">
-                <div>
-                    <SectionHeading style={{marginBottom: 0}}>Tags</SectionHeading>
-                </div>
-                <div className="grid grid-cols-3 gap-4">
-                    {tags?.map((tag) => {
-                        return (
-                            <Checkbox
-                                key={tag.sys.id}
-                                isChecked={!!selectedTags.find((t) => t.id === tag.sys.id)}
-                                onChange={(e) => {
-                                    if (e.target.checked) {
-                                        setSelectedTags([...selectedTags, {
-                                            label: tag.fields.title[locale],
-                                            id: tag.sys.id,
-                                            type: "or",
-                                        }]);
-                                    } else {
-                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.sys.id));
-                                    }
-                                }}
-                            >
-                                {tag.fields.title[locale]}
-                            </Checkbox>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-        <div className="sticky bottom-0 flex w-full flex-row justify-between gap-2 border-t border-gray-200 bg-white py-4">
-            <Button
-                variant="positive"
-                type="button"
-                onClick={() => onSave({
-                    tags: selectedTags,
-                    timepoints: selectedTimepoints,
-                })}>Speichern</Button>
-            <Button
-                variant="negative"
-                type="button"
-                onClick={() => onSave({
-                    tags: [],
-                    timepoints: [],
-                })}>Logik löschen</Button>
-        </div>
-    </div>;
-};
-
-function getAllTagsFromCategory(categoryNode, allCategories = {}, parentCategoryTitle = null) {
-    if (!categoryNode || !categoryNode.fields?.children) {
-        return allCategories;
-    }
-
-    const children = categoryNode.fields.children.de || [];
-    const title = parentCategoryTitle ? `${parentCategoryTitle} > ${categoryNode.fields.title.de}` : categoryNode.fields.title.de;
-
-    allCategories[categoryNode.sys.id] = {
-        title,
-        tags: [],
-        id: categoryNode.sys.id,
-    };
-
-    if (categoryNode?.fields?.tags?.de) {
-        for (const tag of categoryNode.fields.tags.de) {
-            if (!tag?.fields?.title) {
-                continue;
-            }
-
-            if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tag.sys.id)) {
-                allCategories[categoryNode.sys.id].tags.push({
-                    label: tag.fields.title.de,
-                    id: tag.sys.id,
-                });
-            }
-        }
-    }
-
-    for (const child of children) {
-        if (!child || !child.fields) {
-            continue;
-        }
-
-        if (child?.fields?.tags?.de) {
-            for (const tag of child.fields.tags.de) {
-                if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tag.sys.id)) {
-                    if (!tag?.fields?.title) {
-                        continue;
-                    }
-
-                    allCategories[categoryNode.sys.id].tags.push({
-                        label: tag.fields.title.de,
-                        id: tag.sys.id,
-                    });
-                }
-            }
-        }
-
-        getAllTagsFromCategory(child, allCategories, title);
-    }
-
-    allCategories[categoryNode.sys.id].tags = [...new Set(allCategories[categoryNode.sys.id].tags)];
-
-    return allCategories;
-}
-
-
-function DraggablePill({
-    id, ...props
-}) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-    } = useDraggable({id});
-    const style = {
-        transform: CSS.Translate.toString(transform),
-        transition,
-    };
-
-    return (
-        <div>
-            <Pill
-                dragHandleComponent={
-                    <DragHandle
-                        label="Reorder item"
-                        variant="transparent"
-                        {...attributes}
-                        {...listeners}
-                    />
-                }
-                isDraggable
-                ref={setNodeRef}
-                style={style}
-                {...props}
-            />
-        </div>
-    );
+import {
+    TextInput,
+    Pill,
+    SectionHeading,
+    Checkbox,
+    Button,
+    DragHandle,
+} from "@contentful/f36-components";
+import {
+    DndContext, useDraggable, useDroppable,
+    PointerSensor, useSensor, useSensors,
+} from '@dnd-kit/core';
+import contentfulResolveResponse from "contentful-resolve-response";
+import {
+    useEffect, useState,
+} from "react";
+import useDebounce from "../../../hooks/useDebounce";
+import {getContentfulClient} from "../../../lib/contentfulClient";
+import {PlusIcon} from "@contentful/f36-icons";
+import {CSS} from "@dnd-kit/utilities";
+import {queryFromLogic} from "../../../queryFromLogic";
+import {useQuery} from "@tanstack/react-query";
+export const LogicEditor = (props) => {
+    const [selectedTags, setSelectedTags] = useState([]);
+
+    useEffect(() => {
+        setSelectedTags(props?.logicData?.tags || []);
+    }, [props?.logicData?.tags]);
+
+    const handleDragEnd = (event) => {
+        const {
+            over,
+            active,
+        } = event;
+
+        if (over) {
+            const draggedTagIndex = selectedTags.findIndex(tag => tag.id === active.id);
+            if (draggedTagIndex !== -1) {
+                const updatedTags = [...selectedTags];
+                updatedTags[draggedTagIndex] = {
+                    ...updatedTags[draggedTagIndex],
+                    type: over.id, // "and" or "or"
+                };
+                setSelectedTags(updatedTags);
+            }
+        }
+    };
+
+    return <DndContext onDragEnd={handleDragEnd}>
+        <LogicEditorInner {...props} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
+    </DndContext>;
+};
+
+const LogicEditorInner = ({
+    onSave = () => alert("onSave missing"),
+    sdk,
+    logicData,
+    selectedTags,
+    setSelectedTags,
+}) => {
+    const contentfulClient = getContentfulClient();
+    const [loading, setLoading] = useState(false);
+    const [tags, setTags] = useState([]);
+    const [categories, setCategories] = useState([]);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [addTimepoint, setAddTimepoint] = useState(7);
+    const debouncedSearch = useDebounce(searchQuery, 500);
+    const [selectedTimepoints, setSelectedTimepoints] = useState([]);
+    const {
+        portal,
+        locale = "de",
+    } = sdk.parameters.invocation;
+
+    const {data: articles} = useQuery({
+        enabled: !!selectedTags.length && !!portal && !!contentfulClient,
+        queryKey: ["articles", selectedTags, portal],
+        queryFn: async () => {
+            const query = queryFromLogic({
+                tags: selectedTags,
+                project: portal,
+            });
+
+            try {
+                const result = await contentfulClient.getEntries({
+                    content_type: "article",
+                    locale: "de",
+                    order: "-fields.date",
+                    limit: 10,
+                    ...query,
+                    select: [
+                        "fields.title",
+                        "fields.slug",
+                        "fields.date",
+                        "sys.id",
+                    ].join(","),
+                });
+
+                return result;
+            } catch (e) {
+                console.error(e);
+                return {items: []};
+            }
+        },
+    });
+
+    useEffect(() => {
+        if (logicData?.timepoints) {
+            setSelectedTimepoints(logicData?.timepoints);
+        } else {
+            setSelectedTimepoints([7, 12, 18]);
+        }
+    }, [logicData]);
+    const {
+        setNodeRef: setOrNodeRef,
+        isOver: isOrOver,
+        node: orNode,
+    } = useDroppable({id: 'or'});
+    const {
+        setNodeRef: setAndNodeRef,
+        isOver: isAndOver,
+        node: andNode,
+    } = useDroppable({id: "and"});
+    const {
+        setNodeRef: setExcludeNodeRef,
+        isOver: isExcludeOver,
+        node: excludeNode,
+    } = useDroppable({id: "exclude"});
+
+    useEffect(() => {
+        setLoading(true);
+        const params = {
+            limit: 100,
+            skip: 0,
+            content_type: "tags",
+            locale,
+            order: "-sys.updatedAt",
+            "fields.portal": portal,
+            select: [
+                "fields.title",
+                "fields.isCategory",
+                "fields.hidden",
+                "sys.publishedAt",
+                "sys.id",
+            ].join(","),
+        };
+        const paramsNavigation = {
+            limit: 1,
+            content_type: "navigation",
+            include: 2,
+            locale,
+            "fields.portal": portal,
+            "fields.type": "main",
+        };
+
+        if (debouncedSearch) {
+            params["fields.title[match]"] = debouncedSearch;
+        }
+
+        Promise.all([
+            contentfulClient.getEntries(params),
+            contentfulClient.getEntries(paramsNavigation).then(async (response) => {
+                if (!response?.items?.[0]) {
+                    return [];
+                }
+                const allCategories = {};
+
+                try {
+                // Use different include levels based on portal to avoid multilingual content bloat
+                    const includeLevel = portal === 'YACHT' ? 1 : 2;
+                    const references = await sdk.cma.entry.references({entryId: response.items[0].sys.id, include: includeLevel});
+                    const resolved = contentfulResolveResponse(references);
+
+                    for (const category of resolved) {
+                        if (!category?.fields?.children?.de) {
+                            continue;
+                        }
+
+                        const children = category.fields.children.de || [];
+
+                        for (const child of children) {
+                            await getAllTagsFromCategory(child, allCategories, null, portal, sdk);
+                        }
+                    }
+                } catch (e) {
+                    console.error("Error getting categories and tags from references: ", e);
+                    return [];
+                }
+
+                return Object.values(allCategories).filter((c) => c.tags.length > 0);
+            }),
+        ]).then(([tags, categories]) => {
+            setLoading(false);
+            setTags(tags.items);
+            setCategories(categories);
+        });
+    }, [debouncedSearch, portal, locale]);
+
+    const andTags = selectedTags.filter((t) => t.type === "and");
+    const orTags = selectedTags.filter((t) => t.type === "or");
+    const excludeTags = selectedTags.filter((t) => t.type === "exclude");
+
+    return <div className="flex flex-col gap-2 p-4">
+        <div className="z-10 flex w-full flex-col gap-4 border-b border-gray-200 bg-white py-4">
+            <div className="flex w-full flex-row items-center gap-2" style={{minHeight: 36}}>
+                <SectionHeading style={{marginBottom: 0}}>Gewählte Zeitpunkte:</SectionHeading>
+                <div className="flex flex-row items-center gap-2">
+                    {selectedTimepoints.map((timepoint) => {
+                        return <Pill
+                            key={timepoint}
+                            draggable={false}
+                            testId="pill-item"
+                            variant="active"
+                            label={`${timepoint} Uhr`}
+                            onClose={() => {
+                                setSelectedTimepoints(selectedTimepoints.filter((t) => t !== timepoint));
+                            }}
+                        />;
+                    })}
+                    <TextInput
+                        type="number"
+                        min={1}
+                        max={24}
+                        value={addTimepoint}
+                        onChange={(e) => {
+                            setAddTimepoint(e.target.value);
+                        }}
+                    />
+                    <SectionHeading style={{marginBottom: 0}}>Uhr</SectionHeading>
+                    <Button
+                        variant="secondary"
+                        onClick={() => {
+                            if (selectedTimepoints.includes(addTimepoint)) {
+                                return;
+                            }
+
+                            setSelectedTimepoints([...selectedTimepoints, addTimepoint]);
+                        }}
+                    >
+                        <PlusIcon />
+                    </Button>
+                </div>
+            </div>
+            <div className="flex w-full flex-row items-center gap-2" style={{minHeight: 36}}>
+                <SectionHeading style={{marginBottom: 0}}>Gewählte Kategorien & Tags:</SectionHeading>
+                <div className="grid w-full grid-cols-5 gap-4">
+                    <div className="flex w-full flex-col gap-2">
+                        <div>
+                            <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
+                        </div>
+                        <div
+                            ref={setOrNodeRef}
+                            style={{
+                                minHeight: 36,
+                                backgroundColor: isOrOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
+                            }}
+                            className="flex h-full w-full flex-row flex-wrap gap-2"
+                        >
+                            {orTags.map((tag) => {
+                                return <DraggablePill
+                                    key={tag.id}
+                                    id={tag.id}
+                                    variant="active"
+                                    label={(`${tag.label}`)}
+                                    onClose={() => {
+                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
+                                    }}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className="flex w-full flex-col gap-2">
+                        <SectionHeading style={{marginBottom: 0}}>Und</SectionHeading>
+                        <div
+                            ref={setAndNodeRef}
+                            style={{
+                                minHeight: 36,
+                                backgroundColor: isAndOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
+                            }}
+                            className="flex h-full w-full flex-row flex-wrap gap-2"
+                        >
+                            {andTags.map((tag) => {
+                                return <DraggablePill
+                                    key={tag.id}
+                                    id={tag.id}
+                                    testId={tag.id}
+                                    variant="active"
+                                    label={(`${tag.label}`)}
+                                    onClose={() => {
+                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
+                                    }}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className="flex w-full flex-col gap-2">
+                        <SectionHeading style={{marginBottom: 0}}>Ausschließen</SectionHeading>
+                        <div
+                            ref={setExcludeNodeRef}
+                            style={{
+                                minHeight: 36,
+                                backgroundColor: isExcludeOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
+                            }}
+                            className="flex h-full w-full flex-row flex-wrap gap-2"
+                        >
+                            {excludeTags.map((tag) => {
+                                return <DraggablePill
+                                    key={tag.id}
+                                    id={tag.id}
+                                    testId={tag.id}
+                                    variant="active"
+                                    label={(`${tag.label}`)}
+                                    onClose={() => {
+                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.id));
+                                    }}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className="col-span-2 flex w-full flex-col gap-4">
+                        <div>
+                            <SectionHeading style={{marginBottom: 0}}>Artikel</SectionHeading>
+                        </div>
+                        <div className="flex flex-col gap-4">
+                            <table className="w-full max-w-full table-auto gap-4 text-left">
+                                <thead>
+                                    <tr>
+                                        <th>Datum</th>
+                                        <th className="pl-4">Titel</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {articles?.items?.map((article) => {
+                                        return <tr key={article.sys.id}>
+                                            <td className="whitespace-nowrap">
+                                                {new Date(article.fields.date.de).toLocaleString("de-DE", {
+                                                    hour: "2-digit",
+                                                    minute: "2-digit",
+                                                    day: "2-digit",
+                                                    month: "2-digit",
+                                                    year: "numeric",
+                                                })}
+                                            </td>
+                                            <td className="truncate whitespace-nowrap pl-4">
+                                                {article.fields.title.de}
+                                            </td>
+                                        </tr>;
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="flex w-full flex-row gap-2">
+                <TextInput
+                    placeholder="Suche nach Kategorie oder Tag"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                />
+            </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4 overflow-y-auto">
+            <div className="flex flex-col gap-4">
+                <div>
+                    <SectionHeading style={{marginBottom: 0}}>Kategorien</SectionHeading>
+                </div>
+                <div className="grid grid-cols-3 gap-4">
+                    {categories?.map((category) => {
+                        return (
+                            <Checkbox
+                                key={category.id}
+                                isChecked={selectedTags.some((t) => category.tags.some((c) => c.id === t.id))}
+                                onChange={(e) => {
+                                    let newTags = [...selectedTags];
+
+                                    if (e.target.checked) {
+                                        for (const tag of category.tags) {
+                                            if (!selectedTags.find((t) => t.id === tag.id)) {
+                                                newTags.push({
+                                                    label: tag.label,
+                                                    id: tag.id,
+                                                    type: "or",
+                                                });
+                                            }
+                                        }
+                                    } else {
+                                        for (const tag of category.tags) {
+                                            newTags = newTags.filter((t) => t.id !== tag.id);
+                                        }
+                                    }
+
+                                    setSelectedTags(newTags);
+                                }}
+                            >
+                                {category.title} ({selectedTags.filter((t) =>
+                                    category.tags.some((c) => c.id === t.id)).length}/{category.tags.length})
+                            </Checkbox>
+                        );
+                    })}
+                </div>
+            </div>
+            <div className="flex flex-col gap-4">
+                <div>
+                    <SectionHeading style={{marginBottom: 0}}>Tags</SectionHeading>
+                </div>
+                <div className="grid grid-cols-3 gap-4">
+                    {tags?.map((tag) => {
+                        return (
+                            <Checkbox
+                                key={tag.sys.id}
+                                isChecked={!!selectedTags.find((t) => t.id === tag.sys.id)}
+                                onChange={(e) => {
+                                    if (e.target.checked) {
+                                        setSelectedTags([...selectedTags, {
+                                            label: tag.fields.title[locale],
+                                            id: tag.sys.id,
+                                            type: "or",
+                                        }]);
+                                    } else {
+                                        setSelectedTags(selectedTags.filter((t) => t.id !== tag.sys.id));
+                                    }
+                                }}
+                            >
+                                {tag.fields.title[locale]}
+                            </Checkbox>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+        <div className="sticky bottom-0 flex w-full flex-row justify-between gap-2 border-t border-gray-200 bg-white py-4">
+            <Button
+                variant="positive"
+                type="button"
+                onClick={() => onSave({
+                    tags: selectedTags,
+                    timepoints: selectedTimepoints,
+                })}>Speichern</Button>
+            <Button
+                variant="negative"
+                type="button"
+                onClick={() => onSave({
+                    tags: [],
+                    timepoints: [],
+                })}>Logik löschen</Button>
+        </div>
+    </div>;
+};
+
+async function getAllTagsFromCategory(categoryNode, allCategories = {}, parentCategoryTitle = null, portal = null, sdk = null) {
+    if (!categoryNode || !categoryNode.fields?.children) {
+        return allCategories;
+    }
+
+    const children = categoryNode.fields.children.de || [];
+    const title = parentCategoryTitle ? `${parentCategoryTitle} > ${categoryNode.fields.title.de}` : categoryNode.fields.title.de;
+
+    allCategories[categoryNode.sys.id] = {
+        title,
+        tags: [],
+        id: categoryNode.sys.id,
+    };
+
+    if (categoryNode?.fields?.tags?.de) {
+        const tagRefs = categoryNode.fields.tags.de;
+
+        if (portal === 'YACHT') {
+            // For YACHT portal, fetch all tag titles at once for better performance
+            const tagIds = tagRefs.map(tag => tag.sys.id).filter(id => id);
+
+            if (tagIds.length > 0) {
+                try {
+                    const tagPromises = tagIds.map(tagId =>
+                        sdk.cma.entry.get({entryId: tagId}).catch(() => null),
+                    );
+                    const fetchedTags = await Promise.all(tagPromises);
+
+                    fetchedTags.forEach((fetchedTag, index) => {
+                        if (fetchedTag?.fields?.title?.de) {
+                            const tagId = tagIds[index];
+                            if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tagId)) {
+                                allCategories[categoryNode.sys.id].tags.push({
+                                    label: fetchedTag.fields.title.de,
+                                    id: tagId,
+                                });
+                            }
+                        }
+                    });
+                } catch (e) {
+                    console.error("Error fetching tags for YACHT portal:", e);
+                }
+            }
+        } else {
+            // For non-YACHT portals, tags should have fields already included
+            for (const tag of tagRefs) {
+                if (!tag?.fields?.title) {
+                    continue;
+                }
+
+                if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tag.sys.id)) {
+                    allCategories[categoryNode.sys.id].tags.push({
+                        label: tag.fields.title.de,
+                        id: tag.sys.id,
+                    });
+                }
+            }
+        }
+    }
+
+    for (const child of children) {
+        if (!child || !child.fields) {
+            continue;
+        }
+
+        if (child?.fields?.tags?.de) {
+            const childTagRefs = child.fields.tags.de;
+
+            if (portal === 'YACHT') {
+                // For YACHT portal, fetch child tag titles
+                const childTagIds = childTagRefs.map(tag => tag.sys.id).filter(id => id);
+
+                if (childTagIds.length > 0) {
+                    try {
+                        const childTagPromises = childTagIds.map(tagId =>
+                            sdk.cma.entry.get({entryId: tagId}).catch(() => null),
+                        );
+                        const fetchedChildTags = await Promise.all(childTagPromises);
+
+                        fetchedChildTags.forEach((fetchedTag, index) => {
+                            if (fetchedTag?.fields?.title?.de) {
+                                const tagId = childTagIds[index];
+                                if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tagId)) {
+                                    allCategories[categoryNode.sys.id].tags.push({
+                                        label: fetchedTag.fields.title.de,
+                                        id: tagId,
+                                    });
+                                }
+                            }
+                        });
+                    } catch (e) {
+                        console.error("Error fetching child tags for YACHT portal:", e);
+                    }
+                }
+            } else {
+                // For non-YACHT portals, child tags should have fields already included
+                for (const tag of childTagRefs) {
+                    if (!allCategories[categoryNode.sys.id].tags.find((c) => c.id === tag.sys.id)) {
+                        if (!tag?.fields?.title) {
+                            continue;
+                        }
+
+                        allCategories[categoryNode.sys.id].tags.push({
+                            label: tag.fields.title.de,
+                            id: tag.sys.id,
+                        });
+                    }
+                }
+            }
+        }
+
+        await getAllTagsFromCategory(child, allCategories, title, portal, sdk);
+    }
+
+    allCategories[categoryNode.sys.id].tags = [...new Set(allCategories[categoryNode.sys.id].tags)];
+
+    return allCategories;
+}
+
+
+function DraggablePill({
+    id, ...props
+}) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useDraggable({id});
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+
+    return (
+        <div>
+            <Pill
+                dragHandleComponent={
+                    <DragHandle
+                        label="Reorder item"
+                        variant="transparent"
+                        {...attributes}
+                        {...listeners}
+                    />
+                }
+                isDraggable
+                ref={setNodeRef}
+                style={style}
+                {...props}
+            />
+        </div>
+    );
 }