mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: bug fixes (#2581)
* fix: module sidebar fix for kanban layout * chore: cycle & module sidebar improvement * chore: join project content updated * chore: project empty state header fix * chore: create project modal dropdown consistency * chore: list view group header overlapping issue fix * chore: popover code refactor * chore: module sidebar fix for cycle kanban view * chore: add existing issue option added in module empty state * chore: add existing issue option added in cycle empty state
This commit is contained in:
parent
13ead7c314
commit
548e95c7e0
@ -7,14 +7,19 @@ export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
|
|||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 16 16"
|
||||||
className={`${className} stroke-2`}
|
className={`${className} stroke-1`}
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
<circle cx="8.33333" cy="8.33333" r="5.33333" stroke-linecap="round" />
|
<circle
|
||||||
|
cx="8.33333"
|
||||||
|
cy="8.33333"
|
||||||
|
r="5.33333"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
<circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
|
<circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
@ -3,7 +3,7 @@ import React from "react";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
// ui
|
// ui
|
||||||
import { PrimaryButton } from "components/ui";
|
import { Button } from "@plane/ui";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: string;
|
title: string;
|
||||||
@ -33,10 +33,14 @@ export const EmptyState: React.FC<Props> = ({
|
|||||||
{description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
|
{description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
{primaryButton && (
|
{primaryButton && (
|
||||||
<PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick} disabled={disabled}>
|
<Button
|
||||||
{primaryButton.icon}
|
variant="primary"
|
||||||
|
prependIcon={primaryButton.icon}
|
||||||
|
onClick={primaryButton.onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
{primaryButton.text}
|
{primaryButton.text}
|
||||||
</PrimaryButton>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{secondaryButton}
|
{secondaryButton}
|
||||||
</div>
|
</div>
|
||||||
|
@ -383,41 +383,39 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
</Popover>
|
</Popover>
|
||||||
<MoveRight className="h-4 w-4 text-custom-text-300" />
|
<MoveRight className="h-4 w-4 text-custom-text-300" />
|
||||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||||
{({}) => (
|
<>
|
||||||
<>
|
<Popover.Button
|
||||||
<Popover.Button
|
disabled={isCompleted ?? false}
|
||||||
disabled={isCompleted ?? false}
|
className="text-sm text-custom-text-300 font-medium cursor-default"
|
||||||
className="text-sm text-custom-text-300 font-medium cursor-default"
|
>
|
||||||
>
|
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
</Popover.Button>
|
||||||
</Popover.Button>
|
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
enter="transition ease-out duration-200"
|
enter="transition ease-out duration-200"
|
||||||
enterFrom="opacity-0 translate-y-1"
|
enterFrom="opacity-0 translate-y-1"
|
||||||
enterTo="opacity-100 translate-y-0"
|
enterTo="opacity-100 translate-y-0"
|
||||||
leave="transition ease-in duration-150"
|
leave="transition ease-in duration-150"
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
leaveTo="opacity-0 translate-y-1"
|
leaveTo="opacity-0 translate-y-1"
|
||||||
>
|
>
|
||||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||||
<CustomRangeDatePicker
|
<CustomRangeDatePicker
|
||||||
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
|
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
handleEndDateChange(val);
|
handleEndDateChange(val);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
startDate={watch("start_date") ? `${watch("start_date")}` : null}
|
startDate={watch("start_date") ? `${watch("start_date")}` : null}
|
||||||
endDate={watch("end_date") ? `${watch("end_date")}` : null}
|
endDate={watch("end_date") ? `${watch("end_date")}` : null}
|
||||||
minDate={new Date(`${watch("start_date")}`)}
|
minDate={new Date(`${watch("start_date")}`)}
|
||||||
selectsEnd
|
selectsEnd
|
||||||
/>
|
/>
|
||||||
</Popover.Panel>
|
</Popover.Panel>
|
||||||
</Transition>
|
</Transition>
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -459,7 +457,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
<Disclosure>
|
<Disclosure>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||||
<div className="flex w-full items-center justify-between gap-2">
|
<Disclosure.Button
|
||||||
|
className="flex w-full items-center justify-between gap-2 p-1.5"
|
||||||
|
disabled={!isStartValid || !isEndValid}
|
||||||
|
>
|
||||||
<div className="flex items-center justify-start gap-2 text-sm">
|
<div className="flex items-center justify-start gap-2 text-sm">
|
||||||
<span className="font-medium text-custom-text-200">Progress</span>
|
<span className="font-medium text-custom-text-200">Progress</span>
|
||||||
</div>
|
</div>
|
||||||
@ -473,12 +474,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{isStartValid && isEndValid ? (
|
{isStartValid && isEndValid ? (
|
||||||
<Disclosure.Button className="p-1.5">
|
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
||||||
<ChevronDown
|
|
||||||
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</Disclosure.Button>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
||||||
@ -488,7 +484,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Disclosure.Button>
|
||||||
<Transition show={open}>
|
<Transition show={open}>
|
||||||
<Disclosure.Panel>
|
<Disclosure.Panel>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
|
@ -10,10 +10,14 @@ import { observer } from "mobx-react-lite";
|
|||||||
|
|
||||||
export const ProjectsHeader = observer(() => {
|
export const ProjectsHeader = observer(() => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
// store
|
// store
|
||||||
const { project: projectStore, workspace: workspaceStore } = useMobxStore();
|
const { project: projectStore, workspace: workspaceStore } = useMobxStore();
|
||||||
const currentWorkspace = workspaceStore.currentWorkspace;
|
const currentWorkspace = workspaceStore.currentWorkspace;
|
||||||
|
|
||||||
|
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
|
className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
|
||||||
@ -29,15 +33,17 @@ export const ProjectsHeader = observer(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
|
{projectsList?.length > 0 && (
|
||||||
<Search className="h-3.5 w-3.5" />
|
<div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
|
||||||
<input
|
<Search className="h-3.5 w-3.5" />
|
||||||
className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
<input
|
||||||
value={projectStore.searchQuery}
|
className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
||||||
onChange={(e) => projectStore.setSearchQuery(e.target.value)}
|
value={projectStore.searchQuery}
|
||||||
placeholder="Search"
|
onChange={(e) => projectStore.setSearchQuery(e.target.value)}
|
||||||
/>
|
placeholder="Search"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
prependIcon={<Plus />}
|
prependIcon={<Plus />}
|
||||||
|
@ -3,8 +3,13 @@ import { PlusIcon } from "lucide-react";
|
|||||||
import { EmptyState } from "components/common";
|
import { EmptyState } from "components/common";
|
||||||
// assets
|
// assets
|
||||||
import emptyIssue from "public/empty-state/issue.svg";
|
import emptyIssue from "public/empty-state/issue.svg";
|
||||||
|
import { Button } from "@plane/ui";
|
||||||
|
|
||||||
export const CycleEmptyState: React.FC = () => (
|
type Props = {
|
||||||
|
openIssuesListModal: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
|
||||||
<div className="h-full w-full grid place-items-center">
|
<div className="h-full w-full grid place-items-center">
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="Cycle issues will appear here"
|
title="Cycle issues will appear here"
|
||||||
@ -20,6 +25,14 @@ export const CycleEmptyState: React.FC = () => (
|
|||||||
document.dispatchEvent(e);
|
document.dispatchEvent(e);
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
secondaryButton={
|
||||||
|
<Button
|
||||||
|
variant="neutral-primary"
|
||||||
|
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,10 +1,15 @@
|
|||||||
import { PlusIcon } from "lucide-react";
|
import { PlusIcon } from "lucide-react";
|
||||||
// components
|
// components
|
||||||
import { EmptyState } from "components/common";
|
import { EmptyState } from "components/common";
|
||||||
|
import { Button } from "@plane/ui";
|
||||||
// assets
|
// assets
|
||||||
import emptyIssue from "public/empty-state/issue.svg";
|
import emptyIssue from "public/empty-state/issue.svg";
|
||||||
|
|
||||||
export const ModuleEmptyState: React.FC = () => (
|
type Props = {
|
||||||
|
openIssuesListModal: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
|
||||||
<div className="h-full w-full grid place-items-center">
|
<div className="h-full w-full grid place-items-center">
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="Module issues will appear here"
|
title="Module issues will appear here"
|
||||||
@ -20,6 +25,15 @@ export const ModuleEmptyState: React.FC = () => (
|
|||||||
document.dispatchEvent(e);
|
document.dispatchEvent(e);
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
secondaryButton={
|
||||||
|
<Button
|
||||||
|
variant="neutral-primary"
|
||||||
|
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
|
||||||
|
onClick={openIssuesListModal}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -18,7 +18,11 @@ import { TransferIssues, TransferIssuesModal } from "components/cycles";
|
|||||||
// helpers
|
// helpers
|
||||||
import { getDateRangeStatus } from "helpers/date-time.helper";
|
import { getDateRangeStatus } from "helpers/date-time.helper";
|
||||||
|
|
||||||
export const CycleLayoutRoot: React.FC = observer(() => {
|
type Props = {
|
||||||
|
openIssuesListModal: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
|
||||||
const [transferIssuesModal, setTransferIssuesModal] = useState(false);
|
const [transferIssuesModal, setTransferIssuesModal] = useState(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -60,7 +64,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
|
|||||||
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
|
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
|
||||||
<CycleAppliedFiltersRoot />
|
<CycleAppliedFiltersRoot />
|
||||||
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
||||||
<CycleEmptyState />
|
<CycleEmptyState openIssuesListModal={openIssuesListModal} />
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full overflow-auto">
|
<div className="w-full h-full overflow-auto">
|
||||||
{activeLayout === "list" ? (
|
{activeLayout === "list" ? (
|
||||||
|
@ -16,7 +16,11 @@ import {
|
|||||||
ModuleSpreadsheetLayout,
|
ModuleSpreadsheetLayout,
|
||||||
} from "components/issues";
|
} from "components/issues";
|
||||||
|
|
||||||
export const ModuleLayoutRoot: React.FC = observer(() => {
|
type Props = {
|
||||||
|
openIssuesListModal: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, moduleId } = router.query as {
|
const { workspaceSlug, projectId, moduleId } = router.query as {
|
||||||
workspaceSlug: string;
|
workspaceSlug: string;
|
||||||
@ -53,7 +57,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
|
|||||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||||
<ModuleAppliedFiltersRoot />
|
<ModuleAppliedFiltersRoot />
|
||||||
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
||||||
<ModuleEmptyState />
|
<ModuleEmptyState openIssuesListModal={openIssuesListModal} />
|
||||||
) : (
|
) : (
|
||||||
<div className="h-full w-full overflow-auto">
|
<div className="h-full w-full overflow-auto">
|
||||||
{activeLayout === "list" ? (
|
{activeLayout === "list" ? (
|
||||||
|
@ -239,40 +239,38 @@ export const SidebarLabelSelect: React.FC<Props> = ({
|
|||||||
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
|
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
|
||||||
<div>
|
<div>
|
||||||
<Popover className="relative">
|
<Popover className="relative">
|
||||||
{({}) => (
|
<>
|
||||||
<>
|
<Popover.Button className="grid place-items-center outline-none">
|
||||||
<Popover.Button className="grid place-items-center outline-none">
|
{watch("color") && watch("color") !== "" && (
|
||||||
{watch("color") && watch("color") !== "" && (
|
<span
|
||||||
<span
|
className="h-6 w-6 rounded"
|
||||||
className="h-6 w-6 rounded"
|
style={{
|
||||||
style={{
|
backgroundColor: watch("color") ?? "black",
|
||||||
backgroundColor: watch("color") ?? "black",
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
</Popover.Button>
|
||||||
</Popover.Button>
|
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
enter="transition ease-out duration-200"
|
enter="transition ease-out duration-200"
|
||||||
enterFrom="opacity-0 translate-y-1"
|
enterFrom="opacity-0 translate-y-1"
|
||||||
enterTo="opacity-100 translate-y-0"
|
enterTo="opacity-100 translate-y-0"
|
||||||
leave="transition ease-in duration-150"
|
leave="transition ease-in duration-150"
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
leaveTo="opacity-0 translate-y-1"
|
leaveTo="opacity-0 translate-y-1"
|
||||||
>
|
>
|
||||||
<Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
|
<Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
|
||||||
<Controller
|
<Controller
|
||||||
name="color"
|
name="color"
|
||||||
control={control}
|
control={control}
|
||||||
render={({ field: { value, onChange } }) => (
|
render={({ field: { value, onChange } }) => (
|
||||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</Popover.Panel>
|
</Popover.Panel>
|
||||||
</Transition>
|
</Transition>
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -327,7 +327,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
<Disclosure>
|
<Disclosure>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||||
<div className="flex w-full items-center justify-between gap-2">
|
<Disclosure.Button
|
||||||
|
className="flex w-full items-center justify-between gap-2 p-1.5"
|
||||||
|
disabled={!isStartValid || !isEndValid}
|
||||||
|
>
|
||||||
<div className="flex items-center justify-start gap-2 text-sm">
|
<div className="flex items-center justify-start gap-2 text-sm">
|
||||||
<span className="font-medium text-custom-text-200">Progress</span>
|
<span className="font-medium text-custom-text-200">Progress</span>
|
||||||
</div>
|
</div>
|
||||||
@ -341,12 +344,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{isStartValid && isEndValid ? (
|
{isStartValid && isEndValid ? (
|
||||||
<Disclosure.Button className="p-1.5">
|
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
||||||
<ChevronDown
|
|
||||||
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</Disclosure.Button>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
||||||
@ -356,7 +354,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Disclosure.Button>
|
||||||
<Transition show={open}>
|
<Transition show={open}>
|
||||||
<Disclosure.Panel>
|
<Disclosure.Panel>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
@ -415,20 +413,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||||||
<Disclosure>
|
<Disclosure>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||||
<div className="flex w-full items-center justify-between gap-2">
|
<Disclosure.Button
|
||||||
|
className="flex w-full items-center justify-between gap-2 p-1.5"
|
||||||
|
disabled={!isStartValid || !isEndValid}
|
||||||
|
>
|
||||||
<div className="flex items-center justify-start gap-2 text-sm">
|
<div className="flex items-center justify-start gap-2 text-sm">
|
||||||
<span className="font-medium text-custom-text-200">Links</span>
|
<span className="font-medium text-custom-text-200">Links</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2.5">
|
<div className="flex items-center gap-2.5">
|
||||||
<Disclosure.Button className="p-1.5">
|
<ChevronDown
|
||||||
<ChevronDown
|
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
||||||
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
aria-hidden="true"
|
||||||
aria-hidden="true"
|
/>
|
||||||
/>
|
|
||||||
</Disclosure.Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Disclosure.Button>
|
||||||
<Transition show={open}>
|
<Transition show={open}>
|
||||||
<Disclosure.Panel>
|
<Disclosure.Panel>
|
||||||
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
|
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
|
||||||
|
@ -330,9 +330,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||||||
<CustomSelect
|
<CustomSelect
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
buttonClassName="border-[0.5px] shadow-md !py-1.5"
|
buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
|
||||||
label={
|
label={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2 text-custom-text-300">
|
||||||
{currentNetwork ? (
|
{currentNetwork ? (
|
||||||
<>
|
<>
|
||||||
<currentNetwork.icon className="h-[18px] w-[18px]" />
|
<currentNetwork.icon className="h-[18px] w-[18px]" />
|
||||||
|
@ -68,7 +68,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
|
|||||||
Join Project?
|
Join Project?
|
||||||
</Dialog.Title>
|
</Dialog.Title>
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to join <span className="font-semibold">{project?.name}</span>?
|
Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
|
||||||
|
Please click the 'Join Project' button below to continue.
|
||||||
</p>
|
</p>
|
||||||
<div className="space-y-3" />
|
<div className="space-y-3" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -74,7 +74,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
|
|||||||
type="button"
|
type="button"
|
||||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||||
} `}
|
}`}
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</button>
|
</button>
|
||||||
|
@ -3,8 +3,12 @@ import { useRouter } from "next/router";
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// mobx store
|
// mobx store
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
// services
|
||||||
|
import { IssueService } from "services/issue";
|
||||||
// hooks
|
// hooks
|
||||||
import useLocalStorage from "hooks/use-local-storage";
|
import useLocalStorage from "hooks/use-local-storage";
|
||||||
|
import useUser from "hooks/use-user";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
// layouts
|
// layouts
|
||||||
import { AppLayout } from "layouts/app-layout";
|
import { AppLayout } from "layouts/app-layout";
|
||||||
// components
|
// components
|
||||||
@ -16,6 +20,10 @@ import { CycleLayoutRoot } from "components/issues/issue-layouts";
|
|||||||
import { EmptyState } from "components/common";
|
import { EmptyState } from "components/common";
|
||||||
// assets
|
// assets
|
||||||
import emptyCycle from "public/empty-state/cycle.svg";
|
import emptyCycle from "public/empty-state/cycle.svg";
|
||||||
|
// types
|
||||||
|
import { ISearchIssueResponse } from "types";
|
||||||
|
|
||||||
|
const issueService = new IssueService();
|
||||||
|
|
||||||
const SingleCycle: React.FC = () => {
|
const SingleCycle: React.FC = () => {
|
||||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||||
@ -25,6 +33,10 @@ const SingleCycle: React.FC = () => {
|
|||||||
|
|
||||||
const { cycle: cycleStore } = useMobxStore();
|
const { cycle: cycleStore } = useMobxStore();
|
||||||
|
|
||||||
|
const { user } = useUser();
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
|
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
|
||||||
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
||||||
|
|
||||||
@ -40,23 +52,27 @@ const SingleCycle: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// TODO: add this function to bulk add issues to cycle
|
// TODO: add this function to bulk add issues to cycle
|
||||||
// const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
||||||
// if (!workspaceSlug || !projectId) return;
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
// const payload = {
|
const payload = {
|
||||||
// issues: data.map((i) => i.id),
|
issues: data.map((i) => i.id),
|
||||||
// };
|
};
|
||||||
|
|
||||||
// await issueService
|
await issueService
|
||||||
// .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
|
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
|
||||||
// .catch(() => {
|
.catch(() => {
|
||||||
// setToastAlert({
|
setToastAlert({
|
||||||
// type: "error",
|
type: "error",
|
||||||
// title: "Error!",
|
title: "Error!",
|
||||||
// message: "Selected issues could not be added to the cycle. Please try again.",
|
message: "Selected issues could not be added to the cycle. Please try again.",
|
||||||
// });
|
});
|
||||||
// });
|
});
|
||||||
// };
|
};
|
||||||
|
|
||||||
|
const openIssuesListModal = () => {
|
||||||
|
setCycleIssuesListModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
|
<AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
|
||||||
@ -65,7 +81,7 @@ const SingleCycle: React.FC = () => {
|
|||||||
isOpen={cycleIssuesListModal}
|
isOpen={cycleIssuesListModal}
|
||||||
handleClose={() => setCycleIssuesListModal(false)}
|
handleClose={() => setCycleIssuesListModal(false)}
|
||||||
searchParams={{ cycle: true }}
|
searchParams={{ cycle: true }}
|
||||||
handleOnSubmit={async () => {}}
|
handleOnSubmit={handleAddIssuesToCycle}
|
||||||
/>
|
/>
|
||||||
{error ? (
|
{error ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
@ -80,8 +96,8 @@ const SingleCycle: React.FC = () => {
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="flex h-full w-full">
|
<div className="flex h-full w-full">
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full overflow-hidden">
|
||||||
<CycleLayoutRoot />
|
<CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
||||||
</div>
|
</div>
|
||||||
{cycleId && !isSidebarCollapsed && (
|
{cycleId && !isSidebarCollapsed && (
|
||||||
<div
|
<div
|
||||||
|
@ -3,8 +3,13 @@ import { useRouter } from "next/router";
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// mobx store
|
// mobx store
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import { ModuleService } from "services/module.service";
|
||||||
// hooks
|
// hooks
|
||||||
import useLocalStorage from "hooks/use-local-storage";
|
import useLocalStorage from "hooks/use-local-storage";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
import useUser from "hooks/use-user";
|
||||||
// layouts
|
// layouts
|
||||||
import { AppLayout } from "layouts/app-layout";
|
import { AppLayout } from "layouts/app-layout";
|
||||||
// components
|
// components
|
||||||
@ -18,6 +23,9 @@ import { EmptyState } from "components/common";
|
|||||||
import emptyModule from "public/empty-state/module.svg";
|
import emptyModule from "public/empty-state/module.svg";
|
||||||
// types
|
// types
|
||||||
import { NextPage } from "next";
|
import { NextPage } from "next";
|
||||||
|
import { ISearchIssueResponse } from "types";
|
||||||
|
|
||||||
|
const moduleService = new ModuleService();
|
||||||
|
|
||||||
const ModuleIssuesPage: NextPage = () => {
|
const ModuleIssuesPage: NextPage = () => {
|
||||||
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
||||||
@ -27,6 +35,10 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
|
|
||||||
const { module: moduleStore } = useMobxStore();
|
const { module: moduleStore } = useMobxStore();
|
||||||
|
|
||||||
|
const { user } = useUser();
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
|
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
|
||||||
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
|
||||||
|
|
||||||
@ -38,27 +50,27 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// TODO: add this function to bulk add issues to cycle
|
// TODO: add this function to bulk add issues to cycle
|
||||||
// const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
||||||
// if (!workspaceSlug || !projectId) return;
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
// const payload = {
|
const payload = {
|
||||||
// issues: data.map((i) => i.id),
|
issues: data.map((i) => i.id),
|
||||||
// };
|
};
|
||||||
|
|
||||||
// await moduleService
|
await moduleService
|
||||||
// .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
|
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
|
||||||
// .catch(() =>
|
.catch(() =>
|
||||||
// setToastAlert({
|
setToastAlert({
|
||||||
// type: "error",
|
type: "error",
|
||||||
// title: "Error!",
|
title: "Error!",
|
||||||
// message: "Selected issues could not be added to the module. Please try again.",
|
message: "Selected issues could not be added to the module. Please try again.",
|
||||||
// })
|
})
|
||||||
// );
|
);
|
||||||
// };
|
};
|
||||||
|
|
||||||
// const openIssuesListModal = () => {
|
const openIssuesListModal = () => {
|
||||||
// setModuleIssuesListModal(true);
|
setModuleIssuesListModal(true);
|
||||||
// };
|
};
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
const toggleSidebar = () => {
|
||||||
setValue(`${!isSidebarCollapsed}`);
|
setValue(`${!isSidebarCollapsed}`);
|
||||||
@ -72,7 +84,7 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
isOpen={moduleIssuesListModal}
|
isOpen={moduleIssuesListModal}
|
||||||
handleClose={() => setModuleIssuesListModal(false)}
|
handleClose={() => setModuleIssuesListModal(false)}
|
||||||
searchParams={{ module: true }}
|
searchParams={{ module: true }}
|
||||||
handleOnSubmit={async () => {}}
|
handleOnSubmit={handleAddIssuesToModule}
|
||||||
/>
|
/>
|
||||||
{error ? (
|
{error ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
@ -86,8 +98,8 @@ const ModuleIssuesPage: NextPage = () => {
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-full w-full">
|
<div className="flex h-full w-full">
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full overflow-hidden">
|
||||||
<ModuleLayoutRoot />
|
<ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
||||||
</div>
|
</div>
|
||||||
{moduleId && !isSidebarCollapsed && (
|
{moduleId && !isSidebarCollapsed && (
|
||||||
<div
|
<div
|
||||||
|
Loading…
Reference in New Issue
Block a user