refactor/cycles_folder_structure (#304)

This commit is contained in:
Aaryan Khandelwal 2023-02-20 11:23:04 +05:30 committed by GitHub
parent 77c319c748
commit e5934e0b07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 175 additions and 439 deletions

View File

@ -17,8 +17,8 @@ import { ShortcutsModal } from "components/command-palette";
import { BulkDeleteIssuesModal } from "components/core"; import { BulkDeleteIssuesModal } from "components/core";
import { CreateProjectModal } from "components/project"; import { CreateProjectModal } from "components/project";
import { CreateUpdateIssueModal } from "components/issues"; import { CreateUpdateIssueModal } from "components/issues";
import { CreateUpdateCycleModal } from "components/cycles";
import { CreateUpdateModuleModal } from "components/modules"; import { CreateUpdateModuleModal } from "components/modules";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
// ui // ui
import { Button } from "components/ui"; import { Button } from "components/ui";
// icons // icons
@ -169,8 +169,7 @@ export const CommandPalette: React.FC = () => {
<> <>
<CreateUpdateCycleModal <CreateUpdateCycleModal
isOpen={isCreateCycleModalOpen} isOpen={isCreateCycleModalOpen}
setIsOpen={setIsCreateCycleModalOpen} handleClose={() => setIsCreateCycleModalOpen(false)}
projectId={projectId as string}
/> />
<CreateUpdateModuleModal <CreateUpdateModuleModal
isOpen={isCreateModuleModalOpen} isOpen={isCreateModuleModalOpen}

View File

@ -1,8 +1,7 @@
// react // react
import { useState } from "react"; import { useState } from "react";
// components // components
import SingleStat from "components/project/cycles/stats-view/single-stat"; import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
// types // types
import { ICycle, SelectCycleType } from "types"; import { ICycle, SelectCycleType } from "types";
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons"; import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
@ -14,7 +13,7 @@ type TCycleStatsViewProps = {
type: "current" | "upcoming" | "completed"; type: "current" | "upcoming" | "completed";
}; };
const CycleStatsView: React.FC<TCycleStatsViewProps> = ({ export const CyclesListView: React.FC<TCycleStatsViewProps> = ({
cycles, cycles,
setCreateUpdateCycleModal, setCreateUpdateCycleModal,
setSelectedCycle, setSelectedCycle,
@ -35,7 +34,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
return ( return (
<> <>
<ConfirmCycleDeletion <DeleteCycleModal
isOpen={ isOpen={
cycleDeleteModal && cycleDeleteModal &&
!!selectedCycleForDelete && !!selectedCycleForDelete &&
@ -46,7 +45,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
/> />
{cycles.length > 0 ? ( {cycles.length > 0 ? (
cycles.map((cycle) => ( cycles.map((cycle) => (
<SingleStat <SingleCycleCard
key={cycle.id} key={cycle.id}
cycle={cycle} cycle={cycle}
handleDeleteCycle={() => handleDeleteCycle(cycle)} handleDeleteCycle={() => handleDeleteCycle(cycle)}
@ -71,5 +70,3 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
</> </>
); );
}; };
export default CycleStatsView;

View File

@ -23,7 +23,7 @@ type TConfirmCycleDeletionProps = {
// fetch-keys // fetch-keys
import { CYCLE_LIST } from "constants/fetch-keys"; import { CYCLE_LIST } from "constants/fetch-keys";
const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
isOpen, isOpen,
setIsOpen, setIsOpen,
data, data,
@ -149,5 +149,3 @@ const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({
</Transition.Root> </Transition.Root>
); );
}; };
export default ConfirmCycleDeletion;

View File

@ -1,39 +1,59 @@
import { FC } from "react"; import { useEffect } from "react";
// react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// components // ui
import { Button, Input, TextArea, CustomSelect } from "components/ui"; import { Button, CustomDatePicker, CustomSelect, Input, TextArea } from "components/ui";
// types // types
import type { ICycle } from "types"; import { ICycle } from "types";
type Props = {
handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
handleClose: () => void;
status: boolean;
data?: ICycle;
};
const defaultValues: Partial<ICycle> = { const defaultValues: Partial<ICycle> = {
name: "", name: "",
description: "", description: "",
status: "draft", status: "draft",
start_date: new Date().toString(), start_date: "",
end_date: new Date().toString(), end_date: "",
}; };
export interface CycleFormProps { export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
handleFormSubmit: (values: Partial<ICycle>) => void;
handleFormCancel?: () => void;
initialData?: Partial<ICycle>;
}
export const CycleForm: FC<CycleFormProps> = (props) => {
const { handleFormSubmit, handleFormCancel = () => {}, initialData = null } = props;
// form handler
const { const {
register, register,
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
handleSubmit, handleSubmit,
control, control,
reset,
} = useForm<ICycle>({ } = useForm<ICycle>({
defaultValues: initialData || defaultValues, defaultValues,
}); });
const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
await handleFormSubmit(formData);
reset({
...defaultValues,
});
};
useEffect(() => {
reset({
...defaultValues,
...data,
});
}, [data, reset]);
return ( return (
<form onSubmit={handleSubmit(handleFormSubmit)}> <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
<div className="space-y-5"> <div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-gray-900">
{status ? "Update" : "Create"} Cycle
</h3>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<Input <Input
@ -47,6 +67,10 @@ export const CycleForm: FC<CycleFormProps> = (props) => {
register={register} register={register}
validations={{ validations={{
required: "Name is required", required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}} }}
/> />
</div> </div>
@ -86,42 +110,56 @@ export const CycleForm: FC<CycleFormProps> = (props) => {
</div> </div>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
<div className="w-full"> <div className="w-full">
<Input <h6 className="text-gray-500">Start Date</h6>
id="start_date" <div className="w-full">
label="Start Date" <Controller
name="start_date" control={control}
type="date" name="start_date"
placeholder="Enter start date" rules={{ required: "Start date is required" }}
error={errors.start_date} render={({ field: { value, onChange } }) => (
register={register} <CustomDatePicker
validations={{ renderAs="input"
required: "Start date is required", value={value}
}} onChange={onChange}
/> error={errors.start_date ? true : false}
/>
)}
/>
{errors.start_date && (
<h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
)}
</div>
</div> </div>
<div className="w-full"> <div className="w-full">
<Input <h6 className="text-gray-500">End Date</h6>
id="end_date" <div className="w-full">
label="End Date" <Controller
name="end_date" control={control}
type="date" name="end_date"
placeholder="Enter end date" rules={{ required: "End date is required" }}
error={errors.end_date} render={({ field: { value, onChange } }) => (
register={register} <CustomDatePicker
validations={{ renderAs="input"
required: "End date is required", value={value}
}} onChange={onChange}
/> error={errors.end_date ? true : false}
/>
)}
/>
{errors.end_date && (
<h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 flex justify-end gap-2"> <div className="mt-5 flex justify-end gap-2">
<Button theme="secondary" onClick={handleFormCancel}> <Button theme="secondary" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={isSubmitting}> <Button type="submit" disabled={isSubmitting}>
{initialData {status
? isSubmitting ? isSubmitting
? "Updating Cycle..." ? "Updating Cycle..."
: "Update Cycle" : "Update Cycle"

View File

@ -1,3 +1,7 @@
export * from "./cycles-list-view";
export * from "./delete-cycle-modal";
export * from "./form";
export * from "./modal"; export * from "./modal";
export * from "./select"; export * from "./select";
export * from "./form"; export * from "./sidebar";
export * from "./single-cycle-card";

View File

@ -1,5 +1,7 @@
import { Fragment } from "react"; import { Fragment } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
// headless ui // headless ui
@ -15,28 +17,27 @@ import type { ICycle } from "types";
// fetch keys // fetch keys
import { CYCLE_LIST } from "constants/fetch-keys"; import { CYCLE_LIST } from "constants/fetch-keys";
export interface CycleModalProps { type CycleModalProps = {
isOpen: boolean; isOpen: boolean;
handleClose: () => void; handleClose: () => void;
projectId: string; data?: ICycle;
workspaceSlug: string; };
initialData?: ICycle;
}
export const CycleModal: React.FC<CycleModalProps> = ({ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
isOpen, isOpen,
handleClose, handleClose,
initialData, data,
projectId,
workspaceSlug,
}) => { }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const createCycle = (payload: Partial<ICycle>) => { const createCycle = async (payload: Partial<ICycle>) => {
cycleService await cycleService
.createCycle(workspaceSlug as string, projectId, payload) .createCycle(workspaceSlug as string, projectId as string, payload)
.then((res) => { .then((res) => {
mutate(CYCLE_LIST(projectId)); mutate(CYCLE_LIST(projectId as string));
handleClose(); handleClose();
}) })
.catch((err) => { .catch((err) => {
@ -48,11 +49,11 @@ export const CycleModal: React.FC<CycleModalProps> = ({
}); });
}; };
const updateCycle = (cycleId: string, payload: Partial<ICycle>) => { const updateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
cycleService await cycleService
.updateCycle(workspaceSlug, projectId, cycleId, payload) .updateCycle(workspaceSlug as string, projectId as string, cycleId, payload)
.then((res) => { .then((res) => {
mutate(CYCLE_LIST(projectId)); mutate(CYCLE_LIST(projectId as string));
handleClose(); handleClose();
}) })
.catch((err) => { .catch((err) => {
@ -64,18 +65,15 @@ export const CycleModal: React.FC<CycleModalProps> = ({
}); });
}; };
const handleFormSubmit = (formValues: Partial<ICycle>) => { const handleFormSubmit = async (formData: Partial<ICycle>) => {
if (workspaceSlug && projectId) { if (!workspaceSlug || !projectId) return;
const payload = {
...formValues,
};
if (initialData) { const payload: Partial<ICycle> = {
updateCycle(initialData.id, payload); ...formData,
} else { };
createCycle(payload);
} if (!data) await createCycle(payload);
} else await updateCycle(data.id, payload);
}; };
return ( return (
@ -104,10 +102,12 @@ export const CycleModal: React.FC<CycleModalProps> = ({
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <CycleForm
{initialData ? "Update" : "Create"} Cycle handleFormSubmit={handleFormSubmit}
</Dialog.Title> handleClose={handleClose}
<CycleForm handleFormSubmit={handleFormSubmit} handleFormCancel={handleClose} /> status={data ? true : false}
data={data}
/>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>

View File

@ -12,7 +12,7 @@ import { CyclesIcon } from "components/icons";
// services // services
import cycleServices from "services/cycles.service"; import cycleServices from "services/cycles.service";
// components // components
import { CycleModal } from "components/cycles"; import { CreateUpdateCycleModal } from "components/cycles";
// fetch-keys // fetch-keys
import { CYCLE_LIST } from "constants/fetch-keys"; import { CYCLE_LIST } from "constants/fetch-keys";
@ -54,12 +54,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
return ( return (
<> <>
<CycleModal <CreateUpdateCycleModal isOpen={isCycleModalActive} handleClose={closeCycleModal} />
isOpen={isCycleModalActive}
handleClose={closeCycleModal}
projectId={projectId}
workspaceSlug={workspaceSlug as string}
/>
<Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}> <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
{({ open }) => ( {({ open }) => (
<> <>

View File

@ -30,7 +30,7 @@ import cyclesService from "services/cycles.service";
// components // components
import { SidebarProgressStats } from "components/core"; import { SidebarProgressStats } from "components/core";
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion"; import { DeleteCycleModal } from "components/cycles";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper"; import { groupBy } from "helpers/array.helper";
@ -49,7 +49,7 @@ type Props = {
cycleIssues: CycleIssueResponse[]; cycleIssues: CycleIssueResponse[];
}; };
const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => { export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
const router = useRouter(); const router = useRouter();
@ -111,11 +111,7 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
return ( return (
<> <>
<ConfirmCycleDeletion <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
isOpen={cycleDeleteModal}
setIsOpen={setCycleDeleteModal}
data={cycle}
/>
<div <div
className={`fixed top-0 ${ className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]" isOpen ? "right-0" : "-right-[24rem]"
@ -331,5 +327,3 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
</> </>
); );
}; };
export default CycleDetailSidebar;

View File

@ -41,7 +41,7 @@ const stateGroupColours: {
completed: "#096e8d", completed: "#096e8d",
}; };
const SingleStat: React.FC<TSingleStatProps> = (props) => { export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
const { cycle, handleEditCycle, handleDeleteCycle } = props; const { cycle, handleEditCycle, handleDeleteCycle } = props;
const router = useRouter(); const router = useRouter();
@ -184,5 +184,3 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
</> </>
); );
}; };
export default SingleStat;

View File

@ -45,7 +45,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
setValue, setValue,
reset, reset,
formState: { errors }, formState: { errors },
setError,
} = useForm<IIssue>({ } = useForm<IIssue>({
defaultValues: { defaultValues: {
name: "", name: "",
@ -76,8 +75,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
handleFormSubmit({ handleFormSubmit({
name: formData.name ?? "", name: formData.name ?? "",
description: formData.description, description: formData.description ?? "",
description_html: formData.description_html, description_html: formData.description_html ?? "<p></p>",
}); });
}, },
[handleFormSubmit, setToastAlert] [handleFormSubmit, setToastAlert]

View File

@ -17,7 +17,7 @@ import {
} from "components/issues/select"; } from "components/issues/select";
import { CycleSelect as IssueCycleSelect } from "components/cycles/select"; import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
import { CreateStateModal } from "components/states"; import { CreateStateModal } from "components/states";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; import { CreateUpdateCycleModal } from "components/cycles";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
// ui // ui
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui"; import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
@ -131,11 +131,7 @@ export const IssueForm: FC<IssueFormProps> = ({
handleClose={() => setStateModal(false)} handleClose={() => setStateModal(false)}
projectId={projectId} projectId={projectId}
/> />
<CreateUpdateCycleModal <CreateUpdateCycleModal isOpen={cycleModal} handleClose={() => setCycleModal(false)} />
isOpen={cycleModal}
setIsOpen={setCycleModal}
projectId={projectId}
/>
<CreateLabelModal <CreateLabelModal
isOpen={labelModal} isOpen={labelModal}
handleClose={() => setLabelModal(false)} handleClose={() => setLabelModal(false)}

View File

@ -1,3 +1,5 @@
import { useEffect } from "react";
// react-hook-form // react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// components // components
@ -8,9 +10,10 @@ import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
import { IModule } from "types"; import { IModule } from "types";
type Props = { type Props = {
handleFormSubmit: (values: Partial<IModule>) => void; handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
handleClose: () => void; handleClose: () => void;
status: boolean; status: boolean;
data?: IModule;
}; };
const defaultValues: Partial<IModule> = { const defaultValues: Partial<IModule> = {
@ -21,7 +24,7 @@ const defaultValues: Partial<IModule> = {
members_list: [], members_list: [],
}; };
export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status }) => { export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
const { const {
register, register,
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
@ -40,6 +43,13 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
}); });
}; };
useEffect(() => {
reset({
...defaultValues,
...data,
});
}, [data, reset]);
return ( return (
<form onSubmit={handleSubmit(handleCreateUpdateModule)}> <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
<div className="space-y-5"> <div className="space-y-5">

View File

@ -14,8 +14,6 @@ import { ModuleForm } from "components/modules";
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
// types // types
import type { IModule } from "types"; import type { IModule } from "types";
// fetch-keys // fetch-keys
@ -46,7 +44,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
reset(defaultValues); reset(defaultValues);
}; };
const { reset, setError } = useForm<IModule>({ const { reset } = useForm<IModule>({
defaultValues, defaultValues,
}); });
@ -58,16 +56,16 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
handleClose(); handleClose();
setToastAlert({ setToastAlert({
title: "Success",
type: "success", type: "success",
message: "Module created successfully", title: "Success!",
message: "Module created successfully.",
}); });
}) })
.catch((err) => { .catch(() => {
Object.keys(err).map((key) => { setToastAlert({
setError(key as keyof typeof defaultValues, { type: "error",
message: err[key].join(", "), title: "Error!",
}); message: "Module could not be created. Please try again.",
}); });
}); });
}; };
@ -92,16 +90,16 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
handleClose(); handleClose();
setToastAlert({ setToastAlert({
title: "Success",
type: "success", type: "success",
message: "Module updated successfully", title: "Success!",
message: "Module updated successfully.",
}); });
}) })
.catch((err) => { .catch(() => {
Object.keys(err).map((key) => { setToastAlert({
setError(key as keyof typeof defaultValues, { type: "error",
message: err[key].join(", "), title: "Error!",
}); message: "Module could not be updated. Please try again.",
}); });
}); });
}; };
@ -117,15 +115,6 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
else await updateModule(payload); else await updateModule(payload);
}; };
useEffect(() => {
if (data) {
setIsOpen(true);
reset(data);
} else {
reset(defaultValues);
}
}, [data, setIsOpen, reset]);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <Dialog as="div" className="relative z-20" onClose={handleClose}>
@ -157,6 +146,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}
status={data ? true : false} status={data ? true : false}
data={data}
/> />
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

View File

@ -1,278 +0,0 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// react hook form
import { Controller, useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import cycleService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, Input, TextArea, CustomSelect, CustomDatePicker } from "components/ui";
// common
import { renderDateFormat } from "helpers/date-time.helper";
// types
import type { ICycle } from "types";
// fetch keys
import { CYCLE_LIST } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
projectId: string;
data?: ICycle;
};
const defaultValues: Partial<ICycle> = {
name: "",
description: "",
status: "draft",
start_date: null,
end_date: null,
};
const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
const {
register,
formState: { errors, isSubmitting },
handleSubmit,
control,
reset,
setError,
} = useForm<ICycle>({
defaultValues,
});
useEffect(() => {
if (data) {
setIsOpen(true);
reset(data);
} else {
reset(defaultValues);
}
}, [data, setIsOpen, reset]);
const onSubmit = async (formData: ICycle) => {
if (!workspaceSlug) return;
const payload = {
...formData,
start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
end_date: formData.end_date ? renderDateFormat(formData.end_date) : null,
};
if (!data) {
await cycleService
.createCycle(workspaceSlug as string, projectId, payload)
.then((res) => {
mutate<ICycle[]>(CYCLE_LIST(projectId), (prevData) => [res, ...(prevData ?? [])], false);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Cycle created successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof typeof defaultValues, {
message: err[key].join(", "),
});
});
});
} else {
await cycleService
.updateCycle(workspaceSlug as string, projectId, data.id, payload)
.then((res) => {
mutate(CYCLE_LIST(projectId));
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Cycle updated successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof typeof defaultValues, {
message: err[key].join(", "),
});
});
});
}
};
const handleClose = () => {
setIsOpen(false);
reset(defaultValues);
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-30" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
{data ? "Update" : "Create"} Cycle
</Dialog.Title>
<div className="space-y-3">
<div>
<Input
id="name"
label="Name"
name="name"
type="name"
placeholder="Enter name"
autoComplete="off"
error={errors.name}
register={register}
validations={{
required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}}
/>
</div>
<div>
<TextArea
id="description"
name="description"
label="Description"
placeholder="Enter description"
error={errors.description}
register={register}
/>
</div>
<div>
<h6 className="text-gray-500">Status</h6>
<Controller
name="status"
control={control}
render={({ field }) => (
<CustomSelect
{...field}
label={
<span className="capitalize">{field.value ?? "Select Status"}</span>
}
input
>
{[
{ label: "Draft", value: "draft" },
{ label: "Started", value: "started" },
{ label: "Completed", value: "completed" },
].map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
<div className="flex gap-x-2">
<div className="w-full">
<h6 className="text-gray-500">Start Date</h6>
<div className="w-full">
<Controller
control={control}
name="start_date"
rules={{ required: "Start date is required" }}
render={({ field: { value, onChange } }) => (
<CustomDatePicker
renderAs="input"
value={value}
onChange={onChange}
error={errors.start_date ? true : false}
/>
)}
/>
{errors.start_date && (
<h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
)}
</div>
</div>
<div className="w-full">
<h6 className="text-gray-500">End Date</h6>
<div className="w-full">
<Controller
control={control}
name="end_date"
rules={{ required: "End date is required" }}
render={({ field: { value, onChange } }) => (
<CustomDatePicker
renderAs="input"
value={value}
onChange={onChange}
error={errors.end_date ? true : false}
/>
)}
/>
{errors.end_date && (
<h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
)}
</div>
</div>
</div>
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button theme="secondary" onClick={handleClose}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
{data
? isSubmitting
? "Updating Cycle..."
: "Update Cycle"
: isSubmitting
? "Creating Cycle..."
: "Create Cycle"}
</Button>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};
export default CreateUpdateCycleModal;

View File

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

View File

@ -15,7 +15,7 @@ import AppLayout from "layouts/app-layout";
import { IssueViewContextProvider } from "contexts/issue-view.context"; import { IssueViewContextProvider } from "contexts/issue-view.context";
// components // components
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core"; import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar"; import { CycleDetailsSidebar } from "components/cycles";
// services // services
import issuesServices from "services/issues.service"; import issuesServices from "services/issues.service";
import cycleServices from "services/cycles.service"; import cycleServices from "services/cycles.service";
@ -215,7 +215,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
<Spinner /> <Spinner />
</div> </div>
)} )}
<CycleDetailSidebar <CycleDetailsSidebar
issues={cycleIssuesArray ?? []} issues={cycleIssuesArray ?? []}
cycle={cycleDetails} cycle={cycleDetails}
isOpen={cycleSidebar} isOpen={cycleSidebar}

View File

@ -15,8 +15,7 @@ import workspaceService from "services/workspace.service";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// components // components
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; import { CreateUpdateCycleModal, CyclesListView } from "components/cycles";
import CycleStatsView from "components/project/cycles/stats-view";
// ui // ui
import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui"; import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@ -63,15 +62,15 @@ const ProjectCycles: NextPage = () => {
}; };
const currentCycles = cycles?.filter( const currentCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "current" (c) => getCycleStatus(c.start_date, c.end_date) === "current"
); );
const upcomingCycles = cycles?.filter( const upcomingCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "upcoming" (c) => getCycleStatus(c.start_date, c.end_date) === "upcoming"
); );
const completedCycles = cycles?.filter( const completedCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "completed" (c) => getCycleStatus(c.start_date, c.end_date) === "completed"
); );
useEffect(() => { useEffect(() => {
@ -108,8 +107,7 @@ const ProjectCycles: NextPage = () => {
> >
<CreateUpdateCycleModal <CreateUpdateCycleModal
isOpen={createUpdateCycleModal} isOpen={createUpdateCycleModal}
setIsOpen={setCreateUpdateCycleModal} handleClose={() => setCreateUpdateCycleModal(false)}
projectId={projectId as string}
data={selectedCycle} data={selectedCycle}
/> />
{cycles ? ( {cycles ? (
@ -117,7 +115,7 @@ const ProjectCycles: NextPage = () => {
<div className="space-y-8"> <div className="space-y-8">
<h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3> <h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3>
<div className="space-y-5"> <div className="space-y-5">
<CycleStatsView <CyclesListView
cycles={currentCycles ?? []} cycles={currentCycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal} setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle} setSelectedCycle={setSelectedCycle}
@ -147,7 +145,7 @@ const ProjectCycles: NextPage = () => {
</Tab.List> </Tab.List>
<Tab.Panels> <Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5"> <Tab.Panel as="div" className="mt-8 space-y-5">
<CycleStatsView <CyclesListView
cycles={upcomingCycles ?? []} cycles={upcomingCycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal} setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle} setSelectedCycle={setSelectedCycle}
@ -155,7 +153,7 @@ const ProjectCycles: NextPage = () => {
/> />
</Tab.Panel> </Tab.Panel>
<Tab.Panel as="div" className="mt-8 space-y-5"> <Tab.Panel as="div" className="mt-8 space-y-5">
<CycleStatsView <CyclesListView
cycles={completedCycles ?? []} cycles={completedCycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal} setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle} setSelectedCycle={setSelectedCycle}

View File

@ -7,8 +7,8 @@ export interface ICycle {
updated_at: Date; updated_at: Date;
name: string; name: string;
description: string; description: string;
start_date: string | null; start_date: string;
end_date: string | null; end_date: string;
status: string; status: string;
created_by: string; created_by: string;
updated_by: string; updated_by: string;