From d2721c054f3710af09178af0ac1991f23fb23373 Mon Sep 17 00:00:00 2001 From: Mykhailo Pumnia Date: Tue, 24 Sep 2024 16:12:49 +0300 Subject: [PATCH 01/19] feat: add select project component gf-504 --- .../src/pages/contributors/contributors.tsx | 78 ++++++++++++++++++- .../src/pages/contributors/styles.module.css | 12 ++- 2 files changed, 88 insertions(+), 2 deletions(-) diff --git a/apps/frontend/src/pages/contributors/contributors.tsx b/apps/frontend/src/pages/contributors/contributors.tsx index 0ffab035..e0e59825 100644 --- a/apps/frontend/src/pages/contributors/contributors.tsx +++ b/apps/frontend/src/pages/contributors/contributors.tsx @@ -1,20 +1,24 @@ import { Modal, PageLayout, + Select, Table, TablePagination, } from "~/libs/components/components.js"; import { DataStatus } from "~/libs/enums/enums.js"; import { useAppDispatch, + useAppForm, useAppSelector, useCallback, useEffect, + useFormWatch, useMemo, useModal, usePagination, useState, } from "~/libs/hooks/hooks.js"; +import { actions as activityActions } from "~/modules/activity/activity.js"; import { actions as contributorActions, type ContributorGetAllItemResponseDto, @@ -22,6 +26,7 @@ import { type ContributorPatchRequestDto, type ContributorSplitRequestDto, } from "~/modules/contributors/contributors.js"; +import { getProjectOptions } from "~/pages/analytics/libs/helpers/helpers.js"; import { ContributorMergeForm, @@ -47,15 +52,25 @@ const Contributors = (): JSX.Element => { updateContributorsStatus, } = useAppSelector(({ contributors }) => contributors); + const { projects } = useAppSelector(({ activityLogs }) => activityLogs); + + useEffect(() => { + void dispatch(activityActions.loadAllProjects()); + }, [dispatch]); + const { onPageChange, onPageSizeChange, page, pageSize } = usePagination({ queryParameterPrefix: "contributor", totalItemsCount: totalCount, }); - useEffect(() => { + const loadContributors = useCallback(() => { void dispatch(contributorActions.loadAll({ page, pageSize })); }, [dispatch, page, pageSize]); + useEffect(() => { + loadContributors(); + }, [loadContributors]); + const { isOpened: isUpdateModalOpened, onClose: onUpdateModalClose, @@ -204,6 +219,50 @@ const Contributors = (): JSX.Element => { [handleEdit, handleMerge, handleSplit], ); + const loadContributorsByProjectId = useCallback( + (projectId: number) => { + // TODO: add projectId to contributos loadAll query + Boolean(projectId); + + void dispatch( + contributorActions.loadAll({ + page, + pageSize, + }), + ); + }, + [dispatch, page, pageSize], + ); + + const { control, handleSubmit } = useAppForm<{ + projectId: null | number; + }>({ + defaultValues: { + projectId: null, + }, + }); + + const { projectId } = useFormWatch({ control }); + + const handleFiltersFormSubmit = useCallback( + (event_?: React.BaseSyntheticEvent): void => { + void handleSubmit(({ projectId }) => { + if (projectId) { + loadContributorsByProjectId(projectId); + } else { + loadContributors(); + } + })(event_); + }, + [handleSubmit, loadContributorsByProjectId, loadContributors], + ); + + useEffect(() => { + handleFiltersFormSubmit(); + }, [projectId, handleFiltersFormSubmit]); + + const projectOptions = getProjectOptions(projects); + const contributorsData: ContributorRow[] = getContributorRows(contributors); const isLoading = @@ -212,6 +271,23 @@ const Contributors = (): JSX.Element => { return (

Contributors

+
+
+