feat(FiltersPanel): add Participant filter, #1020

taskany-inc · May 31, 2023 · 0154ef6 · 0154ef6
1 parent d596d9b
commit 0154ef6
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 6 deletions.
diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/en.json b/src/components/FiltersPanel/FiltersPanel.i18n/en.json
@@ -9,5 +9,6 @@
     "Limit": "Limit",
     "Preset": "Preset",
     "Sort": "Sort",
-    "Issuer": "Issuer"
+    "Issuer": "Issuer",
+    "Participant": "Participant"
 }
diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/ru.json b/src/components/FiltersPanel/FiltersPanel.i18n/ru.json
@@ -9,5 +9,6 @@
     "Limit": "Лимит",
     "Preset": "Пресет",
     "Sort": "Сортировка",
-    "Issuer": "Автор"
+    "Issuer": "Автор",
+    "Participant": "Участник"
 }
diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx
@@ -48,12 +48,14 @@ export const FiltersPanel: FC<{
     presets?: React.ComponentProps<typeof PresetDropdown>['presets'];
     issuers?: React.ComponentProps<typeof UserFilter>['users'];
     owners?: React.ComponentProps<typeof UserFilter>['users'];
+    participants?: React.ComponentProps<typeof UserFilter>['users'];
 
     onSearchChange: (search: string) => void;
     onPriorityChange: React.ComponentProps<typeof PriorityFilter>['onChange'];
     onStateChange: React.ComponentProps<typeof StateFilter>['onChange'];
     onIssuerChange: React.ComponentProps<typeof UserFilter>['onChange'];
     onOwnerChange: React.ComponentProps<typeof UserFilter>['onChange'];
+    onParticipantChange: React.ComponentProps<typeof UserFilter>['onChange'];
     onProjectChange: React.ComponentProps<typeof ProjectFilter>['onChange'];
     onTagChange: React.ComponentProps<typeof TagFilter>['onChange'];
     onEstimateChange: React.ComponentProps<typeof EstimateFilter>['onChange'];
@@ -77,12 +79,14 @@ export const FiltersPanel: FC<{
     presets = [],
     owners = [],
     issuers = [],
+    participants = [],
     priorities = [],
     states = [],
     onPriorityChange,
     onStateChange,
     onIssuerChange,
     onOwnerChange,
+    onParticipantChange,
     onSearchChange,
     onProjectChange,
     onEstimateChange,
@@ -116,6 +120,7 @@ export const FiltersPanel: FC<{
                             onChange={onStateChange}
                         />
                     )}
+
                     {Boolean(priorities.length) && (
                         <PriorityFilter
                             text={tr('Priority')}
@@ -124,6 +129,7 @@ export const FiltersPanel: FC<{
                             onChange={onPriorityChange}
                         />
                     )}
+
                     {Boolean(projects.length) && (
                         <ProjectFilter
                             text={tr('Project')}
@@ -132,6 +138,7 @@ export const FiltersPanel: FC<{
                             onChange={onProjectChange}
                         />
                     )}
+
                     {Boolean(issuers.length) && (
                         <UserFilter
                             text={tr('Issuer')}
@@ -140,6 +147,7 @@ export const FiltersPanel: FC<{
                             onChange={onIssuerChange}
                         />
                     )}
+
                     {Boolean(owners.length) && (
                         <UserFilter
                             text={tr('Owner')}
@@ -148,6 +156,7 @@ export const FiltersPanel: FC<{
                             onChange={onOwnerChange}
                         />
                     )}
+
                     {Boolean(estimates.length) && (
                         <EstimateFilter
                             text={tr('Estimate')}
@@ -156,11 +165,22 @@ export const FiltersPanel: FC<{
                             onChange={onEstimateChange}
                         />
                     )}
+
                     {Boolean(tags.length) && (
                         <TagFilter text={tr('Tags')} value={queryState.tag} tags={tags} onChange={onTagChange} />
                     )}
 
+                    {Boolean(participants.length) && (
+                        <UserFilter
+                            text={tr('Participant')}
+                            value={queryState.participant}
+                            users={participants}
+                            onChange={onParticipantChange}
+                        />
+                    )}
+
                     <StarredFilter value={queryState.starred} onChange={onStarredChange} />
+
                     <WatchingFilter value={queryState.watching} onChange={onWatchingChange} />
 
                     <SortFilter text={tr('Sort')} value={queryState.sort} onChange={onSortChange} />
@@ -173,15 +193,18 @@ export const FiltersPanel: FC<{
                             onChange={onPresetChange}
                         />
                     )}
+
                     {onLimitChange &&
                         nullable(queryState.limit, (lf) => (
                             <LimitDropdown text={tr('Limit')} value={[String(lf)]} onChange={onLimitChange} />
                         ))}
+
                     {((Boolean(queryString) && !preset) || (preset && !preset._isOwner && !preset._isStarred)) && (
                         <FiltersAction onClick={onFilterStar}>
                             <StarIcon size="s" noWrap />
                         </FiltersAction>
                     )}
+
                     {preset && (preset._isOwner || preset._isStarred) && (
                         <FiltersAction onClick={onFilterStar}>
                             <StarFilledIcon size="s" noWrap />
@@ -197,6 +220,7 @@ export const FiltersPanel: FC<{
             states={states}
             issuers={issuers}
             owners={owners}
+            participants={participants}
             projects={projects}
             tags={tags}
             estimates={estimates}

diff --git a/src/components/FiltersPanelApplied/FiltersPanelApplied.i18n/en.json b/src/components/FiltersPanelApplied/FiltersPanelApplied.i18n/en.json
@@ -6,5 +6,6 @@
     "Project": "Project",
     "Tag": "Tag",
     "Estimate": "Estimate",
-    "Sorted": "Sorted"
+    "Sorted": "Sorted",
+    "Participant": "Participant"
 }
diff --git a/src/components/FiltersPanelApplied/FiltersPanelApplied.i18n/ru.json b/src/components/FiltersPanelApplied/FiltersPanelApplied.i18n/ru.json
@@ -6,5 +6,6 @@
     "Project": "Проект",
     "Tag": "Тег",
     "Estimate": "Срок",
-    "Sorted": "Отсортировано"
+    "Sorted": "Отсортировано",
+    "Participant": "Участник"
 }
diff --git a/src/components/FiltersPanelApplied/FiltersPanelApplied.tsx b/src/components/FiltersPanelApplied/FiltersPanelApplied.tsx
@@ -20,6 +20,7 @@ interface FiltersPanelAppliedProps {
     states?: React.ComponentProps<typeof StateFilter>['states'];
     issuers?: React.ComponentProps<typeof UserFilter>['users'];
     owners?: React.ComponentProps<typeof UserFilter>['users'];
+    participants?: React.ComponentProps<typeof UserFilter>['users'];
     projects?: React.ComponentProps<typeof ProjectFilter>['projects'];
     tags?: React.ComponentProps<typeof TagFilter>['tags'];
     estimates?: React.ComponentProps<typeof EstimateFilter>['estimates'];
@@ -40,21 +41,23 @@ export const FiltersPanelApplied: React.FC<FiltersPanelAppliedProps> = ({
     states,
     issuers,
     owners,
+    participants,
     projects,
     tags,
     estimates,
 }) => {
     let infoString = '';
 
-    const { statesMap, issuersMap, ownersMap, projectsMap, tagsMap } = useMemo(() => {
+    const { statesMap, issuersMap, ownersMap, participantsMap, projectsMap, tagsMap } = useMemo(() => {
         return {
             statesMap: arrToMap(states || []),
             issuersMap: arrToMap(issuers || []),
             ownersMap: arrToMap(owners || []),
+            participantsMap: arrToMap(participants || []),
             projectsMap: arrToMap(projects || []),
             tagsMap: arrToMap(tags || []),
         };
-    }, [states, issuers, owners, projects, tags]);
+    }, [states, issuers, owners, participants, projects, tags]);
 
     const appliedMap: Record<string, string[]> = {};
 
@@ -74,6 +77,12 @@ export const FiltersPanelApplied: React.FC<FiltersPanelAppliedProps> = ({
         appliedMap[tr('Owner')] = queryState.owner.map((u) => ownersMap[u].user?.name).filter(Boolean) as string[];
     }
 
+    if (queryState.participant.length && participants?.length) {
+        appliedMap[tr('Participant')] = queryState.participant
+            .map((u) => participantsMap[u].user?.name)
+            .filter(Boolean) as string[];
+    }
+
     if (queryState.project.length && projects?.length) {
         appliedMap[tr('Project')] = queryState.project.map((p) => projectsMap[p].title).filter(Boolean);
     }

diff --git a/src/components/GoalsPage/GoalsPage.tsx b/src/components/GoalsPage/GoalsPage.tsx
@@ -48,6 +48,7 @@ export const GoalsPage = ({ user, ssrTime, locale }: ExternalPageProps) => {
         setEstimateFilter,
         setIssuerFilter,
         setOwnerFilter,
+        setParticipantFilter,
         setProjectFilter,
         setStarredFilter,
         setWatchingFilter,
@@ -182,6 +183,7 @@ export const GoalsPage = ({ user, ssrTime, locale }: ExternalPageProps) => {
                 queryString={queryString}
                 issuers={meta?.issuers}
                 owners={meta?.owners}
+                participants={meta?.participants}
                 priorities={meta?.priority}
                 projects={meta?.projects}
                 preset={currentPreset}
@@ -192,6 +194,7 @@ export const GoalsPage = ({ user, ssrTime, locale }: ExternalPageProps) => {
                 onSearchChange={setFulltextFilter}
                 onIssuerChange={setIssuerFilter}
                 onOwnerChange={setOwnerFilter}
+                onParticipantChange={setParticipantFilter}
                 onProjectChange={setProjectFilter}
                 onStateChange={setStateFilter}
                 onTagChange={setTagsFilter}

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -53,6 +53,7 @@ export const ProjectPage = ({ user, locale, ssrTime, params: { id } }: ExternalP
         setEstimateFilter,
         setIssuerFilter,
         setOwnerFilter,
+        setParticipantFilter,
         setProjectFilter,
         setStarredFilter,
         setWatchingFilter,
@@ -220,6 +221,7 @@ export const ProjectPage = ({ user, locale, ssrTime, params: { id } }: ExternalP
                     queryString={queryString}
                     issuers={projectDeepInfo?.meta?.issuers}
                     owners={projectDeepInfo?.meta?.owners}
+                    participants={projectDeepInfo?.meta?.participants}
                     priorities={projectDeepInfo?.meta?.priority}
                     projects={projectDeepInfo?.meta?.projects}
                     preset={currentPreset}
@@ -230,6 +232,7 @@ export const ProjectPage = ({ user, locale, ssrTime, params: { id } }: ExternalP
                     onSearchChange={setFulltextFilter}
                     onIssuerChange={setIssuerFilter}
                     onOwnerChange={setOwnerFilter}
+                    onParticipantChange={setParticipantFilter}
                     onProjectChange={setProjectFilter}
                     onStateChange={setStateFilter}
                     onTagChange={setTagsFilter}

diff --git a/src/hooks/useUrlFilterParams.ts b/src/hooks/useUrlFilterParams.ts
@@ -15,6 +15,7 @@ export interface QueryState {
     estimate: string[];
     issuer: string[];
     owner: string[];
+    participant: string[];
     project: string[];
     query: string;
     starred: boolean;
@@ -46,6 +47,7 @@ export const parseFilterValues = (query: ParsedUrlQuery): QueryState => ({
     estimate: parseQueryParam(query.estimate?.toString()),
     issuer: parseQueryParam(query.issuer?.toString()),
     owner: parseQueryParam(query.owner?.toString()),
+    participant: parseQueryParam(query.participant?.toString()),
     project: parseQueryParam(query.project?.toString()),
     query: parseQueryParam(query.query?.toString()).toString(),
     starred: Boolean(parseInt(parseQueryParam(query.starred?.toString()).toString(), 10)),
@@ -75,6 +77,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
             estimate,
             issuer,
             owner,
+            participant,
             project,
             query,
             starred,
@@ -98,8 +101,13 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
                 : urlParams.delete('estimate');
 
             owner.length > 0 ? urlParams.set('owner', Array.from(owner).toString()) : urlParams.delete('owner');
+
             issuer.length > 0 ? urlParams.set('issuer', Array.from(issuer).toString()) : urlParams.delete('issuer');
 
+            participant.length > 0
+                ? urlParams.set('participant', Array.from(participant).toString())
+                : urlParams.delete('participant');
+
             project.length > 0 ? urlParams.set('project', Array.from(project).toString()) : urlParams.delete('project');
 
             Object.keys(sort).length > 0
@@ -137,6 +145,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
             state: [],
             issuer: [],
             owner: [],
+            participant: [],
             project: [],
             tag: [],
             estimate: [],
@@ -187,6 +196,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
             setEstimateFilter: pushStateProvider('estimate'),
             setIssuerFilter: pushStateProvider('issuer'),
             setOwnerFilter: pushStateProvider('owner'),
+            setParticipantFilter: pushStateProvider('participant'),
             setProjectFilter: pushStateProvider('project'),
             setStarredFilter: pushStateProvider('starred'),
             setWatchingFilter: pushStateProvider('watching'),

diff --git a/src/schema/common.ts b/src/schema/common.ts
@@ -27,6 +27,7 @@ export const queryWithFiltersSchema = z.object({
     estimate: z.array(z.string()).optional(),
     issuer: z.array(z.string()).optional(),
     owner: z.array(z.string()).optional(),
+    participant: z.array(z.string()).optional(),
     project: z.array(z.string()).optional(),
     sort: sortablePropertiesSchema,
     query: z.string().optional(),

diff --git a/trpc/queries/goals.ts b/trpc/queries/goals.ts
@@ -67,6 +67,18 @@ export const goalsFilter = (data: QueryWithFilters, activityId: string, extra: a
           }
         : {};
 
+    const participantFilter = data.participant?.length
+        ? {
+              participants: {
+                  some: {
+                      id: {
+                          in: data.participant,
+                      },
+                  },
+              },
+          }
+        : {};
+
     const projectFilter = data.project?.length
         ? {
               project: {
@@ -198,6 +210,7 @@ export const goalsFilter = (data: QueryWithFilters, activityId: string, extra: a
             ...estimateFilter,
             ...issuerFilter,
             ...ownerFilter,
+            ...participantFilter,
             ...projectFilter,
             ...extra,
         },