fix: cycle and module bug fixes and improvement (#2691)

* fix: cycle and module card issue count fix

* fix: cycle and module list progress icon fix

* fix: module card progress fix

* style: cycle & module empty date label updated

* fix: build error
This commit is contained in:
Anmol Singh Bhatia 2023-11-07 15:14:47 +05:30 committed by GitHub
parent 040563d148
commit 98974fdc50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 35 deletions

View File

@ -10,12 +10,12 @@ import {
} from "types/issue"; } from "types/issue";
// icons // icons
import { import {
BacklogStateIcon, BacklogGroupIcon,
UnstartedStateIcon, CancelledGroupIcon,
StartedStateIcon, CompletedGroupIcon,
CompletedStateIcon, StartedGroupIcon,
CancelledStateIcon, UnstartedGroupIcon,
} from "components/icons"; } from "@plane/ui";
// all issue views // all issue views
export const issueViews: any = { export const issueViews: any = {
@ -92,35 +92,35 @@ export const issueGroups: IIssueGroup[] = [
title: "Backlog", title: "Backlog",
color: "#d9d9d9", color: "#d9d9d9",
className: `text-[#d9d9d9] bg-[#d9d9d9]/10`, className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
icon: BacklogStateIcon, icon: BacklogGroupIcon,
}, },
{ {
key: "unstarted", key: "unstarted",
title: "Unstarted", title: "Unstarted",
color: "#3f76ff", color: "#3f76ff",
className: `text-[#3f76ff] bg-[#3f76ff]/10`, className: `text-[#3f76ff] bg-[#3f76ff]/10`,
icon: UnstartedStateIcon, icon: UnstartedGroupIcon,
}, },
{ {
key: "started", key: "started",
title: "Started", title: "Started",
color: "#f59e0b", color: "#f59e0b",
className: `text-[#f59e0b] bg-[#f59e0b]/10`, className: `text-[#f59e0b] bg-[#f59e0b]/10`,
icon: StartedStateIcon, icon: StartedGroupIcon,
}, },
{ {
key: "completed", key: "completed",
title: "Completed", title: "Completed",
color: "#16a34a", color: "#16a34a",
className: `text-[#16a34a] bg-[#16a34a]/10`, className: `text-[#16a34a] bg-[#16a34a]/10`,
icon: CompletedStateIcon, icon: CompletedGroupIcon,
}, },
{ {
key: "cancelled", key: "cancelled",
title: "Cancelled", title: "Cancelled",
color: "#dc2626", color: "#dc2626",
className: `text-[#dc2626] bg-[#dc2626]/10`, className: `text-[#dc2626] bg-[#dc2626]/10`,
icon: CancelledStateIcon, icon: CancelledGroupIcon,
}, },
]; ];

View File

@ -44,6 +44,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
const isCompleted = cycleStatus === "completed"; const isCompleted = cycleStatus === "completed";
const endDate = new Date(cycle.end_date ?? ""); const endDate = new Date(cycle.end_date ?? "");
const startDate = new Date(cycle.start_date ?? ""); const startDate = new Date(cycle.start_date ?? "");
const isDateValid = cycle.start_date || cycle.end_date;
const router = useRouter(); const router = useRouter();
@ -64,9 +65,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
? cycleTotalIssues === 0 ? cycleTotalIssues === 0
? "0 Issue" ? "0 Issue"
: cycleTotalIssues === cycle.completed_issues : cycleTotalIssues === cycle.completed_issues
? cycleTotalIssues > 1 ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
? `${cycleTotalIssues} Issues`
: `${cycleTotalIssues} Issue`
: `${cycle.completed_issues}/${cycleTotalIssues} Issues` : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
: "0 Issue"; : "0 Issue";
@ -225,10 +224,14 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</Tooltip> </Tooltip>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs text-custom-text-300"> {isDateValid ? (
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} <span className="text-xs text-custom-text-300">
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
</span> {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</span>
) : (
<span className="text-xs text-custom-text-400">No due date</span>
)}
<div className="flex items-center gap-1.5 z-10"> <div className="flex items-center gap-1.5 z-10">
{cycle.is_favorite ? ( {cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}> <button type="button" onClick={handleRemoveFromFavorites}>

View File

@ -155,9 +155,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
<span className="flex-shrink-0"> <span className="flex-shrink-0">
<CircularProgressIndicator size={38} percentage={progress}> <CircularProgressIndicator size={38} percentage={progress}>
{isCompleted ? ( {isCompleted ? (
<span className="text-sm text-custom-primary-100">{`!`}</span> progress === 100 ? (
) : progress === 100 ? ( <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" /> ) : (
<span className="text-sm text-custom-primary-100">{`!`}</span>
)
) : ( ) : (
<span className="text-xs text-custom-text-300">{`${progress}%`}</span> <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
)} )}

View File

@ -49,18 +49,19 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
const endDate = new Date(module.target_date ?? ""); const endDate = new Date(module.target_date ?? "");
const startDate = new Date(module.start_date ?? ""); const startDate = new Date(module.start_date ?? "");
const isDateValid = module.target_date || module.start_date;
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status); const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
const issueCount = const issueCount = module
moduleTotalIssues === 0 ? moduleTotalIssues === 0
? "0 Issue" ? "0 Issue"
: moduleTotalIssues === module.completed_issues : moduleTotalIssues === module.completed_issues
? moduleTotalIssues > 1 ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
? `${moduleTotalIssues} Issues` : `${module.completed_issues}/${moduleTotalIssues} Issues`
: `${moduleTotalIssues} Issue` : "0 Issue";
: `${module.completed_issues}/${moduleTotalIssues} Issues`;
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => { const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation(); e.stopPropagation();
@ -200,10 +201,17 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
</Tooltip> </Tooltip>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs text-custom-text-300"> {isDateValid ? (
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} <>
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} <span className="text-xs text-custom-text-300">
</span> {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</span>
</>
) : (
<span className="text-xs text-custom-text-400">No due date</span>
)}
<div className="flex items-center gap-1.5 z-10"> <div className="flex items-center gap-1.5 z-10">
{module.is_favorite ? ( {module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}> <button type="button" onClick={handleRemoveFromFavorites}>

View File

@ -50,7 +50,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues; const completedModuleCheck = module.status === "completed";
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => { const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation(); e.stopPropagation();
@ -134,9 +134,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
<span className="flex-shrink-0"> <span className="flex-shrink-0">
<CircularProgressIndicator size={38} percentage={progress}> <CircularProgressIndicator size={38} percentage={progress}>
{completedModuleCheck ? ( {completedModuleCheck ? (
<span className="text-sm text-custom-primary-100">{`!`}</span> progress === 100 ? (
) : progress === 100 ? ( <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" /> ) : (
<span className="text-sm text-custom-primary-100">{`!`}</span>
)
) : ( ) : (
<span className="text-xs text-custom-text-300">{`${progress}%`}</span> <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
)} )}