Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history 
version-patch
  • Loading branch information
@trueberryless
trueberryless committed Jul 6, 2024
1 parent 994d2df commit 6d47ff7
Show file tree
Hide file tree
Showing 9 changed files with 466 additions and 106 deletions.
132 changes: 80 additions & 52 deletions src/components/tasks/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Project, Task } from "@/models";
import { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "../tasks/data-table-column-header";
import { priorities, statuses } from "@/models/project";
import { priorities, statuses } from "@/models/task";
import { Badge } from "../ui/badge";
import { format } from "date-fns";
import { DataTableRowActions } from "../tasks/data-table-row-actions";
Expand Down Expand Up @@ -80,20 +80,41 @@ export const columnsXl: ColumnDef<Task>[] = [
return <div className="font-medium">{formattedTime}</div>;
},
},
// {
// accessorKey: "timeSpansCount",
// header: ({ column }) => (
// <DataTableColumnHeader column={column} title="Number of Time Spans" />
// ),
// cell: ({ row }) => {
// const task: Task = row.original;

// return (
// <div className="font-medium">
// {task.timeSpans.length} Slot{task.timeSpans.length > 1 ? "s" : ""}
// </div>
// );
// },
// },
{
accessorKey: "timeSpansCount",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Number of Time Spans" />
),
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const task: Task = row.original;
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!status) {
return null;
}

return (
<div className="font-medium">
{task.timeSpans.length} Slot{task.timeSpans.length > 1 ? "s" : ""}
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
accessorKey: "priority",
Expand Down Expand Up @@ -147,22 +168,6 @@ export const columnsLg: ColumnDef<Task>[] = [
);
},
},
{
accessorKey: "description",
header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("description")}
</span>
</div>
);
},
},
{
accessorKey: "projectName",
header: ({ column }) => <DataTableColumnHeader column={column} title="Project" />,
Expand Down Expand Up @@ -199,6 +204,27 @@ export const columnsLg: ColumnDef<Task>[] = [
return <div className="font-medium">{formattedTime}</div>;
},
},
{
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!status) {
return null;
}

return (
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
Expand Down Expand Up @@ -277,14 +303,24 @@ export const columnsMd: ColumnDef<Task>[] = [
},
},
{
accessorKey: "timeSpent",
header: ({ column }) => <DataTableColumnHeader column={column} title="Time Running" />,
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const task: Task = row.original; // Assuming row.original contains the Task object
const totalTime = calculateTotalTime(task);
const formattedTime = msToTime(totalTime);
const status = statuses.find((status) => status.value === row.getValue("status"));

return <div className="font-medium">{formattedTime}</div>;
if (!status) {
return null;
}

return (
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
Expand Down Expand Up @@ -365,23 +401,19 @@ export const columnsSm: ColumnDef<Task>[] = [
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const priority = priorities.find(
(priority) => priority.value === row.getValue("priority")
);
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!priority) {
if (!status) {
return null;
}

return (
<div className="flex items-center">
{priority.icon && (
<priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
Expand Down Expand Up @@ -417,23 +449,19 @@ export const columnsMobile: ColumnDef<Task>[] = [
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const priority = priorities.find(
(priority) => priority.value === row.getValue("priority")
);
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!priority) {
if (!status) {
return null;
}

return (
<div className="flex items-center">
{priority.icon && (
<priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
Expand Down
11 changes: 10 additions & 1 deletion src/components/tasks/data-table-toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import { Table } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

import Project, { priorities, statuses } from "@/models/project";
import Project from "@/models/project";
import { priorities, statuses } from "@/models/task";

import { DataTableFacetedFilter } from "./data-table-faceted-filter";
import { DataTableViewOptions } from "./data-table-view-options";
import { loadData } from "@/utils/load";
Expand Down Expand Up @@ -50,6 +52,13 @@ export function DataTableToolbar<TData>({ table }: DataTableToolbarProps<TData>)
options={projects}
/>
)}
{table.getColumn("status") && (
<DataTableFacetedFilter
column={table.getColumn("status")}
title="Status"
options={statuses}
/>
)}
{table.getColumn("priority") && (
<DataTableFacetedFilter
column={table.getColumn("priority")}
Expand Down
26 changes: 26 additions & 0 deletions src/components/tasks/priority.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";
import { priorities } from "@/models/task"; // Adjust the import path as needed

interface PriorityIconLabelProps {
priorityValue: string;
justify?: "left" | "right";
}

const PriorityIconLabel: React.FC<PriorityIconLabelProps> = ({ priorityValue, justify }) => {
const priority = priorities.find((priority) => priority.value === priorityValue);

if (!priority) {
return null;
}

const Icon = priority.icon;
const justifyClass = justify === "right" ? "justify-end" : "justify-start";
return (
<div className={`flex items-center ${justifyClass}`}>
{Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{priority.label}</span>
</div>
);
};

export default PriorityIconLabel;
24 changes: 24 additions & 0 deletions src/components/tasks/status.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";
import { statuses } from "@/models/task"; // Adjust the import path as needed

interface StatusIconLabelProps {
statusValue: string;
}

const StatusIconLabel: React.FC<StatusIconLabelProps> = ({ statusValue }) => {
const status = statuses.find((status) => status.value === statusValue);

if (!status) {
return null;
}

const Icon = status.icon;
return (
<div className="flex items-center">
{Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
};

export default StatusIconLabel;
26 changes: 17 additions & 9 deletions src/models/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import {
CircleX,
CircleHelp,
Timer,
CircleDashed,
CirclePause,
CircleDotDashed,
} from "lucide-react";

export type Status = (typeof statuses)[number]["value"];
Expand All @@ -30,13 +33,8 @@ export default interface Project {

export const statuses = [
{
value: "backlog",
label: "Backlog",
icon: CircleHelp,
},
{
value: "todo",
label: "Todo",
value: "planned",
label: "Planned",
icon: Circle,
},
{
Expand All @@ -45,10 +43,20 @@ export const statuses = [
icon: Timer,
},
{
value: "done",
label: "Done",
value: "in review",
label: "In Review",
icon: CircleDotDashed,
},
{
value: "completed",
label: "Completed",
icon: CircleCheck,
},
{
value: "on hold",
label: "On Hold",
icon: CirclePause,
},
{
value: "canceled",
label: "Canceled",
Expand Down
9 changes: 8 additions & 1 deletion src/models/task.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
CircleHelp,
Timer,
} from "lucide-react";
import Project from "./project";

export type Status = (typeof statuses)[number]["value"];
export type Priority = (typeof priorities)[number]["value"];
Expand Down Expand Up @@ -77,13 +78,19 @@ export const getMostRecentTimeSpanDate = (task: Task) => {
return new Date(Math.max(...dates));
};

export const getProjectValue = (task: Task) => {
export const getProjectValue = (task: Task): string => {
const user = loadData();
const projects = user?.projects || [];
const project = projects.find((project) => project.tasks.some((t: Task) => t.id === task.id));
return project ? project.name : "Unknown";
};

export const getProject = (task: Task): Project | undefined => {
const user = loadData();
const projects = user?.projects || [];
return projects.find((project) => project.tasks.some((t: Task) => t.id === task.id));
};

export const calculateTotalTime = (task: Task): number => {
return task.timeSpans.reduce((total, timeSpan) => {
if (timeSpan.end !== null) {
Expand Down
24 changes: 23 additions & 1 deletion src/pages/projects/[id]/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,19 @@ export default function EditProduct() {
};

if (!project) {
return <div>Project not found</div>;
return (
<div className="flex w-full flex-col">
<main className="flex min-h-[calc(100vh-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
<Alert variant="default">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Loading...</AlertTitle>
<AlertDescription>
We are currently trying to fetch your data from your local storage.
</AlertDescription>
</Alert>
</main>
</div>
);
}

if (project.archivedAt) {
Expand Down Expand Up @@ -136,6 +148,16 @@ export default function EditProduct() {
</CardHeader>
<CardContent>
<div className="grid gap-6">
<div className="grid gap-3">
<Label htmlFor="name">Identifier</Label>
<Input
id="id"
type="text"
className="w-full"
value={project.id}
disabled
/>
</div>
<div className="grid gap-3">
<Label htmlFor="name">Name</Label>
<Input
Expand Down
Loading

0 comments on commit 6d47ff7

Please sign in to comment.