@vonaffenfels/contentful-teasermanager 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
@@ -66,6 +66,7 @@
         "@contentful/forma-36-tokens": "^0.10.1",
         "@dnd-kit/core": "^6.3.1",
         "@svgr/webpack": "^5.5.0",
+        "@tanstack/react-query": "^4",
         "babel-loader": "^8.2.2",
         "classnames": "^2.3.2",
         "clean-webpack-plugin": "^3.0.0",
@@ -101,7 +102,7 @@
         "contentful-resolve-response": "^1.9.2",
         "webpack": "5.88.2"
     },
-    "gitHead": "1e99cab528da01b06334b55df31f21305222e6b8",
+    "gitHead": "885a22341d4310a5254b3c776fe5c5c32b76c7f2",
     "publishConfig": {
         "access": "public"
     }

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

@@ -18,7 +18,8 @@ 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([]);
 
@@ -65,6 +66,43 @@ const LogicEditorInner = ({
     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,
+                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);
@@ -83,11 +121,6 @@ const LogicEditorInner = ({
         node: andNode,
     } = useDroppable({id: "and"});
 
-    const {
-        portal,
-        locale = "de",
-    } = sdk.parameters.invocation;
-
     useEffect(() => {
         setLoading(true);
         const params = {
@@ -125,7 +158,7 @@ const LogicEditorInner = ({
                     return [];
                 }
 
-                const references = await sdk.cma.entry.references({entryId: response.items[0].sys.id}, {include: 7});
+                const references = await sdk.cma.entry.references({entryId: response.items[0].sys.id}, {include: 10});
                 const resolved = contentfulResolveResponse(references);
                 const allCategories = {};
 
@@ -141,7 +174,7 @@ const LogicEditorInner = ({
                     }
                 }
 
-                return Object.values(allCategories);
+                return Object.values(allCategories).filter((c) => c.tags.length > 0);
             }),
         ]).then(([tags, categories]) => {
             setLoading(false);
@@ -196,8 +229,8 @@ 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 grid-cols-2 gap-4">
-                    <div className="flex flex-col gap-2">
+                <div className="grid w-full grid-cols-4 gap-4">
+                    <div className="flex w-full flex-col gap-2">
                         <div>
                             <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
                         </div>
@@ -222,7 +255,7 @@ const LogicEditorInner = ({
                             })}
                         </div>
                     </div>
-                    <div className="flex flex-col gap-2">
+                    <div className="flex w-full flex-col gap-2">
                         <SectionHeading style={{marginBottom: 0}}>Und</SectionHeading>
                         <div
                             ref={setAndNodeRef}
@@ -246,6 +279,39 @@ const LogicEditorInner = ({
                             })}
                         </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">
@@ -266,16 +332,11 @@ const LogicEditorInner = ({
                         return (
                             <Checkbox
                                 key={category.id}
-                                isChecked={selectedTags.some((t) => category.tags.some((c) => c.id === t.id) || t.id === category.id)}
+                                isChecked={selectedTags.some((t) => category.tags.some((c) => c.id === t.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({
@@ -286,8 +347,6 @@ const LogicEditorInner = ({
                                             }
                                         }
                                     } else {
-                                        newTags = newTags.filter((t) => t.id !== category.id);
-
                                         for (const tag of category.tags) {
                                             newTags = newTags.filter((t) => t.id !== tag.id);
                                         }
@@ -297,7 +356,7 @@ const LogicEditorInner = ({
                                 }}
                             >
                                 {category.title} ({selectedTags.filter((t) =>
-                                    category.tags.some((c) => c.id === t.id) || t.id === category.id).length}/{category.tags.length + 1})
+                                    category.tags.some((c) => c.id === t.id)).length}/{category.tags.length})
                             </Checkbox>
                         );
                     })}
@@ -351,15 +410,16 @@ const LogicEditorInner = ({
     </div>;
 };
 
-function getAllTagsFromCategory(categoryNode, allCategories = {}) {
+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: categoryNode.fields.title.de,
+        title,
         tags: [],
         id: categoryNode.sys.id,
     };
@@ -399,7 +459,7 @@ function getAllTagsFromCategory(categoryNode, allCategories = {}) {
             }
         }
 
-        getAllTagsFromCategory(child, allCategories);
+        getAllTagsFromCategory(child, allCategories, title);
     }
 
     allCategories[categoryNode.sys.id].tags = [...new Set(allCategories[categoryNode.sys.id].tags)];

package/src/components/Contentful/Dialog.js

@@ -2,8 +2,12 @@ import React, {
     useEffect, useState,
 } from 'react';
 import {NewestArticles} from "./Dialog/NewestArticles";
-import {NoAccess} from "../NoAccess";
 import {LogicEditor} from './Dialog/LogicEditor';
+import {
+    QueryClient, QueryClientProvider,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 const Dialog = ({
     sdk,
@@ -60,21 +64,23 @@ const Dialog = ({
         backgroundColor: "#FFFFFF",
         minHeight: "100vh",
     }}>
-        {sdk.parameters.invocation.isLogicEditor ?
-            <LogicEditor
-                sdk={sdk}
-                onSave={onSave}
-                logicData={logicData}
-                portals={portals}
-            /> :
-            <NewestArticles
-                sdk={sdk}
-                onEntryClick={selectEntry}
-                slotState={slotState}
-                getArticleThumbnailUrl={getArticleThumbnailUrl}
-                portals={portals}
-            />
-        }
+        <QueryClientProvider client={queryClient}>
+            {sdk.parameters.invocation.isLogicEditor ?
+                <LogicEditor
+                    sdk={sdk}
+                    onSave={onSave}
+                    logicData={logicData}
+                    portals={portals}
+                /> :
+                <NewestArticles
+                    sdk={sdk}
+                    onEntryClick={selectEntry}
+                    slotState={slotState}
+                    getArticleThumbnailUrl={getArticleThumbnailUrl}
+                    portals={portals}
+                />
+            }
+        </QueryClientProvider>
     </div>;
 };
 

package/src/queryFromLogic.js

@@ -0,0 +1,29 @@
+export const queryFromLogic = (logic) => {
+    const orTags = logic.tags.filter(v => v.type === "or").map(v => v.id);
+    const andTags = logic.tags.filter(v => v.type === "and").map(v => v.id);
+    const timeZoneOffsetInHours = new Date().getTimezoneOffset() / 60;
+    const differenceToGermanTime = timeZoneOffsetInHours + 2;
+    const hours = [...(logic.timepoints || [])].map(v => parseInt(v)).sort((a, b) => a - b);
+    let nearestPassedTime = hours.find(v => v <= new Date().getUTCHours() + differenceToGermanTime);
+    const logicQuery = {"fields.portal": logic.portal};
+
+    if (!nearestPassedTime) {
+        nearestPassedTime = hours.at(0) || 0;
+    }
+
+    if (orTags.length) {
+        logicQuery["fields.tags.sys.id[in]"] = orTags.join(",");
+    }
+
+    if (andTags.length) {
+        logicQuery["fields.tags.sys.id[all]"] = andTags.join(",");
+    }
+
+    if (nearestPassedTime && hours.length) {
+        logicQuery["fields.date[lte]"] = new Date(new Date().setHours(
+            nearestPassedTime + differenceToGermanTime, 0, 0, 0,
+        ));
+    }
+
+    return logicQuery;
+};

package/webpack.config.dev.js

@@ -5,7 +5,7 @@ let config = require("./webpack.config")({
 });
 
 
-config.entry = {index: './src/dev.js'};
+config.entry.index = './src/dev.js';
 
 config.mode = "development";
 config.watch = true;

package/webpack.config.js

@@ -21,7 +21,10 @@ module.exports = ({
 }) => {
     return {
         mode: 'production',
-        entry: {index: './src/index.js'},
+        entry: {
+            index: './src/index.js',
+            queryFromLogic: './src/queryFromLogic.js',
+        },
         module: {
             rules: [
                 {