@selfcommunity/react-ui 0.7.50-events.107 → 0.7.50-events.108
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/Events/Events.js +28 -9
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +0 -4
- package/lib/cjs/components/OnBoardingWidget/Steps/Category/Category.js +20 -1
- package/lib/cjs/components/OnBoardingWidget/Steps/Content/Content.js +20 -1
- package/lib/esm/components/Events/Events.js +30 -11
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +0 -4
- package/lib/esm/components/OnBoardingWidget/Steps/Category/Category.js +21 -2
- package/lib/esm/components/OnBoardingWidget/Steps/Content/Content.js +21 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -27,7 +27,8 @@ const classes = {
|
|
|
27
27
|
item: `${constants_1.PREFIX}-item`,
|
|
28
28
|
itemSkeleton: `${constants_1.PREFIX}-item-skeleton`,
|
|
29
29
|
noResults: `${constants_1.PREFIX}-no-results`,
|
|
30
|
-
showMore: `${constants_1.PREFIX}-show-more
|
|
30
|
+
showMore: `${constants_1.PREFIX}-show-more`,
|
|
31
|
+
search: `${constants_1.PREFIX}-search`
|
|
31
32
|
};
|
|
32
33
|
const options = [
|
|
33
34
|
{ value: types_1.SCEventDateFilterType.ANY, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
|
|
@@ -85,10 +86,10 @@ function Events(inProps) {
|
|
|
85
86
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
86
87
|
const [next, setNext] = (0, react_1.useState)(null);
|
|
87
88
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
88
|
-
const [search, setSearch] = (0, react_1.useState)(false);
|
|
89
89
|
const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
|
|
90
90
|
const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
|
|
91
91
|
const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
|
|
92
|
+
const [showMyEvents, setShowMyEvents] = (0, react_1.useState)(false);
|
|
92
93
|
// CONTEXT
|
|
93
94
|
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
|
|
94
95
|
const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
|
|
@@ -98,6 +99,8 @@ function Events(inProps) {
|
|
|
98
99
|
scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
|
|
99
100
|
// CONST
|
|
100
101
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
102
|
+
const theme = (0, material_1.useTheme)();
|
|
103
|
+
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
101
104
|
// HANDLERS
|
|
102
105
|
const handleChipClick = () => {
|
|
103
106
|
setShowFollowed(!showFollowed);
|
|
@@ -114,14 +117,14 @@ function Events(inProps) {
|
|
|
114
117
|
/**
|
|
115
118
|
* Fetches events list
|
|
116
119
|
*/
|
|
117
|
-
const fetchEvents = () => {
|
|
120
|
+
const fetchEvents = (search) => {
|
|
118
121
|
setLoading(true);
|
|
119
122
|
return api_services_1.http
|
|
120
123
|
.request({
|
|
121
124
|
url: endpoint.url({}),
|
|
122
125
|
method: endpoint.method,
|
|
123
126
|
params: Object.assign(Object.assign({}, endpointQueryParams), (general
|
|
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 }))))
|
|
127
|
+
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
|
|
125
128
|
})
|
|
126
129
|
.then((res) => {
|
|
127
130
|
setEvents(res.data.results);
|
|
@@ -140,9 +143,9 @@ function Events(inProps) {
|
|
|
140
143
|
return;
|
|
141
144
|
}
|
|
142
145
|
else {
|
|
143
|
-
fetchEvents();
|
|
146
|
+
query === '' && fetchEvents();
|
|
144
147
|
}
|
|
145
|
-
}, [contentAvailability,
|
|
148
|
+
}, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
|
|
146
149
|
const handleNext = (0, react_1.useMemo)(() => () => {
|
|
147
150
|
if (!next) {
|
|
148
151
|
return;
|
|
@@ -165,7 +168,6 @@ function Events(inProps) {
|
|
|
165
168
|
*/
|
|
166
169
|
const handleOnChangeFilterName = (event) => {
|
|
167
170
|
setQuery(event.target.value);
|
|
168
|
-
setSearch(false);
|
|
169
171
|
};
|
|
170
172
|
/**
|
|
171
173
|
* Handle change time frame
|
|
@@ -177,8 +179,25 @@ function Events(inProps) {
|
|
|
177
179
|
/**
|
|
178
180
|
* Renders events list
|
|
179
181
|
*/
|
|
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 }) }))
|
|
181
|
-
|
|
182
|
+
const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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 }) })), (events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
|
|
183
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
184
|
+
// @ts-ignore
|
|
185
|
+
, {
|
|
186
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
187
|
+
// @ts-ignore
|
|
188
|
+
color: showMyEvents ? 'secondary' : 'default',
|
|
189
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
190
|
+
// @ts-ignore
|
|
191
|
+
variant: showMyEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents),
|
|
192
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
193
|
+
// @ts-ignore
|
|
194
|
+
showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null }) })))] })) : ((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, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
195
|
+
e.preventDefault();
|
|
196
|
+
if (e.key === 'Enter') {
|
|
197
|
+
fetchEvents(true);
|
|
198
|
+
}
|
|
199
|
+
}, InputProps: {
|
|
200
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) })))
|
|
182
201
|
} }) })), (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
|
|
183
202
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
184
203
|
// @ts-ignore
|
|
@@ -93,7 +93,6 @@ const OnBoardingWidget = (inProps) => {
|
|
|
93
93
|
}
|
|
94
94
|
return item;
|
|
95
95
|
}));
|
|
96
|
-
setStep(nextStep);
|
|
97
96
|
})
|
|
98
97
|
.catch((error) => {
|
|
99
98
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
@@ -108,9 +107,6 @@ const OnBoardingWidget = (inProps) => {
|
|
|
108
107
|
variant: 'success',
|
|
109
108
|
autoHideDuration: 7000
|
|
110
109
|
});
|
|
111
|
-
if (_step.step === step.step) {
|
|
112
|
-
setStep(nextStep);
|
|
113
|
-
}
|
|
114
110
|
};
|
|
115
111
|
const getSteps = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
116
112
|
yield api_services_1.OnBoardingService.getAllSteps()
|
|
@@ -72,6 +72,25 @@ function Category(inProps) {
|
|
|
72
72
|
return () => clearInterval(intervalId);
|
|
73
73
|
}
|
|
74
74
|
}, [step.status, step.completion_percentage]);
|
|
75
|
+
const getLoadingMessage = (0, react_1.useMemo)(() => {
|
|
76
|
+
let message;
|
|
77
|
+
if (progress <= 10) {
|
|
78
|
+
message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.a", defaultMessage: "ui.onBoardingWidget.step.categories.loading.a" }));
|
|
79
|
+
}
|
|
80
|
+
else if (progress <= 20) {
|
|
81
|
+
message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.b", defaultMessage: "ui.onBoardingWidget.step.categories.loading.b" }));
|
|
82
|
+
}
|
|
83
|
+
else if (progress <= 40) {
|
|
84
|
+
message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.c", defaultMessage: "ui.onBoardingWidget.step.categories.loading.c" }));
|
|
85
|
+
}
|
|
86
|
+
else if (progress <= 60) {
|
|
87
|
+
message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.d", defaultMessage: "ui.onBoardingWidget.step.categories.loading.d" }));
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.e", defaultMessage: "ui.onBoardingWidget.step.categories.loading.e" }));
|
|
91
|
+
}
|
|
92
|
+
return message;
|
|
93
|
+
}, [progress]);
|
|
75
94
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== types_1.SCOnBoardingStepStatusType.IN_PROGRESS && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
|
|
76
95
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
77
96
|
// @ts-ignore
|
|
@@ -82,6 +101,6 @@ function Category(inProps) {
|
|
|
82
101
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
83
102
|
// @ts-ignore
|
|
84
103
|
iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
|
|
85
|
-
} }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children:
|
|
104
|
+
} }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
|
|
86
105
|
}
|
|
87
106
|
exports.default = Category;
|
|
@@ -52,6 +52,25 @@ function Content(inProps) {
|
|
|
52
52
|
return () => clearInterval(intervalId);
|
|
53
53
|
}
|
|
54
54
|
}, [step.status, step.completion_percentage]);
|
|
55
|
-
|
|
55
|
+
const getLoadingMessage = (0, react_1.useMemo)(() => {
|
|
56
|
+
let message;
|
|
57
|
+
if (progress <= 10) {
|
|
58
|
+
message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.a", defaultMessage: "ui.onBoardingWidget.step.contents.loading.a" });
|
|
59
|
+
}
|
|
60
|
+
else if (progress <= 20) {
|
|
61
|
+
message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.b", defaultMessage: "ui.onBoardingWidget.step.contents.loading.b" });
|
|
62
|
+
}
|
|
63
|
+
else if (progress <= 40) {
|
|
64
|
+
message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.c", defaultMessage: "ui.onBoardingWidget.step.contents.loading.c" });
|
|
65
|
+
}
|
|
66
|
+
else if (progress <= 60) {
|
|
67
|
+
message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.d", defaultMessage: "ui.onBoardingWidget.step.contents.loading.d" });
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.e", defaultMessage: "ui.onBoardingWidget.step.contents.loading.e" });
|
|
71
|
+
}
|
|
72
|
+
return message;
|
|
73
|
+
}, [progress]);
|
|
74
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: content_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
|
|
56
75
|
}
|
|
57
76
|
exports.default = Content;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
3
|
-
import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Radio, Select, TextField, Typography, useMediaQuery, useTheme } 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';
|
|
@@ -24,7 +24,8 @@ const classes = {
|
|
|
24
24
|
item: `${PREFIX}-item`,
|
|
25
25
|
itemSkeleton: `${PREFIX}-item-skeleton`,
|
|
26
26
|
noResults: `${PREFIX}-no-results`,
|
|
27
|
-
showMore: `${PREFIX}-show-more
|
|
27
|
+
showMore: `${PREFIX}-show-more`,
|
|
28
|
+
search: `${PREFIX}-search`
|
|
28
29
|
};
|
|
29
30
|
const options = [
|
|
30
31
|
{ value: SCEventDateFilterType.ANY, label: _jsx(FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
|
|
@@ -82,10 +83,10 @@ export default function Events(inProps) {
|
|
|
82
83
|
const [loading, setLoading] = useState(true);
|
|
83
84
|
const [next, setNext] = useState(null);
|
|
84
85
|
const [query, setQuery] = useState('');
|
|
85
|
-
const [search, setSearch] = useState(false);
|
|
86
86
|
const [dateSearch, setDateSearch] = useState(options[0].value);
|
|
87
87
|
const [showFollowed, setShowFollowed] = useState(false);
|
|
88
88
|
const [showPastEvents, setShowPastEvents] = useState(false);
|
|
89
|
+
const [showMyEvents, setShowMyEvents] = useState(false);
|
|
89
90
|
// CONTEXT
|
|
90
91
|
const scUserContext = useContext(SCUserContext);
|
|
91
92
|
const scPreferencesContext = useContext(SCPreferencesContext);
|
|
@@ -95,6 +96,8 @@ export default function Events(inProps) {
|
|
|
95
96
|
scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
|
|
96
97
|
// CONST
|
|
97
98
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
99
|
+
const theme = useTheme();
|
|
100
|
+
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
98
101
|
// HANDLERS
|
|
99
102
|
const handleChipClick = () => {
|
|
100
103
|
setShowFollowed(!showFollowed);
|
|
@@ -111,14 +114,14 @@ export default function Events(inProps) {
|
|
|
111
114
|
/**
|
|
112
115
|
* Fetches events list
|
|
113
116
|
*/
|
|
114
|
-
const fetchEvents = () => {
|
|
117
|
+
const fetchEvents = (search) => {
|
|
115
118
|
setLoading(true);
|
|
116
119
|
return http
|
|
117
120
|
.request({
|
|
118
121
|
url: endpoint.url({}),
|
|
119
122
|
method: endpoint.method,
|
|
120
123
|
params: Object.assign(Object.assign({}, endpointQueryParams), (general
|
|
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 }))))
|
|
124
|
+
? 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(Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
|
|
122
125
|
})
|
|
123
126
|
.then((res) => {
|
|
124
127
|
setEvents(res.data.results);
|
|
@@ -137,9 +140,9 @@ export default function Events(inProps) {
|
|
|
137
140
|
return;
|
|
138
141
|
}
|
|
139
142
|
else {
|
|
140
|
-
fetchEvents();
|
|
143
|
+
query === '' && fetchEvents();
|
|
141
144
|
}
|
|
142
|
-
}, [contentAvailability,
|
|
145
|
+
}, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
|
|
143
146
|
const handleNext = useMemo(() => () => {
|
|
144
147
|
if (!next) {
|
|
145
148
|
return;
|
|
@@ -162,7 +165,6 @@ export default function Events(inProps) {
|
|
|
162
165
|
*/
|
|
163
166
|
const handleOnChangeFilterName = (event) => {
|
|
164
167
|
setQuery(event.target.value);
|
|
165
|
-
setSearch(false);
|
|
166
168
|
};
|
|
167
169
|
/**
|
|
168
170
|
* Handle change time frame
|
|
@@ -174,8 +176,25 @@ export default function Events(inProps) {
|
|
|
174
176
|
/**
|
|
175
177
|
* Renders events list
|
|
176
178
|
*/
|
|
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 }) }))
|
|
178
|
-
|
|
179
|
+
const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) })), (events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
|
|
180
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
181
|
+
// @ts-ignore
|
|
182
|
+
, {
|
|
183
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
184
|
+
// @ts-ignore
|
|
185
|
+
color: showMyEvents ? 'secondary' : 'default',
|
|
186
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
187
|
+
// @ts-ignore
|
|
188
|
+
variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents),
|
|
189
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
190
|
+
// @ts-ignore
|
|
191
|
+
showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null }) })))] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
192
|
+
e.preventDefault();
|
|
193
|
+
if (e.key === 'Enter') {
|
|
194
|
+
fetchEvents(true);
|
|
195
|
+
}
|
|
196
|
+
}, InputProps: {
|
|
197
|
+
endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchEvents(true) }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: _jsx(Icon, { children: "search" }) })) })))
|
|
179
198
|
} }) })), _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
|
|
180
199
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
181
200
|
// @ts-ignore
|
|
@@ -91,7 +91,6 @@ const OnBoardingWidget = (inProps) => {
|
|
|
91
91
|
}
|
|
92
92
|
return item;
|
|
93
93
|
}));
|
|
94
|
-
setStep(nextStep);
|
|
95
94
|
})
|
|
96
95
|
.catch((error) => {
|
|
97
96
|
Logger.error(SCOPE_SC_UI, error);
|
|
@@ -106,9 +105,6 @@ const OnBoardingWidget = (inProps) => {
|
|
|
106
105
|
variant: 'success',
|
|
107
106
|
autoHideDuration: 7000
|
|
108
107
|
});
|
|
109
|
-
if (_step.step === step.step) {
|
|
110
|
-
setStep(nextStep);
|
|
111
|
-
}
|
|
112
108
|
};
|
|
113
109
|
const getSteps = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
114
110
|
yield OnBoardingService.getAllSteps()
|
|
@@ -4,7 +4,7 @@ import { Alert, Button, CardMedia, Icon, Typography } from '@mui/material';
|
|
|
4
4
|
import Box from '@mui/material/Box';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
|
-
import { useEffect, useState } from 'react';
|
|
7
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
8
8
|
import { FormattedMessage } from 'react-intl';
|
|
9
9
|
import { PREFIX } from '../../constants';
|
|
10
10
|
import ProgressBar from '../../../../shared/ProgressBar';
|
|
@@ -69,6 +69,25 @@ export default function Category(inProps) {
|
|
|
69
69
|
return () => clearInterval(intervalId);
|
|
70
70
|
}
|
|
71
71
|
}, [step.status, step.completion_percentage]);
|
|
72
|
+
const getLoadingMessage = useMemo(() => {
|
|
73
|
+
let message;
|
|
74
|
+
if (progress <= 10) {
|
|
75
|
+
message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.a", defaultMessage: "ui.onBoardingWidget.step.categories.loading.a" }));
|
|
76
|
+
}
|
|
77
|
+
else if (progress <= 20) {
|
|
78
|
+
message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.b", defaultMessage: "ui.onBoardingWidget.step.categories.loading.b" }));
|
|
79
|
+
}
|
|
80
|
+
else if (progress <= 40) {
|
|
81
|
+
message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.c", defaultMessage: "ui.onBoardingWidget.step.categories.loading.c" }));
|
|
82
|
+
}
|
|
83
|
+
else if (progress <= 60) {
|
|
84
|
+
message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.d", defaultMessage: "ui.onBoardingWidget.step.categories.loading.d" }));
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.e", defaultMessage: "ui.onBoardingWidget.step.categories.loading.e" }));
|
|
88
|
+
}
|
|
89
|
+
return message;
|
|
90
|
+
}, [progress]);
|
|
72
91
|
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
|
|
73
92
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
74
93
|
// @ts-ignore
|
|
@@ -79,5 +98,5 @@ export default function Category(inProps) {
|
|
|
79
98
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
80
99
|
// @ts-ignore
|
|
81
100
|
iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
|
|
82
|
-
} }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children:
|
|
101
|
+
} }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
|
|
83
102
|
}
|
|
@@ -4,7 +4,7 @@ import { Alert, Button, Icon, Typography } from '@mui/material';
|
|
|
4
4
|
import Box from '@mui/material/Box';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
|
-
import { useEffect, useState } from 'react';
|
|
7
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
8
8
|
import { PREFIX } from '../../constants';
|
|
9
9
|
import { FormattedMessage } from 'react-intl';
|
|
10
10
|
import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
|
|
@@ -49,5 +49,24 @@ export default function Content(inProps) {
|
|
|
49
49
|
return () => clearInterval(intervalId);
|
|
50
50
|
}
|
|
51
51
|
}, [step.status, step.completion_percentage]);
|
|
52
|
-
|
|
52
|
+
const getLoadingMessage = useMemo(() => {
|
|
53
|
+
let message;
|
|
54
|
+
if (progress <= 10) {
|
|
55
|
+
message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.a", defaultMessage: "ui.onBoardingWidget.step.contents.loading.a" });
|
|
56
|
+
}
|
|
57
|
+
else if (progress <= 20) {
|
|
58
|
+
message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.b", defaultMessage: "ui.onBoardingWidget.step.contents.loading.b" });
|
|
59
|
+
}
|
|
60
|
+
else if (progress <= 40) {
|
|
61
|
+
message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.c", defaultMessage: "ui.onBoardingWidget.step.contents.loading.c" });
|
|
62
|
+
}
|
|
63
|
+
else if (progress <= 60) {
|
|
64
|
+
message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.d", defaultMessage: "ui.onBoardingWidget.step.contents.loading.d" });
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.e", defaultMessage: "ui.onBoardingWidget.step.contents.loading.e" });
|
|
68
|
+
}
|
|
69
|
+
return message;
|
|
70
|
+
}, [progress]);
|
|
71
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
|
|
53
72
|
}
|