@vonaffenfels/contentful-teasermanager 1.1.70 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.1.70",
+    "version": "1.2.0",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
@@ -16,7 +16,7 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
-        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/app-sdk": "^4.29.5",
         "@contentful/f36-components": "^4.50.2",
         "@contentful/field-editor-single-line": "^0.14.1",
         "@contentful/field-editor-test-utils": "^0.11.1",
@@ -57,13 +57,14 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
-        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/app-sdk": "^4.29.5",
         "@contentful/f36-components": "^4.50.2",
         "@contentful/field-editor-single-line": "^0.14.1",
         "@contentful/field-editor-test-utils": "^0.11.1",
         "@contentful/forma-36-fcss": "^0.3.1",
         "@contentful/forma-36-react-components": "^3.88.3",
         "@contentful/forma-36-tokens": "^0.10.1",
+        "@dnd-kit/core": "^6.3.1",
         "@svgr/webpack": "^5.5.0",
         "babel-loader": "^8.2.2",
         "classnames": "^2.3.2",
@@ -96,10 +97,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.1.70",
+        "@vonaffenfels/slate-editor": "^1.2.0",
         "webpack": "5.88.2"
     },
-    "gitHead": "6aab8bfc8222e44d13e0fa103982fc0daf0104cf",
+    "gitHead": "fe9b4ce59e9b4dfae924c580f3a1247c180f4d9b",
     "publishConfig": {
         "access": "public"
     }

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

@@ -0,0 +1,294 @@
+import {
+    TextInput,
+    Pill,
+    SectionHeading,
+    Checkbox,
+    Button,
+    DragHandle,
+} from "@contentful/f36-components";
+import {
+    DndContext, useDraggable, useDroppable,
+    PointerSensor, useSensor, useSensors,
+} from '@dnd-kit/core';
+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";
+
+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 = {
+        timepoints: [7, 12, 18],
+        tags: [],
+    },
+    selectedTags,
+    setSelectedTags,
+}) => {
+    const contentfulClient = getContentfulClient();
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = 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]);
+    const {
+        setNodeRef: setOrNodeRef,
+        isOver: isOrOver,
+        node: orNode,
+    } = useDroppable({id: 'or'});
+    const {
+        setNodeRef: setAndNodeRef,
+        isOver: isAndOver,
+        node: andNode,
+    } = useDroppable({id: "and"});
+
+    const {
+        portal,
+        locale = "de",
+    } = sdk.parameters.invocation;
+
+    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(","),
+        };
+
+        if (debouncedSearch) {
+            params["fields.title[match]"] = debouncedSearch;
+        }
+
+        contentfulClient.getEntries(params).then((response) => {
+            setLoading(false);
+            setData(response);
+        });
+    }, [debouncedSearch, portal, locale]);
+
+    const andTags = selectedTags.filter((t) => t.type === "and");
+    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="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-2 gap-4">
+                    <div>
+                        <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
+                    </div>
+                    <div>
+                        <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>
+                </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-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>
+        <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 DraggablePill({
+    id, ...props
+}) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useDraggable({id});
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+
+    return (
+        <Pill
+            dragHandleComponent={
+                <DragHandle
+                    label="Reorder item"
+                    variant="transparent"
+                    {...attributes}
+                    {...listeners}
+                />
+            }
+            isDraggable
+            ref={setNodeRef}
+            style={style}
+            {...props}
+        />
+    );
+}

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

@@ -1,7 +1,11 @@
-import {EntityList, Pagination, Spinner, Select, Autocomplete, TextInput} from "@contentful/f36-components";
+import {
+    EntityList, Pagination, Spinner, Select, Autocomplete, TextInput,
+} from "@contentful/f36-components";
 import {getContentfulClient} from "../../../lib/contentfulClient";
-import {useEffect, useState} from "react";
-import format from "date-fns/format"
+import {
+    useEffect, useState,
+} from "react";
+import format from "date-fns/format";
 import useDebounce from "../../../hooks/useDebounce";
 import classNames from "classnames";
 
