binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: project settings (#2575)

Browse source 
* refactor: project setting estimate

* refactor: project setting label

* refactor: project setting state

* refactor: project setting integration

* refactor: project settings member

* fix: estimate not updating

* fix: estimate not in observable

* fix: build error
This commit is contained in:
Dakshesh Jain 2023-11-01 13:42:51 +05:30 • committed by GitHub
parent 80e6d7e1ea
commit 2d64caef90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 2308 additions and 1929 deletions
Download patch file Download diff file Expand all files Collapse all files

283
web/components/estimates/create-update-estimate-modal.tsx
View file

@ -1,15 +1,11 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import { ProjectEstimateService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// ui
@ -17,29 +13,15 @@ import { Button, Input, TextArea } from "@plane/ui";
// helpers
import { checkDuplicates } from "helpers/array.helper";
// types
import { IUser, IEstimate, IEstimateFormData } from "types";
// fetch-keys
import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
import { IEstimate, IEstimateFormData } from "types";
type Props = {
isOpen: boolean;
handleClose: () => void;
data?: IEstimate;
user: IUser | undefined;
};
type FormValues = {
name: string;
description: string;
value1: string;
value2: string;
value3: string;
value4: string;
value5: string;
value6: string;
};
const defaultValues: Partial<FormValues> = {
const defaultValues = {
name: "",
description: "",
value1: "",
@ -50,10 +32,18 @@ const defaultValues: Partial<FormValues> = {
value6: "",
};
// services
const projectEstimateService = new ProjectEstimateService();
type FormValues = typeof defaultValues;
export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
const { handleClose, data, isOpen } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectEstimates: projectEstimatesStore } = useMobxStore();
export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
const {
formState: { errors, isSubmitting },
handleSubmit,
@ -68,71 +58,47 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
reset();
};
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const createEstimate = async (payload: IEstimateFormData) => {
if (!workspaceSlug || !projectId) return;
await projectEstimateService
.createEstimate(workspaceSlug as string, projectId as string, payload, user)
await projectEstimatesStore
.createEstimate(workspaceSlug.toString(), projectId.toString(), payload)
.then(() => {
mutate(ESTIMATES_LIST(projectId as string));
onClose();
})
.catch((err) => {
if (err.status === 400)
setToastAlert({
type: "error",
title: "Error!",
message: "Estimate with that name already exists. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "Estimate could not be created. Please try again.",
});
const error = err?.error;
const errorString = Array.isArray(error) ? error[0] : error;
setToastAlert({
type: "error",
title: "Error!",
message:
errorString ?? err.status === 400
? "Estimate with that name already exists. Please try again with another name."
: "Estimate could not be created. Please try again.",
});
});
};
const updateEstimate = async (payload: IEstimateFormData) => {
if (!workspaceSlug || !projectId || !data) return;
mutate<IEstimate[]>(
ESTIMATES_LIST(projectId.toString()),
(prevData) =>
prevData?.map((p) => {
if (p.id === data.id)
return {
...p,
name: payload.estimate.name,
description: payload.estimate.description,
points: p.points.map((point, index) => ({
...point,
value: payload.estimate_points[index].value,
})),
};
return p;
}),
false
);
await projectEstimateService
.patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload, user)
await projectEstimatesStore
.updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload)
.then(() => {
mutate(ESTIMATES_LIST(projectId.toString()));
mutate(ESTIMATE_DETAILS(data.id));
handleClose();
})
.catch(() => {
.catch((err) => {
const error = err?.error;
const errorString = Array.isArray(error) ? error[0] : error;
setToastAlert({
type: "error",
title: "Error!",
message: "Estimate could not be updated. Please try again.",
message: errorString ?? "Estimate could not be updated. Please try again.",
});
});
@ -291,151 +257,38 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
)}
/>
</div>
{/* list of all the points */}
{/* since they are all the same, we can use a loop to render them */}
<div className="grid grid-cols-3 gap-3">
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value1"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value1"
name="value1"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value1)}
placeholder="Point 1"
className="rounded-l-none w-full"
{Array(6)
.fill(0)
.map((_, i) => (
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name={`value${i + 1}` as keyof FormValues}
render={({ field: { value, onChange, ref } }) => (
<Input
ref={ref}
type="text"
value={value}
onChange={onChange}
id={`value${i + 1}`}
name={`value${i + 1}`}
placeholder={`Point ${i + 1}`}
className="rounded-l-none w-full"
hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
/>
)}
/>
)}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value2"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value2"
name="value2"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value2)}
placeholder="Point 2"
className="rounded-l-none w-full"
/>
)}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value3"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value3"
name="value3"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value3)}
placeholder="Point 3"
className="rounded-l-none w-full"
/>
)}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value4"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value4"
name="value4"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value4)}
placeholder="Point 4"
className="rounded-l-none w-full"
/>
)}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value5"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value5"
name="value5"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value5)}
placeholder="Point 5"
className="rounded-l-none w-full"
/>
)}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="flex h-full items-center rounded-lg bg-custom-background-80">
<span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
<span className="rounded-r-lg bg-custom-background-100">
<Controller
control={control}
name="value6"
render={({ field: { value, onChange, ref } }) => (
<Input
id="value6"
name="value6"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.value6)}
placeholder="Point 6"
className="rounded-l-none w-full"
/>
)}
/>
</span>
</span>
</div>
</span>
</span>
</div>
))}
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
@ -461,4 +314,4 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
</Transition.Root>
</>
);
};
});

50
web/components/estimates/delete-estimate-modal.tsx
View file

@ -1,10 +1,13 @@
import React, { useEffect, useState } from "react";
// headless ui
import { useRouter } from "next/router";
import { Dialog, Transition } from "@headlessui/react";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// types
import { IEstimate } from "types";
// icons
import { AlertTriangle } from "lucide-react";
// ui
@ -12,14 +15,43 @@ import { Button } from "@plane/ui";
type Props = {
isOpen: boolean;
data: IEstimate | null;
handleClose: () => void;
data: IEstimate;
handleDelete: () => void;
};
export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data, handleDelete }) => {
export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
const { isOpen, handleClose, data } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectEstimates: projectEstimatesStore } = useMobxStore();
// states
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
// hooks
const { setToastAlert } = useToast();
const handleEstimateDelete = () => {
if (!workspaceSlug || !projectId) return;
const estimateId = data?.id!;
projectEstimatesStore.deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId).catch((err) => {
const error = err?.error;
const errorString = Array.isArray(error) ? error[0] : error;
setToastAlert({
type: "error",
title: "Error!",
message: errorString ?? "Estimate could not be deleted. Please try again",
});
});
};
useEffect(() => {
setIsDeleteLoading(false);
}, [isOpen]);
@ -68,7 +100,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
<span>
<p className="break-words text-sm leading-7 text-custom-text-200">
Are you sure you want to delete estimate-{" "}
<span className="break-words font-medium text-custom-text-100">{data.name}</span>
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>
{""}? All of the data related to the estiamte will be permanently removed. This action cannot be
undone.
</p>
@ -81,7 +113,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
variant="danger"
onClick={() => {
setIsDeleteLoading(true);
handleDelete();
handleEstimateDelete();
}}
loading={isDeleteLoading}
>
@ -96,4 +128,4 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
</Dialog>
</Transition.Root>
);
};
});

