resource-portal / frontend /src /planner /projectTimeline.ts
Gowrisankar
Rebuild Projects page as Runn-style timeline planner like People.
9175508
import { format, parseISO } from "date-fns";
export interface ProjectBarSegment {
startIndex: number;
endIndex: number;
className: string;
label: string;
}
export function buildProjectBarSegment(
dayDates: Date[],
startDate: string,
endDate: string,
name: string,
tentative: boolean,
showTentative: boolean,
): ProjectBarSegment | null {
if (!showTentative && tentative) return null;
const rangeStart = startDate;
const rangeEnd = endDate;
let startIndex = -1;
let endIndex = -1;
dayDates.forEach((day, index) => {
const key = format(day, "yyyy-MM-dd");
if (key < rangeStart || key > rangeEnd) return;
if (startIndex === -1) startIndex = index;
endIndex = index;
});
if (startIndex === -1) return null;
return {
startIndex,
endIndex,
className: tentative ? "project-bar tentative" : "project-bar",
label: name,
};
}
export function projectBarStyle(segment: ProjectBarSegment, totalDays: number): { left: string; width: string } {
const span = segment.endIndex - segment.startIndex + 1;
return {
left: `${(segment.startIndex / totalDays) * 100}%`,
width: `${(span / totalDays) * 100}%`,
};
}
export function overlapsVisibleRange(
startDate: string,
endDate: string,
viewStart: Date,
viewEnd: Date,
): boolean {
const projStart = parseISO(startDate);
const projEnd = parseISO(endDate);
return projStart < viewEnd && projEnd >= viewStart;
}