feat: added estimates (#721)

* feat: added estimates

* chore: added estimate to issue sidebar

apps/app/components/issues/form.tsx

@@ -14,12 +14,13 @@ import useToast from "hooks/use-toast";
 import { GptAssistantModal } from "components/core";
 import {
   IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
   IssueLabelSelect,
   IssueParentSelect,
   IssuePrioritySelect,
   IssueProjectSelect,
   IssueStateSelect,
-  IssueDateSelect,
 } from "components/issues/select";
 import { CreateStateModal } from "components/states";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -47,6 +48,7 @@ const defaultValues: Partial<IIssue> = {
   name: "",
   description: "",
   description_html: "<p></p>",
+  estimate_point: 0,
   state: "",
   cycle: null,
   priority: null,
@@ -398,6 +400,15 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueEstimateSelect value={value} onChange={onChange} />
+                    )}
+                  />
+                </div>
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}

apps/app/components/issues/select/estimate.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import estimatesService from "services/estimates.service";
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+// fetch-keys
+import { ESTIMATE_POINTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  value: number;
+  onChange: (value: number) => void;
+};
+
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: estimatePoints } = useSWR(
+    workspaceSlug && projectId && projectDetails && projectDetails.estimate
+      ? ESTIMATE_POINTS_LIST(projectDetails.estimate)
+      : null,
+    workspaceSlug && projectId && projectDetails && projectDetails.estimate
+      ? () =>
+          estimatesService.getEstimatesPointsList(
+            workspaceSlug as string,
+            projectId as string,
+            projectDetails.estimate
+          )
+      : null
+  );
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <div className="flex items-center  gap-2 text-xs w-[111px]">
+          <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
+            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
+          </span>
+        </div>
+      }
+      onChange={onChange}
+      position="right"
+      width="w-full"
+    >
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option className="w-full" key={point.key} value={point.key}>
+            {point.value}
+          </CustomSelect.Option>
+        ))}
+    </CustomSelect>
+  );
+};

apps/app/components/issues/select/index.ts

@@ -1,7 +1,8 @@
 export * from "./assignee";
+export * from "./date";
+export * from "./estimate"
 export * from "./label";
 export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
-export * from "./date";

apps/app/components/issues/sidebar-select/estimate.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+// ui
+import { IssueEstimateSelect } from "components/issues/select";
+
+// icons
+import { BanknotesIcon } from "@heroicons/react/24/outline";
+
+// types
+import { UserAuth } from "types";
+// constants
+
+type Props = {
+  value: number;
+  onChange: (val: number) => void;
+  userAuth: UserAuth;
+};
+
+
+
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <BanknotesIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Estimate</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <IssueEstimateSelect value={value} onChange={onChange} />
+      </div>
+    </div>
+  );
+};

apps/app/components/issues/sidebar-select/index.ts

@@ -6,3 +6,4 @@ export * from "./module";
 export * from "./parent";
 export * from "./priority";
 export * from "./state";
+export * from "./estimate";

apps/app/components/issues/sidebar.tsx

@@ -27,6 +27,7 @@ import {
   SidebarParentSelect,
   SidebarPrioritySelect,
   SidebarStateSelect,
+  SidebarEstimateSelect,
 } from "components/issues";
 // ui
 import { Input, Spinner, CustomDatePicker } from "components/ui";
@@ -285,6 +286,17 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 />
               )}
             />
+            <Controller
+              control={control}
+              name="estimate_point"
+              render={({ field: { value } }) => (
+                <SidebarEstimateSelect
+                  value={value}
+                  onChange={(val: number) => submitChanges({ estimate_point: val })}
+                  userAuth={userAuth}
+                />
+              )}
+            />
           </div>
           <div className="py-1">
             <SidebarParentSelect