@vonaffenfels/contentful-teasermanager 1.1.52 → 1.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.1.52",
+    "version": "1.1.53",
     "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": "5fb290a60b6c1b427ab90c9687ee7289738d78f3",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Contentful/ConfigScreen.js

@@ -1,77 +1,94 @@
-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 {FormControl} 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: []});
+    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 => {
+                setParams(params);
+                sdk.app.setReady();
+            });
+            sdk.space.getUsers().then(users => {
+                setSpaceUsers(users.items.map(v => v.email));
+            });
+        }
+    }, [sdk]);
 
-        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();
-        });
-    }
+    useEffect(() => {
+        if (sdk) {
+            sdk.app.onConfigure(() => onConfigure());
+        }
+    }, [sdk, params]);
 
-    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
+    const handleSelectItem = (event) => {
+        const {
+            checked,
+            value,
+        } = event.target;
 
-        // Get current the state of EditorInterface and other entities
-        // related to this app installation
-        const currentState = await this.props.sdk.app.getCurrentState();
+        let newValue = params?.usersWithAccess || [];
+        if (checked) {
+            newValue = [...newValue, value];
+        } else {
+            newValue = newValue.filter((email) => email !== value);
+        }
 
-        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,
-        };
-    }
-
-    onFieldChanged(value, field) {
-        this.setState({
-            parameters: {
-                ...this.state.parameters,
-                [field]: value,
-            },
+        setParams({
+            ...params,
+            usersWithAccess: 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>
-        );
-    }
+    return (
+        <Workbench className={css({
+            padding: '80px',
+            backgroundColor: "#FFF",
+        })}>
+            <Form>
+                <FormControl>
+                    <FormControl.Label>Teasermanager Benutzer</FormControl.Label>
+                    <Multiselect
+                        currentSelection={params.usersWithAccess}
+                        popoverProps={{isFullWidth: true}}
+                    >
+                        {spaceUsers.map((userEmail) => {
+                            const val = userEmail.toLowerCase().replace(/\s/g, '-');
+                            return (
+                                <Multiselect.Option
+                                    key={`user-${val}}`}
+                                    itemId={val}
+                                    value={userEmail}
+                                    label={userEmail}
+                                    onSelectItem={handleSelectItem}
+                                    isChecked={params.usersWithAccess?.includes(userEmail)}
+                                />
+                            );
+                        })}
+                    </Multiselect>
+                </FormControl>
+            </Form>
+        </Workbench>
+    );
+};
 
-}
+export default Config;

package/src/components/Contentful/Dialog.js

@@ -1,48 +1,63 @@
-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 enabled = sdk?.parameters?.installation?.usersWithAccess?.includes(sdk?.user?.email);
+
+    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]);
+
+    if (!enabled) {
+        return <NoAccess sdk={sdk}/>;
+    }
+
+    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?.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}/>;
     }
 
     return <Teasermanager

package/src/components/Contentful/Page.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import {Teasermanager} from "../Teasermanager";
+import {NoAccess} from "../NoAccess";
 
 const Page = ({sdk}) => {
+    const enabled = sdk?.parameters?.installation?.usersWithAccess?.includes(sdk?.user?.email);
 
-    const onSlotClick = (slotId, currentDate) => {
-        console.log("KIENZ_DEBUG: :7 / onSlotClick", {sdk});
+    if (!enabled) {
+        return <NoAccess sdk={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');
 
@@ -43,6 +43,7 @@ export const BaseContentfulApp = (props) => {
         ];
 
         ComponentLocationSettings.forEach((componentLocationSetting) => {
+            console.log("index.js:46 / ANON", sdk.location);
             if (sdk.location.is(componentLocationSetting.location)) {
                 const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
                 root.render(componentLocationSetting.component);