import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { PencilIcon, StarIcon, TrashIcon } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views"; // ui import { CustomMenu, PhotoFilterIcon } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; import { calculateTotalFilters } from "helpers/filter.helper"; // types import { IProjectView } from "types"; 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 { projectViews: projectViewsStore } = 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 totalFilters = calculateTotalFilters(view.query_data ?? {}); 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"}

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