forked from github/plane
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
// mobx
|
|
import { observer } from "mobx-react-lite";
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// components
|
|
import { DeleteObjectModal } from "components/custom-attributes";
|
|
// ui
|
|
import { CustomMenu, Loader } from "components/ui";
|
|
// icons
|
|
import { TableProperties } from "lucide-react";
|
|
// types
|
|
import { ICustomAttribute } from "types";
|
|
|
|
type Props = {
|
|
handleEditObject: (object: ICustomAttribute) => void;
|
|
projectId: string;
|
|
};
|
|
|
|
export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projectId }) => {
|
|
const [deleteObjectModal, setDeleteObjectModal] = useState(false);
|
|
const [objectToDelete, setObjectToDelete] = useState<ICustomAttribute | null>(null);
|
|
|
|
const router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
|
|
const { customAttributes: customAttributesStore } = useMobxStore();
|
|
const { entities, fetchEntities } = customAttributesStore;
|
|
|
|
const handleDeleteObject = async (object: ICustomAttribute) => {
|
|
setObjectToDelete(object);
|
|
setDeleteObjectModal(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!workspaceSlug) return;
|
|
|
|
if (!entities) fetchEntities(workspaceSlug.toString(), projectId);
|
|
}, [entities, fetchEntities, projectId, workspaceSlug]);
|
|
|
|
return (
|
|
<>
|
|
<DeleteObjectModal
|
|
isOpen={deleteObjectModal}
|
|
objectToDelete={objectToDelete}
|
|
onClose={() => {
|
|
setDeleteObjectModal(false);
|
|
|
|
setTimeout(() => {
|
|
setObjectToDelete(null);
|
|
}, 300);
|
|
}}
|
|
/>
|
|
<div className="space-y-4 divide-y divide-custom-border-100">
|
|
{entities ? (
|
|
entities.length > 0 ? (
|
|
entities.map((entity) => (
|
|
<div key={entity.id} className="p-4 flex items-center justify-between gap-4">
|
|
<div className="flex gap-4">
|
|
<div className="bg-custom-background-80 h-10 w-10 grid place-items-center rounded">
|
|
<TableProperties size={20} strokeWidth={1.5} />
|
|
</div>
|
|
<div>
|
|
<h5 className="text-sm font-medium">{entity.display_name}</h5>
|
|
<p className="text-custom-text-300 text-xs">{entity.description}</p>
|
|
</div>
|
|
</div>
|
|
<CustomMenu ellipsis>
|
|
<CustomMenu.MenuItem renderAs="button" onClick={() => handleEditObject(entity)}>
|
|
Edit
|
|
</CustomMenu.MenuItem>
|
|
<CustomMenu.MenuItem renderAs="button" onClick={() => handleDeleteObject(entity)}>
|
|
Delete
|
|
</CustomMenu.MenuItem>
|
|
</CustomMenu>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-custom-text-200 text-center">No objects present</p>
|
|
)
|
|
) : (
|
|
<Loader className="space-y-4">
|
|
<Loader.Item height="60px" />
|
|
<Loader.Item height="60px" />
|
|
<Loader.Item height="60px" />
|
|
</Loader>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
});
|