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

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

@@ -2,4 +2,6 @@ export {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
+	type ProjectUpdateRequestDto,
+	type ProjectUpdateResponseDto,
 } 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,
+	projectUpdateValidationSchema,
+} from "@git-fit/shared";

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

@@ -8,8 +8,14 @@ import { HTTPCode } from "~/libs/modules/http/http.js";
 import { type Logger } from "~/libs/modules/logger/logger.js";
 
 import { ProjectsApiPath } from "./libs/enums/enums.js";
-import { type ProjectCreateRequestDto } from "./libs/types/types.js";
-import { projectCreateValidationSchema } from "./libs/validation-schemas/validation-schemas.js";
+import {
+	type ProjectCreateRequestDto,
+	type ProjectUpdateRequestDto,
+} from "./libs/types/types.js";
+import {
+	projectCreateValidationSchema,
+	projectUpdateValidationSchema,
+} from "./libs/validation-schemas/validation-schemas.js";
 import { type ProjectService } from "./project.service.js";
 
 /**
@@ -74,6 +80,21 @@ class ProjectController extends BaseController {
 			method: "GET",
 			path: ProjectsApiPath.$ID,
 		});
+
+		this.addRoute({
+			handler: (options) =>
+				this.update(
+					options as APIHandlerOptions<{
+						body: ProjectUpdateRequestDto;
+						params: { id: string };
+					}>,
+				),
+			method: "PATCH",
+			path: ProjectsApiPath.$ID,
+			validation: {
+				body: projectUpdateValidationSchema,
+			},
+		});
 	}
 
 	/**
@@ -175,6 +196,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 update(
+		options: APIHandlerOptions<{
+			body: ProjectUpdateRequestDto;
+			params: { id: string };
+		}>,
+	): Promise<APIHandlerResponse> {
+		const projectId = Number(options.params.id);
+
+		return {
+			payload: await this.projectService.update(projectId, options.body),
+			status: HTTPCode.OK,
+		};
+	}
 }
 
 export { ProjectController };

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

@@ -53,6 +53,10 @@ class ProjectEntity implements Entity {
 		});
 	}
 
+	public getId(): null | number {
+		return this.id;
+	}
+
 	public toNewObject(): {
 		description: string;
 		name: string;

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 ProjectUpdateRequestDto } from "./libs/types/types.js";
 import { ProjectEntity } from "./project.entity.js";
 import { type ProjectModel } from "./project.model.js";
 
@@ -51,8 +52,17 @@ class ProjectRepository implements Repository {
 		return item ? ProjectEntity.initialize(item) : null;
 	}
 
-	public update(): ReturnType<Repository["update"]> {
-		return Promise.resolve(null);
+	public async update(
+		id: number,
+		projectData: ProjectUpdateRequestDto,
+	): Promise<ProjectEntity> {
+		const { description, name } = projectData;
+
+		const updatedItem = await this.projectModel
+			.query()
+			.patchAndFetchById(id, { description, name });
+
+		return ProjectEntity.initialize(updatedItem);
 	}
 }
 

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

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

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

@@ -4,9 +4,11 @@ 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 Edit from "~/assets/images/icons/edit.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 Options from "~/assets/images/icons/options.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";
@@ -19,9 +21,11 @@ const iconNameToSvg: Record<IconName, FC<React.SVGProps<SVGSVGElement>>> = {
 	analytics: Analytics,
 	contributors: Contributors,
 	cross: Cross,
+	edit: Edit,
 	eye: Eye,
 	leftArrow: LeftArrow,
 	leftDoubleArrow: LeftDoubleArrow,
+	options: Options,
 	project: Project,
 	rightArrow: RightArrow,
 	rightDoubleArrow: RightDoubleArrow,

apps/frontend/src/libs/components/icon/libs/types/icon-name.type.ts

@@ -3,9 +3,11 @@ type IconName =
 	| "analytics"
 	| "contributors"
 	| "cross"
+	| "edit"
 	| "eye"
 	| "leftArrow"
 	| "leftDoubleArrow"
+	| "options"
 	| "project"
 	| "rightArrow"
 	| "rightDoubleArrow"

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

@@ -2,7 +2,7 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 999;
+	z-index: 1000;
 	width: 100vw;
 	height: 100vh;
 	background-color: var(--color-overlay);

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

@@ -6,7 +6,7 @@
 	position: absolute;
 	top: 100%;
 	right: 0;
-	z-index: 1000;
+	z-index: 999;
 	margin-top: 4px;
 	background-color: var(--color-background-secondary);
 	border: 1px solid var(--color-border-secondary);

apps/frontend/src/libs/enums/notification-message.enum.ts

@@ -1,5 +1,6 @@
 const NotificationMessage = {
 	PROJECT_CREATE_SUCCESS: "Project was successfully created",
+	PROJECT_UPDATE_SUCCESS: "Project was successfully updated.",
 	SUCCESS_PROFILE_UPDATE: "Successfully updated profile information.",
 } as const;
 

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

@@ -2,4 +2,6 @@ export {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
+	type ProjectUpdateRequestDto,
+	type ProjectUpdateResponseDto,
 } from "@git-fit/shared";

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

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

apps/frontend/src/modules/projects/projects-api.ts

@@ -8,6 +8,8 @@ import {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
+	type ProjectUpdateRequestDto,
+	type ProjectUpdateResponseDto,
 } from "./libs/types/types.js";
 
 type Constructor = {
@@ -64,6 +66,23 @@ class ProjectApi extends BaseHTTPApi {
 
 		return await response.json<ProjectGetAllItemResponseDto>();
 	}
+
+	public async update(
+		id: number,
+		payload: ProjectUpdateRequestDto,
+	): Promise<ProjectUpdateResponseDto> {
+		const response = await this.load(
+			this.getFullEndpoint(ProjectsApiPath.$ID, { id: String(id) }),
+			{
+				contentType: ContentType.JSON,
+				hasAuth: true,
+				method: "PATCH",
+				payload: JSON.stringify(payload),
+			},
+		);
+
+		return await response.json<ProjectUpdateResponseDto>();
+	}
 }
 
 export { ProjectApi };

apps/frontend/src/modules/projects/projects.ts

@@ -15,6 +15,11 @@ export {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
+	type ProjectUpdateRequestDto,
+	type ProjectUpdateResponseDto,
 } from "./libs/types/types.js";
-export { projectCreateValidationSchema } from "./libs/validation-schemas/validation-schemas.js";
+export {
+	projectCreateValidationSchema,
+	projectUpdateValidationSchema,
+} from "./libs/validation-schemas/validation-schemas.js";
 export { actions, reducer } from "./slices/projects.js";

apps/frontend/src/modules/projects/slices/actions.ts

@@ -6,6 +6,8 @@ import {
 	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
+	type ProjectUpdateRequestDto,
+	type ProjectUpdateResponseDto,
 } from "~/modules/projects/projects.js";
 
 import { name as sliceName } from "./project.slice.js";
@@ -44,4 +46,18 @@ const create = createAsyncThunk<
 	return response;
 });
 
-export { create, getById, loadAll };
+const update = createAsyncThunk<
+	ProjectUpdateResponseDto,
+	{ id: number; payload: ProjectUpdateRequestDto },
+	AsyncThunkConfig
+>(`${sliceName}/update`, async ({ id, payload }, { extra }) => {
+	const { projectApi, toastNotifier } = extra;
+
+	const updatedProject = await projectApi.update(id, payload);
+
+	toastNotifier.showSuccess(NotificationMessage.PROJECT_UPDATE_SUCCESS);
+
+	return updatedProject;
+});
+
+export { create, getById, loadAll, update };

apps/frontend/src/modules/projects/slices/project.slice.ts

@@ -4,14 +4,15 @@ import { DataStatus } from "~/libs/enums/enums.js";
 import { type ValueOf } from "~/libs/types/types.js";
 import { type ProjectGetAllItemResponseDto } from "~/modules/projects/projects.js";
 
-import { create, getById, loadAll } from "./actions.js";
+import { create, getById, loadAll, update } from "./actions.js";
 
 type State = {
 	dataStatus: ValueOf<typeof DataStatus>;
 	project: null | ProjectGetAllItemResponseDto;
 	projectCreateStatus: ValueOf<typeof DataStatus>;
 	projects: ProjectGetAllItemResponseDto[];
 	projectStatus: ValueOf<typeof DataStatus>;
+	projectUpdateStatus: ValueOf<typeof DataStatus>;
 };
 
 const initialState: State = {
@@ -20,6 +21,7 @@ const initialState: State = {
 	projectCreateStatus: DataStatus.IDLE,
 	projects: [],
 	projectStatus: DataStatus.IDLE,
+	projectUpdateStatus: DataStatus.IDLE,
 };
 
 const { actions, name, reducer } = createSlice({
@@ -56,6 +58,20 @@ const { actions, name, reducer } = createSlice({
 		builder.addCase(create.rejected, (state) => {
 			state.projectCreateStatus = DataStatus.REJECTED;
 		});
+		builder.addCase(update.pending, (state) => {
+			state.projectUpdateStatus = DataStatus.PENDING;
+		});
+		builder.addCase(update.fulfilled, (state, action) => {
+			const updatedProject = action.payload;
+			state.projects = state.projects.map((project) =>
+				project.id === updatedProject.id ? updatedProject : project,
+			);
+
+			state.projectUpdateStatus = DataStatus.FULFILLED;
+		});
+		builder.addCase(update.rejected, (state) => {
+			state.projectUpdateStatus = DataStatus.REJECTED;
+		});
 	},
 	initialState,
 	name: "projects",