feat: react-datepicker added (#210)
* fix: issue description form * fix: build errors * feat: react-datepicker added
This commit is contained in:
parent
fcf23b985b
commit
0ff5f363ee
17 changed files with 409 additions and 251 deletions
|
|
@ -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<ICycle> = {
|
|||
|
||||
const CycleDetailSidebar: React.FC<Props> = ({ 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<Props> = ({ cycle, isOpen, cycleIssues }) =>
|
|||
const submitChanges = (data: Partial<ICycle>) => {
|
||||
if (!workspaceSlug || !projectId || !module) return;
|
||||
|
||||
mutate<ICycle[]>(
|
||||
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<Props> = ({ cycle, isOpen, cycleIssues }) =>
|
|||
<Controller
|
||||
control={control}
|
||||
name="start_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
id="cycleStartDate"
|
||||
value={value ?? ""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ start_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
render={({ field: { value } }) => (
|
||||
<CustomDatePicker
|
||||
value={value}
|
||||
onChange={(val: Date) => {
|
||||
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<Props> = ({ cycle, isOpen, cycleIssues }) =>
|
|||
<Controller
|
||||
control={control}
|
||||
name="end_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
id="moduleEndDate"
|
||||
value={value ?? ""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ end_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
render={({ field: { value } }) => (
|
||||
<CustomDatePicker
|
||||
value={value}
|
||||
onChange={(val: Date) => {
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue