@vonaffenfels/contentful-teasermanager 1.1.69 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.1.69",
+    "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.69",
+        "@vonaffenfels/slate-editor": "^1.2.0",
         "webpack": "5.88.2"
     },
-    "gitHead": "d16994da870bb2bc4798e09f17f938726136683b",
+    "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([]);
@@ -51,6 +61,16 @@ export const NewestArticles = ({
             content_type: "article",
             order: "-fields.teaserDate",
             "fields.portal": selectedPortal,
+            select: [
+                "fields.title",
+                "fields.authors",
+                "fields.teaserDate",
+                "fields.image",
+                "fields.date",
+                "fields.portal",
+                "sys.publishedAt",
+                "sys.id",
+            ].join(","),
         };
 
         if (searchQuery) {
@@ -65,7 +85,7 @@ export const NewestArticles = ({
             setLoading(false);
             setData(response);
         });
-    }, [debouncedSearch, selectedAuthor,selectedPortal, limit, page]);
+    }, [debouncedSearch, selectedAuthor, selectedPortal, limit, page]);
 
     useEffect(() => {
         setAuthorsLoading(true);
@@ -77,7 +97,7 @@ export const NewestArticles = ({
         };
 
         if (debouncedAuthorSearch) {
-            params["fields.name[match]"] = debouncedAuthorSearch
+            params["fields.name[match]"] = debouncedAuthorSearch;
         } else {
             setSelectedAuthor(null);
         }
@@ -97,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)}
@@ -119,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}
@@ -135,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) {
@@ -146,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
@@ -165,7 +185,7 @@ export const NewestArticles = ({
                             description={description}
                             status={status}
                         />
-                    </div>
+                    </div>;
                 })}
             </EntityList>
             <Pagination
@@ -176,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;