@selfcommunity/react-ui 0.8.0-alpha.3 → 0.8.0-alpha.31
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/lib/cjs/components/BottomNavigation/BottomNavigation.js +11 -2
- package/lib/cjs/components/Composer/Composer.js +10 -2
- package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.js +12 -3
- package/lib/cjs/components/CreateEventButton/CreateEventButton.js +5 -1
- package/lib/cjs/components/CreateEventWidget/CreateEventWidget.js +5 -1
- package/lib/cjs/components/EventForm/EventForm.d.ts +1 -1
- package/lib/cjs/components/EventForm/EventForm.js +72 -54
- package/lib/cjs/components/EventForm/constants.d.ts +4 -0
- package/lib/cjs/components/EventForm/constants.js +5 -1
- package/lib/cjs/components/EventForm/types.d.ts +1 -2
- package/lib/cjs/components/EventForm/utils.d.ts +4 -0
- package/lib/cjs/components/EventForm/utils.js +28 -0
- package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js +24 -1
- package/lib/cjs/components/Events/Events.js +17 -7
- package/lib/cjs/components/Events/LocationEventsFilter.d.ts +14 -0
- package/lib/cjs/components/Events/LocationEventsFilter.js +45 -0
- package/lib/cjs/components/Events/PastEventsFilter.js +1 -2
- package/lib/cjs/components/Feed/Feed.js +12 -3
- package/lib/cjs/components/GroupActionsMenu/index.d.ts +57 -0
- package/lib/cjs/components/GroupActionsMenu/index.js +157 -0
- package/lib/cjs/components/GroupHeader/GroupHeader.d.ts +6 -0
- package/lib/cjs/components/GroupHeader/GroupHeader.js +8 -4
- package/lib/cjs/components/Groups/Groups.js +26 -0
- package/lib/cjs/components/MyEventsWidget/MyEventsWidget.js +6 -2
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +35 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +68 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.js +8 -27
- package/lib/cjs/components/NavigationMenuIconButton/index.d.ts +2 -1
- package/lib/cjs/components/NavigationMenuIconButton/index.js +3 -1
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +14 -5
- package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js +11 -2
- package/lib/cjs/components/Notification/Event/Event.js +4 -0
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts +10 -1
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +69 -26
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +8 -4
- package/lib/cjs/components/OnBoardingWidget/Steps/Invite/Invite.js +56 -12
- package/lib/cjs/components/PlatformWidget/constants.d.ts +0 -4
- package/lib/cjs/components/PlatformWidget/constants.js +1 -5
- package/lib/cjs/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js +7 -2
- package/lib/cjs/constants/GroupActionsMenu.d.ts +5 -0
- package/lib/cjs/constants/GroupActionsMenu.js +8 -0
- package/lib/cjs/constants/PubSub.d.ts +16 -1
- package/lib/cjs/constants/PubSub.js +11 -1
- package/lib/cjs/index.d.ts +4 -2
- package/lib/cjs/index.js +12 -5
- package/lib/cjs/shared/ContributionActionsMenu/index.js +6 -6
- package/lib/cjs/shared/InfiniteScroll/index.js +3 -3
- package/lib/cjs/shared/Media/Link/DisplayComponent.js +21 -5
- package/lib/cjs/utils/formatRelativeTime.js +2 -2
- package/lib/esm/components/BottomNavigation/BottomNavigation.js +11 -2
- package/lib/esm/components/Composer/Composer.js +10 -2
- package/lib/esm/components/Composer/Layer/AudienceLayer/AudienceLayer.js +13 -4
- package/lib/esm/components/CreateEventButton/CreateEventButton.js +5 -1
- package/lib/esm/components/CreateEventWidget/CreateEventWidget.js +5 -1
- package/lib/esm/components/EventForm/EventForm.d.ts +1 -1
- package/lib/esm/components/EventForm/EventForm.js +74 -56
- package/lib/esm/components/EventForm/constants.d.ts +4 -0
- package/lib/esm/components/EventForm/constants.js +4 -0
- package/lib/esm/components/EventForm/types.d.ts +1 -2
- package/lib/esm/components/EventForm/utils.d.ts +4 -0
- package/lib/esm/components/EventForm/utils.js +21 -0
- package/lib/esm/components/EventInfoWidget/EventInfoWidget.js +25 -2
- package/lib/esm/components/Events/Events.js +18 -8
- package/lib/esm/components/Events/LocationEventsFilter.d.ts +14 -0
- package/lib/esm/components/Events/LocationEventsFilter.js +41 -0
- package/lib/esm/components/Events/PastEventsFilter.js +1 -2
- package/lib/esm/components/Feed/Feed.js +14 -5
- package/lib/esm/components/GroupActionsMenu/index.d.ts +57 -0
- package/lib/esm/components/GroupActionsMenu/index.js +154 -0
- package/lib/esm/components/GroupHeader/GroupHeader.d.ts +6 -0
- package/lib/esm/components/GroupHeader/GroupHeader.js +9 -5
- package/lib/esm/components/Groups/Groups.js +27 -1
- package/lib/esm/components/MyEventsWidget/MyEventsWidget.js +7 -3
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +35 -0
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +65 -0
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js +11 -30
- package/lib/esm/components/NavigationMenuIconButton/index.d.ts +2 -1
- package/lib/esm/components/NavigationMenuIconButton/index.js +2 -1
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +14 -5
- package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js +11 -2
- package/lib/esm/components/Notification/Event/Event.js +4 -0
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts +10 -1
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +71 -28
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +9 -5
- package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.js +59 -14
- package/lib/esm/components/PlatformWidget/constants.d.ts +0 -4
- package/lib/esm/components/PlatformWidget/constants.js +0 -4
- package/lib/esm/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js +8 -3
- package/lib/esm/constants/GroupActionsMenu.d.ts +5 -0
- package/lib/esm/constants/GroupActionsMenu.js +5 -0
- package/lib/esm/constants/PubSub.d.ts +16 -1
- package/lib/esm/constants/PubSub.js +10 -0
- package/lib/esm/index.d.ts +4 -2
- package/lib/esm/index.js +5 -3
- package/lib/esm/shared/ContributionActionsMenu/index.js +6 -6
- package/lib/esm/shared/InfiniteScroll/index.js +3 -3
- package/lib/esm/shared/Media/Link/DisplayComponent.js +21 -5
- package/lib/esm/utils/formatRelativeTime.js +2 -2
- package/lib/umd/148.js +2 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
- package/lib/umd/99.js +0 -2
- /package/lib/umd/{99.js.LICENSE.txt → 148.js.LICENSE.txt} +0 -0
|
@@ -63,8 +63,17 @@ function BottomNavigation(inProps) {
|
|
|
63
63
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
64
64
|
// MEMO
|
|
65
65
|
const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
|
|
66
|
-
const groupsEnabled = (0, react_1.useMemo)(() =>
|
|
67
|
-
|
|
66
|
+
const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
67
|
+
features &&
|
|
68
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
69
|
+
features.includes(types_1.SCFeatureName.GROUPING) &&
|
|
70
|
+
react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
|
|
71
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
|
|
72
|
+
const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
73
|
+
features &&
|
|
74
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
75
|
+
react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
|
|
76
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
|
|
68
77
|
const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
|
|
69
78
|
const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
|
|
70
79
|
const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
|
|
@@ -430,10 +430,16 @@ function Composer(inProps) {
|
|
|
430
430
|
if (features.includes(types_1.SCFeatureName.TAGGING) && addressing !== null) {
|
|
431
431
|
data.addressing = addressing.map((t) => t.id);
|
|
432
432
|
}
|
|
433
|
-
if (features.includes(types_1.SCFeatureName.
|
|
433
|
+
if (features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
434
|
+
features.includes(types_1.SCFeatureName.GROUPING) &&
|
|
435
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value &&
|
|
436
|
+
group !== null) {
|
|
434
437
|
data.group = group.id;
|
|
435
438
|
}
|
|
436
|
-
if (features.includes(types_1.SCFeatureName.
|
|
439
|
+
if (features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
440
|
+
features.includes(types_1.SCFeatureName.EVENT) &&
|
|
441
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value &&
|
|
442
|
+
event !== null) {
|
|
437
443
|
data.event = event.id;
|
|
438
444
|
}
|
|
439
445
|
setIsSubmitting(true);
|
|
@@ -497,6 +503,8 @@ function Composer(inProps) {
|
|
|
497
503
|
}
|
|
498
504
|
else {
|
|
499
505
|
onClose && onClose(e);
|
|
506
|
+
setLayer(null);
|
|
507
|
+
dispatch({ type: 'reset' });
|
|
500
508
|
/*setLayer(null);
|
|
501
509
|
feedType && feedType === SCFeedTypologyType.CATEGORY
|
|
502
510
|
? dispatch({type: 'resetCategoryFeed'})
|
|
@@ -60,10 +60,19 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
|
|
|
60
60
|
const [value, setValue] = (0, react_1.useState)(defaultValue || undefined);
|
|
61
61
|
// HOOKS
|
|
62
62
|
const { scAddressingTags } = (0, react_core_1.useSCFetchAddressingTagList)({ fetch: autocompleteOpen });
|
|
63
|
-
const { features } = (0, react_core_1.useSCPreferences)();
|
|
63
|
+
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
64
64
|
// MEMO
|
|
65
|
-
const
|
|
66
|
-
|
|
65
|
+
const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
66
|
+
features &&
|
|
67
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
68
|
+
features.includes(types_1.SCFeatureName.GROUPING) &&
|
|
69
|
+
react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
|
|
70
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
|
|
71
|
+
const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
72
|
+
features &&
|
|
73
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
74
|
+
react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
|
|
75
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
|
|
67
76
|
// HANDLERS
|
|
68
77
|
const handleSave = (0, react_1.useCallback)(() => {
|
|
69
78
|
audience === AudienceTypes.AUDIENCE_GROUP || audience === AudienceTypes.AUDIENCE_EVENT
|
|
@@ -54,7 +54,11 @@ function CreateEventButton(inProps) {
|
|
|
54
54
|
// CONST
|
|
55
55
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
56
56
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
57
|
-
const eventsEnabled = (0, react_1.useMemo)(() =>
|
|
57
|
+
const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
58
|
+
features &&
|
|
59
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
60
|
+
react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
|
|
61
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
|
|
58
62
|
const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
|
|
59
63
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
60
64
|
// @ts-ignore
|
|
@@ -40,7 +40,11 @@ function CreateEventWidget(inProps) {
|
|
|
40
40
|
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
|
|
41
41
|
// HOOK
|
|
42
42
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
43
|
-
const eventsEnabled = (0, react_1.useMemo)(() =>
|
|
43
|
+
const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
44
|
+
features &&
|
|
45
|
+
features.includes(types_1.SCFeatureName.TAGGING) &&
|
|
46
|
+
react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
|
|
47
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
|
|
44
48
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
45
49
|
const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
|
|
46
50
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
@@ -25,6 +25,7 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"))
|
|
|
25
25
|
const constants_1 = require("./constants");
|
|
26
26
|
const EventAddress_1 = tslib_1.__importDefault(require("./EventAddress"));
|
|
27
27
|
const UploadEventCover_1 = tslib_1.__importDefault(require("./UploadEventCover"));
|
|
28
|
+
const utils_2 = require("./utils");
|
|
28
29
|
const messages = (0, react_intl_1.defineMessages)({
|
|
29
30
|
name: {
|
|
30
31
|
id: 'ui.eventForm.name.placeholder',
|
|
@@ -113,7 +114,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
|
113
114
|
* @param inProps
|
|
114
115
|
*/
|
|
115
116
|
function EventForm(inProps) {
|
|
116
|
-
var _a, _b, _c, _d
|
|
117
|
+
var _a, _b, _c, _d;
|
|
117
118
|
//PROPS
|
|
118
119
|
const props = (0, system_1.useThemeProps)({
|
|
119
120
|
props: inProps,
|
|
@@ -124,13 +125,15 @@ function EventForm(inProps) {
|
|
|
124
125
|
const scContext = (0, react_core_1.useSCContext)();
|
|
125
126
|
// INTL
|
|
126
127
|
const intl = (0, react_intl_1.useIntl)();
|
|
128
|
+
const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
|
|
129
|
+
const endDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.end_date), [event]);
|
|
127
130
|
const initialFieldState = {
|
|
128
131
|
imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
|
|
129
|
-
imageOriginalFile:
|
|
130
|
-
startDate: event ?
|
|
131
|
-
startTime: event ?
|
|
132
|
-
endDate: (event === null || event === void 0 ? void 0 : event.end_date) ?
|
|
133
|
-
endTime: (event === null || event === void 0 ? void 0 : event.end_date) ?
|
|
132
|
+
imageOriginalFile: '',
|
|
133
|
+
startDate: event ? startDateTime : (0, utils_2.getNewDate)(),
|
|
134
|
+
startTime: event ? startDateTime : (0, utils_2.getLaterHoursDate)(1),
|
|
135
|
+
endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getNewDate)(),
|
|
136
|
+
endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getLaterHoursDate)(3),
|
|
134
137
|
location: (event === null || event === void 0 ? void 0 : event.location) || types_1.SCEventLocationType.PERSON,
|
|
135
138
|
geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
|
|
136
139
|
lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
|
|
@@ -140,8 +143,7 @@ function EventForm(inProps) {
|
|
|
140
143
|
name: (event === null || event === void 0 ? void 0 : event.name) || '',
|
|
141
144
|
description: event ? event.description : '',
|
|
142
145
|
isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
|
|
143
|
-
isSubmitting: false
|
|
144
|
-
showEndDateTime: (_b = !!(event === null || event === void 0 ? void 0 : event.end_date)) !== null && _b !== void 0 ? _b : false
|
|
146
|
+
isSubmitting: false
|
|
145
147
|
};
|
|
146
148
|
// STATE
|
|
147
149
|
const [field, setField] = (0, react_1.useState)(initialFieldState);
|
|
@@ -150,23 +152,12 @@ function EventForm(inProps) {
|
|
|
150
152
|
const scPreferences = (0, react_core_1.useSCPreferences)();
|
|
151
153
|
const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
|
|
152
154
|
const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
|
|
153
|
-
const disablePastStartTime = (0, react_1.useMemo)(() =>
|
|
154
|
-
const disablePastEndTime = (0, react_1.useMemo)(() =>
|
|
155
|
+
const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
|
|
156
|
+
const disablePastEndTime = (0, react_1.useMemo)(() => field.endDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
|
|
155
157
|
const _backgroundCover = Object.assign({}, (field.imageOriginal
|
|
156
158
|
? { background: `url('${field.imageOriginal}') center / cover` }
|
|
157
159
|
: { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
158
|
-
const
|
|
159
|
-
if (date && time) {
|
|
160
|
-
const combined = new Date(date);
|
|
161
|
-
combined.setHours(time.getHours());
|
|
162
|
-
combined.setMinutes(time.getMinutes());
|
|
163
|
-
combined.setSeconds(time.getSeconds());
|
|
164
|
-
combined.setMilliseconds(time.getMilliseconds());
|
|
165
|
-
return combined.toISOString();
|
|
166
|
-
}
|
|
167
|
-
return null;
|
|
168
|
-
};
|
|
169
|
-
function handleChangeCover(cover) {
|
|
160
|
+
const handleChangeCover = (0, react_1.useCallback)((cover) => {
|
|
170
161
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
|
|
171
162
|
const reader = new FileReader();
|
|
172
163
|
reader.onloadend = () => {
|
|
@@ -177,43 +168,39 @@ function EventForm(inProps) {
|
|
|
177
168
|
delete error.imageOriginalError;
|
|
178
169
|
setError(error);
|
|
179
170
|
}
|
|
180
|
-
}
|
|
171
|
+
}, [error]);
|
|
181
172
|
/**
|
|
182
173
|
* Notify when a group info changed
|
|
183
174
|
* @param data
|
|
184
175
|
*/
|
|
185
|
-
|
|
186
|
-
if (
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, data);
|
|
190
|
-
}
|
|
191
|
-
else {
|
|
192
|
-
// Create group
|
|
193
|
-
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.CREATE}`, data);
|
|
194
|
-
}
|
|
176
|
+
const notifyChanges = (0, react_1.useCallback)((data) => {
|
|
177
|
+
if (event) {
|
|
178
|
+
// Edit group
|
|
179
|
+
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, data);
|
|
195
180
|
}
|
|
196
|
-
|
|
197
|
-
|
|
181
|
+
else {
|
|
182
|
+
// Create group
|
|
183
|
+
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.CREATE}`, data);
|
|
184
|
+
}
|
|
185
|
+
}, [event]);
|
|
186
|
+
const handleGeoData = (0, react_1.useCallback)((data) => {
|
|
198
187
|
setField((prev) => (Object.assign(Object.assign({}, prev), data)));
|
|
199
|
-
};
|
|
200
|
-
const handleSubmit = () => {
|
|
188
|
+
}, []);
|
|
189
|
+
const handleSubmit = (0, react_1.useCallback)(() => {
|
|
201
190
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
|
|
202
191
|
const formData = new FormData();
|
|
203
192
|
if (field.imageOriginalFile) {
|
|
204
193
|
formData.append('image_original', field.imageOriginalFile);
|
|
205
194
|
}
|
|
206
195
|
formData.append('name', field.name);
|
|
207
|
-
formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
|
|
196
|
+
formData.append('start_date', (0, utils_2.combineDateAndTime)(field.startDate, field.startTime));
|
|
208
197
|
formData.append('recurring', field.recurring);
|
|
209
|
-
|
|
210
|
-
formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
|
|
211
|
-
}
|
|
198
|
+
formData.append('end_date', (0, utils_2.combineDateAndTime)(field.endDate, field.endTime));
|
|
212
199
|
formData.append('location', field.location);
|
|
213
200
|
if (field.location === types_1.SCEventLocationType.ONLINE) {
|
|
214
201
|
formData.append('link', field.link);
|
|
215
202
|
}
|
|
216
|
-
if (field.location === types_1.SCEventLocationType.PERSON) {
|
|
203
|
+
else if (field.location === types_1.SCEventLocationType.PERSON) {
|
|
217
204
|
formData.append('geolocation', field.geolocation);
|
|
218
205
|
formData.append('geolocation_lat', field.lat.toString());
|
|
219
206
|
formData.append('geolocation_lng', field.lng.toString());
|
|
@@ -252,28 +239,56 @@ function EventForm(inProps) {
|
|
|
252
239
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
|
|
253
240
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
254
241
|
});
|
|
255
|
-
};
|
|
256
|
-
const handleChange = (event) => {
|
|
242
|
+
}, [field, privateEnabled, visibilityEnabled]);
|
|
243
|
+
const handleChange = (0, react_1.useCallback)((event) => {
|
|
257
244
|
const { name, value } = event.target;
|
|
258
245
|
setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
|
|
259
246
|
if (error[`${name}Error`]) {
|
|
260
247
|
delete error[`${name}Error`];
|
|
261
248
|
setError(error);
|
|
262
249
|
}
|
|
263
|
-
};
|
|
264
|
-
const handleChangeDateTime = (value, name) => {
|
|
250
|
+
}, [error]);
|
|
251
|
+
const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
|
|
265
252
|
setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
|
|
266
253
|
if (error[`${name}Error`]) {
|
|
267
254
|
delete error[`${name}Error`];
|
|
268
255
|
setError(error);
|
|
269
256
|
}
|
|
270
|
-
|
|
257
|
+
else if (error['endDateError']) {
|
|
258
|
+
delete error['endDateError'];
|
|
259
|
+
setError(error);
|
|
260
|
+
}
|
|
261
|
+
}, [error]);
|
|
262
|
+
const shouldDisabledDate = (0, react_1.useCallback)((date) => {
|
|
263
|
+
let disabled = false;
|
|
264
|
+
switch (field.recurring) {
|
|
265
|
+
case types_1.SCEventRecurrenceType.DAILY:
|
|
266
|
+
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.DAILY_LATER_DAYS).getTime();
|
|
267
|
+
break;
|
|
268
|
+
case types_1.SCEventRecurrenceType.WEEKLY:
|
|
269
|
+
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.WEEKLY_LATER_DAYS).getTime();
|
|
270
|
+
break;
|
|
271
|
+
case types_1.SCEventRecurrenceType.MONTHLY:
|
|
272
|
+
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.MONTHLY_LATER_DAYS).getTime();
|
|
273
|
+
break;
|
|
274
|
+
case types_1.SCEventRecurrenceType.NEVER:
|
|
275
|
+
default:
|
|
276
|
+
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.NEVER_LATER_DAYS).getTime();
|
|
277
|
+
}
|
|
278
|
+
if (field.startDate.getDate() > date.getDate()) {
|
|
279
|
+
disabled = true;
|
|
280
|
+
}
|
|
281
|
+
return disabled;
|
|
282
|
+
}, [field]);
|
|
283
|
+
const shouldDisabledTime = (0, react_1.useCallback)((date, _view) => field.startTime.getTime() > date.getTime(), [field]);
|
|
271
284
|
/**
|
|
272
285
|
* Renders root object
|
|
273
286
|
*/
|
|
274
287
|
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
|
|
275
288
|
!field.startDate ||
|
|
276
289
|
!field.startTime ||
|
|
290
|
+
!field.endDate ||
|
|
291
|
+
!field.endTime ||
|
|
277
292
|
(field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
|
|
278
293
|
(field.location === types_1.SCEventLocationType.PERSON && !field.geolocation) ||
|
|
279
294
|
(field.recurring !== types_1.SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
|
|
@@ -281,7 +296,7 @@ function EventForm(inProps) {
|
|
|
281
296
|
field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
|
|
282
297
|
field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
|
|
283
298
|
endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
|
|
284
|
-
}, error: Boolean(
|
|
299
|
+
}, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
|
|
285
300
|
textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
|
|
286
301
|
}, slotProps: {
|
|
287
302
|
toolbar: {
|
|
@@ -302,11 +317,14 @@ function EventForm(inProps) {
|
|
|
302
317
|
return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
|
|
303
318
|
}
|
|
304
319
|
return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
|
|
305
|
-
}, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (
|
|
320
|
+
}, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
|
|
306
321
|
textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
|
|
307
|
-
}, onChange: (value) => handleChangeDateTime(value, 'endDate') }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
|
|
308
|
-
textField: (params) =>
|
|
309
|
-
|
|
322
|
+
}, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
|
|
323
|
+
textField: (params) => {
|
|
324
|
+
var _a;
|
|
325
|
+
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
|
|
326
|
+
}
|
|
327
|
+
}, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
|
|
310
328
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
311
329
|
// @ts-ignore
|
|
312
330
|
b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
|
|
@@ -315,7 +333,7 @@ function EventForm(inProps) {
|
|
|
315
333
|
// @ts-ignore
|
|
316
334
|
b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
|
|
317
335
|
} })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
|
|
318
|
-
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((
|
|
319
|
-
}, error: Boolean(((
|
|
336
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
|
|
337
|
+
}, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
|
|
320
338
|
}
|
|
321
339
|
exports.default = EventForm;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PREFIX = void 0;
|
|
3
|
+
exports.MONTHLY_LATER_DAYS = exports.WEEKLY_LATER_DAYS = exports.DAILY_LATER_DAYS = exports.NEVER_LATER_DAYS = exports.PREFIX = void 0;
|
|
4
4
|
exports.PREFIX = 'SCEventForm';
|
|
5
|
+
exports.NEVER_LATER_DAYS = 14;
|
|
6
|
+
exports.DAILY_LATER_DAYS = 60;
|
|
7
|
+
exports.WEEKLY_LATER_DAYS = 360;
|
|
8
|
+
exports.MONTHLY_LATER_DAYS = 730;
|
|
@@ -12,7 +12,7 @@ export declare type Geolocation = {
|
|
|
12
12
|
};
|
|
13
13
|
export declare type InitialFieldState = Geolocation & {
|
|
14
14
|
imageOriginal: string | ArrayBuffer;
|
|
15
|
-
imageOriginalFile: Blob;
|
|
15
|
+
imageOriginalFile: string | Blob;
|
|
16
16
|
startDate: Date | null;
|
|
17
17
|
startTime: Date | null;
|
|
18
18
|
endDate: Date | null;
|
|
@@ -22,7 +22,6 @@ export declare type InitialFieldState = Geolocation & {
|
|
|
22
22
|
description: string;
|
|
23
23
|
isPublic: boolean;
|
|
24
24
|
isSubmitting: boolean;
|
|
25
|
-
showEndDateTime: boolean;
|
|
26
25
|
};
|
|
27
26
|
export declare type FieldStateKeys = keyof InitialFieldState;
|
|
28
27
|
export declare type FieldStateValues = InitialFieldState[FieldStateKeys];
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.combineDateAndTime = exports.getLaterDaysDate = exports.getLaterHoursDate = exports.getNewDate = void 0;
|
|
4
|
+
const date_fns_1 = require("date-fns");
|
|
5
|
+
function getNewDate(date) {
|
|
6
|
+
if (date) {
|
|
7
|
+
return new Date(date);
|
|
8
|
+
}
|
|
9
|
+
return new Date();
|
|
10
|
+
}
|
|
11
|
+
exports.getNewDate = getNewDate;
|
|
12
|
+
function getLaterHoursDate(h) {
|
|
13
|
+
return (0, date_fns_1.addHours)(getNewDate(), h);
|
|
14
|
+
}
|
|
15
|
+
exports.getLaterHoursDate = getLaterHoursDate;
|
|
16
|
+
function getLaterDaysDate(d) {
|
|
17
|
+
return (0, date_fns_1.addDays)(getNewDate(), d);
|
|
18
|
+
}
|
|
19
|
+
exports.getLaterDaysDate = getLaterDaysDate;
|
|
20
|
+
const combineDateAndTime = (date, time) => {
|
|
21
|
+
const combined = date;
|
|
22
|
+
combined.setHours(time.getHours());
|
|
23
|
+
combined.setMinutes(time.getMinutes());
|
|
24
|
+
combined.setSeconds(time.getSeconds());
|
|
25
|
+
combined.setMilliseconds(time.getMilliseconds());
|
|
26
|
+
return combined.toISOString();
|
|
27
|
+
};
|
|
28
|
+
exports.combineDateAndTime = combineDateAndTime;
|
|
@@ -12,6 +12,8 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
|
|
|
12
12
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
13
13
|
const constants_1 = require("./constants");
|
|
14
14
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
15
|
+
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
|
|
16
|
+
const PubSub_1 = require("../../constants/PubSub");
|
|
15
17
|
const classes = {
|
|
16
18
|
root: `${constants_1.PREFIX}-root`,
|
|
17
19
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -45,7 +47,9 @@ function EventInfoWidget(inProps) {
|
|
|
45
47
|
const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
|
|
46
48
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
47
49
|
// HOOKS
|
|
48
|
-
const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
50
|
+
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
51
|
+
// REFS
|
|
52
|
+
const updatesSubscription = (0, react_1.useRef)(null);
|
|
49
53
|
(0, react_1.useEffect)(() => {
|
|
50
54
|
setLoading(false);
|
|
51
55
|
}, []);
|
|
@@ -67,6 +71,25 @@ function EventInfoWidget(inProps) {
|
|
|
67
71
|
const showInfo = (0, react_1.useMemo)(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC ||
|
|
68
72
|
[types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
|
|
69
73
|
const description = (0, react_1.useMemo)(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
|
|
74
|
+
/**
|
|
75
|
+
* Subscriber for pubsub callback
|
|
76
|
+
*/
|
|
77
|
+
const onChangeGroupHandler = (0, react_1.useCallback)((_msg, data) => {
|
|
78
|
+
if (data && scEvent.id === data.id) {
|
|
79
|
+
setSCEvent(data);
|
|
80
|
+
}
|
|
81
|
+
}, [scEvent, setSCEvent]);
|
|
82
|
+
/**
|
|
83
|
+
* On mount, subscribe to receive groups updates (only edit)
|
|
84
|
+
*/
|
|
85
|
+
(0, react_1.useEffect)(() => {
|
|
86
|
+
if (scEvent) {
|
|
87
|
+
updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, onChangeGroupHandler);
|
|
88
|
+
}
|
|
89
|
+
return () => {
|
|
90
|
+
updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
|
|
91
|
+
};
|
|
92
|
+
}, [scEvent]);
|
|
70
93
|
// RENDER
|
|
71
94
|
if (!scEvent && loading) {
|
|
72
95
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
@@ -22,6 +22,7 @@ const constants_1 = require("./constants");
|
|
|
22
22
|
const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
|
|
23
23
|
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
|
|
24
24
|
const PubSub_1 = require("../../constants/PubSub");
|
|
25
|
+
const LocationEventsFilter_1 = tslib_1.__importDefault(require("./LocationEventsFilter"));
|
|
25
26
|
const classes = {
|
|
26
27
|
root: `${constants_1.PREFIX}-root`,
|
|
27
28
|
filters: `${constants_1.PREFIX}-filters`,
|
|
@@ -89,6 +90,7 @@ function Events(inProps) {
|
|
|
89
90
|
const [next, setNext] = (0, react_1.useState)(null);
|
|
90
91
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
91
92
|
const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
|
|
93
|
+
const [location, setLocation] = (0, react_1.useState)(types_1.SCEventLocationFilterType.ANY);
|
|
92
94
|
const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
|
|
93
95
|
const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
|
|
94
96
|
const [showMyEvents, setShowMyEvents] = (0, react_1.useState)(false);
|
|
@@ -128,7 +130,7 @@ function Events(inProps) {
|
|
|
128
130
|
url: endpoint.url({}),
|
|
129
131
|
method: endpoint.method,
|
|
130
132
|
params: Object.assign(Object.assign({}, endpointQueryParams), (general
|
|
131
|
-
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
|
|
133
|
+
? Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (location !== types_1.SCEventLocationFilterType.ANY && { location })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (location !== types_1.SCEventLocationFilterType.ANY && { location })), (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
|
|
132
134
|
})
|
|
133
135
|
.then((res) => {
|
|
134
136
|
setEvents(res.data.results);
|
|
@@ -149,7 +151,7 @@ function Events(inProps) {
|
|
|
149
151
|
else {
|
|
150
152
|
query === '' && fetchEvents();
|
|
151
153
|
}
|
|
152
|
-
}, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
|
|
154
|
+
}, [contentAvailability, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
|
|
153
155
|
/**
|
|
154
156
|
* Subscriber for pubsub callback
|
|
155
157
|
*/
|
|
@@ -202,10 +204,18 @@ function Events(inProps) {
|
|
|
202
204
|
const handleOnChangeTimeFrame = (event) => {
|
|
203
205
|
setDateSearch(event.target.value);
|
|
204
206
|
};
|
|
207
|
+
/**
|
|
208
|
+
* Handle change location
|
|
209
|
+
* @param event
|
|
210
|
+
*/
|
|
211
|
+
const handleOnChangeLocation = (event) => {
|
|
212
|
+
setLocation(event.target.value);
|
|
213
|
+
};
|
|
205
214
|
/**
|
|
206
215
|
* Renders events list
|
|
207
216
|
*/
|
|
208
|
-
|
|
217
|
+
console.log(location);
|
|
218
|
+
const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
|
|
209
219
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
210
220
|
// @ts-ignore
|
|
211
221
|
, {
|
|
@@ -217,14 +227,14 @@ function Events(inProps) {
|
|
|
217
227
|
variant: showMyEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents),
|
|
218
228
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
219
229
|
// @ts-ignore
|
|
220
|
-
showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md:
|
|
230
|
+
showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, autoHide: !loading && !events.length, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, autoHide: !loading && !events.length, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !loading && !events.length && !showPastEvents, disabled: loading }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
|
|
221
231
|
e.preventDefault();
|
|
222
232
|
if (e.key === 'Enter') {
|
|
223
233
|
fetchEvents(true);
|
|
224
234
|
}
|
|
225
235
|
}, InputProps: {
|
|
226
|
-
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
|
|
227
|
-
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
|
|
236
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading || (!events.length && !query) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading || (!events.length && !query) })) })))
|
|
237
|
+
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === types_1.SCEventDateFilterType.ANY), size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
|
|
228
238
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
229
239
|
// @ts-ignore
|
|
230
240
|
, {
|
|
@@ -236,7 +246,7 @@ function Events(inProps) {
|
|
|
236
246
|
variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
|
|
237
247
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
238
248
|
// @ts-ignore
|
|
239
|
-
showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
|
|
249
|
+
showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading || (!events.length && !showPastEvents) }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
|
|
240
250
|
(onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [events.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
|
|
241
251
|
/**
|
|
242
252
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ChipProps } from '@mui/material';
|
|
2
|
+
import { SCEventLocationFilterType } from '@selfcommunity/types';
|
|
3
|
+
export interface LocationEventsFilterProps extends ChipProps {
|
|
4
|
+
/**
|
|
5
|
+
* Overrides or extends the styles applied to the component.
|
|
6
|
+
* @default null
|
|
7
|
+
*/
|
|
8
|
+
className?: string;
|
|
9
|
+
value: SCEventLocationFilterType;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
autoHide?: boolean;
|
|
12
|
+
handleOnChange: (event: any) => void;
|
|
13
|
+
}
|
|
14
|
+
export default function LocationEventsFilter(inProps: LocationEventsFilterProps): JSX.Element;
|