@selfcommunity/react-ui 0.7.50-events.104 → 0.7.50-events.106
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/EventHeader/EventHeader.js +2 -3
- package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js +8 -2
- package/lib/cjs/components/Events/Events.js +10 -16
- package/lib/cjs/components/RelatedEventsWidget/RelatedEventsWidget.js +1 -1
- package/lib/cjs/components/RelatedEventsWidget/Skeleton.js +2 -2
- package/lib/cjs/shared/EventInfoDetails/index.d.ts +6 -6
- package/lib/cjs/shared/EventInfoDetails/index.js +3 -2
- package/lib/esm/components/EventHeader/EventHeader.js +2 -3
- package/lib/esm/components/EventInfoWidget/EventInfoWidget.js +9 -3
- package/lib/esm/components/Events/Events.js +12 -18
- package/lib/esm/components/RelatedEventsWidget/RelatedEventsWidget.js +3 -3
- package/lib/esm/components/RelatedEventsWidget/Skeleton.js +3 -3
- package/lib/esm/shared/EventInfoDetails/index.d.ts +6 -6
- package/lib/esm/shared/EventInfoDetails/index.js +3 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -75,7 +75,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
|
|
|
75
75
|
* @param inProps
|
|
76
76
|
*/
|
|
77
77
|
function EventHeader(inProps) {
|
|
78
|
-
var _a, _b;
|
|
79
78
|
// PROPS
|
|
80
79
|
const props = (0, system_1.useThemeProps)({
|
|
81
80
|
props: inProps,
|
|
@@ -95,7 +94,7 @@ function EventHeader(inProps) {
|
|
|
95
94
|
// REFS
|
|
96
95
|
const updatesSubscription = (0, react_1.useRef)(null);
|
|
97
96
|
// CONST
|
|
98
|
-
const isEventAdmin = (0, react_1.useMemo)(() =>
|
|
97
|
+
const isEventAdmin = (0, react_1.useMemo)(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
|
|
99
98
|
const isEventFinished = (0, react_1.useMemo)(() => {
|
|
100
99
|
if (scEvent && !scEvent.running) {
|
|
101
100
|
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
@@ -177,6 +176,6 @@ function EventHeader(inProps) {
|
|
|
177
176
|
month: 'long'
|
|
178
177
|
}),
|
|
179
178
|
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
180
|
-
} })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId:
|
|
179
|
+
} })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished }), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent }, EventActionsProps))] })) }) })] }))] })));
|
|
181
180
|
}
|
|
182
181
|
exports.default = EventHeader;
|
|
@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
7
|
+
const types_1 = require("@selfcommunity/types");
|
|
7
8
|
const react_1 = require("react");
|
|
8
9
|
const react_intl_1 = require("react-intl");
|
|
9
10
|
const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
|
|
@@ -27,6 +28,9 @@ function isTextLongerThanLimit(text, limit = 125) {
|
|
|
27
28
|
return text.length > limit;
|
|
28
29
|
}
|
|
29
30
|
function getTruncatedText(text, limit = 125) {
|
|
31
|
+
if (!text) {
|
|
32
|
+
return '';
|
|
33
|
+
}
|
|
30
34
|
return isTextLongerThanLimit(text, limit) ? text.substring(0, limit).concat('...') : text;
|
|
31
35
|
}
|
|
32
36
|
function EventInfoWidget(inProps) {
|
|
@@ -60,6 +64,9 @@ function EventInfoWidget(inProps) {
|
|
|
60
64
|
const handleToggleSummary = (0, react_1.useCallback)(() => {
|
|
61
65
|
setExpanded(!expanded);
|
|
62
66
|
}, [expanded]);
|
|
67
|
+
const showInfo = (0, react_1.useMemo)(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC ||
|
|
68
|
+
[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
|
+
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]);
|
|
63
70
|
// RENDER
|
|
64
71
|
if (!scEvent && loading) {
|
|
65
72
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
@@ -67,7 +74,6 @@ function EventInfoWidget(inProps) {
|
|
|
67
74
|
if (!scEvent) {
|
|
68
75
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
69
76
|
}
|
|
70
|
-
|
|
71
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.titleWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "info" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true })] })) })));
|
|
77
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.titleWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "info" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true, hasLocationInfo: showInfo })] })) })));
|
|
72
78
|
}
|
|
73
79
|
exports.default = EventInfoWidget;
|
|
@@ -84,7 +84,8 @@ function Events(inProps) {
|
|
|
84
84
|
const [events, setEvents] = (0, react_1.useState)([]);
|
|
85
85
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
86
86
|
const [next, setNext] = (0, react_1.useState)(null);
|
|
87
|
-
const [
|
|
87
|
+
const [query, setQuery] = (0, react_1.useState)('');
|
|
88
|
+
const [search, setSearch] = (0, react_1.useState)(false);
|
|
88
89
|
const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
|
|
89
90
|
const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
|
|
90
91
|
const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
|
|
@@ -114,13 +115,13 @@ function Events(inProps) {
|
|
|
114
115
|
* Fetches events list
|
|
115
116
|
*/
|
|
116
117
|
const fetchEvents = () => {
|
|
117
|
-
|
|
118
|
+
setLoading(true);
|
|
118
119
|
return api_services_1.http
|
|
119
120
|
.request({
|
|
120
121
|
url: endpoint.url({}),
|
|
121
122
|
method: endpoint.method,
|
|
122
123
|
params: Object.assign(Object.assign({}, endpointQueryParams), (general
|
|
123
|
-
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search
|
|
124
|
+
? 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({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents }))))
|
|
124
125
|
})
|
|
125
126
|
.then((res) => {
|
|
126
127
|
setEvents(res.data.results);
|
|
@@ -158,21 +159,13 @@ function Events(inProps) {
|
|
|
158
159
|
.catch((error) => console.log(error))
|
|
159
160
|
.then(() => setLoading(false));
|
|
160
161
|
}, [next]);
|
|
161
|
-
/**
|
|
162
|
-
* Get events filtered
|
|
163
|
-
*/
|
|
164
|
-
const getFilteredEvents = () => {
|
|
165
|
-
if (search) {
|
|
166
|
-
return events.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
167
|
-
}
|
|
168
|
-
return events;
|
|
169
|
-
};
|
|
170
162
|
/**
|
|
171
163
|
* Handle change filter name
|
|
172
164
|
* @param event
|
|
173
165
|
*/
|
|
174
166
|
const handleOnChangeFilterName = (event) => {
|
|
175
|
-
|
|
167
|
+
setQuery(event.target.value);
|
|
168
|
+
setSearch(false);
|
|
176
169
|
};
|
|
177
170
|
/**
|
|
178
171
|
* Handle change time frame
|
|
@@ -184,8 +177,9 @@ function Events(inProps) {
|
|
|
184
177
|
/**
|
|
185
178
|
* Renders events list
|
|
186
179
|
*/
|
|
187
|
-
const
|
|
188
|
-
|
|
180
|
+
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.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) }))) : ((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: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { 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, InputProps: {
|
|
181
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setSearch(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })))
|
|
182
|
+
} }) })), (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, 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
|
|
189
183
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
190
184
|
// @ts-ignore
|
|
191
185
|
, {
|
|
@@ -198,7 +192,7 @@ function Events(inProps) {
|
|
|
198
192
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
199
193
|
// @ts-ignore
|
|
200
194
|
showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) }))), (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 }) }))] })) }))), (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)) ||
|
|
201
|
-
(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: [
|
|
195
|
+
(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" }) })))] })) })] }));
|
|
202
196
|
/**
|
|
203
197
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
204
198
|
*/
|
|
@@ -121,6 +121,6 @@ function RelatedEventsWidget(inProps) {
|
|
|
121
121
|
if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
|
|
122
122
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
123
123
|
}
|
|
124
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(
|
|
124
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event })), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }, i))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((event) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
|
|
125
125
|
}
|
|
126
126
|
exports.default = RelatedEventsWidget;
|
|
@@ -4,9 +4,9 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const system_1 = require("@mui/system");
|
|
7
|
+
const react_1 = require("react");
|
|
7
8
|
require("swiper/css");
|
|
8
9
|
const Event_1 = require("../Event");
|
|
9
|
-
const User_1 = require("../User");
|
|
10
10
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
11
11
|
const constants_1 = require("./constants");
|
|
12
12
|
const classes = {
|
|
@@ -23,6 +23,6 @@ const Root = (0, system_1.styled)(Widget_1.default, {
|
|
|
23
23
|
overridesResolver: (_props, styles) => styles.skeletonRoot
|
|
24
24
|
})(() => ({}));
|
|
25
25
|
function RelatedEventsWidgetSkeleton() {
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { elevation: 0, className: classes.event }), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }, i))) })) })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
|
|
27
27
|
}
|
|
28
28
|
exports.default = RelatedEventsWidgetSkeleton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SCEventType } from '@selfcommunity/types';
|
|
2
|
-
import
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
3
|
export interface EventInfoDetailsProps {
|
|
4
4
|
event: SCEventType;
|
|
5
5
|
hideDateIcon?: boolean;
|
|
@@ -12,10 +12,10 @@ export interface EventInfoDetailsProps {
|
|
|
12
12
|
hasPrivacyInfo?: boolean;
|
|
13
13
|
hasLocationInfo?: boolean;
|
|
14
14
|
hasCreatedInfo?: boolean;
|
|
15
|
-
beforeDateInfo?:
|
|
16
|
-
beforeRecurringInfo?:
|
|
17
|
-
beforePrivacyInfo?:
|
|
18
|
-
beforeLocationInfo?:
|
|
19
|
-
beforeCreatedInfo?:
|
|
15
|
+
beforeDateInfo?: ReactNode | null;
|
|
16
|
+
beforeRecurringInfo?: ReactNode | null;
|
|
17
|
+
beforePrivacyInfo?: ReactNode | null;
|
|
18
|
+
beforeLocationInfo?: ReactNode | null;
|
|
19
|
+
beforeCreatedInfo?: ReactNode | null;
|
|
20
20
|
}
|
|
21
21
|
export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;
|
|
@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
4
4
|
const material_1 = require("@mui/material");
|
|
5
5
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
6
6
|
const types_1 = require("@selfcommunity/types");
|
|
7
|
+
const react_1 = require("react");
|
|
7
8
|
const react_intl_1 = require("react-intl");
|
|
8
9
|
const PREFIX = 'SCEventInfoDetails';
|
|
9
10
|
const classes = {
|
|
@@ -27,8 +28,8 @@ function EventInfoDetails(inProps) {
|
|
|
27
28
|
const { event, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
|
|
28
29
|
// HOOKS
|
|
29
30
|
const intl = (0, react_intl_1.useIntl)();
|
|
30
|
-
const privacy = event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
|
|
31
|
-
const location = event.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson';
|
|
31
|
+
const privacy = (0, react_1.useMemo)(() => (event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [event]);
|
|
32
|
+
const location = (0, react_1.useMemo)(() => (event.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [event]);
|
|
32
33
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
|
|
33
34
|
date: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, {
|
|
34
35
|
weekday: 'long',
|
|
@@ -73,7 +73,6 @@ const Root = styled(Box, {
|
|
|
73
73
|
* @param inProps
|
|
74
74
|
*/
|
|
75
75
|
export default function EventHeader(inProps) {
|
|
76
|
-
var _a, _b;
|
|
77
76
|
// PROPS
|
|
78
77
|
const props = useThemeProps({
|
|
79
78
|
props: inProps,
|
|
@@ -93,7 +92,7 @@ export default function EventHeader(inProps) {
|
|
|
93
92
|
// REFS
|
|
94
93
|
const updatesSubscription = useRef(null);
|
|
95
94
|
// CONST
|
|
96
|
-
const isEventAdmin = useMemo(() =>
|
|
95
|
+
const isEventAdmin = useMemo(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
|
|
97
96
|
const isEventFinished = useMemo(() => {
|
|
98
97
|
if (scEvent && !scEvent.running) {
|
|
99
98
|
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
@@ -175,5 +174,5 @@ export default function EventHeader(inProps) {
|
|
|
175
174
|
month: 'long'
|
|
176
175
|
}),
|
|
177
176
|
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
178
|
-
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId:
|
|
177
|
+
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished }), _jsx(EventActionsMenu, Object.assign({ event: scEvent }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent }, EventActionsProps))] })) }) })] }))] })));
|
|
179
178
|
}
|
|
@@ -2,7 +2,8 @@ import { __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Box, Button, CardContent, Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
|
|
4
4
|
import { useSCFetchEvent } from '@selfcommunity/react-core';
|
|
5
|
-
import {
|
|
5
|
+
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
|
|
6
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
6
7
|
import { FormattedMessage } from 'react-intl';
|
|
7
8
|
import EventInfoDetails from '../../shared/EventInfoDetails';
|
|
8
9
|
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
@@ -25,6 +26,9 @@ function isTextLongerThanLimit(text, limit = 125) {
|
|
|
25
26
|
return text.length > limit;
|
|
26
27
|
}
|
|
27
28
|
function getTruncatedText(text, limit = 125) {
|
|
29
|
+
if (!text) {
|
|
30
|
+
return '';
|
|
31
|
+
}
|
|
28
32
|
return isTextLongerThanLimit(text, limit) ? text.substring(0, limit).concat('...') : text;
|
|
29
33
|
}
|
|
30
34
|
export default function EventInfoWidget(inProps) {
|
|
@@ -58,6 +62,9 @@ export default function EventInfoWidget(inProps) {
|
|
|
58
62
|
const handleToggleSummary = useCallback(() => {
|
|
59
63
|
setExpanded(!expanded);
|
|
60
64
|
}, [expanded]);
|
|
65
|
+
const showInfo = useMemo(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC ||
|
|
66
|
+
[SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
|
|
67
|
+
const description = useMemo(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
|
|
61
68
|
// RENDER
|
|
62
69
|
if (!scEvent && loading) {
|
|
63
70
|
return _jsx(Skeleton, {});
|
|
@@ -65,6 +72,5 @@ export default function EventInfoWidget(inProps) {
|
|
|
65
72
|
if (!scEvent) {
|
|
66
73
|
return _jsx(HiddenPlaceholder, {});
|
|
67
74
|
}
|
|
68
|
-
|
|
69
|
-
return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.titleWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "info" })), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), _jsx(Box, Object.assign({ className: classes.textWrapper }, { children: _jsxs(Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && (_jsx(Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), _jsx(EventInfoDetails, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true })] })) })));
|
|
75
|
+
return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.titleWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "info" })), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), _jsx(Box, Object.assign({ className: classes.textWrapper }, { children: _jsxs(Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && (_jsx(Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), _jsx(EventInfoDetails, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true, hasLocationInfo: showInfo })] })) })));
|
|
70
76
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { Box, Button, Chip, FormControl, Grid, Icon, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
|
|
3
|
+
import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import { Endpoints, http } from '@selfcommunity/api-services';
|
|
7
7
|
import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
|
|
8
8
|
import { SCEventDateFilterType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
|
|
9
|
-
import { Logger
|
|
9
|
+
import { Logger } from '@selfcommunity/utils';
|
|
10
10
|
import classNames from 'classnames';
|
|
11
11
|
import { useContext, useEffect, useMemo, useState } from 'react';
|
|
12
12
|
import { FormattedMessage } from 'react-intl';
|
|
@@ -81,7 +81,8 @@ export default function Events(inProps) {
|
|
|
81
81
|
const [events, setEvents] = useState([]);
|
|
82
82
|
const [loading, setLoading] = useState(true);
|
|
83
83
|
const [next, setNext] = useState(null);
|
|
84
|
-
const [
|
|
84
|
+
const [query, setQuery] = useState('');
|
|
85
|
+
const [search, setSearch] = useState(false);
|
|
85
86
|
const [dateSearch, setDateSearch] = useState(options[0].value);
|
|
86
87
|
const [showFollowed, setShowFollowed] = useState(false);
|
|
87
88
|
const [showPastEvents, setShowPastEvents] = useState(false);
|
|
@@ -111,13 +112,13 @@ export default function Events(inProps) {
|
|
|
111
112
|
* Fetches events list
|
|
112
113
|
*/
|
|
113
114
|
const fetchEvents = () => {
|
|
114
|
-
|
|
115
|
+
setLoading(true);
|
|
115
116
|
return http
|
|
116
117
|
.request({
|
|
117
118
|
url: endpoint.url({}),
|
|
118
119
|
method: endpoint.method,
|
|
119
120
|
params: Object.assign(Object.assign({}, endpointQueryParams), (general
|
|
120
|
-
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search
|
|
121
|
+
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents }))))
|
|
121
122
|
})
|
|
122
123
|
.then((res) => {
|
|
123
124
|
setEvents(res.data.results);
|
|
@@ -155,21 +156,13 @@ export default function Events(inProps) {
|
|
|
155
156
|
.catch((error) => console.log(error))
|
|
156
157
|
.then(() => setLoading(false));
|
|
157
158
|
}, [next]);
|
|
158
|
-
/**
|
|
159
|
-
* Get events filtered
|
|
160
|
-
*/
|
|
161
|
-
const getFilteredEvents = () => {
|
|
162
|
-
if (search) {
|
|
163
|
-
return events.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
164
|
-
}
|
|
165
|
-
return events;
|
|
166
|
-
};
|
|
167
159
|
/**
|
|
168
160
|
* Handle change filter name
|
|
169
161
|
* @param event
|
|
170
162
|
*/
|
|
171
163
|
const handleOnChangeFilterName = (event) => {
|
|
172
|
-
|
|
164
|
+
setQuery(event.target.value);
|
|
165
|
+
setSearch(false);
|
|
173
166
|
};
|
|
174
167
|
/**
|
|
175
168
|
* Handle change time frame
|
|
@@ -181,8 +174,9 @@ export default function Events(inProps) {
|
|
|
181
174
|
/**
|
|
182
175
|
* Renders events list
|
|
183
176
|
*/
|
|
184
|
-
const
|
|
185
|
-
|
|
177
|
+
const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, InputProps: {
|
|
178
|
+
endAdornment: (_jsx(IconButton, Object.assign({ onClick: () => setSearch(true) }, { children: _jsx(Icon, { children: "search" }) })))
|
|
179
|
+
} }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents, size: 'small', label: _jsx(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) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
|
|
186
180
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
187
181
|
// @ts-ignore
|
|
188
182
|
, {
|
|
@@ -195,7 +189,7 @@ export default function Events(inProps) {
|
|
|
195
189
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
196
190
|
// @ts-ignore
|
|
197
191
|
showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
|
|
198
|
-
(onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [
|
|
192
|
+
(onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
|
|
199
193
|
/**
|
|
200
194
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
201
195
|
*/
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Avatar, Button, CardActions, CardContent, Divider, List, ListItem, Stack, Typography, useThemeProps } from '@mui/material';
|
|
4
4
|
import { styled } from '@mui/system';
|
|
5
5
|
import { Endpoints, EventService, http } from '@selfcommunity/api-services';
|
|
6
6
|
import { Link, SCCache, SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
|
|
7
7
|
import { Logger } from '@selfcommunity/utils';
|
|
8
|
-
import { useCallback, useEffect, useReducer, useState } from 'react';
|
|
8
|
+
import { Fragment, useCallback, useEffect, useReducer, useState } from 'react';
|
|
9
9
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
10
10
|
import 'swiper/css';
|
|
11
11
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
@@ -119,5 +119,5 @@ export default function RelatedEventsWidget(inProps) {
|
|
|
119
119
|
if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
|
|
120
120
|
return _jsx(HiddenPlaceholder, {});
|
|
121
121
|
}
|
|
122
|
-
return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(
|
|
122
|
+
return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(Event, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((event) => (_jsx(ListItem, { children: _jsx(Event, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
|
|
123
123
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { CardActions, CardContent, Divider, Skeleton, Stack } from '@mui/material';
|
|
3
3
|
import { styled } from '@mui/system';
|
|
4
|
+
import { Fragment } from 'react';
|
|
4
5
|
import 'swiper/css';
|
|
5
6
|
import { EventSkeleton } from '../Event';
|
|
6
|
-
import { UserSkeleton } from '../User';
|
|
7
7
|
import Widget from '../Widget';
|
|
8
8
|
import { PREFIX } from './constants';
|
|
9
9
|
const classes = {
|
|
@@ -20,5 +20,5 @@ const Root = styled(Widget, {
|
|
|
20
20
|
overridesResolver: (_props, styles) => styles.skeletonRoot
|
|
21
21
|
})(() => ({}));
|
|
22
22
|
export default function RelatedEventsWidgetSkeleton() {
|
|
23
|
-
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [
|
|
23
|
+
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardContent, Object.assign({ className: classes.content }, { children: _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(EventSkeleton, { elevation: 0, className: classes.event }), i < array.length - 1 && _jsx(Divider, {})] }, i))) })) })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
|
|
24
24
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SCEventType } from '@selfcommunity/types';
|
|
2
|
-
import
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
3
|
export interface EventInfoDetailsProps {
|
|
4
4
|
event: SCEventType;
|
|
5
5
|
hideDateIcon?: boolean;
|
|
@@ -12,10 +12,10 @@ export interface EventInfoDetailsProps {
|
|
|
12
12
|
hasPrivacyInfo?: boolean;
|
|
13
13
|
hasLocationInfo?: boolean;
|
|
14
14
|
hasCreatedInfo?: boolean;
|
|
15
|
-
beforeDateInfo?:
|
|
16
|
-
beforeRecurringInfo?:
|
|
17
|
-
beforePrivacyInfo?:
|
|
18
|
-
beforeLocationInfo?:
|
|
19
|
-
beforeCreatedInfo?:
|
|
15
|
+
beforeDateInfo?: ReactNode | null;
|
|
16
|
+
beforeRecurringInfo?: ReactNode | null;
|
|
17
|
+
beforePrivacyInfo?: ReactNode | null;
|
|
18
|
+
beforeLocationInfo?: ReactNode | null;
|
|
19
|
+
beforeCreatedInfo?: ReactNode | null;
|
|
20
20
|
}
|
|
21
21
|
export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
|
|
3
3
|
import { Link } from '@selfcommunity/react-core';
|
|
4
4
|
import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
|
|
5
|
+
import { useMemo } from 'react';
|
|
5
6
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
6
7
|
const PREFIX = 'SCEventInfoDetails';
|
|
7
8
|
const classes = {
|
|
@@ -25,8 +26,8 @@ export default function EventInfoDetails(inProps) {
|
|
|
25
26
|
const { event, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
|
|
26
27
|
// HOOKS
|
|
27
28
|
const intl = useIntl();
|
|
28
|
-
const privacy = event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
|
|
29
|
-
const location = event.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson';
|
|
29
|
+
const privacy = useMemo(() => (event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [event]);
|
|
30
|
+
const location = useMemo(() => (event.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [event]);
|
|
30
31
|
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
|
|
31
32
|
date: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, {
|
|
32
33
|
weekday: 'long',
|