1f9222065e
* improvement: work item modal data preload and parent work item details * improvement: collapsible button title * improvement: project creation form and modal * improvement: emoji helper * improvement: enhance labels component modularity * improvement: enable state group and state list components modularity * improvement: project settings feature list * improvement: common utils
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useMemo } from "react";
|
|
import { observer } from "mobx-react";
|
|
import useSWR from "swr";
|
|
// components
|
|
import { EUserProjectRoles, EUserPermissionsLevel } from "@plane/constants";
|
|
import { IState, TStateOperationsCallbacks } from "@plane/types";
|
|
import { ProjectStateLoader, GroupList } from "@/components/project-states";
|
|
// hooks
|
|
import { useProjectState, useUserPermissions } from "@/hooks/store";
|
|
|
|
type TProjectState = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
};
|
|
|
|
export const ProjectStateRoot: FC<TProjectState> = observer((props) => {
|
|
const { workspaceSlug, projectId } = props;
|
|
// hooks
|
|
const {
|
|
groupedProjectStates,
|
|
fetchProjectStates,
|
|
createState,
|
|
moveStatePosition,
|
|
updateState,
|
|
deleteState,
|
|
markStateAsDefault,
|
|
} = useProjectState();
|
|
const { allowPermissions } = useUserPermissions();
|
|
// derived values
|
|
const isEditable = allowPermissions(
|
|
[EUserProjectRoles.ADMIN],
|
|
EUserPermissionsLevel.PROJECT,
|
|
workspaceSlug,
|
|
projectId
|
|
);
|
|
|
|
// Fetching all project states
|
|
useSWR(
|
|
workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
|
|
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
|
|
{ revalidateIfStale: false, revalidateOnFocus: false }
|
|
);
|
|
|
|
// State operations callbacks
|
|
const stateOperationsCallbacks: TStateOperationsCallbacks = useMemo(
|
|
() => ({
|
|
createState: async (data: Partial<IState>) => createState(workspaceSlug, projectId, data),
|
|
updateState: async (stateId: string, data: Partial<IState>) =>
|
|
updateState(workspaceSlug, projectId, stateId, data),
|
|
deleteState: async (stateId: string) => deleteState(workspaceSlug, projectId, stateId),
|
|
moveStatePosition: async (stateId: string, data: Partial<IState>) =>
|
|
moveStatePosition(workspaceSlug, projectId, stateId, data),
|
|
markStateAsDefault: async (stateId: string) => markStateAsDefault(workspaceSlug, projectId, stateId),
|
|
}),
|
|
[workspaceSlug, projectId, createState, moveStatePosition, updateState, deleteState, markStateAsDefault]
|
|
);
|
|
|
|
// Loader
|
|
if (!groupedProjectStates) return <ProjectStateLoader />;
|
|
|
|
return (
|
|
<div className="py-3">
|
|
<GroupList
|
|
groupedStates={groupedProjectStates}
|
|
stateOperationsCallbacks={stateOperationsCallbacks}
|
|
isEditable={isEditable}
|
|
shouldTrackEvents
|
|
/>
|
|
</div>
|
|
);
|
|
});
|