8ebde8aa05
Some checks failed
Branch Build CE / Build Setup (push) Has been cancelled
Branch Build CE / Build-Push Admin Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Web Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Space Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Live Collaboration Docker Image (push) Has been cancelled
Branch Build CE / Build-Push API Server Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Proxy Docker Image (push) Has been cancelled
Branch Build CE / Build-Push AIO Docker Image (push) Has been cancelled
Branch Build CE / Upload Build Assets (push) Has been cancelled
Branch Build CE / Build Release (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Codespell / Check for spelling errors (push) Has been cancelled
Sync Repositories / sync_changes (push) Has been cancelled
Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import type { FC } from "react";
|
|
import { observer } from "mobx-react";
|
|
import Image from "next/image";
|
|
// components
|
|
import { useTranslation } from "@plane/i18n";
|
|
// assets
|
|
import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
|
|
import NameFilterImage from "@/app/assets/empty-state/cycle/name-filter.svg?url";
|
|
// components
|
|
import { CyclesList } from "@/components/cycles/list";
|
|
import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
|
|
// hooks
|
|
import { useCycle } from "@/hooks/store/use-cycle";
|
|
import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
|
|
|
|
export interface ICyclesView {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
}
|
|
|
|
export const CyclesView: FC<ICyclesView> = observer((props) => {
|
|
const { workspaceSlug, projectId } = props;
|
|
// store hooks
|
|
const { getFilteredCycleIds, getFilteredCompletedCycleIds, loader, currentProjectActiveCycleId } = useCycle();
|
|
const { searchQuery } = useCycleFilter();
|
|
const { t } = useTranslation();
|
|
// derived values
|
|
const filteredCycleIds = getFilteredCycleIds(projectId, false);
|
|
const filteredCompletedCycleIds = getFilteredCompletedCycleIds(projectId);
|
|
const filteredUpcomingCycleIds = (filteredCycleIds ?? []).filter(
|
|
(cycleId) => cycleId !== currentProjectActiveCycleId
|
|
);
|
|
|
|
if (loader || !filteredCycleIds) return <CycleModuleListLayoutLoader />;
|
|
|
|
if (filteredCycleIds.length === 0 && filteredCompletedCycleIds?.length === 0)
|
|
return (
|
|
<div className="grid h-full w-full place-items-center">
|
|
<div className="text-center">
|
|
<Image
|
|
src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
|
|
className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
|
|
alt="No matching cycles"
|
|
/>
|
|
<h5 className="mb-1 mt-7 text-xl font-medium">{t("project_cycles.no_matching_cycles")}</h5>
|
|
<p className="text-base text-custom-text-400">
|
|
{searchQuery.trim() === ""
|
|
? t("project_cycles.remove_filters_to_see_all_cycles")
|
|
: t("project_cycles.remove_search_criteria_to_see_all_cycles")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<CyclesList
|
|
completedCycleIds={filteredCompletedCycleIds ?? []}
|
|
upcomingCycleIds={filteredUpcomingCycleIds}
|
|
cycleIds={filteredCycleIds}
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
/>
|
|
);
|
|
});
|