From 44958be12569b74d81cd2c381a2b24c7ec412b83 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 29 Sep 2023 16:32:19 +0530
Subject: [PATCH] fix: workspace view filters count fix

---
 .../core/filters/workspace-filters-list.tsx   |   2 -
 web/components/views/single-view-item.tsx     |  64 +++++-----
 .../views/single-workspace-view-item.tsx      | 110 ++++++++++++++++++
 .../projects/[projectId]/views/index.tsx      |   1 -
 .../[workspaceSlug]/workspace-views/index.tsx |   5 +-
 5 files changed, 138 insertions(+), 44 deletions(-)
 create mode 100644 web/components/workspace/views/single-workspace-view-item.tsx

diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
index dafab6e9dc6..0b31ae7f507 100644
--- a/web/components/core/filters/workspace-filters-list.tsx
+++ b/web/components/core/filters/workspace-filters-list.tsx
@@ -299,8 +299,6 @@ export const WorkspaceFiltersList: React.FC<Props> = ({
                     : key === "project"
                     ? filters.project?.map((projectId) => {
                         const currentProject = project?.find((p) => p.id === projectId);
-                        console.log("currentProject", currentProject);
-                        console.log("currentProject", projectId);
                         return (
                           <p
                             key={currentProject?.id}
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
index 6dba9c097d7..70f07a416d2 100644
--- a/web/components/views/single-view-item.tsx
+++ b/web/components/views/single-view-item.tsx
@@ -12,7 +12,6 @@ import { CustomMenu } from "components/ui";
 import viewsService from "services/views.service";
 // types
 import { IView } from "types";
-import { IWorkspaceView } from "types/workspace-views";
 // fetch keys
 import { VIEWS_LIST } from "constants/fetch-keys";
 // hooks
@@ -21,18 +20,12 @@ import useToast from "hooks/use-toast";
 import { truncateText } from "helpers/string.helper";
 
 type Props = {
-  view: IView | IWorkspaceView;
-  viewType: "project" | "workspace";
+  view: IView;
   handleEditView: () => void;
   handleDeleteView: () => void;
 };
 
-export const SingleViewItem: React.FC<Props> = ({
-  view,
-  viewType,
-  handleEditView,
-  handleDeleteView,
-}) => {
+export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDeleteView }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -88,10 +81,7 @@ export const SingleViewItem: React.FC<Props> = ({
       });
   };
 
-  const viewRedirectionUrl =
-    viewType === "project"
-      ? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
-      : `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
+  const viewRedirectionUrl = `/${workspaceSlug}/projects/${projectId}/views/${view.id}`;
 
   return (
     <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
@@ -126,31 +116,29 @@ export const SingleViewItem: React.FC<Props> = ({
                   filters
                 </p>
 
-                {viewType === "project" ? (
-                  view.is_favorite ? (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )
-                ) : null}
+                {view.is_favorite ? (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveFromFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleAddToFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  </button>
+                )}
                 <CustomMenu width="auto" ellipsis>
                   <CustomMenu.MenuItem
                     onClick={(e: any) => {
diff --git a/web/components/workspace/views/single-workspace-view-item.tsx b/web/components/workspace/views/single-workspace-view-item.tsx
new file mode 100644
index 00000000000..fd153bdfcb7
--- /dev/null
+++ b/web/components/workspace/views/single-workspace-view-item.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// icons
+import { TrashIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { PhotoFilterOutlined } from "@mui/icons-material";
+//components
+import { CustomMenu } from "components/ui";
+import { IWorkspaceView } from "types/workspace-views";
+// helpers
+import { truncateText } from "helpers/string.helper";
+
+type Props = {
+  view: IWorkspaceView;
+  handleEditView: () => void;
+  handleDeleteView: () => void;
+};
+
+export const SingleWorkspaceViewItem: React.FC<Props> = ({
+  view,
+  handleEditView,
+  handleDeleteView,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const viewRedirectionUrl = `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
+
+  return (
+    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+      <Link href={viewRedirectionUrl}>
+        <a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-4">
+              <div
+                className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
+              >
+                <PhotoFilterOutlined className="!text-base !leading-6" />
+              </div>
+              <div className="flex flex-col">
+                <p className="truncate text-sm leading-4 font-medium">
+                  {truncateText(view.name, 75)}
+                </p>
+                {view?.description && (
+                  <p className="text-xs text-custom-text-200">{view.description}</p>
+                )}
+              </div>
+            </div>
+            <div className="ml-2 flex flex-shrink-0">
+              <div className="flex items-center gap-4">
+                <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100">
+                  {view.query_data.filters && Object.keys(view.query_data.filters).length > 0
+                    ? `${Object.keys(view.query_data.filters)
+                        .map((key: string) =>
+                          view.query_data.filters[key as keyof typeof view.query_data.filters] !==
+                          null
+                            ? isNaN(
+                                (
+                                  view.query_data.filters[
+                                    key as keyof typeof view.query_data.filters
+                                  ] as any
+                                ).length
+                              )
+                              ? 0
+                              : (
+                                  view.query_data.filters[
+                                    key as keyof typeof view.query_data.filters
+                                  ] as any
+                                ).length
+                            : 0
+                        )
+                        .reduce((curr, prev) => curr + prev, 0)} filters`
+                    : "0 filters"}
+                </p>
+                <CustomMenu width="auto" ellipsis>
+                  <CustomMenu.MenuItem
+                    onClick={(e: any) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleEditView();
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <PencilIcon className="h-3.5 w-3.5" />
+                      <span>Edit View</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={(e: any) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDeleteView();
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <TrashIcon className="h-3.5 w-3.5" />
+                      <span>Delete View</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index c75cdd320a5..9a551103787 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -107,7 +107,6 @@ const ProjectViews: NextPage = () => {
                 <SingleViewItem
                   key={view.id}
                   view={view}
-                  viewType="project"
                   handleEditView={() => handleEditView(view)}
                   handleDeleteView={() => handleDeleteView(view)}
                 />
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index a03393e1db6..5e1ef61a875 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -11,7 +11,7 @@ import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SingleViewItem } from "components/views";
+import { SingleWorkspaceViewItem } from "components/workspace/views/single-workspace-view-item";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
@@ -169,10 +169,9 @@ const WorkspaceViews: NextPage = () => {
           filteredOptions.length > 0 ? (
             <div>
               {filteredOptions.map((view) => (
-                <SingleViewItem
+                <SingleWorkspaceViewItem
                   key={view.id}
                   view={view}
-                  viewType="workspace"
                   handleEditView={() => handleEditView(view)}
                   handleDeleteView={() => handleDeleteView(view)}
                 />