@selfcommunity/react-ui 0.7.9-alpha.39 → 0.7.9-alpha.40

package/lib/cjs/components/Group/Group.js

@@ -59,6 +59,7 @@ const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
  * @param inProps
  */
 function Group(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -69,6 +70,9 @@ function Group(inProps) {
     const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // CONST
+    const isGroupAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
@@ -79,6 +83,7 @@ function Group(inProps) {
     function renderAuthenticatedActions() {
         return (react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
             react_1.default.createElement(material_1.Icon, null, (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public'),
+            isGroupAdmin && react_1.default.createElement(material_1.Icon, null, "face"),
             react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps))));
     }
     /**

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -173,8 +173,10 @@ function GroupForm(inProps) {
         if (field.emotionalImageOriginalFile) {
             formData.append('emotional_image_original', field.emotionalImageOriginalFile);
         }
-        for (const key in field.invitedUsers) {
-            formData.append(key, field.invitedUsers[key]);
+        if (!group) {
+            for (const key in field.invitedUsers) {
+                formData.append(key, field.invitedUsers[key]);
+            }
         }
         let groupService;
         if (group) {
@@ -251,8 +253,9 @@ function GroupForm(inProps) {
                             react_1.default.createElement(material_1.Icon, null, "visibility"),
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
                     react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } }))))))),
-            react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
-                react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))));
+            !group && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Divider, null),
+                react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
+                    react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))))));
 }
 exports.default = GroupForm;

package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js

@@ -22,6 +22,7 @@ const classes = {
     privacyTitle: `${constants_1.PREFIX}-privacy-title`,
     visibility: `${constants_1.PREFIX}-visibility`,
     visibilityTitle: `${constants_1.PREFIX}-visibility-title`,
+    admin: `${constants_1.PREFIX}-admin`,
     date: `${constants_1.PREFIX}-date`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
@@ -125,6 +126,8 @@ function GroupInfoWidget(inProps) {
                 react_1.default.createElement(material_1.Typography, { variant: "body2" },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })))))),
             react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.date },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })))));
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })),
+            react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.admin },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks), admin: scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by.username } })))));
 }
 exports.default = GroupInfoWidget;

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js

@@ -91,11 +91,11 @@ function GroupInviteButton(inProps) {
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [invited, setInvited] = (0, react_1.useState)([]);
     function convertToInvitedUsersObject(data) {
-        const invited_users = {};
+        const invite_users = {};
         data.forEach((user, index) => {
-            invited_users[`invited_users[${index}]`] = user.id;
+            invite_users[`invite_users[${index}]`] = user.id;
         });
-        return invited_users;
+        return invite_users;
     }
     /**
      * Memoized users invited ids

package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js

@@ -22,10 +22,12 @@ const constants_1 = require("./constants");
 const User_1 = tslib_1.__importStar(require("../User"));
 const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
 const GroupSettingsIconButton_1 = tslib_1.__importDefault(require("../GroupSettingsIconButton"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
     actions: `${constants_1.PREFIX}-actions`,
+    badge: `${constants_1.PREFIX}-badge`,
     noResults: `${constants_1.PREFIX}-no-results`,
     showMore: `${constants_1.PREFIX}-show-more`,
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
@@ -197,10 +199,11 @@ function GroupMembersWidget(inProps) {
             !state.count ? (react_1.default.createElement(material_1.Typography, { className: classes.noResults, variant: "body2" },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(List_1.default, null, state.results.slice(0, state.visibleItems).map((user) => {
-                    var _a;
+                    var _a, _b;
                     return (react_1.default.createElement(material_1.ListItem, { key: user.id },
                         react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
-                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, badgeContent: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id ? (react_1.default.createElement(material_1.Avatar, { className: classes.badge },
+                                react_1.default.createElement(Icon_1.default, null, "face"))) : null, user: user, userId: user.id })));
                 })),
                 state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }))))),
@@ -208,10 +211,11 @@ function GroupMembersWidget(inProps) {
                 react_1.default.createElement(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: react_1.default.createElement(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: react_1.default.createElement(material_1.Typography, { className: classes.endMessage },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
                     react_1.default.createElement(List_1.default, null, state.results.map((user) => {
-                        var _a;
+                        var _a, _b;
                         return (react_1.default.createElement(material_1.ListItem, { key: user.id },
                             react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
-                                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, badgeContent: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id ? (react_1.default.createElement(material_1.Avatar, { className: classes.badge },
+                                    react_1.default.createElement(Icon_1.default, null, "face"))) : null, user: user, userId: user.id })));
                     })))))),
         react_1.default.createElement(material_1.CardActions, { className: classes.actions },
             react_1.default.createElement(GroupInviteButton_1.default, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));

package/lib/cjs/components/Groups/Groups.d.ts

@@ -26,6 +26,21 @@ export interface GroupsProps {
      * @default null
      */
     general?: boolean;
+    /**
+     * Show/Hide filters
+     * @default false
+     */
+    showFilters?: boolean;
+    /**
+     * Override filter func
+     * @default null
+     */
+    handleFilterGroups?: (groups: SCGroupType[]) => SCGroupType[];
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
     /**
      * Other props
      */

package/lib/cjs/components/Groups/Groups.js

@@ -17,6 +17,7 @@ const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("../Group"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
+    filters: `${constants_1.PREFIX}-filter`,
     groups: `${constants_1.PREFIX}-groups`,
     item: `${constants_1.PREFIX}-item`,
     noResults: `${constants_1.PREFIX}-no-results`,
@@ -64,10 +65,11 @@ function Groups(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, prefetchedGroups = [], general } = props, rest = tslib_1.__rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "general"]);
+    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, prefetchedGroups = [], showFilters = false, filters, handleFilterGroups, general } = props, rest = tslib_1.__rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "showFilters", "filters", "handleFilterGroups", "general"]);
     // STATE
     const [groups, setGroups] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