74
web/components/estimates/single-estimate.tsx → web/components/estimates/estimate-list-item.tsx
View file

@ -1,14 +1,12 @@
import React, { useState } from "react";
import React from "react";
import { useRouter } from "next/router";
// services
import { ProjectService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
import useProjectDetails from "hooks/use-project-details";
// components
import { DeleteEstimateModal } from "components/estimates";
// ui
import { Button, CustomMenu } from "@plane/ui";
//icons
@ -16,48 +14,46 @@ import { Pencil, Trash2 } from "lucide-react";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IUser, IEstimate } from "types";
import { IEstimate } from "types";
type Props = {
user: IUser | undefined;
estimate: IEstimate;
editEstimate: (estimate: IEstimate) => void;
handleEstimateDelete: (estimateId: string) => void;
deleteEstimate: (estimateId: string) => void;
};
// services
const projectService = new ProjectService();
export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
export const EstimateListItem: React.FC<Props> = observer((props) => {
const { estimate, editEstimate, deleteEstimate } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
const { setToastAlert } = useToast();
const { projectDetails, mutateProjectDetails } = useProjectDetails();
// derived values
const projectDetails = projectStore.project_details?.[projectId?.toString()!];
const handleUseEstimate = async () => {
if (!workspaceSlug || !projectId) return;
const payload = {
estimate: estimate.id,
};
await projectStore
.updateProject(workspaceSlug.toString(), projectId.toString(), {
estimate: estimate.id,
})
.catch((err) => {
const error = err?.error;
const errorString = Array.isArray(error) ? error[0] : error;
mutateProjectDetails((prevData: any) => {
if (!prevData) return prevData;
return { ...prevData, estimate: estimate.id };
}, false);
await projectService.updateProject(workspaceSlug as string, projectId as string, payload, user).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Estimate points could not be used. Please try again.",
setToastAlert({
type: "error",
title: "Error!",
message: errorString ?? "Estimate points could not be used. Please try again.",
});
});
});
};
return (
@ -76,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
</p>
</div>
<div className="flex items-center gap-2">
{projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
{projectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
<Button variant="neutral-primary" onClick={handleUseEstimate}>
Use
</Button>
@ -95,7 +91,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
{projectDetails?.estimate !== estimate.id && (
<CustomMenu.MenuItem
onClick={() => {
setIsDeleteEstimateModalOpen(true);
deleteEstimate(estimate.id);
}}
>
<div className="flex items-center justify-start gap-2">
@ -107,7 +103,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
</CustomMenu>
</div>
</div>
{estimate.points.length > 0 ? (
{estimate?.points?.length > 0 ? (
<div className="flex text-xs text-custom-text-200">
Estimate points (
<span className="flex gap-1">
@ -126,16 +122,6 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
</div>
)}
</div>
<DeleteEstimateModal
isOpen={isDeleteEstimateModalOpen}
handleClose={() => setIsDeleteEstimateModalOpen(false)}
data={estimate}
handleDelete={() => {
handleEstimateDelete(estimate.id);
setIsDeleteEstimateModalOpen(false);
}}
/>
</>
);
};
});

139
web/components/estimates/estimate-list.tsx Normal file
View file

@ -0,0 +1,139 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
//hooks
import useToast from "hooks/use-toast";
// ui
import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common";
// icons
import { Plus } from "lucide-react";
// images
import emptyEstimate from "public/empty-state/estimate.svg";
// types
import { IEstimate } from "types";
export const EstimatesList: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
// states
const [estimateFormOpen, setEstimateFormOpen] = useState(false);
const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
// hooks
const { setToastAlert } = useToast();
// derived values
const estimatesList = projectStore.projectEstimates;
const projectDetails = projectStore.project_details?.[projectId?.toString()!];
const editEstimate = (estimate: IEstimate) => {
setEstimateFormOpen(true);
setEstimateToUpdate(estimate);
};
const disableEstimates = () => {
if (!workspaceSlug || !projectId) return;
projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
const error = err?.error;
const errorString = Array.isArray(error) ? error[0] : error;
setToastAlert({
type: "error",
title: "Error!",
message: errorString ?? "Estimate could not be disabled. Please try again",
});
});
};
return (
<>
<CreateUpdateEstimateModal
isOpen={estimateFormOpen}
data={estimateToUpdate}
handleClose={() => {
setEstimateFormOpen(false);
setEstimateToUpdate(undefined);
}}
/>
<DeleteEstimateModal
isOpen={!!estimateToDelete}
handleClose={() => setEstimateToDelete(null)}
data={projectStore.getProjectEstimateById(estimateToDelete!)}
/>
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Estimates</h3>
<div className="col-span-12 space-y-5 sm:col-span-7">
<div className="flex items-center gap-2">
<Button
variant="primary"
onClick={() => {
setEstimateFormOpen(true);
setEstimateToUpdate(undefined);
}}
>
Add Estimate
</Button>
{projectDetails?.estimate && (
<Button variant="neutral-primary" onClick={disableEstimates}>
Disable Estimates
</Button>
)}
</div>
</div>
</section>
{estimatesList ? (
estimatesList.length > 0 ? (
<section className="h-full bg-custom-background-100 overflow-y-auto">
{estimatesList.map((estimate) => (
<EstimateListItem
key={estimate.id}
estimate={estimate}
editEstimate={(estimate) => editEstimate(estimate)}
deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
/>
))}
</section>
) : (
<div className="h-full w-full overflow-y-auto">
<EmptyState
title="No estimates yet"
description="Estimates help you communicate the complexity of an issue."
image={emptyEstimate}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Add Estimate",
onClick: () => {
setEstimateFormOpen(true);
setEstimateToUpdate(undefined);
},
}}
/>
</div>
)
) : (
<Loader className="mt-5 space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
);
});

2
web/components/estimates/index.ts
View file

@ -1,4 +1,4 @@
export * from "./create-update-estimate-modal";
export * from "./delete-estimate-modal";
export * from "./estimate-select";
export * from "./single-estimate";
export * from "./estimate-list-item";

8
web/components/issues/draft-issue-form.tsx
View file

