thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: draft tab and cycle sidebar update

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-01 11:58:30 +05:30
parent 7ab6eb7b48
commit 8a941d0d14
3 changed files with 97 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/app/components/cycles/sidebar.tsx
View File

@ -6,7 +6,7 @@ import Image from "next/image";
import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
import { Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker";
// icons
@ -19,7 +19,7 @@ import {
UserIcon,
} from "@heroicons/react/24/outline";
// ui
import { CustomSelect, Loader, ProgressBar } from "components/ui";
import { Loader, ProgressBar } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
// services
@ -36,17 +36,22 @@ import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-tim
import { CycleIssueResponse, ICycle, IIssue } from "types";
// fetch-keys
import { CYCLE_DETAILS } from "constants/fetch-keys";
// constants
import { CYCLE_STATUS } from "constants/cycle";
type Props = {
issues: IIssue[];
cycle: ICycle | undefined;
isOpen: boolean;
cycleIssues: CycleIssueResponse[];
cycleStatus: string;
};
export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
export const CycleDetailsSidebar: React.FC<Props> = ({
issues,
cycle,
isOpen,
cycleIssues,
cycleStatus,
}) => {
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
const router = useRouter();
@ -60,7 +65,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
const defaultValues: Partial<ICycle> = {
start_date: new Date().toString(),
end_date: new Date().toString(),
status: cycle?.status,
};
const groupedIssues = {
@ -72,7 +76,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
};
const { reset, watch, control } = useForm({
const { reset } = useForm({
defaultValues,
});
@ -118,32 +122,18 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
<>
<div className="flex gap-1 text-sm my-2">
<div className="flex items-center ">
<Controller
control={control}
name="status"
render={({ field: { value } }) => (
<CustomSelect
label={
<span
className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full text-gray-900`}
>
<Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
{watch("status")}
{cycleStatus === "current"
? "In Progress"
: cycleStatus === "completed"
? "Completed"
: cycleStatus === "upcoming"
? "Upcoming"
: "Draft"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ status: value });
}}
>
{CYCLE_STATUS.map((option) => (
<CustomSelect.Option key={option.value} value={option.value}>
<span className="text-xs">{option.label}</span>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
<div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
<Popover className="flex justify-center items-center relative rounded-lg">
@ -289,14 +279,16 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
</div>
) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
{cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name.charAt(0)
{cycle.owned_by &&
cycle.owned_by?.first_name &&
cycle.owned_by?.first_name !== ""
? cycle.owned_by?.first_name.charAt(0)
: cycle.owned_by?.email.charAt(0)}
</div>
))}
{cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name
: cycle.owned_by.email}
{cycle.owned_by?.first_name !== ""
? cycle.owned_by?.first_name
: cycle.owned_by?.email}
</div>
</div>
<div className="flex flex-wrap items-center py-2">

37
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -34,6 +34,8 @@ import {
PROJECT_ISSUES_LIST,
PROJECT_DETAILS,
CYCLE_DETAILS,
CYCLE_COMPLETE_LIST,
CYCLE_CURRENT_AND_UPCOMING_LIST,
} from "constants/fetch-keys";
const SingleCycle: React.FC<UserAuth> = (props) => {
@ -78,6 +80,40 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
: null
);
const { data: currentAndUpcomingCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
workspaceSlug && projectId
? () =>
cycleServices.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
: null
);
const { data: completedCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cycleServices.getCompletedCycles(workspaceSlug as string, projectId as string)
: null
);
const checkForInProgress = currentAndUpcomingCycles?.current_cycle?.filter(
(c) => c.id === cycleDetails?.id
);
const checkForUpcoming = currentAndUpcomingCycles?.upcoming_cycle?.filter(
(c) => c.id === cycleDetails?.id
);
const checkForInCompleted = completedCycles?.completed_cycles?.filter(
(c) => c.id === cycleDetails?.id
);
const cycleStatus =
checkForInCompleted && checkForInCompleted.length > 0
? "completed"
: checkForInProgress && checkForInProgress.length > 0
? "current"
: checkForUpcoming && checkForUpcoming.length > 0
? "upcoming"
: "draft";
const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
workspaceSlug && projectId && cycleId
@ -218,6 +254,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
</div>
)}
<CycleDetailsSidebar
cycleStatus={cycleStatus}
issues={cycleIssuesArray ?? []}
cycle={cycleDetails}
isOpen={cycleSidebar}

34
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -25,7 +25,11 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { SelectCycleType } from "types";
import type { NextPage, GetServerSidePropsContext } from "next";
// fetching keys
import { CYCLE_CURRENT_AND_UPCOMING_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
import {
CYCLE_CURRENT_AND_UPCOMING_LIST,
CYCLE_DRAFT_LIST,
PROJECT_DETAILS,
} from "constants/fetch-keys";
const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
() => import("components/cycles").then((a) => a.CompletedCyclesList),
@ -54,6 +58,13 @@ const ProjectCycles: NextPage = () => {
: null
);
const { data: draftCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
: null
);
const { data: currentAndUpcomingCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
workspaceSlug && projectId
@ -112,22 +123,29 @@ const ProjectCycles: NextPage = () => {
<Tab.Group>
<Tab.List
as="div"
className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
className="flex justify-between items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
`w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Upcoming
</Tab>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
`w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Completed
</Tab>
<Tab
className={({ selected }) =>
` w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Draft
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5">
@ -145,6 +163,14 @@ const ProjectCycles: NextPage = () => {
/>
</Tab.Panel>
</Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5">
<CyclesList
cycles={draftCycles?.draft_cycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle}
type="upcoming"
/>
</Tab.Panel>
</Tab.Group>
</div>
</div>