Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: favorite cycle and style: style improvements #376

Merged
merged 8 commits into from
Mar 6, 2023
Merged

feat: favorite cycle and style: style improvements #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
81e9190
style: consistent btn
anmolsinghbhatia Mar 6, 2023
79f5aca
style: caret direction for disclosure
anmolsinghbhatia Mar 6, 2023
59df076
fix: progress tooltip value rounded
anmolsinghbhatia Mar 6, 2023
ea7970b
chore: favorite cycle serivces
anmolsinghbhatia Mar 6, 2023
1403172
chore: favorite cycle type and constant
anmolsinghbhatia Mar 6, 2023
e101440
feat: favorite cycle feat added
anmolsinghbhatia Mar 6, 2023
0819475
refactor: favorite services and type
anmolsinghbhatia Mar 6, 2023
dbd7a5c
fix: build fix
anmolsinghbhatia Mar 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 102 additions & 25 deletions apps/app/components/cycles/single-cycle-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";

import useSWR from "swr";
import useSWR, { mutate } from "swr";

// services
import cyclesService from "services/cycles.service";
Expand All @@ -23,7 +23,7 @@ import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helpe
// types
import { CycleIssueResponse, ICycle } from "types";
// fetch-keys
import { CYCLE_ISSUES } from "constants/fetch-keys";
import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";

type TSingleStatProps = {
cycle: ICycle;
Expand Down Expand Up @@ -67,6 +67,70 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
};

const handleAddToFavorites = () => {
if (!workspaceSlug && !projectId && !cycle) return;

cyclesService
.addCycleToFavorites(workspaceSlug as string, projectId as string, {
cycle: cycle.id,
})
.then(() => {
mutate<ICycle[]>(
CYCLE_LIST(projectId as string),
(prevData) =>
(prevData ?? []).map((c) => ({
...c,
is_favorite: c.id === cycle.id ? true : c.is_favorite,
})),
false
);

setToastAlert({
type: "success",
title: "Success!",
message: "Successfully added the cycle to favorites.",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't add the cycle to favorites. Please try again.",
});
});
};

const handleRemoveFromFavorites = () => {
if (!workspaceSlug || !cycle) return;

cyclesService
.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
.then(() => {
mutate<ICycle[]>(
CYCLE_LIST(projectId as string),
(prevData) =>
(prevData ?? []).map((c) => ({
...c,
is_favorite: c.id === cycle.id ? false : c.is_favorite,
})),
false
);

setToastAlert({
type: "success",
title: "Success!",
message: "Successfully removed the cycle from favorites.",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't remove the cycle from favorites. Please try again.",
});
});
};

const handleCopyText = () => {
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
Expand Down Expand Up @@ -95,31 +159,41 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
return (
<div className="h-full w-full">
<div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a>
<div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5 py-5">
<div className="flex items-center justify-between gap-1">
<h3 className="text-xl font-semibold leading-5">{cycle.name}</h3>
{/* <span className="p-1">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5 py-5">
<div className="flex items-center justify-between gap-1">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full">
<h3 className="text-xl font-semibold leading-5 ">{cycle.name}</h3>
</a>
</Link>
{cycle.is_favorite ? (
<button onClick={handleRemoveFromFavorites} className="p-1 ">
<span>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</span>
</button>
) : (
<button onClick={handleAddToFavorites} className="p-1">
<span>
<StarIcon className="h-4 w-4 " color="#858E96" />
</span> */}
</div>
</span>
</button>
)}
</div>

<div className="flex items-center justify-start gap-5">
<div className="flex items-start gap-1 ">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Start :</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<div className="flex items-start gap-1 ">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">End :</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
</div>
<div className="flex items-center justify-start gap-5">
<div className="flex items-start gap-1 ">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Start :</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
</a>
</Link>
<div className="flex items-start gap-1 ">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">End :</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
</div>
</div>

<div className="flex h-full flex-col rounded-b-[10px]">
<div className="flex items-center justify-between px-5 py-4">
Expand Down Expand Up @@ -170,7 +244,10 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
<span> Progress </span>
<LinearProgressIndicator data={progressIndicatorData} />
<Disclosure.Button>
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
</div>
<Transition show={open}>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/ui/linear-progress-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
progress += item.value;

return (
<Tooltip tooltipContent={`${item.name} ${item.value}%`}>
<Tooltip tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
<div key={item.id} className="bar" style={style} />
</Tooltip>
);
Expand Down
18 changes: 9 additions & 9 deletions apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,32 +132,32 @@ const ProjectCycles: NextPage = () => {
>
<Tab
className={({ selected }) =>
` rounded-3xl border px-6 py-3 ${
`rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
selected
? "bg-theme text-white"
: "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
}`
}
>
Upcoming
</Tab>
<Tab
className={({ selected }) =>
` rounded-3xl border px-6 py-3 ${
`rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
selected
? "bg-theme text-white"
: "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
}`
}
>
Completed
</Tab>
<Tab
className={({ selected }) =>
` rounded-3xl border px-6 py-3 ${
`rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
selected
? "bg-theme text-white"
: "border-gray-400 bg-white text-gray-900 hover:bg-gray-200"
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
}`
}
>
Expand Down
23 changes: 23 additions & 0 deletions apps/app/services/cycles.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,29 @@ class ProjectCycleServices extends APIService {
throw error?.response?.data;
});
}

async addCycleToFavorites(
workspaceSlug: string,
projectId: string,
data: {
cycle: string;
}
): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}

async removeCycleFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}

}

export default new ProjectCycleServices();
1 change: 1 addition & 0 deletions apps/app/types/cycles.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export interface ICycle {
description: string;
start_date: string | null;
end_date: string | null;
is_favorite: boolean;
created_by: string;
updated_by: string;
project: string;
Expand Down