LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-04 15:04:59 +03:00
parent 3cd8e14288
commit 4972836164
60 changed files with 3604 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/home/groups/Group.tsx
View File

@@ -1,26 +1,26 @@
import { FC } from "react";
import { cn } from "../../../lib/cn";
import { useParams, Navigate } from "react-router-dom";
import { FC } from 'react';
import { cn } from '../../../lib/cn';
import { useParams, Navigate } from 'react-router-dom';
interface GroupsBlockProps {}
const Group: FC<GroupsBlockProps> = () => {
const { groupId } = useParams<{ groupId: string }>();
const groupIdNumber = Number(groupId);
const { groupId } = useParams<{ groupId: string }>();
const groupIdNumber = Number(groupId);
if (!groupId || isNaN(groupIdNumber) || !groupIdNumber) {
return <Navigate to="/home/groups" replace />;
}
if (!groupId || isNaN(groupIdNumber) || !groupIdNumber) {
return <Navigate to="/home/groups" replace />;
}
return (
<div
className={cn(
"border-b-[1px] border-b-liquid-lighter rounded-[10px]"
)}
>
{groupIdNumber}
</div>
);
return (
<div
className={cn(
'border-b-[1px] border-b-liquid-lighter rounded-[10px]',
)}
>
{groupIdNumber}
</div>
);
};
export default Group;

97
src/views/home/groups/GroupItem.tsx
View File

