github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #371 from makeplane/style/dropdowns

Browse Source 
style: consistent dropdowns, feat: custom context menu
This commit is contained in:
Aaryan Khandelwal 2023-03-06 10:39:50 +05:30 committed by GitHub
commit a4dc4d1f15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
68 changed files with 1737 additions and 2077 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
apps/app/components/core/board-view/all-boards.tsx
View File

@ -11,6 +11,7 @@ type Props = {
states: IState[] | undefined; states: IState[] | undefined;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
addIssueToState: (groupTitle: string, stateId: string | null) => void; addIssueToState: (groupTitle: string, stateId: string | null) => void;
makeIssueCopy: (issue: IIssue) => void;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
@ -25,6 +26,7 @@ export const AllBoards: React.FC<Props> = ({
states, states,
members, members,
addIssueToState, addIssueToState,
makeIssueCopy,
handleEditIssue, handleEditIssue,
openIssuesListModal, openIssuesListModal,
handleDeleteIssue, handleDeleteIssue,
@ -37,49 +39,46 @@ export const AllBoards: React.FC<Props> = ({
return ( return (
<> <>
{groupedByIssues ? ( {groupedByIssues ? (
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full"> <div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
<div className="h-full w-full overflow-hidden"> <div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
<div className="h-full w-full"> {Object.keys(groupedByIssues).map((singleGroup, index) => {
<div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden"> const currentState =
{Object.keys(groupedByIssues).map((singleGroup, index) => { selectedGroup === "state_detail.name"
const currentState = ? states?.find((s) => s.name === singleGroup)
selectedGroup === "state_detail.name" : null;
? states?.find((s) => s.name === singleGroup)
: null;
const stateId = const stateId =
selectedGroup === "state_detail.name" selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id ?? null ? states?.find((s) => s.name === singleGroup)?.id ?? null
: null; : null;
const bgColor = const bgColor =
selectedGroup === "state_detail.name" selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.color ? states?.find((s) => s.name === singleGroup)?.color
: "#000000"; : "#000000";
return ( return (
<SingleBoard <SingleBoard
key={index} key={index}
type={type} type={type}
currentState={currentState} currentState={currentState}
bgColor={bgColor} bgColor={bgColor}
groupTitle={singleGroup} groupTitle={singleGroup}
groupedByIssues={groupedByIssues} groupedByIssues={groupedByIssues}
selectedGroup={selectedGroup} selectedGroup={selectedGroup}
members={members} members={members}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
addIssueToState={() => addIssueToState(singleGroup, stateId)} makeIssueCopy={makeIssueCopy}
handleDeleteIssue={handleDeleteIssue} addIssueToState={() => addIssueToState(singleGroup, stateId)}
openIssuesListModal={openIssuesListModal ?? null} handleDeleteIssue={handleDeleteIssue}
orderBy={orderBy} openIssuesListModal={openIssuesListModal ?? null}
handleTrashBox={handleTrashBox} orderBy={orderBy}
removeIssue={removeIssue} handleTrashBox={handleTrashBox}
userAuth={userAuth} removeIssue={removeIssue}
/> userAuth={userAuth}
); />
})} );
</div> })}
</div>
</div> </div>
</div> </div>
) : ( ) : (

13
apps/app/components/core/board-view/single-board.tsx
View File

@ -29,6 +29,7 @@ type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
makeIssueCopy: (issue: IIssue) => void;
addIssueToState: () => void; addIssueToState: () => void;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
@ -47,6 +48,7 @@ export const SingleBoard: React.FC<Props> = ({
selectedGroup, selectedGroup,
members, members,
handleEditIssue, handleEditIssue,
makeIssueCopy,
addIssueToState, addIssueToState,
handleDeleteIssue, handleDeleteIssue,
openIssuesListModal, openIssuesListModal,
@ -91,7 +93,7 @@ export const SingleBoard: React.FC<Props> = ({
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}> <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <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" : "" snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
} ${!isCollapsed ? "hidden" : "block"}`} } ${!isCollapsed ? "hidden" : "block"}`}
ref={provided.innerRef} ref={provided.innerRef}
@ -102,12 +104,12 @@ export const SingleBoard: React.FC<Props> = ({
<div <div
className={`absolute ${ className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden" 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 <div
className={`absolute ${ className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden" 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 ?? "")} This board is ordered by {replaceUnderscoreIfSnakeCase(orderBy ?? "")}
</div> </div>
@ -132,6 +134,7 @@ export const SingleBoard: React.FC<Props> = ({
selectedGroup={selectedGroup} selectedGroup={selectedGroup}
properties={properties} properties={properties}
editIssue={() => handleEditIssue(issue)} editIssue={() => handleEditIssue(issue)}
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
orderBy={orderBy} orderBy={orderBy}
handleTrashBox={handleTrashBox} handleTrashBox={handleTrashBox}
@ -153,7 +156,7 @@ export const SingleBoard: React.FC<Props> = ({
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="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} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
@ -164,7 +167,7 @@ export const SingleBoard: React.FC<Props> = ({
customButton={ customButton={
<button <button
type="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" /> <PlusIcon className="h-4 w-4" />
Add Issue Add Issue

246
apps/app/components/core/board-view/single-issue.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useEffect } from "react"; import React, { useCallback, useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -24,7 +24,14 @@ import {
ViewStateSelect, ViewStateSelect,
} from "components/issues/view-select"; } from "components/issues/view-select";
// ui // ui
import { CustomMenu } from "components/ui"; import { ContextMenu, CustomMenu } from "components/ui";
// icons
import {
ClipboardDocumentCheckIcon,
LinkIcon,
PencilIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
@ -47,6 +54,7 @@ type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
properties: Properties; properties: Properties;
editIssue: () => void; editIssue: () => void;
makeIssueCopy: () => void;
removeIssue?: (() => void) | null; removeIssue?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
orderBy: NestedKeyOf<IIssue> | null; orderBy: NestedKeyOf<IIssue> | null;
@ -62,12 +70,17 @@ export const SingleBoardIssue: React.FC<Props> = ({
selectedGroup, selectedGroup,
properties, properties,
editIssue, editIssue,
makeIssueCopy,
removeIssue, removeIssue,
handleDeleteIssue, handleDeleteIssue,
orderBy, orderBy,
handleTrashBox, handleTrashBox,
userAuth, userAuth,
}) => { }) => {
// context menu
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@ -88,6 +101,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -109,6 +123,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...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), PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (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; return p;
}), }),
@ -146,10 +162,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
[workspaceSlug, projectId, cycleId, moduleId, issue] [workspaceSlug, projectId, cycleId, moduleId, issue]
); );
function getStyle( const getStyle = (
style: DraggingStyle | NotDraggingStyle | undefined, style: DraggingStyle | NotDraggingStyle | undefined,
snapshot: DraggableStateSnapshot snapshot: DraggableStateSnapshot
) { ) => {
if (orderBy === "sort_order") return style; if (orderBy === "sort_order") return style;
if (!snapshot.isDragging) return {}; if (!snapshot.isDragging) return {};
if (!snapshot.isDropAnimating) { if (!snapshot.isDropAnimating) {
@ -160,7 +176,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
...style, ...style,
transitionDuration: `0.001s`, transitionDuration: `0.001s`,
}; };
} };
const handleCopyText = () => { const handleCopyText = () => {
const originURL = const originURL =
@ -183,107 +199,135 @@ export const SingleBoardIssue: React.FC<Props> = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div <>
className={`rounded bg-white shadow mb-3 ${ <ContextMenu
snapshot.isDragging ? "border-2 border-theme shadow-lg" : "" position={contextMenuPosition}
}`} title="Quick actions"
ref={provided.innerRef} isOpen={contextMenu}
{...provided.draggableProps} setIsOpen={setContextMenu}
{...provided.dragHandleProps} >
style={getStyle(provided.draggableProps.style, snapshot)} <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
> Edit issue
<div className="group/card relative select-none p-4"> </ContextMenu.Item>
{!isNotAllowed && ( <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100"> Make a copy...
{type && !isNotAllowed && ( </ContextMenu.Item>
<CustomMenu width="auto" ellipsis> <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> Delete issue
{type !== "issue" && removeIssue && ( </ContextMenu.Item>
<CustomMenu.MenuItem onClick={removeIssue}> <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
<>Remove from {type}</> 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>
)} <CustomMenu.MenuItem onClick={handleCopyText}>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> Copy issue link
Delete issue </CustomMenu.MenuItem>
</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> {properties.state && selectedGroup !== "state_detail.name" && (
)} <ViewStateSelect
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}> issue={issue}
<a> partialUpdateIssue={partialUpdateIssue}
{properties.key && ( isNotAllowed={isNotAllowed}
<div className="mb-2.5 text-xs font-medium text-gray-700"> selfPositioned
{issue.project_detail.identifier}-{issue.sequence_id} />
)}
{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> </div>
)} )}
<h5 {properties.labels && issue.label_details.length > 0 && (
className="text-sm group-hover:text-theme" <div className="flex flex-wrap gap-1">
style={{ lineClamp: 3, WebkitLineClamp: 3 }} {issue.label_details.map((label) => (
>
{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"
>
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" key={label.id}
style={{ className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
backgroundColor: label?.color && label.color !== "" ? label.color : "#000", >
}} <span
/> className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
{label.name} style={{
</span> backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
))} }}
</div> />
)} {label.name}
{properties.assignee && ( </span>
<ViewAssigneeSelect ))}
issue={issue} </div>
partialUpdateIssue={partialUpdateIssue} )}
isNotAllowed={isNotAllowed} {properties.assignee && (
tooltipPosition="left" <ViewAssigneeSelect
selfPositioned issue={issue}
/> partialUpdateIssue={partialUpdateIssue}
)} isNotAllowed={isNotAllowed}
tooltipPosition="left"
selfPositioned
/>
)}
</div>
</div> </div>
</div> </div>
</div> </>
); );
}; };

15
apps/app/components/core/issues-view.tsx
View File

@ -269,6 +269,15 @@ export const IssuesView: React.FC<Props> = ({
[setCreateIssueModal, setPreloadedData, selectedGroup] [setCreateIssueModal, setPreloadedData, selectedGroup]
); );
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback( const handleEditIssue = useCallback(
(issue: IIssue) => { (issue: IIssue) => {
setEditIssueModal(true); setEditIssueModal(true);
@ -370,8 +379,8 @@ export const IssuesView: React.FC<Props> = ({
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`${ className={`${
trashBox ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none" trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
} 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 ${ } 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" : "" snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
} duration-200`} } duration-200`}
ref={provided.innerRef} ref={provided.innerRef}
@ -389,6 +398,7 @@ export const IssuesView: React.FC<Props> = ({
states={states} states={states}
members={members} members={members}
addIssueToState={addIssueToState} addIssueToState={addIssueToState}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null} openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
@ -408,6 +418,7 @@ export const IssuesView: React.FC<Props> = ({
states={states} states={states}
members={members} members={members}
addIssueToState={addIssueToState} addIssueToState={addIssueToState}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null} openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}

3
apps/app/components/core/list-view/all-lists.tsx
View File

@ -12,6 +12,7 @@ type Props = {
states: IState[] | undefined; states: IState[] | undefined;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
addIssueToState: (groupTitle: string, stateId: string | null) => void; addIssueToState: (groupTitle: string, stateId: string | null) => void;
makeIssueCopy: (issue: IIssue) => void;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
@ -25,6 +26,7 @@ export const AllLists: React.FC<Props> = ({
states, states,
members, members,
addIssueToState, addIssueToState,
makeIssueCopy,
openIssuesListModal, openIssuesListModal,
handleEditIssue, handleEditIssue,
handleDeleteIssue, handleDeleteIssue,
@ -50,6 +52,7 @@ export const AllLists: React.FC<Props> = ({
selectedGroup={selectedGroup} selectedGroup={selectedGroup}
members={members} members={members}
addIssueToState={() => addIssueToState(singleGroup, stateId)} addIssueToState={() => addIssueToState(singleGroup, stateId)}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null} openIssuesListModal={type !== "issue" ? openIssuesListModal : null}

238
apps/app/components/core/list-view/single-issue.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback } from "react"; import React, { useCallback, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -18,7 +18,14 @@ import {
} from "components/issues/view-select"; } from "components/issues/view-select";
// ui // 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 // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
@ -31,6 +38,7 @@ type Props = {
issue: IIssue; issue: IIssue;
properties: Properties; properties: Properties;
editIssue: () => void; editIssue: () => void;
makeIssueCopy: () => void;
removeIssue?: (() => void) | null; removeIssue?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
userAuth: UserAuth; userAuth: UserAuth;
@ -41,13 +49,20 @@ export const SingleListIssue: React.FC<Props> = ({
issue, issue,
properties, properties,
editIssue, editIssue,
makeIssueCopy,
removeIssue, removeIssue,
handleDeleteIssue, handleDeleteIssue,
userAuth, userAuth,
}) => { }) => {
// context menu
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback( const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>) => { (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
@ -63,6 +78,7 @@ export const SingleListIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -84,6 +100,7 @@ export const SingleListIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...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), PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (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; return p;
}), }),
@ -134,104 +152,136 @@ export const SingleListIssue: React.FC<Props> = ({
}); });
}); });
}; };
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex items-center justify-between gap-2 px-4 py-3 text-sm"> <>
<div className="flex items-center gap-2"> <ContextMenu
<span position={contextMenuPosition}
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full" title="Quick actions"
style={{ isOpen={contextMenu}
backgroundColor: issue.state_detail.color, setIsOpen={setContextMenu}
}} >
/> <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> Edit issue
<a className="group relative flex items-center gap-2"> </ContextMenu.Item>
{properties.key && ( <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
<Tooltip Make a copy...
tooltipHeading="ID" </ContextMenu.Item>
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`} <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
> Delete issue
<span className="flex-shrink-0 text-xs text-gray-500"> </ContextMenu.Item>
{issue.project_detail?.identifier}-{issue.sequence_id} <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> </span>
</Tooltip> </Tooltip>
)} </a>
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}> </Link>
<span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap"> </div>
{issue.name} <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
</span> {properties.priority && (
</Tooltip> <ViewPrioritySelect
</a> issue={issue}
</Link> partialUpdateIssue={partialUpdateIssue}
</div> position="right"
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs"> isNotAllowed={isNotAllowed}
{properties.priority && ( />
<ViewPrioritySelect )}
issue={issue} {properties.state && (
partialUpdateIssue={partialUpdateIssue} <ViewStateSelect
isNotAllowed={isNotAllowed} issue={issue}
/> partialUpdateIssue={partialUpdateIssue}
)} position="right"
{properties.state && ( isNotAllowed={isNotAllowed}
<ViewStateSelect />
issue={issue} )}
partialUpdateIssue={partialUpdateIssue} {properties.due_date && (
isNotAllowed={isNotAllowed} <ViewDueDateSelect
/> issue={issue}
)} partialUpdateIssue={partialUpdateIssue}
{properties.due_date && ( isNotAllowed={isNotAllowed}
<ViewDueDateSelect />
issue={issue} )}
partialUpdateIssue={partialUpdateIssue} {properties.sub_issue_count && (
isNotAllowed={isNotAllowed} <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.sub_issue_count && ( )}
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm"> {properties.labels && (
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} <div className="flex flex-wrap gap-1">
</div> {issue.label_details.map((label) => (
)}
{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"
>
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" key={label.id}
style={{ className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
backgroundColor: label?.color && label.color !== "" ? label.color : "#000", >
}} <span
/> className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
{label.name} style={{
</span> backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
))} }}
</div> />
)} {label.name}
{properties.assignee && ( </span>
<ViewAssigneeSelect ))}
issue={issue} </div>
partialUpdateIssue={partialUpdateIssue} )}
isNotAllowed={isNotAllowed} {properties.assignee && (
/> <ViewAssigneeSelect
)} issue={issue}
{type && !isNotAllowed && ( partialUpdateIssue={partialUpdateIssue}
<CustomMenu width="auto" ellipsis> position="right"
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> isNotAllowed={isNotAllowed}
{type !== "issue" && removeIssue && ( />
<CustomMenu.MenuItem onClick={removeIssue}> )}
<>Remove from {type}</> {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>
)} <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> </CustomMenu>
Delete issue )}
</CustomMenu.MenuItem> </div>
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
</CustomMenu>
)}
</div> </div>
</div> </>
); );
}; };

3
apps/app/components/core/list-view/single-list.tsx
View File

@ -23,6 +23,7 @@ type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
addIssueToState: () => void; addIssueToState: () => void;
makeIssueCopy: (issue: IIssue) => void;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
@ -37,6 +38,7 @@ export const SingleList: React.FC<Props> = ({
selectedGroup, selectedGroup,
members, members,
addIssueToState, addIssueToState,
makeIssueCopy,
handleEditIssue, handleEditIssue,
handleDeleteIssue, handleDeleteIssue,
openIssuesListModal, openIssuesListModal,
@ -113,6 +115,7 @@ export const SingleList: React.FC<Props> = ({
issue={issue} issue={issue}
properties={properties} properties={properties}
editIssue={() => handleEditIssue(issue)} editIssue={() => handleEditIssue(issue)}
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
removeIssue={() => { removeIssue={() => {
removeIssue && removeIssue(issue.bridge); removeIssue && removeIssue(issue.bridge);

8
apps/app/components/core/multi-level-select.tsx
View File

@ -83,10 +83,10 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
<> <>
{openChildFor?.id === option.id && ( {openChildFor?.id === option.id && (
<div <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" direction === "right"
? "rounded-tl-none shadow-md left-full translate-x-2" ? "left-full translate-x-2 rounded-tl-none shadow-md"
: "rounded-tr-none shadow-md right-full -translate-x-2" : "right-full -translate-x-2 rounded-tr-none shadow-md"
}`} }`}
> >
{option.children?.map((child) => ( {option.children?.map((child) => (
@ -118,7 +118,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
))} ))}
<div <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" 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 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" : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"

8
apps/app/components/core/sidebar/single-progress-stats.tsx
View File

@ -13,10 +13,10 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
completed, completed,
total, total,
}) => ( }) => (
<div className="flex items-center justify-between w-full py-3 text-xs border-b-[1px] border-gray-200"> <div className="flex w-full items-center justify-between border-b-[1px] py-3 text-xs">
<div className="flex items-center justify-start w-1/2 gap-2">{title}</div> <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
<div className="flex items-center justify-end w-1/2 gap-1 px-2"> <div className="flex w-1/2 items-center justify-end gap-1 px-2">
<div className="flex h-5 justify-center items-center gap-1 "> <div className="flex h-5 items-center justify-center gap-1 ">
<span className="h-4 w-4 "> <span className="h-4 w-4 ">
<ProgressBar value={completed} maxValue={total} /> <ProgressBar value={completed} maxValue={total} />
</span> </span>

20
apps/app/components/emoji-icon-picker/index.tsx
View File

@ -58,10 +58,10 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <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.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) => ( {tabOptions.map((tab) => (
<Tab <Tab
key={tab.key} key={tab.key}
@ -75,16 +75,16 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
</Tab> </Tab>
))} ))}
</Tab.List> </Tab.List>
<Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden"> <Tab.Panels className="flex-1 overflow-y-auto">
<Tab.Panel className="h-full w-full"> <Tab.Panel>
{recentEmojis.length > 0 && ( {recentEmojis.length > 0 && (
<div className="w-full py-2"> <div className="py-2">
<h3 className="mb-2 text-lg">Recent Emojis</h3> <h3 className="mb-2">Recent Emojis</h3>
<div className="grid grid-cols-9 gap-2"> <div className="grid grid-cols-9 gap-2">
{recentEmojis.map((emoji) => ( {recentEmojis.map((emoji) => (
<button <button
type="button" type="button"
className="select-none text-xl" className="select-none text-lg hover:bg-hover-gray"
key={emoji} key={emoji}
onClick={() => { onClick={() => {
onChange(emoji); onChange(emoji);
@ -97,13 +97,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
</div> </div>
</div> </div>
)} )}
<div className="py-3"> <div>
<h3 className="mb-2 text-lg">All Emojis</h3> <h3 className="mb-2">All Emojis</h3>
<div className="grid grid-cols-9 gap-2"> <div className="grid grid-cols-9 gap-2">
{emojis.map((emoji) => ( {emojis.map((emoji) => (
<button <button
type="button" type="button"
className="select-none text-xl" className="select-none text-lg hover:bg-hover-gray"
key={emoji} key={emoji}
onClick={() => { onClick={() => {
onChange(emoji); onChange(emoji);

3
apps/app/components/issues/form.tsx
View File

@ -20,7 +20,7 @@ import { CreateStateModal } from "components/states";
import { CreateUpdateCycleModal } from "components/cycles"; import { CreateUpdateCycleModal } from "components/cycles";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
// ui // ui
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui"; import { Button, CustomMenu, Input, Loader } from "components/ui";
// icons // icons
import { XMarkIcon } from "@heroicons/react/24/outline"; import { XMarkIcon } from "@heroicons/react/24/outline";
// helpers // helpers
@ -95,7 +95,6 @@ export const IssueForm: FC<IssueFormProps> = ({
setFocus, setFocus,
} = useForm<IIssue>({ } = useForm<IIssue>({
defaultValues, defaultValues,
mode: "all",
reValidateMode: "onChange", reValidateMode: "onChange",
}); });

4
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -105,7 +105,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
</Tooltip> </Tooltip>
)} )}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}> <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} {issue.name}
</span> </span>
</Tooltip> </Tooltip>
@ -135,7 +135,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {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"} {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

173
apps/app/components/issues/select/assignee.tsx
View File

@ -1,160 +1,75 @@
import { useState, FC, Fragment } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// headless ui
import { Transition, Combobox } from "@headlessui/react";
// services // services
import projectServices from "services/project.service"; import projectServices from "services/project.service";
// ui // ui
import { AssigneesList, Avatar } from "components/ui"; import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
// icons // icons
import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline"; import { UserGroupIcon } from "@heroicons/react/24/outline";
// fetch-keys
// fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
export type IssueAssigneeSelectProps = { export type Props = {
projectId: string; projectId: string;
value: string[]; value: string[];
onChange: (value: string[]) => void; onChange: (value: string[]) => void;
}; };
export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
projectId,
value = [],
onChange,
}) => {
// states
const [query, setQuery] = useState("");
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// fetching project members // fetching project members
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug && projectId workspaceSlug && projectId
? () => projectServices.projectMembers(workspaceSlug as string, projectId as string) ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
: null : null
); );
const options = people?.map((person) => ({ const options =
value: person.member.id, members?.map((member) => ({
display: value: member.member.id,
person.member.first_name && person.member.first_name !== "" query:
? person.member.first_name (member.member.first_name && member.member.first_name !== ""
: person.member.email, ? member.member.first_name
})); : member.member.email) +
" " +
const filteredOptions = member.member.last_name ?? "",
query === "" content: (
? options <div className="flex items-center gap-2">
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase())); <Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
})) ?? [];
return ( return (
<Combobox <CustomSearchSelect
as="div"
value={value} value={value}
onChange={(val) => onChange(val)} onChange={onChange}
className="relative flex-shrink-0" 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 multiple
> noChevron
{({ 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>
); );
}; };

8
apps/app/components/issues/select/date.tsx
View File

@ -13,20 +13,20 @@ type Props = {
}; };
export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => ( 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 }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
className={({ open }) => 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 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 " : "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 ? ( {value ? (
<> <>
<span className="text-gray-600">{value}</span> <span className="text-gray-600">{value}</span>

38
apps/app/components/issues/select/label.tsx
View File

@ -61,16 +61,16 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<> <>
<Combobox.Button <Combobox.Button
className={({ open }) => 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 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 " : "hover:bg-theme/5 "
}` }`
} }
> >
{value && value.length > 0 ? ( {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 <IssueLabelsList
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []} labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
length={3} 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 className=" text-gray-600">{value.length} Labels</span>
</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" /> <TagIcon className="h-3 w-3 text-gray-500" />
<span className=" text-gray-500">Label</span> <span className=" text-gray-500">Label</span>
</span> </span>
@ -97,10 +97,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-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" /> <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none" 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} value={label.id}
> >
{({ selected }) => ( {({ selected }) => (
<div className="flex w-full gap-2 justify-between rounded"> <div className="flex w-full justify-between gap-2 rounded">
<div className="flex justify-start items-center gap-2"> <div className="flex items-center justify-start gap-2">
<span <span
className="h-3 w-3 flex-shrink-0 rounded-full" className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ style={{
@ -141,7 +141,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
/> />
<span>{label.name}</span> <span>{label.name}</span>
</div> </div>
<div className="flex justify-center items-center p-1 rounded"> <div className="flex items-center justify-center rounded p-1">
<CheckIcon <CheckIcon
className={`h-3 w-3 ${ className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0" selected ? "opacity-100" : "opacity-0"
@ -154,8 +154,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
); );
} else } else
return ( return (
<div className="bg-gray-50 border-y border-gray-400"> <div className="border-y border-gray-400 bg-gray-50">
<div className="flex select-none font-medium items-center gap-2 truncate p-2 text-gray-900"> <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} <RectangleGroupIcon className="h-3 w-3" /> {label.name}
</div> </div>
<div> <div>
@ -170,8 +170,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
value={child.id} value={child.id}
> >
{({ selected }) => ( {({ selected }) => (
<div className="flex w-full gap-2 justify-between rounded"> <div className="flex w-full justify-between gap-2 rounded">
<div className="flex justify-start items-center gap-2"> <div className="flex items-center justify-start gap-2">
<span <span
className="h-3 w-3 flex-shrink-0 rounded-full" className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ style={{
@ -180,7 +180,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
/> />
<span>{child.name}</span> <span>{child.name}</span>
</div> </div>
<div className="flex justify-center items-center p-1 rounded"> <div className="flex items-center justify-center rounded p-1">
<CheckIcon <CheckIcon
className={`h-3 w-3 ${ className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0" 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 <button
type="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)} 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" /> <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
<span className="text-gray-600">Create New Label</span> <span className="text-gray-600">Create New Label</span>
</span> </span>

98
apps/app/components/issues/select/priority.tsx
View File

@ -1,12 +1,11 @@
import React from "react"; import React from "react";
// headless ui // ui
import { Listbox, Transition } from "@headlessui/react"; import { CustomSelect } from "components/ui";
// icons // icons
import { getPriorityIcon } from "components/icons/priority-icon"; import { getPriorityIcon } from "components/icons/priority-icon";
// constants // constants
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
import { CheckIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
value: string | null; value: string | null;
@ -14,71 +13,30 @@ type Props = {
}; };
export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => ( export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<Listbox as="div" className="relative" value={value} onChange={onChange}> <CustomSelect
{({ open }) => ( value={value}
<> label={
<Listbox.Button <div className="flex items-center justify-center gap-2 text-xs">
className={({ open }) => <span className="flex items-center">
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
${ </span>
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5" <span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
}` {value ?? "Priority"}
} </span>
> </div>
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5"> }
<span className="flex items-center"> onChange={onChange}
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)} noChevron
</span> >
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}> {PRIORITIES.map((priority) => (
{value ?? "Priority"} <CustomSelect.Option key={priority} value={priority}>
</span> <div className="flex w-full justify-between gap-2 rounded">
</span> <div className="flex items-center justify-start gap-2">
</Listbox.Button> <span>{getPriorityIcon(priority)}</span>
<span className="capitalize">{priority ?? "None"}</span>
<Transition </div>
show={open} </div>
as={React.Fragment} </CustomSelect.Option>
enter="transition ease-out duration-200" ))}
enterFrom="opacity-0 translate-y-1" </CustomSelect>
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>
); );

104
apps/app/components/issues/select/project.tsx
View File

@ -1,11 +1,9 @@
import { FC, Fragment } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// headless ui // ui
import { Listbox, Transition } from "@headlessui/react"; import { CustomSelect } from "components/ui";
// icons // icons
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline"; import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
// services // services
@ -19,7 +17,7 @@ export interface IssueProjectSelectProps {
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>; setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
} }
export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
value, value,
onChange, onChange,
setActiveProject, setActiveProject,
@ -34,71 +32,35 @@ export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
); );
return ( return (
<> <CustomSelect
<Listbox value={value}
value={value} label={
onChange={(val) => { <>
onChange(val); <ClipboardDocumentListIcon className="h-3 w-3" />
setActiveProject(val); <span className="block truncate">
}} {projects?.find((i) => i.id === value)?.identifier ?? "Project"}
> </span>
{({ open }) => ( </>
<> }
<div className="relative"> onChange={(val: string) => {
<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"> onChange(val);
<ClipboardDocumentListIcon className="h-3 w-3" /> setActiveProject(val);
<span className="block truncate"> }}
{projects?.find((i) => i.id === value)?.identifier ?? "Project"} noChevron
</span> >
</Listbox.Button> {projects ? (
projects.length > 0 ? (
<Transition projects.map((project) => (
show={open} <CustomSelect.Option key={project.id} value={project.id}>
as={Fragment} <>{project.name}</>
leave="transition ease-in duration-100" </CustomSelect.Option>
leaveFrom="opacity-100" ))
leaveTo="opacity-0" ) : (
> <p className="text-gray-400">No projects found!</p>
<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 ? ( <div className="px-2 text-sm text-gray-500">Loading...</div>
projects.length > 0 ? ( )}
projects.map((project) => ( </CustomSelect>
<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>
</>
); );
}; };

161
apps/app/components/issues/select/state.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -6,20 +6,15 @@ import useSWR from "swr";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// headless ui // ui
import { import { CustomSearchSelect } from "components/ui";
Squares2X2Icon,
PlusIcon,
MagnifyingGlassIcon,
CheckIcon,
} from "@heroicons/react/24/outline";
// icons // icons
import { Combobox, Transition } from "@headlessui/react"; import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
// fetch keys // fetch keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
import { getStateGroupIcon } from "components/icons";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -30,8 +25,6 @@ type Props = {
export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => { export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
// states // states
const [query, setQuery] = useState("");
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -45,123 +38,41 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
const options = states?.map((state) => ({ const options = states?.map((state) => ({
value: state.id, value: state.id,
display: state.name, query: state.name,
color: state.color, content: (
group: state.group, <div className="flex items-center gap-2">
{getStateGroupIcon(state.group, "16", "16", state.color)}
{state.name}
</div>
),
})); }));
const filteredOptions = const selectedOption = states?.find((s) => s.id === value);
query === ""
? options
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
const currentOption = options?.find((option) => option.value === value);
return ( return (
<Combobox <CustomSearchSelect
as="div"
value={value} value={value}
onChange={(val: any) => onChange(val)} onChange={onChange}
className="relative flex-shrink-0" options={options}
> label={
{({ open }: any) => ( <div className="flex items-center gap-2 text-gray-500">
<> <Squares2X2Icon className="h-4 w-4" />
<Combobox.Button {selectedOption &&
className={({ open }) => getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 {selectedOption?.name ?? "State"}
${ </div>
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5" }
}` footerOption={
} <button
> type="button"
{value && value !== "" ? ( 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"
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5"> onClick={() => setIsOpen(true)}
{currentOption && currentOption.group >
? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color) <PlusIcon className="h-4 w-4" aria-hidden="true" />
: ""} Create New State
<span className=" text-gray-600">{currentOption?.display}</span> </button>
</span> }
) : ( noChevron
<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>
); );
}; };

157
apps/app/components/issues/sidebar-select/assignee.tsx
View File

@ -1,41 +1,57 @@
import React from "react"; import React from "react";
import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import { UserGroupIcon } from "@heroicons/react/24/outline"; import projectService from "services/project.service";
import workspaceService from "services/workspace.service";
// hooks
// ui // ui
import { AssigneesList } from "components/ui/avatar"; import { CustomSearchSelect } from "components/ui";
import { Spinner } from "components/ui"; import { AssigneesList, Avatar } from "components/ui/avatar";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; value: string[];
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string[]) => void;
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => { export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug 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; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -45,93 +61,24 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
<p>Assignees</p> <p>Assignees</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="assignees_list" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {value && value.length > 0 && Array.isArray(value) ? (
as="div" <div className="flex items-center justify-center gap-2">
value={value} <AssigneesList userIds={value} length={3} showLength={false} />
multiple={true} <span className="text-gray-500">{value.length} Assignees</span>
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>
</div> </div>
) : (
"No assignees"
)} )}
</Listbox> </div>
)} }
options={options}
onChange={onChange}
multiple
disabled={isNotAllowed}
/> />
</div> </div>
</div> </div>

27
apps/app/components/issues/sidebar-select/cycle.tsx
View File

@ -65,26 +65,21 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip <span
position="top-right" className={`w-full max-w-[125px] truncate text-left sm:block ${
tooltipHeading="Cycle" issueCycle ? "" : "text-gray-900"
tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"} }`}
> >
<span {issueCycle ? issueCycle.cycle_detail.name : "None"}
className={` w-full max-w-[125px] truncate text-left sm:block ${ </span>
issueCycle ? "" : "text-gray-900"
}`}
>
{issueCycle ? issueCycle.cycle_detail.name : "None"}
</span>
</Tooltip>
} }
value={issueCycle?.cycle_detail.id} value={issueCycle?.cycle_detail.id}
onChange={(value: any) => { onChange={(value: any) => {
value === null !value
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "") ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange(cycles?.find((c) => c.id === value) as ICycle); : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
}} }}
width="w-full"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{cycles ? ( {cycles ? (
@ -97,11 +92,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <CustomSelect.Option value={null}>None</CustomSelect.Option>
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate">None</span>
</Tooltip>
</CustomSelect.Option>
</> </>
) : ( ) : (
<div className="text-center">No cycles found</div> <div className="text-center">No cycles found</div>

27
apps/app/components/issues/sidebar-select/module.tsx
View File

@ -64,26 +64,21 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip <span
position="top-right" className={`w-full max-w-[125px] truncate text-left sm:block ${
tooltipHeading="Module" issueModule ? "" : "text-gray-900"
tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"} }`}
> >
<span {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
className={`w-full max-w-[125px] truncate text-left sm:block ${ </span>
issueModule ? "" : "text-gray-900"
}`}
>
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
</span>
</Tooltip>
} }
value={issueModule?.module_detail?.id} value={issueModule?.module_detail?.id}
onChange={(value: any) => { onChange={(value: any) => {
value === null !value
? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "") ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
: handleModuleChange(modules?.find((m) => m.id === value) as IModule); : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
}} }}
width="w-full"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{modules ? ( {modules ? (
@ -96,11 +91,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <CustomSelect.Option value={null}>None</CustomSelect.Option>
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate"> None </span>
</Tooltip>
</CustomSelect.Option>
</> </>
) : ( ) : (
<div className="text-center">No modules found</div> <div className="text-center">No modules found</div>

65
apps/app/components/issues/sidebar-select/priority.tsx
View File

@ -1,24 +1,22 @@
import React from "react"; import React from "react";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "components/ui";
// icons // icons
import { ChartBarIcon } from "@heroicons/react/24/outline"; import { ChartBarIcon } from "@heroicons/react/24/outline";
import { getPriorityIcon } from "components/icons/priority-icon"; import { getPriorityIcon } from "components/icons/priority-icon";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // constants
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
type Props = { type Props = {
control: Control<IIssue, any>; value: string | null;
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string) => void;
userAuth: UserAuth; 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; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -28,38 +26,31 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges,
<p>Priority</p> <p>Priority</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSelect
control={control} label={
name="priority" <span
render={({ field: { value } }) => ( className={`flex items-center gap-2 text-left capitalize ${
<CustomSelect value ? "" : "text-gray-900"
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}
> >
{PRIORITIES.map((option) => ( {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
<CustomSelect.Option key={option} value={option} className="capitalize"> {value && value !== "" ? value : "None"}
<> </span>
{getPriorityIcon(option, "text-sm")} }
{option ?? "None"} value={value}
</> onChange={onChange}
</CustomSelect.Option> width="w-full"
))} disabled={isNotAllowed}
</CustomSelect> >
)} {PRIORITIES.map((option) => (
/> <CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
</div> </div>
</div> </div>
); );

98
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -4,28 +4,28 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// ui // ui
import { Spinner, CustomSelect } from "components/ui"; import { Spinner, CustomSelect } from "components/ui";
// icons // icons
import { Squares2X2Icon } from "@heroicons/react/24/outline"; import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // constants
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; value: string;
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string) => void;
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => { export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -37,6 +37,8 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
); );
const states = getStatesList(stateGroups ?? {}); const states = getStatesList(stateGroups ?? {});
const selectedState = states?.find((s) => s.id === value);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -46,60 +48,40 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
<p>State</p> <p>State</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSelect
control={control} label={
name="state" <div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
render={({ field: { value } }) => ( {getStateGroupIcon(
<CustomSelect selectedState?.group ?? "backlog",
label={ "16",
<span "16",
className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`} selectedState?.color ?? ""
>
{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> {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>
</div> </div>
); );

53
apps/app/components/issues/sidebar.tsx
View File

@ -77,17 +77,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
const { setToastAlert } = useToast(); 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( const { data: issues } = useSWR(
workspaceSlug && projectId workspaceSlug && projectId
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@ -228,7 +217,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
isOpen={deleteIssueModal} isOpen={deleteIssueModal}
data={issueDetail ?? null} 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"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium"> <h4 className="text-sm font-medium">
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id} {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@ -254,20 +243,38 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</div> </div>
<div className="divide-y-2 divide-gray-100"> <div className="divide-y-2 divide-gray-100">
<div className="py-1"> <div className="py-1">
<SidebarStateSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="state"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarStateSelect
value={value}
onChange={(val: string) => submitChanges({ state: val })}
userAuth={userAuth}
/>
)}
/> />
<SidebarAssigneeSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="assignees_list"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarAssigneeSelect
value={value}
onChange={(val: string[]) => submitChanges({ assignees_list: val })}
userAuth={userAuth}
/>
)}
/> />
<SidebarPrioritySelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="priority"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarPrioritySelect
value={value}
onChange={(val: string) => submitChanges({ priority: val })}
userAuth={userAuth}
/>
)}
/> />
</div> </div>
<div className="py-1"> <div className="py-1">
@ -453,8 +460,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
); );
} else } else
return ( return (
<div className="bg-gray-50 border-y border-gray-400"> <div className="border-y border-gray-400 bg-gray-50">
<div className="flex select-none font-medium items-center gap-2 truncate p-2 text-gray-900"> <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
<RectangleGroupIcon className="h-3 w-3" />{" "} <RectangleGroupIcon className="h-3 w-3" />{" "}
{label.name} {label.name}
</div> </div>

131
apps/app/components/issues/view-select/assignee.tsx
View File

@ -4,12 +4,12 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import projectService from "services/project.service"; import projectService from "services/project.service";
// ui // 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 // types
import { IIssue } from "types"; import { IIssue } from "types";
// fetch-keys // fetch-keys
@ -18,6 +18,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
tooltipPosition?: "left" | "right"; tooltipPosition?: "left" | "right";
isNotAllowed: boolean; isNotAllowed: boolean;
@ -26,6 +27,7 @@ type Props = {
export const ViewAssigneeSelect: React.FC<Props> = ({ export const ViewAssigneeSelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
tooltipPosition = "right", tooltipPosition = "right",
isNotAllowed, isNotAllowed,
@ -40,9 +42,27 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
: null : 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 ( return (
<Listbox <CustomSearchSelect
as="div"
value={issue.assignees} value={issue.assignees}
onChange={(data: any) => { onChange={(data: any) => {
const newData = issue.assignees ?? []; const newData = issue.assignees ?? [];
@ -50,69 +70,46 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1); if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
else newData.push(data); else newData.push(data);
partialUpdateIssue({ assignees_list: newData }); partialUpdateIssue({ assignees_list: data });
}} }}
className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`} options={options}
disabled={isNotAllowed} label={
> <Tooltip
{({ open }) => ( position={`top-${tooltipPosition}`}
<div> tooltipHeading="Assignees"
<Listbox.Button> tooltipContent={
<Tooltip issue.assignee_details.length > 0
position={`top-${tooltipPosition}`} ? issue.assignee_details
tooltipHeading="Assignees" .map((assignee) =>
tooltipContent={ assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
issue.assignee_details.length > 0 )
? issue.assignee_details .join(", ")
.map((assignee) => : "No Assignee"
assignee?.first_name !== "" ? assignee?.first_name : assignee?.email }
) >
.join(", ") <div
: "No Assignee" className={`flex ${
} isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
> } items-center gap-2 text-gray-500`}
<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"
> >
<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"> {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
{members?.map((member) => ( <div className="flex items-center justify-center gap-2">
<Listbox.Option <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
key={member.member.id} <span className="text-gray-500">{issue.assignees.length} Assignees</span>
className={({ active, selected }) => </div>
`flex items-center gap-x-1 cursor-pointer select-none p-2 whitespace-nowrap ${ ) : (
active ? "bg-indigo-50" : "" <div className="flex items-center justify-center gap-2">
} ${ <UserGroupIcon className="h-4 w-4 text-gray-500" />
selected || issue.assignees?.includes(member.member.id) <span className="text-gray-500">Assignee</span>
? "bg-indigo-50 font-medium" </div>
: "font-normal" )}
}` </div>
} </Tooltip>
value={member.member.id} }
> multiple
<Avatar user={member.member} /> noChevron
{member.member.first_name && member.member.first_name !== "" position={position}
? member.member.first_name disabled={isNotAllowed}
: member.member.email} />
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
); );
}; };

9
apps/app/components/issues/view-select/priority.tsx
View File

@ -12,6 +12,7 @@ import { PRIORITIES } from "constants/project";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
isNotAllowed: boolean; isNotAllowed: boolean;
}; };
@ -19,19 +20,18 @@ type Props = {
export const ViewPrioritySelect: React.FC<Props> = ({ export const ViewPrioritySelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
isNotAllowed, isNotAllowed,
}) => ( }) => (
<CustomSelect <CustomSelect
value={issue.state} value={issue.state}
onChange={(data: string) => { onChange={(data: string) => partialUpdateIssue({ priority: data })}
partialUpdateIssue({ priority: data });
}}
maxHeight="md" maxHeight="md"
customButton={ customButton={
<button <button
type="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" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
issue.priority === "urgent" issue.priority === "urgent"
@ -57,6 +57,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
} }
noChevron noChevron
disabled={isNotAllowed} disabled={isNotAllowed}
position={position}
selfPositioned={selfPositioned} selfPositioned={selfPositioned}
> >
{PRIORITIES?.map((priority) => ( {PRIORITIES?.map((priority) => (

79
apps/app/components/issues/view-select/state.tsx
View File

@ -5,7 +5,9 @@ import useSWR from "swr";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// ui // ui
import { CustomSelect, Tooltip } from "components/ui"; import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
@ -17,6 +19,7 @@ import { STATE_LIST } from "constants/fetch-keys";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
isNotAllowed: boolean; isNotAllowed: boolean;
}; };
@ -24,6 +27,7 @@ type Props = {
export const ViewStateSelect: React.FC<Props> = ({ export const ViewStateSelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
isNotAllowed, isNotAllowed,
}) => { }) => {
@ -38,50 +42,39 @@ export const ViewStateSelect: React.FC<Props> = ({
); );
const states = getStatesList(stateGroups ?? {}); 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 ( return (
<CustomSelect <CustomSearchSelect
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>
</>
}
value={issue.state} value={issue.state}
onChange={(data: string) => { onChange={(data: string) => partialUpdateIssue({ state: data })}
partialUpdateIssue({ state: data }); options={options}
}} label={
maxHeight="md" <Tooltip
noChevron 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} disabled={isNotAllowed}
selfPositioned={selfPositioned} noChevron
> />
{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>
); );
}; };

4
apps/app/components/labels/labels-list-modal.tsx
View File

@ -92,7 +92,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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> <Combobox>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <MagnifyingGlassIcon
@ -144,7 +144,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
}} }}
> >
<span <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={{ style={{
backgroundColor: label.color, backgroundColor: label.color,
}} }}

52
apps/app/components/labels/single-label-group.tsx
View File

@ -59,32 +59,34 @@ export const SingleLabelGroup: React.FC<Props> = ({
}; };
return ( 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 }) => ( {({ open }) => (
<> <>
<div className="flex items-center justify-between gap-2 cursor-pointer"> <div className="flex cursor-pointer items-center justify-between gap-2">
<Disclosure.Button> <div className="flex items-center 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> <span>
<ChevronDownIcon <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>
<span> </Disclosure.Button>
<RectangleGroupIcon className="h-4 w-4" /> </div>
</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>
</div> </div>
<Transition <Transition
show={open} show={open}
@ -96,22 +98,22 @@ export const SingleLabelGroup: React.FC<Props> = ({
leaveTo="transform opacity-0" leaveTo="transform opacity-0"
> >
<Disclosure.Panel> <Disclosure.Panel>
<div className="mt-2 ml-4"> <div className="mt-3 ml-6 space-y-3">
{labelChildren.map((child) => ( {labelChildren.map((child) => (
<div <div
key={child.id} 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 <span
className="h-2 w-2 flex-shrink-0 rounded-full" className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: child.color, backgroundColor: child.color,
}} }}
/> />
{child.name} {child.name}
</h5> </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 ellipsis>
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}> <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
Remove from group Remove from group

58
apps/app/components/modules/select/select-status.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
// react hook form // react hook form
import { Controller, FieldError, Control } from "react-hook-form"; import { Controller, FieldError, Control } from "react-hook-form";
// ui // ui
import { CustomListbox } from "components/ui"; import { CustomSelect } from "components/ui";
// icons // icons
import { Squares2X2Icon } from "@heroicons/react/24/outline"; import { Squares2X2Icon } from "@heroicons/react/24/outline";
// types // types
@ -22,26 +22,42 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
rules={{ required: true }} rules={{ required: true }}
name="status" name="status"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<div> <CustomSelect
<CustomListbox value={value}
className={`${ label={
error <div
? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500" className={`flex items-center justify-center gap-2 text-xs ${
: "" error ? "text-red-500" : ""
}`} }`}
title="Status" >
options={MODULE_STATUS.map((status) => ({ <Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
value: status.value, {value && (
display: status.label, <span
color: status.color, className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
}))} style={{
value={value} backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
optionsFontsize="sm" }}
onChange={onChange} />
icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />} )}
/> {MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>} </div>
</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>
)} )}
/> />
); );

190
apps/app/components/modules/sidebar-select/select-lead.tsx
View File

@ -5,35 +5,53 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import workspaceService from "services/workspace.service"; import projectService from "services/project.service";
// ui
import { Avatar, CustomSearchSelect } from "components/ui";
// icons // icons
import { UserIcon } from "@heroicons/react/24/outline"; import { UserIcon } from "@heroicons/react/24/outline";
import User from "public/user.png"; import User from "public/user.png";
// types
import { IModule, IUserLite } from "types";
// fetch-keys // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<Partial<IModule>, any>; value: string | null | undefined;
submitChanges: (formData: Partial<IModule>) => void; onChange: (val: string) => void;
lead: IUserLite | null;
}; };
export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => { export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug 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 ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/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> <p>Lead</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="lead" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {selectedOption ? (
as="div" <Avatar user={selectedOption} />
value={value} ) : (
onChange={(value: any) => { <div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
submitChanges({ lead: value }); <Image
}} src={User}
className="flex-shrink-0" height="100%"
> width="100%"
{({ open }) => ( className="rounded-full"
<div className="relative"> alt="No user"
<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>
</div> </div>
)} )}
</Listbox> {selectedOption
)} ? selectedOption?.first_name && selectedOption.first_name !== ""
? selectedOption?.first_name
: selectedOption?.email
: "N/A"}
</div>
}
options={options}
onChange={onChange}
/> />
</div> </div>
</div> </div>

153
apps/app/components/modules/sidebar-select/select-members.tsx
View File

@ -1,37 +1,53 @@
import React from "react"; import React from "react";
import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { Control, Controller } from "react-hook-form";
// services // services
import { Listbox, Transition } from "@headlessui/react"; import projectService from "services/project.service";
import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui
// ui // ui
import { AssigneesList } from "components/ui"; import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
// types // icons
import { IModule } from "types"; import { UserGroupIcon } from "@heroicons/react/24/outline";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<Partial<IModule>, any>; value: string[] | undefined;
submitChanges: (formData: Partial<IModule>) => void; onChange: (val: string[]) => void;
}; };
export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => { export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug 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 ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/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> <p>Members</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="members_list" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {value && value.length > 0 && Array.isArray(value) ? (
as="div" <div className="flex items-center justify-center gap-2">
value={value} <AssigneesList userIds={value} length={3} showLength={false} />
multiple={true} <span className="text-gray-500">{value.length} Assignees</span>
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>
</div> </div>
) : (
"No members"
)} )}
</Listbox> </div>
)} }
options={options}
onChange={onChange}
multiple
/> />
</div> </div>
</div> </div>

42
apps/app/components/modules/sidebar.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
@ -19,7 +18,6 @@ import {
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
// services // services
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// hooks // hooks
@ -184,7 +182,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
> >
{module ? ( {module ? (
<> <>
<div className="flex gap-1 text-sm my-2"> <div className="my-2 flex gap-1 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<Controller <Controller
control={control} control={control}
@ -193,7 +191,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<CustomSelect <CustomSelect
label={ label={
<span <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" /> <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
{watch("status")} {watch("status")}
@ -213,14 +211,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
)} )}
/> />
</div> </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"> <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="flex justify-center items-center relative rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
className={`group flex items-center ${open ? "bg-gray-100" : ""}`} 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> <span>
{renderShortNumericDateFormat(`${module?.start_date}`) {renderShortNumericDateFormat(`${module?.start_date}`)
? renderShortNumericDateFormat(`${module?.start_date}`) ? renderShortNumericDateFormat(`${module?.start_date}`)
@ -256,7 +254,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</> </>
)} )}
</Popover> </Popover>
<Popover className="flex justify-center items-center relative rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
@ -338,12 +336,30 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
<div className="divide-y-2 divide-gray-100 text-xs"> <div className="divide-y-2 divide-gray-100 text-xs">
<div className="py-1"> <div className="py-1">
<SidebarLeadSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="lead"
lead={module.lead_detail} 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 flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartPieIcon className="h-4 w-4 flex-shrink-0" /> <ChartPieIcon className="h-4 w-4 flex-shrink-0" />
@ -363,7 +379,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </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 ? ( {isStartValid && isEndValid ? (
<ProgressChart <ProgressChart
issues={issues} issues={issues}

3
apps/app/components/project/create-project-modal.tsx
View File

@ -296,10 +296,11 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES] ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
: "Select network" : "Select network"
} }
width="w-full"
input input
> >
{Object.keys(NETWORK_CHOICES).map((key) => ( {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]} {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
</CustomSelect.Option> </CustomSelect.Option>
))} ))}

105
apps/app/components/project/send-project-invitation-modal.tsx
View File

@ -6,9 +6,8 @@ import useSWR, { mutate } from "swr";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { Dialog, Transition, Listbox } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// ui // ui
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { Button, CustomSelect, TextArea } from "components/ui"; import { Button, CustomSelect, TextArea } from "components/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -17,7 +16,7 @@ import projectService from "services/project.service";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// types // types
import { IProjectMemberInvitation } from "types"; import { IProjectMemberInvitation } from "types";
// fetch - keys // fetch-keys
import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
// constants // constants
import { ROLE } from "constants/workspace"; 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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <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" name="user_id"
rules={{ required: "Please select a member" }} rules={{ required: "Please select a member" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Listbox <CustomSelect
value={value} value={value}
onChange={(data: any) => { label={
onChange(data.id); <div
setValue("member_id", data.id); className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
setValue("email", data.email); >
}} {value && value !== ""
> ? people?.find((p) => p.member.id === value)?.member.email
{({ open }) => ( : "Select email"}
<> </div>
<Listbox.Label className="mb-2 text-gray-500"> }
Email onChange={(val: string) => {
</Listbox.Label> onChange(val);
<div className="relative"> const person = uninvitedPeople?.find((p) => p.member.id === val);
<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>
<Transition setValue("member_id", val);
show={open} setValue("email", person?.member.email ?? "");
as={React.Fragment} }}
leave="transition ease-in duration-100" input
leaveFrom="opacity-100" width="w-full"
leaveTo="opacity-0" >
> {uninvitedPeople?.map((person) => (
<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"> <CustomSelect.Option
{uninvitedPeople?.length === 0 ? ( key={person.member.id}
<div className="relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-600"> value={person.member.id}
Invite to workspace to add members >
</div> {person.member.email}
) : ( </CustomSelect.Option>
uninvitedPeople?.map((person) => ( ))}
<Listbox.Option </CustomSelect>
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>
)} )}
/> />
</div> </div>
@ -236,6 +194,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
</span> </span>
} }
input input
width="w-full"
> >
{Object.entries(ROLE).map(([key, label]) => ( {Object.entries(ROLE).map(([key, label]) => (
<CustomSelect.Option key={key} value={key}> <CustomSelect.Option key={key} value={key}>

206
apps/app/components/project/sidebar-list.tsx
View File

@ -17,9 +17,9 @@ import { CreateProjectModal } from "components/project";
// ui // ui
import { CustomMenu, Loader } from "components/ui"; import { CustomMenu, Loader } from "components/ui";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// fetch-keys // 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) => [ const navigation = (workspaceSlug: string, projectId: string) => [
{ {
@ -54,11 +54,17 @@ export const ProjectSidebarList: FC = () => {
const { collapsed: sidebarCollapse } = useTheme(); const { collapsed: sidebarCollapse } = useTheme();
// toast handler // toast handler
const { setToastAlert } = useToast(); 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( const { data: projects } = useSWR(
workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null, workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
() => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null) () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
); );
const normalProjects = projects?.filter((p) => !p.is_favourite) ?? [];
const handleCopyText = (projectId: string) => { const handleCopyText = (projectId: string) => {
const originURL = const originURL =
@ -75,22 +81,24 @@ export const ProjectSidebarList: FC = () => {
return ( return (
<> <>
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} /> <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"> <div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>} {favoriteProjects && favoriteProjects.length > 0 && (
{projects ? ( <div className="mt-3 flex flex-col space-y-2 px-6">
<> {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
{projects.length > 0 ? ( {favoriteProjects.map((favoriteProject) => {
projects.map((project) => ( const project = favoriteProject.project_detail;
return (
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}> <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
{({ open }) => ( {({ open }) => (
<> <>
<Disclosure.Button <Disclosure.Button
as="div" 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" sidebarCollapse ? "justify-center" : "justify-between"
}`} }`}
> >
<div className="flex gap-x-2 items-center"> <div className="flex items-center gap-x-2">
{project.icon ? ( {project.icon ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase"> <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{String.fromCodePoint(parseInt(project.icon))} {String.fromCodePoint(parseInt(project.icon))}
@ -102,13 +110,13 @@ export const ProjectSidebarList: FC = () => {
)} )}
{!sidebarCollapse && ( {!sidebarCollapse && (
<p className="w-[125px] text-ellipsis text-[0.875rem] overflow-hidden"> <p className="overflow-hidden text-ellipsis text-[0.875rem]">
{project?.name} {truncateText(project?.name, 20)}
</p> </p>
)} )}
</div> </div>
<div className="flex gap-x-1 items-center"> <div className="flex items-center gap-x-1">
{!sidebarCollapse && ( {!sidebarCollapse && (
<CustomMenu ellipsis> <CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}> <CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
@ -154,7 +162,7 @@ export const ProjectSidebarList: FC = () => {
> >
<div className="grid place-items-center"> <div className="grid place-items-center">
<item.icon <item.icon
className={`w-5 h-5 flex-shrink-0 ${ className={`h-5 w-5 flex-shrink-0 ${
item.href === router.asPath item.href === router.asPath
? "text-gray-900" ? "text-gray-900"
: "text-gray-500 group-hover:text-gray-900" : "text-gray-500 group-hover:text-gray-900"
@ -172,41 +180,143 @@ export const ProjectSidebarList: FC = () => {
</> </>
)} )}
</Disclosure> </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 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> </div>
</> </>
); );

22
apps/app/components/project/single-project-card.tsx
View File

@ -20,9 +20,9 @@ import { StarIcon } from "@heroicons/react/20/solid";
import { renderShortNumericDateFormat } from "helpers/date-time.helper"; import { renderShortNumericDateFormat } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types // types
import type { IProject } from "types"; import type { IFavoriteProject, IProject } from "types";
// fetch-keys // fetch-keys
import { PROJECTS_LIST } from "constants/fetch-keys"; import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
export type ProjectCardProps = { export type ProjectCardProps = {
project: IProject; project: IProject;
@ -63,6 +63,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
})), })),
false false
); );
mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
setToastAlert({ setToastAlert({
type: "success", type: "success",
@ -94,6 +95,11 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
})), })),
false false
); );
mutate<IFavoriteProject[]>(
FAVORITE_PROJECTS_LIST(workspaceSlug as string),
(prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
false
);
setToastAlert({ setToastAlert({
type: "success", type: "success",
@ -126,7 +132,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
return ( return (
<> <>
{members ? ( {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`}> <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a> <a>
<div className="relative h-32 w-full rounded-t-[10px]"> <div className="relative h-32 w-full rounded-t-[10px]">
@ -149,16 +155,16 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
e.stopPropagation(); e.stopPropagation();
setToJoinProject(project.id); 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" /> <PlusIcon className="h-3 w-3" />
<span>Select to Join</span> <span>Select to Join</span>
</button> </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 && ( {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" /> <StarIcon className="h-3 w-3" />
</span> </span>
)} )}
@ -166,7 +172,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
</div> </div>
</a> </a>
</Link> </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`}> <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a> <a>
<div className="flex items-center gap-1"> <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> <p className="mt-3.5 mb-7">{truncateText(project.description ?? "", 100)}</p>
</a> </a>
</Link> </Link>
<div className="flex justify-between items-end h-full"> <div className="flex h-full items-end justify-between">
<Tooltip <Tooltip
tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`} tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
position="bottom" position="bottom"

193
apps/app/components/sidebar/projects-list.tsx
View File

@ -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;

74
apps/app/components/sidebar/workspace-options.tsx
View File

@ -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;

34
apps/app/components/states/create-state-modal.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -13,7 +13,7 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// ui // ui
import { Button, Input, Select, TextArea } from "components/ui"; import { Button, CustomSelect, Input, TextArea } from "components/ui";
// icons // icons
import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types // types
@ -129,19 +129,25 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
/> />
</div> </div>
<div> <div>
<Select <Controller
id="group" control={control}
label="Group" rules={{ required: true }}
name="group" name="group"
error={errors.group} render={({ field: { value, onChange } }) => (
register={register} <CustomSelect
validations={{ value={value}
required: "Group is required", label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
}} onChange={onChange}
options={Object.keys(GROUP_CHOICES).map((key) => ({ width="w-full"
value: key, input
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES], >
}))} {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>
<div> <div>

2
apps/app/components/ui/avatar.tsx
View File

@ -34,7 +34,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
/> />
</div> </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 && user.first_name !== ""
? user.first_name.charAt(0) ? user.first_name.charAt(0)
: user?.email?.charAt(0)} : user?.email?.charAt(0)}

99
apps/app/components/ui/context-menu.tsx Normal file
View 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 };

133
apps/app/components/ui/custom-listbox.tsx
View File

@ -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>
);

104
apps/app/components/ui/custom-menu.tsx
View File

@ -40,40 +40,48 @@ const CustomMenu = ({
customButton, customButton,
}: Props) => ( }: Props) => (
<Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}> <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
<div> {customButton ? (
{ellipsis || verticalEllipsis ? ( <Menu.Button as="div">{customButton}</Menu.Button>
<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" : ""}`} /> <div>
</Menu.Button> {ellipsis || verticalEllipsis ? (
) : ( <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 ${ className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"
textAlignment === "right" >
? "text-right" <EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
: textAlignment === "center" </Menu.Button>
? "text-center" ) : (
: "text-left" <Menu.Button
} ${ type="button"
noBorder className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
? "rounded" textAlignment === "right"
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" ? "text-right"
} ${ : textAlignment === "center"
width === "sm" ? "text-center"
? "w-10" : "text-left"
: width === "md" } ${
? "w-20" noBorder
: width === "lg" ? "rounded"
? "w-32" : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
: width === "xl" } ${
? "w-48" width === "sm"
: "w-full" ? "w-10"
}`} : width === "md"
> ? "w-20"
{label} : width === "lg"
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />} ? "w-32"
</Menu.Button> : width === "xl"
)} ? "w-48"
</div> : "w-full"
}`}
>
{label}
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
</Menu.Button>
)}
</div>
)}
<Transition <Transition
as={React.Fragment} as={React.Fragment}
@ -85,7 +93,7 @@ const CustomMenu = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <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" optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
} ${ } ${
width === "sm" width === "sm"
@ -112,25 +120,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
onClick, onClick,
className = "", className = "",
}) => ( }) => (
<Menu.Item> <Menu.Item
{({ active, close }) => 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" ? ( renderAs === "a" ? (
<Link href={href ?? ""}> <Link href={href ?? ""}>
<a <a onClick={close}>{children}</a>
className={`${className} block p-2 text-gray-700 hover:bg-indigo-50 hover:text-gray-900`}
onClick={close}
>
{children}
</a>
</Link> </Link>
) : ( ) : (
<button <button type="button" onClick={onClick}>
type="button"
onClick={onClick}
className={`block w-full p-2 text-left ${
active ? "bg-indigo-50 text-gray-900" : "text-gray-700"
} ${className}`}
>
{children} {children}
</button> </button>
) )

243
apps/app/components/ui/custom-search-select.tsx Normal file
View 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>
)}
</>
);
};

24
apps/app/components/ui/custom-select.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
// icons // icons
import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { CheckIcon } from "@heroicons/react/24/outline";
type CustomSelectProps = { type CustomSelectProps = {
value: any; value: any;
@ -11,6 +12,7 @@ type CustomSelectProps = {
label?: string | JSX.Element; label?: string | JSX.Element;
textAlignment?: "left" | "center" | "right"; textAlignment?: "left" | "center" | "right";
maxHeight?: "sm" | "rg" | "md" | "lg" | "none"; maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
position?: "right" | "left";
width?: "auto" | string; width?: "auto" | string;
input?: boolean; input?: boolean;
noChevron?: boolean; noChevron?: boolean;
@ -27,6 +29,7 @@ const CustomSelect = ({
value, value,
onChange, onChange,
maxHeight = "none", maxHeight = "none",
position = "left",
width = "auto", width = "auto",
input = false, input = false,
noChevron = false, noChevron = false,
@ -50,7 +53,7 @@ const CustomSelect = ({
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" 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 ${ } 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" textAlignment === "right"
? "text-right" ? "text-right"
@ -75,8 +78,10 @@ const CustomSelect = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options <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 ${ className={`${optionsClassName} absolute ${
width === "auto" ? "min-w-full whitespace-nowrap" : width 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" : ""} ${ } ${input ? "max-h-48" : ""} ${
maxHeight === "lg" maxHeight === "lg"
? "max-h-60" ? "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> </Listbox.Options>
</Transition> </Transition>
</Listbox> </Listbox>
@ -105,12 +110,17 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
<Listbox.Option <Listbox.Option
value={value} value={value}
className={({ active, selected }) => className={({ active, selected }) =>
`${className} ${active || selected ? "bg-indigo-50" : ""} ${ `${className} ${active || selected ? "bg-hover-gray" : ""} ${
selected ? "font-medium" : "" 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> </Listbox.Option>
); );

8
apps/app/components/ui/datepicker.tsx
View File

@ -36,15 +36,15 @@ export const CustomDatePicker: React.FC<Props> = ({
}} }}
className={`${className} ${ className={`${className} ${
renderAs === "input" 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" : renderAs === "button"
? `px-2 py-1 text-xs shadow-sm ${ ? `px-3 py-1.5 text-xs shadow-sm ${
disabled ? "" : "hover:bg-gray-100" 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" : ""} ${ } ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer" 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" dateFormat="dd-MM-yyyy"
isClearable={isClearable} isClearable={isClearable}
disabled={disabled} disabled={disabled}

2
apps/app/components/ui/empty-space.tsx
View File

@ -24,7 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
<h2 className="text-lg font-medium text-gray-900">{title}</h2> <h2 className="text-lg font-medium text-gray-900">{title}</h2>
<div className="mt-1 text-sm text-gray-500">{description}</div> <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} {children}
</ul> </ul>
{link ? ( {link ? (

4
apps/app/components/ui/index.ts
View File

@ -2,8 +2,9 @@ export * from "./input";
export * from "./text-area"; export * from "./text-area";
export * from "./avatar"; export * from "./avatar";
export * from "./button"; export * from "./button";
export * from "./custom-listbox"; export * from "./context-menu";
export * from "./custom-menu"; export * from "./custom-menu";
export * from "./custom-search-select";
export * from "./custom-select"; export * from "./custom-select";
export * from "./datepicker"; export * from "./datepicker";
export * from "./empty-space"; export * from "./empty-space";
@ -12,7 +13,6 @@ export * from "./loader";
export * from "./multi-input"; export * from "./multi-input";
export * from "./outline-button"; export * from "./outline-button";
export * from "./progress-bar"; export * from "./progress-bar";
export * from "./select";
export * from "./spinner"; export * from "./spinner";
export * from "./tooltip"; export * from "./tooltip";
export * from "./labels-list"; export * from "./labels-list";

2
apps/app/components/ui/labels-list.tsx
View File

@ -20,7 +20,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
`} `}
style={{ style={{
backgroundColor: color, backgroundColor: color && color !== "" ? color : "#000000",
}} }}
/> />
</div> </div>

60
apps/app/components/ui/select.tsx
View File

@ -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>}
</>
);

4
apps/app/components/workspace/help-section.tsx
View File

@ -56,7 +56,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
return ( return (
<div <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" : "" sidebarCollapse ? "flex-col-reverse" : ""
}`} }`}
> >
@ -132,7 +132,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
<Link href={href} key={name}> <Link href={href} key={name}>
<a <a
target="_blank" 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" /> <Icon className="h-5 w-5 text-gray-500" />
<span className="text-sm">{name}</span> <span className="text-sm">{name}</span>

58
apps/app/components/workspace/send-workspace-invitation-modal.tsx
View File

@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import { mutate } from "swr"; import { mutate } from "swr";
import { useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// headless // headless
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// services // services
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// ui // ui
import { Button, Input, Select } from "components/ui"; import { Button, CustomSelect, Input } from "components/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// types // types
@ -37,6 +37,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { const {
control,
register, register,
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
handleSubmit, handleSubmit,
@ -44,7 +45,6 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
} = useForm<IWorkspaceMemberInvitation>({ } = useForm<IWorkspaceMemberInvitation>({
defaultValues, defaultValues,
reValidateMode: "onChange", reValidateMode: "onChange",
mode: "all",
}); });
const handleClose = () => { const handleClose = () => {
@ -98,13 +98,13 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <div>
Members <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
</Dialog.Title> Members
<div className="mt-2"> </Dialog.Title>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
Invite members to work on your workspace. Invite members to work on your workspace.
</p> </p>
@ -129,34 +129,30 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
/> />
</div> </div>
<div> <div>
<Select <Controller
id="role" control={control}
label="Role" rules={{ required: true }}
name="role" name="role"
error={errors.role} render={({ field: { value, onChange } }) => (
register={register} <CustomSelect
validations={{ value={value}
required: "Role is required", label={ROLE[value]}
}} onChange={onChange}
options={Object.entries(ROLE).map(([key, value]) => ({ width="w-full"
value: key, input
label: value, >
}))} {Object.entries(ROLE).map(([key, value]) => (
<CustomSelect.Option key={key} value={key}>
{value}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/> />
</div> </div>
{/* <div>
<TextArea
id="message"
name="message"
label="Message"
placeholder="Enter message"
error={errors.message}
register={register}
/>
</div> */}
</div> </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}> <Button theme="secondary" onClick={handleClose}>
Cancel Cancel
</Button> </Button>

4
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -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"> <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 !== "" ? ( {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
<Image <Image
@ -116,7 +116,7 @@ export const WorkspaceSidebarDropdown = () => {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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 className="divide-y px-1 py-2">
<div> <div>
<Menu.Item as="div" className="px-2 pb-2 text-xs"> <Menu.Item as="div" className="px-2 pb-2 text-xs">

2
apps/app/components/workspace/sidebar-menu.tsx
View File

@ -53,7 +53,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
<link.icon <link.icon
className={`${ className={`${
link.href === router.asPath ? "text-gray-900" : "text-gray-600" 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" aria-hidden="true"
/> />
{!sidebarCollapse && link.name} {!sidebarCollapse && link.name}

5
apps/app/constants/fetch-keys.ts
View File

@ -15,6 +15,8 @@ export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS"; export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`; 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_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${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_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`; export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${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_DRAFT_LIST = (projectId: string) => `CYCLE_DRAFT_LIST_${projectId}`;
export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`; export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;

2
apps/app/layouts/app-layout/app-header.tsx
View File

@ -11,7 +11,7 @@ type Props = {
}; };
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => ( 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="flex items-center gap-2">
<div className="block md:hidden"> <div className="block md:hidden">
<Button <Button

2
apps/app/layouts/app-layout/app-sidebar.tsx
View File

@ -24,7 +24,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
toggleSidebar ? "left-0" : "-left-60 md:left-0" toggleSidebar ? "left-0" : "-left-60 md:left-0"
} flex h-full flex-col bg-white duration-300 md:relative`} } 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="flex h-full flex-1 flex-col pt-2">
<div className="px-2"> <div className="px-2">
<WorkspaceSidebarDropdown /> <WorkspaceSidebarDropdown />

2
apps/app/layouts/app-layout/index.tsx
View File

@ -135,7 +135,7 @@ const AppLayout: FC<AppLayoutProps> = ({
</div> </div>
) : isMember ? ( ) : isMember ? (
<div <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" noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
} ${ } ${
bg === "primary" bg === "primary"

10
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
View File

@ -135,6 +135,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
people?.find((person) => person.member.id === field.value)?.member people?.find((person) => person.member.id === field.value)?.member
.first_name ?? "Select Lead" .first_name ?? "Select Lead"
} }
width="w-full"
input input
> >
{people?.map((person) => ( {people?.map((person) => (
@ -143,7 +144,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
value={person.member.id} value={person.member.id}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<> <div className="flex items-center gap-2">
{person.member.avatar && person.member.avatar !== "" ? ( {person.member.avatar && person.member.avatar !== "" ? (
<div className="relative h-4 w-4"> <div className="relative h-4 w-4">
<Image <Image
@ -164,7 +165,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
{person.member.first_name !== "" {person.member.first_name !== ""
? person.member.first_name ? person.member.first_name
: person.member.email} : person.member.email}
</> </div>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
</CustomSelect> </CustomSelect>
@ -194,6 +195,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
people?.find((p) => p.member.id === field.value)?.member.first_name ?? people?.find((p) => p.member.id === field.value)?.member.first_name ??
"Select Default Assignee" "Select Default Assignee"
} }
width="w-full"
input input
> >
{people?.map((person) => ( {people?.map((person) => (
@ -202,7 +204,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
value={person.member.id} value={person.member.id}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<> <div className="flex items-center gap-2">
{person.member.avatar && person.member.avatar !== "" ? ( {person.member.avatar && person.member.avatar !== "" ? (
<div className="relative h-4 w-4"> <div className="relative h-4 w-4">
<Image <Image
@ -223,7 +225,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
{person.member.first_name !== "" {person.member.first_name !== ""
? person.member.first_name ? person.member.first_name
: person.member.email} : person.member.email}
</> </div>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
</CustomSelect> </CustomSelect>

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -93,7 +93,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
<section className="space-y-8"> <section className="space-y-8">
<h3 className="text-2xl font-semibold">Features</h3> <h3 className="text-2xl font-semibold">Features</h3>
<div className="space-y-5"> <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"> <div className="flex items-start gap-3">
<ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" /> <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />
<div> <div>
@ -122,7 +122,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
/> />
</button> </button>
</div> </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"> <div className="flex items-start gap-3">
<GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" /> <GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
<div> <div>

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View File

@ -272,7 +272,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
input input
> >
{Object.keys(NETWORK_CHOICES).map((key) => ( {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]} {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
</CustomSelect.Option> </CustomSelect.Option>
))} ))}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View File

@ -70,7 +70,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
</div> </div>
</section> </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 <EmptySpace
title="You haven't added any integration yet." title="You haven't added any integration yet."
description="Add GitHub and other integrations to sync your project issues." description="Add GitHub and other integrations to sync your project issues."
@ -87,7 +87,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
</div> </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" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View File

@ -181,7 +181,7 @@ const MembersSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </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.length > 0
? members.map((member) => ( ? members.map((member) => (
<div key={member.id} className="flex items-center justify-between py-6"> <div key={member.id} className="flex items-center justify-between py-6">

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -99,7 +99,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
Add Add
</button> </button>
</div> </div>
<div className="divide-y rounded-[10px] border border-gray-200"> <div className="divide-y rounded-[10px] border">
{key === activeGroup && ( {key === activeGroup && (
<CreateUpdateStateInline <CreateUpdateStateInline
onClose={() => { onClose={() => {

5
apps/app/pages/invitations.tsx
View File

@ -99,10 +99,7 @@ const OnBoard: NextPage = () => {
<p className="mt-1 text-sm text-gray-500"> <p className="mt-1 text-sm text-gray-500">
Select invites that you want to accept. Select invites that you want to accept.
</p> </p>
<ul <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
role="list"
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
>
{invitations.map((invitation) => ( {invitations.map((invitation) => (
<SingleInvitation <SingleInvitation
key={invitation.id} key={invitation.id}

9
apps/app/services/project.service.ts
View File

@ -3,6 +3,7 @@ import APIService from "services/api.service";
// types // types
import type { import type {
GithubRepositoriesResponse, GithubRepositoriesResponse,
IFavoriteProject,
IProject, IProject,
IProjectMember, IProjectMember,
IProjectMemberInvitation, 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( async addProjectToFavourites(
workspaceSlug: string, workspaceSlug: string,
data: { data: {

12
apps/app/types/projects.d.ts vendored
View File

@ -21,6 +21,18 @@ export interface IProject {
workspace: IWorkspace | string; 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 = { type ProjectViewTheme = {
collapsed: boolean; collapsed: boolean;
issueView: "list" | "kanban" | null; issueView: "list" | "kanban" | null;