feat: state description in settings (#275)

* chore: removed minor bugs * feat: state description in settings * feat: group by assignee
2024-06-14 14:31:34 +00:00 · 2023-02-14 14:46:48 +05:30 · 2023-02-14 14:46:48 +05:30 · e53ff4c02e
commit e53ff4c02e
parent 9c8c7f1dda
13 changed files with 188 additions and 208 deletions
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@ -12,80 +12,97 @@ import {
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue } from "types";
+import { IIssue, IProjectMember, NestedKeyOf } from "types";
 type Props = {
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
  groupedByIssues: {
    [key: string]: IIssue[];
  };
+  selectedGroup: NestedKeyOf<IIssue> | null;
  groupTitle: string;
-  createdBy: string | null;
  bgColor?: string;
  addIssueToState: () => void;
+  members: IProjectMember[] | undefined;
+  isCollapsed: boolean;
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 };

 export const BoardHeader: React.FC<Props> = ({
-  isCollapsed,
-  setIsCollapsed,
  groupedByIssues,
+  selectedGroup,
  groupTitle,
-  createdBy,
  bgColor,
  addIssueToState,
-}) => (
-  <div
-    className={`flex justify-between p-3 pb-0 ${
-      !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
-    }`}
-  >
-    <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
-      <div
-        className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
-          !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
-        }`}
-        style={{
-          border: `2px solid ${bgColor}`,
-          backgroundColor: `${bgColor}20`,
-        }}
-      >
-        <h2
-          className={`text-[0.9rem] font-medium capitalize`}
+  isCollapsed,
+  setIsCollapsed,
+  members,
+}) => {
+  const createdBy =
+    selectedGroup === "created_by"
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      : null;
+
+  let assignees: any;
+  if (selectedGroup === "assignees") {
+    assignees = groupTitle.split(",");
+    assignees = assignees
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
+      .join(", ");
+  }
+
+  return (
+    <div
+      className={`flex justify-between p-3 pb-0 ${
+        !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
+      }`}
+    >
+      <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+        <div
+          className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
+            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
+          }`}
          style={{
-            writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            border: `2px solid ${bgColor}`,
+            backgroundColor: `${bgColor}20`,
          }}
        >
-          {groupTitle === null || groupTitle === "null"
-            ? "None"
-            : createdBy
-            ? createdBy
-            : addSpaceIfCamelCase(groupTitle)}
-        </h2>
-        <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+          <h2
+            className={`text-[0.9rem] font-medium capitalize`}
+            style={{
+              writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            }}
+          >
+            {selectedGroup === "created_by"
+              ? createdBy
+              : selectedGroup === "assignees"
+              ? assignees
+              : addSpaceIfCamelCase(groupTitle)}
+          </h2>
+          <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+        </div>
+      </div>
+
+      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={() => {
+            setIsCollapsed((prevData) => !prevData);
+          }}
+        >
+          {isCollapsed ? (
+            <ArrowsPointingInIcon className="h-4 w-4" />
+          ) : (
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+          )}
+        </button>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={addIssueToState}
+        >
+          <PlusIcon className="h-4 w-4" />
+        </button>
      </div>
    </div>
