@vonaffenfels/contentful-teasermanager 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
@@ -70,7 +70,7 @@
         "classnames": "^2.3.2",
         "clean-webpack-plugin": "^3.0.0",
         "cloudinary": "^1.25.1",
-        "contentful-management": "^7.17.0",
+        "contentful-management": "^11",
         "copy-webpack-plugin": "^8.1.1",
         "cross-env": "^7.0.3",
         "css-loader": "^5.2.4",
@@ -98,9 +98,10 @@
     },
     "dependencies": {
         "@vonaffenfels/slate-editor": "^1.2.0",
+        "contentful-resolve-response": "^1.9.2",
         "webpack": "5.88.2"
     },
-    "gitHead": "fe9b4ce59e9b4dfae924c580f3a1247c180f4d9b",
+    "gitHead": "1e99cab528da01b06334b55df31f21305222e6b8",
     "publishConfig": {
         "access": "public"
     }

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

@@ -10,6 +10,7 @@ import {
     DndContext, useDraggable, useDroppable,
     PointerSensor, useSensor, useSensors,
 } from '@dnd-kit/core';
+import contentfulResolveResponse from "contentful-resolve-response";
 import {
     useEffect, useState,
 } from "react";
@@ -52,23 +53,25 @@ export const LogicEditor = (props) => {
 const LogicEditorInner = ({
     onSave = () => alert("onSave missing"),
     sdk,
-    logicData = {
-        timepoints: [7, 12, 18],
-        tags: [],
-    },
+    logicData,
     selectedTags,
     setSelectedTags,
 }) => {
     const contentfulClient = getContentfulClient();
     const [loading, setLoading] = useState(false);
-    const [data, setData] = useState([]);
+    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([]);
     useEffect(() => {
-        setSelectedTimepoints(logicData?.timepoints || []);
-    }, [logicData?.timepoints]);
+        if (logicData?.timepoints) {
+            setSelectedTimepoints(logicData?.timepoints);
+        } else {
+            setSelectedTimepoints([7, 12, 18]);
+        }
+    }, [logicData]);
     const {
         setNodeRef: setOrNodeRef,
         isOver: isOrOver,
@@ -102,14 +105,48 @@ const LogicEditorInner = ({
                 "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;
         }
 
-        contentfulClient.getEntries(params).then((response) => {
+        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: 7});
+                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);
+            }),
+        ]).then(([tags, categories]) => {
             setLoading(false);
-            setData(response);
+            setTags(tags.items);
+            setCategories(categories);
         });
     }, [debouncedSearch, portal, locale]);
 
@@ -117,7 +154,7 @@ const LogicEditorInner = ({
     const orTags = selectedTags.filter((t) => t.type === "or");
 
     return <div className="flex flex-col gap-2 p-4">
-        <div className="sticky top-0 z-10 flex w-full flex-col gap-4 border-b border-gray-200 bg-white py-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">
@@ -159,53 +196,55 @@ const LogicEditorInner = ({
             </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-2 gap-4">
-                    <div>
-                        <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="flex 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>
+                    <div className="flex flex-col gap-2">
                         <SectionHeading style={{marginBottom: 0}}>Und</SectionHeading>
-                    </div>
-                    <div
-                        ref={setOrNodeRef}
-                        style={{
-                            minHeight: 36,
-                            backgroundColor: isOrOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
-                        }}
-                        className="flex 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
-                        ref={setAndNodeRef}
-                        style={{
-                            minHeight: 36,
-                            backgroundColor: isAndOver ? "rgba(0, 255, 0, 0.3)" : "transparent",
-                        }}
-                        className="flex 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
+                            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>
             </div>
@@ -217,28 +256,81 @@ const LogicEditorInner = ({
                 />
             </div>
         </div>
-        <div className="grid grid-cols-3 gap-4">
-            {data?.items?.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 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) || t.id === category.id)}
+                                onChange={(e) => {
+                                    let newTags = [...selectedTags];
+
+                                    if (e.target.checked) {
+                                        newTags.push({
+                                            label: category.title,
+                                            id: category.id,
+                                            type: "or",
+                                        });
+                                        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 {
+                                        newTags = newTags.filter((t) => t.id !== category.id);
+
+                                        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) || t.id === category.id).length}/{category.tags.length + 1})
+                            </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
@@ -259,6 +351,62 @@ const LogicEditorInner = ({
     </div>;
 };
 
+function getAllTagsFromCategory(categoryNode, allCategories = {}) {
+    if (!categoryNode || !categoryNode.fields?.children) {
+        return allCategories;
+    }
+
+    const children = categoryNode.fields.children.de || [];
+
+    allCategories[categoryNode.sys.id] = {
+        title: categoryNode.fields.title.de,
+        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);
+    }
+
+    allCategories[categoryNode.sys.id].tags = [...new Set(allCategories[categoryNode.sys.id].tags)];
+
+    return allCategories;
+}
+
 
 function DraggablePill({
     id, ...props
@@ -276,19 +424,21 @@ function DraggablePill({
     };
 
     return (
-        <Pill
-            dragHandleComponent={
-                <DragHandle
-                    label="Reorder item"
-                    variant="transparent"
-                    {...attributes}
-                    {...listeners}
-                />
-            }
-            isDraggable
-            ref={setNodeRef}
-            style={style}
-            {...props}
-        />
+        <div>
+            <Pill
+                dragHandleComponent={
+                    <DragHandle
+                        label="Reorder item"
+                        variant="transparent"
+                        {...attributes}
+                        {...listeners}
+                    />
+                }
+                isDraggable
+                ref={setNodeRef}
+                style={style}
+                {...props}
+            />
+        </div>
     );
 }