user role controller

2025-11-19 22:28:15 +03:00
parent a5016b23bb
commit e904297bb9
16 changed files with 531 additions and 71 deletions
--- a/src/views/home/rightpanel/group/ModalUpdate.tsx
+++ b/src/views/home/rightpanel/group/ModalUpdate.tsx
@@ -0,0 +1,208 @@
+import { FC, useEffect, useState } from 'react';
+import { Modal } from '../../../../components/modal/Modal';
+import { PrimaryButton } from '../../../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../../../components/button/SecondaryButton';
+import { Input } from '../../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import {
+    addGroupMember,
+    deleteGroup,
+    fetchGroupById,
+    GroupMember,
+    removeGroupMember,
+    setGroupsStatus,
+    updateGroup,
+} from '../../../../redux/slices/groups';
+import ConfirmModal from '../../../../components/modal/ConfirmModal';
+import { DropDownList } from '../../../../components/drop-down-list/DropDownList';
+import { ReverseButton } from '../../../../components/button/ReverseButton';
+
+interface ModalUpdateProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+    groupId: number;
+    userId: number;
+    user?: GroupMember;
+    adminUser?: GroupMember;
+    groupName?: string;
+}
+
+const ModalUpdate: FC<ModalUpdateProps> = ({
+    active,
+    setActive,
+    groupId,
+    userId,
+    user,
+    adminUser,
+    groupName,
+}) => {
+    const statusLeave = useAppSelector(
+        (state) => state.groups.removeGroupMember.status,
+    );
+    const statusUpdate = useAppSelector(
+        (state) => state.groups.addGroupMember.status,
+    );
+    const dispatch = useAppDispatch();
+
+    const [modalConfirmDeleteUser, setModalConfirmDeleteUser] =
+        useState<boolean>(false);
+    const [modalConfirmRoleActive, setModalConfirmRoleActive] =
+        useState<boolean>(false);
+    const [userRole, setUserRole] = useState<string>('');
+
+    useEffect(() => {
+        if (active) {
+        }
+    }, [active]);
+
+    useEffect(() => {
+        if (statusLeave == 'successful') {
+            dispatch(
+                setGroupsStatus({ key: 'removeGroupMember', status: 'idle' }),
+            );
+            dispatch(fetchGroupById(groupId));
+            setActive(false);
+        }
+    }, [statusLeave]);
+
+    useEffect(() => {
+        if (statusUpdate == 'successful') {
+            dispatch(
+                setGroupsStatus({ key: 'addGroupMember', status: 'idle' }),
+            );
+            dispatch(fetchGroupById(groupId));
+            setActive(false);
+        }
+    }, [statusUpdate]);
+
+    useEffect(() => {
+        console.log(user);
+        if (user) {
+            setUserRole(
+                user?.role.includes('Creator') ? 'Creator' : user?.role,
+            );
+        }
+    }, [user]);
+
+    const roles = [
+        'Member',
+        'Administrator',
+        ...(adminUser?.role.includes('Creator') ? ['Creator'] : []),
+    ];
+
+    return (
+        <Modal
+            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
+            onOpenChange={setActive}
+            open={active}
+            backdrop="blur"
+        >
+            <div className="w-[500px]">
+                <div className="font-bold text-[30px]">
+                    Управление участниками группы:
+                </div>
+                <div className="font-bold text-[20px]">
+                    "{groupName}" #{groupId}
+                </div>
+                <div className="my-[5px]">Пользователь: {user?.username}</div>
+                <div>Текущая роль: {user?.role}</div>
+                <div className="flex flex-row w-full items-center justify-between mt-[20px] gap-[20px]">
+                    <div>
+                        <DropDownList
+                            defaultState={{ value: userRole, text: userRole }}
+                            weight="w-[230px]"
+                            items={roles.map((v) => {
+                                return { text: v, value: v };
+                            })}
+                            onChange={(v) => {
+                                setUserRole(v);
+                            }}
+                        />
+                    </div>
+                    <PrimaryButton
+                        onClick={() => {
+                            setModalConfirmRoleActive(true);
+                        }}
+                        text={
+                            statusUpdate == 'loading'
+                                ? 'Назначить...'
+                                : 'Назначить'
+                        }
+                        disabled={statusUpdate == 'loading'}
+                        color="secondary"
+                    />
+                </div>
+
+                <div className="flex flex-row w-full items-center justify-between mt-[20px] gap-[20px]">
+                    <div className="font-bold text-[24px]">
+                        Исключить пользователя?
+                    </div>
+                    <ReverseButton
+                        onClick={() => {
+                            setModalConfirmDeleteUser(true);
+                        }}
+                        text={
+                            statusLeave == 'loading'
+                                ? 'Исключить...'
+                                : 'Исключить'
+                        }
+                        disabled={statusLeave == 'loading'}
+                        color="error"
+                    />
+                </div>
+
+                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                    <SecondaryButton
+                        onClick={() => {
+                            setActive(false);
+                        }}
+                        text="Отмена"
+                    />
+                </div>
+            </div>
+
+            <ConfirmModal
+                active={modalConfirmDeleteUser}
+                setActive={setModalConfirmDeleteUser}
+                title="Подтвердите действия"
+                message={`Вы действительно хотите исключить пользователя ${user?.username}?`}
+                confirmColor="error"
+                confirmText="Исключить"
+                onConfirmClick={() => {
+                    if (user) {
+                        dispatch(
+                            removeGroupMember({
+                                groupId,
+                                memberId: user.userId,
+                            }),
+                        );
+                    }
+                }}
+            />
+
+            <ConfirmModal
+                active={modalConfirmRoleActive}
+                setActive={setModalConfirmRoleActive}
+                title="Подтвердите действия"
+                message={`Вы действительно хотите назначить пользователя ${user?.username} в качестве ${userRole}?`}
+                confirmText="Назначить"
+                onConfirmClick={() => {
+                    if (user) {
+                        dispatch(
+                            addGroupMember({
+                                groupId,
+                                userId: user.userId,
+                                role:
+                                    userRole == 'Creator'
+                                        ? 'Administrator, Creator'
+                                        : userRole,
+                            }),
+                        );
+                    }
+                }}
+            />
+        </Modal>
+    );
+};
+
+export default ModalUpdate;