@vonaffenfels/contentful-teasermanager 1.1.52 → 1.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.1.52",
+    "version": "1.1.54",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
@@ -99,7 +99,7 @@
         "@vonaffenfels/slate-editor": "^1.1.52",
         "webpack": "5.88.2"
     },
-    "gitHead": "88c7407b7b42841eb1d38405a5c24c78bc5e6b7d",
+    "gitHead": "f5696a1d623a42c86821e19c6587211bb7274195",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Contentful/ConfigScreen.js

@@ -1,77 +1,155 @@
-import React, {Component} from 'react';
+import React, {
+    useEffect, useState,
+} from 'react';
 import {
-    Heading, Form, TextField, Workbench, Paragraph,
+    Form, Workbench,
 } from '@contentful/forma-36-react-components';
+import {
+    Button, DisplayText, Flex,
+    FormControl, Subheading, TextInput,
+} from '@contentful/f36-components';
+import {Multiselect} from '@contentful/f36-multiselect';
 import {css} from 'emotion';
 
-export default class Config extends Component {
+const Config = ({sdk}) => {
+    const [params, setParams] = useState({
+        usersWithAccess: {},
+        portalsWithAccess: [],
+    });
+    const [spaceUsers, setSpaceUsers] = useState([]);
 
-    constructor(props) {
-        super(props);
-        this.state = {parameters: {}};
+    const onConfigure = async () => {
+        const currentState = await sdk.app.getCurrentState();
 
-        // `onConfigure` allows to configure a callback to be
-        // invoked when a user attempts to install the app or update
-        // its configuration.
-        props.sdk.app.onConfigure(() => this.onConfigure());
-    }
+        return {
+            parameters: params,
+            targetState: currentState,
+        };
+    };
 
-    async componentDidMount() {
-        // Get current parameters of the app.
-        // If the app is not installed yet, `parameters` will be `null`.
-        const parameters = await this.props.sdk.app.getParameters();
+    useEffect(() => {
+        if (sdk) {
+            sdk.app.getParameters().then(params => {
+                if (Array.isArray(params?.usersWithAccess)) {
+                    params.usersWithAccess = {};
+                }
 
-        this.setState(parameters ? {parameters} : this.state, () => {
-            // Once preparation has finished, call `setReady` to hide
-            // the loading screen and present the app to a user.
-            this.props.sdk.app.setReady();
-        });
-    }
+                setParams(params);
+                sdk.app.setReady();
+            });
+            sdk.space.getUsers().then(users => {
+                setSpaceUsers(users.items.map(v => v.email));
+            });
+        }
+    }, [sdk]);
 
-    async onConfigure() {
-        // This method will be called when a user clicks on "Install"
-        // or "Save" in the configuration screen.
-        // for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
+    useEffect(() => {
+        if (sdk) {
+            sdk.app.onConfigure(() => onConfigure());
+        }
+    }, [sdk, params]);
 
-        // Get current the state of EditorInterface and other entities
-        // related to this app installation
-        const currentState = await this.props.sdk.app.getCurrentState();
+    const handleSelectItem = (event, portal) => {
+        const {
+            checked,
+            value,
+        } = event.target;
 
-        return {
-            // Parameters to be persisted as the app configuration.
-            parameters: this.state.parameters,
-            // In case you don't want to submit any update to app
-            // locations, you can just pass the currentState as is
-            targetState: currentState,
-        };
-    }
+        console.log("ConfigScreen.js:58 / handleSelectItem", params?.usersWithAccess, portal);
+        let newValue = params?.usersWithAccess?.[portal] || [];
+        if (checked) {
+            newValue = [...newValue, value];
+        } else {
+            newValue = newValue.filter((email) => email !== value);
+        }
 
-    onFieldChanged(value, field) {
-        this.setState({
-            parameters: {
-                ...this.state.parameters,
-                [field]: value,
+        console.log(
+            "ConfigScreen.js:65 / handleSelectItem", params.usersWithAccess, newValue, portal,
+        );
+        setParams({
+            ...params,
+            usersWithAccess: {
+                ...(params.usersWithAccess || {}),
+                [portal]: newValue,
             },
         });
-    }
-
-    render() {
-        return (
-            <Workbench className={css({
-                padding: '80px',
-                backgroundColor: "#FFF",
-            })}>
-                <Form>
-                    <Heading>Configuration</Heading>
-                    <TextField
-                        value={this.state.parameters.contentField}
-                        onChange={e => this.onFieldChanged(e.target.value, "contentField")}
-                        labelText="Content Field Name"
-                        required
-                    />
-                </Form>
-            </Workbench>
-        );
-    }
+    };
+
+    const addPortal = () => {
+        const newPortal = document.getElementsByName("newPortal")[0].value;
+        const portals = params.portalsWithAccess || [];
+
+        if (!newPortal || portals.includes(newPortal)) {
+            return;
+        }
+
+        setParams({
+            ...params,
+            portalsWithAccess: [...portals, newPortal.trim()].filter(Boolean),
+        });
+    };
+
+    const removePortal = (portal) => {
+        const portals = params.portalsWithAccess || [];
+
+        setParams({
+            ...params,
+            portalsWithAccess: portals.filter(v => v !== portal),
+        });
+    };
+
+    return (
+        <Workbench className={css({
+            padding: '80px',
+            backgroundColor: "#FFF",
+        })}>
+            <Form>
+                <FormControl>
+                    <FormControl.Label>Teasermanager Portale mit Zugriffsbeschränkung</FormControl.Label>
+                    <Flex flexDirection="column" gap={"spacingM"}>
+                        <Flex flexDirection="row" gap={"spacingM"}>
+                            <TextInput name="newPortal"/>
+                            <Button onClick={addPortal} variant="positive">Portal hinzufügen</Button>
+                        </Flex>
+                        <Flex flexDirection="column" gap={"spacingM"}>
+                            {params.portalsWithAccess?.map((portal) => {
+                                return <Flex flexDirection="row" gap={"spacingM"} key={portal}>
+                                    <Subheading style={{width: "200px"}}>{portal}</Subheading>
+                                    <Button
+                                        variant="negative"
+                                        key={portal}
+                                        onClick={e => removePortal(portal)}>Löschen</Button>
+                                </Flex>;
+                            })}
+                        </Flex>
+                    </Flex>
+                </FormControl>
+                {params.portalsWithAccess?.map((portal) => {
+                    return <FormControl key={portal}>
+                        <FormControl.Label>{portal} Teasermanager Benutzer</FormControl.Label>
+                        <Multiselect
+                            currentSelection={params.usersWithAccess?.[portal]}
+                            popoverProps={{isFullWidth: true}}
+                        >
+                            {spaceUsers.map((userEmail) => {
+                                const val = userEmail.toLowerCase().replace(/\s/g, '-');
+                                return (
+                                    <Multiselect.Option
+                                        key={`user-${val}}`}
+                                        itemId={`user-${portal}-${val}}`}
+                                        value={userEmail}
+                                        label={userEmail}
+                                        onSelectItem={e => handleSelectItem(e, portal)}
+                                        isChecked={params.usersWithAccess?.[portal]?.includes(userEmail)}
+                                    />
+                                );
+                            })}
+                        </Multiselect>
+                    </FormControl>;
+                })}
+            </Form>
+        </Workbench>
+    );
+};
 
-}
+export default Config;

package/src/components/Contentful/Dialog.js

@@ -1,48 +1,58 @@
-import React, {useEffect, useState} from 'react';
-import {NewestArticles} from "./Dialog/NewestArticles";
-
-const Dialog = ({sdk, portals, getArticleThumbnailUrl}) => {
-    const [slotState, setSlotState] = useState({});
-
-    const selectEntry = (entry) => {
-        sdk.close(entry);
-    }
-
-    const loadSlotStateForPage = async () => {
-        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.toISOString()}`;
-            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);
-    }, [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>
-        */}
-    </div>
-};
-
-export default Dialog;
+import React, {
+    useEffect, useState,
+} from 'react';
+import {NewestArticles} from "./Dialog/NewestArticles";
+import {NoAccess} from "../NoAccess";
+
+const Dialog = ({
+    sdk,
+    portals,
+    getArticleThumbnailUrl,
+}) => {
+    const [slotState, setSlotState] = useState({});
+
+    const selectEntry = (entry) => {
+        sdk.close(entry);
+    };
+
+    const loadSlotStateForPage = async () => {
+        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.toISOString()}`;
+            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);
+    }, [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>
+        */}
+    </div>;
+};
+
+export default Dialog;

package/src/components/Contentful/EntryEditor.js

@@ -2,12 +2,14 @@ import React, {
     useEffect, useState,
 } from 'react';
 import {Teasermanager} from "../Teasermanager";
+import {NoAccess} from "../NoAccess";
 
 const Entry = ({sdk}) => {
     const contentField = sdk.parameters.instance.contentField;
     const [locale, setLocale] = useState(sdk.locales.default);
     const [portal, setPortal] = useState();
     const portalField = sdk?.entry?.fields?.portal;
+    const enabled = !sdk?.parameters?.installation?.usersWithAccess?.[portal] || sdk?.parameters?.installation?.usersWithAccess?.[portal]?.includes(sdk?.user?.email);
 
     portalField?.onValueChanged(() => {
         if (portalField.getValue() !== portal) {
@@ -86,7 +88,7 @@ const Entry = ({sdk}) => {
             console.error(e);
             alert("Fehler beim speichern!");
         }
-    }
+    };
 
     const loadSlotStateForPage = async (date) => {
         try {
@@ -102,7 +104,7 @@ const Entry = ({sdk}) => {
         } catch (e) {
             console.error(e);
         }
-    }
+    };
 
     const loadTimelineStateForPage = async (fromDate, toDate) => {
         try {
@@ -118,6 +120,10 @@ const Entry = ({sdk}) => {
         } catch (e) {
             console.error(e);
         }
+    };
+
+    if (!enabled) {
+        return <NoAccess sdk={sdk} portal={portal}/>;
     }
 
     return <Teasermanager

package/src/components/Contentful/Page.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import {Teasermanager} from "../Teasermanager";
+import {NoAccess} from "../NoAccess";
 
 const Page = ({sdk}) => {
-
-    const onSlotClick = (slotId, currentDate) => {
-        console.log("KIENZ_DEBUG: :7 / onSlotClick", {sdk});
-    }
-
-    return <Teasermanager entryId={"4RvZ6fcUtBIgw2Hw5YILPs"} onSlotClick={onSlotClick} />;
+    return <Teasermanager entryId={"4RvZ6fcUtBIgw2Hw5YILPs"} />;
 };
 
 export default Page;

package/src/components/NoAccess.js

@@ -0,0 +1,13 @@
+import {
+    DisplayText, Flex, Paragraph,
+} from "@contentful/f36-components";
+
+export const NoAccess = ({sdk}) => {
+    return <Flex flexDirection="column" alignItems="center" paddingTop="spacing2Xl">
+        <DisplayText>
+            Kein Zugriff
+        </DisplayText>
+        <Paragraph>Bitte wenden Sie sich an einen Administrator wenn sie Zugriff benötigen</Paragraph>
+        <Paragraph>Angemeldeter Benutzer: {sdk?.user?.email}</Paragraph>
+    </Flex>;
+};

package/src/index.js

@@ -12,7 +12,7 @@ import Dialog from "./components/Contentful/Dialog";
 import Page from "./components/Contentful/Page";
 import {initContentfulClient} from "./lib/contentfulClient";
 
-export const BaseContentfulApp = (props) => {
+export const BaseContentfulApp = (props = {}) => {
     init((sdk) => {
         const rootContainer = document.getElementById('root');