feat: group by created by option (#516)

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -12,17 +12,17 @@ import viewsService from "services/views.service";
 import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// components
-import { CreateUpdateViewModal, DeleteViewModal } from "components/views";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { UserAuth } from "types";
 // fetch-keys
-import { PROJECT_DETAILS, VIEW_DETAILS, VIEW_ISSUES } from "constants/fetch-keys";
+import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
 import { IssuesFilterView, IssuesView } from "components/core";
-import { HeaderButton } from "components/ui";
+import { CustomMenu, HeaderButton } from "components/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
+import { truncateText } from "helpers/string.helper";
+import { StackedLayersIcon } from "components/icons";
 
 const SingleView: React.FC<UserAuth> = (props) => {
   const router = useRouter();
@@ -35,6 +35,13 @@ const SingleView: React.FC<UserAuth> = (props) => {
       : null
   );
 
+  const { data: views } = useSWR(
+    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const { data: viewDetails } = useSWR(
     workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
     workspaceSlug && projectId && viewId
@@ -58,6 +65,28 @@ const SingleView: React.FC<UserAuth> = (props) => {
             />
           </Breadcrumbs>
         }
+        left={
+          <CustomMenu
+            label={
+              <>
+                <StackedLayersIcon height={12} width={12} />
+                {viewDetails?.name && truncateText(viewDetails.name, 40)}
+              </>
+            }
+            className="ml-1.5"
+            width="auto"
+          >
+            {views?.map((view) => (
+              <CustomMenu.MenuItem
+                key={view.id}
+                renderAs="a"
+                href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+              >
+                {truncateText(view.name, 40)}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        }
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx

@@ -28,6 +28,7 @@ import { DeleteViewModal, CreateUpdateViewModal } from "components/views";
 // types
 import { IView } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
+import { StackedLayersIcon } from "components/icons";
 
 const ProjectViews: NextPage = () => {
   const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
@@ -59,7 +60,7 @@ const ProjectViews: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Views`} />
         </Breadcrumbs>
       }
       right={
@@ -82,29 +83,35 @@ const ProjectViews: NextPage = () => {
       />
       {views ? (
         views.length > 0 ? (
-          <div className="rounded-[10px] border">
-            {views.map((view) => (
-              <div
-                className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
-                key={view.id}
-              >
-                <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
-                  <a>{view.name}</a>
-                </Link>
-                <CustomMenu width="auto" verticalEllipsis>
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      setSelectedView(view);
-                    }}
-                  >
-                    <span className="flex items-center justify-start gap-2 text-gray-800">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              </div>
-            ))}
+          <div className="space-y-5">
+            <h3 className="text-3xl font-semibold text-black">Views</h3>
+            <div className="rounded-[10px] border">
+              {views.map((view) => (
+                <div
+                  className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
+                  key={view.id}
+                >
+                  <div className="flex items-center gap-2">
+                    <StackedLayersIcon height={18} width={18} />
+                    <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+                      <a>{view.name}</a>
+                    </Link>
+                  </div>
+                  <CustomMenu width="auto" verticalEllipsis>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        setSelectedView(view);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2 text-gray-800">
+                        <TrashIcon className="h-4 w-4" />
+                        <span>Delete</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              ))}
+            </div>
           </div>
         ) : (
           <EmptyState