[WEB-1519] chore: update component structure in project state settings and implement DND (#5043)
* chore: updated project settings state * chore: updated sorting on project state * chore: updated grab handler in state item * chore: Updated UI and added garb handler icon * chore: handled top and bottom sequence in middle element swap * chore: handled input state element char limit to 100 * chore: typos and code cleanup in create state * chore: handled typos and comments wherever is required * chore: handled sorting logic
This commit is contained in:
guru_sainath
GitHub
parent
c75091ca3a
commit
38f8aa90c1
24 changed files with 880 additions and 915 deletions
|
|
@ -1,17 +1,20 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
// components
|
// components
|
||||||
import { PageHead } from "@/components/core";
|
import { PageHead } from "@/components/core";
|
||||||
import { ProjectSettingStateList } from "@/components/states";
|
import { ProjectStateRoot } from "@/components/project-states";
|
||||||
// hook
|
// hook
|
||||||
import { useProject } from "@/hooks/store";
|
import { useProject } from "@/hooks/store";
|
||||||
|
|
||||||
const StatesSettingsPage = observer(() => {
|
const StatesSettingsPage = observer(() => {
|
||||||
|
const { workspaceSlug, projectId } = useParams();
|
||||||
// store
|
// store
|
||||||
const { currentProjectDetails } = useProject();
|
const { currentProjectDetails } = useProject();
|
||||||
// derived values
|
// derived values
|
||||||
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
|
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageHead title={pageTitle} />
|
<PageHead title={pageTitle} />
|
||||||
|
|
@ -19,7 +22,9 @@ const StatesSettingsPage = observer(() => {
|
||||||
<div className="flex items-center border-b border-custom-border-100 py-3.5">
|
<div className="flex items-center border-b border-custom-border-100 py-3.5">
|
||||||
<h3 className="text-xl font-medium">States</h3>
|
<h3 className="text-xl font-medium">States</h3>
|
||||||
</div>
|
</div>
|
||||||
<ProjectSettingStateList />
|
{workspaceSlug && projectId && (
|
||||||
|
<ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
93
web/core/components/project-states/create-update/create.tsx
Normal file
93
web/core/components/project-states/create-update/create.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, useState } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { IState, TStateGroups } from "@plane/types";
|
||||||
|
import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||||
|
// components
|
||||||
|
import { StateForm } from "@/components/project-states";
|
||||||
|
// constants
|
||||||
|
import { STATE_CREATED } from "@/constants/event-tracker";
|
||||||
|
import { STATE_GROUPS } from "@/constants/state";
|
||||||
|
// hooks
|
||||||
|
import { useEventTracker, useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
|
type TStateCreate = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
groupKey: TStateGroups;
|
||||||
|
handleClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateCreate: FC<TStateCreate> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, groupKey, handleClose } = props;
|
||||||
|
// hooks
|
||||||
|
const { captureProjectStateEvent, setTrackElement } = useEventTracker();
|
||||||
|
const { createState } = useProjectState();
|
||||||
|
// states
|
||||||
|
const [loader, setLoader] = useState(false);
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
setLoader(false);
|
||||||
|
handleClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (formData: Partial<IState>) => {
|
||||||
|
if (!workspaceSlug || !projectId || !groupKey) return { status: "error" };
|
||||||
|
|
||||||
|
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
|
||||||
|
try {
|
||||||
|
const stateResponse = await createState(workspaceSlug, projectId, { ...formData, group: groupKey });
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_CREATED,
|
||||||
|
payload: {
|
||||||
|
...stateResponse,
|
||||||
|
state: "SUCCESS",
|
||||||
|
element: "Project settings states page",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.SUCCESS,
|
||||||
|
title: "Success!",
|
||||||
|
message: "State created successfully.",
|
||||||
|
});
|
||||||
|
handleClose();
|
||||||
|
return { status: "success" };
|
||||||
|
} catch (error) {
|
||||||
|
const errorStatus = error as unknown as { status: number; data: { error: string } };
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_CREATED,
|
||||||
|
payload: {
|
||||||
|
...formData,
|
||||||
|
state: "FAILED",
|
||||||
|
element: "Project settings states page",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (errorStatus?.status === 400) {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message: "State with that name already exists. Please try again with another name.",
|
||||||
|
});
|
||||||
|
return { status: "already_exists" };
|
||||||
|
} else {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message: errorStatus.data.error ?? "State could not be created. Please try again.",
|
||||||
|
});
|
||||||
|
return { status: "error" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StateForm
|
||||||
|
data={{ name: "", description: "", color: STATE_GROUPS[groupKey].color }}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
onCancel={onCancel}
|
||||||
|
buttonDisabled={loader}
|
||||||
|
buttonTitle={loader ? `Creating` : `Create`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
112
web/core/components/project-states/create-update/form.tsx
Normal file
112
web/core/components/project-states/create-update/form.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FormEvent, FC, useEffect, useState, Fragment } from "react";
|
||||||
|
import { TwitterPicker } from "react-color";
|
||||||
|
import { Popover, Transition } from "@headlessui/react";
|
||||||
|
import { IState } from "@plane/types";
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
|
||||||
|
type TStateForm = {
|
||||||
|
data: Partial<IState>;
|
||||||
|
onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
|
||||||
|
onCancel: () => void;
|
||||||
|
buttonDisabled: boolean;
|
||||||
|
buttonTitle: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateForm: FC<TStateForm> = (props) => {
|
||||||
|
const { data, onSubmit, onCancel, buttonDisabled, buttonTitle } = props;
|
||||||
|
// states
|
||||||
|
const [formData, setFromData] = useState<Partial<IState> | undefined>(undefined);
|
||||||
|
const [errors, setErrors] = useState<Partial<Record<keyof IState, string>> | undefined>(undefined);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data && !formData) setFromData(data);
|
||||||
|
}, [data, formData]);
|
||||||
|
|
||||||
|
const handleFormData = <T extends keyof IState>(key: T, value: IState[T]) => {
|
||||||
|
setFromData((prev) => ({ ...prev, [key]: value }));
|
||||||
|
setErrors((prev) => ({ ...prev, [key]: "" }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const formSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const name = formData?.name || undefined;
|
||||||
|
if (!formData || !name) {
|
||||||
|
let currentErrors: Partial<Record<keyof IState, string>> = {};
|
||||||
|
if (!name) currentErrors = { ...currentErrors, name: "Name is required" };
|
||||||
|
setErrors(currentErrors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await onSubmit(formData);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("error", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={formSubmit} className="relative flex items-center gap-2">
|
||||||
|
{/* color */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Popover className="relative flex h-full w-full items-center justify-center">
|
||||||
|
<Popover.Button
|
||||||
|
className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: formData?.color ?? "black",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<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 left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
|
||||||
|
<TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
|
||||||
|
</Popover.Panel>
|
||||||
|
</Transition>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* title */}
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Name"
|
||||||
|
value={formData?.name}
|
||||||
|
onChange={(e) => handleFormData("name", e.target.value)}
|
||||||
|
hasError={(errors && Boolean(errors.name)) || false}
|
||||||
|
className="w-full"
|
||||||
|
maxLength={100}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* description */}
|
||||||
|
<Input
|
||||||
|
id="description"
|
||||||
|
type="text"
|
||||||
|
name="description"
|
||||||
|
placeholder="Description"
|
||||||
|
value={formData?.description}
|
||||||
|
onChange={(e) => handleFormData("description", e.target.value)}
|
||||||
|
hasError={(errors && Boolean(errors.description)) || false}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
|
||||||
|
cancel
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button type="submit" variant="primary" size="sm" disabled={buttonDisabled}>
|
||||||
|
{buttonTitle}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export * from "./create";
|
||||||
|
export * from "./update";
|
||||||
|
export * from "./form";
|
||||||
92
web/core/components/project-states/create-update/update.tsx
Normal file
92
web/core/components/project-states/create-update/update.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, useState } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { IState } from "@plane/types";
|
||||||
|
import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||||
|
// components
|
||||||
|
import { StateForm } from "@/components/project-states";
|
||||||
|
// constants
|
||||||
|
import { STATE_UPDATED } from "@/constants/event-tracker";
|
||||||
|
// hooks
|
||||||
|
import { useEventTracker, useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
|
type TStateUpdate = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
state: IState;
|
||||||
|
handleClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateUpdate: FC<TStateUpdate> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, state, handleClose } = props;
|
||||||
|
// hooks
|
||||||
|
const { captureProjectStateEvent, setTrackElement } = useEventTracker();
|
||||||
|
const { updateState } = useProjectState();
|
||||||
|
// states
|
||||||
|
const [loader, setLoader] = useState(false);
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
setLoader(false);
|
||||||
|
handleClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (formData: Partial<IState>) => {
|
||||||
|
if (!workspaceSlug || !projectId || !state.id) return { status: "error" };
|
||||||
|
|
||||||
|
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
|
||||||
|
try {
|
||||||
|
const stateResponse = await updateState(workspaceSlug, projectId, state.id, formData);
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_UPDATED,
|
||||||
|
payload: {
|
||||||
|
...stateResponse,
|
||||||
|
state: "SUCCESS",
|
||||||
|
element: "Project settings states page",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.SUCCESS,
|
||||||
|
title: "Success!",
|
||||||
|
message: "State updated successfully.",
|
||||||
|
});
|
||||||
|
handleClose();
|
||||||
|
return { status: "success" };
|
||||||
|
} catch (error) {
|
||||||
|
const errorStatus = error as unknown as { status: number };
|
||||||
|
if (errorStatus?.status === 400) {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message: "Another state exists with the same name. Please try again with another name.",
|
||||||
|
});
|
||||||
|
return { status: "already_exists" };
|
||||||
|
} else {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message: "State could not be updated. Please try again.",
|
||||||
|
});
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_UPDATED,
|
||||||
|
payload: {
|
||||||
|
...formData,
|
||||||
|
state: "FAILED",
|
||||||
|
element: "Project settings states page",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return { status: "error" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StateForm
|
||||||
|
data={state}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
onCancel={onCancel}
|
||||||
|
buttonDisabled={loader}
|
||||||
|
buttonTitle={loader ? `Updating` : `Update`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
55
web/core/components/project-states/group-item.tsx
Normal file
55
web/core/components/project-states/group-item.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, useState } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { IState, TStateGroups } from "@plane/types";
|
||||||
|
// components
|
||||||
|
import { StateList, StateCreate } from "@/components/project-states";
|
||||||
|
|
||||||
|
type TGroupItem = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
groupKey: TStateGroups;
|
||||||
|
groupedStates: Record<string, IState[]>;
|
||||||
|
states: IState[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GroupItem: FC<TGroupItem> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
|
||||||
|
// state
|
||||||
|
const [createState, setCreateState] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="text-base font-medium text-custom-text-200 capitalize">{groupKey}</div>
|
||||||
|
<div
|
||||||
|
className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100"
|
||||||
|
onClick={() => !createState && setCreateState(true)}
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{createState && (
|
||||||
|
<StateCreate
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
groupKey={groupKey}
|
||||||
|
handleClose={() => setCreateState(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div id="group-droppable-container">
|
||||||
|
<StateList
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
groupKey={groupKey}
|
||||||
|
groupedStates={groupedStates}
|
||||||
|
states={states}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
36
web/core/components/project-states/group-list.tsx
Normal file
36
web/core/components/project-states/group-list.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { IState, TStateGroups } from "@plane/types";
|
||||||
|
// components
|
||||||
|
import { GroupItem } from "@/components/project-states";
|
||||||
|
|
||||||
|
type TGroupList = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
groupedStates: Record<string, IState[]>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GroupList: FC<TGroupList> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, groupedStates } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-5">
|
||||||
|
{Object.entries(groupedStates).map(([key, value]) => {
|
||||||
|
const groupKey = key as TStateGroups;
|
||||||
|
const groupStates = value;
|
||||||
|
return (
|
||||||
|
<GroupItem
|
||||||
|
key={groupKey}
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
groupKey={groupKey}
|
||||||
|
states={groupStates}
|
||||||
|
groupedStates={groupedStates}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
12
web/core/components/project-states/index.ts
Normal file
12
web/core/components/project-states/index.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
export * from "./root";
|
||||||
|
|
||||||
|
export * from "./group-list";
|
||||||
|
export * from "./group-item";
|
||||||
|
|
||||||
|
export * from "./state-list";
|
||||||
|
export * from "./state-item";
|
||||||
|
export * from "./options";
|
||||||
|
|
||||||
|
export * from "./loader";
|
||||||
|
export * from "./create-update";
|
||||||
|
export * from "./state-delete-modal";
|
||||||
12
web/core/components/project-states/loader.tsx
Normal file
12
web/core/components/project-states/loader.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Loader } from "@plane/ui";
|
||||||
|
|
||||||
|
export const ProjectStateLoader = () => (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
119
web/core/components/project-states/options/delete.tsx
Normal file
119
web/core/components/project-states/options/delete.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, useState } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { Loader, X } from "lucide-react";
|
||||||
|
import { IState } from "@plane/types";
|
||||||
|
import { AlertModalCore, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
|
||||||
|
// constants
|
||||||
|
import { STATE_DELETED } from "@/constants/event-tracker";
|
||||||
|
// helpers
|
||||||
|
import { cn } from "@/helpers/common.helper";
|
||||||
|
// hooks
|
||||||
|
import { useEventTracker, useProjectState } from "@/hooks/store";
|
||||||
|
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||||
|
|
||||||
|
type TStateDelete = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
totalStates: number;
|
||||||
|
state: IState;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateDelete: FC<TStateDelete> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, totalStates, state } = props;
|
||||||
|
// hooks
|
||||||
|
const { isMobile } = usePlatformOS();
|
||||||
|
const { captureProjectStateEvent, setTrackElement } = useEventTracker();
|
||||||
|
const { deleteState } = useProjectState();
|
||||||
|
// states
|
||||||
|
const [isDeleteModal, setIsDeleteModal] = useState(false);
|
||||||
|
const [isDelete, setIsDelete] = useState(false);
|
||||||
|
|
||||||
|
// derived values
|
||||||
|
const isDeleteDisabled = state.default ? true : totalStates === 1 ? true : false;
|
||||||
|
|
||||||
|
const handleDeleteState = async () => {
|
||||||
|
if (!workspaceSlug || !projectId || isDeleteDisabled) return;
|
||||||
|
|
||||||
|
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
|
||||||
|
setIsDelete(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await deleteState(workspaceSlug, projectId, state.id);
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_DELETED,
|
||||||
|
payload: {
|
||||||
|
...state,
|
||||||
|
state: "SUCCESS",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setIsDelete(false);
|
||||||
|
} catch (error) {
|
||||||
|
const errorStatus = error as unknown as { status: number; data: { error: string } };
|
||||||
|
captureProjectStateEvent({
|
||||||
|
eventName: STATE_DELETED,
|
||||||
|
payload: {
|
||||||
|
...state,
|
||||||
|
state: "FAILED",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (errorStatus.status === 400) {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message:
|
||||||
|
"This state contains some issues within it, please move them to some other state to delete this state.",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setToast({
|
||||||
|
type: TOAST_TYPE.ERROR,
|
||||||
|
title: "Error!",
|
||||||
|
message: "State could not be deleted. Please try again.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setIsDelete(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AlertModalCore
|
||||||
|
handleClose={() => setIsDeleteModal(false)}
|
||||||
|
handleSubmit={handleDeleteState}
|
||||||
|
isSubmitting={isDelete}
|
||||||
|
isOpen={isDeleteModal}
|
||||||
|
title="Delete State"
|
||||||
|
content={
|
||||||
|
<>
|
||||||
|
Are you sure you want to delete state-{" "}
|
||||||
|
<span className="font-medium text-custom-text-100">{state?.name}</span>? All of the data related to the
|
||||||
|
state will be permanently removed. This action cannot be undone.
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={cn(
|
||||||
|
"flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
|
||||||
|
isDeleteDisabled
|
||||||
|
? "bg-custom-background-90 text-custom-text-200"
|
||||||
|
: "text-red-500 hover:bg-custom-background-80"
|
||||||
|
)}
|
||||||
|
disabled={isDeleteDisabled}
|
||||||
|
onClick={() => setIsDeleteModal(true)}
|
||||||
|
>
|
||||||
|
<Tooltip
|
||||||
|
tooltipContent={
|
||||||
|
state.default ? "Cannot delete the default state." : totalStates === 1 ? `Cannot have an empty group.` : ``
|
||||||
|
}
|
||||||
|
isMobile={isMobile}
|
||||||
|
disabled={!isDeleteDisabled}
|
||||||
|
className="focus:outline-none"
|
||||||
|
>
|
||||||
|
{isDelete ? <Loader className="w-3.5 h-3.5 text-custom-text-200" /> : <X className="w-3.5 h-3.5" />}
|
||||||
|
</Tooltip>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
2
web/core/components/project-states/options/index.ts
Normal file
2
web/core/components/project-states/options/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./mark-as-default";
|
||||||
|
export * from "./delete";
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, useState } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
// helpers
|
||||||
|
import { cn } from "@/helpers/common.helper";
|
||||||
|
// hooks
|
||||||
|
import { useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
|
type TStateMarksAsDefault = { workspaceSlug: string; projectId: string; stateId: string; isDefault: boolean };
|
||||||
|
|
||||||
|
export const StateMarksAsDefault: FC<TStateMarksAsDefault> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, stateId, isDefault } = props;
|
||||||
|
// hooks
|
||||||
|
const { markStateAsDefault } = useProjectState();
|
||||||
|
// states
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleMarkAsDefault = async () => {
|
||||||
|
if (!workspaceSlug || !projectId || !stateId || isDefault) return;
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsLoading(false);
|
||||||
|
await markStateAsDefault(workspaceSlug, projectId, stateId);
|
||||||
|
setIsLoading(false);
|
||||||
|
} catch (error) {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={cn(
|
||||||
|
"text-sm whitespace-nowrap transition-colors",
|
||||||
|
isDefault ? "text-custom-text-300" : "text-custom-text-200 hover:text-custom-text-100"
|
||||||
|
)}
|
||||||
|
disabled={isDefault || isLoading}
|
||||||
|
onClick={handleMarkAsDefault}
|
||||||
|
>
|
||||||
|
{isLoading ? "Marking as default" : isDefault ? `Default` : `Mark as default`}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
||||||
34
web/core/components/project-states/root.tsx
Normal file
34
web/core/components/project-states/root.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import useSWR from "swr";
|
||||||
|
// components
|
||||||
|
import { ProjectStateLoader, GroupList } from "@/components/project-states";
|
||||||
|
// hooks
|
||||||
|
import { useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
|
type TProjectState = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ProjectStateRoot: FC<TProjectState> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId } = props;
|
||||||
|
// hooks
|
||||||
|
const { groupedProjectStates, fetchProjectStates } = useProjectState();
|
||||||
|
|
||||||
|
useSWR(
|
||||||
|
workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
|
||||||
|
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
|
||||||
|
);
|
||||||
|
|
||||||
|
// Loader
|
||||||
|
if (!groupedProjectStates) return <ProjectStateLoader />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="py-3">
|
||||||
|
<GroupList workspaceSlug={workspaceSlug} projectId={projectId} groupedStates={groupedProjectStates} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -12,13 +12,13 @@ import { STATE_DELETED } from "@/constants/event-tracker";
|
||||||
// hooks
|
// hooks
|
||||||
import { useEventTracker, useProjectState } from "@/hooks/store";
|
import { useEventTracker, useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
type Props = {
|
type TStateDeleteModal = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
data: IState | null;
|
data: IState | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DeleteStateModal: React.FC<Props> = observer((props) => {
|
export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) => {
|
||||||
const { isOpen, onClose, data } = props;
|
const { isOpen, onClose, data } = props;
|
||||||
// states
|
// states
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
179
web/core/components/project-states/state-item.tsx
Normal file
179
web/core/components/project-states/state-item.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC, Fragment, useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||||
|
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||||
|
import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { GripVertical, Pencil } from "lucide-react";
|
||||||
|
import { IState, TStateGroups } from "@plane/types";
|
||||||
|
import { DropIndicator, StateGroupIcon } from "@plane/ui";
|
||||||
|
// components
|
||||||
|
import { StateUpdate, StateDelete, StateMarksAsDefault } from "@/components/project-states";
|
||||||
|
// helpers
|
||||||
|
import { TDraggableData } from "@/constants/state";
|
||||||
|
import { cn } from "@/helpers/common.helper";
|
||||||
|
import { getCurrentStateSequence } from "@/helpers/state.helper";
|
||||||
|
// hooks
|
||||||
|
import { useProjectState } from "@/hooks/store";
|
||||||
|
|
||||||
|
type TStateItem = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
groupKey: TStateGroups;
|
||||||
|
groupedStates: Record<string, IState[]>;
|
||||||
|
totalStates: number;
|
||||||
|
state: IState;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateItem: FC<TStateItem> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, groupKey, groupedStates, totalStates, state } = props;
|
||||||
|
// hooks
|
||||||
|
const { moveStatePosition } = useProjectState();
|
||||||
|
// states
|
||||||
|
const [updateStateModal, setUpdateStateModal] = useState(false);
|
||||||
|
|
||||||
|
const handleStateSequence = useCallback(
|
||||||
|
async (payload: Partial<IState>) => {
|
||||||
|
try {
|
||||||
|
if (!workspaceSlug || !projectId || !payload.id) return;
|
||||||
|
await moveStatePosition(workspaceSlug, projectId, payload.id, payload);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("error", error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[workspaceSlug, projectId, moveStatePosition]
|
||||||
|
);
|
||||||
|
|
||||||
|
// derived values
|
||||||
|
const isDraggable = totalStates === 1 ? false : true;
|
||||||
|
|
||||||
|
// DND starts
|
||||||
|
// ref
|
||||||
|
const draggableElementRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
// states
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const [isDraggedOver, setIsDraggedOver] = useState(false);
|
||||||
|
const [closestEdge, setClosestEdge] = useState<string | null>(null);
|
||||||
|
useEffect(() => {
|
||||||
|
const elementRef = draggableElementRef.current;
|
||||||
|
const initialData: TDraggableData = { groupKey: groupKey, id: state.id };
|
||||||
|
|
||||||
|
if (elementRef && state) {
|
||||||
|
combine(
|
||||||
|
draggable({
|
||||||
|
element: elementRef,
|
||||||
|
getInitialData: () => initialData,
|
||||||
|
onDragStart: () => setIsDragging(true),
|
||||||
|
onDrop: () => setIsDragging(false),
|
||||||
|
canDrag: () => isDraggable,
|
||||||
|
}),
|
||||||
|
dropTargetForElements({
|
||||||
|
element: elementRef,
|
||||||
|
getData: ({ input, element }) =>
|
||||||
|
attachClosestEdge(initialData, {
|
||||||
|
input,
|
||||||
|
element,
|
||||||
|
allowedEdges: ["top", "bottom"],
|
||||||
|
}),
|
||||||
|
onDragEnter: (args) => {
|
||||||
|
setIsDraggedOver(true);
|
||||||
|
setClosestEdge(extractClosestEdge(args.self.data));
|
||||||
|
},
|
||||||
|
onDragLeave: () => {
|
||||||
|
setIsDraggedOver(false);
|
||||||
|
setClosestEdge(null);
|
||||||
|
},
|
||||||
|
onDrop: (data) => {
|
||||||
|
setIsDraggedOver(false);
|
||||||
|
const { self, source } = data;
|
||||||
|
const sourceData = source.data as TDraggableData;
|
||||||
|
const destinationData = self.data as TDraggableData;
|
||||||
|
|
||||||
|
if (sourceData && destinationData && sourceData.id) {
|
||||||
|
const destinationGroupKey = destinationData.groupKey as TStateGroups;
|
||||||
|
const edge = extractClosestEdge(destinationData) || undefined;
|
||||||
|
const payload: Partial<IState> = {
|
||||||
|
id: sourceData.id as string,
|
||||||
|
group: destinationGroupKey,
|
||||||
|
sequence: getCurrentStateSequence(groupedStates[destinationGroupKey], destinationData, edge),
|
||||||
|
};
|
||||||
|
handleStateSequence(payload);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [draggableElementRef, state, groupKey, isDraggable, groupedStates, handleStateSequence]);
|
||||||
|
// DND ends
|
||||||
|
|
||||||
|
if (updateStateModal)
|
||||||
|
return (
|
||||||
|
<StateUpdate
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
state={state}
|
||||||
|
handleClose={() => setUpdateStateModal(false)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
{/* draggable drop top indicator */}
|
||||||
|
<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={draggableElementRef}
|
||||||
|
className={cn(
|
||||||
|
"relative border border-custom-border-100 rounded p-3 px-3.5 flex items-center gap-2 group my-1",
|
||||||
|
isDragging ? `opacity-50` : `opacity-100`,
|
||||||
|
totalStates === 1 ? `cursor-auto` : `cursor-grab`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* draggable indicator */}
|
||||||
|
{totalStates != 1 && (
|
||||||
|
<div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
|
||||||
|
<GripVertical className="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* state icon */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* state title and description */}
|
||||||
|
<div className="w-full text-sm px-2 min-h-5">
|
||||||
|
<h6 className="text-sm font-medium">{state.name}</h6>
|
||||||
|
<p className="text-xs text-custom-text-200">{state.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden group-hover:flex items-center gap-2">
|
||||||
|
{/* state mark as default option */}
|
||||||
|
<div className="flex-shrink-0 text-xs transition-all">
|
||||||
|
<StateMarksAsDefault
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
stateId={state.id}
|
||||||
|
isDefault={state.default ? true : false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* state edit options */}
|
||||||
|
<div className="flex items-center gap-1 transition-all">
|
||||||
|
<button
|
||||||
|
className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
|
||||||
|
onClick={() => setUpdateStateModal(true)}
|
||||||
|
>
|
||||||
|
<Pencil className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
|
<StateDelete workspaceSlug={workspaceSlug} projectId={projectId} totalStates={totalStates} state={state} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* draggable drop bottom indicator */}
|
||||||
|
<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
});
|
||||||
35
web/core/components/project-states/state-list.tsx
Normal file
35
web/core/components/project-states/state-list.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FC } from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { IState, TStateGroups } from "@plane/types";
|
||||||
|
// components
|
||||||
|
import { StateItem } from "@/components/project-states";
|
||||||
|
|
||||||
|
type TStateList = {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
groupKey: TStateGroups;
|
||||||
|
groupedStates: Record<string, IState[]>;
|
||||||
|
states: IState[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateList: FC<TStateList> = observer((props) => {
|
||||||
|
const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{states.map((state: IState) => (
|
||||||
|
<StateItem
|
||||||
|
key={state?.name}
|
||||||
|
workspaceSlug={workspaceSlug}
|
||||||
|
projectId={projectId}
|
||||||
|
groupKey={groupKey}
|
||||||
|
groupedStates={groupedStates}
|
||||||
|
totalStates={states.length || 0}
|
||||||
|
state={state}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -1,259 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { observer } from "mobx-react";
|
|
||||||
import { useParams } from "next/navigation";
|
|
||||||
import { TwitterPicker } from "react-color";
|
|
||||||
import { Controller, useForm } from "react-hook-form";
|
|
||||||
import { ChevronDown } from "lucide-react";
|
|
||||||
import { Dialog, Popover, Transition } from "@headlessui/react";
|
|
||||||
// icons
|
|
||||||
import type { IState } from "@plane/types";
|
|
||||||
// ui
|
|
||||||
import { Button, CustomSelect, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
|
|
||||||
// constants
|
|
||||||
import { GROUP_CHOICES } from "@/constants/project";
|
|
||||||
// hooks
|
|
||||||
import { useProjectState } from "@/hooks/store";
|
|
||||||
// types
|
|
||||||
|
|
||||||
// types
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
projectId: string;
|
|
||||||
handleClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultValues: Partial<IState> = {
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
color: "rgb(var(--color-text-200))",
|
|
||||||
group: "backlog",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CreateStateModal: React.FC<Props> = observer((props) => {
|
|
||||||
const { isOpen, projectId, handleClose } = props;
|
|
||||||
// router
|
|
||||||
const { workspaceSlug } = useParams();
|
|
||||||
// store hooks
|
|
||||||
const { createState } = useProjectState();
|
|
||||||
// form info
|
|
||||||
const {
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
handleSubmit,
|
|
||||||
watch,
|
|
||||||
control,
|
|
||||||
reset,
|
|
||||||
} = useForm<IState>({
|
|
||||||
defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onClose = () => {
|
|
||||||
handleClose();
|
|
||||||
reset(defaultValues);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (formData: IState) => {
|
|
||||||
if (!workspaceSlug) return;
|
|
||||||
|
|
||||||
const payload: IState = {
|
|
||||||
...formData,
|
|
||||||
};
|
|
||||||
|
|
||||||
await createState(workspaceSlug.toString(), projectId.toString(), payload)
|
|
||||||
.then(() => {
|
|
||||||
onClose();
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
const error = err.response;
|
|
||||||
|
|
||||||
if (typeof error === "object") {
|
|
||||||
Object.keys(error).forEach((key) => {
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
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.",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
|
||||||
<Dialog as="div" className="relative z-30" onClose={onClose}>
|
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div>
|
|
||||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
|
||||||
Create State
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="mt-2 space-y-3">
|
|
||||||
<div>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
rules={{
|
|
||||||
required: "Name is required",
|
|
||||||
}}
|
|
||||||
render={({ field: { value, onChange, ref } }) => (
|
|
||||||
<>
|
|
||||||
<label htmlFor="name" className="mb-2 text-custom-text-200">
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
type="text"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
ref={ref}
|
|
||||||
hasError={Boolean(errors.name)}
|
|
||||||
placeholder="Enter name"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
rules={{ required: true }}
|
|
||||||
name="group"
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<CustomSelect
|
|
||||||
value={value}
|
|
||||||
label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
|
|
||||||
onChange={onChange}
|
|
||||||
optionsClassName="w-full"
|
|
||||||
input
|
|
||||||
>
|
|
||||||
{Object.keys(GROUP_CHOICES).map((key) => (
|
|
||||||
<CustomSelect.Option key={key} value={key}>
|
|
||||||
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
|
||||||
</CustomSelect.Option>
|
|
||||||
))}
|
|
||||||
</CustomSelect>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Popover className="relative">
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<Popover.Button
|
|
||||||
className={`group inline-flex items-center rounded-md bg-custom-background-100 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
|
||||||
open ? "text-custom-text-100" : "text-custom-text-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span>Color</span>
|
|
||||||
{watch("color") && watch("color") !== "" && (
|
|
||||||
<span
|
|
||||||
className="ml-2 h-4 w-4 rounded"
|
|
||||||
style={{
|
|
||||||
backgroundColor: watch("color") ?? "black",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<ChevronDown
|
|
||||||
className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
|
|
||||||
open ? "text-gray-600" : "text-gray-400"
|
|
||||||
}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</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="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
|
|
||||||
<Controller
|
|
||||||
name="color"
|
|
||||||
control={control}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Popover.Panel>
|
|
||||||
</Transition>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="description" className="mb-2 text-custom-text-200">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
name="description"
|
|
||||||
control={control}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<TextArea
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
value={value}
|
|
||||||
placeholder="Enter description"
|
|
||||||
onChange={onChange}
|
|
||||||
hasError={Boolean(errors?.description)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 flex justify-end gap-2">
|
|
||||||
<Button variant="neutral-primary" size="sm" onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
|
|
||||||
{isSubmitting ? "Creating State..." : "Create State"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -1,310 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useEffect } from "react";
|
|
||||||
import { observer } from "mobx-react";
|
|
||||||
import { useParams } from "next/navigation";
|
|
||||||
import { TwitterPicker } from "react-color";
|
|
||||||
import { useForm, Controller } from "react-hook-form";
|
|
||||||
import { Popover, Transition } from "@headlessui/react";
|
|
||||||
import type { IState } from "@plane/types";
|
|
||||||
// ui
|
|
||||||
import { Button, CustomSelect, Input, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
|
|
||||||
// constants
|
|
||||||
import { STATE_CREATED, STATE_UPDATED } from "@/constants/event-tracker";
|
|
||||||
import { GROUP_CHOICES } from "@/constants/project";
|
|
||||||
// hooks
|
|
||||||
import { useEventTracker, useProjectState } from "@/hooks/store";
|
|
||||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
|
||||||
// types
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
data: IState | null;
|
|
||||||
onClose: () => void;
|
|
||||||
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",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
|
|
||||||
const { data, onClose, selectedGroup, groupLength } = props;
|
|
||||||
// router
|
|
||||||
const { workspaceSlug, projectId } = useParams();
|
|
||||||
// store hooks
|
|
||||||
const { captureProjectStateEvent, setTrackElement } = useEventTracker();
|
|
||||||
const { createState, updateState } = useProjectState();
|
|
||||||
const { isMobile } = usePlatformOS();
|
|
||||||
// form info
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
watch,
|
|
||||||
reset,
|
|
||||||
control,
|
|
||||||
} = useForm<IState>({
|
|
||||||
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",
|
|
||||||
});
|
|
||||||
}, [selectedGroup, data, reset]);
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
onClose();
|
|
||||||
reset({ name: "", color: "#000000", group: "backlog" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreate = async (formData: IState) => {
|
|
||||||
if (!workspaceSlug || !projectId || isSubmitting) return;
|
|
||||||
|
|
||||||
await createState(workspaceSlug.toString(), projectId.toString(), formData)
|
|
||||||
.then((res) => {
|
|
||||||
handleClose();
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.SUCCESS,
|
|
||||||
title: "Success!",
|
|
||||||
message: "State created successfully.",
|
|
||||||
});
|
|
||||||
captureProjectStateEvent({
|
|
||||||
eventName: STATE_CREATED,
|
|
||||||
payload: {
|
|
||||||
...res,
|
|
||||||
state: "SUCCESS",
|
|
||||||
element: "Project settings states page",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
if (error.status === 400)
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
message: "State with that name already exists. Please try again with another name.",
|
|
||||||
});
|
|
||||||
else
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
message: error.data.error ?? "State could not be created. Please try again.",
|
|
||||||
});
|
|
||||||
captureProjectStateEvent({
|
|
||||||
eventName: STATE_CREATED,
|
|
||||||
payload: {
|
|
||||||
...formData,
|
|
||||||
state: "FAILED",
|
|
||||||
element: "Project settings states page",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdate = async (formData: IState) => {
|
|
||||||
if (!workspaceSlug || !projectId || !data || isSubmitting) return;
|
|
||||||
|
|
||||||
await updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
|
|
||||||
.then((res) => {
|
|
||||||
handleClose();
|
|
||||||
captureProjectStateEvent({
|
|
||||||
eventName: STATE_UPDATED,
|
|
||||||
payload: {
|
|
||||||
...res,
|
|
||||||
state: "SUCCESS",
|
|
||||||
element: "Project settings states page",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.SUCCESS,
|
|
||||||
title: "Success!",
|
|
||||||
message: "State updated successfully.",
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
if (error.status === 400)
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
message: "Another state exists with the same name. Please try again with another name.",
|
|
||||||
});
|
|
||||||
else
|
|
||||||
setToast({
|
|
||||||
type: TOAST_TYPE.ERROR,
|
|
||||||
title: "Error!",
|
|
||||||
message: "State could not be updated. Please try again.",
|
|
||||||
});
|
|
||||||
captureProjectStateEvent({
|
|
||||||
eventName: STATE_UPDATED,
|
|
||||||
payload: {
|
|
||||||
...formData,
|
|
||||||
state: "FAILED",
|
|
||||||
element: "Project settings states page",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (formData: IState) => {
|
|
||||||
if (data) await handleUpdate(formData);
|
|
||||||
else await handleCreate(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="flex flex-col w-full rounded-[10px] bg-custom-background-100 py-5"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-x-2 ">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<Popover className="relative 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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{watch("color") && watch("color") !== "" && (
|
|
||||||
<span
|
|
||||||
className="h-5 w-5 rounded"
|
|
||||||
style={{
|
|
||||||
backgroundColor: watch("color") ?? "black",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</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 left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
|
|
||||||
<Controller
|
|
||||||
name="color"
|
|
||||||
control={control}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Popover.Panel>
|
|
||||||
</Transition>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
rules={{
|
|
||||||
required: true,
|
|
||||||
maxLength: {
|
|
||||||
value: 255,
|
|
||||||
message: "State name should not exceed 255 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
render={({ field: { value, onChange, ref } }) => (
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
type="text"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
ref={ref}
|
|
||||||
hasError={Boolean(errors.name)}
|
|
||||||
placeholder="Name"
|
|
||||||
className="w-full"
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{data && (
|
|
||||||
<Controller
|
|
||||||
name="group"
|
|
||||||
control={control}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<Tooltip
|
|
||||||
tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
|
|
||||||
isMobile={isMobile}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<CustomSelect
|
|
||||||
disabled={groupLength === 1}
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
label={
|
|
||||||
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
|
|
||||||
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
|
|
||||||
: "Select group"
|
|
||||||
}
|
|
||||||
input
|
|
||||||
>
|
|
||||||
{Object.keys(GROUP_CHOICES).map((key) => (
|
|
||||||
<CustomSelect.Option key={key} value={key}>
|
|
||||||
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
|
||||||
</CustomSelect.Option>
|
|
||||||
))}
|
|
||||||
</CustomSelect>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="description"
|
|
||||||
render={({ field: { value, onChange, ref } }) => (
|
|
||||||
<Input
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
type="text"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
ref={ref}
|
|
||||||
hasError={Boolean(errors.description)}
|
|
||||||
placeholder="Description"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Button variant="neutral-primary" onClick={handleClose} size="sm">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
type="submit"
|
|
||||||
loading={isSubmitting}
|
|
||||||
onClick={() => {
|
|
||||||
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
|
|
||||||
}}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{data ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Creating" : "Create"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export * from "./create-update-state-inline";
|
|
||||||
export * from "./create-state-modal";
|
|
||||||
export * from "./delete-state-modal";
|
|
||||||
export * from "./project-setting-state-list-item";
|
|
||||||
export * from "./project-setting-state-list";
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { observer } from "mobx-react";
|
|
||||||
import { useParams } from "next/navigation";
|
|
||||||
// icons
|
|
||||||
import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
|
|
||||||
// types
|
|
||||||
import { IState } from "@plane/types";
|
|
||||||
// ui
|
|
||||||
import { Tooltip, StateGroupIcon } from "@plane/ui";
|
|
||||||
// hooks
|
|
||||||
import { useEventTracker, useProjectState } from "@/hooks/store";
|
|
||||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
index: number;
|
|
||||||
state: IState;
|
|
||||||
statesList: IState[];
|
|
||||||
handleEditState: () => void;
|
|
||||||
handleDeleteState: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const StatesListItem: React.FC<Props> = observer((props) => {
|
|
||||||
const { index, state, statesList, handleEditState, handleDeleteState } = props;
|
|
||||||
// states
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
// router
|
|
||||||
const { workspaceSlug, projectId } = useParams();
|
|
||||||
// store hooks
|
|
||||||
const { setTrackElement } = useEventTracker();
|
|
||||||
const { markStateAsDefault, moveStatePosition } = useProjectState();
|
|
||||||
const { isMobile } = usePlatformOS();
|
|
||||||
// derived values
|
|
||||||
const groupStates = statesList.filter((s) => s.group === state.group);
|
|
||||||
const groupLength = groupStates.length;
|
|
||||||
|
|
||||||
const handleMakeDefault = () => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
setIsSubmitting(true);
|
|
||||||
markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMove = (state: IState, direction: "up" | "down") => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
|
|
||||||
<div>
|
|
||||||
<h6 className="text-sm font-medium">{state.name}</h6>
|
|
||||||
<p className="text-xs text-custom-text-200">{state.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="group flex items-center gap-2.5">
|
|
||||||
{index !== 0 && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="hidden text-custom-text-200 group-hover:inline-block"
|
|
||||||
onClick={() => handleMove(state, "up")}
|
|
||||||
>
|
|
||||||
<ArrowUp className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{!(index === groupLength - 1) && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="hidden text-custom-text-200 group-hover:inline-block"
|
|
||||||
onClick={() => handleMove(state, "down")}
|
|
||||||
>
|
|
||||||
<ArrowDown className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className=" hidden items-center gap-2.5 group-hover:flex">
|
|
||||||
{state.default ? (
|
|
||||||
<span className="text-xs text-custom-text-200">Default</span>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
|
|
||||||
onClick={handleMakeDefault}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
>
|
|
||||||
Mark as default
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="grid place-items-center opacity-0 group-hover:opacity-100"
|
|
||||||
onClick={handleEditState}
|
|
||||||
>
|
|
||||||
<Pencil className="h-3.5 w-3.5 text-custom-text-200" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`opacity-0 group-hover:opacity-100 ${
|
|
||||||
state.default || groupLength === 1 ? "cursor-not-allowed" : ""
|
|
||||||
} grid place-items-center`}
|
|
||||||
onClick={() => {
|
|
||||||
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
|
|
||||||
handleDeleteState();
|
|
||||||
}}
|
|
||||||
disabled={state.default || groupLength === 1}
|
|
||||||
>
|
|
||||||
{state.default ? (
|
|
||||||
<Tooltip tooltipContent="Cannot delete the default state." isMobile={isMobile}>
|
|
||||||
<X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
|
|
||||||
</Tooltip>
|
|
||||||
) : groupLength === 1 ? (
|
|
||||||
<Tooltip tooltipContent="Cannot have an empty group." isMobile={isMobile}>
|
|
||||||
<X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -1,183 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import { observer } from "mobx-react";
|
|
||||||
import { useParams } from "next/navigation";
|
|
||||||
import useSWR from "swr";
|
|
||||||
// hooks
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import { Loader } from "@plane/ui";
|
|
||||||
import { CreateUpdateStateInline, DeleteStateModal, StateGroup, StatesListItem } from "@/components/states";
|
|
||||||
import { STATES_LIST } from "@/constants/fetch-keys";
|
|
||||||
import { sortByField } from "@/helpers/array.helper";
|
|
||||||
import { orderStateGroups } from "@/helpers/state.helper";
|
|
||||||
import { useEventTracker, useProjectState } from "@/hooks/store";
|
|
||||||
// components
|
|
||||||
// ui
|
|
||||||
// icons
|
|
||||||
// helpers
|
|
||||||
// fetch-keys
|
|
||||||
|
|
||||||
export const ProjectSettingStateList: React.FC = observer(() => {
|
|
||||||
// router
|
|
||||||
const { workspaceSlug, projectId } = useParams();
|
|
||||||
// store
|
|
||||||
const { setTrackElement } = useEventTracker();
|
|
||||||
const { groupedProjectStates, projectStates, fetchProjectStates } = useProjectState();
|
|
||||||
// state
|
|
||||||
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
|
|
||||||
const [selectedState, setSelectedState] = useState<string | null>(null);
|
|
||||||
const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useSWR(
|
|
||||||
workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null,
|
|
||||||
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
// derived values
|
|
||||||
const orderedStateGroups = orderStateGroups(groupedProjectStates!);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<DeleteStateModal
|
|
||||||
isOpen={!!selectDeleteState}
|
|
||||||
onClose={() => setSelectDeleteState(null)}
|
|
||||||
data={projectStates?.find((s) => s.id === selectDeleteState) ?? null}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="space-y-8 py-6">
|
|
||||||
{orderedStateGroups ? (
|
|
||||||
<>
|
|
||||||
{Object.keys(orderedStateGroups).map((group) => (
|
|
||||||
<div key={group} className="flex flex-col gap-2">
|
|
||||||
<div className="flex w-full justify-between">
|
|
||||||
<h4 className="text-base font-medium capitalize text-custom-text-200">{group}</h4>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 px-2 text-custom-primary-100 outline-none hover:text-custom-primary-200"
|
|
||||||
onClick={() => {
|
|
||||||
setTrackElement("PROJECT_SETTINGS_STATES_PAGE");
|
|
||||||
setActiveGroup(group as keyof StateGroup);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2 rounded">
|
|
||||||
{group === activeGroup && (
|
|
||||||
<CreateUpdateStateInline
|
|
||||||
data={null}
|
|
||||||
groupLength={orderedStateGroups[group].length}
|
|
||||||
onClose={() => {
|
|
||||||
setActiveGroup(null);
|
|
||||||
setSelectedState(null);
|
|
||||||
}}
|
|
||||||
selectedGroup={group as keyof StateGroup}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{sortByField(orderedStateGroups[group], "sequence").map((state, index) =>
|
|
||||||
state.id !== selectedState ? (
|
|
||||||
<StatesListItem
|
|
||||||
key={state.id}
|
|
||||||
index={index}
|
|
||||||
state={state}
|
|
||||||
statesList={projectStates ?? []}
|
|
||||||
handleEditState={() => setSelectedState(state.id)}
|
|
||||||
handleDeleteState={() => setSelectDeleteState(state.id)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
|
|
||||||
<CreateUpdateStateInline
|
|
||||||
onClose={() => {
|
|
||||||
setActiveGroup(null);
|
|
||||||
setSelectedState(null);
|
|
||||||
}}
|
|
||||||
groupLength={orderedStateGroups[group].length}
|
|
||||||
data={projectStates?.find((state) => state.id === selectedState) ?? null}
|
|
||||||
selectedGroup={group 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>
|
|
||||||
|
|
||||||
{/* <div className="space-y-8 py-6">
|
|
||||||
{states && currentProjectDetails && 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 ? (
|
|
||||||
<StatesListItem
|
|
||||||
key={state.id}
|
|
||||||
index={index}
|
|
||||||
state={state}
|
|
||||||
statesList={statesList ?? []}
|
|
||||||
handleEditState={() => setSelectedState(state.id)}
|
|
||||||
handleDeleteState={() => setSelectDeleteState(state.id)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="border-b-[0.5px] 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> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
import { TStateGroups } from "@plane/types";
|
import { TStateGroups } from "@plane/types";
|
||||||
|
|
||||||
|
export type TDraggableData = {
|
||||||
|
groupKey: TStateGroups;
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
export const STATE_GROUPS: {
|
export const STATE_GROUPS: {
|
||||||
[key in TStateGroups]: {
|
[key in TStateGroups]: {
|
||||||
key: TStateGroups;
|
key: TStateGroups;
|
||||||
|
|
|
||||||
|
|
@ -40,8 +40,7 @@ export interface IStateStore {
|
||||||
workspaceSlug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
stateId: string,
|
stateId: string,
|
||||||
direction: "up" | "down",
|
payload: Partial<IState>
|
||||||
groupIndex: number
|
|
||||||
) => Promise<void>;
|
) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -245,33 +244,16 @@ export class StateStore implements IStateStore {
|
||||||
* @param direction
|
* @param direction
|
||||||
* @param groupIndex
|
* @param groupIndex
|
||||||
*/
|
*/
|
||||||
moveStatePosition = async (
|
moveStatePosition = async (workspaceSlug: string, projectId: string, stateId: string, payload: Partial<IState>) => {
|
||||||
workspaceSlug: string,
|
|
||||||
projectId: string,
|
|
||||||
stateId: string,
|
|
||||||
direction: "up" | "down",
|
|
||||||
groupIndex: number
|
|
||||||
) => {
|
|
||||||
const SEQUENCE_GAP = 15000;
|
|
||||||
const originalStates = this.stateMap;
|
const originalStates = this.stateMap;
|
||||||
try {
|
try {
|
||||||
let newSequence = SEQUENCE_GAP;
|
Object.entries(payload).forEach(([key, value]) => {
|
||||||
const stateMap = this.projectStates || [];
|
|
||||||
const selectedState = stateMap?.find((state) => state.id === stateId);
|
|
||||||
const groupStates = stateMap?.filter((state) => state.group === selectedState?.group);
|
|
||||||
const groupLength = groupStates.length;
|
|
||||||
if (direction === "up") {
|
|
||||||
if (groupIndex === 1) newSequence = groupStates[0].sequence - SEQUENCE_GAP;
|
|
||||||
else newSequence = (groupStates[groupIndex - 2].sequence + groupStates[groupIndex - 1].sequence) / 2;
|
|
||||||
} else {
|
|
||||||
if (groupIndex === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + SEQUENCE_GAP;
|
|
||||||
else newSequence = (groupStates[groupIndex + 2].sequence + groupStates[groupIndex + 1].sequence) / 2;
|
|
||||||
}
|
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
set(this.stateMap, [stateId, "sequence"], newSequence);
|
set(this.stateMap, [stateId, key], value);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
// updating using api
|
// updating using api
|
||||||
await this.stateService.patchState(workspaceSlug, projectId, stateId, { sequence: newSequence });
|
await this.stateService.patchState(workspaceSlug, projectId, stateId, payload);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// reverting back to old state group if api fails
|
// reverting back to old state group if api fails
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// types
|
// types
|
||||||
import { IState, IStateResponse } from "@plane/types";
|
import { IState, IStateResponse } from "@plane/types";
|
||||||
import { STATE_GROUPS } from "@/constants/state";
|
import { STATE_GROUPS, TDraggableData } from "@/constants/state";
|
||||||
|
|
||||||
export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
|
export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
|
||||||
if (!unorderedStateGroups) return undefined;
|
if (!unorderedStateGroups) return undefined;
|
||||||
|
|
@ -17,3 +17,33 @@ export const sortStates = (states: IState[]) => {
|
||||||
return Object.keys(STATE_GROUPS).indexOf(stateA.group) - Object.keys(STATE_GROUPS).indexOf(stateB.group);
|
return Object.keys(STATE_GROUPS).indexOf(stateA.group) - Object.keys(STATE_GROUPS).indexOf(stateB.group);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getCurrentStateSequence = (
|
||||||
|
groupSates: IState[],
|
||||||
|
destinationData: TDraggableData,
|
||||||
|
edge: string | undefined
|
||||||
|
) => {
|
||||||
|
const defaultSequence = 65535;
|
||||||
|
if (!edge) return defaultSequence;
|
||||||
|
|
||||||
|
const currentStateIndex = groupSates.findIndex((state) => state.id === destinationData.id);
|
||||||
|
const currentStateSequence = groupSates[currentStateIndex]?.sequence || undefined;
|
||||||
|
|
||||||
|
if (!currentStateSequence) return defaultSequence;
|
||||||
|
|
||||||
|
if (edge === "top") {
|
||||||
|
const prevStateSequence = groupSates[currentStateIndex - 1]?.sequence || undefined;
|
||||||
|
|
||||||
|
if (prevStateSequence === undefined) {
|
||||||
|
return currentStateSequence - defaultSequence;
|
||||||
|
}
|
||||||
|
return (currentStateSequence + prevStateSequence) / 2;
|
||||||
|
} else if (edge === "bottom") {
|
||||||
|
const nextStateSequence = groupSates[currentStateIndex + 1]?.sequence || undefined;
|
||||||
|
|
||||||
|
if (nextStateSequence === undefined) {
|
||||||
|
return currentStateSequence + defaultSequence;
|
||||||
|
}
|
||||||
|
return (currentStateSequence + nextStateSequence) / 2;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue