@vonaffenfels/contentful-teasermanager 1.0.35 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.0.35",
+    "version": "1.0.37",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -16,11 +16,9 @@
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
         "@contentful/app-sdk": "^3.33.0",
+        "@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",
         "@svgr/webpack": "^5.5.0",
         "babel-loader": "^8.2.2",
         "classnames": "^2.3.2",
@@ -59,6 +57,7 @@
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
         "@contentful/app-sdk": "^3.33.0",
+        "@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",
@@ -99,7 +98,7 @@
         "@vonaffenfels/slate-editor": "^1.0.35",
         "webpack": "5.88.2"
     },
-    "gitHead": "8531e3bdf7affdda47f286a5786cd7778044f1fc",
+    "gitHead": "d615f4feaf8cd8d3f04c0f102887cac6f5e0659f",
     "publishConfig": {
         "access": "public"
     }

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

@@ -0,0 +1,153 @@
+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 useDebounce from "../../../hooks/useDebounce";
+import classNames from "classnames";
+
+export const NewestArticles = ({
+    slotState = {},
+    portals = {},
+    sdk,
+    onEntryClick = () => alert("onEntryClick missing"),
+    getArticleThumbnailUrl = (article) => alert("getArticleThumbnailUrl missing"),
+}) => {
+    const {portal, slotId} = sdk.parameters.invocation;
+    const contentfulClient = getContentfulClient();
+    const limit = 25;
+    const [searchQuery, setSearchQuery] = useState("");
+    const [authorSearchQuery, setAuthorSearchQuery] = useState("");
+    const [selectedPortal, setSelectedPortal] = useState(portal);
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState({items: [], total: 0});
+    const [page, setPage] = useState(0);
+    const [selectedAuthor, setSelectedAuthor] = useState(null);
+    const [authors, setAuthors] = useState([]);
+    const [authorsLoading, setAuthorsLoading] = useState(false);
+
+    const debouncedSearch = useDebounce(searchQuery, 500);
+    const debouncedAuthorSearch = useDebounce(authorSearchQuery, 500);
+
+    useEffect(() => {
+        setPage(0);
+    }, [searchQuery, selectedAuthor, selectedPortal]);
+
+    useEffect(() => {
+        setLoading(true);
+        const params = {
+            limit: limit,
+            skip: page * limit,
+            content_type: "article",
+            order: "-fields.teaserDate",
+            "fields.portal": portal,
+        };
+
+        if (searchQuery) {
+            params["fields.title[match]"] = searchQuery;
+        }
+
+        if (selectedAuthor) {
+            params["fields.authors.sys.id"] = selectedAuthor;
+        }
+
+        contentfulClient.getEntries(params).then((response) => {
+            setLoading(false);
+            setData(response);
+        });
+    }, [portal, debouncedSearch, selectedAuthor, limit, page]);
+
+    useEffect(() => {
+        setAuthorsLoading(true);
+        const params = {
+            limit: 100,
+            content_type: "author",
+            order: "fields.name",
+            "fields.portal": portal,
+        };
+
+        if (debouncedAuthorSearch) {
+            params["fields.name[match]"] = debouncedAuthorSearch
+        } else {
+            setSelectedAuthor(null);
+        }
+
+        contentfulClient.getEntries(params).then((response) => {
+            setAuthors(response?.items || []);
+            setAuthorsLoading(false);
+        });
+    }, [debouncedAuthorSearch, portal]);
+
+    useEffect(() => {
+        if (selectedAuthor) {
+            if (!authors.find(author => author.sys.id === selectedAuthor)) {
+                setSelectedAuthor(null);
+            }
+        }
+    }, [authors, selectedAuthor]);
+
+    return (
+        <div className="p-4 flex flex-col space-y-4">
+            <div className="flex space-x-2">
+                <div className="flex-grow">
+                    <TextInput
+                        width={"full"}
+                        placeholder={"Suche nach Titel"}
+                        onChange={(e) => setSearchQuery(e.target.value)}/>
+                </div>
+                <div className="flex-grow-0">
+                    <Autocomplete
+                        isLoading={authorsLoading}
+                        onSelectItem={item => setSelectedAuthor(item?.sys?.id)}
+                        items={authors}
+                        closeAfterSelect={true}
+                        itemToString={(item) => item.fields.name.de}
+                        renderItem={(item) => `${item.fields.name.de}`}
+                        onInputValueChange={setAuthorSearchQuery}
+
+                        placeholder={'Autor'}
+                        noMatchesMessage={'Kein Autor gefunden'}
+                    >
+                        {(options) => {
+                            return options.map(option => <span key={option.value}>{option.label}</span>)
+                        }}
+                    </Autocomplete>
+                </div>
+                <div className="flex-grow-0">
+                    <Select value={selectedPortal} onChange={e => setSelectedPortal(e.target.value)}>
+                        {Object.keys(portals).sort().map(optionValue => <Select.Option
+                            key={optionValue}
+                            value={optionValue}>{portals[optionValue]}</Select.Option>)}
+                    </Select>
+                </div>
+            </div>
+            <EntityList>
+                {loading && <Spinner/>}
+                {!loading && data.items.map((entry) => {
+                    return <div
+                        key={entry.sys.id}
+                        className={classNames({
+                            "border-2 border-red-300": Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot !== slotId),
+                            "border-2 border-green-300": Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot === slotId),
+                        })}
+                    >
+                        <EntityList.Item
+                            isLoading={loading}
+                            entityType={format(new Date(entry.fields.teaserDate?.de || entry.fields.date?.de), "dd.MM.yyyy HH:mm")}
+                            title={entry.fields.title?.de}
+                            onClick={() => onEntryClick(entry)}
+                            thumbnailUrl={getArticleThumbnailUrl(entry)}
+                            description={""}
+                            status={entry.sys.publishedAt ? "published" : "draft"}
+                        />
+                    </div>
+                })}
+            </EntityList>
+            <Pagination
+                activePage={page}
+                onPageChange={setPage}
+                itemsPerPage={limit}
+                isLastPage={data.total / limit <= page + 1}
+            />
+        </div>
+    );
+}

