style: new cycle list (#374)
* feat: short date helper function * feat: linear progress indicator added * style: new cyce list and cycle card design * feat: short date function improve * feat: linear progress indicator improvement * style: cycle card and progress indicator * fix: helper date function and progress indicator fix * fix: build error --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
fef72ccc70
commit
786816ed41
7 changed files with 285 additions and 180 deletions
|
|
@ -1,15 +1,18 @@
|
|||
// react
|
||||
import { useState } from "react";
|
||||
// next
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import cyclesService from "services/cycles.service";
|
||||
// components
|
||||
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
|
||||
// icons
|
||||
import { CompletedCycleIcon } from "components/icons";
|
||||
// types
|
||||
import { ICycle, SelectCycleType } from "types";
|
||||
import { CompletedCycleIcon } from "components/icons";
|
||||
import cyclesService from "services/cycles.service";
|
||||
// fetch-keys
|
||||
import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys";
|
||||
|
||||
export interface CompletedCyclesListProps {
|
||||
|
|
@ -58,14 +61,16 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
|
|||
data={selectedCycleForDelete}
|
||||
/>
|
||||
{completedCycles?.completed_cycles.length > 0 ? (
|
||||
completedCycles.completed_cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{completedCycles.completed_cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
<CompletedCycleIcon height="56" width="56" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// react
|
||||
import { useState } from "react";
|
||||
|
||||
// components
|
||||
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
|
||||
// icons
|
||||
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
|
||||
// types
|
||||
import { ICycle, SelectCycleType } from "types";
|
||||
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
|
||||
|
||||
type TCycleStatsViewProps = {
|
||||
cycles: ICycle[];
|
||||
|
|
@ -44,14 +45,16 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
|
|||
data={selectedCycleForDelete}
|
||||
/>
|
||||
{cycles.length > 0 ? (
|
||||
cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
{type === "upcoming" ? (
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ import Link from "next/link";
|
|||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import cyclesService from "services/cycles.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button, CustomMenu } from "components/ui";
|
||||
import { CustomMenu, LinearProgressIndicator } from "components/ui";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
|
||||
import { UserIcon } from "@heroicons/react/24/outline";
|
||||
import { CyclesIcon } from "components/icons";
|
||||
import { ChevronDownIcon, PencilIcon, StarIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { CycleIssueResponse, ICycle } from "types";
|
||||
// fetch-keys
|
||||
|
|
@ -34,11 +34,11 @@ type TSingleStatProps = {
|
|||
const stateGroupColours: {
|
||||
[key: string]: string;
|
||||
} = {
|
||||
backlog: "#3f76ff",
|
||||
unstarted: "#ff9e9e",
|
||||
started: "#d687ff",
|
||||
cancelled: "#ff5353",
|
||||
completed: "#096e8d",
|
||||
backlog: "#DEE2E6",
|
||||
unstarted: "#26B5CE",
|
||||
started: "#F7AE59",
|
||||
cancelled: "#D687FF",
|
||||
completed: "#09A953",
|
||||
};
|
||||
|
||||
export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
|
||||
|
|
@ -82,100 +82,138 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
|
|||
});
|
||||
};
|
||||
|
||||
const progressIndicatorData = Object.keys(groupedIssues).map((group, index) => ({
|
||||
id: index,
|
||||
name: capitalizeFirstLetter(group),
|
||||
value:
|
||||
cycleIssues && cycleIssues.length > 0
|
||||
? (groupedIssues[group].length / cycleIssues.length) * 100
|
||||
: 0,
|
||||
color: stateGroupColours[group],
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md border bg-white p-3">
|
||||
<div className="grid grid-cols-9 gap-2 divide-x">
|
||||
<div className="col-span-3 flex flex-col space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId as string}/cycles/${cycle.id}`}>
|
||||
<a>
|
||||
<h2 className="font-medium w-full max-w-[175px] lg:max-w-[225px] xl:max-w-[300px] text-ellipsis overflow-hidden">
|
||||
{cycle.name}
|
||||
</h2>
|
||||
</a>
|
||||
</Link>
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
|
||||
<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">
|
||||
<StarIcon className="h-4 w-4 " color="#858E96" />
|
||||
</span> */}
|
||||
</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>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div className="flex h-full flex-col rounded-b-[10px]">
|
||||
<div className="flex items-center justify-between px-5 py-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
|
||||
<Image
|
||||
src={cycle.owned_by.avatar}
|
||||
height={16}
|
||||
width={16}
|
||||
className="rounded-full"
|
||||
alt={cycle.owned_by.first_name}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize text-white"
|
||||
onClick={handleEditCycle}
|
||||
>
|
||||
{cycle.owned_by.first_name.charAt(0)}
|
||||
</button>
|
||||
)}
|
||||
<span className="text-gray-900">{cycle.owned_by.first_name}</span>
|
||||
</div>
|
||||
<div className="flex items-center ">
|
||||
<button
|
||||
onClick={handleEditCycle}
|
||||
className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-gray-100"
|
||||
>
|
||||
<span>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<CustomMenu width="auto" verticalEllipsis>
|
||||
<CustomMenu.MenuItem onClick={handleDeleteCycle}>Delete cycle</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-x-2 gap-y-3 text-xs">
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
Cycle dates
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
{renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<UserIcon className="h-4 w-4" />
|
||||
Created by
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center gap-2">
|
||||
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
|
||||
<Image
|
||||
src={cycle.owned_by.avatar}
|
||||
height={16}
|
||||
width={16}
|
||||
className="rounded-full"
|
||||
alt={cycle.owned_by.first_name}
|
||||
/>
|
||||
) : (
|
||||
<span className="grid h-5 w-5 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{cycle.owned_by.first_name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
{cycle.owned_by.first_name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full items-end">
|
||||
<Button
|
||||
theme="secondary"
|
||||
className="flex items-center gap-2"
|
||||
onClick={() =>
|
||||
router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
|
||||
}
|
||||
</div>
|
||||
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`flex h-full w-full flex-col border-t border-gray-200 bg-gray-100 ${
|
||||
open ? "" : "flex-row"
|
||||
}`}
|
||||
>
|
||||
<CyclesIcon className="h-3 w-3" />
|
||||
Open Cycle
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-3 px-5">
|
||||
<h4 className="text-sm tracking-widest">PROGRESS</h4>
|
||||
<div className="space-y-3 text-xs">
|
||||
{Object.keys(groupedIssues).map((group) => (
|
||||
<div key={group} className="flex items-center gap-2">
|
||||
<div className="flex basis-2/3 items-center gap-2">
|
||||
<span
|
||||
className="block h-2 w-2 rounded-full"
|
||||
style={{
|
||||
backgroundColor: stateGroupColours[group],
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-xs capitalize">{group}</h6>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
{groupedIssues[group].length}{" "}
|
||||
<span className="text-gray-500">
|
||||
-{" "}
|
||||
{cycleIssues && cycleIssues.length > 0
|
||||
? `${Math.round(
|
||||
(groupedIssues[group].length / cycleIssues.length) * 100
|
||||
)}%`
|
||||
: "0%"}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-2 px-5 py-4 ">
|
||||
<span> Progress </span>
|
||||
<LinearProgressIndicator data={progressIndicatorData} />
|
||||
<Disclosure.Button>
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="overflow-hidden rounded-b-md bg-white p-3 shadow">
|
||||
<div className="col-span-2 space-y-3 px-5">
|
||||
<div className="space-y-3 text-xs">
|
||||
{Object.keys(groupedIssues).map((group) => (
|
||||
<div key={group} className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-2 w-2 rounded-full"
|
||||
style={{
|
||||
backgroundColor: stateGroupColours[group],
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-xs capitalize">{group}</h6>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
{groupedIssues[group].length}{" "}
|
||||
<span className="text-gray-500">
|
||||
-{" "}
|
||||
{cycleIssues && cycleIssues.length > 0
|
||||
? `${Math.round(
|
||||
(groupedIssues[group].length / cycleIssues.length) * 100
|
||||
)}%`
|
||||
: "0%"}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue