forked from github/plane
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
|
// react
|
||
|
|
import { useState } from "react";
|
||
|
|
// hooks
|
||
|
|
import useUser from "lib/hooks/useUser";
|
||
|
|
// components
|
||
|
|
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
|
||
|
|
// ui
|
||
|
|
import { Button } from "ui";
|
||
|
|
// icons
|
||
|
|
import { PencilSquareIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||
|
|
// constants
|
||
|
|
import { addSpaceIfCamelCase } from "constants/common";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
projectId: string | string[] | undefined;
|
||
|
|
};
|
||
|
|
|
||
|
|
const StatesSettings: React.FC<Props> = ({ projectId }) => {
|
||
|
|
const [isCreateStateModal, setIsCreateStateModal] = useState(false);
|
||
|
|
const [selectedState, setSelectedState] = useState<string | undefined>();
|
||
|
|
|
||
|
|
const { states } = useUser();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<CreateUpdateStateModal
|
||
|
|
isOpen={isCreateStateModal || Boolean(selectedState)}
|
||
|
|
handleClose={() => {
|
||
|
|
setSelectedState(undefined);
|
||
|
|
setIsCreateStateModal(false);
|
||
|
|
}}
|
||
|
|
projectId={projectId as string}
|
||
|
|
data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
|
||
|
|
/>
|
||
|
|
<section className="space-y-5">
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
|
||
|
|
<p className="mt-1 text-sm text-gray-500">Manage the state of this project.</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between gap-3">
|
||
|
|
<div className="w-full space-y-5">
|
||
|
|
{states?.map((state) => (
|
||
|
|
<div
|
||
|
|
key={state.id}
|
||
|
|
className="bg-white px-4 py-2 rounded flex justify-between items-center"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-x-2">
|
||
|
|
<div
|
||
|
|
className="w-3 h-3 rounded-full"
|
||
|
|
style={{
|
||
|
|
backgroundColor: state.color,
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
<h4>{addSpaceIfCamelCase(state.name)}</h4>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button type="button" onClick={() => setSelectedState(state.id)}>
|
||
|
|
<PencilSquareIcon className="h-5 w-5 text-gray-400" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
className="flex items-center gap-x-1"
|
||
|
|
onClick={() => setIsCreateStateModal(true)}
|
||
|
|
>
|
||
|
|
<PlusIcon className="h-4 w-4" />
|
||
|
|
<span>Add State</span>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StatesSettings;
|