package/src/components/Contentful/Dialog.js

@@ -1,7 +1,48 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {NewestArticles} from "./Dialog/NewestArticles";
 
-const Dialog = ({sdk}) => {
-    return <div>DIALOG</div>
+const Dialog = ({sdk, portals, getArticleThumbnailUrl}) => {
+    const [slotState, setSlotState] = useState({});
+
+    const selectEntry = (entry) => {
+        sdk.close(entry);
+    }
+
+    const loadSlotStateForPage = async (date) => {
+        try {
+            const apiRoot = sdk.parameters.instance.apiRoot;
+            const portal = sdk.parameters.invocation.portal;
+            const pageId = sdk.parameters.invocation.entryId;
+            const date = sdk.parameters.invocation.date;
+            const teasermanagerUrl = `${apiRoot}/api/findStateForPage?project=${portal}&page=${pageId}&date=${date}`;
+            const response = await fetch(teasermanagerUrl).then(res => res.json());
+
+            if (response?.message) {
+                console.error(response.message);
+            }
+
+            return response?.data || {};
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    useEffect(() => {
+        loadSlotStateForPage().then(setSlotState);
+    }, []);
+
+    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>
+        */}
+    </div>
 };
 
 export default Dialog;

package/src/components/Contentful/EntryEditor.js

@@ -26,7 +26,21 @@ const Entry = ({sdk}) => {
     }, []);
 
     const onSlotClick = (slotId, currentDate) => {
-        return sdk.dialogs.selectSingleEntry({contentTypes: ["article"]}).then(async (entry) => {
+        return sdk.dialogs.openCurrentApp({
+            title: "Artikel wählen",
+            width: "fullWidth",
+            position: "top",
+            allowHeightOverflow: true,
+            minHeight: "500px",
+            shouldCloseOnOverlayClick: true,
+            shouldCloseOnEscapePress: true,
+            parameters: {
+                portal,
+                date: currentDate,
+                slotId: slotId,
+                entryId: sdk.entry.getSys().id,
+            },
+        }).then(async (entry) => {
             if (!entry) {
                 return;
             }

package/src/components/Teasermanager/Timeline.js

@@ -12,7 +12,6 @@ export const Timeline = ({
     loadTimelineStateForPage,
 }) => {
     const [timelineState, setTimelineState] = useState(null);
-
     const stepsInRange = (24 * 60) / 15 + 1; // must be uneven so we have a center ;)
 
     useEffect(() => {
@@ -27,6 +26,8 @@ export const Timeline = ({
     const leftDate = currentDate && subtract(currentDate, {minutes: stepsInRange / 2 * 15});
     if (leftDate) {
         leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+        leftDate.setSeconds(0);
+        leftDate.setMilliseconds(0);
     }
 
     const handleDateChange = (e) => {
@@ -105,13 +106,16 @@ export const Timeline = ({
             <div className={styles.timeline}>
                 {!!leftDate && Array(stepsInRange).fill(0).map((_, index) => {
                     const dotDate = new Date(leftDate.getTime() + (15 * 60 * 1000 * (index + 1)));
-                    const stateChanged = timelineState?.[format(dotDate, "dd.MM.yyyy HH:mm")] || 0;
+                    const stateChanged = timelineState?.[dotDate.toISOString()] || 0;
+                    const currentDateCopy = new Date(currentDate);
+                    currentDateCopy.setMilliseconds(0);
+                    currentDateCopy.setSeconds(0);
 
                     return <div
                         key={index}
                         className={classNames(styles.timelineDot, {
-                            [styles.timelineDotActive]: dotDate.getTime() === currentDate.getTime(),
-                            [styles.timelineDotChanged]: timelineState?.[format(dotDate, "dd.MM.yyyy HH:mm")],
+                            [styles.timelineDotActive]: dotDate.getTime() === currentDateCopy.getTime(),
+                            [styles.timelineDotChanged]: !!stateChanged,
                         })}
                         onClick={e => {
                             e.preventDefault();

package/src/hooks/useDebounce.js

@@ -0,0 +1,21 @@
+import React, {useState, useEffect} from "react";
+
+export default function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(
+        () => {
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+
+            return () => {
+                clearTimeout(handler);
+            };
+        },
+
+        [value],
+    );
+
+    return debouncedValue;
+}

package/src/index.js

@@ -5,9 +5,6 @@ import {
     init,
     locations,
 } from '@contentful/app-sdk';
-import '@contentful/forma-36-react-components/dist/styles.css';
-import '@contentful/forma-36-fcss/dist/styles.css';
-import '@contentful/forma-36-tokens/dist/css/index.css';
 
 import EntryEditor from './components/Contentful/EntryEditor';
 import Config from './components/Contentful/ConfigScreen';
@@ -19,10 +16,13 @@ export const BaseContentfulApp = (props) => {
     init((sdk) => {
         const rootContainer = document.getElementById('root');
 
-        initContentfulClient(sdk);
+        if (props.initPortal && sdk.parameters?.invocation?.portal) {
+            props.initPortal(sdk.parameters.invocation.portal);
+        }
 
-        const RendererWrapperComponent = props?.RendererWrapperComponent || (({children}) => <div>{children}</div>);
+        initContentfulClient(sdk);
 
+        const RendererWrapperComponent = props.RendererWrapperComponent || (({children}) => <div>{children}</div>);
         const ComponentLocationSettings = [
             {
                 location: locations.LOCATION_APP_CONFIG,
@@ -34,7 +34,7 @@ export const BaseContentfulApp = (props) => {
             },
             {
                 location: locations.LOCATION_DIALOG,
-                component: <Dialog sdk={sdk}/>,
+                component: <Dialog sdk={sdk} portals={props.portals} getArticleThumbnailUrl={props.getArticleThumbnailUrl}/>,
             },
             {
                 location: locations.LOCATION_PAGE,