38f8aa90c1
* 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
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"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>
|
|
);
|
|
});
|