@ -297,17 +297,11 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
<>
{projectId && (
<>
<CreateStateModal
isOpen={stateModal}
handleClose={() => setStateModal(false)}
projectId={projectId}
user={user}
/>
<CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
user={user}
onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
/>
</>

8
web/components/issues/form.tsx
View file

@ -249,17 +249,11 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
<>
{projectId && (
<>
<CreateStateModal
isOpen={stateModal}
handleClose={() => setStateModal(false)}
projectId={projectId}
user={user ?? undefined}
/>
<CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
user={user ?? undefined}
onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
/>
</>

25
web/components/labels/create-label-modal.tsx
View file

@ -1,19 +1,19 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { Controller, useForm } from "react-hook-form";
import { TwitterPicker } from "react-color";
import { Dialog, Popover, Transition } from "@headlessui/react";
// services
import { IssueLabelService } from "services/issue";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Button, Input } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// types
import type { IUser, IIssueLabels, IState } from "types";
import type { IIssueLabels, IState } from "types";
// constants
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
// types
@ -22,7 +22,6 @@ type Props = {
projectId: string;
handleClose: () => void;
onSuccess?: (response: IIssueLabels) => void;
user: IUser | undefined;
};
const defaultValues: Partial<IState> = {
@ -30,12 +29,15 @@ const defaultValues: Partial<IState> = {
color: "rgb(var(--color-text-200))",
};
const issueLabelService = new IssueLabelService();
export const CreateLabelModal: React.FC<Props> = observer((props) => {
const { isOpen, projectId, handleClose, onSuccess } = props;
export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user, onSuccess }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const { projectLabel: projectLabelStore } = useMobxStore();
const {
formState: { errors, isSubmitting },
handleSubmit,
@ -59,10 +61,9 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
const onSubmit = async (formData: IIssueLabels) => {
if (!workspaceSlug) return;
await issueLabelService
.createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
await projectLabelStore
.createLabel(workspaceSlug.toString(), projectId.toString(), formData)
.then((res) => {
mutate<IIssueLabels[]>(PROJECT_ISSUE_LABELS(projectId), (prevData) => [res, ...(prevData ?? [])], false);
onClose();
if (onSuccess) onSuccess(res);
})
@ -197,4 +198,4 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
</Dialog>
</Transition.Root>
);
};
});

300
web/components/labels/create-update-label-inline.tsx
View file

@ -1,21 +1,18 @@
import { forwardRef, useEffect, Fragment } from "react";
import React, { forwardRef, useEffect } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
// hooks
import useUserAuth from "hooks/use-user-auth";
// react-color
import { TwitterPicker } from "react-color";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
// stores
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// services
import { IssueLabelService } from "services/issue";
// ui
import { Button, Input } from "@plane/ui";
// types
import { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
type Props = {
@ -31,171 +28,162 @@ const defaultValues: Partial<IIssueLabels> = {
color: "rgb(var(--color-text-200))",
};
const issueLabelService = new IssueLabelService();
export const CreateUpdateLabelInline = observer(
forwardRef<HTMLFormElement, Props>(function CreateUpdateLabelInline(props, ref) {
const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(function CreateUpdateLabelInline(props, ref) {
const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectLabel: projectLabelStore } = useMobxStore();
const { user } = useUserAuth();
const {
handleSubmit,
control,
reset,
formState: { errors, isSubmitting },
watch,
setValue,
setFocus,
} = useForm<IIssueLabels>({
defaultValues,
});
const {
handleSubmit,
control,
reset,
formState: { errors, isSubmitting },
watch,
setValue,
} = useForm<IIssueLabels>({
defaultValues,
});
const handleClose = () => {
setLabelForm(false);
reset(defaultValues);
if (onClose) onClose();
};
const handleClose = () => {
setLabelForm(false);
reset(defaultValues);
if (onClose) onClose();
};
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await issueLabelService
.createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
.then((res) => {
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId as string),
(prevData) => [res, ...(prevData ?? [])],
false
);
await projectLabelStore.createLabel(workspaceSlug.toString(), projectId.toString(), formData).then(() => {
handleClose();
});
};
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await issueLabelService
.patchIssueLabel(workspaceSlug as string, projectId as string, labelToUpdate?.id ?? "", formData, user)
.then(() => {
reset(defaultValues);
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId as string),
(prevData) => prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
false
);
handleClose();
});
};
};
useEffect(() => {
if (!labelForm && isUpdating) return;
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
reset();
}, [labelForm, isUpdating, reset]);
await projectLabelStore
.updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData)
.then(() => {
reset(defaultValues);
handleClose();
});
};
useEffect(() => {
if (!labelToUpdate) return;
/**
* For settings focus on name input
*/
useEffect(() => {
setFocus("name");
}, [setFocus, labelForm]);
setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
setValue("name", labelToUpdate.name);
}, [labelToUpdate, setValue]);
useEffect(() => {
if (!labelToUpdate) return;
useEffect(() => {
if (labelToUpdate) {
setValue("name", labelToUpdate.name);
setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
return;
}
}, [labelToUpdate, setValue]);
setValue("color", getRandomLabelColor());
}, [labelToUpdate, setValue]);
useEffect(() => {
if (labelToUpdate) {
setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
return;
}
return (
<div
className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
labelForm ? "" : "hidden"
}`}
ref={ref}
>
<div className="flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<span
className="h-4 w-4 rounded-full"
style={{
backgroundColor: watch("color"),
}}
/>
</Popover.Button>
setValue("color", getRandomLabelColor());
}, [labelToUpdate, setValue]);
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker
colors={LABEL_COLOR_OPTIONS}
color={value}
onChange={(value) => onChange(value.hex)}
/>
)}
return (
<form
ref={ref}
onSubmit={(e) => {
e.preventDefault();
handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
}}
className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
labelForm ? "" : "hidden"
}`}
>
<div className="flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<span
className="h-4 w-4 rounded-full"
style={{
backgroundColor: watch("color"),
}}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<div className="flex flex-1 flex-col justify-center">
<Controller
control={control}
name="name"
rules={{
required: "Label title is required",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="labelName"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Label title"
className="w-full"
/>
)}
/>
</div>
<Button variant="neutral-primary" onClick={() => handleClose()}>
Cancel
</Button>
{isUpdating ? (
<Button variant="primary" onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
{isSubmitting ? "Updating" : "Update"}
</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 top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker
colors={LABEL_COLOR_OPTIONS}
color={value}
onChange={(value) => onChange(value.hex)}
/>
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<div className="flex flex-1 flex-col justify-center">
<Controller
control={control}
name="name"
rules={{
required: "Label title is required",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="labelName"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Label title"
className="w-full"
/>
)}
/>
</div>
<Button variant="neutral-primary" onClick={() => handleClose()}>
Cancel
</Button>
) : (
<Button variant="primary" onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
{isSubmitting ? "Adding" : "Add"}
<Button variant="primary" type="submit" loading={isSubmitting}>
{isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
</Button>
)}
</div>
);
});
</form>
);
})
);

53
web/components/labels/delete-label-modal.tsx
View file

