@selfcommunity/react-ui 0.8.0-alpha.2 → 0.8.0-alpha.4

package/lib/esm/components/EventForm/EventForm.js

@@ -111,7 +111,7 @@ const Root = styled(BaseDialog, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -123,23 +123,23 @@ export default function EventForm(inProps) {
     // INTL
     const intl = useIntl();
     const initialFieldState = {
-        imageOriginal: event ? event.image_bigger : '',
+        imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
         imageOriginalFile: '',
         startDate: event ? new Date(event.start_date) : null,
         startTime: event ? new Date(event.start_date) : null,
-        endDate: event && event.end_date ? new Date(event.end_date) : null,
-        endTime: event && event.end_date ? new Date(event.end_date) : null,
-        location: event ? event.location : SCEventLocationType.PERSON,
-        geolocation: event ? event.geolocation : '',
-        lat: event ? event.geolocation_lat : null,
-        lng: event ? event.geolocation_lng : null,
-        link: event ? event.link : '',
-        recurring: event ? event.recurring : SCEventRecurrenceType.NEVER,
-        name: event ? event.name : '',
+        endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
+        endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
+        location: (event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON,
+        geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
+        lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
+        lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
+        link: (event === null || event === void 0 ? void 0 : event.link) || '',
+        recurring: (event === null || event === void 0 ? void 0 : event.recurring) || SCEventRecurrenceType.NEVER,
+        name: (event === null || event === void 0 ? void 0 : event.name) || '',
         description: event ? event.description : '',
-        isPublic: (_a = (event && event.privacy === SCEventPrivacyType.PUBLIC)) !== null && _a !== void 0 ? _a : true,
+        isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
         isSubmitting: false,
-        showEndDateTime: (_b = (event && event.end_date)) !== null && _b !== void 0 ? _b : false
+        showEndDateTime: (_b = !!(event === null || event === void 0 ? void 0 : event.end_date)) !== null && _b !== void 0 ? _b : false
     };
     // STATE
     const [field, setField] = useState(initialFieldState);
@@ -213,14 +213,14 @@ export default function EventForm(inProps) {
         }
         if (field.location === SCEventLocationType.PERSON) {
             formData.append('geolocation', field.geolocation);
-            formData.append('geolocation_lat', field.lat);
-            formData.append('geolocation_lng', field.lng);
+            formData.append('geolocation_lat', field.lat.toString());
+            formData.append('geolocation_lng', field.lng.toString());
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
         }
         if (visibilityEnabled) {
-            formData.append('visible', true);
+            formData.append('visible', 'true');
         }
         formData.append('description', field.description);
         let eventService;
@@ -232,9 +232,9 @@ export default function EventForm(inProps) {
         }
         eventService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         })
             .catch((e) => {
@@ -279,7 +279,7 @@ export default function EventForm(inProps) {
                 field.name.length > EVENT_TITLE_MAX_LENGTH ||
                 field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                 endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
-                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > EVENT_TITLE_MAX_LENGTH) || Boolean(error[`nameError`]), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error[`nameError`] ? (error[`nameError`]) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                            }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
                                             textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
                                         }, slotProps: {
                                             toolbar: {
@@ -308,15 +308,11 @@ export default function EventForm(inProps) {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
-                                        } })) : (_jsx(_Fragment, { children: field.privacy === true ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info.edit", defaultMessage: "ui.eventForm.private.public.info.edit", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
-                                                b: (chunks) => _jsx("strong", { children: chunks })
-                                            } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
-                                                b: (chunks) => _jsx("strong", { children: chunks })
-                                            } })) })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
+                                        } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            b: (chunks) => _jsx("strong", { children: chunks })
+                                        } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
 }

package/lib/esm/components/EventForm/types.d.ts

@@ -0,0 +1,28 @@
+import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
+export declare type Place = {
+    description: string;
+    id?: string;
+};
+export declare type Geolocation = {
+    location: SCEventLocationType;
+    geolocation?: string;
+    lat?: number;
+    lng?: number;
+    link?: string;
+};
+export declare type InitialFieldState = Geolocation & {
+    imageOriginal: string | ArrayBuffer;
+    imageOriginalFile: string | Blob;
+    startDate: Date | null;
+    startTime: Date | null;
+    endDate: Date | null;
+    endTime: Date | null;
+    recurring: SCEventRecurrenceType;
+    name: string;
+    description: string;
+    isPublic: boolean;
+    isSubmitting: boolean;
+    showEndDateTime: boolean;
+};
+export declare type FieldStateKeys = keyof InitialFieldState;
+export declare type FieldStateValues = InitialFieldState[FieldStateKeys];

package/lib/esm/components/EventForm/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/EventHeader/EventHeader.js

@@ -174,5 +174,5 @@ export default function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), _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))] })) }) })] }))] })));
+                            } })) })), _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: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
 }

package/lib/esm/shared/EventActionsMenu/index.d.ts

@@ -18,6 +18,10 @@ export interface EventActionsMenuProps extends IconButtonProps {
      * Handles callback on delete confirm
      */
     onDeleteConfirm?: () => void;
+    /**
+     * Handles on edit success
+     */
+    onEditSuccess?: (data: SCEventType) => any;
     /**
      * Any other properties
      */

package/lib/esm/shared/EventActionsMenu/index.js

@@ -15,6 +15,7 @@ import { copyTextToClipboard } from '@selfcommunity/utils';
 import { enqueueSnackbar } from 'notistack';
 import PubSub from 'pubsub-js';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import EventForm from '../../components/EventForm';
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -69,16 +70,17 @@ export default function EventActionsMenu(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, event, eventId, onDeleteConfirm } = props, rest = __rest(props, ["className", "event", "eventId", "onDeleteConfirm"]);
+    const { className, event, eventId, onDeleteConfirm, onEditSuccess } = props, rest = __rest(props, ["className", "event", "eventId", "onDeleteConfirm", "onEditSuccess"]);
     // STATE
     const [anchorEl, setAnchorEl] = useState(null);
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [openEdit, setOpenEdit] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
     const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const isEventFinished = useMemo(() => {
         if (scEvent && !scEvent.running) {
@@ -93,10 +95,17 @@ export default function EventActionsMenu(inProps) {
     const handleClose = () => {
         setAnchorEl(null);
     };
+    const handleEditClick = () => {
+        setOpenEdit((o) => !o);
+    };
     const handleCloseDialog = () => {
         setOpenConfirmDialog(false);
         setAnchorEl(null);
     };
+    const handleEditSuccess = (data) => {
+        setSCEvent(data);
+        onEditSuccess && onEditSuccess(data);
+    };
     /**
      * Handles thread deletion
      */
@@ -148,6 +157,7 @@ export default function EventActionsMenu(inProps) {
             isEventAdmin &&
                 !isEventFinished && [
                 _jsx(Divider, {}, "divider"),
+                isMobile && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.edit", defaultMessage: "ui.shared.eventActionsMenu.item.edit" })] }), "edit")),
                 _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(CANCEL_EVENT) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.cancel", defaultMessage: "ui.shared.eventActionsMenu.item.cancel" })] }), "cancel")
             ]
         ];
@@ -155,5 +165,5 @@ export default function EventActionsMenu(inProps) {
     if (!scEvent) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(EventForm, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
 }