@selfcommunity/react-ui 0.11.0-alpha.51 → 0.11.0-alpha.53
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/Groups/Groups.js +18 -16
- package/lib/cjs/components/Notification/Event/Event.js +5 -5
- package/lib/cjs/components/RelatedEventsWidget/RelatedEventsWidget.js +1 -2
- package/lib/esm/components/Groups/Groups.js +21 -19
- package/lib/esm/components/Notification/Event/Event.js +7 -7
- package/lib/esm/components/RelatedEventsWidget/RelatedEventsWidget.js +1 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +5 -5
|
@@ -23,6 +23,7 @@ const PubSub_1 = require("../../constants/PubSub");
|
|
|
23
23
|
const classes = {
|
|
24
24
|
root: `${constants_1.PREFIX}-root`,
|
|
25
25
|
filters: `${constants_1.PREFIX}-filter`,
|
|
26
|
+
search: `${constants_1.PREFIX}-search`,
|
|
26
27
|
groups: `${constants_1.PREFIX}-groups`,
|
|
27
28
|
item: `${constants_1.PREFIX}-item`,
|
|
28
29
|
noResults: `${constants_1.PREFIX}-no-results`,
|
|
@@ -96,13 +97,14 @@ function Groups(inProps) {
|
|
|
96
97
|
/**
|
|
97
98
|
* Fetches groups list
|
|
98
99
|
*/
|
|
99
|
-
const fetchGroups = () => {
|
|
100
|
+
const fetchGroups = (searchValue = search) => {
|
|
101
|
+
setLoading(true);
|
|
100
102
|
let groupService;
|
|
101
103
|
if (general) {
|
|
102
|
-
groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
104
|
+
groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
103
105
|
}
|
|
104
106
|
else {
|
|
105
|
-
groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
107
|
+
groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
106
108
|
}
|
|
107
109
|
groupService
|
|
108
110
|
.then((res) => {
|
|
@@ -124,7 +126,7 @@ function Groups(inProps) {
|
|
|
124
126
|
else {
|
|
125
127
|
fetchGroups();
|
|
126
128
|
}
|
|
127
|
-
}, [contentAvailability, authUserId
|
|
129
|
+
}, [contentAvailability, authUserId]);
|
|
128
130
|
/**
|
|
129
131
|
* Subscriber for pubsub callback
|
|
130
132
|
*/
|
|
@@ -163,15 +165,6 @@ function Groups(inProps) {
|
|
|
163
165
|
.catch((error) => console.log(error))
|
|
164
166
|
.then(() => setLoading(false));
|
|
165
167
|
}, [next]);
|
|
166
|
-
/**
|
|
167
|
-
* Get groups filtered
|
|
168
|
-
*/
|
|
169
|
-
const getFilteredGroups = () => {
|
|
170
|
-
if (search) {
|
|
171
|
-
return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
172
|
-
}
|
|
173
|
-
return groups;
|
|
174
|
-
};
|
|
175
168
|
/**
|
|
176
169
|
* Handle change filter name
|
|
177
170
|
* @param event
|
|
@@ -182,12 +175,21 @@ function Groups(inProps) {
|
|
|
182
175
|
/**
|
|
183
176
|
* Renders groups list
|
|
184
177
|
*/
|
|
185
|
-
const
|
|
186
|
-
|
|
178
|
+
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
179
|
+
e.preventDefault();
|
|
180
|
+
if (e.key === 'Enter') {
|
|
181
|
+
fetchGroups();
|
|
182
|
+
}
|
|
183
|
+
}, InputProps: {
|
|
184
|
+
endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
|
|
185
|
+
setSearch('');
|
|
186
|
+
fetchGroups('');
|
|
187
|
+
}, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchGroups(), 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: () => fetchGroups(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading }))] })))
|
|
188
|
+
} }) }))) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !groups.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: search.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, {}) : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { groupsNumber: 2 }), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
|
|
187
189
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
188
190
|
// @ts-ignore
|
|
189
191
|
button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
190
|
-
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children:
|
|
192
|
+
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
|
|
191
193
|
// RENDER
|
|
192
194
|
if (!contentAvailability && !scUserContext.user) {
|
|
193
195
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
@@ -41,12 +41,10 @@ function EventNotification(props) {
|
|
|
41
41
|
const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_2.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
|
|
42
42
|
// CONTEXT
|
|
43
43
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
44
|
-
const scUserContext = (0, react_core_1.useSCUser)();
|
|
45
|
-
const scEventsManager = scUserContext.managers.events;
|
|
46
44
|
// STATE
|
|
47
45
|
const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
|
|
48
46
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
49
|
-
const [disabled, setDisabled] = (0, react_1.useState)(
|
|
47
|
+
const [disabled, setDisabled] = (0, react_1.useState)(notificationObject.event.subscription_status !== types_1.SCEventSubscriptionStatusType.REQUESTED);
|
|
50
48
|
// CONST
|
|
51
49
|
const isSnippetTemplate = template === types_2.SCNotificationObjectTemplateType.SNIPPET;
|
|
52
50
|
const isToastTemplate = template === types_2.SCNotificationObjectTemplateType.TOAST;
|
|
@@ -79,7 +77,7 @@ function EventNotification(props) {
|
|
|
79
77
|
month: 'long'
|
|
80
78
|
}),
|
|
81
79
|
hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
82
|
-
} }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: disabled, loading: loading
|
|
80
|
+
} }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
|
|
83
81
|
}
|
|
84
82
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
|
|
85
83
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
|
|
@@ -91,7 +89,9 @@ function EventNotification(props) {
|
|
|
91
89
|
icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
|
|
92
90
|
event: notificationObject.event.name,
|
|
93
91
|
link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
|
|
94
|
-
} }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({
|
|
92
|
+
} }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({}, (notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
|
|
93
|
+
disabled: disabled
|
|
94
|
+
}), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
|
|
95
95
|
component: react_core_1.Link,
|
|
96
96
|
to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
|
|
97
97
|
}), { onClick: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
|
|
@@ -51,7 +51,6 @@ const DialogRoot = (0, system_1.styled)(BaseDialog_1.default, {
|
|
|
51
51
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
52
52
|
})(() => ({}));
|
|
53
53
|
function RelatedEventsWidget(inProps) {
|
|
54
|
-
var _a;
|
|
55
54
|
// PROPS
|
|
56
55
|
const props = (0, material_1.useThemeProps)({
|
|
57
56
|
props: inProps,
|
|
@@ -121,6 +120,6 @@ function RelatedEventsWidget(inProps) {
|
|
|
121
120
|
if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
|
|
122
121
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
123
122
|
}
|
|
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,
|
|
123
|
+
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, scEvent.managed_by), 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" }) })) })) }))), (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
124
|
}
|
|
126
125
|
exports.default = RelatedEventsWidget;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
-
import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
5
|
+
import { Box, Button, Grid, Icon, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
6
6
|
import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
|
|
7
|
-
import { Logger
|
|
7
|
+
import { Logger } from '@selfcommunity/utils';
|
|
8
8
|
import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
|
|
9
9
|
import Skeleton from './Skeleton';
|
|
10
10
|
import { FormattedMessage } from 'react-intl';
|
|
@@ -21,6 +21,7 @@ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
|
21
21
|
const classes = {
|
|
22
22
|
root: `${PREFIX}-root`,
|
|
23
23
|
filters: `${PREFIX}-filter`,
|
|
24
|
+
search: `${PREFIX}-search`,
|
|
24
25
|
groups: `${PREFIX}-groups`,
|
|
25
26
|
item: `${PREFIX}-item`,
|
|
26
27
|
noResults: `${PREFIX}-no-results`,
|
|
@@ -94,13 +95,14 @@ export default function Groups(inProps) {
|
|
|
94
95
|
/**
|
|
95
96
|
* Fetches groups list
|
|
96
97
|
*/
|
|
97
|
-
const fetchGroups = () => {
|
|
98
|
+
const fetchGroups = (searchValue = search) => {
|
|
99
|
+
setLoading(true);
|
|
98
100
|
let groupService;
|
|
99
101
|
if (general) {
|
|
100
|
-
groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
102
|
+
groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
101
103
|
}
|
|
102
104
|
else {
|
|
103
|
-
groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
105
|
+
groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
104
106
|
}
|
|
105
107
|
groupService
|
|
106
108
|
.then((res) => {
|
|
@@ -122,7 +124,7 @@ export default function Groups(inProps) {
|
|
|
122
124
|
else {
|
|
123
125
|
fetchGroups();
|
|
124
126
|
}
|
|
125
|
-
}, [contentAvailability, authUserId
|
|
127
|
+
}, [contentAvailability, authUserId]);
|
|
126
128
|
/**
|
|
127
129
|
* Subscriber for pubsub callback
|
|
128
130
|
*/
|
|
@@ -161,15 +163,6 @@ export default function Groups(inProps) {
|
|
|
161
163
|
.catch((error) => console.log(error))
|
|
162
164
|
.then(() => setLoading(false));
|
|
163
165
|
}, [next]);
|
|
164
|
-
/**
|
|
165
|
-
* Get groups filtered
|
|
166
|
-
*/
|
|
167
|
-
const getFilteredGroups = () => {
|
|
168
|
-
if (search) {
|
|
169
|
-
return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
170
|
-
}
|
|
171
|
-
return groups;
|
|
172
|
-
};
|
|
173
166
|
/**
|
|
174
167
|
* Handle change filter name
|
|
175
168
|
* @param event
|
|
@@ -180,12 +173,21 @@ export default function Groups(inProps) {
|
|
|
180
173
|
/**
|
|
181
174
|
* Renders groups list
|
|
182
175
|
*/
|
|
183
|
-
const
|
|
184
|
-
|
|
176
|
+
const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
177
|
+
e.preventDefault();
|
|
178
|
+
if (e.key === 'Enter') {
|
|
179
|
+
fetchGroups();
|
|
180
|
+
}
|
|
181
|
+
}, InputProps: {
|
|
182
|
+
endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
|
|
183
|
+
setSearch('');
|
|
184
|
+
fetchGroups('');
|
|
185
|
+
}, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
|
|
186
|
+
} }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
|
|
185
187
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
186
188
|
// @ts-ignore
|
|
187
189
|
button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
188
|
-
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children:
|
|
190
|
+
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
|
|
189
191
|
// RENDER
|
|
190
192
|
if (!contentAvailability && !scUserContext.user) {
|
|
191
193
|
return _jsx(HiddenPlaceholder, {});
|
|
@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { Avatar, Box, Icon, Stack, Typography } from '@mui/material';
|
|
6
|
-
import { Link, SCRoutes, useSCRouting
|
|
7
|
-
import { SCEventLocationType, SCNotificationTypologyType } from '@selfcommunity/types';
|
|
6
|
+
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
|
|
7
|
+
import { SCEventLocationType, SCEventSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
|
|
8
8
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
9
9
|
import DateTimeAgo from '../../../shared/DateTimeAgo';
|
|
10
10
|
import classNames from 'classnames';
|
|
@@ -39,12 +39,10 @@ export default function EventNotification(props) {
|
|
|
39
39
|
const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
|
|
40
40
|
// CONTEXT
|
|
41
41
|
const scRoutingContext = useSCRouting();
|
|
42
|
-
const scUserContext = useSCUser();
|
|
43
|
-
const scEventsManager = scUserContext.managers.events;
|
|
44
42
|
// STATE
|
|
45
43
|
const [openAlert, setOpenAlert] = useState(false);
|
|
46
44
|
const [loading, setLoading] = useState(false);
|
|
47
|
-
const [disabled, setDisabled] = useState(
|
|
45
|
+
const [disabled, setDisabled] = useState(notificationObject.event.subscription_status !== SCEventSubscriptionStatusType.REQUESTED);
|
|
48
46
|
// CONST
|
|
49
47
|
const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
|
|
50
48
|
const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
|
|
@@ -77,7 +75,7 @@ export default function EventNotification(props) {
|
|
|
77
75
|
month: 'long'
|
|
78
76
|
}),
|
|
79
77
|
hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
80
|
-
} }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: disabled, loading: loading
|
|
78
|
+
} }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
|
|
81
79
|
}
|
|
82
80
|
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
|
|
83
81
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
|
|
@@ -89,7 +87,9 @@ export default function EventNotification(props) {
|
|
|
89
87
|
icon: (...chunks) => _jsx(Icon, { children: chunks }),
|
|
90
88
|
event: notificationObject.event.name,
|
|
91
89
|
link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
|
|
92
|
-
} }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({
|
|
90
|
+
} }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
|
|
91
|
+
disabled: disabled
|
|
92
|
+
}), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
|
|
93
93
|
component: Link,
|
|
94
94
|
to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
|
|
95
95
|
}), { onClick: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
|
|
@@ -49,7 +49,6 @@ const DialogRoot = styled(BaseDialog, {
|
|
|
49
49
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
50
50
|
})(() => ({}));
|
|
51
51
|
export default function RelatedEventsWidget(inProps) {
|
|
52
|
-
var _a;
|
|
53
52
|
// PROPS
|
|
54
53
|
const props = useThemeProps({
|
|
55
54
|
props: inProps,
|
|
@@ -119,5 +118,5 @@ export default function RelatedEventsWidget(inProps) {
|
|
|
119
118
|
if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
|
|
120
119
|
return _jsx(HiddenPlaceholder, {});
|
|
121
120
|
}
|
|
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,
|
|
121
|
+
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, scEvent.managed_by), 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" }) })) })) }))), _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
122
|
}
|