Skip to content

feat: preview modal, style: issues page #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vamsi merged 1 commit into from
Nov 28, 2022
Merged

feat: preview modal, style: issues page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/command-palette/shortcuts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{
title: "Common",
shortcuts: [
{ key: "Ctrl + p", description: "To open create project modal" },
{ key: "Ctrl + i", description: "To open create issue modal" },
{ key: "Ctrl + q", description: "To open create cycle modal" },
{ key: "Ctrl + p", description: "To create project" },
{ key: "Ctrl + i", description: "To create issue" },
{ key: "Ctrl + q", description: "To create cycle" },
{ key: "Ctrl + h", description: "To open shortcuts guide" },
{
key: "Ctrl + alt + c",
Expand Down
198 changes: 98 additions & 100 deletions components/project/issues/BoardView/SingleBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,110 +199,107 @@ const SingleBoard: React.FC<Props> = ({
{groupedByIssues[groupTitle].map((childIssue: any, index: number) => (
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
{(provided, snapshot) => (
<div
className={`border rounded bg-white shadow-sm cursor-pointer ${
snapshot.isDragging ? "border-indigo-600 shadow-lg bg-indigo-50" : ""
}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
<div
className="px-2 py-3 space-y-1.5 select-none"
{...provided.dragHandleProps}
<Link href={`/projects/${childIssue.project}/issues/${childIssue.id}`}>
<a
className={`group block border rounded bg-white shadow-sm ${
snapshot.isDragging ? "border-indigo-600 shadow-lg bg-indigo-50" : ""
}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
{Object.keys(properties).map(
(key) =>
properties[key as keyof Properties] &&
!Array.isArray(childIssue[key as keyof IIssue]) && (
<div
key={key}
className={`${
key === "name"
? "text-sm font-medium mb-2"
: key === "description"
? "text-xs text-black"
: key === "priority"
? `text-xs bg-gray-200 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap capitalize font-medium ${
childIssue.priority === "high"
? "bg-red-100 text-red-600"
: childIssue.priority === "medium"
? "bg-orange-100 text-orange-500"
: childIssue.priority === "low"
? "bg-green-100 text-green-500"
: "hidden"
}`
: key === "target_date"
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
: "text-sm text-gray-500"
} gap-1
<div
className="px-2 py-3 space-y-1.5 select-none"
{...provided.dragHandleProps}
>
{Object.keys(properties).map(
(key) =>
properties[key as keyof Properties] &&
!Array.isArray(childIssue[key as keyof IIssue]) && (
<div
key={key}
className={`${
key === "name"
? "text-sm font-medium mb-2"
: key === "description"
? "text-xs text-black"
: key === "priority"
? `text-xs bg-gray-200 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap capitalize font-medium ${
childIssue.priority === "high"
? "bg-red-100 text-red-600"
: childIssue.priority === "medium"
? "bg-orange-100 text-orange-500"
: childIssue.priority === "low"
? "bg-green-100 text-green-500"
: "hidden"
}`
: key === "target_date"
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
: "text-sm text-gray-500"
} gap-1
`}
>
{key === "target_date" ? (
<>
<CalendarDaysIcon className="h-4 w-4" />{" "}
{childIssue.target_date
? renderShortNumericDateFormat(childIssue.target_date)
: "N/A"}
</>
) : (
""
)}
{key === "name" && (
<Link
href={`/projects/${childIssue.project}/issues/${childIssue.id}`}
>
<a className="hover:text-theme duration-300">
>
{key === "target_date" ? (
<>
<CalendarDaysIcon className="h-4 w-4" />{" "}
{childIssue.target_date
? renderShortNumericDateFormat(childIssue.target_date)
: "N/A"}
</>
) : (
""
)}
{key === "name" && (
<span className="group-hover:text-theme">
{childIssue.name}
</a>
</Link>
)}
{key === "state" && (
<>{addSpaceIfCamelCase(childIssue["state_detail"].name)}</>
)}
{key === "priority" && <>{childIssue.priority}</>}
{key === "description" && <>{childIssue.description}</>}
{key === "assignee" ? (
<div className="flex items-center gap-1 text-xs">
{childIssue?.assignee_details?.length > 0 ? (
childIssue?.assignee_details?.map(
(assignee: any, index: number) => (
<div
key={index}
className={`relative z-[1] h-5 w-5 rounded-full ${
index !== 0 ? "-ml-2.5" : ""
}`}
>
{assignee.avatar && assignee.avatar !== "" ? (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={assignee.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={assignee.name}
/>
</div>
) : (
<div
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{assignee.first_name.charAt(0)}
</div>
)}
</div>
</span>
)}
{key === "state" && (
<>{addSpaceIfCamelCase(childIssue["state_detail"].name)}</>
)}
{key === "priority" && <>{childIssue.priority}</>}
{key === "description" && <>{childIssue.description}</>}
{key === "assignee" ? (
<div className="flex items-center gap-1 text-xs">
{childIssue?.assignee_details?.length > 0 ? (
childIssue?.assignee_details?.map(
(assignee: any, index: number) => (
<div
key={index}
className={`relative z-[1] h-5 w-5 rounded-full ${
index !== 0 ? "-ml-2.5" : ""
}`}
>
{assignee.avatar && assignee.avatar !== "" ? (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={assignee.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={assignee.name}
/>
</div>
) : (
<div
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{assignee.first_name.charAt(0)}
</div>
)}
</div>
)
)
)
) : (
<span>None</span>
)}
</div>
) : null}
</div>
)
)}
</div>
) : (
<span>None</span>
)}
</div>
) : null}
</div>
)
)}
</div>

{/* <div
{/* <div
className={`p-2 bg-indigo-50 flex items-center justify-between ${
snapshot.isDragging ? "bg-indigo-200" : ""
}`}
Expand All @@ -324,7 +321,8 @@ const SingleBoard: React.FC<Props> = ({
</button>
</div>
</div> */}
</div>
</a>
</Link>
)}
</Draggable>
))}
Expand Down
22 changes: 21 additions & 1 deletion components/project/issues/ListView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// react
import React from "react";
import React, { useEffect, useState } from "react";
// next
import Link from "next/link";
import Image from "next/image";
Expand All @@ -25,6 +25,7 @@ import {
renderShortNumericDateFormat,
replaceUnderscoreIfSnakeCase,
} from "constants/common";
import IssuePreviewModal from "../PreviewModal";

// types
type Props = {
Expand All @@ -44,6 +45,9 @@ const ListView: React.FC<Props> = ({
setSelectedIssue,
handleDeleteIssue,
}) => {
const [issuePreviewModal, setIssuePreviewModal] = useState(false);
const [previewModalIssueId, setPreviewModalIssueId] = useState<string | null>(null);

const { activeWorkspace, activeProject, states } = useUser();

const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
Expand Down Expand Up @@ -71,8 +75,23 @@ const ListView: React.FC<Props> = ({
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);

const handleHover = (issueId: string) => {
document.addEventListener("keydown", (e) => {
if (e.code === "Space") {
e.preventDefault();
setPreviewModalIssueId(issueId);
setIssuePreviewModal(true);
}
});
};

return (
<div className="mt-4 flex flex-col">
<IssuePreviewModal
isOpen={issuePreviewModal}
setIsOpen={setIssuePreviewModal}
issueId={previewModalIssueId}
/>
<div className="overflow-x-auto">
<div className="inline-block min-w-full p-0.5 align-middle">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
Expand Down Expand Up @@ -135,6 +154,7 @@ const ListView: React.FC<Props> = ({
index === 0 ? "border-gray-300" : "border-gray-200",
"border-t"
)}
onMouseEnter={() => handleHover(issue.id)}
>
{Object.keys(properties).map(
(key) =>
Expand Down
Loading