forked from github/plane
refactor/cycles_folder_structure (#304)
This commit is contained in:
parent
77c319c748
commit
e5934e0b07
@ -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}
|
||||||
|
@ -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;
|
|
@ -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;
|
|
@ -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"
|
||||||
|
@ -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";
|
||||||
|
@ -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>
|
||||||
|
@ -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 }) => (
|
||||||
<>
|
<>
|
||||||
|
@ -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;
|
|
@ -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;
|
|
@ -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]
|
||||||
|
@ -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)}
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
|
@ -1,2 +0,0 @@
|
|||||||
export * from "./stats-view";
|
|
||||||
export * from "./cycle-detail-sidebar";
|
|
@ -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}
|
||||||
|
@ -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}
|
||||||
|
4
apps/app/types/cycles.d.ts
vendored
4
apps/app/types/cycles.d.ts
vendored
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user