From 0ff5f363eeae432e10f0769413a0bc4ae59d9c64 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 30 Jan 2023 23:16:02 +0530 Subject: [PATCH] feat: react-datepicker added (#210) * fix: issue description form * fix: build errors * feat: react-datepicker added --- .../common/board-view/single-issue.tsx | 46 ++++++++-- .../common/list-view/single-issue.tsx | 40 +++++++- apps/app/components/issues/form.tsx | 35 ++++--- .../onboarding/break-into-modules.tsx | 48 +++++----- .../project/create-project-modal.tsx | 2 +- .../cycles/create-update-cycle-modal.tsx | 91 +++++++++++++------ .../cycles/cycle-detail-sidebar/index.tsx | 58 +++++++----- .../project/issues/BoardView/index.tsx | 26 +++--- .../issues/issue-detail/activity/index.tsx | 15 +-- .../issue-detail-sidebar/index.tsx | 44 ++++----- .../create-update-module-modal/index.tsx | 82 +++++++++++------ .../modules/module-detail-sidebar/index.tsx | 59 ++++++------ .../module-detail-sidebar/select-members.tsx | 51 +---------- apps/app/components/ui/datepicker.tsx | 40 ++++++++ apps/app/components/ui/index.ts | 1 + .../projects/[projectId]/cycles/[cycleId].tsx | 2 +- apps/app/styles/globals.css | 20 ++++ 17 files changed, 409 insertions(+), 251 deletions(-) create mode 100644 apps/app/components/ui/datepicker.tsx diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx index 7dd333e3f..a099c29b1 100644 --- a/apps/app/components/common/board-view/single-issue.tsx +++ b/apps/app/components/common/board-view/single-issue.tsx @@ -1,23 +1,26 @@ import React from "react"; -// next + import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; -// swr + import useSWR, { mutate } from "swr"; + // react-beautiful-dnd import { DraggableStateSnapshot } from "react-beautiful-dnd"; +// react-datepicker +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // constants import { TrashIcon } from "@heroicons/react/24/outline"; -import { CalendarDaysIcon } from "@heroicons/react/20/solid"; // services import issuesService from "services/issues.service"; import stateService from "services/state.service"; import projectService from "services/project.service"; // components -import { CustomSelect, AssigneesList } from "components/ui"; +import { AssigneesList, CustomDatePicker } from "components/ui"; // helpers import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper"; @@ -256,7 +259,7 @@ const SingleBoardIssue: React.FC = ({ )} */} {properties.due_date && (
= ({ : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400" }`} > - - {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"} + { + partialUpdateIssue({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); + }} + className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} + /> + {/* { + partialUpdateIssue({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); + }} + dateFormat="dd-MM-yyyy" + className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ + issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center" + }`} + isClearable + /> */}
)} {properties.sub_issue_count && ( diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx index 3f144568a..8879b9fb7 100644 --- a/apps/app/components/common/list-view/single-issue.tsx +++ b/apps/app/components/common/list-view/single-issue.tsx @@ -5,6 +5,9 @@ import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; +// react-datepicker +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; // services import issuesService from "services/issues.service"; import workspaceService from "services/workspace.service"; @@ -12,7 +15,7 @@ import stateService from "services/state.service"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // ui -import { CustomMenu, CustomSelect, AssigneesList, Avatar } from "components/ui"; +import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui"; // components import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; // icons @@ -241,7 +244,7 @@ const SingleListIssue: React.FC = ({ )} */} {properties.due_date && (
= ({ : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400" }`} > - - {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"} + { + partialUpdateIssue({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); + }} + className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} + /> + {/* { + partialUpdateIssue({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); + }} + dateFormat="dd-MM-yyyy" + className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ + issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center" + }`} + isClearable + /> */}
Due date
{renderShortNumericDateFormat(issue.target_date ?? "")}
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index 3070eae2a..c61a62e03 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -19,7 +19,7 @@ import { CycleSelect as IssueCycleSelect } from "components/cycles/select"; import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal"; import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; // ui -import { Button, CustomMenu, Input, Loader } from "components/ui"; +import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; // helpers @@ -289,20 +289,25 @@ export const IssueForm: FC = ({ )} /> - ( - { - onChange(e.target.value); - }} - className="cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" - /> - )} - /> +
+ ( + { + onChange( + val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null + ); + }} + className="max-w-[7rem]" + /> + )} + /> +
( -
-
-
- Plane- Modules -
-
-

Break into Modules

-

- Modules break your big think into Projects or Features, to help you organize better. -

-

4/5

-
+
+
+
+ Plane- Modules
- ); +
+

