feat: add an ability to edit a project gf-88

apps/backend/src/modules/projects/libs/types/types.ts

@@ -3,4 +3,6 @@ export {
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllRequestDto,
 	type ProjectGetAllResponseDto,
+	type ProjectPatchRequestDto,
+	type ProjectPatchResponseDto,
 } from "@git-fit/shared";

apps/backend/src/modules/projects/libs/validation-schemas/validation-schemas.ts

@@ -1 +1,4 @@
-export { projectCreateValidationSchema } from "@git-fit/shared";
+export {
+	projectCreateValidationSchema,
+	projectPatchValidationSchema,
+} from "@git-fit/shared";

apps/backend/src/modules/projects/project.controller.ts

@@ -11,8 +11,12 @@ import { ProjectsApiPath } from "./libs/enums/enums.js";
 import {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllRequestDto,
+	type ProjectPatchRequestDto,
 } from "./libs/types/types.js";
-import { projectCreateValidationSchema } from "./libs/validation-schemas/validation-schemas.js";
+import {
+	projectCreateValidationSchema,
+	projectPatchValidationSchema,
+} from "./libs/validation-schemas/validation-schemas.js";
 import { type ProjectService } from "./project.service.js";
 
 /**
@@ -82,6 +86,21 @@ class ProjectController extends BaseController {
 			method: "GET",
 			path: ProjectsApiPath.$ID,
 		});
+
+		this.addRoute({
+			handler: (options) =>
+				this.patch(
+					options as APIHandlerOptions<{
+						body: ProjectPatchRequestDto;
+						params: { id: string };
+					}>,
+				),
+			method: "PATCH",
+			path: ProjectsApiPath.$ID,
+			validation: {
+				body: projectPatchValidationSchema,
+			},
+		});
 	}
 
 	/**
@@ -189,6 +208,57 @@ class ProjectController extends BaseController {
 			status: HTTPCode.OK,
 		};
 	}
+
+	/**
+	 * @swagger
+	 * /projects/{id}:
+	 *    patch:
+	 *      description: Update project info
+	 *      parameters:
+	 *        - in: path
+	 *          name: id
+	 *          required: true
+	 *          description: The ID of the project to update
+	 *          schema:
+	 *            type: integer
+	 *      requestBody:
+	 *        description: Project data
+	 *        required: true
+	 *        content:
+	 *          application/json:
+	 *            schema:
+	 *              type: object
+	 *              properties:
+	 *                name:
+	 *                  type: string
+	 *                description:
+	 *                  type: string
+	 *      responses:
+	 *        200:
+	 *          description: Successful operation
+	 *          content:
+	 *            application/json:
+	 *              schema:
+	 *                type: object
+	 *                properties:
+	 *                  message:
+	 *                    type: object
+	 *                    $ref: "#/components/schemas/Project"
+	 */
+
+	private async patch(
+		options: APIHandlerOptions<{
+			body: ProjectPatchRequestDto;
+			params: { id: string };
+		}>,
+	): Promise<APIHandlerResponse> {
+		const projectId = Number(options.params.id);
+
+		return {
+			payload: await this.projectService.patch(projectId, options.body),
+			status: HTTPCode.OK,
+		};
+	}
 }
 
 export { ProjectController };

apps/backend/src/modules/projects/project.repository.ts

@@ -1,6 +1,7 @@
 import { SortType } from "~/libs/enums/enums.js";
 import { type Repository } from "~/libs/types/types.js";
 
+import { type ProjectPatchRequestDto } from "./libs/types/types.js";
 import { ProjectEntity } from "./project.entity.js";
 import { type ProjectModel } from "./project.model.js";
 
@@ -65,6 +66,19 @@ class ProjectRepository implements Repository {
 		return item ? ProjectEntity.initialize(item) : null;
 	}
 
+	public async patch(
+		id: number,
+		projectData: ProjectPatchRequestDto,
+	): Promise<ProjectEntity> {
+		const { description, name } = projectData;
+
+		const updatedItem = await this.projectModel
+			.query()
+			.patchAndFetchById(id, { description, name });
+
+		return ProjectEntity.initialize(updatedItem);
+	}
+
 	public update(): ReturnType<Repository["update"]> {
 		return Promise.resolve(null);
 	}

apps/backend/src/modules/projects/project.service.ts

