@vonaffenfels/contentful-teasermanager 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.0.26",
+    "version": "1.0.28",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -96,10 +96,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.26",
-        "webpack": "5.73.0"
+        "@vonaffenfels/slate-editor": "^1.0.28",
+        "webpack": "5.88.2"
     },
-    "gitHead": "7089b60e41691c2c382e25c8447f74d0bd031aaa",
+    "gitHead": "fe5a1e14e437b67a1aa58fa6781b9ae134914750",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Teasermanager/Timeline.js

@@ -36,27 +36,32 @@ export const Timeline = ({
         setCurrentDate(newDate);
     };
 
-    const handleTimeChange = e => {
+    const handleTimeChange = (e, type) => {
         if (!e.target.value) {
             return;
         }
 
         let newDate = new Date(currentDate);
 
-        let [hours, minutes] = e.target.value.split(":");
-
-        newDate.setHours(hours, minutes);
+        switch (type) {
+            case "hour":
+                newDate.setHours(e.target.value);
+                break;
+            case "minute":
+                newDate.setMinutes(e.target.value);
+                break;
+        }
 
         setCurrentDate(newDate);
     };
 
     return <div className="flex w-full">
         <div className={styles.wrapper}>
-            <div className={styles.date}>
+            <div className="w-full h-auto text-center py-2">
                 {!!currentDate && (
                     <>
                         <input type="date" value={format(currentDate, "yyyy-MM-dd")} onChange={handleDateChange} className="mr-2 w-auto" />
-                        <input type="time" value={format(currentDate, "HH:mm")} onChange={handleTimeChange} className="w-auto" />
+                        <TimeSelect className="inline w-auto" currentDate={currentDate} onChange={handleTimeChange} />
                     </>
                 )}
             </div>
@@ -80,4 +85,42 @@ export const Timeline = ({
             </div>
         </div>
     </div>;
+};
+
+const TimeSelect = ({
+    onChange,
+    currentDate,
+    ...props
+}) => {
+    const renderHourSelectOptions = () => {
+        let options = [];
+
+        for (let i = 1; i <= 24; i++) {
+            options.push(<option key={`hour-option-${i}`} value={i} style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
+        }
+
+        return options;
+    };
+
+    const renderMinuteSelectOptions = () => {
+        let options = [];
+
+        for (let i = 0; i <= 60; i += 15) {
+            options.push(<option key={`minute-option-${i}`} value={i} style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
+        }
+
+        return options;
+    };
+
+    return (
+        <div {...props}>
+            <select value={format(currentDate, "H")} onChange={e => onChange(e, "hour")} className="w-auto">
+                {renderHourSelectOptions()}
+            </select>
+            <select value={format(currentDate, "m")} onChange={e => onChange(e, "minute")} className="mr-1 w-auto">
+                {renderMinuteSelectOptions()}
+            </select>
+            Uhr
+        </div>
+    );
 };

package/src/components/Teasermanager/Timeline.module.css

@@ -8,7 +8,7 @@
 
 .timeline {
     height: auto;
-    padding: 6px 0 6px 0;
+    padding: 30px 0 12px 0;
     width: 100%;
     display: flex;
     font-weight: bold;
@@ -48,10 +48,4 @@
     left: -100px;
     width: 200px;
     text-align: center;
-}
-
-.date {
-    width: 100%;
-    text-align: center;
-    padding: 20px 0 30px 0;
 }

package/src/components/Teasermanager.js

@@ -1,11 +1,13 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {
+    useEffect, useRef, useState,
+} from "react";
 
 import {getContentfulClient} from "../lib/contentfulClient";
 import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
 import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 import {Timeline} from "./Teasermanager/Timeline";
 import styles from "./Teasermanager.module.css";
-import {runLoaders} from "../lib/runLoaders"
+import {runLoaders} from "../lib/runLoaders";
 
 export const Teasermanager = ({
     entryId,
@@ -43,12 +45,12 @@ export const Teasermanager = ({
         });
 
         node.appendChild(managementNode);
-    }
+    };
 
     const updateSlots = (mutationList) => {
         const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
         slots.forEach(initSlot);
-    }
+    };
 
     useEffect(() => {
         if (!entryId && entry) {
@@ -67,11 +69,15 @@ export const Teasermanager = ({
         }
 
         const observer = new MutationObserver(updateSlots);
-        observer.observe(wrapperRef.current, {attributes: false, childList: true, subtree: true});
+        observer.observe(wrapperRef.current, {
+            attributes: false,
+            childList: true,
+            subtree: true,
+        });
 
         return () => {
             observer.disconnect();
-        }
+        };
     }, [wrapperRef, currentDate]);
 
     useEffect(() => {
@@ -84,13 +90,13 @@ export const Teasermanager = ({
         }
 
         setLoading(true);
-        runLoaders(contentValue, portalValue).then(content => {
+        runLoaders(contentValue, portalValue, entry?.sys?.id).then(content => {
             setLoadedContent(content);
             setLoading(false);
         });
     }, [contentFieldName, locale, entry, reloadTrigger]);
 
-    return <div className="w-full flex flex-col">
+    return <div className="flex w-full flex-col">
         <div className="w-full">
             <Timeline currentDate={currentDate} setCurrentDate={setCurrentDate}/>
         </div>
@@ -103,5 +109,5 @@ export const Teasermanager = ({
                 />
             }
         </div>
-    </div>
-}
+    </div>;
+};

package/src/lib/runLoaders.js

@@ -1,11 +1,11 @@
-export const runLoaders = async (value, portal) => {
+export const runLoaders = async (value, portal, contextId) => {
     if (!Array.isArray(value)) {
         return value;
     }
 
     const newValue = await Promise.all(value.map(async (item) => {
         try {
-            return await runLoader(item, portal)
+            return await runLoader(item, portal, contextId)
         } catch (e) {
             console.error(e);
             return item;
@@ -15,13 +15,16 @@ export const runLoaders = async (value, portal) => {
     return newValue;
 }
 
-const runLoader = async (item, portal) => {
+const runLoader = async (item, portal, contextId) => {
 
     if (!item?.block) {
         return item;
     }
     try {
-        const response = await fetch(`/api/loader/?portal=${portal}&block=${item.block}&variables=${JSON.stringify(item.attributes)}`).then(res => res.json());
+        const response = await fetch(`/api/loader/?portal=${portal}&block=${item.block}`, {
+            method: "POST",
+            body: JSON.stringify({variables: item.attributes, context: {activeContent: {sys: {id: contextId}}}}),
+        }).then(res => res.json());
 
         return {
             ...item,