Break into Modules

+

+ Modules break your big thing into Projects or Features, to help you organize better. +

+

4/5

+
+
+); export default BreakIntoModules; diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx index f1c14bda6..37905ea50 100644 --- a/apps/app/components/project/create-project-modal.tsx +++ b/apps/app/components/project/create-project-modal.tsx @@ -185,7 +185,7 @@ export const CreateProjectModal: React.FC = (props) => {

-
+
- +
Start Date
+
+ ( + { + onChange( + val + ? `${val.getFullYear()}-${ + val.getMonth() + 1 + }-${val.getDate()}` + : null + ); + }} + error={errors.start_date ? true : false} + /> + )} + /> + {errors.start_date && ( +
{errors.start_date.message}
+ )} +
- +
End Date
+
+ ( + { + onChange( + val + ? `${val.getFullYear()}-${ + val.getMonth() + 1 + }-${val.getDate()}` + : null + ); + }} + error={errors.end_date ? true : false} + /> + )} + /> + {errors.end_date && ( +
{errors.end_date.message}
+ )} +
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx index 3fa73c913..dd81f0692 100644 --- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx +++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx @@ -13,7 +13,7 @@ import cyclesService from "services/cycles.service"; // hooks import useToast from "hooks/use-toast"; // ui -import { Loader } from "components/ui"; +import { Loader, CustomDatePicker } from "components/ui"; //progress-bar import { CircularProgressbar } from "react-circular-progressbar"; import "react-circular-progressbar/dist/styles.css"; @@ -23,7 +23,7 @@ import { groupBy } from "helpers/array.helper"; // types import { CycleIssueResponse, ICycle } from "types"; // fetch-keys -import { CYCLE_DETAIL } from "constants/fetch-keys"; +import { CYCLE_LIST } from "constants/fetch-keys"; type Props = { cycle: ICycle | undefined; @@ -38,9 +38,7 @@ const defaultValues: Partial = { const CycleDetailSidebar: React.FC = ({ cycle, isOpen, cycleIssues }) => { const router = useRouter(); - const { - query: { workspaceSlug, projectId }, - } = router; + const { workspaceSlug, projectId, cycleId } = router.query; const { setToastAlert } = useToast(); @@ -60,11 +58,21 @@ const CycleDetailSidebar: React.FC = ({ cycle, isOpen, cycleIssues }) => const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !module) return; + mutate( + projectId && CYCLE_LIST(projectId as string), + (prevData) => + (prevData ?? []).map((tempCycle) => { + if (tempCycle.id === cycleId) return { ...tempCycle, ...data }; + return tempCycle; + }), + false + ); + cyclesService .patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data) .then((res) => { console.log(res); - mutate(CYCLE_DETAIL); + mutate(CYCLE_LIST(projectId as string)); }) .catch((e) => { console.log(e); @@ -160,16 +168,17 @@ const CycleDetailSidebar: React.FC = ({ cycle, isOpen, cycleIssues }) => ( - { - submitChanges({ start_date: e.target.value }); - onChange(e.target.value); + render={({ field: { value } }) => ( + { + submitChanges({ + start_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); }} - className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" + isClearable={false} /> )} /> @@ -184,16 +193,17 @@ const CycleDetailSidebar: React.FC = ({ cycle, isOpen, cycleIssues }) => ( - { - submitChanges({ end_date: e.target.value }); - onChange(e.target.value); + render={({ field: { value } }) => ( + { + submitChanges({ + end_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); }} - className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" + isClearable={false} /> )} /> diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx index a2f9c04d2..6243e88dd 100644 --- a/apps/app/components/project/issues/BoardView/index.tsx +++ b/apps/app/components/project/issues/BoardView/index.tsx @@ -68,7 +68,8 @@ const BoardView: React.FC = ({ issues, handleDeleteIssue, userAuth }) => const handleOnDragEnd = useCallback( (result: DropResult) => { - if (!result.destination) return; + if (!result.destination || !workspaceSlug || !projectId) return; + const { source, destination, type } = result; if (destination.droppableId === "trashBox") { @@ -94,7 +95,7 @@ const BoardView: React.FC = ({ issues, handleDeleteIssue, userAuth }) => newStates[destination.index].sequence = sequenceNumber; mutateState(newStates, false); - if (!workspaceSlug) return; + stateServices .patchState( workspaceSlug as string, @@ -140,18 +141,6 @@ const BoardView: React.FC = ({ issues, handleDeleteIssue, userAuth }) => draggedItem.state = destinationStateId; draggedItem.state_detail = destinationState; - // patch request - issuesServices.patchIssue( - workspaceSlug as string, - projectId as string, - draggedItem.id, - { - state: destinationStateId, - } - ); - - // mutate the issues - if (!workspaceSlug || !projectId) return; mutate( PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), (prevData) => { @@ -175,6 +164,15 @@ const BoardView: React.FC = ({ issues, handleDeleteIssue, userAuth }) => }, false ); + + // patch request + issuesServices + .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, { + state: destinationStateId, + }) + .then((res) => { + mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)); + }); } } } diff --git a/apps/app/components/project/issues/issue-detail/activity/index.tsx b/apps/app/components/project/issues/issue-detail/activity/index.tsx index 3b11436e3..3594bf7a8 100644 --- a/apps/app/components/project/issues/issue-detail/activity/index.tsx +++ b/apps/app/components/project/issues/issue-detail/activity/index.tsx @@ -76,11 +76,6 @@ const activityDetails: { }, }; -const defaultValues: Partial = { - comment_html: "", - comment_json: "", -}; - const IssueActivitySection: React.FC<{ issueActivities: IIssueActivity[]; mutate: KeyedMutator; @@ -99,7 +94,7 @@ const IssueActivitySection: React.FC<{ comment.id, comment ) - .then((response) => { + .then((res) => { mutate(); }); }; @@ -180,6 +175,10 @@ const IssueActivitySection: React.FC<{ ? activity.new_value !== "" ? "marked this issue being blocked by" : "removed blocker" + : activity.field === "target_date" + ? activity.new_value && activity.new_value !== "" + ? "set the due date to" + : "removed the due date" : activityDetails[activity.field as keyof typeof activityDetails] ?.message}{" "} @@ -203,7 +202,9 @@ const IssueActivitySection: React.FC<{ ) : activity.field === "assignee" ? ( activity.old_value ) : activity.field === "target_date" ? ( - renderShortNumericDateFormat(activity.new_value as string) + activity.new_value ? ( + renderShortNumericDateFormat(activity.new_value as string) + ) : null ) : activity.field === "description" ? ( "" ) : ( diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx index 8a1af534a..b46b4c3e1 100644 --- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx +++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx @@ -4,20 +4,12 @@ import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; +// react-hook-form import { useForm, Controller, UseFormWatch, Control } from "react-hook-form"; - +// react-color import { TwitterPicker } from "react-color"; -// services +// headless ui import { Popover, Listbox, Transition } from "@headlessui/react"; -import { - TagIcon, - ChevronDownIcon, - LinkIcon, - CalendarDaysIcon, - TrashIcon, - PlusIcon, - XMarkIcon, -} from "@heroicons/react/24/outline"; // hooks import useToast from "hooks/use-toast"; // services @@ -31,11 +23,19 @@ import SelectCycle from "components/project/issues/issue-detail/issue-detail-sid import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee"; import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker"; import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked"; -// headless ui // ui -import { Input, Button, Spinner } from "components/ui"; +import { Input, Button, Spinner, CustomDatePicker } from "components/ui"; import DatePicker from "react-datepicker"; // icons +import { + TagIcon, + ChevronDownIcon, + LinkIcon, + CalendarDaysIcon, + TrashIcon, + PlusIcon, + XMarkIcon, +} from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types @@ -240,16 +240,16 @@ const IssueDetailSidebar: React.FC = ({ ( - { - submitChanges({ target_date: e.target.value }); - onChange(e.target.value); + render={({ field: { value } }) => ( + { + submitChanges({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); }} - className="w-full cursor-pointer rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} /> diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx index bb9b78d9f..1ec1147e5 100644 --- a/apps/app/components/project/modules/create-update-module-modal/index.tsx +++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx @@ -5,7 +5,7 @@ import { useRouter } from "next/router"; import { mutate } from "swr"; // react-hook-form -import { useForm } from "react-hook-form"; +import { Controller, useForm } from "react-hook-form"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // components @@ -13,7 +13,7 @@ import SelectLead from "components/project/modules/create-update-module-modal/se import SelectMembers from "components/project/modules/create-update-module-modal/select-members"; import SelectStatus from "components/project/modules/create-update-module-modal/select-status"; // ui -import { Button, Input, TextArea } from "components/ui"; +import { Button, CustomDatePicker, Input, TextArea } from "components/ui"; // services import modulesService from "services/modules.service"; // hooks @@ -193,32 +193,62 @@ const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, data, pro
- +
Start Date
+
+ ( + { + onChange( + val + ? `${val.getFullYear()}-${ + val.getMonth() + 1 + }-${val.getDate()}` + : null + ); + }} + error={errors.start_date ? true : false} + /> + )} + /> + {errors.start_date && ( +
{errors.start_date.message}
+ )} +
- +
Target Date
+
+ ( + { + onChange( + val + ? `${val.getFullYear()}-${ + val.getMonth() + 1 + }-${val.getDate()}` + : null + ); + }} + error={errors.target_date ? true : false} + /> + )} + /> + {errors.target_date && ( +
{errors.target_date.message}
+ )} +
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/project/modules/module-detail-sidebar/index.tsx index a58816f6a..dce925d1d 100644 --- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx +++ b/apps/app/components/project/modules/module-detail-sidebar/index.tsx @@ -26,7 +26,7 @@ import ModuleLinkModal from "components/project/modules/module-link-modal"; import { CircularProgressbar } from "react-circular-progressbar"; import "react-circular-progressbar/dist/styles.css"; // ui -import { Loader } from "components/ui"; +import { CustomDatePicker, Loader } from "components/ui"; // icons // helpers import { timeAgo } from "helpers/date-time.helper"; @@ -39,8 +39,8 @@ import { MODULE_LIST } from "constants/fetch-keys"; const defaultValues: Partial = { members_list: [], - start_date: new Date().toString(), - target_date: new Date().toString(), + start_date: null, + target_date: null, status: null, }; @@ -88,16 +88,21 @@ const ModuleDetailSidebar: React.FC = ({ const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !module) return; + mutate( + projectId && MODULE_LIST(projectId as string), + (prevData) => + (prevData ?? []).map((module) => { + if (module.id === moduleId) return { ...module, ...data }; + return module; + }), + false + ); + modulesService .patchModule(workspaceSlug as string, projectId as string, module.id, data) .then((res) => { console.log(res); - mutate(projectId && MODULE_LIST(projectId as string), (prevData) => - (prevData ?? []).map((module) => { - if (module.id === moduleId) return { ...module, ...data }; - return module; - }) - ); + mutate(MODULE_LIST(projectId as string)); }) .catch((e) => { console.log(e); @@ -186,16 +191,16 @@ const ModuleDetailSidebar: React.FC = ({ ( - { - submitChanges({ start_date: e.target.value }); - onChange(e.target.value); + render={({ field: { value } }) => ( + { + submitChanges({ + start_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); }} - className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} /> @@ -210,16 +215,16 @@ const ModuleDetailSidebar: React.FC = ({ ( - { - submitChanges({ target_date: e.target.value }); - onChange(e.target.value); + render={({ field: { value } }) => ( + { + submitChanges({ + target_date: val + ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` + : null, + }); }} - className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} /> diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx index 4a4896fc8..1e862c9de 100644 --- a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx +++ b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx @@ -12,9 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline"; import workspaceService from "services/workspace.service"; // headless ui // ui -import { Spinner } from "components/ui"; -// icons -import User from "public/user.png"; +import { AssigneesList, Spinner } from "components/ui"; // types import { IModule } from "types"; // constants @@ -64,52 +62,7 @@ const SelectMembers: React.FC = ({ control, submitChanges }) => { >
{value && Array.isArray(value) ? ( - <> - {value.length > 0 ? ( - value.map((member, index: number) => { - const person = people?.find((p) => p.member.id === member)?.member; - - return ( -
- {person && person.avatar && person.avatar !== "" ? ( -
- {person.first_name} -
- ) : ( -
- {person?.first_name && person.first_name !== "" - ? person.first_name.charAt(0) - : person?.email.charAt(0)} -
- )} -
- ); - }) - ) : ( -
- No user -
- )} - + ) : null}
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx new file mode 100644 index 000000000..028f9ddbc --- /dev/null +++ b/apps/app/components/ui/datepicker.tsx @@ -0,0 +1,40 @@ +// react-datepicker +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; + +type Props = { + renderAs?: "input" | "button"; + value: Date | string | null | undefined; + onChange: (arg: Date) => void; + placeholder?: string; + displayShortForm?: boolean; + error?: boolean; + className?: string; + isClearable?: boolean; +}; + +export const CustomDatePicker: React.FC = ({ + renderAs = "button", + value, + onChange, + placeholder = "Select date", + displayShortForm = false, + error = false, + className = "", + isClearable = true, +}) => ( + +); diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts index 768af5a01..1a16e2072 100644 --- a/apps/app/components/ui/index.ts +++ b/apps/app/components/ui/index.ts @@ -13,3 +13,4 @@ export * from "./spinner"; export * from "./text-area"; export * from "./tooltip"; export * from "./avatar"; +export * from "./datepicker"; diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx index 6af66d85f..f4512a985 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx @@ -50,7 +50,7 @@ const SingleCycle: React.FC = (props) => { const [selectedIssues, setSelectedIssues] = useState(); const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const [deleteIssue, setDeleteIssue] = useState(undefined); - const [cycleSidebar, setCycleSidebar] = useState(false); + const [cycleSidebar, setCycleSidebar] = useState(true); const [preloadedData, setPreloadedData] = useState< (Partial & { actionType: "createIssue" | "edit" | "delete" }) | null diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index 97472944e..7ed87ba41 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -71,3 +71,23 @@ border: none; outline: none; } + +/* react datepicker styling */ +.react-datepicker-wrapper input::placeholder { + color: #000; + opacity: 1; +} + +.react-datepicker-wrapper input:-ms-input-placeholder { + color: #000; +} + +.react-datepicker-wrapper .react-datepicker__close-icon::after { + background: transparent; + color: #000; +} + +.react-datepicker-popper { + z-index: 30 !important; +} +/* end react datepicker styling */