Client: CreateGroupDialog: Fix create dialog after rewriting edit dialog
This commit is contained in:
parent
a8e5a244f7
commit
844daabd2f
@ -25,17 +25,21 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { useState, ChangeEvent } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { observer, inject } from "mobx-react";
|
||||
|
||||
import {
|
||||
ModalDialog,
|
||||
ModalDialogType,
|
||||
} from "@docspace/shared/components/modal-dialog";
|
||||
import { Button, ButtonSize } from "@docspace/shared/components/button";
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
import { observer, inject } from "mobx-react";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { createGroup } from "@docspace/shared/api/groups";
|
||||
import { TUser } from "@docspace/shared/api/people/types";
|
||||
import PeopleStore from "SRC_DIR/store/PeopleStore";
|
||||
import GroupsStore from "SRC_DIR/store/GroupsStore";
|
||||
|
||||
import { StyledModal } from "./CreateEditGroupDialog.styled";
|
||||
import { GroupParams } from "./types";
|
||||
import GroupNameParam from "./sub-components/GroupNameParam";
|
||||
@ -69,10 +73,10 @@ const CreateGroupDialog = ({
|
||||
const onChangeGroupName = (e: ChangeEvent<HTMLInputElement>) =>
|
||||
setGroupParams({ ...groupParams, groupName: e.target.value });
|
||||
|
||||
const setGroupManager = (groupManager: object | null) =>
|
||||
const setGroupManager = (groupManager: TUser | null) =>
|
||||
setGroupParams({ ...groupParams, groupManager });
|
||||
|
||||
const setGroupMembers = (groupMembers: object[]) =>
|
||||
const setGroupMembers = (groupMembers: TUser[]) =>
|
||||
setGroupParams((prevState) => ({ ...prevState, groupMembers }));
|
||||
|
||||
const [selectGroupMangerPanelIsVisible, setSelectGroupMangerPanelIsVisible] =
|
||||
@ -89,6 +93,44 @@ const CreateGroupDialog = ({
|
||||
const onShowSelectMembersPanel = () => setSelectMembersPanelIsVisible(true);
|
||||
const onHideSelectMembersPanel = () => setSelectMembersPanelIsVisible(false);
|
||||
|
||||
const removeManager = () => {
|
||||
setGroupManager(null);
|
||||
setGroupMembers(
|
||||
groupParams.groupMembers?.filter(
|
||||
(gm) => gm.id !== groupParams.groupManager!.id,
|
||||
) || [],
|
||||
);
|
||||
};
|
||||
|
||||
const addMembers = (newGroupMembers: TUser[]) => {
|
||||
const resultGroupMembers: TUser[] = [...groupParams.groupMembers];
|
||||
let showErrorWasSelected = false;
|
||||
|
||||
newGroupMembers.forEach((groupMember) => {
|
||||
if (
|
||||
groupParams.groupMembers.findIndex((gm) => gm.id === groupMember.id) !==
|
||||
-1
|
||||
) {
|
||||
showErrorWasSelected = true;
|
||||
return;
|
||||
}
|
||||
resultGroupMembers.push(groupMember);
|
||||
});
|
||||
|
||||
if (showErrorWasSelected) {
|
||||
toastr.warning("Some users have already been added");
|
||||
}
|
||||
|
||||
setGroupMembers(resultGroupMembers);
|
||||
};
|
||||
|
||||
const removeMember = (member: TUser) => {
|
||||
const newGroupMembers = groupParams.groupMembers?.filter(
|
||||
(gm) => gm.id !== member.id,
|
||||
);
|
||||
setGroupMembers(newGroupMembers || []);
|
||||
};
|
||||
|
||||
const onCreateGroup = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
@ -127,15 +169,13 @@ const CreateGroupDialog = ({
|
||||
/>
|
||||
<HeadOfGroup
|
||||
groupManager={groupParams.groupManager}
|
||||
setGroupManager={setGroupManager}
|
||||
groupMembers={groupParams.groupMembers}
|
||||
setGroupMembers={setGroupMembers}
|
||||
removeManager={removeManager}
|
||||
onShowSelectGroupManagerPanel={onShowSelectGroupManagerPanel}
|
||||
/>
|
||||
<MembersParam
|
||||
groupManager={groupParams.groupManager}
|
||||
groupMembers={groupParams.groupMembers}
|
||||
setGroupMembers={setGroupMembers}
|
||||
removeMember={removeMember}
|
||||
onShowSelectMembersPanel={onShowSelectMembersPanel}
|
||||
/>
|
||||
</ModalDialog.Body>
|
||||
@ -183,13 +223,17 @@ const CreateGroupDialog = ({
|
||||
onParentPanelClose={onClose}
|
||||
groupManager={groupParams.groupManager}
|
||||
groupMembers={groupParams.groupMembers}
|
||||
setGroupMembers={setGroupMembers}
|
||||
addMembers={addMembers}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ peopleStore }) => ({
|
||||
getGroups: peopleStore.groupsStore.getGroups,
|
||||
}))(observer(CreateGroupDialog));
|
||||
export default inject<{ peopleStore: PeopleStore }>(({ peopleStore }) => {
|
||||
const { getGroups } = peopleStore.groupsStore! as GroupsStore;
|
||||
|
||||
return {
|
||||
getGroups,
|
||||
};
|
||||
})(observer(CreateGroupDialog));
|
||||
|
@ -167,7 +167,6 @@ const EditGroupDialog = ({
|
||||
<MembersParam
|
||||
groupManager={manager}
|
||||
groupMembers={members}
|
||||
setGroupMembers={addMembers}
|
||||
removeMember={removeMember}
|
||||
onShowSelectMembersPanel={onShowSelectMembersPanel}
|
||||
withInfiniteLoader
|
||||
|
@ -1,74 +0,0 @@
|
||||
// (c) Copyright Ascensio System SIA 2009-2024
|
||||
//
|
||||
// This program is a free software product.
|
||||
// You can redistribute it and/or modify it under the terms
|
||||
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||
// any third-party rights.
|
||||
//
|
||||
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
//
|
||||
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||
//
|
||||
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||
//
|
||||
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||
// trademark law for use of our trademarks.
|
||||
//
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { GroupParams } from "../types";
|
||||
import GroupNameParam from "./GroupNameParam";
|
||||
import { Dispatch, ChangeEvent } from "react";
|
||||
import HeadOfGroup from "./HeadOfGroupParam";
|
||||
import MembersParam from "./MembersParam";
|
||||
|
||||
interface CreateGroupDialogBodyProps {
|
||||
groupParams: GroupParams;
|
||||
setGroupParams: Dispatch<React.SetStateAction<GroupParams>>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CreateGroupDialogBody = ({
|
||||
groupParams,
|
||||
setGroupParams,
|
||||
onClose,
|
||||
}: CreateGroupDialogBodyProps) => {
|
||||
const onChangeGroupName = (e: ChangeEvent<HTMLInputElement>) =>
|
||||
setGroupParams({ ...groupParams, groupName: e.target.value });
|
||||
|
||||
const setGroupManager = (groupManager: object) =>
|
||||
setGroupParams({ ...groupParams, groupManager });
|
||||
|
||||
const setGroupMembers = (groupMembers: object[]) =>
|
||||
setGroupParams({ ...groupParams, groupMembers });
|
||||
|
||||
return (
|
||||
<>
|
||||
<GroupNameParam
|
||||
groupName={groupParams.groupName}
|
||||
onChangeGroupName={onChangeGroupName}
|
||||
/>
|
||||
<HeadOfGroup
|
||||
groupManager={groupParams.groupManager}
|
||||
setGroupManager={setGroupManager}
|
||||
onClose={onClose}
|
||||
/>
|
||||
<MembersParam
|
||||
groupManager={groupParams.groupManager}
|
||||
groupMembers={groupParams.groupMembers}
|
||||
setGroupMembers={setGroupMembers}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateGroupDialogBody;
|
@ -24,7 +24,6 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { SelectorAddButton } from "@docspace/shared/components/selector-add-button";
|
||||
@ -52,7 +51,6 @@ type InfiniteLoaderProps =
|
||||
type MembersParamProps = {
|
||||
groupManager: TUser | null;
|
||||
groupMembers: TUser[] | null;
|
||||
setGroupMembers: (groupMembers: TUser[]) => void;
|
||||
onShowSelectMembersPanel: () => void;
|
||||
removeMember: (member: TUser) => void;
|
||||
} & InfiniteLoaderProps;
|
||||
|
@ -34,7 +34,7 @@ type SelectMembersPanelProps = {
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
onParentPanelClose: () => void;
|
||||
groupManager?: TUser;
|
||||
groupManager: TUser | null;
|
||||
groupMembers: TUser[];
|
||||
addMembers: (members: TUser[]) => void;
|
||||
};
|
||||
|
@ -28,8 +28,8 @@ import { TUser } from "@docspace/shared/api/people/types";
|
||||
|
||||
export type GroupParams = {
|
||||
groupName: string;
|
||||
groupManager: object | null;
|
||||
groupMembers: object[];
|
||||
groupManager: TUser | null;
|
||||
groupMembers: TUser[];
|
||||
};
|
||||
|
||||
export type GroupMembers = TUser[] | null;
|
||||
|
@ -38,7 +38,7 @@ import {
|
||||
|
||||
export const createGroup = (
|
||||
groupName: string,
|
||||
groupManager: string,
|
||||
groupManager: string | undefined,
|
||||
members: string[],
|
||||
) => {
|
||||
return request({
|
||||
@ -49,7 +49,7 @@ export const createGroup = (
|
||||
groupManager,
|
||||
members,
|
||||
},
|
||||
});
|
||||
}) as Promise<TGroup>;
|
||||
};
|
||||
|
||||
// * Read
|
||||
|
Loading…
Reference in New Issue
Block a user