@@ -8,6 +8,8 @@ import {
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllRequestDto,
 	type ProjectGetAllResponseDto,
+	type ProjectPatchRequestDto,
+	type ProjectPatchResponseDto,
 } from "./libs/types/types.js";
 import { ProjectEntity } from "./project.entity.js";
 import { type ProjectRepository } from "./project.repository.js";
@@ -77,6 +79,35 @@ class ProjectService implements Service {
 		};
 	}
 
+	public async patch(
+		id: number,
+		projectData: ProjectPatchRequestDto,
+	): Promise<ProjectPatchResponseDto> {
+		const targetProject = await this.projectRepository.find(id);
+
+		if (!targetProject) {
+			throw new ProjectError({
+				message: ExceptionMessage.PROJECT_NOT_FOUND,
+				status: HTTPCode.NOT_FOUND,
+			});
+		}
+
+		const existingProject = await this.projectRepository.findByName(
+			projectData.name,
+		);
+
+		if (existingProject && existingProject.toObject().id !== id) {
+			throw new ProjectError({
+				message: ExceptionMessage.PROJECT_NAME_USED,
+				status: HTTPCode.CONFLICT,
+			});
+		}
+
+		const updatedItem = await this.projectRepository.patch(id, projectData);
+
+		return updatedItem.toObject();
+	}
+
 	public update(): ReturnType<Service["update"]> {
 		return Promise.resolve(null);
 	}

apps/frontend/src/libs/components/components.ts

@@ -8,6 +8,8 @@ export { IconButton } from "./icon-button/icon-button.js";
 export { Input } from "./input/input.js";
 export { Link, NavLink } from "./link/link.js";
 export { Loader } from "./loader/loader.js";
+export { Menu } from "./menu/menu.js";
+export { MenuItem } from "./menu-item/menu-item.js";
 export { Modal } from "./modal/modal.js";
 export { PageLayout } from "./page-layout/page-layout.js";
 export { Popover } from "./popover/popover.js";

apps/frontend/src/libs/components/header/header.tsx

@@ -1,12 +1,14 @@
 import logoSrc from "~/assets/images/logo.svg";
 import { Avatar, NavLink } from "~/libs/components/components.js";
 import { AppRoute } from "~/libs/enums/enums.js";
