forked from github/plane
Merge pull request #371 from makeplane/style/dropdowns
style: consistent dropdowns, feat: custom context menu
This commit is contained in:
Aaryan Khandelwal
GitHub
commit
a4dc4d1f15
@ -11,6 +11,7 @@ type Props = {
|
||||
states: IState[] | undefined;
|
||||
members: IProjectMember[] | undefined;
|
||||
addIssueToState: (groupTitle: string, stateId: string | null) => void;
|
||||
makeIssueCopy: (issue: IIssue) => void;
|
||||
handleEditIssue: (issue: IIssue) => void;
|
||||
openIssuesListModal?: (() => void) | null;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
@ -25,6 +26,7 @@ export const AllBoards: React.FC<Props> = ({
|
||||
states,
|
||||
members,
|
||||
addIssueToState,
|
||||
makeIssueCopy,
|
||||
handleEditIssue,
|
||||
openIssuesListModal,
|
||||
handleDeleteIssue,
|
||||
@ -37,49 +39,46 @@ export const AllBoards: React.FC<Props> = ({
|
||||
return (
|
||||
<>
|
||||
{groupedByIssues ? (
|
||||
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="h-full w-full">
|
||||
<div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
|
||||
{Object.keys(groupedByIssues).map((singleGroup, index) => {
|
||||
const currentState =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)
|
||||
: null;
|
||||
<div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
|
||||
<div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
|
||||
{Object.keys(groupedByIssues).map((singleGroup, index) => {
|
||||
const currentState =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)
|
||||
: null;
|
||||
|
||||
const stateId =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||
: null;
|
||||
const stateId =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||
: null;
|
||||
|
||||
const bgColor =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.color
|
||||
: "#000000";
|
||||
const bgColor =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.color
|
||||
: "#000000";
|
||||
|
||||
return (
|
||||
<SingleBoard
|
||||
key={index}
|
||||
type={type}
|
||||
currentState={currentState}
|
||||
bgColor={bgColor}
|
||||
groupTitle={singleGroup}
|
||||
groupedByIssues={groupedByIssues}
|
||||
selectedGroup={selectedGroup}
|
||||
members={members}
|
||||
handleEditIssue={handleEditIssue}
|
||||
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={openIssuesListModal ?? null}
|
||||
orderBy={orderBy}
|
||||
handleTrashBox={handleTrashBox}
|
||||
removeIssue={removeIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<SingleBoard
|
||||
key={index}
|
||||
type={type}
|
||||
currentState={currentState}
|
||||
bgColor={bgColor}
|
||||
groupTitle={singleGroup}
|
||||
groupedByIssues={groupedByIssues}
|
||||
selectedGroup={selectedGroup}
|
||||
members={members}
|
||||
handleEditIssue={handleEditIssue}
|
||||
makeIssueCopy={makeIssueCopy}
|
||||
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={openIssuesListModal ?? null}
|
||||
orderBy={orderBy}
|
||||
handleTrashBox={handleTrashBox}
|
||||
removeIssue={removeIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -29,6 +29,7 @@ type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
members: IProjectMember[] | undefined;
|
||||
handleEditIssue: (issue: IIssue) => void;
|
||||
makeIssueCopy: (issue: IIssue) => void;
|
||||
addIssueToState: () => void;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
openIssuesListModal?: (() => void) | null;
|
||||
@ -47,6 +48,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
selectedGroup,
|
||||
members,
|
||||
handleEditIssue,
|
||||
makeIssueCopy,
|
||||
addIssueToState,
|
||||
handleDeleteIssue,
|
||||
openIssuesListModal,
|
||||
@ -91,7 +93,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`relative h-full p-1 overflow-y-auto ${
|
||||
className={`relative h-full overflow-y-auto p-1 ${
|
||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||
} ${!isCollapsed ? "hidden" : "block"}`}
|
||||
ref={provided.innerRef}
|
||||
@ -102,12 +104,12 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} top-0 left-0 h-full w-full bg-indigo-200 opacity-50 pointer-events-none z-[99999998]`}
|
||||
} pointer-events-none top-0 left-0 z-[99999998] h-full w-full bg-indigo-200 opacity-50`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs whitespace-nowrap bg-white p-2 rounded pointer-events-none z-[99999999]`}
|
||||
} pointer-events-none top-1/2 left-1/2 z-[99999999] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
|
||||
>
|
||||
This board is ordered by {replaceUnderscoreIfSnakeCase(orderBy ?? "")}
|
||||
</div>
|
||||
@ -132,6 +134,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
selectedGroup={selectedGroup}
|
||||
properties={properties}
|
||||
editIssue={() => handleEditIssue(issue)}
|
||||
makeIssueCopy={() => makeIssueCopy(issue)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
orderBy={orderBy}
|
||||
handleTrashBox={handleTrashBox}
|
||||
@ -153,7 +156,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-theme font-medium outline-none"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
onClick={addIssueToState}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
@ -164,7 +167,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-theme font-medium outline-none"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
@ -24,7 +24,14 @@ import {
|
||||
ViewStateSelect,
|
||||
} from "components/issues/view-select";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
import { ContextMenu, CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import {
|
||||
ClipboardDocumentCheckIcon,
|
||||
LinkIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
@ -47,6 +54,7 @@ type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
properties: Properties;
|
||||
editIssue: () => void;
|
||||
makeIssueCopy: () => void;
|
||||
removeIssue?: (() => void) | null;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
orderBy: NestedKeyOf<IIssue> | null;
|
||||
@ -62,12 +70,17 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
selectedGroup,
|
||||
properties,
|
||||
editIssue,
|
||||
makeIssueCopy,
|
||||
removeIssue,
|
||||
handleDeleteIssue,
|
||||
orderBy,
|
||||
handleTrashBox,
|
||||
userAuth,
|
||||
}) => {
|
||||
// context menu
|
||||
const [contextMenu, setContextMenu] = useState(false);
|
||||
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||
|
||||
@ -88,6 +101,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
issue_detail: {
|
||||
...p.issue_detail,
|
||||
...formData,
|
||||
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -109,6 +123,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
issue_detail: {
|
||||
...p.issue_detail,
|
||||
...formData,
|
||||
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -123,7 +138,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === issue.id) return { ...p, ...formData };
|
||||
if (p.id === issue.id)
|
||||
return { ...p, ...formData, assignees: formData.assignees_list ?? p.assignees_list };
|
||||
|
||||
return p;
|
||||
}),
|
||||
@ -146,10 +162,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
[workspaceSlug, projectId, cycleId, moduleId, issue]
|
||||
);
|
||||
|
||||
function getStyle(
|
||||
const getStyle = (
|
||||
style: DraggingStyle | NotDraggingStyle | undefined,
|
||||
snapshot: DraggableStateSnapshot
|
||||
) {
|
||||
) => {
|
||||
if (orderBy === "sort_order") return style;
|
||||
if (!snapshot.isDragging) return {};
|
||||
if (!snapshot.isDropAnimating) {
|
||||
@ -160,7 +176,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
...style,
|
||||
transitionDuration: `0.001s`,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyText = () => {
|
||||
const originURL =
|
||||
@ -183,107 +199,135 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded bg-white shadow mb-3 ${
|
||||
snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={getStyle(provided.draggableProps.style, snapshot)}
|
||||
>
|
||||
<div className="group/card relative select-none p-4">
|
||||
{!isNotAllowed && (
|
||||
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
|
||||
{type && !isNotAllowed && (
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
|
||||
{type !== "issue" && removeIssue && (
|
||||
<CustomMenu.MenuItem onClick={removeIssue}>
|
||||
<>Remove from {type}</>
|
||||
<>
|
||||
<ContextMenu
|
||||
position={contextMenuPosition}
|
||||
title="Quick actions"
|
||||
isOpen={contextMenu}
|
||||
setIsOpen={setContextMenu}
|
||||
>
|
||||
<ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
|
||||
Edit issue
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
|
||||
Make a copy...
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
|
||||
Copy issue link
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu>
|
||||
<div
|
||||
className={`mb-3 rounded bg-white shadow ${
|
||||
snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={getStyle(provided.draggableProps.style, snapshot)}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu(true);
|
||||
setContextMenuPosition({ x: e.pageX, y: e.pageY });
|
||||
}}
|
||||
>
|
||||
<div className="group/card relative select-none p-4">
|
||||
{!isNotAllowed && (
|
||||
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
|
||||
{type && !isNotAllowed && (
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
|
||||
{type !== "issue" && removeIssue && (
|
||||
<CustomMenu.MenuItem onClick={removeIssue}>
|
||||
<>Remove from {type}</>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
Copy issue link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a>
|
||||
{properties.key && (
|
||||
<div className="mb-2.5 text-xs font-medium text-gray-700">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5
|
||||
className="text-sm group-hover:text-theme"
|
||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||
>
|
||||
{issue.name}
|
||||
</h5>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">
|
||||
{properties.priority && selectedGroup !== "priority" && (
|
||||
<ViewPrioritySelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a>
|
||||
{properties.key && (
|
||||
<div className="mb-2.5 text-xs font-medium text-gray-700">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
{properties.state && selectedGroup !== "state_detail.name" && (
|
||||
<ViewStateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
{properties.due_date && (
|
||||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
<h5
|
||||
className="text-sm group-hover:text-theme"
|
||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||
>
|
||||
{issue.name}
|
||||
</h5>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="relative flex flex-wrap items-center gap-2 mt-2.5 text-xs">
|
||||
{properties.priority && selectedGroup !== "priority" && (
|
||||
<ViewPrioritySelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
{properties.state && selectedGroup !== "state_detail.name" && (
|
||||
<ViewStateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
{properties.due_date && (
|
||||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
{properties.labels && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{issue.label_details.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
>
|
||||
{properties.labels && issue.label_details.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{issue.label_details.map((label) => (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<ViewAssigneeSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
tooltipPosition="left"
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<ViewAssigneeSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
tooltipPosition="left"
|
||||
selfPositioned
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -269,6 +269,15 @@ export const IssuesView: React.FC<Props> = ({
|
||||
[setCreateIssueModal, setPreloadedData, selectedGroup]
|
||||
);
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
@ -370,8 +379,8 @@ export const IssuesView: React.FC<Props> = ({
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`${
|
||||
trashBox ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
} fixed z-20 top-9 right-9 flex justify-center items-center gap-2 bg-red-100 border-2 border-red-500 p-3 w-96 h-28 text-xs italic text-red-500 font-medium rounded ${
|
||||
trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
|
||||
} fixed top-9 right-9 z-20 flex h-28 w-96 items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${
|
||||
snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
|
||||
} duration-200`}
|
||||
ref={provided.innerRef}
|
||||
@ -389,6 +398,7 @@ export const IssuesView: React.FC<Props> = ({
|
||||
states={states}
|
||||
members={members}
|
||||
addIssueToState={addIssueToState}
|
||||
makeIssueCopy={makeIssueCopy}
|
||||
handleEditIssue={handleEditIssue}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||
@ -408,6 +418,7 @@ export const IssuesView: React.FC<Props> = ({
|
||||
states={states}
|
||||
members={members}
|
||||
addIssueToState={addIssueToState}
|
||||
makeIssueCopy={makeIssueCopy}
|
||||
handleEditIssue={handleEditIssue}
|
||||
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
|
||||
@ -12,6 +12,7 @@ type Props = {
|
||||
states: IState[] | undefined;
|
||||
members: IProjectMember[] | undefined;
|
||||
addIssueToState: (groupTitle: string, stateId: string | null) => void;
|
||||
makeIssueCopy: (issue: IIssue) => void;
|
||||
handleEditIssue: (issue: IIssue) => void;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
openIssuesListModal?: (() => void) | null;
|
||||
@ -25,6 +26,7 @@ export const AllLists: React.FC<Props> = ({
|
||||
states,
|
||||
members,
|
||||
addIssueToState,
|
||||
makeIssueCopy,
|
||||
openIssuesListModal,
|
||||
handleEditIssue,
|
||||
handleDeleteIssue,
|
||||
@ -50,6 +52,7 @@ export const AllLists: React.FC<Props> = ({
|
||||
selectedGroup={selectedGroup}
|
||||
members={members}
|
||||
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||
makeIssueCopy={makeIssueCopy}
|
||||
handleEditIssue={handleEditIssue}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useCallback } from "react";
|
||||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
@ -18,7 +18,14 @@ import {
|
||||
} from "components/issues/view-select";
|
||||
|
||||
// ui
|
||||
import { Tooltip, CustomMenu } from "components/ui";
|
||||
import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
|
||||
// icons
|
||||
import {
|
||||
ClipboardDocumentCheckIcon,
|
||||
LinkIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
@ -31,6 +38,7 @@ type Props = {
|
||||
issue: IIssue;
|
||||
properties: Properties;
|
||||
editIssue: () => void;
|
||||
makeIssueCopy: () => void;
|
||||
removeIssue?: (() => void) | null;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
userAuth: UserAuth;
|
||||
@ -41,13 +49,20 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
issue,
|
||||
properties,
|
||||
editIssue,
|
||||
makeIssueCopy,
|
||||
removeIssue,
|
||||
handleDeleteIssue,
|
||||
userAuth,
|
||||
}) => {
|
||||
// context menu
|
||||
const [contextMenu, setContextMenu] = useState(false);
|
||||
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const partialUpdateIssue = useCallback(
|
||||
(formData: Partial<IIssue>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
@ -63,6 +78,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
issue_detail: {
|
||||
...p.issue_detail,
|
||||
...formData,
|
||||
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -84,6 +100,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
issue_detail: {
|
||||
...p.issue_detail,
|
||||
...formData,
|
||||
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -98,7 +115,8 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === issue.id) return { ...p, ...formData };
|
||||
if (p.id === issue.id)
|
||||
return { ...p, ...formData, assignees: formData.assignees_list ?? p.assignees_list };
|
||||
|
||||
return p;
|
||||
}),
|
||||
@ -134,104 +152,136 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
|
||||
<a className="group relative flex items-center gap-2">
|
||||
{properties.key && (
|
||||
<Tooltip
|
||||
tooltipHeading="ID"
|
||||
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
|
||||
>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
<>
|
||||
<ContextMenu
|
||||
position={contextMenuPosition}
|
||||
title="Quick actions"
|
||||
isOpen={contextMenu}
|
||||
setIsOpen={setContextMenu}
|
||||
>
|
||||
<ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
|
||||
Edit issue
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
|
||||
Make a copy...
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
|
||||
Copy issue link
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu>
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 px-4 py-3 text-sm"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu(true);
|
||||
setContextMenuPosition({ x: e.pageX, y: e.pageY });
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
|
||||
<a className="group relative flex items-center gap-2">
|
||||
{properties.key && (
|
||||
<Tooltip
|
||||
tooltipHeading="ID"
|
||||
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
|
||||
>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{issue.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{issue.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||
{properties.priority && (
|
||||
<ViewPrioritySelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.state && (
|
||||
<ViewStateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.due_date && (
|
||||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
{properties.labels && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{issue.label_details.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||
{properties.priority && (
|
||||
<ViewPrioritySelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
position="right"
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.state && (
|
||||
<ViewStateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
position="right"
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.due_date && (
|
||||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
{properties.labels && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{issue.label_details.map((label) => (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<ViewAssigneeSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{type && !isNotAllowed && (
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
|
||||
{type !== "issue" && removeIssue && (
|
||||
<CustomMenu.MenuItem onClick={removeIssue}>
|
||||
<>Remove from {type}</>
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<ViewAssigneeSelect
|
||||
issue={issue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
position="right"
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
)}
|
||||
{type && !isNotAllowed && (
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
|
||||
{type !== "issue" && removeIssue && (
|
||||
<CustomMenu.MenuItem onClick={removeIssue}>
|
||||
<>Remove from {type}</>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
|
||||
Delete issue
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -23,6 +23,7 @@ type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
members: IProjectMember[] | undefined;
|
||||
addIssueToState: () => void;
|
||||
makeIssueCopy: (issue: IIssue) => void;
|
||||
handleEditIssue: (issue: IIssue) => void;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
openIssuesListModal?: (() => void) | null;
|
||||
@ -37,6 +38,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
selectedGroup,
|
||||
members,
|
||||
addIssueToState,
|
||||
makeIssueCopy,
|
||||
handleEditIssue,
|
||||
handleDeleteIssue,
|
||||
openIssuesListModal,
|
||||
@ -113,6 +115,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
issue={issue}
|
||||
properties={properties}
|
||||
editIssue={() => handleEditIssue(issue)}
|
||||
makeIssueCopy={() => makeIssueCopy(issue)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
removeIssue={() => {
|
||||
removeIssue && removeIssue(issue.bridge);
|
||||
|
||||
@ -83,10 +83,10 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
|
||||
<>
|
||||
{openChildFor?.id === option.id && (
|
||||
<div
|
||||
className={`w-72 h-auto max-h-72 bg-white border border-gray-200 absolute rounded-lg ${
|
||||
className={`absolute h-auto max-h-72 w-72 rounded-lg border bg-white ${
|
||||
direction === "right"
|
||||
? "rounded-tl-none shadow-md left-full translate-x-2"
|
||||
: "rounded-tr-none shadow-md right-full -translate-x-2"
|
||||
? "left-full translate-x-2 rounded-tl-none shadow-md"
|
||||
: "right-full -translate-x-2 rounded-tr-none shadow-md"
|
||||
}`}
|
||||
>
|
||||
{option.children?.map((child) => (
|
||||
@ -118,7 +118,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
|
||||
))}
|
||||
|
||||
<div
|
||||
className={`w-0 h-0 absolute border-t-8 border-gray-300 ${
|
||||
className={`absolute h-0 w-0 border-t-8 border-gray-300 ${
|
||||
direction === "right"
|
||||
? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
|
||||
: "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
|
||||
|
||||
@ -13,10 +13,10 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
||||
completed,
|
||||
total,
|
||||
}) => (
|
||||
<div className="flex items-center justify-between w-full py-3 text-xs border-b-[1px] border-gray-200">
|
||||
<div className="flex items-center justify-start w-1/2 gap-2">{title}</div>
|
||||
<div className="flex items-center justify-end w-1/2 gap-1 px-2">
|
||||
<div className="flex h-5 justify-center items-center gap-1 ">
|
||||
<div className="flex w-full items-center justify-between border-b-[1px] py-3 text-xs">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
|
||||
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
|
||||
<div className="flex h-5 items-center justify-center gap-1 ">
|
||||
<span className="h-4 w-4 ">
|
||||
<ProgressBar value={completed} maxValue={total} />
|
||||
</span>
|
||||
|
||||
@ -58,10 +58,10 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-80 rounded-md bg-white shadow-lg">
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-80 rounded-lg bg-white shadow-lg">
|
||||
<div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
|
||||
<Tab.Group as="div" className="flex h-full w-full flex-col">
|
||||
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 rounded border-b p-1">
|
||||
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 border-b p-1">
|
||||
{tabOptions.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
@ -75,16 +75,16 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<Tab.Panel className="h-full w-full">
|
||||
<Tab.Panels className="flex-1 overflow-y-auto">
|
||||
<Tab.Panel>
|
||||
{recentEmojis.length > 0 && (
|
||||
<div className="w-full py-2">
|
||||
<h3 className="mb-2 text-lg">Recent Emojis</h3>
|
||||
<div className="py-2">
|
||||
<h3 className="mb-2">Recent Emojis</h3>
|
||||
<div className="grid grid-cols-9 gap-2">
|
||||
{recentEmojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="select-none text-xl"
|
||||
className="select-none text-lg hover:bg-hover-gray"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
@ -97,13 +97,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="py-3">
|
||||
<h3 className="mb-2 text-lg">All Emojis</h3>
|
||||
<div>
|
||||
<h3 className="mb-2">All Emojis</h3>
|
||||
<div className="grid grid-cols-9 gap-2">
|
||||
{emojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="select-none text-xl"
|
||||
className="select-none text-lg hover:bg-hover-gray"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
|
||||
@ -20,7 +20,7 @@ import { CreateStateModal } from "components/states";
|
||||
import { CreateUpdateCycleModal } from "components/cycles";
|
||||
import { CreateLabelModal } from "components/labels";
|
||||
// ui
|
||||
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
|
||||
import { Button, CustomMenu, Input, Loader } from "components/ui";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
@ -95,7 +95,6 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
setFocus,
|
||||
} = useForm<IIssue>({
|
||||
defaultValues,
|
||||
mode: "all",
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{issue.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
@ -135,7 +135,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
|
||||
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,160 +1,75 @@
|
||||
import { useState, FC, Fragment } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Transition, Combobox } from "@headlessui/react";
|
||||
// services
|
||||
import projectServices from "services/project.service";
|
||||
// ui
|
||||
import { AssigneesList, Avatar } from "components/ui";
|
||||
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
|
||||
// icons
|
||||
import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
// fetch keys
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
export type IssueAssigneeSelectProps = {
|
||||
export type Props = {
|
||||
projectId: string;
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
};
|
||||
|
||||
export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
projectId,
|
||||
value = [],
|
||||
onChange,
|
||||
}) => {
|
||||
// states
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// fetching project members
|
||||
const { data: people } = useSWR(
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options = people?.map((person) => ({
|
||||
value: person.member.id,
|
||||
display:
|
||||
person.member.first_name && person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email,
|
||||
}));
|
||||
|
||||
const filteredOptions =
|
||||
query === ""
|
||||
? options
|
||||
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
|
||||
const options =
|
||||
members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
onChange={(val) => onChange(val)}
|
||||
className="relative flex-shrink-0"
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-500">Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
multiple
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className=" text-gray-500">{value.length} Assignees</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500 " />
|
||||
<span className=" text-gray-500">Assignee</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search for a person..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1.5">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-1">
|
||||
<Avatar
|
||||
user={people?.find((p) => p.member.id === option.value)?.member}
|
||||
/>
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`flex justify-center items-center p-1 rounded border border-gray-500 border-opacity-0 group-hover:border-opacity-100
|
||||
${selected ? "border-opacity-100 " : ""}
|
||||
${active ? "bg-gray-100" : ""} `}
|
||||
>
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">No assignees found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,20 +13,20 @@ type Props = {
|
||||
};
|
||||
|
||||
export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
<Popover className="relative flex items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
{value ? (
|
||||
<>
|
||||
<span className="text-gray-600">{value}</span>
|
||||
|
||||
@ -61,16 +61,16 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
|
||||
<IssueLabelsList
|
||||
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
|
||||
length={3}
|
||||
@ -79,7 +79,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<span className=" text-gray-600">{value.length} Labels</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
<TagIcon className="h-3 w-3 text-gray-500" />
|
||||
<span className=" text-gray-500">Label</span>
|
||||
</span>
|
||||
@ -97,10 +97,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
|
||||
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
@ -128,8 +128,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
value={label.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
@ -141,7 +141,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
/>
|
||||
<span>{label.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<div className="flex items-center justify-center rounded p-1">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
@ -154,8 +154,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
} else
|
||||
return (
|
||||
<div className="bg-gray-50 border-y border-gray-400">
|
||||
<div className="flex select-none font-medium items-center gap-2 truncate p-2 text-gray-900">
|
||||
<div className="border-y border-gray-400 bg-gray-50">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
|
||||
<RectangleGroupIcon className="h-3 w-3" /> {label.name}
|
||||
</div>
|
||||
<div>
|
||||
@ -170,8 +170,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
value={child.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
@ -180,7 +180,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
/>
|
||||
<span>{child.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<div className="flex items-center justify-center rounded p-1">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
@ -196,17 +196,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">No labels found</p>
|
||||
<p className="px-2 text-xs text-gray-500">No labels found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
<p className="px-2 text-xs text-gray-500">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<span className="flex items-center justify-start gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New Label</span>
|
||||
</span>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
@ -14,71 +13,30 @@ type Props = {
|
||||
};
|
||||
|
||||
export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<div>
|
||||
{PRIORITIES.map((priority) => (
|
||||
<Listbox.Option
|
||||
key={priority}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={priority}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
noChevron
|
||||
>
|
||||
{PRIORITIES.map((priority) => (
|
||||
<CustomSelect.Option key={priority} value={priority}>
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
);
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { FC, Fragment } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
@ -19,7 +17,7 @@ export interface IssueProjectSelectProps {
|
||||
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
}
|
||||
|
||||
export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
|
||||
export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
setActiveProject,
|
||||
@ -34,71 +32,35 @@ export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Listbox
|
||||
value={value}
|
||||
onChange={(val) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative flex cursor-pointer items-center gap-1 rounded-md border bg-white px-2 py-1 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
|
||||
<ClipboardDocumentListIcon className="h-3 w-3" />
|
||||
<span className="block truncate">
|
||||
{projects?.find((i) => i.id === value)?.identifier ?? "Project"}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{projects ? (
|
||||
projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<Listbox.Option
|
||||
key={project.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} cursor-pointer select-none p-2 text-gray-900`
|
||||
}
|
||||
value={project.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`${
|
||||
selected ? "font-medium" : "font-normal"
|
||||
} block truncate`}
|
||||
>
|
||||
{project.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-400">No projects found!</p>
|
||||
)
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 px-2">Loading...</div>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<>
|
||||
<ClipboardDocumentListIcon className="h-3 w-3" />
|
||||
<span className="block truncate">
|
||||
{projects?.find((i) => i.id === value)?.identifier ?? "Project"}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
onChange={(val: string) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
noChevron
|
||||
>
|
||||
{projects ? (
|
||||
projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<CustomSelect.Option key={project.id} value={project.id}>
|
||||
<>{project.name}</>
|
||||
</CustomSelect.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-400">No projects found!</p>
|
||||
)
|
||||
) : (
|
||||
<div className="px-2 text-sm text-gray-500">Loading...</div>
|
||||
)}
|
||||
</CustomSelect>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
@ -6,20 +6,15 @@ import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// headless ui
|
||||
import {
|
||||
Squares2X2Icon,
|
||||
PlusIcon,
|
||||
MagnifyingGlassIcon,
|
||||
CheckIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// ui
|
||||
import { CustomSearchSelect } from "components/ui";
|
||||
// icons
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// fetch keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
|
||||
type Props = {
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
@ -30,8 +25,6 @@ type Props = {
|
||||
|
||||
export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
|
||||
// states
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
@ -45,123 +38,41 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
|
||||
const options = states?.map((state) => ({
|
||||
value: state.id,
|
||||
display: state.name,
|
||||
color: state.color,
|
||||
group: state.group,
|
||||
query: state.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
{getStateGroupIcon(state.group, "16", "16", state.color)}
|
||||
{state.name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const filteredOptions =
|
||||
query === ""
|
||||
? options
|
||||
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
|
||||
const selectedOption = states?.find((s) => s.id === value);
|
||||
|
||||
const currentOption = options?.find((option) => option.value === value);
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
onChange={(val: any) => onChange(val)}
|
||||
className="relative flex-shrink-0"
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value !== "" ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
{currentOption && currentOption.group
|
||||
? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
|
||||
: ""}
|
||||
<span className=" text-gray-600">{currentOption?.display}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<Squares2X2Icon className="h-4 w-4 text-gray-500 " />
|
||||
<span className=" text-gray-500">{currentOption?.display || "State"}</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search States"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1.5">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{({ selected, active }) =>
|
||||
states && (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
{getStateGroupIcon(option.group, "16", "16", option.color)}
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">No states found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New State</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
{selectedOption &&
|
||||
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
|
||||
{selectedOption?.name ?? "State"}
|
||||
</div>
|
||||
}
|
||||
footerOption={
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-gray-500 hover:bg-hover-gray"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" aria-hidden="true" />
|
||||
Create New State
|
||||
</button>
|
||||
}
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,41 +1,57 @@
|
||||
import React from "react";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
import projectService from "services/project.service";
|
||||
// ui
|
||||
import { AssigneesList } from "components/ui/avatar";
|
||||
import { Spinner } from "components/ui";
|
||||
import { CustomSearchSelect } from "components/ui";
|
||||
import { AssigneesList, Avatar } from "components/ui/avatar";
|
||||
// icons
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
// constants
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { UserAuth } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
value: string[];
|
||||
onChange: (val: string[]) => void;
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options =
|
||||
members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
@ -45,93 +61,24 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
|
||||
<p>Assignees</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="assignees_list"
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple={true}
|
||||
onChange={(value: any) => {
|
||||
submitChanges({ assignees_list: value });
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Listbox.Button
|
||||
className={`flex w-full ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center gap-1 text-xs`}
|
||||
>
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{value && Array.isArray(value) ? (
|
||||
<AssigneesList userIds={value} length={10} />
|
||||
) : null}
|
||||
</div>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{people ? (
|
||||
people.length > 0 ? (
|
||||
people.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.member.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-indigo-50" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
}
|
||||
value={option.member.id}
|
||||
>
|
||||
{option.member.avatar && option.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
src={option.member.avatar}
|
||||
alt="avatar"
|
||||
className="rounded-full"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name.charAt(0)
|
||||
: option.member.email.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name
|
||||
: option.member.email}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No assignees found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
"No assignees"
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
multiple
|
||||
disabled={isNotAllowed}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,26 +65,21 @@ export const SidebarCycleSelect: React.FC<Props> = ({
|
||||
<div className="space-y-1 sm:basis-1/2">
|
||||
<CustomSelect
|
||||
label={
|
||||
<Tooltip
|
||||
position="top-right"
|
||||
tooltipHeading="Cycle"
|
||||
tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
|
||||
<span
|
||||
className={`w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueCycle ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={` w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueCycle ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{issueCycle ? issueCycle.cycle_detail.name : "None"}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{issueCycle ? issueCycle.cycle_detail.name : "None"}
|
||||
</span>
|
||||
}
|
||||
value={issueCycle?.cycle_detail.id}
|
||||
onChange={(value: any) => {
|
||||
value === null
|
||||
!value
|
||||
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
|
||||
: handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
|
||||
}}
|
||||
width="w-full"
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{cycles ? (
|
||||
@ -97,11 +92,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
|
||||
</Tooltip>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
<CustomSelect.Option value={null} className="capitalize">
|
||||
<Tooltip position="left-bottom" tooltipContent="None">
|
||||
<span className="w-full max-w-[125px] truncate">None</span>
|
||||
</Tooltip>
|
||||
</CustomSelect.Option>
|
||||
<CustomSelect.Option value={null}>None</CustomSelect.Option>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center">No cycles found</div>
|
||||
|
||||
@ -64,26 +64,21 @@ export const SidebarModuleSelect: React.FC<Props> = ({
|
||||
<div className="space-y-1 sm:basis-1/2">
|
||||
<CustomSelect
|
||||
label={
|
||||
<Tooltip
|
||||
position="top-right"
|
||||
tooltipHeading="Module"
|
||||
tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
|
||||
<span
|
||||
className={`w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueModule ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueModule ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
|
||||
</span>
|
||||
}
|
||||
value={issueModule?.module_detail?.id}
|
||||
onChange={(value: any) => {
|
||||
value === null
|
||||
!value
|
||||
? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
|
||||
: handleModuleChange(modules?.find((m) => m.id === value) as IModule);
|
||||
}}
|
||||
width="w-full"
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{modules ? (
|
||||
@ -96,11 +91,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
|
||||
</Tooltip>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
<CustomSelect.Option value={null} className="capitalize">
|
||||
<Tooltip position="left-bottom" tooltipContent="None">
|
||||
<span className="w-full max-w-[125px] truncate"> None </span>
|
||||
</Tooltip>
|
||||
</CustomSelect.Option>
|
||||
<CustomSelect.Option value={null}>None</CustomSelect.Option>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center">No modules found</div>
|
||||
|
||||
@ -1,24 +1,22 @@
|
||||
import React from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { ChartBarIcon } from "@heroicons/react/24/outline";
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
import { UserAuth } from "types";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
value: string | null;
|
||||
onChange: (val: string) => void;
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
@ -28,38 +26,31 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges,
|
||||
<p>Priority</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="priority"
|
||||
render={({ field: { value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-2 text-left capitalize ${
|
||||
value ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
|
||||
{value && value !== "" ? value : "None"}
|
||||
</span>
|
||||
}
|
||||
value={value}
|
||||
onChange={(value: any) => {
|
||||
submitChanges({ priority: value });
|
||||
}}
|
||||
disabled={isNotAllowed}
|
||||
<CustomSelect
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-2 text-left capitalize ${
|
||||
value ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{PRIORITIES.map((option) => (
|
||||
<CustomSelect.Option key={option} value={option} className="capitalize">
|
||||
<>
|
||||
{getPriorityIcon(option, "text-sm")}
|
||||
{option ?? "None"}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
|
||||
{value && value !== "" ? value : "None"}
|
||||
</span>
|
||||
}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{PRIORITIES.map((option) => (
|
||||
<CustomSelect.Option key={option} value={option} className="capitalize">
|
||||
<>
|
||||
{getPriorityIcon(option, "text-sm")}
|
||||
{option ?? "None"}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,28 +4,28 @@ import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { Spinner, CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
import { UserAuth } from "types";
|
||||
// constants
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
value: string;
|
||||
onChange: (val: string) => void;
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
@ -37,6 +37,8 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
const selectedState = states?.find((s) => s.id === value);
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
@ -46,60 +48,40 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
|
||||
<p>State</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="state"
|
||||
render={({ field: { value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}
|
||||
>
|
||||
{value ? (
|
||||
<>
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: states?.find((option) => option.id === value)?.color,
|
||||
}}
|
||||
/>
|
||||
{states?.find((option) => option.id === value)?.name}
|
||||
</>
|
||||
) : (
|
||||
"None"
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
value={value}
|
||||
onChange={(value: any) => {
|
||||
submitChanges({ state: value });
|
||||
}}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{states ? (
|
||||
states.length > 0 ? (
|
||||
states.map((option) => (
|
||||
<CustomSelect.Option key={option.id} value={option.id}>
|
||||
<>
|
||||
{option.color && (
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{ backgroundColor: option.color }}
|
||||
/>
|
||||
)}
|
||||
{option.name}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No states found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
<CustomSelect
|
||||
label={
|
||||
<div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
|
||||
{getStateGroupIcon(
|
||||
selectedState?.group ?? "backlog",
|
||||
"16",
|
||||
"16",
|
||||
selectedState?.color ?? ""
|
||||
)}
|
||||
</CustomSelect>
|
||||
{addSpaceIfCamelCase(selectedState?.name ?? "")}
|
||||
</div>
|
||||
}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{states ? (
|
||||
states.length > 0 ? (
|
||||
states.map((state) => (
|
||||
<CustomSelect.Option key={state.id} value={state.id}>
|
||||
<>
|
||||
{getStateGroupIcon(state.group, "16", "16", state.color)}
|
||||
{state.name}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No states found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
/>
|
||||
</CustomSelect>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -77,17 +77,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
console.log("isseu details: ", issueDetail);
|
||||
|
||||
// const { data: issueLinks } = useSWR(
|
||||
// workspaceSlug && projectId
|
||||
// ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
|
||||
// : null,
|
||||
// workspaceSlug && projectId
|
||||
// ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
|
||||
// : null
|
||||
// );
|
||||
|
||||
const { data: issues } = useSWR(
|
||||
workspaceSlug && projectId
|
||||
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
|
||||
@ -228,7 +217,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueDetail ?? null}
|
||||
/>
|
||||
<div className="w-full divide-y-2 divide-gray-100 sticky top-5">
|
||||
<div className="sticky top-5 w-full divide-y-2 divide-gray-100">
|
||||
<div className="flex items-center justify-between pb-3">
|
||||
<h4 className="text-sm font-medium">
|
||||
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
|
||||
@ -254,20 +243,38 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
<div className="divide-y-2 divide-gray-100">
|
||||
<div className="py-1">
|
||||
<SidebarStateSelect
|
||||
<Controller
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
name="state"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarStateSelect
|
||||
value={value}
|
||||
onChange={(val: string) => submitChanges({ state: val })}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<SidebarAssigneeSelect
|
||||
<Controller
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
name="assignees_list"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarAssigneeSelect
|
||||
value={value}
|
||||
onChange={(val: string[]) => submitChanges({ assignees_list: val })}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<SidebarPrioritySelect
|
||||
<Controller
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
name="priority"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarPrioritySelect
|
||||
value={value}
|
||||
onChange={(val: string) => submitChanges({ priority: val })}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
@ -453,8 +460,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
);
|
||||
} else
|
||||
return (
|
||||
<div className="bg-gray-50 border-y border-gray-400">
|
||||
<div className="flex select-none font-medium items-center gap-2 truncate p-2 text-gray-900">
|
||||
<div className="border-y border-gray-400 bg-gray-50">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
|
||||
<RectangleGroupIcon className="h-3 w-3" />{" "}
|
||||
{label.name}
|
||||
</div>
|
||||
|
||||
@ -4,12 +4,12 @@ import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// ui
|
||||
import { AssigneesList, Avatar, Tooltip } from "components/ui";
|
||||
import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// fetch-keys
|
||||
@ -18,6 +18,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||
position?: "left" | "right";
|
||||
selfPositioned?: boolean;
|
||||
tooltipPosition?: "left" | "right";
|
||||
isNotAllowed: boolean;
|
||||
@ -26,6 +27,7 @@ type Props = {
|
||||
export const ViewAssigneeSelect: React.FC<Props> = ({
|
||||
issue,
|
||||
partialUpdateIssue,
|
||||
position = "left",
|
||||
selfPositioned = false,
|
||||
tooltipPosition = "right",
|
||||
isNotAllowed,
|
||||
@ -40,9 +42,27 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
|
||||
: null
|
||||
);
|
||||
|
||||
const options =
|
||||
members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<Listbox
|
||||
as="div"
|
||||
<CustomSearchSelect
|
||||
value={issue.assignees}
|
||||
onChange={(data: any) => {
|
||||
const newData = issue.assignees ?? [];
|
||||
@ -50,69 +70,46 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
|
||||
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
|
||||
else newData.push(data);
|
||||
|
||||
partialUpdateIssue({ assignees_list: newData });
|
||||
partialUpdateIssue({ assignees_list: data });
|
||||
}}
|
||||
className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{({ open }) => (
|
||||
<div>
|
||||
<Listbox.Button>
|
||||
<Tooltip
|
||||
position={`top-${tooltipPosition}`}
|
||||
tooltipHeading="Assignees"
|
||||
tooltipContent={
|
||||
issue.assignee_details.length > 0
|
||||
? issue.assignee_details
|
||||
.map((assignee) =>
|
||||
assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
|
||||
)
|
||||
.join(", ")
|
||||
: "No Assignee"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`flex ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center gap-1 text-xs`}
|
||||
>
|
||||
<AssigneesList userIds={issue.assignees ?? []} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
options={options}
|
||||
label={
|
||||
<Tooltip
|
||||
position={`top-${tooltipPosition}`}
|
||||
tooltipHeading="Assignees"
|
||||
tooltipContent={
|
||||
issue.assignee_details.length > 0
|
||||
? issue.assignee_details
|
||||
.map((assignee) =>
|
||||
assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
|
||||
)
|
||||
.join(", ")
|
||||
: "No Assignee"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`flex ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center gap-2 text-gray-500`}
|
||||
>
|
||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg min-w-full ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{members?.map((member) => (
|
||||
<Listbox.Option
|
||||
key={member.member.id}
|
||||
className={({ active, selected }) =>
|
||||
`flex items-center gap-x-1 cursor-pointer select-none p-2 whitespace-nowrap ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} ${
|
||||
selected || issue.assignees?.includes(member.member.id)
|
||||
? "bg-indigo-50 font-medium"
|
||||
: "font-normal"
|
||||
}`
|
||||
}
|
||||
value={member.member.id}
|
||||
>
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Listbox>
|
||||
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={issue.assignees} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{issue.assignees.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-500">Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
}
|
||||
multiple
|
||||
noChevron
|
||||
position={position}
|
||||
disabled={isNotAllowed}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@ import { PRIORITIES } from "constants/project";
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||
position?: "left" | "right";
|
||||
selfPositioned?: boolean;
|
||||
isNotAllowed: boolean;
|
||||
};
|
||||
@ -19,19 +20,18 @@ type Props = {
|
||||
export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
issue,
|
||||
partialUpdateIssue,
|
||||
position = "left",
|
||||
selfPositioned = false,
|
||||
isNotAllowed,
|
||||
}) => (
|
||||
<CustomSelect
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data });
|
||||
}}
|
||||
onChange={(data: string) => partialUpdateIssue({ priority: data })}
|
||||
maxHeight="md"
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className={`grid place-items-center rounded w-6 h-6 ${
|
||||
className={`grid h-6 w-6 place-items-center rounded ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
issue.priority === "urgent"
|
||||
@ -57,6 +57,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
}
|
||||
noChevron
|
||||
disabled={isNotAllowed}
|
||||
position={position}
|
||||
selfPositioned={selfPositioned}
|
||||
>
|
||||
{PRIORITIES?.map((priority) => (
|
||||
|
||||
@ -5,7 +5,9 @@ import useSWR from "swr";
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { CustomSelect, Tooltip } from "components/ui";
|
||||
import { CustomSearchSelect, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
@ -17,6 +19,7 @@ import { STATE_LIST } from "constants/fetch-keys";
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||
position?: "left" | "right";
|
||||
selfPositioned?: boolean;
|
||||
isNotAllowed: boolean;
|
||||
};
|
||||
@ -24,6 +27,7 @@ type Props = {
|
||||
export const ViewStateSelect: React.FC<Props> = ({
|
||||
issue,
|
||||
partialUpdateIssue,
|
||||
position = "left",
|
||||
selfPositioned = false,
|
||||
isNotAllowed,
|
||||
}) => {
|
||||
@ -38,50 +42,39 @@ export const ViewStateSelect: React.FC<Props> = ({
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
const options = states?.map((state) => ({
|
||||
value: state.id,
|
||||
query: state.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
{getStateGroupIcon(state.group, "16", "16", state.color)}
|
||||
{state.name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const selectedOption = states?.find((s) => s.id === issue.state);
|
||||
|
||||
return (
|
||||
<CustomSelect
|
||||
label={
|
||||
<>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: states?.find((s) => s.id === issue.state)?.color,
|
||||
}}
|
||||
/>
|
||||
<Tooltip
|
||||
tooltipHeading="State"
|
||||
tooltipContent={addSpaceIfCamelCase(
|
||||
states?.find((s) => s.id === issue.state)?.name ?? ""
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
{addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</>
|
||||
}
|
||||
<CustomSearchSelect
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ state: data });
|
||||
}}
|
||||
maxHeight="md"
|
||||
noChevron
|
||||
onChange={(data: string) => partialUpdateIssue({ state: data })}
|
||||
options={options}
|
||||
label={
|
||||
<Tooltip
|
||||
tooltipHeading="State"
|
||||
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{selectedOption &&
|
||||
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
|
||||
{selectedOption?.name ?? "State"}
|
||||
</div>
|
||||
</Tooltip>
|
||||
}
|
||||
position={position}
|
||||
disabled={isNotAllowed}
|
||||
selfPositioned={selfPositioned}
|
||||
>
|
||||
{states?.map((state) => (
|
||||
<CustomSelect.Option key={state.id} value={state.id}>
|
||||
<>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: state.color,
|
||||
}}
|
||||
/>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -92,7 +92,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Combobox>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
@ -144,7 +144,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
}}
|
||||
|
||||
@ -59,32 +59,34 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure as="div" className="rounded-md border p-3 text-gray-900 md:w-2/3" defaultOpen>
|
||||
<Disclosure as="div" className="rounded-[10px] border bg-white p-5 text-gray-900" defaultOpen>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 cursor-pointer">
|
||||
<Disclosure.Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex cursor-pointer items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="font-medium text-gray-600">{label.name}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
Add more labels
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
<Disclosure.Button>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "rotate-90 transform" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
Add more labels
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
show={open}
|
||||
@ -96,22 +98,22 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mt-2 ml-4">
|
||||
<div className="mt-3 ml-6 space-y-3">
|
||||
{labelChildren.map((child) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="group pl-4 py-1 flex items-center justify-between rounded text-sm hover:bg-gray-100"
|
||||
className="group flex items-center justify-between rounded-md border p-2 text-sm"
|
||||
>
|
||||
<h5 className="flex items-center gap-2">
|
||||
<h5 className="flex items-center gap-3 text-gray-600">
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: child.color,
|
||||
}}
|
||||
/>
|
||||
{child.name}
|
||||
</h5>
|
||||
<div className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
|
||||
<div className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
|
||||
Remove from group
|
||||
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
// react hook form
|
||||
import { Controller, FieldError, Control } from "react-hook-form";
|
||||
// ui
|
||||
import { CustomListbox } from "components/ui";
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
@ -22,26 +22,42 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
|
||||
rules={{ required: true }}
|
||||
name="status"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div>
|
||||
<CustomListbox
|
||||
className={`${
|
||||
error
|
||||
? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500"
|
||||
: ""
|
||||
}`}
|
||||
title="Status"
|
||||
options={MODULE_STATUS.map((status) => ({
|
||||
value: status.value,
|
||||
display: status.label,
|
||||
color: status.color,
|
||||
}))}
|
||||
value={value}
|
||||
optionsFontsize="sm"
|
||||
onChange={onChange}
|
||||
icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />}
|
||||
/>
|
||||
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
|
||||
</div>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div
|
||||
className={`flex items-center justify-center gap-2 text-xs ${
|
||||
error ? "text-red-500" : ""
|
||||
}`}
|
||||
>
|
||||
<Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
|
||||
{value && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
>
|
||||
{MODULE_STATUS.map((status) => (
|
||||
<CustomSelect.Option key={status.value} value={status.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: status.color,
|
||||
}}
|
||||
/>
|
||||
{status.label}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -5,35 +5,53 @@ import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
import projectService from "services/project.service";
|
||||
// ui
|
||||
import { Avatar, CustomSearchSelect } from "components/ui";
|
||||
// icons
|
||||
import { UserIcon } from "@heroicons/react/24/outline";
|
||||
import User from "public/user.png";
|
||||
// types
|
||||
import { IModule, IUserLite } from "types";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
control: Control<Partial<IModule>, any>;
|
||||
submitChanges: (formData: Partial<IModule>) => void;
|
||||
lead: IUserLite | null;
|
||||
value: string | null | undefined;
|
||||
onChange: (val: string) => void;
|
||||
};
|
||||
|
||||
export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => {
|
||||
export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options =
|
||||
members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
const selectedOption = members?.find((m) => m.member.id === value)?.member;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
@ -41,124 +59,32 @@ export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lea
|
||||
<p>Lead</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="lead"
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
onChange={(value: any) => {
|
||||
submitChanges({ lead: value });
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
|
||||
<span
|
||||
className={`hidden truncate text-left sm:block ${
|
||||
value ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{lead ? (
|
||||
lead.avatar && lead.avatar !== "" ? (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-transparent">
|
||||
<Image
|
||||
src={lead.avatar}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded-full"
|
||||
alt={lead?.first_name}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
|
||||
{lead?.first_name && lead.first_name !== ""
|
||||
? lead.first_name.charAt(0)
|
||||
: lead?.email.charAt(0)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
|
||||
<Image
|
||||
src={User}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded-full"
|
||||
alt="No user"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{lead
|
||||
? lead?.first_name && lead.first_name !== ""
|
||||
? lead?.first_name
|
||||
: lead?.email
|
||||
: "N/A"}
|
||||
</div>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{people ? (
|
||||
people.length > 0 ? (
|
||||
people.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.member.id}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected ? "bg-indigo-50" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
}
|
||||
value={option.member.id}
|
||||
>
|
||||
{option.member.avatar && option.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
src={option.member.avatar}
|
||||
alt="avatar"
|
||||
className="rounded-full"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name.charAt(0)
|
||||
: option.member.email.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name
|
||||
: option.member.email}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No members found</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{selectedOption ? (
|
||||
<Avatar user={selectedOption} />
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
|
||||
<Image
|
||||
src={User}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded-full"
|
||||
alt="No user"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
{selectedOption
|
||||
? selectedOption?.first_name && selectedOption.first_name !== ""
|
||||
? selectedOption?.first_name
|
||||
: selectedOption?.email
|
||||
: "N/A"}
|
||||
</div>
|
||||
}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,37 +1,53 @@
|
||||
import React from "react";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// services
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// headless ui
|
||||
import projectService from "services/project.service";
|
||||
// ui
|
||||
import { AssigneesList } from "components/ui";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
|
||||
// icons
|
||||
import { UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
control: Control<Partial<IModule>, any>;
|
||||
submitChanges: (formData: Partial<IModule>) => void;
|
||||
value: string[] | undefined;
|
||||
onChange: (val: string[]) => void;
|
||||
};
|
||||
|
||||
export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => {
|
||||
export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options =
|
||||
members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
@ -39,94 +55,23 @@ export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }
|
||||
<p>Members</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="members_list"
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple={true}
|
||||
onChange={(value: any) => {
|
||||
submitChanges({ members_list: value });
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
|
||||
<span
|
||||
className={`hidden truncate text-left sm:block ${
|
||||
value ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex cursor-pointer items-center gap-1 text-xs">
|
||||
{value && Array.isArray(value) ? (
|
||||
<AssigneesList userIds={value} length={10} />
|
||||
) : null}
|
||||
</div>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
|
||||
<div className="py-1">
|
||||
{people ? (
|
||||
people.length > 0 ? (
|
||||
people.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.member.id}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected ? "bg-indigo-50" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
}
|
||||
value={option.member.id}
|
||||
>
|
||||
{option.member.avatar && option.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
src={option.member.avatar}
|
||||
alt="avatar"
|
||||
className="rounded-full"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name.charAt(0)
|
||||
: option.member.email.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name
|
||||
: option.member.email}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No members found</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
"No members"
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
@ -19,7 +18,6 @@ import {
|
||||
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
// services
|
||||
import modulesService from "services/modules.service";
|
||||
// hooks
|
||||
@ -184,7 +182,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
>
|
||||
{module ? (
|
||||
<>
|
||||
<div className="flex gap-1 text-sm my-2">
|
||||
<div className="my-2 flex gap-1 text-sm">
|
||||
<div className="flex items-center ">
|
||||
<Controller
|
||||
control={control}
|
||||
@ -193,7 +191,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
<CustomSelect
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full text-gray-900`}
|
||||
className={`flex h-full w-full items-center gap-1 p-1 text-left text-xs capitalize text-gray-900`}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
|
||||
{watch("status")}
|
||||
@ -213,14 +211,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
<div className="flex h-full items-center justify-center gap-2 rounded-md border bg-transparent p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
|
||||
<Popover className="relative flex items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" />
|
||||
<CalendarDaysIcon className="mr-2 h-4 w-4 flex-shrink-0" />
|
||||
<span>
|
||||
{renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
? renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
@ -256,7 +254,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
<Popover className="relative flex items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
@ -338,12 +336,30 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
<div className="divide-y-2 divide-gray-100 text-xs">
|
||||
<div className="py-1">
|
||||
<SidebarLeadSelect
|
||||
<Controller
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
lead={module.lead_detail}
|
||||
name="lead"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarLeadSelect
|
||||
value={value}
|
||||
onChange={(val: string) => {
|
||||
submitChanges({ lead: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="members_list"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarMembersSelect
|
||||
value={value}
|
||||
onChange={(val: string[]) => {
|
||||
submitChanges({ members_list: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<SidebarMembersSelect control={control} submitChanges={submitChanges} />
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
<ChartPieIcon className="h-4 w-4 flex-shrink-0" />
|
||||
@ -363,7 +379,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center w-full gap-2">
|
||||
<div className="flex w-full flex-col items-center justify-center gap-2">
|
||||
{isStartValid && isEndValid ? (
|
||||
<ProgressChart
|
||||
issues={issues}
|
||||
|
||||
@ -296,10 +296,11 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
|
||||
: "Select network"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
|
||||
@ -6,9 +6,8 @@ import useSWR, { mutate } from "swr";
|
||||
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
import { Dialog, Transition, Listbox } from "@headlessui/react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { Button, CustomSelect, TextArea } from "components/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -17,7 +16,7 @@ import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// types
|
||||
import { IProjectMemberInvitation } from "types";
|
||||
// fetch - keys
|
||||
// fetch-keys
|
||||
import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
@ -130,7 +129,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="space-y-5">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
@ -148,77 +147,36 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
|
||||
name="user_id"
|
||||
rules={{ required: "Please select a member" }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<Listbox
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={(data: any) => {
|
||||
onChange(data.id);
|
||||
setValue("member_id", data.id);
|
||||
setValue("email", data.email);
|
||||
}}
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="mb-2 text-gray-500">
|
||||
Email
|
||||
</Listbox.Label>
|
||||
<div className="relative">
|
||||
<Listbox.Button
|
||||
className={`relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm ${
|
||||
errors.user_id ? "border-red-500 bg-red-50" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="block truncate">
|
||||
{value && value !== ""
|
||||
? people?.find((p) => p.member.id === value)?.member.email
|
||||
: "Select email"}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronDownIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
label={
|
||||
<div
|
||||
className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
|
||||
>
|
||||
{value && value !== ""
|
||||
? people?.find((p) => p.member.id === value)?.member.email
|
||||
: "Select email"}
|
||||
</div>
|
||||
}
|
||||
onChange={(val: string) => {
|
||||
onChange(val);
|
||||
const person = uninvitedPeople?.find((p) => p.member.id === val);
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
{uninvitedPeople?.length === 0 ? (
|
||||
<div className="relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-600">
|
||||
Invite to workspace to add members
|
||||
</div>
|
||||
) : (
|
||||
uninvitedPeople?.map((person) => (
|
||||
<Listbox.Option
|
||||
key={person.member.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} cursor-default select-none p-2 text-gray-900`
|
||||
}
|
||||
value={{
|
||||
id: person.member.id,
|
||||
email: person.member.email,
|
||||
}}
|
||||
>
|
||||
{person.member.email}
|
||||
</Listbox.Option>
|
||||
))
|
||||
)}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<p className="text-sm text-red-400">
|
||||
{errors.user_id && errors.user_id.message}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
setValue("member_id", val);
|
||||
setValue("email", person?.member.email ?? "");
|
||||
}}
|
||||
input
|
||||
width="w-full"
|
||||
>
|
||||
{uninvitedPeople?.map((person) => (
|
||||
<CustomSelect.Option
|
||||
key={person.member.id}
|
||||
value={person.member.id}
|
||||
>
|
||||
{person.member.email}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
@ -236,6 +194,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
|
||||
</span>
|
||||
}
|
||||
input
|
||||
width="w-full"
|
||||
>
|
||||
{Object.entries(ROLE).map(([key, label]) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
|
||||
@ -17,9 +17,9 @@ import { CreateProjectModal } from "components/project";
|
||||
// ui
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
const navigation = (workspaceSlug: string, projectId: string) => [
|
||||
{
|
||||
@ -54,11 +54,17 @@ export const ProjectSidebarList: FC = () => {
|
||||
const { collapsed: sidebarCollapse } = useTheme();
|
||||
// toast handler
|
||||
const { setToastAlert } = useToast();
|
||||
// fetching projects list
|
||||
|
||||
const { data: favoriteProjects } = useSWR(
|
||||
workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: projects } = useSWR(
|
||||
workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
const normalProjects = projects?.filter((p) => !p.is_favourite) ?? [];
|
||||
|
||||
const handleCopyText = (projectId: string) => {
|
||||
const originURL =
|
||||
@ -75,22 +81,24 @@ export const ProjectSidebarList: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<div className="no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-white border-t border-gray-200 px-6 pt-5 pb-3">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
|
||||
{projects ? (
|
||||
<>
|
||||
{projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
|
||||
{favoriteProjects && favoriteProjects.length > 0 && (
|
||||
<div className="mt-3 flex flex-col space-y-2 px-6">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
|
||||
{favoriteProjects.map((favoriteProject) => {
|
||||
const project = favoriteProject.project_detail;
|
||||
|
||||
return (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full items-center gap-2 select-none rounded-md py-2 text-left text-sm font-medium ${
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-x-2 items-center">
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
@ -102,13 +110,13 @@ export const ProjectSidebarList: FC = () => {
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="w-[125px] text-ellipsis text-[0.875rem] overflow-hidden">
|
||||
{project?.name}
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-x-1 items-center">
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
@ -154,7 +162,7 @@ export const ProjectSidebarList: FC = () => {
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`w-5 h-5 flex-shrink-0 ${
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
@ -172,41 +180,143 @@ export const ProjectSidebarList: FC = () => {
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 flex flex-col space-y-2 px-6 pb-3">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
|
||||
{projects ? (
|
||||
<>
|
||||
{normalProjects.length > 0 ? (
|
||||
normalProjects.map((project) => (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -20,9 +20,9 @@ import { StarIcon } from "@heroicons/react/20/solid";
|
||||
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import type { IProject } from "types";
|
||||
import type { IFavoriteProject, IProject } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
export type ProjectCardProps = {
|
||||
project: IProject;
|
||||
@ -63,6 +63,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
@ -94,6 +95,11 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate<IFavoriteProject[]>(
|
||||
FAVORITE_PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
|
||||
false
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
@ -126,7 +132,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
return (
|
||||
<>
|
||||
{members ? (
|
||||
<div className="flex flex-col shadow rounded-[10px]">
|
||||
<div className="flex flex-col rounded-[10px] shadow">
|
||||
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
|
||||
<a>
|
||||
<div className="relative h-32 w-full rounded-t-[10px]">
|
||||
@ -149,16 +155,16 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
e.stopPropagation();
|
||||
setToJoinProject(project.id);
|
||||
}}
|
||||
className="flex cursor-pointer items-center gap-1 bg-green-600 px-2 py-1 rounded text-xs"
|
||||
className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
<span>Select to Join</span>
|
||||
</button>
|
||||
) : (
|
||||
<span className="bg-green-600 px-2 py-1 rounded text-xs">Member</span>
|
||||
<span className="rounded bg-green-600 px-2 py-1 text-xs">Member</span>
|
||||
)}
|
||||
{project.is_favourite && (
|
||||
<span className="bg-orange-400 h-6 w-9 grid place-items-center rounded">
|
||||
<span className="grid h-6 w-9 place-items-center rounded bg-orange-400">
|
||||
<StarIcon className="h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
@ -166,7 +172,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex flex-col px-7 py-4 rounded-b-[10px] h-full">
|
||||
<div className="flex h-full flex-col rounded-b-[10px] px-7 py-4">
|
||||
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
|
||||
<a>
|
||||
<div className="flex items-center gap-1">
|
||||
@ -180,7 +186,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
<p className="mt-3.5 mb-7">{truncateText(project.description ?? "", 100)}</p>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex justify-between items-end h-full">
|
||||
<div className="flex h-full items-end justify-between">
|
||||
<Tooltip
|
||||
tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
|
||||
position="bottom"
|
||||
|
||||
@ -1,193 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// hooks
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import { CreateProjectModal } from "components/project";
|
||||
// headless ui
|
||||
// ui
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
// icons
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
navigation: (
|
||||
workspaceSlug: string,
|
||||
projectId: string
|
||||
) => {
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
}[];
|
||||
sidebarCollapse: boolean;
|
||||
};
|
||||
|
||||
const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
|
||||
const [isCreateProjectModal, setCreateProjectModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: projects } = useSWR(
|
||||
workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<div
|
||||
className={`no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-primary px-2 pt-5 pb-3 ${
|
||||
sidebarCollapse ? "rounded-xl" : "rounded-t-3xl"
|
||||
}`}
|
||||
>
|
||||
{projects ? (
|
||||
<>
|
||||
{projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<Disclosure.Button
|
||||
className={`flex w-full items-center gap-2 rounded-md p-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase text-white">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<span className="flex w-full items-center justify-between ">
|
||||
<span className="w-[125px] text-ellipsis overflow-hidden">
|
||||
{project?.name}
|
||||
</span>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() =>
|
||||
copyTextToClipboard(
|
||||
`https://app.plane.so/${workspaceSlug}/projects/${project?.id}/issues/`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
title: "Link Copied",
|
||||
message: "Link copied to clipboard",
|
||||
type: "success",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
Copy link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<item.icon
|
||||
className={`h-4 w-4 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsList;
|
||||
@ -1,74 +0,0 @@
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import {
|
||||
ClipboardDocumentListIcon,
|
||||
Cog6ToothIcon,
|
||||
HomeIcon,
|
||||
RectangleStackIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
sidebarCollapse: boolean;
|
||||
};
|
||||
|
||||
const workspaceLinks = (workspaceSlug: string) => [
|
||||
{
|
||||
icon: HomeIcon,
|
||||
name: "Home",
|
||||
href: `/${workspaceSlug}`,
|
||||
},
|
||||
{
|
||||
icon: ClipboardDocumentListIcon,
|
||||
name: "Projects",
|
||||
href: `/${workspaceSlug}/projects`,
|
||||
},
|
||||
{
|
||||
icon: RectangleStackIcon,
|
||||
name: "My Issues",
|
||||
href: `/${workspaceSlug}/me/my-issues`,
|
||||
},
|
||||
{
|
||||
icon: Cog6ToothIcon,
|
||||
name: "Settings",
|
||||
href: `/${workspaceSlug}/settings`,
|
||||
},
|
||||
];
|
||||
|
||||
const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
query: { workspaceSlug },
|
||||
} = router;
|
||||
|
||||
return (
|
||||
<div className="px-2">
|
||||
<div className="mt-3 flex-1 space-y-1 bg-white">
|
||||
{workspaceLinks(workspaceSlug as string).map((link, index) => (
|
||||
<Link key={index} href={link.href}>
|
||||
<a
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100"
|
||||
} group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-500"
|
||||
} h-4 w-4 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceOptions;
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
@ -13,7 +13,7 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { Button, Input, Select, TextArea } from "components/ui";
|
||||
import { Button, CustomSelect, Input, TextArea } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
@ -129,19 +129,25 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
id="group"
|
||||
label="Group"
|
||||
<Controller
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
name="group"
|
||||
error={errors.group}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Group is required",
|
||||
}}
|
||||
options={Object.keys(GROUP_CHOICES).map((key) => ({
|
||||
value: key,
|
||||
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
|
||||
}))}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.keys(GROUP_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -34,7 +34,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-white capitalize">
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
|
||||
{user?.first_name && user.first_name !== ""
|
||||
? user.first_name.charAt(0)
|
||||
: user?.email?.charAt(0)}
|
||||
|
||||
99
apps/app/components/ui/context-menu.tsx
Normal file
99
apps/app/components/ui/context-menu.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
type Props = {
|
||||
position: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
children: React.ReactNode;
|
||||
title?: string | JSX.Element;
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) => {
|
||||
useEffect(() => {
|
||||
const hideContextMenu = () => {
|
||||
if (isOpen) setIsOpen(false);
|
||||
};
|
||||
|
||||
window.addEventListener("click", hideContextMenu);
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") hideContextMenu();
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("click", hideContextMenu);
|
||||
window.removeEventListener("keydown", hideContextMenu);
|
||||
};
|
||||
}, [isOpen, setIsOpen]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed z-20 h-full w-full ${
|
||||
isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border bg-white p-2 text-xs shadow-lg`}
|
||||
style={{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y}px`,
|
||||
}}
|
||||
>
|
||||
{title && <h4 className="border-b px-1 py-1 pb-2 text-[0.8rem] font-medium">{title}</h4>}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type MenuItemProps = {
|
||||
children: JSX.Element | string;
|
||||
renderAs?: "button" | "a";
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
Icon?: any;
|
||||
};
|
||||
|
||||
const MenuItem: React.FC<MenuItemProps> = ({
|
||||
children,
|
||||
renderAs,
|
||||
href = "",
|
||||
onClick,
|
||||
className = "",
|
||||
Icon,
|
||||
}) => (
|
||||
<>
|
||||
{renderAs === "a" ? (
|
||||
<Link href={href}>
|
||||
<a
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
|
||||
>
|
||||
<>
|
||||
{Icon && <Icon />}
|
||||
{children}
|
||||
</>
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<>
|
||||
{Icon && <Icon height={12} width={12} />}
|
||||
{children}
|
||||
</>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
ContextMenu.Item = MenuItem;
|
||||
|
||||
export { ContextMenu };
|
||||
@ -1,133 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
label?: string;
|
||||
options?: Array<{ display: string; value: any; color?: string; icon?: JSX.Element }>;
|
||||
icon?: JSX.Element;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
multiple?: boolean;
|
||||
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
className?: string;
|
||||
footerOption?: JSX.Element;
|
||||
};
|
||||
|
||||
export const CustomListbox: React.FC<Props> = ({
|
||||
title = "",
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
multiple,
|
||||
icon,
|
||||
footerOption,
|
||||
optionsFontsize,
|
||||
className,
|
||||
label,
|
||||
}) => (
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
{label && (
|
||||
<Listbox.Label>
|
||||
<div className="mb-2 text-gray-500">{label}</div>
|
||||
</Listbox.Label>
|
||||
)}
|
||||
<Listbox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500
|
||||
${className || "px-2 py-1"}`}
|
||||
>
|
||||
{icon ?? null}
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{Array.isArray(value) ? (
|
||||
value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
|
||||
`${title}`
|
||||
) : (
|
||||
<>
|
||||
{options?.find((o) => o.value === value)?.color && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: options?.find((o) => o.value === value)?.color,
|
||||
}}
|
||||
/>
|
||||
)}{" "}
|
||||
{options?.find((o) => o.value === value)?.display || `${title}`}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg ${
|
||||
optionsFontsize === "sm"
|
||||
? "text-xs"
|
||||
: optionsFontsize === "md"
|
||||
? "text-base"
|
||||
: optionsFontsize === "lg"
|
||||
? "text-lg"
|
||||
: optionsFontsize === "xl"
|
||||
? "text-xl"
|
||||
: optionsFontsize === "2xl"
|
||||
? "text-2xl"
|
||||
: ""
|
||||
} z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="py-1">
|
||||
{options ? (
|
||||
options.length > 0 ? (
|
||||
options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ selected, active }) =>
|
||||
`${
|
||||
selected ||
|
||||
(Array.isArray(value)
|
||||
? value.includes(option.value)
|
||||
: value === option.value)
|
||||
? "bg-indigo-50 font-medium"
|
||||
: ""
|
||||
} ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} relative cursor-pointer select-none p-2 text-gray-900`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
<span className={` flex items-center gap-2 truncate`}>
|
||||
{option.icon}
|
||||
{option.color && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: option.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{option.display}
|
||||
</span>
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">No options</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
{footerOption ?? null}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
);
|
||||
@ -40,40 +40,48 @@ const CustomMenu = ({
|
||||
customButton,
|
||||
}: Props) => (
|
||||
<Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
{customButton ? (
|
||||
<Menu.Button as="div">{customButton}</Menu.Button>
|
||||
) : (
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
@ -85,7 +93,7 @@ const CustomMenu = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 whitespace-nowrap rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute z-20 mt-1 whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
width === "sm"
|
||||
@ -112,25 +120,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
onClick,
|
||||
className = "",
|
||||
}) => (
|
||||
<Menu.Item>
|
||||
{({ active, close }) =>
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className={({ active }) =>
|
||||
`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} cursor-pointer select-none gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{({ close }) =>
|
||||
renderAs === "a" ? (
|
||||
<Link href={href ?? ""}>
|
||||
<a
|
||||
className={`${className} block p-2 text-gray-700 hover:bg-indigo-50 hover:text-gray-900`}
|
||||
onClick={close}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
<a onClick={close}>{children}</a>
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`block w-full p-2 text-left ${
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700"
|
||||
} ${className}`}
|
||||
>
|
||||
<button type="button" onClick={onClick}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
|
||||
243
apps/app/components/ui/custom-search-select.tsx
Normal file
243
apps/app/components/ui/custom-search-select.tsx
Normal file
@ -0,0 +1,243 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type CustomSearchSelectProps = {
|
||||
value: any;
|
||||
onChange: any;
|
||||
options: {
|
||||
value: any;
|
||||
query: string;
|
||||
content: JSX.Element;
|
||||
}[];
|
||||
label?: string | JSX.Element;
|
||||
textAlignment?: "left" | "center" | "right";
|
||||
position?: "right" | "left";
|
||||
noChevron?: boolean;
|
||||
customButton?: JSX.Element;
|
||||
optionsClassName?: string;
|
||||
disabled?: boolean;
|
||||
selfPositioned?: boolean;
|
||||
multiple?: boolean;
|
||||
footerOption?: JSX.Element;
|
||||
};
|
||||
|
||||
export const CustomSearchSelect = ({
|
||||
label,
|
||||
textAlignment,
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
position = "left",
|
||||
noChevron = false,
|
||||
customButton,
|
||||
optionsClassName = "",
|
||||
disabled = false,
|
||||
selfPositioned = false,
|
||||
multiple = false,
|
||||
footerOption,
|
||||
}: CustomSearchSelectProps) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const filteredOptions =
|
||||
query === ""
|
||||
? options
|
||||
: options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* TODO: Improve this multiple logic */}
|
||||
{multiple ? (
|
||||
<Combobox
|
||||
as="div"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
|
||||
disabled={disabled}
|
||||
multiple
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
{customButton ? (
|
||||
<Combobox.Button as="div">{customButton}</Combobox.Button>
|
||||
) : (
|
||||
<Combobox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && !disabled && (
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
)}
|
||||
</Combobox.Button>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Type to search..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-hover-gray" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{({ active, selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
<div
|
||||
className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
|
||||
active || selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-gray-500">No matching results</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
{footerOption}
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
) : (
|
||||
<Combobox
|
||||
as="div"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
|
||||
disabled={disabled}
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
{customButton ? (
|
||||
<Combobox.Button as="div">{customButton}</Combobox.Button>
|
||||
) : (
|
||||
<Combobox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && !disabled && (
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
)}
|
||||
</Combobox.Button>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
|
||||
<MagnifyingGlassIcon className="h-3 w-3" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs focus:outline-none"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Type to search..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-hover-gray" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && <CheckIcon className="h-4 w-4" />}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-gray-500">No matching results</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
{footerOption}
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -3,6 +3,7 @@ import React from "react";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type CustomSelectProps = {
|
||||
value: any;
|
||||
@ -11,6 +12,7 @@ type CustomSelectProps = {
|
||||
label?: string | JSX.Element;
|
||||
textAlignment?: "left" | "center" | "right";
|
||||
maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
|
||||
position?: "right" | "left";
|
||||
width?: "auto" | string;
|
||||
input?: boolean;
|
||||
noChevron?: boolean;
|
||||
@ -27,6 +29,7 @@ const CustomSelect = ({
|
||||
value,
|
||||
onChange,
|
||||
maxHeight = "none",
|
||||
position = "left",
|
||||
width = "auto",
|
||||
input = false,
|
||||
noChevron = false,
|
||||
@ -50,7 +53,7 @@ const CustomSelect = ({
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
|
||||
} ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
@ -75,8 +78,10 @@ const CustomSelect = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`${optionsClassName} absolute right-0 z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-full whitespace-nowrap" : width
|
||||
className={`${optionsClassName} absolute ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
|
||||
} ${input ? "max-h-48" : ""} ${
|
||||
maxHeight === "lg"
|
||||
? "max-h-60"
|
||||
@ -89,7 +94,7 @@ const CustomSelect = ({
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
<div className="space-y-1 p-2">{children}</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</Listbox>
|
||||
@ -105,12 +110,17 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
|
||||
<Listbox.Option
|
||||
value={value}
|
||||
className={({ active, selected }) =>
|
||||
`${className} ${active || selected ? "bg-indigo-50" : ""} ${
|
||||
`${className} ${active || selected ? "bg-hover-gray" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} relative flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{children}
|
||||
{({ selected }) => (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">{children}</div>
|
||||
{selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
);
|
||||
|
||||
|
||||
@ -36,15 +36,15 @@ export const CustomDatePicker: React.FC<Props> = ({
|
||||
}}
|
||||
className={`${className} ${
|
||||
renderAs === "input"
|
||||
? "block bg-transparent text-sm focus:outline-none border-gray-300 px-3 py-2"
|
||||
? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
|
||||
: renderAs === "button"
|
||||
? `px-2 py-1 text-xs shadow-sm ${
|
||||
? `px-3 py-1.5 text-xs shadow-sm ${
|
||||
disabled ? "" : "hover:bg-gray-100"
|
||||
} focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300`
|
||||
} duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`
|
||||
: ""
|
||||
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} w-full rounded-md bg-transparent border caret-transparent`}
|
||||
} w-full rounded-md border bg-transparent caret-transparent`}
|
||||
dateFormat="dd-MM-yyyy"
|
||||
isClearable={isClearable}
|
||||
disabled={disabled}
|
||||
|
||||
@ -24,7 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
|
||||
|
||||
<h2 className="text-lg font-medium text-gray-900">{title}</h2>
|
||||
<div className="mt-1 text-sm text-gray-500">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200">
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
|
||||
{children}
|
||||
</ul>
|
||||
{link ? (
|
||||
|
||||
@ -2,8 +2,9 @@ export * from "./input";
|
||||
export * from "./text-area";
|
||||
export * from "./avatar";
|
||||
export * from "./button";
|
||||
export * from "./custom-listbox";
|
||||
export * from "./context-menu";
|
||||
export * from "./custom-menu";
|
||||
export * from "./custom-search-select";
|
||||
export * from "./custom-select";
|
||||
export * from "./datepicker";
|
||||
export * from "./empty-space";
|
||||
@ -12,7 +13,6 @@ export * from "./loader";
|
||||
export * from "./multi-input";
|
||||
export * from "./outline-button";
|
||||
export * from "./progress-bar";
|
||||
export * from "./select";
|
||||
export * from "./spinner";
|
||||
export * from "./tooltip";
|
||||
export * from "./labels-list";
|
||||
|
||||
@ -20,7 +20,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
backgroundColor: color && color !== "" ? color : "#000000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { RegisterOptions, UseFormRegister } from "react-hook-form";
|
||||
|
||||
type Props = {
|
||||
label?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
value?: string | number | readonly string[];
|
||||
className?: string;
|
||||
register?: UseFormRegister<any>;
|
||||
disabled?: boolean;
|
||||
validations?: RegisterOptions;
|
||||
error?: any;
|
||||
autoComplete?: "on" | "off";
|
||||
options: { label: string; value: any }[];
|
||||
size?: "rg" | "lg";
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Select: React.FC<Props> = ({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
className = "",
|
||||
name,
|
||||
register,
|
||||
disabled,
|
||||
validations,
|
||||
error,
|
||||
options,
|
||||
size = "rg",
|
||||
fullWidth = true,
|
||||
}) => (
|
||||
<>
|
||||
{label && (
|
||||
<label htmlFor={id} className="text-gray-500 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<select
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
{...(register && register(name, validations))}
|
||||
disabled={disabled}
|
||||
className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
|
||||
fullWidth ? "w-full" : ""
|
||||
} ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option value={option.value} key={index}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{error?.message && <div className="text-red-500 text-sm">{error.message}</div>}
|
||||
</>
|
||||
);
|
||||
@ -56,7 +56,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex w-full items-center justify-between self-baseline bg-white border-t border-gray-200 px-6 py-2 ${
|
||||
className={`flex w-full items-center justify-between self-baseline border-t bg-white px-6 py-2 ${
|
||||
sidebarCollapse ? "flex-col-reverse" : ""
|
||||
}`}
|
||||
>
|
||||
@ -132,7 +132,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
||||
<Link href={href} key={name}>
|
||||
<a
|
||||
target="_blank"
|
||||
className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
|
||||
className="mx-3 flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-2 text-xs hover:bg-gray-100"
|
||||
>
|
||||
<Icon className="h-5 w-5 text-gray-500" />
|
||||
<span className="text-sm">{name}</span>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import { mutate } from "swr";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// headless
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// ui
|
||||
import { Button, Input, Select } from "components/ui";
|
||||
import { Button, CustomSelect, Input } from "components/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
@ -37,6 +37,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
@ -44,7 +45,6 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
} = useForm<IWorkspaceMemberInvitation>({
|
||||
defaultValues,
|
||||
reValidateMode: "onChange",
|
||||
mode: "all",
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
@ -98,13 +98,13 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="space-y-5">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Members
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Members
|
||||
</Dialog.Title>
|
||||
<p className="text-sm text-gray-500">
|
||||
Invite members to work on your workspace.
|
||||
</p>
|
||||
@ -129,34 +129,30 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
id="role"
|
||||
label="Role"
|
||||
<Controller
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
name="role"
|
||||
error={errors.role}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Role is required",
|
||||
}}
|
||||
options={Object.entries(ROLE).map(([key, value]) => ({
|
||||
value: key,
|
||||
label: value,
|
||||
}))}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={ROLE[value]}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.entries(ROLE).map(([key, value]) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
{value}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<TextArea
|
||||
id="message"
|
||||
name="message"
|
||||
label="Message"
|
||||
placeholder="Enter message"
|
||||
error={errors.message}
|
||||
register={register}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<Button theme="secondary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
@ -76,7 +76,7 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center mx-auto gap-x-1">
|
||||
<div className="mx-auto flex items-center gap-x-1">
|
||||
<div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
@ -116,7 +116,7 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="fixed left-2 z-20 mt-1 w-full max-w-[14rem] origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<Menu.Items className="fixed left-2 z-20 mt-1 w-full max-w-[17rem] origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="divide-y px-1 py-2">
|
||||
<div>
|
||||
<Menu.Item as="div" className="px-2 pb-2 text-xs">
|
||||
|
||||
@ -53,7 +53,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
|
||||
} h-4 w-4 flex-shrink-0 group-hover:text-gray-900`}
|
||||
} h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
|
||||
@ -15,6 +15,8 @@ export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
|
||||
export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
|
||||
|
||||
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
|
||||
export const FAVORITE_PROJECTS_LIST = (workspaceSlug: string) =>
|
||||
`FAVORITE_PROJECTS_LIST_${workspaceSlug}`;
|
||||
export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
|
||||
|
||||
export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId}`;
|
||||
@ -35,7 +37,8 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
|
||||
export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
|
||||
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
|
||||
export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
|
||||
export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) => `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
|
||||
export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) =>
|
||||
`CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
|
||||
export const CYCLE_DRAFT_LIST = (projectId: string) => `CYCLE_DRAFT_LIST_${projectId}`;
|
||||
export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ type Props = {
|
||||
};
|
||||
|
||||
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
|
||||
<div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-gray-200 bg-white px-5 py-4 ">
|
||||
<div className="flex w-full flex-row items-center justify-between gap-y-4 border-b bg-white px-5 py-4 ">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="block md:hidden">
|
||||
<Button
|
||||
|
||||
@ -24,7 +24,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
|
||||
toggleSidebar ? "left-0" : "-left-60 md:left-0"
|
||||
} flex h-full flex-col bg-white duration-300 md:relative`}
|
||||
>
|
||||
<div className="flex h-full flex-1 flex-col border-r border-gray-200">
|
||||
<div className="flex h-full flex-1 flex-col border-r">
|
||||
<div className="flex h-full flex-1 flex-col pt-2">
|
||||
<div className="px-2">
|
||||
<WorkspaceSidebarDropdown />
|
||||
|
||||
@ -135,7 +135,7 @@ const AppLayout: FC<AppLayoutProps> = ({
|
||||
</div>
|
||||
) : isMember ? (
|
||||
<div
|
||||
className={`w-full flex-grow ${
|
||||
className={`flex w-full flex-grow flex-col ${
|
||||
noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
|
||||
} ${
|
||||
bg === "primary"
|
||||
|
||||
@ -135,6 +135,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
people?.find((person) => person.member.id === field.value)?.member
|
||||
.first_name ?? "Select Lead"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
@ -143,7 +144,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
@ -164,7 +165,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
{person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
@ -194,6 +195,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
people?.find((p) => p.member.id === field.value)?.member.first_name ??
|
||||
"Select Default Assignee"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
@ -202,7 +204,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
@ -223,7 +225,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
{person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
|
||||
@ -93,7 +93,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
|
||||
<section className="space-y-8">
|
||||
<h3 className="text-2xl font-semibold">Features</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
@ -122,7 +122,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
|
||||
@ -272,7 +272,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
|
||||
@ -70,7 +70,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptySpace
|
||||
title="You haven't added any integration yet."
|
||||
description="Add GitHub and other integrations to sync your project issues."
|
||||
@ -87,7 +87,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-5 md:w-2/3">
|
||||
<Loader className="space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
|
||||
@ -181,7 +181,7 @@ const MembersSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
|
||||
<div className="divide-y rounded-[10px] border bg-white px-6">
|
||||
{members.length > 0
|
||||
? members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between py-6">
|
||||
|
||||
@ -99,7 +99,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="divide-y rounded-[10px] border border-gray-200">
|
||||
<div className="divide-y rounded-[10px] border">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
onClose={() => {
|
||||
|
||||
@ -99,10 +99,7 @@ const OnBoard: NextPage = () => {
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Select invites that you want to accept.
|
||||
</p>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||
>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
|
||||
{invitations.map((invitation) => (
|
||||
<SingleInvitation
|
||||
key={invitation.id}
|
||||
|
||||
@ -3,6 +3,7 @@ import APIService from "services/api.service";
|
||||
// types
|
||||
import type {
|
||||
GithubRepositoriesResponse,
|
||||
IFavoriteProject,
|
||||
IProject,
|
||||
IProjectMember,
|
||||
IProjectMemberInvitation,
|
||||
@ -256,6 +257,14 @@ class ProjectServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getFavoriteProjects(workspaceSlug: string): Promise<IFavoriteProject[]> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/user-favourite-projects/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async addProjectToFavourites(
|
||||
workspaceSlug: string,
|
||||
data: {
|
||||
|
||||
12
apps/app/types/projects.d.ts
vendored
12
apps/app/types/projects.d.ts
vendored
@ -21,6 +21,18 @@ export interface IProject {
|
||||
workspace: IWorkspace | string;
|
||||
}
|
||||
|
||||
export interface IFavoriteProject {
|
||||
created_at: Date;
|
||||
created_by: string;
|
||||
id: string;
|
||||
project: string;
|
||||
project_detail: IProject;
|
||||
updated_at: Date;
|
||||
updated_by: string;
|
||||
user: string;
|
||||
workspace: string;
|
||||
}
|
||||
|
||||
type ProjectViewTheme = {
|
||||
collapsed: boolean;
|
||||
issueView: "list" | "kanban" | null;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user