style :module list (#387)

* chore: module favorite type and services

* style: module list

* style: module list and card

* fix: link fix

apps/app/components/modules/single-module-card.tsx

@@ -3,28 +3,53 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";
+import useSWR, { mutate } from "swr";
 
+// toast
+import useToast from "hooks/use-toast";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
 import { AssigneesList, Avatar, CustomMenu } from "components/ui";
 // icons
 import User from "public/user.png";
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+import {
+  CalendarDaysIcon,
+  StarIcon,
+  UserCircleIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import {
+  renderShortDateWithYearFormat,
+  renderShortNumericDateFormat,
+} from "helpers/date-time.helper";
+// services
+import stateService from "services/state.service";
+import modulesService from "services/modules.service";
 // types
 import { IModule } from "types";
-// common
-import { MODULE_STATUS } from "constants/module";
-import useToast from "hooks/use-toast";
+// fetch-key
+import { MODULE_LIST, STATE_LIST } from "constants/fetch-keys";
+// helper
 import { copyTextToClipboard } from "helpers/string.helper";
+import { getStatesList } from "helpers/state.helper";
 
 type Props = {
   module: IModule;
   handleEditModule: () => void;
 };
 
+const stateGroupColours: {
+  [key: string]: string;
+} = {
+  backlog: "#3f76ff",
+  unstarted: "#ff9e9e",
+  started: "#d687ff",
+  cancelled: "#ff5353",
+  completed: "#096e8d",
+};
+
 export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
 
@@ -37,6 +62,80 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
 
     setModuleDeleteModal(true);
   };
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && module.project_detail.id ? STATE_LIST(module.project_detail.id) : null,
+    workspaceSlug && module.project_detail.id
+      ? () => stateService.getStates(workspaceSlug as string, module.project_detail.id)
+      : null
+  );
+
+  const states = getStatesList(stateGroups ?? {});
+  const selectedOption = states?.find(
+    (s) => s.name.replace(" ", "-").toLowerCase() === module.status?.replace(" ", "-").toLowerCase()
+  );
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug && !projectId && !module) return;
+
+    modulesService
+      .addModuleToFavorites(workspaceSlug as string, projectId as string, {
+        module: module.id,
+      })
+      .then(() => {
+        mutate<IModule[]>(
+          MODULE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((m) => ({
+              ...m,
+              is_favorite: m.id === module.id ? true : m.is_favorite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the module to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the module to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !module) return;
+
+    modulesService
+      .removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id)
+      .then(() => {
+        mutate<IModule[]>(
+          MODULE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((m) => ({
+              ...m,
+              is_favorite: m.id === module.id ? false : m.is_favorite,
+            })),
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the module from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the module from favorites. Please try again.",
+        });
+      });
+  };
 
   const handleCopyText = () => {
     const originURL =
@@ -53,6 +152,9 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
     });
   };
 
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
   return (
     <>
       <DeleteModuleModal
@@ -60,80 +162,114 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         setIsOpen={setModuleDeleteModal}
         data={module}
       />
-      <div className="group/card h-full w-full relative select-none p-2">
-        <div className="absolute top-4 right-4 ">
-          <CustomMenu width="auto" ellipsis>
-            <CustomMenu.MenuItem onClick={handleEditModule}>Edit module</CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={handleDeleteModule}>Delete module</CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={handleCopyText}>Copy module link</CustomMenu.MenuItem>
-          </CustomMenu>
-        </div>
-        <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-          <a className="flex flex-col justify-between h-full cursor-default rounded-md border bg-white p-3 ">
-            <span className="w-3/4 text-ellipsis cursor-pointer 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_detail ? (
-                    <Avatar user={module.lead_detail} />
-                  ) : (
-                    <div className="flex items-center gap-1">
-                      <Image
-                        src={User}
-                        height="16px"
-                        width="16px"
-                        className="rounded-full"
-                        alt="N/A"
-                      />
-                      <span>N/A</span>
-                    </div>
-                  )}
+      <div className="h-full w-full min-w-[380px]">
+        <div className="flex h-full w-full flex-row rounded-[10px] bg-white text-xs shadow">
+          <span
+            className={`h-full w-2.5 rounded-l-[10px] `}
+            style={{
+              backgroundColor: `${
+                selectedOption ? stateGroupColours[selectedOption.group] : "#6b7280"
+              }`,
+            }}
+          />
+          <div className="flex h-full w-full flex-col items-start justify-between gap-6 p-5">
+            <div className="flex flex-col w-full gap-5">
+              <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+                <a className="w-full">
+                  <span className="text-xl font-semibold text-black">{module.name}</span>
+                </a>
+              </Link>
+              <div className="flex items-center gap-4">
+                <div className="flex items-start gap-1 ">
+                  <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
+                  <span className="text-gray-400">Start :</span>
+                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+                </div>
+                <div className="flex items-start gap-1 ">
+                  <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
+                  <span className="text-gray-400">End :</span>
+                  <span>{renderShortDateWithYearFormat(endDate)}</span>
                 </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_detail && module.members_detail.length > 0 ? (
-                    <AssigneesList users={module.members_detail} length={3} />
-                  ) : (
-                    <div className="flex items-center gap-1">
-                      <Image
-                        src={User}
-                        height="16px"
-                        width="16px"
-                        className="rounded-full"
-                        alt="N/A"
-                      />
-                      <span>N/A</span>
-                    </div>
-                  )}
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-1.5">
+                  <UserCircleIcon className="h-5 w-5 text-gray-400" />
+                  <span>Lead : </span>
+                  <div>
+                    {module.lead_detail ? (
+                      <div className="flex items-center gap-1">
+                        <Avatar user={module.lead_detail} />
+                        <span>{module.lead_detail.first_name}</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1">
+                        <Image
+                          src={User}
+                          height="12px"
+                          width="12px"
+                          className="rounded-full"
+                          alt="N/A"
+                        />
+                        <span>N/A</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-              <div className="space-y-2">
-                <h6 className="text-gray-500">END DATE</h6>
-                <div className="flex w-min items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
-                  <CalendarDaysIcon className="h-3 w-3" />
-                  {module.target_date ? renderShortNumericDateFormat(module?.target_date) : "N/A"}
-                </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 className="flex items-center gap-1.5">
+                  <UserGroupIcon className="h-5 w-5 text-gray-400" />
+                  <span>Members</span>
+                  <div className="flex  items-center gap-1 text-xs">
+                    {module.members_detail && module.members_detail.length > 0 ? (
+                      <AssigneesList users={module.members_detail} length={3} />
+                    ) : (
+                      <div className="flex items-center gap-1">
+                        <Image
+                          src={User}
+                          height="16px"
+                          width="16px"
+                          className="rounded-full"
+                          alt="N/A"
+                        />
+                        <span>N/A</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
-          </a>
-        </Link>
+            <div className="flex w-full items-center justify-between gap-4">
+              <div className="flex items-center gap-2 rounded bg-gray-100 px-2.5 py-2">
+                <span className="capitalize">{module?.status?.replace("-", " ")}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <span>
+                  {module.is_favorite ? (
+                    <button onClick={handleRemoveFromFavorites}>
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button onClick={handleAddToFavorites}>
+                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                    </button>
+                  )}
+                </span>
+                <span>
+                  <CustomMenu width="auto" verticalEllipsis>
+                    <CustomMenu.MenuItem onClick={handleEditModule}>
+                      Edit module
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                      Delete module
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      Copy module link
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );

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

@@ -89,14 +89,18 @@ const ProjectModules: NextPage = () => {
       {modules ? (
         modules.length > 0 ? (
           <div className="space-y-5">
-            <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
-              {modules.map((module) => (
-                <SingleModuleCard
-                  key={module.id}
-                  module={module}
-                  handleEditModule={() => handleEditModule(module)}
-                />
-              ))}
+            <div className="flex flex-col gap-5">
+              <h3 className="text-3xl font-semibold text-black">Module</h3>
+
+              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+                {modules.map((module) => (
+                  <SingleModuleCard
+                    key={module.id}
+                    module={module}
+                    handleEditModule={() => handleEditModule(module)}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         ) : (

apps/app/services/modules.service.ts

@@ -151,6 +151,28 @@ class ProjectIssuesServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addModuleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      module: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModuleFromFavorites(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectIssuesServices();

apps/app/types/modules.d.ts

@@ -22,6 +22,7 @@ export interface IModule {
   members: string[];
   members_list: string[];
   members_detail: IUserLite[];
+  is_favorite: boolean;
   name: string;
   project: string;
   project_detail: IProject;