feat: add projects select to analytics page gf-348

apps/backend/src/modules/activity-logs/activity-log.controller.ts

@@ -168,11 +168,12 @@ class ActivityLogController extends BaseController {
 			query: ActivityLogQueryParameters;
 		}>,
 	): Promise<APIHandlerResponse> {
-		const { endDate, startDate } = options.query;
+		const { endDate, projectId, startDate } = options.query;
 
 		return {
 			payload: await this.activityLogService.findAll({
 				endDate,
+				projectId,
 				startDate,
 			}),
 			status: HTTPCode.OK,

apps/backend/src/modules/activity-logs/activity-log.repository.ts

@@ -42,16 +42,22 @@ class ActivityLogRepository implements Repository {
 
 	public async findAll({
 		endDate,
+		projectId,
 		startDate,
 	}: ActivityLogQueryParameters): Promise<{ items: ActivityLogEntity[] }> {
-		const activityLogs = await this.activityLogModel
+		const query = this.activityLogModel
 			.query()
 			.withGraphFetched("[gitEmail.contributor, project, createdByUser]")
 			.modifyGraph("gitEmail.contributor", (builder) => {
 				builder.select("id", "name");
 			})
-			.whereBetween("activity_logs.date", [startDate, endDate])
-			.orderBy("date");
+			.whereBetween("activity_logs.date", [startDate, endDate]);
+
+		if (projectId) {
+			query.where("activity_logs.projectId", projectId);
+		}
+
+		const activityLogs = await query.orderBy("date");
 
 		return {
 			items: activityLogs.map((activityLog) =>

apps/backend/src/modules/activity-logs/activity-log.service.ts

@@ -133,17 +133,23 @@ class ActivityLogService implements Service {
 
 	public async findAll({
 		endDate,
+		projectId,
 		startDate,
 	}: ActivityLogQueryParameters): Promise<ActivityLogGetAllAnalyticsResponseDto> {
 		const activityLogsEntities = await this.activityLogRepository.findAll({
 			endDate,
+			projectId,
 			startDate,
 		});
 
 		const activityLogs = activityLogsEntities.items.map((item) =>
 			item.toObject(),
 		);
-		const allContributors = await this.contributorService.findAll();
+
+		const allContributors = projectId
+			? await this.contributorService.findAllByProjectId(projectId)
+			: await this.contributorService.findAll();
+
 		const dateRange = getDateRange(startDate, endDate);
 
 		const INITIAL_COMMITS_NUMBER = 0;

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

@@ -227,17 +227,11 @@ class ProjectController extends BaseController {
 	 */
 	private async findAll(
 		options: APIHandlerOptions<{
-			query: ProjectGetAllRequestDto;
+			query: object | ProjectGetAllRequestDto;
 		}>,
 	): Promise<APIHandlerResponse> {
-		const { name, page, pageSize } = options.query;
-
 		return {
-			payload: await this.projectService.findAll({
-				name,
-				page: Number(page),
-				pageSize: Number(pageSize),
-			}),
+			payload: await this.projectService.findAll(options.query),
 			status: HTTPCode.OK,
 		};
 	}

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

@@ -49,20 +49,33 @@ class ProjectRepository implements Repository {
 		return item ? ProjectEntity.initialize(item) : null;
 	}
 
-	public async findAll({
-		name,
-		page,
-		pageSize,
-	}: ProjectGetAllRequestDto): Promise<PaginationResponseDto<ProjectEntity>> {
+	public async findAll(
+		parameters: object | ProjectGetAllRequestDto,
+	): Promise<PaginationResponseDto<ProjectEntity>> {
 		const query = this.projectModel
 			.query()
 			.orderBy("created_at", SortType.DESCENDING);
 
+		const { name, page, pageSize } = parameters as ProjectGetAllRequestDto;
+
 		if (name) {
 			query.whereILike("name", `%${name}%`);
 		}
 
-		const { results, total } = await query.page(page, pageSize);
+		let results;
+		let total;
+
+		if (page && pageSize) {
+			const { results: pageResults, total: pageTotal } = await query.page(
+				page,
+				pageSize,
+			);
+			results = pageResults;
+			total = pageTotal;
+		} else {
+			results = await query;
+			total = results.length;
+		}
 
 		return {
 			items: results.map((project) => ProjectEntity.initialize(project)),

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

@@ -120,7 +120,7 @@ class ProjectService implements Service {
 	}
 
 	public async findAll(
-		parameters: ProjectGetAllRequestDto,
+		parameters: object | ProjectGetAllRequestDto,
 	): Promise<ProjectGetAllResponseDto> {
 		const { items, totalItems } =
 			await this.projectRepository.findAll(parameters);

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

@@ -17,6 +17,7 @@ import styles from "./styles.module.css";
 type Properties<TFieldValues extends FieldValues, TOptionValue> = {
 	background?: "primary" | "secondary";
 	control: Control<TFieldValues, null>;
+	isClearable?: boolean;
 	isLabelHidden?: boolean;
 	isMulti?: boolean;
 	isSearchable?: boolean;
@@ -30,6 +31,7 @@ type Properties<TFieldValues extends FieldValues, TOptionValue> = {
 const Select = <TFieldValues extends FieldValues, TOptionValue>({
 	background = "secondary",
 	control,
+	isClearable = false,
 	isLabelHidden = false,
 	isMulti = false,
 	isSearchable = false,
@@ -122,7 +124,7 @@ const Select = <TFieldValues extends FieldValues, TOptionValue>({
 						),
 					valueContainer: () => styles["value-container"] as string,
 				}}
-				isClearable={false}
+				isClearable={isClearable}
 				isMulti={isMulti}
 				isSearchable={isSearchable}
 				name={name}

apps/frontend/src/modules/activity/activity-logs-api.ts

@@ -31,6 +31,7 @@ class ActivityLogApi extends BaseHTTPApi {
 				query: {
 					endDate: String(query.endDate),
 					startDate: String(query.startDate),
+					...(query.projectId && { projectId: String(query.projectId) }),
 				},
 			},
 		);

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

@@ -54,18 +54,22 @@ class ProjectApi extends BaseHTTPApi {
 	}
 
 	public async getAll(
-		query: ProjectGetAllRequestDto,
+		query: ProjectGetAllRequestDto | undefined,
 	): Promise<ProjectGetAllResponseDto> {
+		const queryParameters: Record<string, string> = {
+			...(query?.name && { name: query.name }),
+			...(query?.page !== undefined && { page: String(query.page) }),
+			...(query?.pageSize !== undefined && {
+				pageSize: String(query.pageSize),
+			}),
+		};
+
 		const response = await this.load(
 			this.getFullEndpoint(ProjectsApiPath.ROOT, {}),
 			{
 				hasAuth: true,
 				method: "GET",
-				query: {
-					name: query.name,
-					page: String(query.page),
-					pageSize: String(query.pageSize),
-				},
+				query: queryParameters,
 			},
 		);
 

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

@@ -27,7 +27,7 @@ const getById = createAsyncThunk<
 
 const loadAll = createAsyncThunk<
 	ProjectGetAllResponseDto,
-	ProjectGetAllRequestDto,
+	ProjectGetAllRequestDto | undefined,
 	AsyncThunkConfig
 >(`${sliceName}/load-all`, async (query, { extra }) => {
 	const { projectApi } = extra;

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

@@ -66,10 +66,10 @@ const { actions, name, reducer } = createSlice({
 		});
 		builder.addCase(loadAll.fulfilled, (state, action) => {
 			const { items, totalItems } = action.payload;
-			const { page } = action.meta.arg;
-
-			state.projects =
+			const page = action.meta.arg?.page;
+			const projectsItems =
 				page === FIRST_PAGE ? items : [...state.projects, ...items];
+			state.projects = page ? projectsItems : items;
 			state.projectsTotalCount = totalItems;
 			state.dataStatus = DataStatus.FULFILLED;
 		});

apps/frontend/src/pages/analytics/analytics.tsx

@@ -1,4 +1,9 @@
-import { DateInput, Loader, PageLayout } from "~/libs/components/components.js";
+import {
+	DateInput,
+	Loader,
+	PageLayout,
+	Select,
+} from "~/libs/components/components.js";
 import { DataStatus } from "~/libs/enums/enums.js";
 import { subtractDays } from "~/libs/helpers/helpers.js";
 import {
@@ -10,9 +15,11 @@ import {
 	useFormWatch,
 } from "~/libs/hooks/hooks.js";
 import { actions as activityLogActions } from "~/modules/activity/activity.js";
+import { actions as projectActions } from "~/modules/projects/projects.js";
 
 import { AnalyticsTable } from "./libs/components/components.js";
 import { ANALYTICS_DATE_MAX_RANGE } from "./libs/constants/constants.js";
+import { getProjectOptions } from "./libs/helpers/helpers.js";
 import styles from "./styles.module.css";
 
 const Analytics = (): JSX.Element => {
@@ -22,26 +29,34 @@ const Analytics = (): JSX.Element => {
 	const { activityLogs, dataStatus } = useAppSelector(
 		({ activityLogs }) => activityLogs,
 	);
+	const { projects } = useAppSelector(({ projects }) => projects);
+
+	useEffect(() => {
+		void dispatch(projectActions.loadAll());
+	}, [dispatch]);
 
 	const { control, handleSubmit, isDirty } = useAppForm({
 		defaultValues: {
 			dateRange: [
 				subtractDays(todayDate, ANALYTICS_DATE_MAX_RANGE),
 				todayDate,
 			] as [Date, Date],
+			project: null,
 		},
 	});
 
 	const dateRangeValue = useFormWatch({ control, name: "dateRange" });
+	const projectValue = useFormWatch({ control, name: "project" });
 
 	const handleLoadLogs = useCallback(
-		([startDate, endDate]: [Date, Date]) => {
+		([startDate, endDate]: [Date, Date], projectId?: null | number) => {
 			const formattedStartDate = startDate.toISOString();
 			const formattedEndDate = endDate.toISOString();
 
 			void dispatch(
 				activityLogActions.loadAll({
 					endDate: formattedEndDate,
+					projectId: projectId ?? undefined,
 					startDate: formattedStartDate,
 				}),
 			);
@@ -50,23 +65,25 @@ const Analytics = (): JSX.Element => {
 	);
 
 	useEffect(() => {
-		handleLoadLogs(dateRangeValue);
-	}, [dateRangeValue, handleLoadLogs]);
+		handleLoadLogs(dateRangeValue, projectValue);
+	}, [dateRangeValue, projectValue, handleLoadLogs]);
 
 	const handleFormSubmit = useCallback(
 		(event_?: React.BaseSyntheticEvent): void => {
 			void handleSubmit((formData) => {
-				handleLoadLogs(formData.dateRange);
+				handleLoadLogs(formData.dateRange, formData.project);
 			})(event_);
 		},
 		[handleLoadLogs, handleSubmit],
 	);
 
+	const projectOptions = getProjectOptions(projects);
+
 	useEffect(() => {
 		if (isDirty) {
 			handleFormSubmit();
 		}
-	}, [dateRangeValue, isDirty, handleFormSubmit]);
+	}, [dateRangeValue, projectValue, isDirty, handleFormSubmit]);
 
 	const isLoading =
 		dataStatus === DataStatus.IDLE || dataStatus === DataStatus.PENDING;
@@ -76,6 +93,18 @@ const Analytics = (): JSX.Element => {
 			<h1 className={styles["title"]}>Analytics</h1>
 			<section>
 				<form className={styles["filters-form"]} onSubmit={handleFormSubmit}>
+					<div className={styles["wraper-selector"]}>
+						<Select
+							control={control}
+							isClearable
+							isLabelHidden
+							isSearchable
+							label="Select project"
+							name="project"
+							options={projectOptions}
+							placeholder="Select project"
+						/>
+					</div>
 					<DateInput
 						control={control}
 						maxDate={todayDate}

apps/frontend/src/pages/analytics/libs/helpers/get-project-options.helper.ts

@@ -0,0 +1,12 @@
+import { type SelectOption } from "~/libs/types/select-option.type.js";
+import { type ProjectGetAllItemResponseDto } from "~/modules/projects/projects.js";
+
+const getProjectOptions = (
+	projects: ProjectGetAllItemResponseDto[],
+): SelectOption<number>[] =>
+	projects.map((project) => ({
+		label: project.name,
+		value: project.id,
+	}));
+
+export { getProjectOptions };

apps/frontend/src/pages/analytics/libs/helpers/helpers.ts

@@ -1,2 +1,3 @@
 export { getAnalyticsColumns } from "./get-analytics-columns/get-analytics-columns.helper.jsx";
 export { getAnalyticsRows } from "./get-analytics-rows/get-analytics-rows.helper.js";
+export { getProjectOptions } from "./get-project-options.helper.js";

apps/frontend/src/pages/analytics/styles.module.css

@@ -7,5 +7,11 @@
 
 .filters-form {
 	display: flex;
+	gap: 12px;
+	align-items: center;
 	margin-top: 24px;
 }
+
+.wraper-selector {
+	min-width: 270px;
+}

packages/shared/src/modules/activity-logs/libs/types/activity-log-query-parameters.type.ts

@@ -1,5 +1,6 @@
 type ActivityLogQueryParameters = {
 	endDate: string;
+	projectId?: number | undefined;
 	startDate: string;
 };