-import { useAppSelector } from "~/libs/hooks/hooks.js";
+import { useAppSelector, usePopover } from "~/libs/hooks/hooks.js";
 
 import { UserPopover } from "./libs/components/components.js";
 import styles from "./styles.module.css";
 
 const Header = (): JSX.Element => {
+	const { isOpened, onClose, onOpen } = usePopover();
+
 	const authenticatedUser = useAppSelector(
 		({ auth }) => auth.authenticatedUser,
 	);
@@ -25,8 +27,18 @@ const Header = (): JSX.Element => {
 					<span className={styles["logo-text"]}>Logo</span>
 				</div>
 			</NavLink>
-			<UserPopover email={email} name={name}>
-				<Avatar name={name} />
+			<UserPopover
+				email={email}
+				isOpened={isOpened}
+				name={name}
+				onClose={onClose}
+			>
+				<button
+					className={styles["user-popover-trigger"]}
+					onClick={isOpened ? onClose : onOpen}
+				>
+					<Avatar name={name} />
+				</button>
 			</UserPopover>
 		</header>
 	);

apps/frontend/src/libs/components/header/libs/components/user-popover/user-popover.tsx

@@ -10,10 +10,18 @@ import styles from "./styles.module.css";
 type Properties = {
 	children: React.ReactNode;
 	email: string;
+	isOpened: boolean;
 	name: string;
+	onClose: () => void;
 };
 
-const UserPopover = ({ children, email, name }: Properties): JSX.Element => {
+const UserPopover = ({
+	children,
+	email,
+	isOpened,
+	name,
+	onClose,
+}: Properties): JSX.Element => {
 	const dispatch = useAppDispatch();
 
 	const handleLogout = useCallback((): void => {
@@ -38,6 +46,8 @@ const UserPopover = ({ children, email, name }: Properties): JSX.Element => {
 					</div>
 				</div>
 			}
+			isOpened={isOpened}
+			onClose={onClose}
 		>
 			{children}
 		</Popover>

apps/frontend/src/libs/components/header/styles.module.css

@@ -29,3 +29,13 @@
 	color: var(--color-text-primary);
 	cursor: pointer;
 }
+
+.user-popover-trigger {
+	padding: 0;
+	margin: 0;
+	text-decoration: none;
+	cursor: pointer;
+	background: none;
+	border: none;
+	border-radius: 50%;
+}

apps/frontend/src/libs/components/icon-button/icon-button.tsx

@@ -1,7 +1,7 @@
 import { Icon } from "~/libs/components/components.js";
 import { getValidClassNames } from "~/libs/helpers/helpers.js";
+import { type IconName } from "~/libs/types/types.js";
 
-import { type IconName } from "../icon/libs/types/types.js";
 import { ICON_SIZE } from "./libs/constants/constants.js";
 import styles from "./styles.module.css";
 

apps/frontend/src/libs/components/icon/icon.tsx

@@ -1,5 +1,6 @@
+import { type IconName } from "~/libs/types/types.js";
+
 import { iconNameToSvg } from "./libs/maps/maps.js";
-import { type IconName } from "./libs/types/types.js";
 import styles from "./styles.module.css";
 
 type Properties = {

apps/frontend/src/libs/components/icon/libs/maps/icon-name-to-svg.map.ts

@@ -4,25 +4,28 @@ import Access from "~/assets/images/icons/access.svg?react";
 import Analytics from "~/assets/images/icons/analytics.svg?react";
 import Contributors from "~/assets/images/icons/contributors.svg?react";
 import Cross from "~/assets/images/icons/cross.svg?react";
+import Ellipsis from "~/assets/images/icons/ellipsis.svg?react";
 import Eye from "~/assets/images/icons/eye.svg?react";
 import LeftArrow from "~/assets/images/icons/left-arrow.svg?react";
 import LeftDoubleArrow from "~/assets/images/icons/left-double-arrow.svg?react";
+import Pencil from "~/assets/images/icons/pencil.svg?react";
 import Project from "~/assets/images/icons/project.svg?react";
 import RightArrow from "~/assets/images/icons/right-arrow.svg?react";
 import RightDoubleArrow from "~/assets/images/icons/right-double-arrow.svg?react";
 import Search from "~/assets/images/icons/search.svg?react";
 import StrikedEye from "~/assets/images/icons/striked-eye.svg?react";
-
-import { type IconName } from "../types/types.js";
+import { type IconName } from "~/libs/types/types.js";
 
 const iconNameToSvg: Record<IconName, FC<React.SVGProps<SVGSVGElement>>> = {
 	access: Access,
 	analytics: Analytics,
 	contributors: Contributors,
 	cross: Cross,
+	ellipsis: Ellipsis,
 	eye: Eye,
 	leftArrow: LeftArrow,
 	leftDoubleArrow: LeftDoubleArrow,
+	pencil: Pencil,
 	project: Project,
 	rightArrow: RightArrow,
 	rightDoubleArrow: RightDoubleArrow,

apps/frontend/src/libs/components/menu-item/menu-item.tsx

@@ -0,0 +1,38 @@
+import { Icon } from "~/libs/components/components.js";
+import { getValidClassNames } from "~/libs/helpers/helpers.js";
+import { type IconName } from "~/libs/types/types.js";
+
+import styles from "./styles.module.css";
+
+type Properties = {
+	iconName: IconName;
+	label: string;
+	onClick: () => void;
+	variant?: "danger" | "primary";
+};
+
+const MenuItem = ({
+	iconName,
+	label,
+	onClick,
+	variant = "primary",
+}: Properties): JSX.Element => {
+	const buttonClassName = getValidClassNames(
+		styles["menu-item"],
+		styles[`menu-item-${variant}`],
+	);
+
+	return (
+		<button
+			aria-label={label}
+			className={buttonClassName}
+			onClick={onClick}
+			type="button"
+		>
+			<Icon height={20} name={iconName} width={20} />
+			<span className={styles["menu-item-text"]}>{label}</span>
+		</button>
+	);
+};
+
+export { MenuItem };

apps/frontend/src/libs/components/menu-item/styles.module.css

@@ -0,0 +1,31 @@
+.menu-item {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	padding: 11px 15px;
+	text-align: left;
+	cursor: pointer;
+	background-color: transparent;
+	border: none;
+	border-radius: 4px;
+}
+
+.menu-item:hover {
+	background-color: var(--color-background-hover);
+}
+
+.menu-item-text {
+	margin: 0;
+	font-family: Inter, sans-serif;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.menu-item-primary {
+	color: var(--color-text-primary);
+}
+
+.menu-item-danger {
+	color: var(--color-danger);
+}