import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // components import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views"; // ui import { CustomMenu, PhotoFilterIcon } from "@plane/ui"; // helpers import { calculateTotalFilters } from "helpers/filter.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; // types import { IProjectView } from "types"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { view: IProjectView; }; export const ProjectViewListItem: React.FC = observer((props) => { const { view } = props; const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false); const [deleteViewModal, setDeleteViewModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { projectViews: projectViewsStore, user: { currentProjectRole }, } = useMobxStore(); const handleAddToFavorites = () => { if (!workspaceSlug || !projectId) return; projectViewsStore.addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug || !projectId) return; projectViewsStore.removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id); }; const handleCopyText = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/views/${view.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "View link copied to clipboard.", }); }); }; const totalFilters = calculateTotalFilters(view.query_data ?? {}); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.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
); });