@ -1,40 +1,39 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// icons
import { AlertTriangle } from "lucide-react";
// services
import { IssueLabelService } from "services/issue";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button } from "@plane/ui";
// types
import type { IUser, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import type { IIssueLabels } from "types";
type Props = {
isOpen: boolean;
onClose: () => void;
data: IIssueLabels | null;
user: IUser | undefined;
};
// services
const issueLabelService = new IssueLabelService();
export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
export const DeleteLabelModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose, data } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectLabel: projectLabelStore } = useMobxStore();
// states
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
// hooks
const { setToastAlert } = useToast();
const handleClose = () => {
@ -47,23 +46,19 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
setIsDeleteLoading(true);
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId.toString()),
(prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
false
);
await issueLabelService
.deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
.then(() => handleClose())
.catch(() => {
await projectLabelStore
.deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
.then(() => {
handleClose();
})
.catch((err) => {
setIsDeleteLoading(false);
mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
const error = err?.error || "Label could not be deleted. Please try again.";
setToastAlert({
type: "error",
title: "Error!",
message: "Label could not be deleted. Please try again.",
message: error,
});
});
};
@ -129,4 +124,4 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
</Dialog>
</Transition.Root>
);
};
});

5
web/components/labels/index.ts
View file

@ -3,5 +3,6 @@ export * from "./create-update-label-inline";
export * from "./delete-label-modal";
export * from "./label-select";
export * from "./labels-list-modal";
export * from "./single-label-group";
export * from "./single-label";
export * from "./project-setting-label-group";
export * from "./project-setting-label-list-item";
export * from "./project-setting-label-list";

63
web/components/labels/labels-list-modal.tsx
View file

@ -2,38 +2,47 @@ import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { Combobox, Dialog, Transition } from "@headlessui/react";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// icons
import { LayerStackIcon } from "@plane/ui";
import { Search } from "lucide-react";
// services
import { IssueLabelService } from "services/issue";
// types
import { IUser, IIssueLabels } from "types";
// constants
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { IIssueLabels } from "types";
type Props = {
isOpen: boolean;
handleClose: () => void;
parent: IIssueLabels | undefined;
user: IUser | undefined;
};
const issueLabelService = new IssueLabelService();
export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
const [query, setQuery] = useState("");
export const LabelsListModal: React.FC<Props> = observer((props) => {
const { isOpen, handleClose, parent } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
// store
const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
// states
const [query, setQuery] = useState("");
// api call to fetch project details
useSWR(
workspaceSlug && projectId ? "PROJECT_LABELS" : null,
workspaceSlug && projectId
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
: null
);
// derived values
const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
const filteredLabels: IIssueLabels[] =
query === ""
? issueLabels ?? []
@ -47,27 +56,9 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
const addChildLabel = async (label: IIssueLabels) => {
if (!workspaceSlug || !projectId) return;
mutate(
(prevData: any) =>
prevData?.map((l: any) => {
if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
return l;
}),
false
);
await issueLabelService
.patchIssueLabel(
workspaceSlug as string,
projectId as string,
label.id,
{
parent: parent?.id ?? "",
},
user
)
.then(() => mutate());
await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
parent: parent?.id!,
});
};
return (
@ -122,7 +113,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
if (
(label.parent === "" || label.parent === null) && // issue does not have any other parent
label.id !== parent?.id && // issue is not itself
children?.length === 0 // issue doesn't have any othe children
children?.length === 0 // issue doesn't have any other children
)
return (
<Combobox.Option
@ -173,4 +164,4 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
</Dialog>
</Transition.Root>
);
};
});

69
web/components/labels/single-label-group.tsx → web/components/labels/project-setting-label-group.tsx
View file

@ -1,72 +1,41 @@
import React from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// services
import { IssueLabelService } from "services/issue";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomMenu } from "@plane/ui";
import { CustomMenu } from "components/ui";
// icons
import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
// types
import { IUser, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { IIssueLabels } from "types";
type Props = {
label: IIssueLabels;
labelChildren: IIssueLabels[];
addLabelToGroup: (parentLabel: IIssueLabels) => void;
editLabel: (label: IIssueLabels) => void;
handleLabelDelete: () => void;
user: IUser | undefined;
editLabel: (label: IIssueLabels) => void;
addLabelToGroup: (parentLabel: IIssueLabels) => void;
};
// services
const issueLabelService = new IssueLabelService();
export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
export const SingleLabelGroup: React.FC<Props> = ({
label,
labelChildren,
addLabelToGroup,
editLabel,
handleLabelDelete,
user,
}) => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectLabel: projectLabelStore } = useMobxStore();
const removeFromGroup = (label: IIssueLabels) => {
if (!workspaceSlug || !projectId) return;
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId as string),
(prevData) =>
prevData?.map((l) => {
if (l.id === label.id) return { ...l, parent: null };
return l;
}),
false
);
issueLabelService
.patchIssueLabel(
workspaceSlug as string,
projectId as string,
label.id,
{
parent: null,
},
user
)
.then(() => {
mutate(PROJECT_ISSUE_LABELS(projectId as string));
});
projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
parent: null,
});
};
return (
@ -163,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<div className="flex items-center">
<button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
<X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
<X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
</div>
@ -176,4 +145,4 @@ export const SingleLabelGroup: React.FC<Props> = ({
)}
</Disclosure>
);
};
});

9
web/components/labels/single-label.tsx → web/components/labels/project-setting-label-list-item.tsx
View file

