UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: внешний контур, auth empty state и HDESIGN update
This commit is contained in:
@@ -10,6 +10,7 @@ import { useTranslation } from "@plane/i18n";
|
||||
import type { TInboxIssueCurrentTab } from "@plane/types";
|
||||
import { EInboxIssueCurrentTab } from "@plane/types";
|
||||
import { cn } from "@plane/utils";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
|
||||
import { useAppRouter } from "@/hooks/use-app-router";
|
||||
import { ExternalContoursEmptyState } from "./empty-state";
|
||||
@@ -30,17 +31,20 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
|
||||
export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
|
||||
const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
|
||||
const router = useAppRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { t } = useTranslation();
|
||||
const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
|
||||
const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
|
||||
useProjectExternalContours();
|
||||
const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
|
||||
const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
|
||||
|
||||
useEffect(() => {
|
||||
if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
|
||||
router.push(
|
||||
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
|
||||
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
|
||||
);
|
||||
}
|
||||
}, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
|
||||
}, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
|
||||
|
||||
return (
|
||||
<div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
|
||||
@@ -52,27 +56,27 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={option.key}
|
||||
data-active={currentTab === option.key}
|
||||
className={cn(
|
||||
key={option.key}
|
||||
data-active={routeTab === option.key}
|
||||
className={cn(
|
||||
"nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
|
||||
)}
|
||||
onClick={() => {
|
||||
if (currentTab !== option.key) {
|
||||
handleCurrentTab(workspaceSlug, projectId, option.key);
|
||||
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
)}
|
||||
onClick={() => {
|
||||
if (routeTab !== option.key) {
|
||||
void handleCurrentTab(workspaceSlug, projectId, option.key);
|
||||
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>{t(option.i18n_label)}</div>
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full px-1.5 py-0.5 text-11 font-semibold",
|
||||
currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
|
||||
routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
|
||||
)}
|
||||
>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -80,14 +84,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
|
||||
</div>
|
||||
|
||||
<div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
|
||||
{loader === "init-loading" ? (
|
||||
{isTabTransitioning ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
|
||||
{t("loading")}...
|
||||
</div>
|
||||
</div>
|
||||
) : filteredRequestIds.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
<div key={routeTab} className="space-y-2">
|
||||
{filteredRequestIds.map((requestId) => (
|
||||
<ExternalContoursListItem
|
||||
key={requestId}
|
||||
@@ -102,12 +106,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<ExternalContoursEmptyState
|
||||
title={t(
|
||||
currentTab === EInboxIssueCurrentTab.OPEN
|
||||
routeTab === EInboxIssueCurrentTab.OPEN
|
||||
? "external_contours_page.empty_state.open_title"
|
||||
: "external_contours_page.empty_state.closed_title"
|
||||
)}
|
||||
description={t(
|
||||
currentTab === EInboxIssueCurrentTab.OPEN
|
||||
routeTab === EInboxIssueCurrentTab.OPEN
|
||||
? "external_contours_page.empty_state.open_description"
|
||||
: "external_contours_page.empty_state.closed_description"
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user