thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: issue sidebar create label form (#1527)

Browse Source 
* fix: issue sidebar create label form

* fix: issue details page overflow
This commit is contained in:
Aaryan Khandelwal 2023-07-17 15:37:50 +05:30 committed by GitHub
parent 8df1648329
commit 0a56a30ab2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 557 additions and 506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/core/modals/link-modal.tsx
View File

@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
@ -70,7 +70,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div> <div>
<div className="space-y-5"> <div className="space-y-5">

2
apps/app/components/core/sidebar/links-list.tsx
View File

@ -49,7 +49,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
)} )}
<Link href={link.url}> <Link href={link.url}>
<a <a
className="relative flex gap-2 rounded-md bg-custom-background-100 p-2" className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
target="_blank" target="_blank"
> >
<div className="mt-0.5"> <div className="mt-0.5">

3
apps/app/components/issues/sidebar-select/index.ts
View File

@ -2,8 +2,9 @@ export * from "./assignee";
export * from "./blocked"; export * from "./blocked";
export * from "./blocker"; export * from "./blocker";
export * from "./cycle"; export * from "./cycle";
export * from "./estimate";
export * from "./label";
export * from "./module"; export * from "./module";
export * from "./parent"; export * from "./parent";
export * from "./priority"; export * from "./priority";
export * from "./state"; export * from "./state";
export * from "./estimate";

349
apps/app/components/issues/sidebar-select/label.tsx Normal file
View File

@ -0,0 +1,349 @@
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { Controller, UseFormWatch, useForm } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// headless ui
import { Listbox, Popover, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
// hooks
import useUser from "hooks/use-user";
// ui
import { Input, Spinner } from "components/ui";
// icons
import {
ChevronDownIcon,
PlusIcon,
RectangleGroupIcon,
TagIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
// types
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
issueDetails: IIssue | undefined;
issueControl: any;
watchIssue: UseFormWatch<IIssue>;
submitChanges: (formData: any) => void;
isNotAllowed: boolean;
uneditable: boolean;
};
const defaultValues: Partial<IIssueLabels> = {
name: "",
color: "#ff0000",
};
export const SidebarLabelSelect: React.FC<Props> = ({
issueDetails,
issueControl,
watchIssue,
submitChanges,
isNotAllowed,
uneditable,
}) => {
const [createLabelForm, setCreateLabelForm] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const {
register,
handleSubmit,
formState: { isSubmitting },
reset,
watch,
control: labelControl,
setFocus,
} = useForm<Partial<IIssueLabels>>({
defaultValues,
});
const { user } = useUser();
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await issuesService
.createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
.then((res) => {
reset(defaultValues);
issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] });
setCreateLabelForm(false);
});
};
useEffect(() => {
if (!createLabelForm) return;
setFocus("name");
reset();
}, [createLabelForm, reset, setFocus]);
return (
<div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
<div className="flex items-start justify-between">
<div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
<TagIcon className="h-4 w-4" />
<p>Label</p>
</div>
<div className="basis-1/2">
<div className="flex flex-wrap gap-1">
{watchIssue("labels_list")?.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
if (label)
return (
<span
key={label.id}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
onClick={() => {
const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== labelId);
submitChanges({
labels_list: updatedLabels,
});
}}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
<XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
</span>
);
})}
<Controller
control={issueControl}
name="labels_list"
render={({ field: { value } }) => (
<Listbox
as="div"
value={value}
onChange={(val: any) => submitChanges({ labels_list: val })}
className="flex-shrink-0"
multiple
disabled={isNotAllowed || uneditable}
>
{({ open }) => (
<div className="relative">
<Listbox.Button
className={`flex ${
isNotAllowed || uneditable
? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90"
} items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
>
Select Label
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
<div className="py-1">
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label: IIssueLabels) => {
const children = issueLabels?.filter(
(l) => l.parent === label.id
);
if (children.length === 0) {
if (!label.parent)
return (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
`${
active || selected ? "bg-custom-background-90" : ""
} ${
selected ? "" : "text-custom-text-200"
} flex cursor-pointer select-none items-center gap-2 truncate p-2`
}
value={label.id}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor:
label.color && label.color !== ""
? label.color
: "#000",
}}
/>
{label.name}
</Listbox.Option>
);
} else
return (
<div className="border-y border-custom-border-100 bg-custom-background-90">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
<RectangleGroupIcon className="h-3 w-3" />
{label.name}
</div>
<div>
{children.map((child) => (
<Listbox.Option
key={child.id}
className={({ active, selected }) =>
`${
active || selected
? "bg-custom-background-100"
: ""
} ${
selected ? "" : "text-custom-text-200"
} flex cursor-pointer select-none items-center gap-2 truncate p-2`
}
value={child.id}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: child?.color ?? "black",
}}
/>
{child.name}
</Listbox.Option>
))}
</div>
</div>
);
})
) : (
<div className="text-center">No labels found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
)}
/>
{!isNotAllowed && (
<button
type="button"
className={`flex ${
isNotAllowed || uneditable
? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90"
} items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
onClick={() => setCreateLabelForm((prevData) => !prevData)}
disabled={uneditable}
>
{createLabelForm ? (
<>
<XMarkIcon className="h-3 w-3" /> Cancel
</>
) : (
<>
<PlusIcon className="h-3 w-3" /> New
</>
)}
</button>
)}
</div>
</div>
</div>
{createLabelForm && (
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
<div>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
>
{watch("color") && watch("color") !== "" && (
<span
className="h-5 w-5 rounded"
style={{
backgroundColor: watch("color") ?? "black",
}}
/>
)}
<ChevronDownIcon className="h-3 w-3" />
</Popover.Button>
<Transition
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"
>
<Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
<Controller
name="color"
control={labelControl}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Input
id="name"
name="name"
placeholder="Title"
register={register}
validations={{
required: "This is required",
}}
autoComplete="off"
/>
<button
type="button"
className="grid place-items-center rounded bg-red-500 p-2.5"
onClick={() => setCreateLabelForm(false)}
>
<XMarkIcon className="h-4 w-4 text-white" />
</button>
<button
type="submit"
className="grid place-items-center rounded bg-green-500 p-2.5"
disabled={isSubmitting}
>
<PlusIcon className="h-4 w-4 text-white" />
</button>
</form>
)}
</div>
);
};

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

@ -1,15 +1,11 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import { mutate } from "swr";
// react-hook-form // react-hook-form
import { useForm, Controller, UseFormWatch, Control } from "react-hook-form"; import { Controller, UseFormWatch } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// headless ui
import { Popover, Listbox, Transition } from "@headlessui/react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
@ -31,26 +27,24 @@ import {
SidebarPrioritySelect, SidebarPrioritySelect,
SidebarStateSelect, SidebarStateSelect,
SidebarEstimateSelect, SidebarEstimateSelect,
SidebarLabelSelect,
} from "components/issues"; } from "components/issues";
// ui // ui
import { Input, Spinner, CustomDatePicker } from "components/ui"; import { CustomDatePicker } from "components/ui";
// icons // icons
import { import {
TagIcon,
ChevronDownIcon,
LinkIcon, LinkIcon,
CalendarDaysIcon, CalendarDaysIcon,
TrashIcon, TrashIcon,
PlusIcon, PlusIcon,
XMarkIcon, XMarkIcon,
RectangleGroupIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule } from "types"; import type { ICycle, IIssue, IIssueLink, IModule } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; import { ISSUE_DETAILS } from "constants/fetch-keys";
type Props = { type Props = {
control: any; control: any;
@ -76,11 +70,6 @@ type Props = {
uneditable?: boolean; uneditable?: boolean;
}; };
const defaultValues: Partial<IIssueLabels> = {
name: "",
color: "#ff0000",
};
export const IssueDetailsSidebar: React.FC<Props> = ({ export const IssueDetailsSidebar: React.FC<Props> = ({
control, control,
submitChanges, submitChanges,
@ -89,7 +78,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
fieldsToShow = ["all"], fieldsToShow = ["all"],
uneditable = false, uneditable = false,
}) => { }) => {
const [createLabelForm, setCreateLabelForm] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [linkModal, setLinkModal] = useState(false); const [linkModal, setLinkModal] = useState(false);
@ -102,45 +90,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { data: issues } = useSWR(
workspaceSlug && projectId
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
: null,
workspaceSlug && projectId
? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
: null
);
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const {
register,
handleSubmit,
formState: { isSubmitting },
reset,
watch,
control: controlLabel,
} = useForm({
defaultValues,
});
const handleNewLabel = (formData: any) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
issuesService
.createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
.then((res) => {
reset(defaultValues);
issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
submitChanges({ labels_list: [...(issueDetail?.labels ?? []), res.id] });
setCreateLabelForm(false);
});
};
const handleCycleChange = useCallback( const handleCycleChange = useCallback(
(cycleDetails: ICycle) => { (cycleDetails: ICycle) => {
if (!workspaceSlug || !projectId || !issueDetail) return; if (!workspaceSlug || !projectId || !issueDetail) return;
@ -243,12 +192,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
}); });
}; };
useEffect(() => {
if (!createLabelForm) return;
reset();
}, [createLabelForm, reset]);
const showFirstSection = const showFirstSection =
fieldsToShow.includes("all") || fieldsToShow.includes("all") ||
fieldsToShow.includes("state") || fieldsToShow.includes("state") ||
@ -283,7 +226,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
data={issueDetail ?? null} data={issueDetail ?? null}
user={user} user={user}
/> />
<div className="sticky top-5 w-full divide-y-2 divide-custom-border-300"> <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium"> <h4 className="text-sm font-medium">
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id} {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@ -310,445 +253,203 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className={`divide-y-2 divide-custom-border-300 ${uneditable ? "opacity-60" : ""}`}> <div className="h-full w-full overflow-y-auto">
{showFirstSection && ( <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
<div className="py-1"> {showFirstSection && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && ( <div className="py-1">
<Controller {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
control={control} <Controller
name="state" control={control}
render={({ field: { value } }) => ( name="state"
<SidebarStateSelect render={({ field: { value } }) => (
value={value} <SidebarStateSelect
onChange={(val: string) => submitChanges({ state: val })} value={value}
userAuth={memberRole} onChange={(val: string) => submitChanges({ state: val })}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
/> )}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && ( )}
<Controller {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
control={control} <Controller
name="assignees_list" control={control}
render={({ field: { value } }) => ( name="assignees_list"
<SidebarAssigneeSelect render={({ field: { value } }) => (
value={value} <SidebarAssigneeSelect
onChange={(val: string[]) => submitChanges({ assignees_list: val })} value={value}
userAuth={memberRole} onChange={(val: string[]) => submitChanges({ assignees_list: val })}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
/> )}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && ( )}
<Controller {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
control={control} <Controller
name="priority" control={control}
render={({ field: { value } }) => ( name="priority"
<SidebarPrioritySelect render={({ field: { value } }) => (
value={value} <SidebarPrioritySelect
onChange={(val: string) => submitChanges({ priority: val })} value={value}
userAuth={memberRole} onChange={(val: string) => submitChanges({ priority: val })}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
/> )}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && ( )}
<Controller {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
control={control} <Controller
name="estimate_point" control={control}
render={({ field: { value } }) => ( name="estimate_point"
<SidebarEstimateSelect render={({ field: { value } }) => (
value={value} <SidebarEstimateSelect
onChange={(val: number | null) => submitChanges({ estimate_point: val })} value={value}
userAuth={memberRole} onChange={(val: number | null) => submitChanges({ estimate_point: val })}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
/> )}
)} />
</div> )}
)} </div>
{showSecondSection && ( )}
<div className="py-1"> {showSecondSection && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( <div className="py-1">
<SidebarParentSelect {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
control={control} <SidebarParentSelect
submitChanges={submitChanges} control={control}
customDisplay={ submitChanges={submitChanges}
issueDetail?.parent_detail ? ( customDisplay={
<button issueDetail?.parent_detail ? (
type="button" <button
className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs" type="button"
onClick={() => submitChanges({ parent: null })} className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs"
> onClick={() => submitChanges({ parent: null })}
<span className="text-custom-text-200">Selected:</span>{" "} >
{issueDetail.parent_detail?.name} <span className="text-custom-text-200">Selected:</span>{" "}
<XMarkIcon className="h-3 w-3" /> {issueDetail.parent_detail?.name}
</button> <XMarkIcon className="h-3 w-3" />
) : ( </button>
<div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200"> ) : (
No parent selected <div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200">
</div> No parent selected
) </div>
} )
watch={watchIssue} }
userAuth={memberRole} watch={watchIssue}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && ( )}
<SidebarBlockerSelect {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
issueId={issueId as string} <SidebarBlockerSelect
submitChanges={submitChanges} issueId={issueId as string}
watch={watchIssue} submitChanges={submitChanges}
userAuth={memberRole} watch={watchIssue}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && ( )}
<SidebarBlockedSelect {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
issueId={issueId as string} <SidebarBlockedSelect
submitChanges={submitChanges} issueId={issueId as string}
watch={watchIssue} submitChanges={submitChanges}
userAuth={memberRole} watch={watchIssue}
disabled={uneditable} userAuth={memberRole}
/> disabled={uneditable}
)} />
{(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && ( )}
<div className="flex flex-wrap items-center py-2"> {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2"> <div className="flex flex-wrap items-center py-2">
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0" /> <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
<p>Due date</p> <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
<p>Due date</p>
</div>
<div className="sm:basis-1/2">
<Controller
control={control}
name="target_date"
render={({ field: { value } }) => (
<CustomDatePicker
placeholder="Due date"
value={value}
onChange={(val) =>
submitChanges({
target_date: val,
})
}
className="bg-custom-background-90"
disabled={isNotAllowed || uneditable}
/>
)}
/>
</div>
</div> </div>
<div className="sm:basis-1/2"> )}
<Controller </div>
control={control} )}
name="target_date" {showThirdSection && (
render={({ field: { value } }) => ( <div className="py-1">
<CustomDatePicker {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
placeholder="Due date" <SidebarCycleSelect
value={value} issueDetail={issueDetail}
onChange={(val) => handleCycleChange={handleCycleChange}
submitChanges({ userAuth={memberRole}
target_date: val, disabled={uneditable}
}) />
} )}
className="bg-custom-background-90" {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
disabled={isNotAllowed || uneditable} <SidebarModuleSelect
/> issueDetail={issueDetail}
)} handleModuleChange={handleModuleChange}
/> userAuth={memberRole}
</div> disabled={uneditable}
</div> />
)} )}
</div> </div>
)}
</div>
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
<SidebarLabelSelect
issueDetails={issueDetail}
issueControl={control}
watchIssue={watchIssue}
submitChanges={submitChanges}
isNotAllowed={isNotAllowed}
uneditable={uneditable ?? false}
/>
)} )}
{showThirdSection && ( {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
<div className="py-1"> <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && ( <div className="flex items-center justify-between gap-2">
<SidebarCycleSelect <h4>Links</h4>
issueDetail={issueDetail} {!isNotAllowed && (
handleCycleChange={handleCycleChange} <button
userAuth={memberRole} type="button"
disabled={uneditable} className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
/> uneditable ? "cursor-not-allowed" : "cursor-pointer"
)} }`}
{(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && ( onClick={() => setLinkModal(true)}
<SidebarModuleSelect disabled={uneditable}
issueDetail={issueDetail} >
handleModuleChange={handleModuleChange} <PlusIcon className="h-4 w-4" />
userAuth={memberRole} </button>
disabled={uneditable} )}
/> </div>
)} <div className="mt-2 space-y-2">
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
<LinksList
links={issueDetail.issue_link}
handleDeleteLink={handleDeleteLink}
userAuth={memberRole}
/>
) : null}
</div>
</div> </div>
)} )}
</div> </div>
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
<div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
<div className="flex items-start justify-between">
<div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
<TagIcon className="h-4 w-4" />
<p>Label</p>
</div>
<div className="basis-1/2">
<div className="flex flex-wrap gap-1">
{watchIssue("labels_list")?.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
if (label)
return (
<span
key={label.id}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
onClick={() => {
const updatedLabels = watchIssue("labels_list")?.filter(
(l) => l !== labelId
);
submitChanges({
labels_list: updatedLabels,
});
}}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor:
label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
<XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
</span>
);
})}
<Controller
control={control}
name="labels_list"
render={({ field: { value } }) => (
<Listbox
as="div"
value={value}
onChange={(val: any) => submitChanges({ labels_list: val })}
className="flex-shrink-0"
multiple
disabled={isNotAllowed || uneditable}
>
{({ open }) => (
<div className="relative">
<Listbox.Button
className={`flex ${
isNotAllowed || uneditable
? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90"
} items-center gap-2 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
>
Select Label
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-300 focus:outline-none">
<div className="py-1">
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label: IIssueLabels) => {
const children = issueLabels?.filter(
(l) => l.parent === label.id
);
if (children.length === 0) {
if (!label.parent)
return (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
`${
active || selected
? "bg-custom-background-90"
: ""
} ${
selected ? "" : "text-custom-text-200"
} flex cursor-pointer select-none items-center gap-2 truncate p-2`
}
value={label.id}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor:
label.color && label.color !== ""
? label.color
: "#000",
}}
/>
{label.name}
</Listbox.Option>
);
} else
return (
<div className="border-y border-custom-border-300 bg-custom-background-90">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
<RectangleGroupIcon className="h-3 w-3" />
{label.name}
</div>
<div>
{children.map((child) => (
<Listbox.Option
key={child.id}
className={({ active, selected }) =>
`${
active || selected
? "bg-custom-background-100"
: ""
} ${
selected ? "" : "text-custom-text-200"
} flex cursor-pointer select-none items-center gap-2 truncate p-2`
}
value={child.id}
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: child?.color ?? "black",
}}
/>
{child.name}
</Listbox.Option>
))}
</div>
</div>
);
})
) : (
<div className="text-center">No labels found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
)}
/>
{!isNotAllowed && (
<button
type="button"
className={`flex ${
isNotAllowed || uneditable
? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90"
} items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
onClick={() => setCreateLabelForm((prevData) => !prevData)}
disabled={uneditable}
>
{createLabelForm ? (
<>
<XMarkIcon className="h-3 w-3" /> Cancel
</>
) : (
<>
<PlusIcon className="h-3 w-3" /> New
</>
)}
</button>
)}
</div>
</div>
</div>
{createLabelForm && (
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
<div>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
>
{watch("color") && watch("color") !== "" && (
<span
className="h-5 w-5 rounded"
style={{
backgroundColor: watch("color") ?? "black",
}}
/>
)}
<ChevronDownIcon className="h-3 w-3" />
</Popover.Button>
<Transition
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"
>
<Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
<Controller
name="color"
control={controlLabel}
render={({ field: { value, onChange } }) => (
<TwitterPicker
color={value}
onChange={(value) => onChange(value.hex)}
/>
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Input
id="name"
name="name"
placeholder="Title"
register={register}
validations={{
required: "This is required",
}}
autoComplete="off"
/>
<button
type="submit"
className="grid place-items-center rounded bg-red-500 p-2.5"
onClick={() => setCreateLabelForm(false)}
>
<XMarkIcon className="h-4 w-4 text-white" />
</button>
<button
type="submit"
className="grid place-items-center rounded bg-green-500 p-2.5"
disabled={isSubmitting}
>
<PlusIcon className="h-4 w-4 text-white" />
</button>
</form>
)}
</div>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
<div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
<div className="flex items-center justify-between gap-2">
<h4>Links</h4>
{!isNotAllowed && (
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
uneditable ? "cursor-not-allowed" : "cursor-pointer"
}`}
onClick={() => setLinkModal(true)}
disabled={uneditable}
>
<PlusIcon className="h-4 w-4" />
</button>
)}
</div>
<div className="mt-2 space-y-2">
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
<LinksList
links={issueDetail.issue_link}
handleDeleteLink={handleDeleteLink}
userAuth={memberRole}
/>
) : null}
</div>
</div>
)}
</div> </div>
</> </>
); );

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -119,11 +119,11 @@ const IssueDetailsPage: NextPage = () => {
} }
> >
{issueDetails && projectId ? ( {issueDetails && projectId ? (
<div className="flex h-full"> <div className="flex h-full overflow-hidden">
<div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-300 p-5"> <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} /> <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div> </div>
<div className="w-1/3 space-y-5 border-l border-custom-border-300 p-5"> <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
<IssueDetailsSidebar <IssueDetailsSidebar
control={control} control={control}
issueDetail={issueDetails} issueDetail={issueDetails}