-
-    <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={() => {
-          setIsCollapsed((prevData) => !prevData);
-        }}
-      >
-        {isCollapsed ? (
-          <ArrowsPointingInIcon className="h-4 w-4" />
-        ) : (
-          <ArrowsPointingOutIcon className="h-4 w-4" />
-        )}
-      </button>
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={addIssueToState}
-      >
-        <PlusIcon className="h-4 w-4" />
-      </button>
-    </div>
-  </div>
-);
+  );
+};
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@ -55,11 +55,6 @@ export const SingleBoard: React.FC<Props> = ({

  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);

-  const createdBy =
-    selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
-      : null;
-
  if (selectedGroup === "priority")
    groupTitle === "high"
      ? (bgColor = "#dc2626")
@ -77,11 +72,12 @@ export const SingleBoard: React.FC<Props> = ({
        <BoardHeader
          addIssueToState={addIssueToState}
          bgColor={bgColor}
-          createdBy={createdBy}
+          selectedGroup={selectedGroup}
          groupTitle={groupTitle}
          groupedByIssues={groupedByIssues}
          isCollapsed={isCollapsed}
          setIsCollapsed={setIsCollapsed}
+          members={members}
        />
        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
          {(provided, snapshot) => (
@ -97,7 +93,9 @@ export const SingleBoard: React.FC<Props> = ({
                  key={issue.id}
                  draggableId={issue.id}
                  index={index}
-                  isDragDisabled={isNotAllowed || selectedGroup === "created_by"}
+                  isDragDisabled={
+                    isNotAllowed || selectedGroup === "created_by" || selectedGroup === "assignees"
+                  }
                >
                  {(provided, snapshot) => (
                    <SingleBoardIssue
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@ -50,9 +50,17 @@ export const SingleList: React.FC<Props> = ({

  const createdBy =
    selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "Loading..."
      : null;

+  let assignees: any;
+  if (selectedGroup === "assignees") {
+    assignees = groupTitle.split(",");
+    assignees = assignees
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
+      .join(", ");
+  }
+
  return (
    <Disclosure key={groupTitle} as="div" defaultOpen>
      {({ open }) => (
@ -67,10 +75,10 @@ export const SingleList: React.FC<Props> = ({
                </span>
                {selectedGroup !== null ? (
                  <h2 className="font-medium capitalize leading-5">
-                    {groupTitle === null || groupTitle === "null"
-                      ? "None"
-                      : createdBy
+                    {selectedGroup === "created_by"
                      ? createdBy
+                      : selectedGroup === "assignees"
+                      ? assignees
                      : addSpaceIfCamelCase(groupTitle)}
                  </h2>
                ) : (
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@ -82,14 +82,14 @@ export const SidebarCycleSelect: React.FC<Props> = ({
          {cycles ? (
            cycles.length > 0 ? (
              <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                {cycles.map((option) => (
                  <CustomSelect.Option key={option.id} value={option.id}>
                    {option.name}
                  </CustomSelect.Option>
                ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
              </>
            ) : (
              <div className="text-center">No cycles found</div>
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@ -81,14 +81,14 @@ export const SidebarModuleSelect: React.FC<Props> = ({
          {modules ? (
            modules.length > 0 ? (
              <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                {modules.map((option) => (
                  <CustomSelect.Option key={option.id} value={option.id}>
                    {option.name}
                  </CustomSelect.Option>
                ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
              </>
            ) : (
              <div className="text-center">No modules found</div>
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";

 import { useRouter } from "next/router";

@ -144,6 +144,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
    [workspaceSlug, projectId, issueId, issueDetail]
  );

+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    reset();
+  }, [createLabelForm, reset]);
+
  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;

  return (
@ -431,24 +437,25 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                    </Listbox>
                  )}
                />
-                <button
-                  type="button"
-                  className={`flex ${
-                    isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
-                  onClick={() => setCreateLabelForm((prevData) => !prevData)}
-                  disabled={isNotAllowed}
-                >
-                  {createLabelForm ? (
-                    <>
-                      <XMarkIcon className="h-3 w-3" /> Cancel
-                    </>
-                  ) : (
-                    <>
-                      <PlusIcon className="h-3 w-3" /> New
-                    </>
-                  )}
-                </button>
+                {!isNotAllowed && (
+                  <button
+                    type="button"
+                    className={`flex ${
+                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                    } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
+                    onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                  >
+                    {createLabelForm ? (
+                      <>
+                        <XMarkIcon className="h-3 w-3" /> Cancel
+                      </>
+                    ) : (
+                      <>
+                        <PlusIcon className="h-3 w-3" /> New
+                      </>
+                    )}
+                  </button>
+                )}
              </div>
            </div>
          </div>
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@ -6,9 +6,10 @@ import { useRouter } from "next/router";

 // components
 import { DeleteModuleModal } from "components/modules";
+// ui
+import { AssigneesList, Avatar } from "components/ui";
 // icons
 import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
-import User from "public/user.png";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 // types
@ -21,10 +22,12 @@ type Props = {
 };

 export const SingleModuleCard: React.FC<Props> = ({ module }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
  const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
  const handleDeleteModule = () => {
    if (!module) return;

@ -33,16 +36,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
  };

  return (
-    <div className="group/card h-full w-full relative select-none p-2">
-      <div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
-        <button
-          type="button"
-          className="grid h-7 w-7 place-items-center  bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
-          onClick={() => handleDeleteModule()}
-        >
-          <TrashIcon className="h-4 w-4" />
-        </button>
-      </div>
+    <>
      <DeleteModuleModal
        isOpen={
          moduleDeleteModal &&
@ -52,101 +46,55 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
        setIsOpen={setModuleDeleteModal}
        data={selectedModuleForDelete}
      />
-      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
-          <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
-          <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
-            <div className="space-y-2">
-              <h6 className="text-gray-500">LEAD</h6>
-              <div>
-                {module.lead ? (
-                  module.lead_detail?.avatar && module.lead_detail.avatar !== "" ? (
-                    <div className="h-5 w-5 rounded-full border-2 border-white">
-                      <Image
-                        src={module.lead_detail.avatar}
-                        height="100%"
-                        width="100%"
-                        className="rounded-full"
-                        alt={module.lead_detail.first_name}
-                      />
-                    </div>
-                  ) : (
-                    <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                      {module.lead_detail?.first_name && module.lead_detail.first_name !== ""
-                        ? module.lead_detail.first_name.charAt(0)
-                        : module.lead_detail?.email.charAt(0)}
-                    </div>
-                  )
-                ) : (
-                  "N/A"
-                )}
+      <div className="group/card h-full w-full relative select-none p-2">
+        <div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center  bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+            onClick={() => handleDeleteModule()}
+          >
+            <TrashIcon className="h-4 w-4" />
+          </button>
+        </div>
+        <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+          <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
+            <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
+            <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
+              <div className="space-y-2">
+                <h6 className="text-gray-500">LEAD</h6>
+                <div>
+                  <Avatar user={module.lead_detail} />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h6 className="text-gray-500">MEMBERS</h6>
+                <div className="flex items-center gap-1 text-xs">
+                  <AssigneesList users={module.members_detail} />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h6 className="text-gray-500">END DATE</h6>
+                <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
+                  <CalendarDaysIcon className="h-3 w-3" />
+                  {renderShortNumericDateFormat(module.target_date ?? "")}
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h6 className="text-gray-500">STATUS</h6>
+                <div className="flex items-center gap-2 capitalize">
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color,
+                    }}
+                  />
+                  {module.status}
+                </div>
              </div>
            </div>
-            <div className="space-y-2">
-              <h6 className="text-gray-500">MEMBERS</h6>
-              <div className="flex items-center gap-1 text-xs">
-                {module.members && module.members.length > 0 ? (
-                  module?.members_detail?.map((member, index: number) => (
-                    <div
-                      key={index}
-                      className={`relative z-[1] h-5 w-5 rounded-full ${
-                        index !== 0 ? "-ml-2.5" : ""
-                      }`}
-                    >
-                      {member?.avatar && member.avatar !== "" ? (
-                        <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                          <Image
-                            src={member.avatar}
-                            height="100%"
-                            width="100%"
-                            className="rounded-full"
-                            alt={member?.first_name}
-                          />
-                        </div>
-                      ) : (
-                        <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                          {member?.first_name && member.first_name !== ""
-                            ? member.first_name.charAt(0)
-                            : member?.email?.charAt(0)}
-                        </div>
-                      )}
-                    </div>
-                  ))
-                ) : (
-                  <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                    <Image
-                      src={User}
-                      height="100%"
-                      width="100%"
-                      className="rounded-full"
-                      alt="No user"
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className="space-y-2">
-              <h6 className="text-gray-500">END DATE</h6>
-              <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
-                <CalendarDaysIcon className="h-3 w-3" />
-                {renderShortNumericDateFormat(module.target_date ?? "")}
-              </div>
-            </div>
-            <div className="space-y-2">
-              <h6 className="text-gray-500">STATUS</h6>
-              <div className="flex items-center gap-2 capitalize">
-                <span
-                  className="h-2 w-2 flex-shrink-0 rounded-full"
-                  style={{
-                    backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color,
-                  }}
-                />
-                {module.status}
-              </div>
-            </div>
-          </div>
-        </a>
-      </Link>
-    </div>
+          </a>
+        </Link>
+      </div>
+    </>
  );
 };
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@ -142,13 +142,16 @@ export const SingleState: React.FC<Props> = ({
      }`}
    >
      <div className="flex items-center gap-2">
-        <div
+        <span
          className="h-3 w-3 flex-shrink-0 rounded-full"
          style={{
            backgroundColor: state.color,
          }}
        />
-        <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+        <div>
+          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-gray-400">{state.description}</p>
+        </div>
      </div>
      <div className="flex items-center gap-2">
        {index !== 0 && (
--- a/apps/app/components/ui/avatar/avatar.tsx
+++ b/apps/app/components/ui/avatar/avatar.tsx
@ -13,7 +13,7 @@ import { IUser, IUserLite } from "types";
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";

 type AvatarProps = {
-  user: Partial<IUser> | Partial<IUserLite> | undefined;
+  user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
  index?: number;
 };

--- a/apps/app/components/ui/avatar/index.ts
+++ b/apps/app/components/ui/avatar/index.ts
@ -1 +0,0 @@
-export * from "./avatar";
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@ -1,4 +1,3 @@
-// components
 export * from "./button";
 export * from "./custom-listbox";
 export * from "./custom-menu";
@ -11,6 +10,6 @@ export * from "./outline-button";
 export * from "./select";
 export * from "./spinner";
 export * from "./text-area";
-export * from "./tooltip";
 export * from "./avatar";
 export * from "./datepicker";
+export * from "./tooltip";
--- a/apps/app/constants/issue.ts
+++ b/apps/app/constants/issue.ts
@ -5,6 +5,7 @@ export const GROUP_BY_OPTIONS: Array<{ name: string; key: NestedKeyOf<IIssue> |
  { name: "State", key: "state_detail.name" },
  { name: "Priority", key: "priority" },
  { name: "Created By", key: "created_by" },
+  { name: "Assignee", key: "assignees" },
  { name: "None", key: null },
 ];

--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@ -80,7 +80,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
        <div className="space-y-8">
          <div>
            <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
+            <p className="mt-4 text-sm text-gray-500">Manage the states of this project.</p>
          </div>
          <div className="flex flex-col justify-between gap-4">
            {states && projectDetails ? (