@@ -12,7 +16,10 @@ export const NewestArticles = ({
     onEntryClick = () => alert("onEntryClick missing"),
     getArticleThumbnailUrl = (article) => alert("getArticleThumbnailUrl missing"),
 }) => {
-    const {portal, slotId} = sdk.parameters.invocation;
+    const {
+        portal,
+        slotId,
+    } = sdk.parameters.invocation;
     const contentfulClient = getContentfulClient();
     const limit = 25;
     const [searchQuery, setSearchQuery] = useState("");
@@ -20,7 +27,10 @@ export const NewestArticles = ({
     const [enabledPortals, setEnabledPortals] = useState([portal]);
     const [selectedPortal, setSelectedPortal] = useState(portal);
     const [loading, setLoading] = useState(true);
-    const [data, setData] = useState({items: [], total: 0});
+    const [data, setData] = useState({
+        items: [],
+        total: 0,
+    });
     const [page, setPage] = useState(0);
     const [selectedAuthor, setSelectedAuthor] = useState(null);
     const [authors, setAuthors] = useState([]);
@@ -75,7 +85,7 @@ export const NewestArticles = ({
             setLoading(false);
             setData(response);
         });
-    }, [debouncedSearch, selectedAuthor,selectedPortal, limit, page]);
+    }, [debouncedSearch, selectedAuthor, selectedPortal, limit, page]);
 
     useEffect(() => {
         setAuthorsLoading(true);
@@ -87,7 +97,7 @@ export const NewestArticles = ({
         };
 
         if (debouncedAuthorSearch) {
-            params["fields.name[match]"] = debouncedAuthorSearch
+            params["fields.name[match]"] = debouncedAuthorSearch;
         } else {
             setSelectedAuthor(null);
         }
@@ -107,15 +117,15 @@ export const NewestArticles = ({
     }, [authors, selectedAuthor]);
 
     return (
-        <div className="p-4 flex flex-col space-y-4">
+        <div className="flex flex-col space-y-4 p-4">
             <div className="flex space-x-2">
-                <div className="flex-grow">
+                <div className="grow">
                     <TextInput
                         width={"full"}
                         placeholder={"Suche nach Titel"}
                         onChange={(e) => setSearchQuery(e.target.value)}/>
                 </div>
-                <div className="flex-grow-0">
+                <div className="grow-0">
                     <Autocomplete
                         isLoading={authorsLoading}
                         onSelectItem={item => setSelectedAuthor(item?.sys?.id)}
@@ -129,11 +139,11 @@ export const NewestArticles = ({
                         noMatchesMessage={'Kein Autor gefunden'}
                     >
                         {(options) => {
-                            return options.map(option => <span key={option.value}>{option.label}</span>)
+                            return options.map(option => <span key={option.value}>{option.label}</span>);
                         }}
                     </Autocomplete>
                 </div>
-                <div className="flex-grow-0">
+                <div className="grow-0">
                     <Select value={selectedPortal} onChange={e => setSelectedPortal(e.target.value)}>
                         {Object.keys(portals).filter(v => enabledPortals.includes(v)).sort().map(optionValue => <Select.Option
                             key={optionValue}
@@ -145,7 +155,7 @@ export const NewestArticles = ({
                 {loading && <Spinner/>}
                 {!loading && data.items.map((entry) => {
                     const isCurrentlySelectedInOtherSlot = !! Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot !== slotId);
-                    const isCurrentlySelectedInSlot =  !!Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot === slotId);
+                    const isCurrentlySelectedInSlot = !!Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot === slotId);
 
                     let status = "draft";
                     if (entry.sys.publishedAt) {
@@ -156,7 +166,7 @@ export const NewestArticles = ({
                     if (isCurrentlySelectedInSlot) {
                         description = "Aktuell ausgewählt";
                     } else if (isCurrentlySelectedInOtherSlot) {
-                        description = "Aktuell in anderem Teaser ausgewählt"
+                        description = "Aktuell in anderem Teaser ausgewählt";
                     }
 
                     return <div
@@ -175,7 +185,7 @@ export const NewestArticles = ({
                             description={description}
                             status={status}
                         />
-                    </div>
+                    </div>;
                 })}
             </EntityList>
             <Pagination
@@ -186,4 +196,4 @@ export const NewestArticles = ({
             />
         </div>
     );
-}
+};

package/src/components/Contentful/Dialog.js

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 import {NewestArticles} from "./Dialog/NewestArticles";
 import {NoAccess} from "../NoAccess";
+import {LogicEditor} from './Dialog/LogicEditor';
 
 const Dialog = ({
     sdk,
@@ -10,9 +11,20 @@ const Dialog = ({
     getArticleThumbnailUrl,
 }) => {
     const [slotState, setSlotState] = useState({});
+    const [logicData, setLogicData] = useState({});
 
     const selectEntry = (entry) => {
-        sdk.close(entry);
+        sdk.close({
+            entry,
+            isArticleResponse: true,
+        });
+    };
+
+    const onSave = (data) => {
+        sdk.close({
+            data,
+            isLogicResponse: true,
+        });
     };
 
     const loadSlotStateForPage = async () => {
@@ -28,30 +40,41 @@ const Dialog = ({
                 console.error(response.message);
             }
 
-            return response?.data || {};
+            return response || {};
         } catch (e) {
             console.error(e);
         }
     };
 
     useEffect(() => {
-        loadSlotStateForPage().then(setSlotState);
+        loadSlotStateForPage().then(({
+            data = {},
+            logicData = {},
+        }) => {
+            setSlotState(data);
+            setLogicData(logicData[sdk.parameters.invocation.slotId]);
+        });
     }, [sdk.parameters.invocation]);
 
     return <div style={{
         backgroundColor: "#FFFFFF",
         minHeight: "100vh",
     }}>
-        <NewestArticles sdk={sdk} onEntryClick={selectEntry} slotState={slotState} getArticleThumbnailUrl={getArticleThumbnailUrl} portals={portals}/>
-        {/*
-        <Tabs defaultTab="newest">
-            <Tabs.List>
-                <Tabs.Tab panelId="newest">Neuste Artikel</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel id="newest">
-            </Tabs.Panel>
-        </Tabs>
-        */}
+        {sdk.parameters.invocation.isLogicEditor ?
+            <LogicEditor
+                sdk={sdk}
+                onSave={onSave}
+                logicData={logicData}
+                portals={portals}
+            /> :
+            <NewestArticles
+                sdk={sdk}
+                onEntryClick={selectEntry}
+                slotState={slotState}
+                getArticleThumbnailUrl={getArticleThumbnailUrl}
+                portals={portals}
+            />
+        }
     </div>;
 };
 

package/src/components/Contentful/EntryEditor.js

@@ -42,8 +42,11 @@ const Entry = ({sdk}) => {
                 slotId: slotId,
                 entryId: sdk.entry.getSys().id,
             },
-        }).then(async (entry) => {
-            if (!entry) {
+        }).then(async ({
+            entry,
+            isLogicResponse,
+        } = {}) => {
+            if (!entry || isLogicResponse) {
                 return;
             }
 
@@ -69,12 +72,61 @@ const Entry = ({sdk}) => {
         });
     };
 
+    const onSlotClickLogic = (slotId, currentDate) => {
+        const entryId = sdk.entry.getSys().id;
+        return sdk.dialogs.openCurrentApp({
+            title: "Positionslogik bearbeiten",
+            width: "fullWidth",
+            position: "top",
+            allowHeightOverflow: true,
+            minHeight: "500px",
+            shouldCloseOnOverlayClick: true,
+            shouldCloseOnEscapePress: true,
+            parameters: {
+                portal,
+                slotId: slotId,
+                entryId: entryId,
+                isLogicEditor: true,
+                date: currentDate,
+            },
+        }).then(async ({
+            data: {
+                timepoints,
+                tags,
+            } = {},
+            isArticleResponse,
+        } = {}) => {
+            if (!timepoints || !tags || isArticleResponse) {
+                return;
+            }
+
+            console.log(`Selected timepoints ${timepoints.map(v => `${v} Uhr`).join(", ")} and tags ${tags.map(v => `${v.label} (${v.id})`).join(", ")} for page ${entryId} with portal ${portal} for slot ${slotId}`);
+
+            const {apiRoot} = sdk.parameters.instance;
+            try {
+                await fetch(`${apiRoot}/api/saveLogicForSlot`, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        "project": portal,
+                        "slot": slotId,
+                        "page": entryId,
+                        "timepoints": timepoints,
+                        "tags": tags,
+                    }),
+                });
+            } catch (e) {
+                console.error(e);
+                alert("Fehler beim speichern!");
+            }
+        });
+    };
+
     const removeSlotData = async (slotId, currentDate) => {
         console.log(`Removing slot data for page ${sdk.entry.getSys().id} with portal ${portal} for slot ${slotId} and date ${currentDate}`);
 
         try {
             const apiRoot = sdk.parameters.instance.apiRoot;
-            const response = await fetch(`${apiRoot}/api/saveStateForSlot`, {
+            await fetch(`${apiRoot}/api/saveStateForSlot`, {
                 method: "POST",
                 body: JSON.stringify({
                     "project": portal,
@@ -100,7 +152,10 @@ const Entry = ({sdk}) => {
                 console.error(response.message);
             }
 
-            return response?.data || {};
+            return response || {
+                data: {},
+                logicData: {},
+            };
         } catch (e) {
             console.error(e);
         }
@@ -133,7 +188,9 @@ const Entry = ({sdk}) => {
         loadSlotStateForPage={loadSlotStateForPage}
         removeSlotData={removeSlotData}
         loadTimelineStateForPage={loadTimelineStateForPage}
-        onSlotClick={onSlotClick}/>;
+        onSlotClick={onSlotClick}
+        onSlotClickLogic={onSlotClickLogic}
+    />;
 };
 
 export default Entry;

package/src/components/Teasermanager.js

@@ -15,6 +15,7 @@ export const Teasermanager = ({
     loadSlotStateForPage = () => console.error("missing loadSlotStateForPage"),
     loadTimelineStateForPage = () => console.error("missing loadTimelineStateForPage"),
     onSlotClick = async () => console.error("missing onSlotClick"),
+    onSlotClickLogic = async () => console.error("missing onSlotClickLogic"),
     removeSlotData = async () => console.error("missing removeSlotData"),
     contentFieldName = "content",
     locale = "de",
@@ -26,6 +27,7 @@ export const Teasermanager = ({
     const [loadedContent, setLoadedContent] = useState(null);
     const [currentDate, _setCurrentDate] = useState(null);
     const [currentSlotState, setCurrentSlotState] = useState(null);
+    const [currentSlotLogicState, setCurrentSlotLogicState] = useState(null);
     const currentLoadingOperation = useRef(0);
 
     const setCurrentDate = (date) => {
@@ -34,7 +36,7 @@ export const Teasermanager = ({
         }
 
         _setCurrentDate(date);
-    }
+    };
 
     const reloadAllData = async () => {
         let loadingId = ++currentLoadingOperation.current;
@@ -56,7 +58,9 @@ export const Teasermanager = ({
             setLoading(true);
         }
 
-        const content = await runLoaders(contentValue, portalValue, entry?.sys?.id, currentDate);
+        const content = await runLoaders(
+            contentValue, portalValue, entry?.sys?.id, currentDate,
+        );
 
         // only apply the LAST update
         if (currentLoadingOperation.current === loadingId) {
@@ -66,7 +70,7 @@ export const Teasermanager = ({
             setLoadedContent(content);
             setLoading(false);
         }
-    }
+    };
 
     const initSlot = (node) => {
         const existingManagementNode = node.querySelector(`.__teasermanager_management_node`);
@@ -80,14 +84,21 @@ export const Teasermanager = ({
 
         const managementLabelNode = document.createElement("div");
         managementLabelNode.classList.add(styles.label);
+        const managementLabelNodeLogic = document.createElement("div");
+        managementLabelNodeLogic.classList.add(styles.labelLogic);
+
         if (currentSlotState?.[slotId]) {
             managementNode.classList.add(styles.changedBorder);
         }
 
+        if (currentSlotLogicState?.[slotId]) {
+            managementNode.classList.add(styles.logicBorder);
+        }
+
         if (currentSlotState?.[slotId] && currentSlotState?.[slotId] !== "RESET") {
             managementNode.classList.add(styles.changed);
 
-            managementLabelNode.innerHTML = `Klicken um den Artikel zu wechseln`;
+            managementLabelNode.innerHTML = `Artikel wechseln`;
             const managementRemoveButtonNode = document.createElement("div");
             managementRemoveButtonNode.classList.add(styles.removeButton);
             managementRemoveButtonNode.title = `Artikel entfernen`;
@@ -104,7 +115,7 @@ export const Teasermanager = ({
                     managementNode.classList.add(styles.loading);
                     reloadAllData().then(() => {
                         // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
-                        //managementNode.classList.remove(styles.loading);
+                        // managementNode.classList.remove(styles.loading);
                     });
                 });
                 e.preventDefault();
@@ -113,16 +124,18 @@ export const Teasermanager = ({
             });
             managementNode.appendChild(managementRemoveButtonNode);
         } else {
-            if (currentSlotState?.[slotId] === "RESET") {
-                managementLabelNode.innerHTML = `Hier wurde ein bereits verslotteter Artikel wieder entfernt<br />Klicken um einen neuen Artikel festzulegen`;
-            } else {
-                managementLabelNode.innerHTML = `Klicken um den Artikel festzulegen`;
-            }
+            managementLabelNode.innerHTML = `Artikel festlegen`;
+        }
 
+        if (currentSlotLogicState?.[slotId]) {
+            managementLabelNodeLogic.innerHTML = `Logik bearbeiten`;
+        } else {
+            managementLabelNodeLogic.innerHTML = `Logik festlegen`;
         }
 
         managementNode.appendChild(managementLabelNode);
-        managementNode.addEventListener("click", (e) => {
+        managementNode.appendChild(managementLabelNodeLogic);
+        managementLabelNode.addEventListener("click", (e) => {
             onSlotClick(slotId, currentDate).then((entry) => {
                 if (!entry) {
                     return; // nothing changed, no need to reload!
@@ -130,7 +143,7 @@ export const Teasermanager = ({
                 managementNode.classList.add(styles.loading);
                 reloadAllData().then(() => {
                     // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
-                    //managementNode.classList.remove(styles.loading);
+                    // managementNode.classList.remove(styles.loading);
                 });
             });
             e.preventDefault();
@@ -138,12 +151,25 @@ export const Teasermanager = ({
             return false;
         });
 
+        managementLabelNodeLogic.addEventListener("click", (e) => {
+            onSlotClickLogic(slotId, currentDate).then(() => {
+                managementNode.classList.add(styles.loading);
+                reloadAllData().then(() => {
+                    // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
+                    // managementNode.classList.remove(styles.loading);
+                });
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        });
+
+
         managementNode.classList.add("__teasermanager_management_node");
         node.appendChild(managementNode);
     };
 
     const updateSlots = (mutationList) => {
-
         if (!mutationList) {
             // update all slots
             const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
@@ -162,13 +188,12 @@ export const Teasermanager = ({
                 }
 
                 return true;
-            })
+            });
 
             if (isValidUpdate) {
                 updateSlots();
             }
         }
-
     };
 
     useEffect(() => {
@@ -204,11 +229,18 @@ export const Teasermanager = ({
             if (!currentDate) {
                 return;
             }
-            setCurrentSlotState(await loadSlotStateForPage(currentDate))
+
+            const {
+                data,
+                logicData,
+            } = await loadSlotStateForPage(currentDate);
+
+            setCurrentSlotState(data);
+            setCurrentSlotLogicState(logicData);
         } catch (e) {
             console.error(e);
         }
-    }
+    };
 
     useEffect(() => {
         updateSlots();

package/src/components/Teasermanager.module.css

@@ -20,7 +20,7 @@
     display: flex;
     justify-items: center;
     align-items: center;
-    padding: 2em;
+    padding: 1em;
 }
 
 .remove-button {
@@ -55,6 +55,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -64,9 +65,11 @@
     from {
         opacity: 1;
     }
+
     50% {
         opacity: 0.3;
     }
+
     to {
         opacity: 1;
     }
@@ -85,14 +88,39 @@
 .label {
     visibility: hidden;
     width: 100%;
+    height: 100%;
+    font-weight: bold;
+    text-align: center;
+    align-content: center;
+    padding: 6px;
+}
+
+.labelLogic {
+    visibility: hidden;
+    width: 100%;
+    height: 100%;
     font-weight: bold;
     text-align: center;
+    align-content: center;
+    padding: 1em;
+}
+
+.labelLogic:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.label:hover {
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .management:hover .label {
     visibility: visible;
 }
 
+.management:hover .labelLogic {
+    visibility: visible;
+}
+
 .changed {
     background-color: rgba(172, 255, 156, 0.4);
 }
@@ -103,4 +131,8 @@
 
 .changed-border {
     outline-color: green;
+}
+
+.logic-border {
+    outline-color: orange;
 }