forked from github/plane
style: dropdowns, feat: favorite projects in sidebar
This commit is contained in:
Aaryan Khandelwal
parent
067859b4bd
commit
4d598fd6b6
@ -37,49 +37,45 @@ export const AllBoards: React.FC<Props> = ({
|
||||
return (
|
||||
<>
|
||||
{groupedByIssues ? (
|
||||
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="h-full w-full">
|
||||
<div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
|
||||
{Object.keys(groupedByIssues).map((singleGroup, index) => {
|
||||
const currentState =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)
|
||||
: null;
|
||||
<div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
|
||||
<div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
|
||||
{Object.keys(groupedByIssues).map((singleGroup, index) => {
|
||||
const currentState =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)
|
||||
: null;
|
||||
|
||||
const stateId =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||
: null;
|
||||
const stateId =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||
: null;
|
||||
|
||||
const bgColor =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.color
|
||||
: "#000000";
|
||||
const bgColor =
|
||||
selectedGroup === "state_detail.name"
|
||||
? states?.find((s) => s.name === singleGroup)?.color
|
||||
: "#000000";
|
||||
|
||||
return (
|
||||
<SingleBoard
|
||||
key={index}
|
||||
type={type}
|
||||
currentState={currentState}
|
||||
bgColor={bgColor}
|
||||
groupTitle={singleGroup}
|
||||
groupedByIssues={groupedByIssues}
|
||||
selectedGroup={selectedGroup}
|
||||
members={members}
|
||||
handleEditIssue={handleEditIssue}
|
||||
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={openIssuesListModal ?? null}
|
||||
orderBy={orderBy}
|
||||
handleTrashBox={handleTrashBox}
|
||||
removeIssue={removeIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<SingleBoard
|
||||
key={index}
|
||||
type={type}
|
||||
currentState={currentState}
|
||||
bgColor={bgColor}
|
||||
groupTitle={singleGroup}
|
||||
groupedByIssues={groupedByIssues}
|
||||
selectedGroup={selectedGroup}
|
||||
members={members}
|
||||
handleEditIssue={handleEditIssue}
|
||||
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
openIssuesListModal={openIssuesListModal ?? null}
|
||||
orderBy={orderBy}
|
||||
handleTrashBox={handleTrashBox}
|
||||
removeIssue={removeIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -91,7 +91,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`relative h-full p-1 overflow-y-auto ${
|
||||
className={`relative h-full overflow-y-auto p-1 ${
|
||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||
} ${!isCollapsed ? "hidden" : "block"}`}
|
||||
ref={provided.innerRef}
|
||||
@ -102,12 +102,12 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} top-0 left-0 h-full w-full bg-indigo-200 opacity-50 pointer-events-none z-[99999998]`}
|
||||
} pointer-events-none top-0 left-0 z-[99999998] h-full w-full bg-indigo-200 opacity-50`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs whitespace-nowrap bg-white p-2 rounded pointer-events-none z-[99999999]`}
|
||||
} pointer-events-none top-1/2 left-1/2 z-[99999999] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
|
||||
>
|
||||
This board is ordered by {replaceUnderscoreIfSnakeCase(orderBy ?? "")}
|
||||
</div>
|
||||
@ -153,7 +153,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-theme font-medium outline-none"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
onClick={addIssueToState}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
@ -164,7 +164,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-theme font-medium outline-none"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
|
||||
@ -83,10 +83,10 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
|
||||
<>
|
||||
{openChildFor?.id === option.id && (
|
||||
<div
|
||||
className={`w-72 h-auto max-h-72 bg-white border border-gray-200 absolute rounded-lg ${
|
||||
className={`absolute h-auto max-h-72 w-72 rounded-lg border bg-white ${
|
||||
direction === "right"
|
||||
? "rounded-tl-none shadow-md left-full translate-x-2"
|
||||
: "rounded-tr-none shadow-md right-full -translate-x-2"
|
||||
? "left-full translate-x-2 rounded-tl-none shadow-md"
|
||||
: "right-full -translate-x-2 rounded-tr-none shadow-md"
|
||||
}`}
|
||||
>
|
||||
{option.children?.map((child) => (
|
||||
@ -118,7 +118,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
|
||||
))}
|
||||
|
||||
<div
|
||||
className={`w-0 h-0 absolute border-t-8 border-gray-300 ${
|
||||
className={`absolute h-0 w-0 border-t-8 border-gray-300 ${
|
||||
direction === "right"
|
||||
? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
|
||||
: "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
|
||||
|
||||
@ -13,10 +13,10 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
||||
completed,
|
||||
total,
|
||||
}) => (
|
||||
<div className="flex items-center justify-between w-full py-3 text-xs border-b-[1px] border-gray-200">
|
||||
<div className="flex items-center justify-start w-1/2 gap-2">{title}</div>
|
||||
<div className="flex items-center justify-end w-1/2 gap-1 px-2">
|
||||
<div className="flex h-5 justify-center items-center gap-1 ">
|
||||
<div className="flex w-full items-center justify-between border-b-[1px] py-3 text-xs">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
|
||||
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
|
||||
<div className="flex h-5 items-center justify-center gap-1 ">
|
||||
<span className="h-4 w-4 ">
|
||||
<ProgressBar value={completed} maxValue={total} />
|
||||
</span>
|
||||
|
||||
@ -58,10 +58,10 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-80 rounded-md bg-white shadow-lg">
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-80 rounded-lg bg-white shadow-lg">
|
||||
<div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
|
||||
<Tab.Group as="div" className="flex h-full w-full flex-col">
|
||||
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 rounded border-b p-1">
|
||||
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 border-b p-1">
|
||||
{tabOptions.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
@ -75,16 +75,16 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<Tab.Panel className="h-full w-full">
|
||||
<Tab.Panels className="flex-1 overflow-y-auto">
|
||||
<Tab.Panel>
|
||||
{recentEmojis.length > 0 && (
|
||||
<div className="w-full py-2">
|
||||
<h3 className="mb-2 text-lg">Recent Emojis</h3>
|
||||
<div className="py-2">
|
||||
<h3 className="mb-2">Recent Emojis</h3>
|
||||
<div className="grid grid-cols-9 gap-2">
|
||||
{recentEmojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="select-none text-xl"
|
||||
className="select-none text-lg hover:bg-hover-gray"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
@ -97,13 +97,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="py-3">
|
||||
<h3 className="mb-2 text-lg">All Emojis</h3>
|
||||
<div>
|
||||
<h3 className="mb-2">All Emojis</h3>
|
||||
<div className="grid grid-cols-9 gap-2">
|
||||
{emojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="select-none text-xl"
|
||||
className="select-none text-lg hover:bg-hover-gray"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
|
||||
@ -20,7 +20,7 @@ import { CreateStateModal } from "components/states";
|
||||
import { CreateUpdateCycleModal } from "components/cycles";
|
||||
import { CreateLabelModal } from "components/labels";
|
||||
// ui
|
||||
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
|
||||
import { Button, CustomMenu, Input, Loader } from "components/ui";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
@ -95,7 +95,6 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
setFocus,
|
||||
} = useForm<IIssue>({
|
||||
defaultValues,
|
||||
mode: "all",
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
|
||||
@ -66,21 +66,21 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 && 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} />
|
||||
<span className=" text-gray-500">{value.length} Assignees</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<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 " />
|
||||
<span className=" text-gray-500">Assignee</span>
|
||||
</span>
|
||||
@ -98,10 +98,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
|
||||
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
@ -118,21 +118,21 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
key={option.value}
|
||||
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`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-1">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<Avatar
|
||||
user={people?.find((p) => p.member.id === option.value)?.member}
|
||||
/>
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`flex justify-center items-center p-1 rounded border border-gray-500 border-opacity-0 group-hover:border-opacity-100
|
||||
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 " : ""}
|
||||
${active ? "bg-gray-100" : ""} `}
|
||||
>
|
||||
@ -145,10 +145,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
</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>
|
||||
</Combobox.Options>
|
||||
|
||||
@ -13,20 +13,20 @@ type Props = {
|
||||
};
|
||||
|
||||
export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
<Popover className="relative flex items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
{value ? (
|
||||
<>
|
||||
<span className="text-gray-600">{value}</span>
|
||||
|
||||
@ -61,16 +61,16 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
|
||||
<IssueLabelsList
|
||||
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
|
||||
length={3}
|
||||
@ -79,7 +79,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<span className=" text-gray-600">{value.length} Labels</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
<TagIcon className="h-3 w-3 text-gray-500" />
|
||||
<span className=" text-gray-500">Label</span>
|
||||
</span>
|
||||
@ -97,10 +97,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
|
||||
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
@ -128,8 +128,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
value={label.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
@ -141,7 +141,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
/>
|
||||
<span>{label.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<div className="flex items-center justify-center rounded p-1">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
@ -154,8 +154,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
} else
|
||||
return (
|
||||
<div className="bg-gray-50 border-y border-gray-400">
|
||||
<div className="flex select-none font-medium items-center gap-2 truncate p-2 text-gray-900">
|
||||
<div className="border-y border-gray-400 bg-gray-50">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
|
||||
<RectangleGroupIcon className="h-3 w-3" /> {label.name}
|
||||
</div>
|
||||
<div>
|
||||
@ -170,8 +170,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
value={child.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
@ -180,7 +180,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
/>
|
||||
<span>{child.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<div className="flex items-center justify-center rounded p-1">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
@ -196,17 +196,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">No labels found</p>
|
||||
<p className="px-2 text-xs text-gray-500">No labels found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 px-2">Loading...</p>
|
||||
<p className="px-2 text-xs text-gray-500">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<span className="flex items-center justify-start gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New Label</span>
|
||||
</span>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
@ -14,71 +13,29 @@ type Props = {
|
||||
};
|
||||
|
||||
export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<div>
|
||||
{PRIORITIES.map((priority) => (
|
||||
<Listbox.Option
|
||||
key={priority}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={priority}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
>
|
||||
{PRIORITIES.map((priority) => (
|
||||
<CustomSelect.Option key={priority} value={priority}>
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
);
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { FC, Fragment } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
@ -19,7 +17,7 @@ export interface IssueProjectSelectProps {
|
||||
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
}
|
||||
|
||||
export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
|
||||
export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
setActiveProject,
|
||||
@ -34,71 +32,34 @@ export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Listbox
|
||||
value={value}
|
||||
onChange={(val) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative flex cursor-pointer items-center gap-1 rounded-md border bg-white px-2 py-1 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
|
||||
<ClipboardDocumentListIcon className="h-3 w-3" />
|
||||
<span className="block truncate">
|
||||
{projects?.find((i) => i.id === value)?.identifier ?? "Project"}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{projects ? (
|
||||
projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<Listbox.Option
|
||||
key={project.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} cursor-pointer select-none p-2 text-gray-900`
|
||||
}
|
||||
value={project.id}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`${
|
||||
selected ? "font-medium" : "font-normal"
|
||||
} block truncate`}
|
||||
>
|
||||
{project.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-400">No projects found!</p>
|
||||
)
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 px-2">Loading...</div>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<>
|
||||
<ClipboardDocumentListIcon className="h-3 w-3" />
|
||||
<span className="block truncate">
|
||||
{projects?.find((i) => i.id === value)?.identifier ?? "Project"}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
onChange={(val: string) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
>
|
||||
{projects ? (
|
||||
projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<CustomSelect.Option key={project.id} value={project.id}>
|
||||
<>{project.name}</>
|
||||
</CustomSelect.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-400">No projects found!</p>
|
||||
)
|
||||
) : (
|
||||
<div className="px-2 text-sm text-gray-500">Loading...</div>
|
||||
)}
|
||||
</CustomSelect>
|
||||
);
|
||||
};
|
||||
|
||||
@ -67,21 +67,21 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
open ? "border-theme bg-theme/5 outline-none ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value !== "" ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
{currentOption && currentOption.group
|
||||
? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
|
||||
: ""}
|
||||
<span className=" text-gray-600">{currentOption?.display}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<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 " />
|
||||
<span className=" text-gray-500">{currentOption?.display || "State"}</span>
|
||||
</span>
|
||||
@ -99,10 +99,10 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
|
||||
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
>
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
@ -126,12 +126,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
>
|
||||
{({ selected, active }) =>
|
||||
states && (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
{getStateGroupIcon(option.group, "16", "16", option.color)}
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<div className="flex items-center justify-center rounded p-1">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
@ -142,17 +142,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
</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
|
||||
type="button"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<span className="flex items-center justify-start gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New State</span>
|
||||
</span>
|
||||
|
||||
@ -92,7 +92,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Combobox>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
@ -144,7 +144,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
}}
|
||||
|
||||
@ -59,32 +59,34 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure as="div" className="rounded-md border p-3 text-gray-900 md:w-2/3" defaultOpen>
|
||||
<Disclosure as="div" className="rounded-[10px] border bg-white p-5 text-gray-900" defaultOpen>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 cursor-pointer">
|
||||
<Disclosure.Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex cursor-pointer items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="font-medium text-gray-600">{label.name}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
Add more labels
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
<Disclosure.Button>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "rotate-90 transform" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
Add more labels
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
show={open}
|
||||
@ -96,22 +98,22 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mt-2 ml-4">
|
||||
<div className="mt-3 ml-6 space-y-3">
|
||||
{labelChildren.map((child) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="group pl-4 py-1 flex items-center justify-between rounded text-sm hover:bg-gray-100"
|
||||
className="group flex items-center justify-between rounded-md border p-2 text-sm"
|
||||
>
|
||||
<h5 className="flex items-center gap-2">
|
||||
<h5 className="flex items-center gap-3 text-gray-600">
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: child.color,
|
||||
}}
|
||||
/>
|
||||
{child.name}
|
||||
</h5>
|
||||
<div className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
|
||||
<div className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
|
||||
Remove from group
|
||||
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
// react hook form
|
||||
import { Controller, FieldError, Control } from "react-hook-form";
|
||||
// ui
|
||||
import { CustomListbox } from "components/ui";
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
@ -22,26 +22,42 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
|
||||
rules={{ required: true }}
|
||||
name="status"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div>
|
||||
<CustomListbox
|
||||
className={`${
|
||||
error
|
||||
? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500"
|
||||
: ""
|
||||
}`}
|
||||
title="Status"
|
||||
options={MODULE_STATUS.map((status) => ({
|
||||
value: status.value,
|
||||
display: status.label,
|
||||
color: status.color,
|
||||
}))}
|
||||
value={value}
|
||||
optionsFontsize="sm"
|
||||
onChange={onChange}
|
||||
icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />}
|
||||
/>
|
||||
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
|
||||
</div>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div
|
||||
className={`flex items-center justify-center gap-2 text-xs ${
|
||||
error ? "text-red-500" : ""
|
||||
}`}
|
||||
>
|
||||
<Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
|
||||
{value && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
>
|
||||
{MODULE_STATUS.map((status) => (
|
||||
<CustomSelect.Option key={status.value} value={status.value}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: status.color,
|
||||
}}
|
||||
/>
|
||||
{status.label}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -296,10 +296,11 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
|
||||
: "Select network"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
|
||||
@ -17,9 +17,9 @@ import { CreateProjectModal } from "components/project";
|
||||
// ui
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
const navigation = (workspaceSlug: string, projectId: string) => [
|
||||
{
|
||||
@ -54,11 +54,17 @@ export const ProjectSidebarList: FC = () => {
|
||||
const { collapsed: sidebarCollapse } = useTheme();
|
||||
// toast handler
|
||||
const { setToastAlert } = useToast();
|
||||
// fetching projects list
|
||||
|
||||
const { data: favoriteProjects } = useSWR(
|
||||
workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: projects } = useSWR(
|
||||
workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
const normalProjects = projects?.filter((p) => !p.is_favourite) ?? [];
|
||||
|
||||
const handleCopyText = (projectId: string) => {
|
||||
const originURL =
|
||||
@ -75,22 +81,24 @@ export const ProjectSidebarList: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<div className="no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-white border-t border-gray-200 px-6 pt-5 pb-3">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
|
||||
{projects ? (
|
||||
<>
|
||||
{projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
|
||||
{favoriteProjects && favoriteProjects.length > 0 && (
|
||||
<div className="mt-3 flex flex-col space-y-2 px-6">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
|
||||
{favoriteProjects.map((favoriteProject) => {
|
||||
const project = favoriteProject.project_detail;
|
||||
|
||||
return (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full items-center gap-2 select-none rounded-md py-2 text-left text-sm font-medium ${
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-x-2 items-center">
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
@ -102,13 +110,13 @@ export const ProjectSidebarList: FC = () => {
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="w-[125px] text-ellipsis text-[0.875rem] overflow-hidden">
|
||||
{project?.name}
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-x-1 items-center">
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
@ -154,7 +162,7 @@ export const ProjectSidebarList: FC = () => {
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`w-5 h-5 flex-shrink-0 ${
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
@ -172,41 +180,143 @@ export const ProjectSidebarList: FC = () => {
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 flex flex-col space-y-2 px-6 pb-3">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
|
||||
{projects ? (
|
||||
<>
|
||||
{normalProjects.length > 0 ? (
|
||||
normalProjects.map((project) => (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-x-1">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -20,9 +20,9 @@ import { StarIcon } from "@heroicons/react/20/solid";
|
||||
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import type { IProject } from "types";
|
||||
import type { IFavoriteProject, IProject } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
export type ProjectCardProps = {
|
||||
project: IProject;
|
||||
@ -63,6 +63,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
@ -94,6 +95,11 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
})),
|
||||
false
|
||||
);
|
||||
mutate<IFavoriteProject[]>(
|
||||
FAVORITE_PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
|
||||
false
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
@ -126,7 +132,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
return (
|
||||
<>
|
||||
{members ? (
|
||||
<div className="flex flex-col shadow rounded-[10px]">
|
||||
<div className="flex flex-col rounded-[10px] shadow">
|
||||
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
|
||||
<a>
|
||||
<div className="relative h-32 w-full rounded-t-[10px]">
|
||||
@ -149,16 +155,16 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
e.stopPropagation();
|
||||
setToJoinProject(project.id);
|
||||
}}
|
||||
className="flex cursor-pointer items-center gap-1 bg-green-600 px-2 py-1 rounded text-xs"
|
||||
className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
<span>Select to Join</span>
|
||||
</button>
|
||||
) : (
|
||||
<span className="bg-green-600 px-2 py-1 rounded text-xs">Member</span>
|
||||
<span className="rounded bg-green-600 px-2 py-1 text-xs">Member</span>
|
||||
)}
|
||||
{project.is_favourite && (
|
||||
<span className="bg-orange-400 h-6 w-9 grid place-items-center rounded">
|
||||
<span className="grid h-6 w-9 place-items-center rounded bg-orange-400">
|
||||
<StarIcon className="h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
@ -166,7 +172,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex flex-col px-7 py-4 rounded-b-[10px] h-full">
|
||||
<div className="flex h-full flex-col rounded-b-[10px] px-7 py-4">
|
||||
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
|
||||
<a>
|
||||
<div className="flex items-center gap-1">
|
||||
@ -180,7 +186,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
<p className="mt-3.5 mb-7">{truncateText(project.description ?? "", 100)}</p>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex justify-between items-end h-full">
|
||||
<div className="flex h-full items-end justify-between">
|
||||
<Tooltip
|
||||
tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
|
||||
position="bottom"
|
||||
|
||||
@ -1,193 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// hooks
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import { CreateProjectModal } from "components/project";
|
||||
// headless ui
|
||||
// ui
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
// icons
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
navigation: (
|
||||
workspaceSlug: string,
|
||||
projectId: string
|
||||
) => {
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
}[];
|
||||
sidebarCollapse: boolean;
|
||||
};
|
||||
|
||||
const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
|
||||
const [isCreateProjectModal, setCreateProjectModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: projects } = useSWR(
|
||||
workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<div
|
||||
className={`no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-primary px-2 pt-5 pb-3 ${
|
||||
sidebarCollapse ? "rounded-xl" : "rounded-t-3xl"
|
||||
}`}
|
||||
>
|
||||
{projects ? (
|
||||
<>
|
||||
{projects.length > 0 ? (
|
||||
projects.map((project) => (
|
||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<Disclosure.Button
|
||||
className={`flex w-full items-center gap-2 rounded-md p-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase text-white">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<span className="flex w-full items-center justify-between ">
|
||||
<span className="w-[125px] text-ellipsis overflow-hidden">
|
||||
{project?.name}
|
||||
</span>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() =>
|
||||
copyTextToClipboard(
|
||||
`https://app.plane.so/${workspaceSlug}/projects/${project?.id}/issues/`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
title: "Link Copied",
|
||||
message: "Link copied to clipboard",
|
||||
type: "success",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
Copy link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel
|
||||
className={`${
|
||||
sidebarCollapse ? "" : "ml-[2.25rem]"
|
||||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<item.icon
|
||||
className={`h-4 w-4 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
|
||||
onClick={() => setCreateProjectModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
{!sidebarCollapse && "Create Project"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
<Loader className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
<Loader.Item height="15px" width="80%" light />
|
||||
</div>
|
||||
</Loader>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsList;
|
||||
@ -1,74 +0,0 @@
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import {
|
||||
ClipboardDocumentListIcon,
|
||||
Cog6ToothIcon,
|
||||
HomeIcon,
|
||||
RectangleStackIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
sidebarCollapse: boolean;
|
||||
};
|
||||
|
||||
const workspaceLinks = (workspaceSlug: string) => [
|
||||
{
|
||||
icon: HomeIcon,
|
||||
name: "Home",
|
||||
href: `/${workspaceSlug}`,
|
||||
},
|
||||
{
|
||||
icon: ClipboardDocumentListIcon,
|
||||
name: "Projects",
|
||||
href: `/${workspaceSlug}/projects`,
|
||||
},
|
||||
{
|
||||
icon: RectangleStackIcon,
|
||||
name: "My Issues",
|
||||
href: `/${workspaceSlug}/me/my-issues`,
|
||||
},
|
||||
{
|
||||
icon: Cog6ToothIcon,
|
||||
name: "Settings",
|
||||
href: `/${workspaceSlug}/settings`,
|
||||
},
|
||||
];
|
||||
|
||||
const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
query: { workspaceSlug },
|
||||
} = router;
|
||||
|
||||
return (
|
||||
<div className="px-2">
|
||||
<div className="mt-3 flex-1 space-y-1 bg-white">
|
||||
{workspaceLinks(workspaceSlug as string).map((link, index) => (
|
||||
<Link key={index} href={link.href}>
|
||||
<a
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100"
|
||||
} group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-500"
|
||||
} h-4 w-4 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceOptions;
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
@ -13,7 +13,7 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { Button, Input, Select, TextArea } from "components/ui";
|
||||
import { Button, CustomSelect, Input, TextArea } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
@ -129,19 +129,25 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
id="group"
|
||||
label="Group"
|
||||
<Controller
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
name="group"
|
||||
error={errors.group}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Group is required",
|
||||
}}
|
||||
options={Object.keys(GROUP_CHOICES).map((key) => ({
|
||||
value: key,
|
||||
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
|
||||
}))}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.keys(GROUP_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
label?: string;
|
||||
options?: Array<{ display: string; value: any; color?: string; icon?: JSX.Element }>;
|
||||
icon?: JSX.Element;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
multiple?: boolean;
|
||||
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
className?: string;
|
||||
footerOption?: JSX.Element;
|
||||
};
|
||||
|
||||
export const CustomListbox: React.FC<Props> = ({
|
||||
title = "",
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
multiple,
|
||||
icon,
|
||||
footerOption,
|
||||
optionsFontsize,
|
||||
className,
|
||||
label,
|
||||
}) => (
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
{label && (
|
||||
<Listbox.Label>
|
||||
<div className="mb-2 text-gray-500">{label}</div>
|
||||
</Listbox.Label>
|
||||
)}
|
||||
<Listbox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500
|
||||
${className || "px-2 py-1"}`}
|
||||
>
|
||||
{icon ?? null}
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{Array.isArray(value) ? (
|
||||
value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
|
||||
`${title}`
|
||||
) : (
|
||||
<>
|
||||
{options?.find((o) => o.value === value)?.color && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: options?.find((o) => o.value === value)?.color,
|
||||
}}
|
||||
/>
|
||||
)}{" "}
|
||||
{options?.find((o) => o.value === value)?.display || `${title}`}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg ${
|
||||
optionsFontsize === "sm"
|
||||
? "text-xs"
|
||||
: optionsFontsize === "md"
|
||||
? "text-base"
|
||||
: optionsFontsize === "lg"
|
||||
? "text-lg"
|
||||
: optionsFontsize === "xl"
|
||||
? "text-xl"
|
||||
: optionsFontsize === "2xl"
|
||||
? "text-2xl"
|
||||
: ""
|
||||
} z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="py-1">
|
||||
{options ? (
|
||||
options.length > 0 ? (
|
||||
options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ selected, active }) =>
|
||||
`${
|
||||
selected ||
|
||||
(Array.isArray(value)
|
||||
? value.includes(option.value)
|
||||
: value === option.value)
|
||||
? "bg-indigo-50 font-medium"
|
||||
: ""
|
||||
} ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} relative cursor-pointer select-none p-2 text-gray-900`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
<span className={` flex items-center gap-2 truncate`}>
|
||||
{option.icon}
|
||||
{option.color && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: option.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{option.display}
|
||||
</span>
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">No options</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
{footerOption ?? null}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
);
|
||||
@ -40,40 +40,48 @@ const CustomMenu = ({
|
||||
customButton,
|
||||
}: Props) => (
|
||||
<Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
{customButton ? (
|
||||
<Menu.Button as="div">{customButton}</Menu.Button>
|
||||
) : (
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
@ -85,7 +93,7 @@ const CustomMenu = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 whitespace-nowrap rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute z-20 mt-1 whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
width === "sm"
|
||||
@ -112,25 +120,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
onClick,
|
||||
className = "",
|
||||
}) => (
|
||||
<Menu.Item>
|
||||
{({ active, close }) =>
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className={({ active }) =>
|
||||
`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} cursor-pointer select-none gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
>
|
||||
{({ close }) =>
|
||||
renderAs === "a" ? (
|
||||
<Link href={href ?? ""}>
|
||||
<a
|
||||
className={`${className} block p-2 text-gray-700 hover:bg-indigo-50 hover:text-gray-900`}
|
||||
onClick={close}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
<a onClick={close}>{children}</a>
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`block w-full p-2 text-left ${
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700"
|
||||
} ${className}`}
|
||||
>
|
||||
<button type="button" onClick={onClick}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
|
||||
@ -3,6 +3,7 @@ import React from "react";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type CustomSelectProps = {
|
||||
value: any;
|
||||
@ -11,6 +12,7 @@ type CustomSelectProps = {
|
||||
label?: string | JSX.Element;
|
||||
textAlignment?: "left" | "center" | "right";
|
||||
maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
|
||||
position?: "right" | "left";
|
||||
width?: "auto" | string;
|
||||
input?: boolean;
|
||||
noChevron?: boolean;
|
||||
@ -27,6 +29,7 @@ const CustomSelect = ({
|
||||
value,
|
||||
onChange,
|
||||
maxHeight = "none",
|
||||
position = "left",
|
||||
width = "auto",
|
||||
input = false,
|
||||
noChevron = false,
|
||||
@ -50,7 +53,7 @@ const CustomSelect = ({
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
|
||||
} ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
@ -75,8 +78,10 @@ const CustomSelect = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`${optionsClassName} absolute right-0 z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-full whitespace-nowrap" : width
|
||||
className={`${optionsClassName} absolute ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
|
||||
} ${input ? "max-h-48" : ""} ${
|
||||
maxHeight === "lg"
|
||||
? "max-h-60"
|
||||
@ -89,7 +94,7 @@ const CustomSelect = ({
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
<div className="p-2">{children}</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</Listbox>
|
||||
@ -105,12 +110,16 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
|
||||
<Listbox.Option
|
||||
value={value}
|
||||
className={({ active, selected }) =>
|
||||
`${className} ${active || selected ? "bg-indigo-50" : ""} ${
|
||||
`${className} ${active || selected ? "bg-hover-gray" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} relative flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
} 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>
|
||||
);
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
|
||||
|
||||
<h2 className="text-lg font-medium text-gray-900">{title}</h2>
|
||||
<div className="mt-1 text-sm text-gray-500">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200">
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
|
||||
{children}
|
||||
</ul>
|
||||
{link ? (
|
||||
|
||||
@ -2,7 +2,6 @@ export * from "./input";
|
||||
export * from "./text-area";
|
||||
export * from "./avatar";
|
||||
export * from "./button";
|
||||
export * from "./custom-listbox";
|
||||
export * from "./custom-menu";
|
||||
export * from "./custom-select";
|
||||
export * from "./datepicker";
|
||||
@ -12,7 +11,6 @@ export * from "./loader";
|
||||
export * from "./multi-input";
|
||||
export * from "./outline-button";
|
||||
export * from "./progress-bar";
|
||||
export * from "./select";
|
||||
export * from "./spinner";
|
||||
export * from "./tooltip";
|
||||
export * from "./labels-list";
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { RegisterOptions, UseFormRegister } from "react-hook-form";
|
||||
|
||||
type Props = {
|
||||
label?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
value?: string | number | readonly string[];
|
||||
className?: string;
|
||||
register?: UseFormRegister<any>;
|
||||
disabled?: boolean;
|
||||
validations?: RegisterOptions;
|
||||
error?: any;
|
||||
autoComplete?: "on" | "off";
|
||||
options: { label: string; value: any }[];
|
||||
size?: "rg" | "lg";
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Select: React.FC<Props> = ({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
className = "",
|
||||
name,
|
||||
register,
|
||||
disabled,
|
||||
validations,
|
||||
error,
|
||||
options,
|
||||
size = "rg",
|
||||
fullWidth = true,
|
||||
}) => (
|
||||
<>
|
||||
{label && (
|
||||
<label htmlFor={id} className="text-gray-500 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<select
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
{...(register && register(name, validations))}
|
||||
disabled={disabled}
|
||||
className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
|
||||
fullWidth ? "w-full" : ""
|
||||
} ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option value={option.value} key={index}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{error?.message && <div className="text-red-500 text-sm">{error.message}</div>}
|
||||
</>
|
||||
);
|
||||
@ -56,7 +56,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex w-full items-center justify-between self-baseline bg-white border-t border-gray-200 px-6 py-2 ${
|
||||
className={`flex w-full items-center justify-between self-baseline border-t bg-white px-6 py-2 ${
|
||||
sidebarCollapse ? "flex-col-reverse" : ""
|
||||
}`}
|
||||
>
|
||||
@ -132,7 +132,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
||||
<Link href={href} key={name}>
|
||||
<a
|
||||
target="_blank"
|
||||
className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
|
||||
className="mx-3 flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-2 text-xs hover:bg-gray-100"
|
||||
>
|
||||
<Icon className="h-5 w-5 text-gray-500" />
|
||||
<span className="text-sm">{name}</span>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import { mutate } from "swr";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// headless
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// ui
|
||||
import { Button, Input, Select } from "components/ui";
|
||||
import { Button, CustomSelect, Input } from "components/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
@ -37,6 +37,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
@ -44,7 +45,6 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
} = useForm<IWorkspaceMemberInvitation>({
|
||||
defaultValues,
|
||||
reValidateMode: "onChange",
|
||||
mode: "all",
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
@ -98,13 +98,13 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="space-y-5">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Members
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Members
|
||||
</Dialog.Title>
|
||||
<p className="text-sm text-gray-500">
|
||||
Invite members to work on your workspace.
|
||||
</p>
|
||||
@ -129,34 +129,30 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
id="role"
|
||||
label="Role"
|
||||
<Controller
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
name="role"
|
||||
error={errors.role}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Role is required",
|
||||
}}
|
||||
options={Object.entries(ROLE).map(([key, value]) => ({
|
||||
value: key,
|
||||
label: value,
|
||||
}))}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={ROLE[value]}
|
||||
onChange={onChange}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.entries(ROLE).map(([key, value]) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
{value}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<TextArea
|
||||
id="message"
|
||||
name="message"
|
||||
label="Message"
|
||||
placeholder="Enter message"
|
||||
error={errors.message}
|
||||
register={register}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<Button theme="secondary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
@ -76,7 +76,7 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center mx-auto gap-x-1">
|
||||
<div className="mx-auto flex items-center gap-x-1">
|
||||
<div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
@ -116,7 +116,7 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="fixed left-2 z-20 mt-1 w-full max-w-[14rem] origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<Menu.Items className="fixed left-2 z-20 mt-1 w-full max-w-[17rem] origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="divide-y px-1 py-2">
|
||||
<div>
|
||||
<Menu.Item as="div" className="px-2 pb-2 text-xs">
|
||||
|
||||
@ -53,7 +53,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
|
||||
} h-4 w-4 flex-shrink-0 group-hover:text-gray-900`}
|
||||
} h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
|
||||
@ -15,6 +15,8 @@ export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
|
||||
export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
|
||||
|
||||
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
|
||||
export const FAVORITE_PROJECTS_LIST = (workspaceSlug: string) =>
|
||||
`FAVORITE_PROJECTS_LIST_${workspaceSlug}`;
|
||||
export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
|
||||
|
||||
export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId}`;
|
||||
@ -35,7 +37,8 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
|
||||
export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
|
||||
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
|
||||
export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
|
||||
export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) => `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
|
||||
export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) =>
|
||||
`CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
|
||||
export const CYCLE_DRAFT_LIST = (projectId: string) => `CYCLE_DRAFT_LIST_${projectId}`;
|
||||
export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ type Props = {
|
||||
};
|
||||
|
||||
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
|
||||
<div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-gray-200 bg-white px-5 py-4 ">
|
||||
<div className="flex w-full flex-row items-center justify-between gap-y-4 border-b bg-white px-5 py-4 ">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="block md:hidden">
|
||||
<Button
|
||||
|
||||
@ -24,7 +24,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
|
||||
toggleSidebar ? "left-0" : "-left-60 md:left-0"
|
||||
} flex h-full flex-col bg-white duration-300 md:relative`}
|
||||
>
|
||||
<div className="flex h-full flex-1 flex-col border-r border-gray-200">
|
||||
<div className="flex h-full flex-1 flex-col border-r">
|
||||
<div className="flex h-full flex-1 flex-col pt-2">
|
||||
<div className="px-2">
|
||||
<WorkspaceSidebarDropdown />
|
||||
|
||||
@ -135,7 +135,7 @@ const AppLayout: FC<AppLayoutProps> = ({
|
||||
</div>
|
||||
) : isMember ? (
|
||||
<div
|
||||
className={`w-full flex-grow ${
|
||||
className={`flex w-full flex-grow flex-col ${
|
||||
noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
|
||||
} ${
|
||||
bg === "primary"
|
||||
|
||||
@ -135,6 +135,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
people?.find((person) => person.member.id === field.value)?.member
|
||||
.first_name ?? "Select Lead"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
@ -143,7 +144,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
@ -164,7 +165,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
{person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
@ -194,6 +195,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
people?.find((p) => p.member.id === field.value)?.member.first_name ??
|
||||
"Select Default Assignee"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
@ -202,7 +204,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<Image
|
||||
@ -223,7 +225,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
||||
{person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
|
||||
@ -93,7 +93,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
|
||||
<section className="space-y-8">
|
||||
<h3 className="text-2xl font-semibold">Features</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
@ -122,7 +122,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
|
||||
@ -272,7 +272,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
|
||||
@ -70,7 +70,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptySpace
|
||||
title="You haven't added any integration yet."
|
||||
description="Add GitHub and other integrations to sync your project issues."
|
||||
@ -87,7 +87,7 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-5 md:w-2/3">
|
||||
<Loader className="space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
|
||||
@ -181,7 +181,7 @@ const MembersSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
|
||||
<div className="divide-y rounded-[10px] border bg-white px-6">
|
||||
{members.length > 0
|
||||
? members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between py-6">
|
||||
|
||||
@ -99,7 +99,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="divide-y rounded-[10px] border border-gray-200">
|
||||
<div className="divide-y rounded-[10px] border">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
onClose={() => {
|
||||
|
||||
@ -99,10 +99,7 @@ const OnBoard: NextPage = () => {
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Select invites that you want to accept.
|
||||
</p>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||
>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
|
||||
{invitations.map((invitation) => (
|
||||
<SingleInvitation
|
||||
key={invitation.id}
|
||||
|
||||
@ -3,6 +3,7 @@ import APIService from "services/api.service";
|
||||
// types
|
||||
import type {
|
||||
GithubRepositoriesResponse,
|
||||
IFavoriteProject,
|
||||
IProject,
|
||||
IProjectMember,
|
||||
IProjectMemberInvitation,
|
||||
@ -256,6 +257,14 @@ class ProjectServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getFavoriteProjects(workspaceSlug: string): Promise<IFavoriteProject[]> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/user-favourite-projects/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async addProjectToFavourites(
|
||||
workspaceSlug: string,
|
||||
data: {
|
||||
|
||||
12
apps/app/types/projects.d.ts
vendored
12
apps/app/types/projects.d.ts
vendored
@ -21,6 +21,18 @@ export interface IProject {
|
||||
workspace: IWorkspace | string;
|
||||
}
|
||||
|
||||
export interface IFavoriteProject {
|
||||
created_at: Date;
|
||||
created_by: string;
|
||||
id: string;
|
||||
project: string;
|
||||
project_detail: IProject;
|
||||
updated_at: Date;
|
||||
updated_by: string;
|
||||
user: string;
|
||||
workspace: string;
|
||||
}
|
||||
|
||||
type ProjectViewTheme = {
|
||||
collapsed: boolean;
|
||||
issueView: "list" | "kanban" | null;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user