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

style: dropdowns, feat: favorite projects in sidebar

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-04 17:47:03 +05:30
parent 067859b4bd
commit 4d598fd6b6
44 changed files with 574 additions and 950 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,49 +37,45 @@ 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)} addIssueToState={() => addIssueToState(singleGroup, stateId)}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={openIssuesListModal ?? null} openIssuesListModal={openIssuesListModal ?? null}
orderBy={orderBy} orderBy={orderBy}
handleTrashBox={handleTrashBox} handleTrashBox={handleTrashBox}
removeIssue={removeIssue} removeIssue={removeIssue}
userAuth={userAuth} userAuth={userAuth}
/> />
); );
})} })}
</div>
</div>
</div> </div>
</div> </div>
) : ( ) : (

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

@ -91,7 +91,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 +102,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>
@ -153,7 +153,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 +164,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

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",
}); });

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

@ -66,21 +66,21 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
<> <>
<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 && Array.isArray(value) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<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">
<AssigneesList userIds={value} length={3} showLength={false} /> <AssigneesList userIds={value} length={3} showLength={false} />
<span className=" text-gray-500">{value.length} Assignees</span> <span className=" text-gray-500">{value.length} Assignees</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">
<UserGroupIcon className="h-4 w-4 text-gray-500 " /> <UserGroupIcon className="h-4 w-4 text-gray-500 " />
<span className=" text-gray-500">Assignee</span> <span className=" text-gray-500">Assignee</span>
</span> </span>
@ -98,10 +98,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
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"
@ -118,21 +118,21 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
key={option.value} key={option.value}
className={({ active }) => className={({ active }) =>
`${ `${
active ? "bg-gray-200" : "" active ? "bg-hover-gray" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500` } 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} value={option.value}
> >
{({ selected, active }) => ( {({ selected, active }) => (
<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-1"> <div className="flex items-center justify-start gap-1">
<Avatar <Avatar
user={people?.find((p) => p.member.id === option.value)?.member} user={people?.find((p) => p.member.id === option.value)?.member}
/> />
<span>{option.display}</span> <span>{option.display}</span>
</div> </div>
<div <div
className={`flex justify-center items-center p-1 rounded border border-gray-500 border-opacity-0 group-hover:border-opacity-100 className={`flex items-center justify-center rounded border border-gray-500 border-opacity-0 p-1 group-hover:border-opacity-100
${selected ? "border-opacity-100 " : ""} ${selected ? "border-opacity-100 " : ""}
${active ? "bg-gray-100" : ""} `} ${active ? "bg-gray-100" : ""} `}
> >
@ -145,10 +145,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
<p className="text-xs text-gray-500 px-2">No assignees found</p> <p className="px-2 text-xs text-gray-500">No assignees found</p>
) )
) : ( ) : (
<p className="text-xs text-gray-500 px-2">Loading...</p> <p className="px-2 text-xs text-gray-500">Loading...</p>
)} )}
</div> </div>
</Combobox.Options> </Combobox.Options>

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>

97
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,29 @@ 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"}`)} >
</span> {PRIORITIES.map((priority) => (
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}> <CustomSelect.Option key={priority} value={priority}>
{value ?? "Priority"} <div className="flex w-full justify-between gap-2 rounded">
</span> <div className="flex items-center justify-start gap-2">
</span> <span>{getPriorityIcon(priority)}</span>
</Listbox.Button> <span className="capitalize">{priority ?? "None"}</span>
</div>
<Transition </div>
show={open} </CustomSelect.Option>
as={React.Fragment} ))}
enter="transition ease-out duration-200" </CustomSelect>
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Listbox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
>
<div>
{PRIORITIES.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
`${
active ? "bg-gray-200" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
}
value={priority}
>
{({ selected, active }) => (
<div className="flex w-full gap-2 justify-between rounded">
<div className="flex justify-start items-center gap-2">
<span>{getPriorityIcon(priority)}</span>
<span className="capitalize">{priority ?? "None"}</span>
</div>
<div className="flex justify-center items-center p-1 rounded">
<CheckIcon
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/>
</div>
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</>
)}
</Listbox>
); );

103
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,34 @@ 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"} >
</span> {projects ? (
</Listbox.Button> projects.length > 0 ? (
projects.map((project) => (
<Transition <CustomSelect.Option key={project.id} value={project.id}>
show={open} <>{project.name}</>
as={Fragment} </CustomSelect.Option>
leave="transition ease-in duration-100" ))
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"> <div className="px-2 text-sm text-gray-500">Loading...</div>
{projects ? ( )}
projects.length > 0 ? ( </CustomSelect>
projects.map((project) => (
<Listbox.Option
key={project.id}
className={({ active, selected }) =>
`${active ? "bg-indigo-50" : ""} ${
selected ? "bg-indigo-50 font-medium" : ""
} cursor-pointer select-none p-2 text-gray-900`
}
value={project.id}
>
{({ selected }) => (
<>
<span
className={`${
selected ? "font-medium" : "font-normal"
} block truncate`}
>
{project.name}
</span>
</>
)}
</Listbox.Option>
))
) : (
<p className="text-gray-400">No projects found!</p>
)
) : (
<div className="text-sm text-gray-500 px-2">Loading...</div>
)}
</div>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</>
); );
}; };

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

@ -67,21 +67,21 @@ export const IssueStateSelect: 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 ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5" open ? "border-theme bg-theme/5 outline-none ring-1 ring-theme " : "hover:bg-theme/5"
}` }`
} }
> >
{value && value !== "" ? ( {value && value !== "" ? (
<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">
{currentOption && currentOption.group {currentOption && currentOption.group
? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color) ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
: ""} : ""}
<span className=" text-gray-600">{currentOption?.display}</span> <span className=" text-gray-600">{currentOption?.display}</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">
<Squares2X2Icon className="h-4 w-4 text-gray-500 " /> <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
<span className=" text-gray-500">{currentOption?.display || "State"}</span> <span className=" text-gray-500">{currentOption?.display || "State"}</span>
</span> </span>
@ -99,10 +99,10 @@ export const IssueStateSelect: 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"
@ -126,12 +126,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{({ selected, active }) => {({ selected, active }) =>
states && ( states && (
<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">
{getStateGroupIcon(option.group, "16", "16", option.color)} {getStateGroupIcon(option.group, "16", "16", option.color)}
<span>{option.display}</span> <span>{option.display}</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 ${selected ? "opacity-100" : "opacity-0"}`} className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/> />
@ -142,17 +142,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
<p className="text-xs text-gray-500 px-2">No states found</p> <p className="px-2 text-xs text-gray-500">No states 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 State</span> <span className="text-gray-600">Create New State</span>
</span> </span>

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

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>
))} ))}

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>

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

23
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="p-2">{children}</div>
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</Listbox> </Listbox>
@ -105,12 +110,16 @@ 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` } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
} }
> >
{children} {({ selected }) => (
<>
{children} {selected && <CheckIcon className="h-4 w-4" />}
</>
)}
</Listbox.Option> </Listbox.Option>
); );

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 ? (

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

@ -2,7 +2,6 @@ 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 "./custom-menu"; export * from "./custom-menu";
export * from "./custom-select"; export * from "./custom-select";
export * from "./datepicker"; export * from "./datepicker";
@ -12,7 +11,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";

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;