feat: group by created by option (#516)

apps/app/components/core/board-view/board-header.tsx

@@ -1,5 +1,12 @@
 import React from "react";
 
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+import projectService from "services/project.service";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 // icons
@@ -8,7 +15,10 @@ import { getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IState } from "types";
+import { IIssueLabels, IState } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
 type Props = {
   currentState?: IState | null;
   groupTitle: string;
@@ -26,8 +36,25 @@ export const BoardHeader: React.FC<Props> = ({
   setIsCollapsed,
   isCompleted = false,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   const { groupedByIssues, groupByProperty: selectedGroup } = useIssuesView();
 
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   let bgColor = "#000000";
   if (selectedGroup === "state") bgColor = currentState?.color ?? "#000000";
 
@@ -40,6 +67,28 @@ export const BoardHeader: React.FC<Props> = ({
       ? (bgColor = "#22c55e")
       : (bgColor = "#ff0000");
 
+  const getGroupTitle = () => {
+    let title = addSpaceIfCamelCase(groupTitle);
+
+    switch (selectedGroup) {
+      case "state":
+        title = addSpaceIfCamelCase(currentState?.name ?? "");
+        break;
+      case "labels":
+        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        title =
+          member?.first_name && member.first_name !== ""
+            ? `${member.first_name} ${member.last_name}`
+            : member?.email ?? "";
+        break;
+    }
+
+    return title;
+  };
+
   return (
     <div
       className={`flex justify-between px-1 ${
@@ -59,9 +108,7 @@ export const BoardHeader: React.FC<Props> = ({
               writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
             }}
           >
-            {selectedGroup === "state"
-              ? addSpaceIfCamelCase(currentState?.name ?? "")
-              : addSpaceIfCamelCase(groupTitle)}
+            {getGroupTitle()}
           </h2>
           <span className="ml-0.5 rounded-full bg-gray-100 py-1 px-3 text-sm">
             {groupedByIssues?.[groupTitle].length ?? 0}

apps/app/components/core/board-view/single-board.tsx

@@ -108,7 +108,7 @@ export const SingleBoard: React.FC<Props> = ({
                     key={issue.id}
                     draggableId={issue.id}
                     index={index}
-                    isDragDisabled={isNotAllowed}
+                    isDragDisabled={isNotAllowed || selectedGroup === "created_by"}
                   >
                     {(provided, snapshot) => (
                       <SingleBoardIssue

apps/app/components/core/board-view/single-issue.tsx

@@ -37,7 +37,7 @@ import {
 import { handleIssuesMutation } from "constants/issue";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES_WITH_PARAMS,
@@ -53,7 +53,7 @@ type Props = {
   properties: Properties;
   groupTitle?: string;
   index: number;
-  selectedGroup: "priority" | "state" | "labels" | null;
+  selectedGroup: TIssueGroupByOptions;
   editIssue: () => void;
   makeIssueCopy: () => void;
   removeIssue?: (() => void) | null;