+    const [filterName, setFilterName] = (0, react_1.useState)('');
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scPreferencesContext = (0, react_core_1.useSCPreferences)();
@@ -120,16 +122,42 @@ function Groups(inProps) {
             setGroups(_updated);
         }
     };
+    /**
+     * Get groups filtered
+     */
+    const getFilteredGroups = () => {
+        if (handleFilterGroups) {
+            return handleFilterGroups(groups);
+        }
+        if (filterName) {
+            return groups.filter((g) => g.name.toLowerCase().includes(filterName.toLowerCase()));
+        }
+        return groups;
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleOnChangeFilterName = (event) => {
+        setFilterName(event.target.value);
+    };
+    /**
+     * Renders groups list
+     */
+    const filteredGroups = (0, utils_1.sortByAttr)(getFilteredGroups(), 'order');
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        showFilters && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
+            react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
+        loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
+            react_1.default.createElement(material_1.Typography, { variant: "h4" },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
+            react_1.default.createElement(material_1.Typography, { variant: "body1" },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, filteredGroups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
+            react_1.default.createElement(Group_1.default, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return react_1.default.createElement(HiddenPlaceholder_1.default, null);
     }
-    const content = (react_1.default.createElement(react_1.default.Fragment, null, loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
-        react_1.default.createElement(material_1.Typography, { variant: "h4" },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
-        react_1.default.createElement(material_1.Typography, { variant: "body1" },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, groups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
-        react_1.default.createElement(Group_1.default, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }
 exports.default = Groups;

package/lib/esm/components/Group/Group.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Icon, Stack } from '@mui/material';
 import { SCGroupPrivacyType } from '@selfcommunity/types';
-import { Link, SCRoutes, useSCFetchGroup, useSCRouting } from '@selfcommunity/react-core';
+import { Link, SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { defineMessages, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -57,6 +57,7 @@ const Root = styled(BaseItemButton, {
  * @param inProps
  */
 export default function Group(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -67,6 +68,9 @@ export default function Group(inProps) {
     const { scGroup } = useSCFetchGroup({ id: groupId, group });
     // CONTEXT
     const scRoutingContext = useSCRouting();
+    const scUserContext = useSCUser();
+    // CONST
+    const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = useState(false);
     // INTL
     const intl = useIntl();
@@ -77,6 +81,7 @@ export default function Group(inProps) {
     function renderAuthenticatedActions() {
         return (React.createElement(Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
             React.createElement(Icon, null, (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public'),
+            isGroupAdmin && React.createElement(Icon, null, "face"),
             React.createElement(GroupSubscribeButton, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps))));
     }
     /**

package/lib/esm/components/GroupForm/GroupForm.js

@@ -171,8 +171,10 @@ export default function GroupForm(inProps) {
         if (field.emotionalImageOriginalFile) {
             formData.append('emotional_image_original', field.emotionalImageOriginalFile);
         }
-        for (const key in field.invitedUsers) {
-            formData.append(key, field.invitedUsers[key]);
+        if (!group) {
+            for (const key in field.invitedUsers) {
+                formData.append(key, field.invitedUsers[key]);
+            }
         }
         let groupService;
         if (group) {
@@ -249,7 +251,8 @@ export default function GroupForm(inProps) {
                             React.createElement(Icon, null, "visibility"),
                             React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
                     React.createElement(Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } }))))))),
-            React.createElement(Divider, null),
-            React.createElement(Box, { className: classes.inviteSection },
-                React.createElement(GroupInviteButton, { handleInvitations: handleInviteSection })))));
+            !group && (React.createElement(React.Fragment, null,
+                React.createElement(Divider, null),
+                React.createElement(Box, { className: classes.inviteSection },
+                    React.createElement(GroupInviteButton, { handleInvitations: handleInviteSection })))))));
 }

package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js

@@ -20,6 +20,7 @@ const classes = {
     privacyTitle: `${PREFIX}-privacy-title`,
     visibility: `${PREFIX}-visibility`,
     visibilityTitle: `${PREFIX}-visibility-title`,
+    admin: `${PREFIX}-admin`,
     date: `${PREFIX}-date`
 };
 const Root = styled(Widget, {
@@ -123,5 +124,7 @@ export default function GroupInfoWidget(inProps) {
                 React.createElement(Typography, { variant: "body2" },
                     React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })))))),
             React.createElement(Typography, { variant: "body2", className: classes.date },
-                React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })))));
+                React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })),
+            React.createElement(Typography, { variant: "body2", className: classes.admin },
+                React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: { b: (chunks) => React.createElement("strong", null, chunks), admin: scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by.username } })))));
 }

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js

@@ -89,11 +89,11 @@ export default function GroupInviteButton(inProps) {
     const [loading, setLoading] = useState(false);
     const [invited, setInvited] = useState([]);
     function convertToInvitedUsersObject(data) {
-        const invited_users = {};
+        const invite_users = {};
         data.forEach((user, index) => {
-            invited_users[`invited_users[${index}]`] = user.id;
+            invite_users[`invite_users[${index}]`] = user.id;
         });
-        return invited_users;
+        return invite_users;
     }
     /**
      * Memoized users invited ids

package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
-import { Button, CardActions, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Avatar, Button, CardActions, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
 import Widget from '../Widget';
 import { http, Endpoints, GroupService } from '@selfcommunity/api-services';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
@@ -20,10 +20,12 @@ import { PREFIX } from './constants';
 import User, { UserSkeleton } from '../User';
 import GroupInviteButton from '../GroupInviteButton';
 import GroupSettingsIconButton from '../GroupSettingsIconButton';
+import Icon from '@mui/material/Icon';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
     actions: `${PREFIX}-actions`,
+    badge: `${PREFIX}-badge`,
     noResults: `${PREFIX}-no-results`,
     showMore: `${PREFIX}-show-more`,
     dialogRoot: `${PREFIX}-dialog-root`,
@@ -195,10 +197,11 @@ export default function GroupMembersWidget(inProps) {
             !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
                 React.createElement(FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }))) : (React.createElement(React.Fragment, null,
                 React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => {
-                    var _a;
+                    var _a, _b;
                     return (React.createElement(ListItem, { key: user.id },
                         React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (React.createElement(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
-                                React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                                React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, badgeContent: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id ? (React.createElement(Avatar, { className: classes.badge },
+                                React.createElement(Icon, null, "face"))) : null, user: user, userId: user.id })));
                 })),
                 state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                     React.createElement(FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }))))),
@@ -206,10 +209,11 @@ export default function GroupMembersWidget(inProps) {
                 React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
                         React.createElement(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
                     React.createElement(List, null, state.results.map((user) => {
-                        var _a;
+                        var _a, _b;
                         return (React.createElement(ListItem, { key: user.id },
                             React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (React.createElement(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
-                                    React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                                    React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, badgeContent: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id ? (React.createElement(Avatar, { className: classes.badge },
+                                    React.createElement(Icon, null, "face"))) : null, user: user, userId: user.id })));
                     })))))),
         React.createElement(CardActions, { className: classes.actions },
             React.createElement(GroupInviteButton, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));

package/lib/esm/components/Groups/Groups.d.ts

@@ -26,6 +26,21 @@ export interface GroupsProps {
      * @default null
      */
     general?: boolean;
+    /**
+     * Show/Hide filters
+     * @default false
+     */
+    showFilters?: boolean;
+    /**
+     * Override filter func
+     * @default null
+     */
+    handleFilterGroups?: (groups: SCGroupType[]) => SCGroupType[];
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
     /**
      * Other props
      */

package/lib/esm/components/Groups/Groups.js

@@ -1,9 +1,9 @@
 import { __awaiter, __rest } from "tslib";
 import React, { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, TextField, Typography } from '@mui/material';
 import { http } from '@selfcommunity/api-services';
-import { Logger } from '@selfcommunity/utils';
+import { Logger, sortByAttr } from '@selfcommunity/utils';
 import { SCPreferences, useIsComponentMountedRef, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
@@ -15,6 +15,7 @@ import { PREFIX } from './constants';
 import Group from '../Group';
 const classes = {
     root: `${PREFIX}-root`,
+    filters: `${PREFIX}-filter`,
     groups: `${PREFIX}-groups`,
     item: `${PREFIX}-item`,
     noResults: `${PREFIX}-no-results`,
@@ -62,10 +63,11 @@ export default function Groups(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, prefetchedGroups = [], general } = props, rest = __rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "general"]);
+    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, prefetchedGroups = [], showFilters = false, filters, handleFilterGroups, general } = props, rest = __rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "showFilters", "filters", "handleFilterGroups", "general"]);
     // STATE
     const [groups, setGroups] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [filterName, setFilterName] = useState('');
     // CONTEXT
     const scUserContext = useSCUser();
     const scPreferencesContext = useSCPreferences();
@@ -118,15 +120,41 @@ export default function Groups(inProps) {
             setGroups(_updated);
         }
     };
+    /**
+     * Get groups filtered
+     */
+    const getFilteredGroups = () => {
+        if (handleFilterGroups) {
+            return handleFilterGroups(groups);
+        }
+        if (filterName) {
+            return groups.filter((g) => g.name.toLowerCase().includes(filterName.toLowerCase()));
+        }
+        return groups;
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleOnChangeFilterName = (event) => {
+        setFilterName(event.target.value);
+    };
+    /**
+     * Renders groups list
+     */
+    const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
+    const content = (React.createElement(React.Fragment, null,
+        showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
+            React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
+        loading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
+            React.createElement(Typography, { variant: "h4" },
+                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
+            React.createElement(Typography, { variant: "body1" },
+                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, filteredGroups.map((group) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
+            React.createElement(Group, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return React.createElement(HiddenPlaceholder, null);
     }
-    const content = (React.createElement(React.Fragment, null, loading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
-        React.createElement(Typography, { variant: "h4" },
-            React.createElement(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
-        React.createElement(Typography, { variant: "body1" },
-            React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, groups.map((group) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
-        React.createElement(Group, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }