mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
236 lines
11 KiB
TypeScript
236 lines
11 KiB
TypeScript
// next
|
|
import type { NextPage } from "next";
|
|
import Link from "next/link";
|
|
// react
|
|
import React from "react";
|
|
// layouts
|
|
import AppLayout from "layouts/app-layout";
|
|
// swr
|
|
import useSWR from "swr";
|
|
// hooks
|
|
import useUser from "lib/hooks/useUser";
|
|
// hoc
|
|
import withAuthWrapper from "lib/hoc/withAuthWrapper";
|
|
// fetch keys
|
|
import { USER_ISSUE } from "constants/fetch-keys";
|
|
// services
|
|
import userService from "lib/services/user.service";
|
|
// ui
|
|
import { Spinner } from "ui";
|
|
// icons
|
|
import { ArrowRightIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
|
|
// types
|
|
import type { IIssue } from "types";
|
|
import {
|
|
addSpaceIfCamelCase,
|
|
findHowManyDaysLeft,
|
|
renderShortNumericDateFormat,
|
|
} from "constants/common";
|
|
|
|
const Workspace: NextPage = () => {
|
|
const { user, activeWorkspace, projects } = useUser();
|
|
|
|
const { data: myIssues } = useSWR<IIssue[]>(
|
|
user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
|
|
user && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null
|
|
);
|
|
|
|
const cards = [
|
|
{
|
|
id: 1,
|
|
numbers: projects?.length ?? 0,
|
|
title: "Projects",
|
|
},
|
|
{
|
|
id: 3,
|
|
numbers: myIssues?.length ?? 0,
|
|
title: "Issues",
|
|
},
|
|
];
|
|
|
|
const hours = new Date().getHours();
|
|
|
|
return (
|
|
<AppLayout noHeader={true}>
|
|
<div className="h-full w-full space-y-5">
|
|
{user ? (
|
|
<div className="font-medium text-2xl">
|
|
Good{" "}
|
|
{hours >= 4 && hours < 12
|
|
? "Morning"
|
|
: hours >= 12 && hours < 17
|
|
? "Afternoon"
|
|
: "Evening"}
|
|
, {user.first_name}!!
|
|
</div>
|
|
) : (
|
|
<div className="animate-pulse" role="status">
|
|
<div className="font-semibold text-2xl h-8 bg-gray-200 rounded dark:bg-gray-700 w-60"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* dashboard */}
|
|
<div className="flex flex-col gap-8">
|
|
<div className="grid grid-cols-2 gap-5">
|
|
{cards.map(({ id, title, numbers }) => (
|
|
<div className="py-6 px-6 min-w-[150px] flex-1 bg-white rounded-lg shadow" key={id}>
|
|
<p className="text-gray-500 mt-2 uppercase">#{title}</p>
|
|
<h2 className="text-2xl font-semibold">{numbers}</h2>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-5">
|
|
<div className="max-h-[30rem] overflow-y-auto w-full border border-gray-200 bg-white rounded-lg shadow-sm col-span-2">
|
|
{myIssues ? (
|
|
myIssues.length > 0 ? (
|
|
<div className="flex flex-col space-y-5">
|
|
<div className="bg-white rounded-lg">
|
|
<div className="bg-gray-100 px-4 py-3 rounded-t-lg">
|
|
<div className="flex items-center gap-x-2">
|
|
<h2 className="font-medium leading-5">My Issues</h2>
|
|
<p className="text-gray-500 text-sm">{myIssues.length}</p>
|
|
</div>
|
|
</div>
|
|
<div className="divide-y-2">
|
|
{myIssues.map((issue) => (
|
|
<div
|
|
key={issue.id}
|
|
className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
|
|
style={{
|
|
backgroundColor: issue.state_detail.color,
|
|
}}
|
|
/>
|
|
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
|
<a className="group relative flex items-center gap-2">
|
|
{/* {properties.key && (
|
|
<span className="flex-shrink-0 text-xs text-gray-500">
|
|
{issue.project_detail.identifier}-{issue.sequence_id}
|
|
</span>
|
|
)} */}
|
|
<span className="">{issue.name}</span>
|
|
<div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
|
|
<h5 className="font-medium mb-1">Name</h5>
|
|
<div>{issue.name}</div>
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
|
|
<div
|
|
className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
|
|
issue.priority === "urgent"
|
|
? "bg-red-100 text-red-600"
|
|
: issue.priority === "high"
|
|
? "bg-orange-100 text-orange-500"
|
|
: issue.priority === "medium"
|
|
? "bg-yellow-100 text-yellow-500"
|
|
: issue.priority === "low"
|
|
? "bg-green-100 text-green-500"
|
|
: "bg-gray-100"
|
|
}`}
|
|
>
|
|
{issue.priority ?? "None"}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
|
|
<span
|
|
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
|
style={{
|
|
backgroundColor: issue.state_detail.color,
|
|
}}
|
|
></span>
|
|
{addSpaceIfCamelCase(issue.state_detail.name)}
|
|
</div>
|
|
<div
|
|
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
|
|
issue.target_date === null
|
|
? ""
|
|
: issue.target_date < new Date().toISOString()
|
|
? "text-red-600"
|
|
: findHowManyDaysLeft(issue.target_date) <= 3 &&
|
|
"text-orange-400"
|
|
}`}
|
|
>
|
|
<CalendarDaysIcon className="h-4 w-4" />
|
|
{issue.target_date
|
|
? renderShortNumericDateFormat(issue.target_date)
|
|
: "N/A"}
|
|
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
|
<h5 className="font-medium mb-1 text-gray-900">Target date</h5>
|
|
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
|
|
<div>
|
|
{issue.target_date &&
|
|
(issue.target_date < new Date().toISOString()
|
|
? `Target date has passed by ${findHowManyDaysLeft(
|
|
issue.target_date
|
|
)} days`
|
|
: findHowManyDaysLeft(issue.target_date) <= 3
|
|
? `Target date is in ${findHowManyDaysLeft(
|
|
issue.target_date
|
|
)} days`
|
|
: "Target date")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="m-10">
|
|
<p className="text-gray-500 text-center">No Issues Found</p>
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="flex justify-center items-center p-10">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="py-6 px-6 min-w-[150px] flex-1 bg-white rounded-lg shadow">
|
|
<h3 className="text-lg font-semibold mb-5">PROJECTS</h3>
|
|
<div className="space-y-3">
|
|
{projects && activeWorkspace ? (
|
|
projects.length > 0 ? (
|
|
projects
|
|
.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
|
|
.map(
|
|
(project, index) =>
|
|
index < 3 && (
|
|
<Link href={`/projects/${project.id}/issues`} key={project.id}>
|
|
<a className="flex justify-between">
|
|
<div>
|
|
<h3>{project.name}</h3>
|
|
</div>
|
|
<div className="text-gray-400">
|
|
<ArrowRightIcon className="w-5" />
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
)
|
|
)
|
|
) : (
|
|
<p className="text-gray-500">No projects has been create for this workspace.</p>
|
|
)
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
};
|
|
|
|
export default withAuthWrapper(Workspace);
|