@@ -1,11 +1,17 @@
import { cn } from "../../../lib/cn";
import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
import { useNavigate } from "react-router-dom";
import { GroupUpdate } from "./Groups";
import { cn } from '../../../lib/cn';
import {
Book,
UserAdd,
Edit,
EyeClosed,
EyeOpen,
} from '../../../assets/icons/groups';
import { useNavigate } from 'react-router-dom';
import { GroupUpdate } from './Groups';
export interface GroupItemProps {
id: number;
role: "menager" | "member" | "owner" | "viewer";
role: 'menager' | 'member' | 'owner' | 'viewer';
visible: boolean;
name: string;
description: string;
@@ -13,61 +19,64 @@ export interface GroupItemProps {
setUpdateGroup: (value: GroupUpdate) => void;
}
interface IconComponentProps {
src: string;
onClick?: () => void;
}
const IconComponent: React.FC<IconComponentProps> = ({
src,
onClick
}) => {
return <img
src={src}
onClick={(e) => {
e.stopPropagation();
if (onClick)
onClick();
}}
className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
/>
}
const IconComponent: React.FC<IconComponentProps> = ({ src, onClick }) => {
return (
<img
src={src}
onClick={(e) => {
e.stopPropagation();
if (onClick) onClick();
}}
className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
/>
);
};
const GroupItem: React.FC<GroupItemProps> = ({
id, name, visible, role, description, setUpdateGroup, setUpdateActive
id,
name,
visible,
role,
description,
setUpdateGroup,
setUpdateActive,
}) => {
const navigate = useNavigate();
return (
<div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter cursor-pointer",
)}
<div
className={cn(
'w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter cursor-pointer',
)}
onClick={() => navigate(`/group/${id}`)}
>
<div className="grid grid-cols-[100px,1fr] gap-[20px]">
<img src={Book} className="bg-liquid-brightmain rounded-[10px]"/>
<img
src={Book}
className="bg-liquid-brightmain rounded-[10px]"
/>
<div className="grid grid-flow-row grid-rows-[1fr,24px]">
<div className="text-[18px] font-bold">
{name}
</div>
<div className="text-[18px] font-bold">{name}</div>
<div className=" flex gap-[10px]">
{
(role == "menager" || role == "owner") && <IconComponent src={UserAdd}/>
}
{
(role == "menager" || role == "owner") && <IconComponent src={Edit} onClick={() => {
setUpdateGroup({id, name, description });
setUpdateActive(true);
}} />
}
{
visible == false && <IconComponent src={EyeOpen} />
}
{
visible == true && <IconComponent src={EyeClosed} />
}
{(role == 'menager' || role == 'owner') && (
<IconComponent src={UserAdd} />
)}
{(role == 'menager' || role == 'owner') && (
<IconComponent
src={Edit}
onClick={() => {
setUpdateGroup({ id, name, description });
setUpdateActive(true);
}}
/>
)}
{visible == false && <IconComponent src={EyeOpen} />}
{visible == true && <IconComponent src={EyeClosed} />}
</div>
</div>
</div>

49
src/views/home/groups/Groups.tsx
View File

@@ -1,12 +1,12 @@
import { useEffect, useMemo, useState } from "react";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
import { cn } from "../../../lib/cn";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import GroupsBlock from "./GroupsBlock";
import { setMenuActivePage } from "../../../redux/slices/store";
import { fetchMyGroups } from "../../../redux/slices/groups";
import ModalCreate from "./ModalCreate";
import ModalUpdate from "./ModalUpdate";
import { useEffect, useMemo, useState } from 'react';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { cn } from '../../../lib/cn';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import GroupsBlock from './GroupsBlock';
import { setMenuActivePage } from '../../../redux/slices/store';
import { fetchMyGroups } from '../../../redux/slices/groups';
import ModalCreate from './ModalCreate';
import ModalUpdate from './ModalUpdate';
export interface GroupUpdate {
id: number;
@@ -17,11 +17,14 @@ export interface GroupUpdate {
const Groups = () => {
const [modalActive, setModalActive] = useState<boolean>(false);
const [modelUpdateActive, setModalUpdateActive] = useState<boolean>(false);
const [updateGroup, setUpdateGroup] = useState<GroupUpdate>({ id: 0, name: "", description: "" });
const [updateGroup, setUpdateGroup] = useState<GroupUpdate>({
id: 0,
name: '',
description: '',
});
const dispatch = useAppDispatch();
// Берём группы из стора
const groups = useAppSelector((store) => store.groups.groups);
@@ -29,8 +32,8 @@ const Groups = () => {
const currentUserName = useAppSelector((store) => store.auth.username);
useEffect(() => {
dispatch(setMenuActivePage("groups"));
dispatch(fetchMyGroups())
dispatch(setMenuActivePage('groups'));
dispatch(fetchMyGroups());
}, [dispatch]);
// Разделяем группы
@@ -44,17 +47,23 @@ const Groups = () => {
const hidden: typeof groups = []; // пока пустые, без логики
groups.forEach((group) => {
const me = group.members.find((m) => m.username === currentUserName);
const me = group.members.find(
(m) => m.username === currentUserName,
);
if (!me) return;
if (me.role === "Administrator") {
if (me.role === 'Administrator') {
managed.push(group);
} else {
current.push(group);
}
});
return { managedGroups: managed, currentGroups: current, hiddenGroups: hidden };
return {
managedGroups: managed,
currentGroups: current,
hiddenGroups: hidden,
};
}, [groups, currentUserName]);
return (
@@ -63,13 +72,15 @@ const Groups = () => {
<div className="relative flex items-center mb-[20px]">
<div
className={cn(
"h-[50px] text-[40px] font-bold text-liquid-white flex items-center"
'h-[50px] text-[40px] font-bold text-liquid-white flex items-center',
)}
>
Группы
</div>
<SecondaryButton
onClick={() => { setModalActive(true); }}
onClick={() => {
setModalActive(true);
}}
text="Создать группу"
className="absolute right-0"
/>
@@ -83,7 +94,6 @@ const Groups = () => {
groups={managedGroups}
setUpdateActive={setModalUpdateActive}
setUpdateGroup={setUpdateGroup}
/>
<GroupsBlock
className="mb-[20px]"
@@ -101,7 +111,6 @@ const Groups = () => {
/>
</div>
<ModalCreate setActive={setModalActive} active={modalActive} />
<ModalUpdate
setActive={setModalUpdateActive}

90
src/views/home/groups/GroupsBlock.tsx
View File

@@ -1,9 +1,9 @@
import { useState, FC } from "react";
import GroupItem from "./GroupItem";
import { cn } from "../../../lib/cn";
import { ChevroneDown } from "../../../assets/icons/groups";
import { Group } from "../../../redux/slices/groups";
import { GroupUpdate } from "./Groups";
import { useState, FC } from 'react';
import GroupItem from './GroupItem';
import { cn } from '../../../lib/cn';
import { ChevroneDown } from '../../../assets/icons/groups';
import { Group } from '../../../redux/slices/groups';
import { GroupUpdate } from './Groups';
interface GroupsBlockProps {
groups: Group[];
@@ -13,46 +13,60 @@ interface GroupsBlockProps {
setUpdateGroup: (value: GroupUpdate) => void;
}
const GroupsBlock: FC<GroupsBlockProps> = ({ groups, title, className, setUpdateActive, setUpdateGroup }) => {
const [active, setActive] = useState<boolean>(title != "Скрытые");
const GroupsBlock: FC<GroupsBlockProps> = ({
groups,
title,
className,
setUpdateActive,
setUpdateGroup,
}) => {
const [active, setActive] = useState<boolean>(title != 'Скрытые');
return (
<div className={cn(" border-b-[1px] border-b-liquid-lighter rounded-[10px]",
className
)}>
<div className={cn(" h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300",
active && " border-b-liquid-lighter"
<div
className={cn(
' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
className,
)}
>
<div
className={cn(
' h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300',
active && ' border-b-liquid-lighter',
)}
onClick={() => {
setActive(!active)
}}>
setActive(!active);
}}
>
<span>{title}</span>
<img src={ChevroneDown} className={cn("transition-all duration-300",
active && "rotate-180"
)}/>
<img
src={ChevroneDown}
className={cn(
'transition-all duration-300',
active && 'rotate-180',
)}
/>
</div>
<div className={cn(" grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300",
active && "grid-rows-[1fr] opacity-100"
)}>
<div
className={cn(
' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
active && 'grid-rows-[1fr] opacity-100',
)}
>
<div className="overflow-hidden">
<div className="grid grid-cols-3 gap-[20px] pt-[20px] pb-[20px] box-border">
{
groups.map((v, i) => <GroupItem
key={i}
id={v.id}
visible={true}
description={v.description}
setUpdateActive={setUpdateActive}
setUpdateGroup={setUpdateGroup}
role={"owner"}
name={v.name}/>)
}
{groups.map((v, i) => (
<GroupItem
key={i}
id={v.id}
visible={true}
description={v.description}
setUpdateActive={setUpdateActive}
setUpdateGroup={setUpdateGroup}
role={'owner'}
name={v.name}
/>
))}
</div>
</div>
</div>

67
src/views/home/groups/ModalCreate.tsx
View File

@@ -1,10 +1,10 @@
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 { createGroup } from "../../../redux/slices/groups";
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 { createGroup } from '../../../redux/slices/groups';
interface ModalCreateProps {
active: boolean;
@@ -12,27 +12,63 @@ interface ModalCreateProps {
}
const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
const [name, setName] = useState<string>("");
const [description, setDescription] = useState<string>("");
const [name, setName] = useState<string>('');
const [description, setDescription] = useState<string>('');
const status = useAppSelector((state) => state.groups.statuses.create);
const dispatch = useAppDispatch();
useEffect(() => {
if (status == "successful") {
if (status == 'successful') {
setActive(false);
}
}, [status]);
return (
<Modal className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white" onOpenChange={setActive} open={active} backdrop="blur" >
<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>
<Input name="name" autocomplete="name" className="mt-[10px]" type="text" label="Название" onChange={(v) => { setName(v) }} placeholder="login" />
<Input name="description" autocomplete="description" className="mt-[10px]" type="text" label="Описание" onChange={(v) => { setDescription(v) }} placeholder="login" />
<Input
name="name"
autocomplete="name"
className="mt-[10px]"
type="text"
label="Название"
onChange={(v) => {
setName(v);
}}
placeholder="login"
/>
<Input
name="description"
autocomplete="description"
className="mt-[10px]"
type="text"
label="Описание"
onChange={(v) => {
setDescription(v);
}}
placeholder="login"
/>
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
<PrimaryButton onClick={() => { dispatch(createGroup({ name, description })) }} text="Создать" disabled={status == "loading"} />
<SecondaryButton onClick={() => { setActive(false); }} text="Отмена" />
<PrimaryButton
onClick={() => {
dispatch(createGroup({ name, description }));
}}
text="Создать"
disabled={status == 'loading'}
/>
<SecondaryButton
onClick={() => {
setActive(false);
}}
text="Отмена"
/>
</div>
</div>
</Modal>
@@ -40,4 +76,3 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
};
export default ModalCreate;

104
src/views/home/groups/ModalUpdate.tsx
View File

@@ -1,10 +1,10 @@
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 { deleteGroup, updateGroup } from "../../../redux/slices/groups";
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 { deleteGroup, updateGroup } from '../../../redux/slices/groups';
interface ModalUpdateProps {
active: boolean;
@@ -14,36 +14,95 @@ interface ModalUpdateProps {
groupDescription: string;
}
const ModalUpdate: FC<ModalUpdateProps> = ({ active, setActive, groupName, groupId, groupDescription }) => {
const [name, setName] = useState<string>("");
const [description, setDescription] = useState<string>("");
const statusUpdate = useAppSelector((state) => state.groups.statuses.update);
const statusDelete = useAppSelector((state) => state.groups.statuses.delete);
const ModalUpdate: FC<ModalUpdateProps> = ({
active,
setActive,
groupName,
groupId,
groupDescription,
}) => {
const [name, setName] = useState<string>('');
const [description, setDescription] = useState<string>('');
const statusUpdate = useAppSelector(
(state) => state.groups.statuses.update,
);
const statusDelete = useAppSelector(
(state) => state.groups.statuses.delete,
);
const dispatch = useAppDispatch();
useEffect(() => {
if (statusUpdate == "successful"){
if (statusUpdate == 'successful') {
setActive(false);
}
}, [statusUpdate]);
useEffect(() => {
if (statusDelete == "successful"){
if (statusDelete == 'successful') {
setActive(false);
}
}, [statusDelete]);
return (
<Modal className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white" onOpenChange={setActive} open={active} backdrop="blur" >
<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]">Изменить группу {groupName} #{groupId}</div>
<Input name="name" autocomplete="name" className="mt-[10px]" type="text" label="Новое название" defaultState={groupName} onChange={(v) => { setName(v)}} placeholder="login"/>
<Input name="description" autocomplete="description" className="mt-[10px]" type="text" label="Описание" onChange={(v) => { setDescription(v)}} placeholder="login" defaultState={groupDescription}/>
<div className="font-bold text-[30px]">
Изменить группу {groupName} #{groupId}
</div>
<Input
name="name"
autocomplete="name"
className="mt-[10px]"
type="text"
label="Новое название"
defaultState={groupName}
onChange={(v) => {
setName(v);
}}
placeholder="login"
/>
<Input
name="description"
autocomplete="description"
className="mt-[10px]"
type="text"
label="Описание"
onChange={(v) => {
setDescription(v);
}}
placeholder="login"
defaultState={groupDescription}
/>
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
<PrimaryButton onClick={() => {dispatch(deleteGroup(groupId))}} text="Удалить" disabled={statusDelete=="loading"} color="error"/>
<PrimaryButton onClick={() => {dispatch(updateGroup({name, description, groupId}))}} text="Обновить" disabled={statusUpdate=="loading"}/>
<SecondaryButton onClick={() => {setActive(false);}} text="Отмена" />
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
<PrimaryButton
onClick={() => {
dispatch(deleteGroup(groupId));
}}
text="Удалить"
disabled={statusDelete == 'loading'}
color="error"
/>
<PrimaryButton
onClick={() => {
dispatch(
updateGroup({ name, description, groupId }),
);
}}
text="Обновить"
disabled={statusUpdate == 'loading'}
/>
<SecondaryButton
onClick={() => {
setActive(false);
}}
text="Отмена"
/>
</div>
</div>
</Modal>
@@ -51,4 +110,3 @@ const ModalUpdate: FC<ModalUpdateProps> = ({ active, setActive, groupName, group
};
export default ModalUpdate;