76 lines
2.8 KiB
TypeScript
76 lines
2.8 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 type { TExternalContourBoardDirection } from "@plane/types";
|
|
import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
|
|
import { ExternalContoursBoardItem } from "./board-item";
|
|
import { ExternalContoursEmptyState } from "./empty-state";
|
|
|
|
type Props = {
|
|
direction: TExternalContourBoardDirection;
|
|
projectId: string;
|
|
workspaceSlug: string;
|
|
};
|
|
|
|
export const ExternalContoursBoardColumn = observer(function ExternalContoursBoardColumn(props: Props) {
|
|
const { direction, projectId, workspaceSlug } = props;
|
|
const { t } = useTranslation();
|
|
const { getColumnRequestIds, getColumnTotalCount, getRequestById } = useProjectExternalContoursBoard();
|
|
const requestIds = getColumnRequestIds(direction);
|
|
const totalCount = getColumnTotalCount(direction);
|
|
|
|
const title =
|
|
direction === "outgoing"
|
|
? t("external_contours_page.board.columns.outgoing")
|
|
: t("external_contours_page.board.columns.incoming");
|
|
|
|
const emptyTitle =
|
|
direction === "outgoing"
|
|
? t("external_contours_page.board.empty.outgoing_title")
|
|
: t("external_contours_page.board.empty.incoming_title");
|
|
|
|
const emptyDescription =
|
|
direction === "outgoing"
|
|
? t("external_contours_page.board.empty.outgoing_description")
|
|
: t("external_contours_page.board.empty.incoming_description");
|
|
|
|
return (
|
|
<section className="flex h-full min-h-0 w-[350px] flex-shrink-0 flex-col">
|
|
<div className="flex items-center justify-between gap-3 py-1.5">
|
|
<div className="text-15 font-semibold text-primary">{title}</div>
|
|
<div className="rounded-full bg-white/5 px-2 py-1 text-12 font-semibold text-secondary">{totalCount}</div>
|
|
</div>
|
|
|
|
<div className="vertical-scrollbar scrollbar-md -mr-2 h-full min-h-[120px] flex-1 overflow-y-auto pr-2 pt-3">
|
|
{requestIds.length > 0 ? (
|
|
<>
|
|
{requestIds.map((requestId) => {
|
|
const request = getRequestById(requestId);
|
|
if (!request) return null;
|
|
|
|
return (
|
|
<ExternalContoursBoardItem
|
|
key={requestId}
|
|
direction={direction}
|
|
projectId={projectId}
|
|
request={request}
|
|
workspaceSlug={workspaceSlug}
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
) : (
|
|
<div className="flex h-full min-h-[18rem] items-center justify-center">
|
|
<ExternalContoursEmptyState title={emptyTitle} description={emptyDescription} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
});
|