@ -3,11 +3,11 @@ import React, { useRef, useState } from "react";
//hook
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui
import { CustomMenu } from "@plane/ui";
import { CustomMenu } from "components/ui";
// types
import { IIssueLabels } from "types";
//icons
import { Component, Pencil, X } from "lucide-react";
import { Component, X, Pencil } from "lucide-react";
type Props = {
label: IIssueLabels;
@ -16,7 +16,9 @@ type Props = {
handleLabelDelete: () => void;
};
export const SingleLabel: React.FC<Props> = ({ label, addLabelToGroup, editLabel, handleLabelDelete }) => {
export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
const [isMenuActive, setIsMenuActive] = useState(false);
const actionSectionRef = useRef<HTMLDivElement | null>(null);
@ -33,6 +35,7 @@ export const SingleLabel: React.FC<Props> = ({ label, addLabelToGroup, editLabel
/>
<h6 className="text-sm">{label.name}</h6>
</div>
<div
ref={actionSectionRef}
className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${

166
web/components/labels/project-setting-label-list.tsx Normal file
View file

@ -0,0 +1,166 @@
import React, { useState, useRef } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
CreateUpdateLabelInline,
DeleteLabelModal,
LabelsListModal,
ProjectSettingLabelItem,
ProjectSettingLabelGroup,
} from "components/labels";
// ui
import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common";
// images
import emptyLabel from "public/empty-state/label.svg";
// types
import { IIssueLabels } from "types";
export const ProjectSettingsLabelList: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
// states
const [labelForm, setLabelForm] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const [labelsListModal, setLabelsListModal] = useState(false);
const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
// ref
const scrollToRef = useRef<HTMLFormElement>(null);
// api call to fetch project details
useSWR(
workspaceSlug && projectId ? "PROJECT_LABELS" : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
: null
);
// derived values
const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
const newLabel = () => {
setIsUpdating(false);
setLabelForm(true);
};
const addLabelToGroup = (parentLabel: IIssueLabels) => {
setLabelsListModal(true);
setParentLabel(parentLabel);
};
const editLabel = (label: IIssueLabels) => {
setLabelForm(true);
setIsUpdating(true);
setLabelToUpdate(label);
};
return (
<>
<LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
<DeleteLabelModal
isOpen={!!selectDeleteLabel}
data={selectDeleteLabel ?? null}
onClose={() => setSelectDeleteLabel(null)}
/>
<div className="flex items-center py-3.5 border-b border-custom-border-200 justify-between">
<h3 className="text-xl font-medium">Labels</h3>
<Button variant="primary" onClick={newLabel} size="sm">
Add label
</Button>
</div>
<div className="space-y-3 py-6 h-full w-full">
{labelForm && (
<CreateUpdateLabelInline
labelForm={labelForm}
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
ref={scrollToRef}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
setLabelToUpdate(null);
}}
/>
)}
{/* labels */}
{issueLabels &&
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
if (children && children.length === 0) {
if (!label.parent)
return (
<ProjectSettingLabelItem
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
} else {
return (
<ProjectSettingLabelGroup
key={label.id}
label={label}
labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
}
})}
{/* loading state */}
{!issueLabels && (
<Loader className="space-y-5">
<Loader.Item height="42px" />
<Loader.Item height="42px" />
<Loader.Item height="42px" />
<Loader.Item height="42px" />
</Loader>
)}
{/* empty state */}
{issueLabels && issueLabels.length === 0 && (
<EmptyState
title="No labels yet"
description="Create labels to help organize and filter issues in you project"
image={emptyLabel}
primaryButton={{
text: "Add label",
onClick: () => newLabel(),
}}
/>
)}
</div>
</>
);
});

6
web/components/project/confirm-project-member-remove.tsx
View file

@ -13,7 +13,9 @@ type Props = {
data?: any;
};
const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
export const ConfirmProjectMemberRemove: React.FC<Props> = (props) => {
const { isOpen, onClose, data, handleDelete } = props;
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const handleClose = () => {
@ -89,5 +91,3 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
</Transition.Root>
);
};
export default ConfirmProjectMemberRemove;

4
web/components/project/form.tsx
View file

@ -68,11 +68,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
message: "Project updated successfully",
});
})
.catch(() => {
.catch((error) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Project could not be updated. Please try again.",
message: error?.error ?? "Project could not be updated. Please try again.",
});
});
};

7
web/components/project/index.ts
View file

@ -13,4 +13,9 @@ export * from "./members-select";
export * from "./priority-select";
export * from "./sidebar-list-item";
export * from "./sidebar-list";
export * from "./single-integration-card";
export * from "./integration-card";
export * from "./member-list";
export * from "./member-list-item";
export * from "./project-settings-member-defaults";
export * from "./send-project-invitation-modal";
export * from "./confirm-project-member-remove";

2
web/components/project/single-integration-card.tsx → web/components/project/integration-card.tsx
View file

