feat: cycle status (#265)

* feat: cycle status and dates added in sidebar

* feat: update status added

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>

apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx

@@ -10,6 +10,9 @@ import { Controller, useForm } from "react-hook-form";
 // react-circular-progressbar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
+// icons
+import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
+import { CycleSidebarStatusSelect } from "components/project/cycles";
 // ui
 import { Loader, CustomDatePicker } from "components/ui";
 // hooks
@@ -18,8 +21,6 @@ import useToast from "hooks/use-toast";
 import cyclesService from "services/cycles.service";
 // components
 import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
-// icons
-import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
@@ -28,6 +29,8 @@ import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
 
+import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+
 type Props = {
   issues: IIssue[];
   cycle: ICycle | undefined;
@@ -35,20 +38,17 @@ type Props = {
   cycleIssues: CycleIssueResponse[];
 };
 
-const defaultValues: Partial<ICycle> = {
-  start_date: new Date().toString(),
-  end_date: new Date().toString(),
-};
-
 const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { reset, control } = useForm({
+  const defaultValues: Partial<ICycle> = {
-    defaultValues,
+    start_date: new Date().toString(),
-  });
+    end_date: new Date().toString(),
+    status: cycle?.status,
+  };
 
   const groupedIssues = {
     backlog: [],
@@ -59,6 +59,10 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
     ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
   };
 
+  const { reset, watch, control } = useForm({
+    defaultValues,
+  });
+
   const submitChanges = (data: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
@@ -94,6 +98,22 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
     >
       {cycle ? (
         <>
+          <div className="flex gap-2 text-sm my-2">
+            <div className="px-2 py-1 rounded bg-gray-200">
+              <span className="capitalize">{cycle.status}</span>
+            </div>
+            <div className="px-2 py-1 rounded bg-gray-200">
+              <span>
+                {renderShortNumericDateFormat(`${cycle.start_date}`)
+                  ? renderShortNumericDateFormat(`${cycle.start_date}`)
+                  : "N/A"}{" "}
+                -{" "}
+                {renderShortNumericDateFormat(`${cycle.end_date}`)
+                  ? renderShortNumericDateFormat(`${cycle.end_date}`)
+                  : "N/A"}
+              </span>
+            </div>
+          </div>
           <div className="flex items-center justify-between pb-3">
             <h4 className="text-sm font-medium">{cycle.name}</h4>
             <div className="flex flex-wrap items-center gap-2">
@@ -219,6 +239,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
                   />
                 </div>
               </div>
+              <CycleSidebarStatusSelect
+                control={control}
+                submitChanges={submitChanges}
+                watch={watch}
+              />
             </div>
             <div className="py-1" />
           </div>

apps/app/components/project/cycles/index.ts

@@ -0,0 +1,3 @@
+export * from "./sidebar-select";
+export * from "./stats-view";
+export * from "./cycle-detail-sidebar";

apps/app/components/project/cycles/sidebar-select/index.ts

@@ -0,0 +1 @@
+export * from "./select-status";

apps/app/components/project/cycles/sidebar-select/select-status.tsx

@@ -0,0 +1,69 @@
+// react
+import React from "react";
+// react-hook-form
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+// ui
+import { CustomSelect } from "components/ui";
+// types
+import { ICycle } from "types";
+// common
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+type Props = {
+  control: Control<Partial<ICycle>, any>;
+  submitChanges: (formData: Partial<ICycle>) => void;
+  watch: UseFormWatch<Partial<ICycle>>;
+};
+
+export const CycleSidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
+  <div className="flex flex-wrap items-center py-2">
+    <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+      <p>Status</p>
+    </div>
+    <div className="sm:basis-1/2">
+      <Controller
+        control={control}
+        name="status"
+        render={({ field: { value } }) => (
+          <CustomSelect
+            label={
+              <span
+                className={`flex items-center gap-2 text-left capitalize ${
+                  value ? "" : "text-gray-900"
+                }`}
+              >
+                <span
+                  className="h-2 w-2 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: CYCLE_STATUS?.find((option) => option.value === value)?.color,
+                  }}
+                />
+                {watch("status")}
+              </span>
+            }
+            value={value}
+            onChange={(value: any) => {
+              submitChanges({ status: value });
+            }}
+          >
+            {CYCLE_STATUS.map((option) => (
+              <CustomSelect.Option key={option.value} value={option.value}>
+                <>
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{ backgroundColor: option.color }}
+                  />
+                  {option.label}
+                </>
+              </CustomSelect.Option>
+            ))}
+          </CustomSelect>
+        )}
+      />
+    </div>
+  </div>
+);

apps/app/constants/cycle.ts

@@ -0,0 +1,5 @@
+export const CYCLE_STATUS = [
+    { label: "Started", value: "started", color: "#5e6ad2" },
+    { label: "Completed", value: "completed", color: "#eb5757" },
+    { label: "Draft", value: "draft", color: "#f2c94c" },
+  ];