[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";
|
||||
|
||||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
// components
|
||||
import { PageHead } from "@/components/core";
|
||||
import { ProjectSettingStateList } from "@/components/states";
|
||||
import { ProjectStateRoot } from "@/components/project-states";
|
||||
// hook
|
||||
import { useProject } from "@/hooks/store";
|
||||
|
||||
const StatesSettingsPage = observer(() => {
|
||||
const { workspaceSlug, projectId } = useParams();
|
||||
// store
|
||||
const { currentProjectDetails } = useProject();
|
||||
// derived values
|
||||
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
|
|
@ -19,7 +22,9 @@ const StatesSettingsPage = observer(() => {
|
|||
<div className="flex items-center border-b border-custom-border-100 py-3.5">
|
||||
<h3 className="text-xl font-medium">States</h3>
|
||||
</div>
|
||||
<ProjectSettingStateList />
|
||||
{workspaceSlug && projectId && (
|
||||
<ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||
)}
|
||||
</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
|
||||
import { useEventTracker, useProjectState } from "@/hooks/store";
|
||||
|
||||
type Props = {
|
||||
type TStateDeleteModal = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
data: IState | null;
|
||||
};
|
||||
|
||||
export const DeleteStateModal: React.FC<Props> = observer((props) => {
|
||||
export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) => {
|
||||
const { isOpen, onClose, data } = props;
|
||||
// states
|
||||
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";
|
||||
|
||||
export type TDraggableData = {
|
||||
groupKey: TStateGroups;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export const STATE_GROUPS: {
|
||||
[key in TStateGroups]: {
|
||||
key: TStateGroups;
|
||||
|
|
|
|||
|
|
@ -40,8 +40,7 @@ export interface IStateStore {
|
|||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
stateId: string,
|
||||
direction: "up" | "down",
|
||||
groupIndex: number
|
||||
payload: Partial<IState>
|
||||
) => Promise<void>;
|
||||
}
|
||||
|
||||
|
|
@ -245,33 +244,16 @@ export class StateStore implements IStateStore {
|
|||
* @param direction
|
||||
* @param groupIndex
|
||||
*/
|
||||
moveStatePosition = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
stateId: string,
|
||||
direction: "up" | "down",
|
||||
groupIndex: number
|
||||
) => {
|
||||
const SEQUENCE_GAP = 15000;
|
||||
moveStatePosition = async (workspaceSlug: string, projectId: string, stateId: string, payload: Partial<IState>) => {
|
||||
const originalStates = this.stateMap;
|
||||
try {
|
||||
let newSequence = SEQUENCE_GAP;
|
||||
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;
|
||||
}
|
||||
Object.entries(payload).forEach(([key, value]) => {
|
||||
runInAction(() => {
|
||||
set(this.stateMap, [stateId, "sequence"], newSequence);
|
||||
set(this.stateMap, [stateId, key], value);
|
||||
});
|
||||
});
|
||||
// updating using api
|
||||
await this.stateService.patchState(workspaceSlug, projectId, stateId, { sequence: newSequence });
|
||||
await this.stateService.patchState(workspaceSlug, projectId, stateId, payload);
|
||||
} catch (err) {
|
||||
// reverting back to old state group if api fails
|
||||
runInAction(() => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// 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 => {
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
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