From ca7f02669c4be749831e2f8c7cfb3e4b6111de32 Mon Sep 17 00:00:00 2001
From: DenisVorop <saskeazaske@icloud.com>
Date: Mon, 25 Mar 2024 13:53:48 +0300
Subject: [PATCH] feat(AppliedTagFilter): show readonly applied filters

---
 .../AppliedTagFilter/AppliedTagFilter.tsx     | 19 +++++++++++++++++++
 src/components/FiltersPanel/FiltersPanel.tsx  |  4 ++++
 trpc/router/tag.ts                            | 10 ++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 src/components/AppliedTagFilter/AppliedTagFilter.tsx

diff --git a/src/components/AppliedTagFilter/AppliedTagFilter.tsx b/src/components/AppliedTagFilter/AppliedTagFilter.tsx
new file mode 100644
index 000000000..82089cda9
--- /dev/null
+++ b/src/components/AppliedTagFilter/AppliedTagFilter.tsx
@@ -0,0 +1,19 @@
+import { trpc } from '../../utils/trpcClient';
+import { AppliedFilter } from '../AppliedFilter/AppliedFilter';
+import { TagDropdown } from '../TagDropdown/TagDropdown';
+
+interface AppliedTagsFilterProps {
+    value?: string[];
+    label?: string;
+    readOnly?: boolean;
+}
+
+export const AppliedTagFilter = ({ value = [], label, readOnly }: AppliedTagsFilterProps) => {
+    const { data } = trpc.tag.getByIds.useQuery(value);
+
+    return (
+        <AppliedFilter readOnly={readOnly} label={label}>
+            <TagDropdown mode="multiple" value={data} readOnly={readOnly} placement="bottom" />
+        </AppliedFilter>
+    );
+};
diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx
index 06ade6061..82c38ebeb 100644
--- a/src/components/FiltersPanel/FiltersPanel.tsx
+++ b/src/components/FiltersPanel/FiltersPanel.tsx
@@ -41,6 +41,7 @@ import { AppliedPriorityFilter } from '../AppliedPriorityFilter/AppliedPriorityF
 import { AppliedStateFilter } from '../AppliedStateFilter/AppliedStateFilter';
 import { AppliedUsersFilter } from '../AppliedUsersFilter/AppliedUsersFilter';
 import { PageUserMenu } from '../PageUserMenu';
+import { AppliedTagFilter } from '../AppliedTagFilter/AppliedTagFilter';
 
 import { tr } from './FiltersPanel.i18n';
 
@@ -286,6 +287,9 @@ export const FiltersPanel: FC<{
                     {nullable(Boolean(queryFilterState?.project), () => (
                         <AppliedGoalParentFilter label={tr('Project')} value={queryFilterState?.project} readOnly />
                     ))}
+                    {nullable(Boolean(queryFilterState?.tag), () => (
+                        <AppliedTagFilter label={tr('Tags')} value={queryFilterState?.tag} readOnly />
+                    ))}
                     <Button
                         ref={filterTriggerRef}
                         text={tr('Filter')}
diff --git a/trpc/router/tag.ts b/trpc/router/tag.ts
index e37cb88a3..5c9f4f81f 100644
--- a/trpc/router/tag.ts
+++ b/trpc/router/tag.ts
@@ -1,4 +1,5 @@
 import { Prisma } from '@prisma/client';
+import { z } from 'zod';
 
 import { prisma } from '../../src/utils/prisma';
 import { protectedProcedure, router } from '../trpcBackend';
@@ -50,4 +51,13 @@ export const tag = router({
             },
         });
     }),
+    getByIds: protectedProcedure.input(z.array(z.string())).query(({ input }) => {
+        return prisma.tag.findMany({
+            where: {
+                id: {
+                    in: input,
+                },
+            },
+        });
+    }),
 });