import React, { useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import { useRouter } from "next/router"; import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react"; // ui import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; // components import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views"; // constants import { EUserProjectRoles } from "constants/project"; // helpers import { calculateTotalFilters } from "helpers/filter.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; // hooks import { useProjectView, useUser } from "hooks/store"; // types import { IProjectView } from "@plane/types"; type Props = { view: IProjectView; }; export const ProjectViewListItem: React.FC = observer((props) => { const { view } = props; // states const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false); const [deleteViewModal, setDeleteViewModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { membership: { currentProjectRole }, } = useUser(); const { addViewToFavorites, removeViewFromFavorites } = useProjectView(); const handleAddToFavorites = () => { if (!workspaceSlug || !projectId) return; addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug || !projectId) return; removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id); }; const handleCopyText = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/views/${view.id}`).then(() => { setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "View link copied to clipboard.", }); }); }; // @ts-expect-error key types are not compatible const totalFilters = calculateTotalFilters(view.filters ?? {}); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; return ( <> {workspaceSlug && projectId && view && ( setCreateUpdateViewModal(false)} workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} data={view} /> )} setDeleteViewModal(false)} />

{view.name}

{view?.description &&

{view.description}

}

{totalFilters} {totalFilters === 1 ? "filter" : "filters"}

{isEditingAllowed && (view.is_favorite ? ( ) : ( ))} {isEditingAllowed && ( <> { e.preventDefault(); e.stopPropagation(); setCreateUpdateViewModal(true); }} > Edit View { e.preventDefault(); e.stopPropagation(); setDeleteViewModal(true); }} > Delete View )} Copy view link
); });