@vonaffenfels/contentful-teasermanager 1.2.17 → 1.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +19 -19
- package/.nvmrc +1 -1
- package/dist/TestStory.js +94 -0
- package/dist/TestStory2.js +94 -0
- package/dist/TestStory3.js +94 -0
- package/dist/index.html +12 -0
- package/dist/index.js +119884 -0
- package/package.json +3 -3
- package/postcss.config.js +6 -6
- package/src/components/Contentful/ConfigScreen.js +154 -154
- package/src/components/Contentful/Dialog/NewestArticles.js +198 -198
- package/src/components/Contentful/Dialog.js +87 -87
- package/src/components/Contentful/EntryEditor.js +196 -196
- package/src/components/Contentful/Page.js +9 -9
- package/src/components/NoAccess.js +12 -12
- package/src/components/Teasermanager/Timeline.js +179 -179
- package/src/components/Teasermanager/Timeline.module.css +89 -89
- package/src/components/Teasermanager.js +269 -269
- package/src/components/Teasermanager.module.css +137 -137
- package/src/dev.js +5 -5
- package/src/hooks/useDebounce.js +20 -20
- package/src/hooks/useOnScreen.js +23 -23
- package/src/icons/remove.svg +7 -7
- package/src/index.html +11 -11
- package/src/index.js +51 -51
- package/src/lib/contentfulClient.js +12 -12
- package/src/lib/runLoaders.js +46 -46
- package/src/scss/index.scss +11 -11
- package/tailwind.config.js +5 -5
- package/webpack.config.dev.js +25 -25
- package/webpack.config.js +174 -174
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonaffenfels/contentful-teasermanager",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.19",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"prepublish": "yarn run build",
|
|
@@ -98,11 +98,11 @@
|
|
|
98
98
|
"webpack-dev-server": "^4.0.0-beta.2"
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
|
-
"@vonaffenfels/slate-editor": "^1.2.
|
|
101
|
+
"@vonaffenfels/slate-editor": "^1.2.19",
|
|
102
102
|
"contentful-resolve-response": "^1.9.2",
|
|
103
103
|
"webpack": "5.88.2"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "aa2e077d950ae577347ebe01cd13860321b5141b",
|
|
106
106
|
"publishConfig": {
|
|
107
107
|
"access": "public"
|
|
108
108
|
}
|
package/postcss.config.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
plugins: {
|
|
3
|
-
'postcss-import': {},
|
|
4
|
-
tailwindcss: {},
|
|
5
|
-
autoprefixer: {},
|
|
6
|
-
},
|
|
1
|
+
module.exports = {
|
|
2
|
+
plugins: {
|
|
3
|
+
'postcss-import': {},
|
|
4
|
+
tailwindcss: {},
|
|
5
|
+
autoprefixer: {},
|
|
6
|
+
},
|
|
7
7
|
};
|
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
useEffect, useState,
|
|
3
|
-
} from 'react';
|
|
4
|
-
import {
|
|
5
|
-
Form, Workbench,
|
|
6
|
-
} from '@contentful/forma-36-react-components';
|
|
7
|
-
import {
|
|
8
|
-
Button, Flex,
|
|
9
|
-
FormControl, Subheading, TextInput,
|
|
10
|
-
} from '@contentful/f36-components';
|
|
11
|
-
import {Multiselect} from '@contentful/f36-multiselect';
|
|
12
|
-
import {css} from 'emotion';
|
|
13
|
-
|
|
14
|
-
const Config = ({sdk}) => {
|
|
15
|
-
const [params, setParams] = useState({
|
|
16
|
-
usersWithAccess: {},
|
|
17
|
-
portalsWithAccess: [],
|
|
18
|
-
});
|
|
19
|
-
const [spaceUsers, setSpaceUsers] = useState([]);
|
|
20
|
-
|
|
21
|
-
const onConfigure = async () => {
|
|
22
|
-
const currentState = await sdk.app.getCurrentState();
|
|
23
|
-
|
|
24
|
-
return {
|
|
25
|
-
parameters: params,
|
|
26
|
-
targetState: currentState,
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
if (sdk) {
|
|
32
|
-
sdk.app.getParameters().then(params => {
|
|
33
|
-
if (!params) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
if (Array.isArray(params?.usersWithAccess)) {
|
|
38
|
-
params.usersWithAccess = {};
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
setParams(params);
|
|
42
|
-
sdk.app.setReady();
|
|
43
|
-
});
|
|
44
|
-
sdk.space.getUsers().then(users => {
|
|
45
|
-
setSpaceUsers(users.items.map(v => v.email));
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}, [sdk]);
|
|
49
|
-
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (sdk) {
|
|
52
|
-
sdk.app.onConfigure(() => onConfigure());
|
|
53
|
-
}
|
|
54
|
-
}, [sdk, params]);
|
|
55
|
-
|
|
56
|
-
const handleSelectItem = (event, portal) => {
|
|
57
|
-
const {
|
|
58
|
-
checked,
|
|
59
|
-
value,
|
|
60
|
-
} = event.target;
|
|
61
|
-
|
|
62
|
-
let newValue = params?.usersWithAccess?.[portal] || [];
|
|
63
|
-
if (checked) {
|
|
64
|
-
newValue = [...newValue, value];
|
|
65
|
-
} else {
|
|
66
|
-
newValue = newValue.filter((email) => email !== value);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
setParams({
|
|
70
|
-
...params,
|
|
71
|
-
usersWithAccess: {
|
|
72
|
-
...(params.usersWithAccess || {}),
|
|
73
|
-
[portal]: newValue,
|
|
74
|
-
},
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
const addPortal = () => {
|
|
79
|
-
const newPortal = document.getElementsByName("newPortal")[0].value;
|
|
80
|
-
const portals = params.portalsWithAccess || [];
|
|
81
|
-
|
|
82
|
-
if (!newPortal || portals.includes(newPortal)) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
setParams({
|
|
87
|
-
...params,
|
|
88
|
-
portalsWithAccess: [...portals, newPortal.trim()].filter(Boolean),
|
|
89
|
-
});
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const removePortal = (portal) => {
|
|
93
|
-
const portals = params.portalsWithAccess || [];
|
|
94
|
-
|
|
95
|
-
setParams({
|
|
96
|
-
...params,
|
|
97
|
-
portalsWithAccess: portals.filter(v => v !== portal),
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
return (
|
|
102
|
-
<Workbench className={css({
|
|
103
|
-
padding: '80px',
|
|
104
|
-
backgroundColor: "#FFF",
|
|
105
|
-
})}>
|
|
106
|
-
<Form>
|
|
107
|
-
<FormControl>
|
|
108
|
-
<FormControl.Label>Teasermanager Portale mit Zugriffsbeschränkung</FormControl.Label>
|
|
109
|
-
<Flex flexDirection="column" gap={"spacingM"}>
|
|
110
|
-
<Flex flexDirection="row" gap={"spacingM"}>
|
|
111
|
-
<TextInput name="newPortal"/>
|
|
112
|
-
<Button onClick={addPortal} variant="positive">Portal hinzufügen</Button>
|
|
113
|
-
</Flex>
|
|
114
|
-
<Flex flexDirection="column" gap={"spacingM"}>
|
|
115
|
-
{params.portalsWithAccess?.map((portal) => {
|
|
116
|
-
return <Flex flexDirection="row" gap={"spacingM"} key={portal}>
|
|
117
|
-
<Subheading style={{width: "200px"}}>{portal}</Subheading>
|
|
118
|
-
<Button
|
|
119
|
-
variant="negative"
|
|
120
|
-
key={portal}
|
|
121
|
-
onClick={e => removePortal(portal)}>Löschen</Button>
|
|
122
|
-
</Flex>;
|
|
123
|
-
})}
|
|
124
|
-
</Flex>
|
|
125
|
-
</Flex>
|
|
126
|
-
</FormControl>
|
|
127
|
-
{params.portalsWithAccess?.map((portal) => {
|
|
128
|
-
return <FormControl key={portal}>
|
|
129
|
-
<FormControl.Label>{portal} Teasermanager Benutzer</FormControl.Label>
|
|
130
|
-
<Multiselect
|
|
131
|
-
currentSelection={params.usersWithAccess?.[portal]}
|
|
132
|
-
popoverProps={{isFullWidth: true}}
|
|
133
|
-
>
|
|
134
|
-
{spaceUsers.map((userEmail) => {
|
|
135
|
-
const val = userEmail.toLowerCase().replace(/\s/g, '-');
|
|
136
|
-
return (
|
|
137
|
-
<Multiselect.Option
|
|
138
|
-
key={`user-${val}}`}
|
|
139
|
-
itemId={`user-${portal}-${val}}`}
|
|
140
|
-
value={userEmail}
|
|
141
|
-
label={userEmail}
|
|
142
|
-
onSelectItem={e => handleSelectItem(e, portal)}
|
|
143
|
-
isChecked={params.usersWithAccess?.[portal]?.includes(userEmail)}
|
|
144
|
-
/>
|
|
145
|
-
);
|
|
146
|
-
})}
|
|
147
|
-
</Multiselect>
|
|
148
|
-
</FormControl>;
|
|
149
|
-
})}
|
|
150
|
-
</Form>
|
|
151
|
-
</Workbench>
|
|
152
|
-
);
|
|
153
|
-
};
|
|
154
|
-
|
|
1
|
+
import React, {
|
|
2
|
+
useEffect, useState,
|
|
3
|
+
} from 'react';
|
|
4
|
+
import {
|
|
5
|
+
Form, Workbench,
|
|
6
|
+
} from '@contentful/forma-36-react-components';
|
|
7
|
+
import {
|
|
8
|
+
Button, Flex,
|
|
9
|
+
FormControl, Subheading, TextInput,
|
|
10
|
+
} from '@contentful/f36-components';
|
|
11
|
+
import {Multiselect} from '@contentful/f36-multiselect';
|
|
12
|
+
import {css} from 'emotion';
|
|
13
|
+
|
|
14
|
+
const Config = ({sdk}) => {
|
|
15
|
+
const [params, setParams] = useState({
|
|
16
|
+
usersWithAccess: {},
|
|
17
|
+
portalsWithAccess: [],
|
|
18
|
+
});
|
|
19
|
+
const [spaceUsers, setSpaceUsers] = useState([]);
|
|
20
|
+
|
|
21
|
+
const onConfigure = async () => {
|
|
22
|
+
const currentState = await sdk.app.getCurrentState();
|
|
23
|
+
|
|
24
|
+
return {
|
|
25
|
+
parameters: params,
|
|
26
|
+
targetState: currentState,
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (sdk) {
|
|
32
|
+
sdk.app.getParameters().then(params => {
|
|
33
|
+
if (!params) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (Array.isArray(params?.usersWithAccess)) {
|
|
38
|
+
params.usersWithAccess = {};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
setParams(params);
|
|
42
|
+
sdk.app.setReady();
|
|
43
|
+
});
|
|
44
|
+
sdk.space.getUsers().then(users => {
|
|
45
|
+
setSpaceUsers(users.items.map(v => v.email));
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}, [sdk]);
|
|
49
|
+
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (sdk) {
|
|
52
|
+
sdk.app.onConfigure(() => onConfigure());
|
|
53
|
+
}
|
|
54
|
+
}, [sdk, params]);
|
|
55
|
+
|
|
56
|
+
const handleSelectItem = (event, portal) => {
|
|
57
|
+
const {
|
|
58
|
+
checked,
|
|
59
|
+
value,
|
|
60
|
+
} = event.target;
|
|
61
|
+
|
|
62
|
+
let newValue = params?.usersWithAccess?.[portal] || [];
|
|
63
|
+
if (checked) {
|
|
64
|
+
newValue = [...newValue, value];
|
|
65
|
+
} else {
|
|
66
|
+
newValue = newValue.filter((email) => email !== value);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
setParams({
|
|
70
|
+
...params,
|
|
71
|
+
usersWithAccess: {
|
|
72
|
+
...(params.usersWithAccess || {}),
|
|
73
|
+
[portal]: newValue,
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const addPortal = () => {
|
|
79
|
+
const newPortal = document.getElementsByName("newPortal")[0].value;
|
|
80
|
+
const portals = params.portalsWithAccess || [];
|
|
81
|
+
|
|
82
|
+
if (!newPortal || portals.includes(newPortal)) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
setParams({
|
|
87
|
+
...params,
|
|
88
|
+
portalsWithAccess: [...portals, newPortal.trim()].filter(Boolean),
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
const removePortal = (portal) => {
|
|
93
|
+
const portals = params.portalsWithAccess || [];
|
|
94
|
+
|
|
95
|
+
setParams({
|
|
96
|
+
...params,
|
|
97
|
+
portalsWithAccess: portals.filter(v => v !== portal),
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<Workbench className={css({
|
|
103
|
+
padding: '80px',
|
|
104
|
+
backgroundColor: "#FFF",
|
|
105
|
+
})}>
|
|
106
|
+
<Form>
|
|
107
|
+
<FormControl>
|
|
108
|
+
<FormControl.Label>Teasermanager Portale mit Zugriffsbeschränkung</FormControl.Label>
|
|
109
|
+
<Flex flexDirection="column" gap={"spacingM"}>
|
|
110
|
+
<Flex flexDirection="row" gap={"spacingM"}>
|
|
111
|
+
<TextInput name="newPortal"/>
|
|
112
|
+
<Button onClick={addPortal} variant="positive">Portal hinzufügen</Button>
|
|
113
|
+
</Flex>
|
|
114
|
+
<Flex flexDirection="column" gap={"spacingM"}>
|
|
115
|
+
{params.portalsWithAccess?.map((portal) => {
|
|
116
|
+
return <Flex flexDirection="row" gap={"spacingM"} key={portal}>
|
|
117
|
+
<Subheading style={{width: "200px"}}>{portal}</Subheading>
|
|
118
|
+
<Button
|
|
119
|
+
variant="negative"
|
|
120
|
+
key={portal}
|
|
121
|
+
onClick={e => removePortal(portal)}>Löschen</Button>
|
|
122
|
+
</Flex>;
|
|
123
|
+
})}
|
|
124
|
+
</Flex>
|
|
125
|
+
</Flex>
|
|
126
|
+
</FormControl>
|
|
127
|
+
{params.portalsWithAccess?.map((portal) => {
|
|
128
|
+
return <FormControl key={portal}>
|
|
129
|
+
<FormControl.Label>{portal} Teasermanager Benutzer</FormControl.Label>
|
|
130
|
+
<Multiselect
|
|
131
|
+
currentSelection={params.usersWithAccess?.[portal]}
|
|
132
|
+
popoverProps={{isFullWidth: true}}
|
|
133
|
+
>
|
|
134
|
+
{spaceUsers.map((userEmail) => {
|
|
135
|
+
const val = userEmail.toLowerCase().replace(/\s/g, '-');
|
|
136
|
+
return (
|
|
137
|
+
<Multiselect.Option
|
|
138
|
+
key={`user-${val}}`}
|
|
139
|
+
itemId={`user-${portal}-${val}}`}
|
|
140
|
+
value={userEmail}
|
|
141
|
+
label={userEmail}
|
|
142
|
+
onSelectItem={e => handleSelectItem(e, portal)}
|
|
143
|
+
isChecked={params.usersWithAccess?.[portal]?.includes(userEmail)}
|
|
144
|
+
/>
|
|
145
|
+
);
|
|
146
|
+
})}
|
|
147
|
+
</Multiselect>
|
|
148
|
+
</FormControl>;
|
|
149
|
+
})}
|
|
150
|
+
</Form>
|
|
151
|
+
</Workbench>
|
|
152
|
+
);
|
|
153
|
+
};
|
|
154
|
+
|
|
155
155
|
export default Config;
|