@ -37,7 +37,7 @@ const integrationDetails: { [key: string]: any } = {
// services
const projectService = new ProjectService();
export const SingleIntegration: React.FC<Props> = ({ integration }) => {
export const IntegrationCard: React.FC<Props> = ({ integration }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;

203
web/components/project/member-list-item.tsx Normal file
View file

@ -0,0 +1,203 @@
import { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { ProjectInvitationService } from "services/project";
// hooks
import useToast from "hooks/use-toast";
// components
import { ConfirmProjectMemberRemove } from "components/project";
// ui
import { CustomMenu, CustomSelect } from "@plane/ui";
// icons
import { ChevronDown, X } from "lucide-react";
// constants
import { ROLE } from "constants/workspace";
// services
const projectInvitationService = new ProjectInvitationService();
type Props = {
member: any;
};
export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
const { member } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// states
const [selectedRemoveMember, setSelectedRemoveMember] = useState<any | null>(null);
const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<any | null>(null);
// store
const { user: userStore, project: projectStore } = useMobxStore();
const { setToastAlert } = useToast();
useSWR(
workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
// derived values
const user = userStore.currentUser;
const memberDetails = userStore.projectMemberInfo;
const isAdmin = memberDetails?.role === 20;
const isOwner = memberDetails?.role === 20;
const projectMembers = projectStore.members?.[projectId?.toString()!];
const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
return (
<>
<ConfirmProjectMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => {
setSelectedRemoveMember(null);
setSelectedInviteRemoveMember(null);
}}
data={selectedRemoveMember ?? selectedInviteRemoveMember}
handleDelete={async () => {
if (!workspaceSlug || !projectId) return;
// if the user is a member
if (selectedRemoveMember) {
await projectStore.removeMemberFromProject(
workspaceSlug.toString(),
projectId.toString(),
selectedRemoveMember
);
}
// if the user is an invite
if (selectedInviteRemoveMember) {
await projectInvitationService.deleteProjectInvitation(
workspaceSlug.toString(),
projectId.toString(),
selectedInviteRemoveMember
);
mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
}
setToastAlert({
type: "success",
message: "Member removed successfully",
title: "Success",
});
}}
/>
<div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
<div className="flex items-center gap-x-6 gap-y-2">
{member.avatar && member.avatar !== "" ? (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
<img
src={member.avatar}
alt={member.display_name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
/>
</div>
) : member.display_name || member.email ? (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
{(member.display_name || member.email)?.charAt(0)}
</div>
) : (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
?
</div>
)}
<div>
{member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm">
<span>
{member.first_name} {member.last_name}
</span>
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</a>
</Link>
) : (
<h4 className="text-sm">{member.display_name || member.email}</h4>
)}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
</div>
</div>
<div className="flex items-center gap-3 text-xs">
{!member.member && (
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
Pending
</div>
)}
<CustomSelect
customButton={
<div className="flex item-center gap-1">
<span
className={`flex items-center text-sm font-medium ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
</div>
}
value={member.role}
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
if (!workspaceSlug || !projectId) return;
projectStore
.updateMember(workspaceSlug.toString(), projectId.toString(), member.id, {
role: value,
})
.catch((err) => {
const error = err.error;
const errorString = Array.isArray(error) ? error[0] : error;
setToastAlert({
type: "error",
title: "Error!",
message: errorString ?? "An error occurred while updating member role. Please try again.",
});
});
}}
disabled={
member.memberId === user?.id ||
!member.member ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role)
}
>
{Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
return (
<CustomSelect.Option key={key} value={key}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option>
);
})}
</CustomSelect>
<CustomMenu ellipsis disabled={!isAdmin}>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) setSelectedRemoveMember(member.id);
else setSelectedInviteRemoveMember(member.id);
}}
>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
</>
);
});

110
web/components/project/member-list.tsx Normal file
View file

@ -0,0 +1,110 @@
import { useState } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { ProjectInvitationService } from "services/project";
// hooks
import useUser from "hooks/use-user";
// components
import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
// ui
import { Button, Loader } from "@plane/ui";
// services
const projectInvitationService = new ProjectInvitationService();
export const ProjectMemberList: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
// states
const [inviteModal, setInviteModal] = useState(false);
const { user } = useUser();
useSWR(
workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
const { data: projectInvitations } = useSWR(
workspaceSlug && projectId ? `PROJECT_INVITATIONS_${projectId.toString()}` : null,
workspaceSlug && projectId
? () => projectInvitationService.fetchProjectInvitations(workspaceSlug.toString(), projectId.toString())
: null
);
// derived values
const projectMembers = projectStore.projectMembers;
const members = [
...(projectMembers?.map((item) => ({
id: item.id,
memberId: item.member?.id,
avatar: item.member?.avatar,
first_name: item.member?.first_name,
last_name: item.member?.last_name,
email: item.member?.email,
display_name: item.member?.display_name,
role: item.role,
status: true,
member: true,
})) || []),
...(projectInvitations?.map((item: any) => ({
id: item.id,
memberId: item.id,
avatar: item.avatar ?? "",
first_name: item.first_name ?? item.email,
last_name: item.last_name ?? "",
email: item.email,
display_name: item.email,
role: item.role,
status: item.accepted,
member: false,
})) || []),
];
return (
<>
<SendProjectInvitationModal
isOpen={inviteModal}
setIsOpen={setInviteModal}
members={members}
user={user}
onSuccess={() => {
mutate(`PROJECT_INVITATIONS_${projectId?.toString()}`);
projectStore.fetchProjectMembers(workspaceSlug?.toString()!, projectId?.toString()!);
}}
/>
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
<h4 className="text-xl font-medium">Members</h4>
<Button variant="primary" onClick={() => setInviteModal(true)}>
Add Member
</Button>
</div>
{!projectMembers || !projectInvitations ? (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-custom-border-200">
{members.length > 0
? members.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
: null}
</div>
)}
</>
);
});

28
web/components/project/member-select.tsx
View file

@ -1,18 +1,15 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icon
import { Ban } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
value: any;
@ -20,20 +17,25 @@ type Props = {
isDisabled?: boolean;
};
// services
const projectService = new ProjectService();
export const MemberSelect: React.FC<Props> = observer((props) => {
const { value, onChange, isDisabled = false } = props;
export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
// store
const { project: projectStore } = useMobxStore();
useSWR(
workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
workspaceSlug && projectId
? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
const members = projectStore.members?.[projectId?.toString()!];
const options = members?.map((member) => ({
value: member.member.id,
query: member.member.display_name,
@ -86,4 +88,4 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = fa
disabled={isDisabled}
/>
);
};
});

149
web/components/project/project-settings-member-defaults.tsx Normal file
View file

@ -0,0 +1,149 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
import { Controller, useForm } from "react-hook-form";
import { MemberSelect } from "components/project";
// ui
import { Loader } from "@plane/ui";
// types
import { IProject, IUserLite, IWorkspace } from "types";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
const defaultValues: Partial<IProject> = {
project_lead: null,
default_assignee: null,
};
export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { user: userStore, project: projectStore } = useMobxStore();
// hooks
const { setToastAlert } = useToast();
// derived values
const memberDetails = userStore.projectMemberInfo;
const isAdmin = memberDetails?.role === 20;
const projectDetails = projectStore.project_details[projectId?.toString()!];
const { reset, control } = useForm<IProject>({ defaultValues });
useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
: null
);
useEffect(() => {
if (!projectDetails) return;
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
workspace: (projectDetails.workspace as IWorkspace).id,
});
}, [projectDetails, reset]);
const submitChanges = async (formData: Partial<IProject>) => {
if (!workspaceSlug || !projectId) return;
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
...formData,
});
await projectStore
.updateProject(workspaceSlug.toString(), projectId.toString(), {
default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
project_lead: formData.project_lead === "none" ? null : formData.project_lead,
})
.then(() => {
projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
setToastAlert({
title: "Success",
type: "success",
message: "Project updated successfully",
});
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Defaults</h3>
</div>
<div className="flex flex-col gap-2 pb-4 w-full">
<div className="flex items-center py-8 gap-4 w-full">
<div className="flex flex-col gap-2 w-1/2">
<h4 className="text-sm">Project Lead</h4>
<div className="">
{projectDetails ? (
<Controller
control={control}
name="project_lead"
render={({ field: { value } }) => (
<MemberSelect
value={value}
onChange={(val: string) => {
submitChanges({ project_lead: val });
}}
isDisabled={!isAdmin}
/>
)}
/>
) : (
<Loader className="h-9 w-full">
<Loader.Item width="100%" height="100%" />
</Loader>
)}
</div>
</div>
<div className="flex flex-col gap-2 w-1/2">
<h4 className="text-sm">Default Assignee</h4>
<div className="">
{projectDetails ? (
<Controller
control={control}
name="default_assignee"
render={({ field: { value } }) => (
<MemberSelect
value={value}
onChange={(val: string) => {
submitChanges({ default_assignee: val });
}}
isDisabled={!isAdmin}
/>
)}
/>
) : (
<Loader className="h-9 w-full">
<Loader.Item width="100%" height="100%" />
</Loader>
)}
</div>
</div>
</div>
</div>
</>
);
});

8
web/components/project/send-project-invitation-modal.tsx
View file

@ -1,11 +1,7 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { useForm, Controller, useFieldArray } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
// ui
import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
@ -56,7 +52,7 @@ const defaultValues: FormValues = {
const projectService = new ProjectService();
const workspaceService = new WorkspaceService();
const SendProjectInvitationModal: React.FC<Props> = (props) => {
export const SendProjectInvitationModal: React.FC<Props> = (props) => {
const { isOpen, setIsOpen, members, user, onSuccess } = props;
const router = useRouter();
@ -308,5 +304,3 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
</Transition.Root>
);
};
export default SendProjectInvitationModal;

67
web/components/states/create-state-modal.tsx
View file

@ -1,29 +1,29 @@
import React from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { Controller, useForm } from "react-hook-form";
import { TwitterPicker } from "react-color";
import { Dialog, Popover, Transition } from "@headlessui/react";
// services
import { ProjectStateService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
import { CustomSelect } from "components/ui";
import { Button, Input, TextArea } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// types
import type { IUser, IState, IStateResponse } from "types";
// fetch keys
import { STATES_LIST } from "constants/fetch-keys";
import type { IState } from "types";
// constants
import { GROUP_CHOICES } from "constants/project";
// types
type Props = {
isOpen: boolean;
projectId: string;
handleClose: () => void;
user: IUser | undefined;
};
const defaultValues: Partial<IState> = {
@ -33,12 +33,15 @@ const defaultValues: Partial<IState> = {
group: "backlog",
};
const projectStateService = new ProjectStateService();
export const CreateStateModal: React.FC<Props> = observer((props) => {
const { isOpen, projectId, handleClose } = props;
export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const { projectState: projectStateStore } = useMobxStore();
const { setToastAlert } = useToast();
const {
@ -63,36 +66,32 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
...formData,
};
await projectStateService
.createState(workspaceSlug as string, projectId, payload, user)
.then((res) => {
mutate<IStateResponse>(
STATES_LIST(projectId.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
[res.group]: [...prevData[res.group], res],
};
},
false
);
await projectStateStore
.createState(workspaceSlug.toString(), projectId.toString(), payload)
.then(() => {
onClose();
})
.catch((err) => {
if (err.status === 400)
const error = err.response;
if (typeof error === "object") {
Object.keys(error).forEach((key) => {
setToastAlert({
type: "error",
title: "Error!",
message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
});
});
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Another state exists with the same name. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "State could not be created. Please try again.",
message:
error ?? err.status === 400
? "Another state exists with the same name. Please try again with another name."
: "State could not be created. Please try again.",
});
}
});
};
@ -264,4 +263,4 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
</Dialog>
</Transition.Root>
);
};
});

176
web/components/states/create-update-state-inline.tsx
View file

@ -1,23 +1,20 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// services
import { ProjectStateService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
import { CustomSelect } from "components/ui";
import { Button, Input, Tooltip } from "@plane/ui";
// types
import type { IUser, IState, IStateResponse } from "types";
import type { IState } from "types";
// fetch-keys
import { STATES_LIST } from "constants/fetch-keys";
// constants
@ -26,25 +23,30 @@ import { GROUP_CHOICES } from "constants/project";
type Props = {
data: IState | null;
onClose: () => void;
selectedGroup: StateGroup | null;
user: IUser | undefined;
groupLength: number;
selectedGroup: StateGroup | null;
};
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
const defaultValues: Partial<IState> = {
name: "",
description: "",
color: "rgb(var(--color-text-200))",
group: "backlog",
};
const projectStateService = new ProjectStateService();
export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
const { data, onClose, selectedGroup, groupLength } = props;
export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, selectedGroup, user, groupLength }) => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectState: projectStateStore } = useMobxStore();
// hooks
const { setToastAlert } = useToast();
const {
@ -57,15 +59,19 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
defaultValues,
});
/**
* @description pre-populate form with data if data is present
*/
useEffect(() => {
if (!data) return;
reset(data);
}, [data, reset]);
/**
* @description pre-populate form with default values if data is not present
*/
useEffect(() => {
if (data) return;
reset({
...defaultValues,
group: selectedGroup ?? "backlog",
@ -77,87 +83,73 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
reset({ name: "", color: "#000000", group: "backlog" });
};
const onSubmit = async (formData: IState) => {
const handleCreate = async (formData: IState) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
await projectStateStore
.createState(workspaceSlug.toString(), projectId.toString(), formData)
.then(() => {
handleClose();
setToastAlert({
type: "success",
title: "Success!",
message: "State created successfully.",
});
})
.catch((error) => {
if (error.status === 400)
setToastAlert({
type: "error",
title: "Error!",
message: "State with that name already exists. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "State could not be created. Please try again.",
});
});
};
const handleUpdate = async (formData: IState) => {
if (!workspaceSlug || !projectId || !data || isSubmitting) return;
await projectStateStore
.updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
.then(() => {
mutate(STATES_LIST(projectId.toString()));
handleClose();
setToastAlert({
type: "success",
title: "Success!",
message: "State updated successfully.",
});
})
.catch((error) => {
if (error.status === 400)
setToastAlert({
type: "error",
title: "Error!",
message: "Another state exists with the same name. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "State could not be updated. Please try again.",
});
});
};
const onSubmit = async (formData: IState) => {
const payload: IState = {
...formData,
};
if (!data) {
await projectStateService
.createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user)
.then((res) => {
mutate<IStateResponse>(
STATES_LIST(projectId.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
[res.group]: [...prevData[res.group], res],
};
},
false
);
handleClose();
setToastAlert({
type: "success",
title: "Success!",
message: "State created successfully.",
});
})
.catch((err) => {
if (err.status === 400)
setToastAlert({
type: "error",
title: "Error!",
message: "State with that name already exists. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "State could not be created. Please try again.",
});
});
} else {
await projectStateService
.updateState(
workspaceSlug.toString(),
projectId.toString(),
data.id,
{
...payload,
},
user
)
.then(() => {
mutate(STATES_LIST(projectId.toString()));
handleClose();
setToastAlert({
type: "success",
title: "Success!",
message: "State updated successfully.",
});
})
.catch((err) => {
if (err.status === 400)
setToastAlert({
type: "error",
title: "Error!",
message: "Another state exists with the same name. Please try again with another name.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: "State could not be updated. Please try again.",
});
});
}
if (data) await handleUpdate(payload);
else await handleCreate(payload);
};
return (
@ -281,4 +273,4 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
</Button>
</form>
);
};
});

50
web/components/states/delete-state-modal.tsx
View file

@ -1,35 +1,38 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { Dialog, Transition } from "@headlessui/react";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// icons
import { AlertTriangle } from "lucide-react";
// services
import { ProjectStateService } from "services/project";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button } from "@plane/ui";
// types
import type { IUser, IState, IStateResponse } from "types";
// fetch-keys
import { STATES_LIST } from "constants/fetch-keys";
import type { IState } from "types";
type Props = {
isOpen: boolean;
onClose: () => void;
data: IState | null;
user: IUser | undefined;
};
const projectStateService = new ProjectStateService();
export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
export const DeleteStateModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose, data } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const { projectState: projectStateStore } = useMobxStore();
// states
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const { setToastAlert } = useToast();
const handleClose = () => {
@ -42,28 +45,12 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
setIsDeleteLoading(true);
await projectStateService
.deleteState(workspaceSlug as string, data.project, data.id, user)
await projectStateStore
.deleteState(workspaceSlug.toString(), data.project, data.id)
.then(() => {
mutate<IStateResponse>(
STATES_LIST(data.project),
(prevData) => {
if (!prevData) return prevData;
const stateGroup = [...prevData[data.group]].filter((s) => s.id !== data.id);
return {
...prevData,
[data.group]: stateGroup,
};
},
false
);
handleClose();
})
.catch((err) => {
setIsDeleteLoading(false);
if (err.status === 400)
setToastAlert({
type: "error",
@ -77,6 +64,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
title: "Error!",
message: "State could not be deleted. Please try again.",
});
})
.finally(() => {
setIsDeleteLoading(false);
});
};
@ -141,4 +131,4 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
</Dialog>
</Transition.Root>
);
};
});

3
web/components/states/index.ts
View file

@ -1,5 +1,6 @@
export * from "./create-update-state-inline";
export * from "./create-state-modal";
export * from "./delete-state-modal";
export * from "./single-state";
export * from "./project-setting-state-list-item";
export * from "./state-select";
export * from "./project-setting-state-list";

140
web/components/states/single-state.tsx → web/components/states/project-setting-state-list-item.tsx
View file

@ -1,24 +1,18 @@
import { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// services
import { ProjectStateService } from "services/project";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Tooltip, StateGroupIcon } from "@plane/ui";
// icons
import { ArrowDown, ArrowUp, Pencil, X } from "lucide-react";
import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { groupBy, orderArrayBy } from "helpers/array.helper";
import { orderStateGroups } from "helpers/state.helper";
// types
import { IUser, IState } from "types";
// fetch-keys
import { STATES_LIST } from "constants/fetch-keys";
import { IState } from "types";
type Props = {
index: number;
@ -26,127 +20,39 @@ type Props = {
statesList: IState[];
handleEditState: () => void;
handleDeleteState: () => void;
user: IUser | undefined;
};
// services
const projectStateService = new ProjectStateService();
export const SingleState: React.FC<Props> = ({
index,
state,
statesList,
handleEditState,
handleDeleteState,
user,
}) => {
const [isSubmitting, setIsSubmitting] = useState(false);
export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
const { index, state, statesList, handleEditState, handleDeleteState } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { projectState: projectStateStore } = useMobxStore();
// states
const [isSubmitting, setIsSubmitting] = useState(false);
// derived values
const groupStates = statesList.filter((s) => s.group === state.group);
const groupLength = groupStates.length;
const handleMakeDefault = () => {
if (!workspaceSlug || !projectId) return;
setIsSubmitting(true);
const currentDefaultState = statesList.find((s) => s.default);
let newStatesList = statesList.map((s) => ({
...s,
default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
}));
newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
if (currentDefaultState)
projectStateService
.patchState(
workspaceSlug as string,
projectId as string,
currentDefaultState?.id ?? "",
{
default: false,
},
user
)
.then(() => {
projectStateService
.patchState(
workspaceSlug as string,
projectId as string,
state.id,
{
default: true,
},
user
)
.then(() => {
mutate(STATES_LIST(projectId as string));
setIsSubmitting(false);
})
.catch(() => {
setIsSubmitting(false);
});
});
else
projectStateService
.patchState(
workspaceSlug as string,
projectId as string,
state.id,
{
default: true,
},
user
)
.then(() => {
mutate(STATES_LIST(projectId as string));
setIsSubmitting(false);
})
.catch(() => {
setIsSubmitting(false);
});
projectStateStore.markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => {
setIsSubmitting(false);
});
};
const handleMove = (state: IState, direction: "up" | "down") => {
let newSequence = 15000;
if (!workspaceSlug || !projectId) return;
if (direction === "up") {
if (index === 1) newSequence = groupStates[0].sequence - 15000;
else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
} else {
if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
}
let newStatesList = statesList.map((s) => ({
...s,
sequence: s.id === state.id ? newSequence : s.sequence,
}));
newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
projectStateService
.patchState(
workspaceSlug as string,
projectId as string,
state.id,
{
sequence: newSequence,
},
user
)
.then((res) => {
console.log(res);
mutate(STATES_LIST(projectId as string));
})
.catch((err) => {
console.error(err);
});
projectStateStore.moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index);
};
return (
@ -223,4 +129,4 @@ export const SingleState: React.FC<Props> = ({
</div>
</div>
);
};
});

129
web/components/states/project-setting-state-list.tsx Normal file
View file

@ -0,0 +1,129 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CreateUpdateStateInline, DeleteStateModal, ProjectSettingListItem, StateGroup } from "components/states";
// ui
import { Loader } from "@plane/ui";
// icons
import { Plus } from "lucide-react";
// helpers
import { getStatesList, orderStateGroups } from "helpers/state.helper";
// fetch-keys
import { STATES_LIST } from "constants/fetch-keys";
export const ProjectSettingStateList: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
// state
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
const [selectedState, setSelectedState] = useState<string | null>(null);
const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
useSWR(
workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
: null
);
useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
: null
);
// derived values
const states = projectStore.projectStatesByGroups;
const projectDetails = projectStore.project_details[projectId?.toString()!] ?? null;
const orderedStateGroups = orderStateGroups(states!);
const statesList = getStatesList(orderedStateGroups);
return (
<>
<DeleteStateModal
isOpen={!!selectDeleteState}
onClose={() => setSelectDeleteState(null)}
data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
/>
<div className="space-y-8 py-6">
{states && projectDetails && orderedStateGroups ? (
Object.keys(orderedStateGroups || {}).map((key) => {
if (orderedStateGroups[key].length !== 0)
return (
<div key={key} className="flex flex-col gap-2">
<div className="flex w-full justify-between">
<h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
<button
type="button"
className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
onClick={() => setActiveGroup(key as keyof StateGroup)}
>
<Plus className="h-4 w-4" />
</button>
</div>
<div className="flex flex-col gap-2 rounded">
{key === activeGroup && (
<CreateUpdateStateInline
data={null}
groupLength={orderedStateGroups[key].length}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
selectedGroup={key as keyof StateGroup}
/>
)}
{orderedStateGroups[key].map((state, index) =>
state.id !== selectedState ? (
<ProjectSettingListItem
key={state.id}
index={index}
state={state}
statesList={statesList ?? []}
handleEditState={() => setSelectedState(state.id)}
handleDeleteState={() => setSelectDeleteState(state.id)}
/>
) : (
<div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
<CreateUpdateStateInline
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
groupLength={orderedStateGroups[key].length}
data={statesList?.find((state) => state.id === selectedState) ?? null}
selectedGroup={key as keyof StateGroup}
/>
</div>
)
)}
</div>
</div>
);
})
) : (
<Loader className="space-y-5 md:w-2/3">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</div>
</>
);
});

24
web/components/states/state-select.tsx
View file

@ -21,17 +21,19 @@ type Props = {
disabled?: boolean;
};
export const StateSelect: React.FC<Props> = ({
value,
onChange,
states,
className = "",
buttonClassName = "",
optionsClassName = "",
placement,
hideDropdownArrow = false,
disabled = false,
}) => {
export const StateSelect: React.FC<Props> = (props) => {
const {
value,
onChange,
states,
className = "",
buttonClassName = "",
optionsClassName = "",
placement,
hideDropdownArrow = false,
disabled = false,
} = props;
const [query, setQuery] = useState("");
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);