62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { cn } from "@plane/utils";
|
|
import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
|
|
import { ExternalContoursBoardFiltersRow } from "./board-filters-row";
|
|
import { ExternalContoursBoardColumn } from "./board-column";
|
|
|
|
type Props = {
|
|
projectId: string;
|
|
workspaceSlug: string;
|
|
};
|
|
|
|
export const ExternalContoursBoardRoot = observer(function ExternalContoursBoardRoot(props: Props) {
|
|
const { projectId, workspaceSlug } = props;
|
|
const { t } = useTranslation();
|
|
const { hasAnyItems, isFiltering, loader } = useProjectExternalContoursBoard();
|
|
|
|
return (
|
|
<div className="flex h-full min-h-0 flex-col overflow-hidden px-8 pb-6">
|
|
<div className="shrink-0 py-4">
|
|
<ExternalContoursBoardFiltersRow workspaceSlug={workspaceSlug} projectId={projectId} />
|
|
</div>
|
|
|
|
{loader === "init-loading" && !hasAnyItems ? (
|
|
<div className="flex flex-1 items-center justify-center text-13 text-secondary">{t("loading")}...</div>
|
|
) : (
|
|
<div className="relative min-h-0 flex-1">
|
|
{isFiltering && (
|
|
<div className="pointer-events-none absolute top-0 right-0 z-10 rounded-full bg-black/35 px-3 py-1 text-11 font-medium text-secondary backdrop-blur-sm">
|
|
{t("updating")}...
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={cn(
|
|
"horizontal-scrollbar flex h-full min-h-0 items-stretch gap-4 overflow-x-auto overflow-y-hidden pb-1 transition-opacity",
|
|
{ "opacity-60": isFiltering }
|
|
)}
|
|
>
|
|
<ExternalContoursBoardColumn
|
|
direction="outgoing"
|
|
projectId={projectId}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
<ExternalContoursBoardColumn
|
|
direction="incoming"
|
|
projectId={projectId}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|