SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: интерактивные карточки и фильтры двусторонней доски внешних контуров

This commit is contained in:
DCCONSTRUCTIONS 2026-04-20 22:57:18 +03:00
parent 6a3adcd245
commit d3b4c0689c
16 changed files with 754 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plane-src/apps/api/plane/api/serializers/external_contours.py
View File

@ -44,6 +44,11 @@ class ExternalContourRequestReplySerializer(serializers.Serializer):
class ExternalContourRequestUpdateSerializer(serializers.Serializer): class ExternalContourRequestUpdateSerializer(serializers.Serializer):
name = serializers.CharField(max_length=255, required=False) name = serializers.CharField(max_length=255, required=False)
description_html = serializers.CharField(required=False, allow_blank=True, allow_null=True) description_html = serializers.CharField(required=False, allow_blank=True, allow_null=True)
priority = serializers.ChoiceField(choices=Issue.PRIORITY_CHOICES, required=False)
assignee_ids = serializers.ListField(child=serializers.UUIDField(), required=False)
label_ids = serializers.ListField(child=serializers.UUIDField(), required=False)
state_id = serializers.UUIDField(required=False)
target_date = serializers.DateField(required=False, allow_null=True)
def validate(self, data): def validate(self, data):
if not data: if not data:
@ -69,6 +74,7 @@ class ExternalContourTargetProjectSerializer(BaseSerializer):
class ExternalContourTargetOptionsSerializer(serializers.Serializer): class ExternalContourTargetOptionsSerializer(serializers.Serializer):
project = ExternalContourTargetProjectSerializer(read_only=True) project = ExternalContourTargetProjectSerializer(read_only=True)
member_ids = serializers.ListField(child=serializers.UUIDField(), read_only=True) member_ids = serializers.ListField(child=serializers.UUIDField(), read_only=True)
states = StateLiteSerializer(many=True, read_only=True)
labels = LabelSerializer(many=True, read_only=True) labels = LabelSerializer(many=True, read_only=True)

13
plane-src/apps/api/plane/api/views/external_contours.py
View File

@ -247,11 +247,15 @@ class ExternalContourTargetOptionsEndpoint(BaseAPIView):
) )
labels = Label.objects.filter(project=target_project).order_by("sort_order", "name") labels = Label.objects.filter(project=target_project).order_by("sort_order", "name")
states = State.objects.filter(project=target_project).exclude(group=StateGroup.TRIAGE.value).order_by(
"sequence", "created_at"
)
serializer = ExternalContourTargetOptionsSerializer( serializer = ExternalContourTargetOptionsSerializer(
{ {
"project": target_project, "project": target_project,
"member_ids": member_ids, "member_ids": member_ids,
"states": states,
"labels": labels, "labels": labels,
} }
) )
@ -326,10 +330,17 @@ class ExternalContourDetailEndpoint(BaseAPIView):
serializer = ExternalContourRequestUpdateSerializer(data=request.data) serializer = ExternalContourRequestUpdateSerializer(data=request.data)
serializer.is_valid(raise_exception=True) serializer.is_valid(raise_exception=True)
issue_update_data = serializer.validated_data.copy()
assignee_ids = issue_update_data.pop("assignee_ids", None)
label_ids = issue_update_data.pop("label_ids", None)
if assignee_ids is not None:
issue_update_data["assignees"] = assignee_ids
if label_ids is not None:
issue_update_data["labels"] = label_ids
issue_serializer = IssueCreateSerializer( issue_serializer = IssueCreateSerializer(
issue, issue,
data=serializer.validated_data, data=issue_update_data,
partial=True, partial=True,
context={ context={
"project_id": str(issue.project_id), "project_id": str(issue.project_id),

28
plane-src/apps/api/plane/app/views/external_contours.py
View File

@ -249,11 +249,15 @@ class ExternalContourTargetOptionsEndpoint(BaseAPIView):
) )
labels = Label.objects.filter(project=target_project).order_by("sort_order", "name") labels = Label.objects.filter(project=target_project).order_by("sort_order", "name")
states = State.objects.filter(project=target_project).exclude(group=StateGroup.TRIAGE.value).order_by(
"sequence", "created_at"
)
serializer = ExternalContourTargetOptionsSerializer( serializer = ExternalContourTargetOptionsSerializer(
{ {
"project": target_project, "project": target_project,
"member_ids": member_ids, "member_ids": member_ids,
"states": states,
"labels": labels, "labels": labels,
} }
) )
@ -324,6 +328,7 @@ class ExternalContourReadMixin:
"assignee_ids", "assignee_ids",
"created_by_ids", "created_by_ids",
"requested_by_ids", "requested_by_ids",
"counterparty_project_ids",
"source_project_ids", "source_project_ids",
"target_project_ids", "target_project_ids",
"label_ids", "label_ids",
@ -377,7 +382,7 @@ class ExternalContourReadMixin:
return queryset.filter(issue__state__group__in=self.CLOSED_STATE_GROUPS) return queryset.filter(issue__state__group__in=self.CLOSED_STATE_GROUPS)
return queryset return queryset
def apply_board_filters(self, queryset, request): def apply_board_filters(self, queryset, request, direction=None):
filters = self.get_applied_filters(request) filters = self.get_applied_filters(request)
if filters["search"]: if filters["search"]:
@ -397,6 +402,14 @@ class ExternalContourReadMixin:
queryset = queryset.filter(issue__created_by_id__in=filters["created_by_ids"]) queryset = queryset.filter(issue__created_by_id__in=filters["created_by_ids"])
if filters["requested_by_ids"]: if filters["requested_by_ids"]:
queryset = queryset.filter(extra__requested_by_id__in=filters["requested_by_ids"]) queryset = queryset.filter(extra__requested_by_id__in=filters["requested_by_ids"])
if filters["counterparty_project_ids"]:
if direction == "outgoing":
queryset = queryset.filter(
Q(extra__target_project_id__in=filters["counterparty_project_ids"])
| Q(issue__project_id__in=filters["counterparty_project_ids"])
)
elif direction == "incoming":
queryset = queryset.filter(extra__source_project_id__in=filters["counterparty_project_ids"])
if filters["source_project_ids"]: if filters["source_project_ids"]:
queryset = queryset.filter(extra__source_project_id__in=filters["source_project_ids"]) queryset = queryset.filter(extra__source_project_id__in=filters["source_project_ids"])
if filters["target_project_ids"]: if filters["target_project_ids"]:
@ -494,8 +507,8 @@ class ExternalContourBoardEndpoint(ExternalContourReadMixin, BaseAPIView):
requested_directions = self.get_requested_directions(request) requested_directions = self.get_requested_directions(request)
current_project_id = str(project_id) current_project_id = str(project_id)
outgoing_queryset = self.apply_board_filters(self.get_outgoing_queryset(), request) outgoing_queryset = self.apply_board_filters(self.get_outgoing_queryset(), request, direction="outgoing")
incoming_queryset = self.apply_board_filters(self.get_incoming_queryset(), request) incoming_queryset = self.apply_board_filters(self.get_incoming_queryset(), request, direction="incoming")
outgoing_requests = list(outgoing_queryset) if "outgoing" in requested_directions else [] outgoing_requests = list(outgoing_queryset) if "outgoing" in requested_directions else []
incoming_requests = list(incoming_queryset) if "incoming" in requested_directions else [] incoming_requests = list(incoming_queryset) if "incoming" in requested_directions else []
@ -624,10 +637,17 @@ class ExternalContourDetailEndpoint(BaseAPIView):
serializer = ExternalContourRequestUpdateSerializer(data=request.data) serializer = ExternalContourRequestUpdateSerializer(data=request.data)
serializer.is_valid(raise_exception=True) serializer.is_valid(raise_exception=True)
issue_update_data = serializer.validated_data.copy()
assignee_ids = issue_update_data.pop("assignee_ids", None)
label_ids = issue_update_data.pop("label_ids", None)
if assignee_ids is not None:
issue_update_data["assignees"] = assignee_ids
if label_ids is not None:
issue_update_data["labels"] = label_ids
issue_serializer = IssueCreateSerializer( issue_serializer = IssueCreateSerializer(
issue, issue,
data=serializer.validated_data, data=issue_update_data,
partial=True, partial=True,
context={ context={
"project_id": str(issue.project_id), "project_id": str(issue.project_id),

280
plane-src/apps/web/ce/components/projects/external-contours/board-filters-row.tsx
View File

@ -24,6 +24,7 @@ type Props = {
type TFilterOption = { type TFilterOption = {
avatarUrl?: string | null; avatarUrl?: string | null;
color?: string | null;
id: string; id: string;
label: string; label: string;
}; };
@ -39,8 +40,18 @@ const DEFAULT_SORTING_KEY = "updated_at:desc";
export const ExternalContoursBoardFiltersRow = observer(function ExternalContoursBoardFiltersRow(props: Props) { export const ExternalContoursBoardFiltersRow = observer(function ExternalContoursBoardFiltersRow(props: Props) {
const { projectId, workspaceSlug } = props; const { projectId, workspaceSlug } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const { activeFiltersCount, clearFilters, filters, isSortingDefault, items, sorting, updateFilters, updateSorting } = const {
useProjectExternalContoursBoard(); activeFiltersCount,
clearFilters,
filters,
getColumnRequestIds,
getRequestById,
isSortingDefault,
items,
sorting,
updateFilters,
updateSorting,
} = useProjectExternalContoursBoard();
const [searchQuery, setSearchQuery] = useState(filters.search ?? ""); const [searchQuery, setSearchQuery] = useState(filters.search ?? "");
const debouncedSearchQuery = useDebounce(searchQuery, 400); const debouncedSearchQuery = useDebounce(searchQuery, 400);
@ -60,11 +71,33 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
void updateFilters(workspaceSlug, projectId, { search: nextSearch || undefined }); void updateFilters(workspaceSlug, projectId, { search: nextSearch || undefined });
}, [debouncedSearchQuery, filters.search, projectId, searchQuery, updateFilters, workspaceSlug]); }, [debouncedSearchQuery, filters.search, projectId, searchQuery, updateFilters, workspaceSlug]);
const requests = Object.values(items); const visibleRequestIds = [...getColumnRequestIds("outgoing"), ...getColumnRequestIds("incoming")];
const visibleRequests = visibleRequestIds.flatMap((requestId) => {
const request = getRequestById(requestId);
return request ? [request] : [];
});
const cachedRequests = Object.values(items);
const assigneeOptions = useMemo(() => getAssigneeOptions(requests), [requests]); const contourOptions = useMemo(
const requesterOptions = useMemo(() => getRequesterOptions(requests), [requests]); () =>
const priorityOptions = useMemo(() => getPriorityOptions(requests, t), [requests, t]); getCounterpartyProjectOptions(
visibleRequests,
cachedRequests,
filters.counterparty_project_ids ?? [],
projectId
),
[cachedRequests, filters.counterparty_project_ids, projectId, visibleRequests]
);
const stateOptions = useMemo(
() => getStateOptions(visibleRequests, cachedRequests, filters.state_ids ?? []),
[cachedRequests, filters.state_ids, visibleRequests]
);
const assigneeOptions = useMemo(() => getAssigneeOptions(visibleRequests, cachedRequests, filters.assignee_ids ?? []), [cachedRequests, filters.assignee_ids, visibleRequests]);
const requesterOptions = useMemo(
() => getRequesterOptions(visibleRequests, cachedRequests, filters.requested_by_ids ?? []),
[cachedRequests, filters.requested_by_ids, visibleRequests]
);
const priorityOptions = useMemo(() => getPriorityOptions(visibleRequests, cachedRequests, filters.priority ?? [], t), [cachedRequests, filters.priority, t, visibleRequests]);
const sortingOptions = useMemo<TSortingOption[]>( const sortingOptions = useMemo<TSortingOption[]>(
() => [ () => [
@ -119,6 +152,72 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
)} )}
</div> </div>
<MultiSelectDropdown
value={filters.counterparty_project_ids ?? []}
onChange={(value) =>
void updateFilters(workspaceSlug, projectId, {
counterparty_project_ids: value.length > 0 ? value : undefined,
})
}
options={contourOptions}
keyExtractor={(option) => option.value}
queryArray={["label"]}
inputPlaceholder={t("external_contours_page.board.filters.search_contour")}
buttonContainerClassName="h-10"
optionsContainerClassName="w-72"
disabled={contourOptions.length === 0 && (filters.counterparty_project_ids?.length ?? 0) === 0}
buttonContent={(isOpen) => (
<FilterTrigger
label={t("external_contours_page.board.filters.contour")}
count={filters.counterparty_project_ids?.length ?? 0}
isOpen={isOpen}
/>
)}
renderItem={({ value, selected }) => {
const option = contourOptions.find((item) => item.value === value);
if (!option) return null;
return (
<div className="flex w-full items-center justify-between gap-2 text-secondary">
<span className="truncate text-12 font-medium">{option.data.label}</span>
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
);
}}
/>
<MultiSelectDropdown
value={filters.state_ids ?? []}
onChange={(value) => void updateFilters(workspaceSlug, projectId, { state_ids: value.length > 0 ? value : undefined })}
options={stateOptions}
keyExtractor={(option) => option.value}
queryArray={["label"]}
inputPlaceholder={t("external_contours_page.board.filters.search_state")}
buttonContainerClassName="h-10"
optionsContainerClassName="w-64"
disabled={stateOptions.length === 0 && (filters.state_ids?.length ?? 0) === 0}
buttonContent={(isOpen) => (
<FilterTrigger label={t("state")} count={filters.state_ids?.length ?? 0} isOpen={isOpen} />
)}
renderItem={({ value, selected }) => {
const option = stateOptions.find((item) => item.value === value);
if (!option) return null;
return (
<div className="flex w-full items-center justify-between gap-2 text-secondary">
<div className="flex min-w-0 items-center gap-2">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{ backgroundColor: option.data.color || "rgba(255,255,255,0.3)" }}
/>
<span className="truncate text-12 font-medium">{option.data.label}</span>
</div>
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
);
}}
/>
<MultiSelectDropdown <MultiSelectDropdown
value={filters.priority ?? []} value={filters.priority ?? []}
onChange={(value) => void updateFilters(workspaceSlug, projectId, { priority: value.length > 0 ? value : undefined })} onChange={(value) => void updateFilters(workspaceSlug, projectId, { priority: value.length > 0 ? value : undefined })}
@ -223,10 +322,10 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
<button <button
type="button" type="button"
className={cn( className={cn(
"flex h-10 items-center gap-2 rounded-full px-3 text-12 font-medium transition-all", "nodedc-toolbar-pill !min-h-10 !px-4 text-12 font-medium",
filters.has_unread_updates filters.has_unread_updates
? "bg-accent-primary text-accent-on-primary" ? "!bg-[rgb(var(--nodedc-accent-rgb))] !text-[#0b1117]"
: "bg-white/5 text-secondary hover:bg-white/8 hover:text-primary" : "text-secondary"
)} )}
onClick={() => onClick={() =>
void updateFilters(workspaceSlug, projectId, { void updateFilters(workspaceSlug, projectId, {
@ -239,7 +338,12 @@ export const ExternalContoursBoardFiltersRow = observer(function ExternalContour
</button> </button>
{shouldShowClear && ( {shouldShowClear && (
<Button variant="secondary" size="lg" className="!h-10 !rounded-full !px-4" onClick={() => void clearFilters(workspaceSlug, projectId)}> <Button
variant="secondary"
size="lg"
className="nodedc-toolbar-pill !h-10 !rounded-full !px-4"
onClick={() => void clearFilters(workspaceSlug, projectId)}
>
{t("common.clear")} {t("common.clear")}
</Button> </Button>
)} )}
@ -296,11 +400,10 @@ function FilterTrigger(props: TFilterTriggerProps) {
return ( return (
<div <div
data-active={isOpen || count > 0}
className={cn( className={cn(
"flex h-10 items-center gap-2 rounded-full bg-white/5 px-3 text-12 font-medium text-secondary transition-all hover:bg-white/8 hover:text-primary", "nodedc-toolbar-pill !min-h-10 gap-2 !px-4 text-12 font-medium",
{ isOpen || count > 0 ? "text-[rgb(var(--nodedc-accent-rgb))]" : "text-secondary"
"bg-white/8 text-primary": isOpen || count > 0,
}
)} )}
> >
{icon} {icon}
@ -311,26 +414,107 @@ function FilterTrigger(props: TFilterTriggerProps) {
); );
} }
const getPriorityOptions = (requests: TExternalContourRequest[], t: ReturnType<typeof useTranslation>["t"]) => { const sortFilterOptions = (options: TFilterOption[]) => options.sort((left, right) => left.label.localeCompare(right.label));
const priorityKeys = new Set<string>();
requests.forEach((request) => { const buildOptionsWithSelectedFallback = (
if (request.issue.priority && request.issue.priority !== "none") priorityKeys.add(request.issue.priority); visibleRequests: TExternalContourRequest[],
}); cachedRequests: TExternalContourRequest[],
selectedIds: string[],
getOption: (request: TExternalContourRequest) => TFilterOption | null
) => {
const optionMap = new Map<string, TFilterOption>();
return ISSUE_PRIORITIES.filter((priority) => priority.key !== "none" && priorityKeys.has(priority.key)).map((priority) => ({ const upsertOption = (request: TExternalContourRequest) => {
data: { const option = getOption(request);
id: priority.key, if (!option?.id || optionMap.has(option.id)) return;
label: t(priority.key), optionMap.set(option.id, option);
}, };
value: priority.key,
visibleRequests.forEach(upsertOption);
if (selectedIds.length > 0) {
cachedRequests.forEach((request) => {
const option = getOption(request);
if (!option?.id || !selectedIds.includes(option.id) || optionMap.has(option.id)) return;
optionMap.set(option.id, option);
});
}
return sortFilterOptions(Array.from(optionMap.values())).map((option) => ({
data: option,
value: option.id,
})); }));
}; };
const getAssigneeOptions = (requests: TExternalContourRequest[]) => { const getCounterpartyProjectOptions = (
visibleRequests: TExternalContourRequest[],
cachedRequests: TExternalContourRequest[],
selectedIds: string[],
currentProjectId: string
) =>
buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
const project = request.direction === "incoming" ? request.source_project : request.target_project;
const fallbackName = request.direction === "incoming" ? request.source_project_name : request.target_project_name;
if (!project?.id || project.id === currentProjectId) return null;
return {
id: project.id,
label: project.name || project.identifier || fallbackName || "NODE.DC",
};
});
const getStateOptions = (
visibleRequests: TExternalContourRequest[],
cachedRequests: TExternalContourRequest[],
selectedIds: string[]
) =>
buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
const state = request.issue.state_detail;
if (!state?.id) return null;
return {
id: state.id,
label: state.name || "Без статуса",
color: state.color || null,
};
});
const getPriorityOptions = (
visibleRequests: TExternalContourRequest[],
cachedRequests: TExternalContourRequest[],
selectedIds: string[],
t: ReturnType<typeof useTranslation>["t"]
) => {
const priorityKeys = new Set<string>();
[...visibleRequests, ...cachedRequests].forEach((request) => {
if (request.issue.priority && request.issue.priority !== "none") priorityKeys.add(request.issue.priority);
});
selectedIds.forEach((priority) => {
if (priority && priority !== "none") priorityKeys.add(priority);
});
return ISSUE_PRIORITIES.filter((priority) => priority.key !== "none" && priorityKeys.has(priority.key))
.map((priority) => ({
data: {
id: priority.key,
label: t(priority.key),
},
value: priority.key,
}))
.sort((left, right) => left.data.label.localeCompare(right.data.label));
};
const getAssigneeOptions = (
visibleRequests: TExternalContourRequest[],
cachedRequests: TExternalContourRequest[],
selectedIds: string[]
) => {
const assigneeMap = new Map<string, TFilterOption>(); const assigneeMap = new Map<string, TFilterOption>();
requests.forEach((request) => { const upsertAssignees = (request: TExternalContourRequest) => {
request.issue.assignee_details?.forEach((assignee) => { request.issue.assignee_details?.forEach((assignee) => {
if (!assignee?.id || assigneeMap.has(assignee.id)) return; if (!assignee?.id || assigneeMap.has(assignee.id)) return;
assigneeMap.set(assignee.id, { assigneeMap.set(assignee.id, {
@ -339,31 +523,41 @@ const getAssigneeOptions = (requests: TExternalContourRequest[]) => {
avatarUrl: assignee.avatar_url || "", avatarUrl: assignee.avatar_url || "",
}); });
}); });
}); };
return Array.from(assigneeMap.values()) visibleRequests.forEach(upsertAssignees);
.sort((left, right) => left.label.localeCompare(right.label))
.map((option) => ({ data: option, value: option.id })); if (selectedIds.length > 0) {
cachedRequests.forEach((request) => {
request.issue.assignee_details?.forEach((assignee) => {
if (!assignee?.id || !selectedIds.includes(assignee.id) || assigneeMap.has(assignee.id)) return;
assigneeMap.set(assignee.id, {
id: assignee.id,
label: assignee.display_name || "NODE.DC",
avatarUrl: assignee.avatar_url || "",
});
});
});
}
return sortFilterOptions(Array.from(assigneeMap.values())).map((option) => ({ data: option, value: option.id }));
}; };
const getRequesterOptions = (requests: TExternalContourRequest[]) => { const getRequesterOptions = (
const requesterMap = new Map<string, TFilterOption>(); visibleRequests: TExternalContourRequest[],
cachedRequests: TExternalContourRequest[],
requests.forEach((request) => { selectedIds: string[]
) =>
buildOptionsWithSelectedFallback(visibleRequests, cachedRequests, selectedIds, (request) => {
const requesterId = request.requested_by?.id || request.requested_by_id || request.issue.created_by_detail?.id; const requesterId = request.requested_by?.id || request.requested_by_id || request.issue.created_by_detail?.id;
const requesterLabel = const requesterLabel =
request.requested_by?.display_name || request.requested_by_name || request.issue.created_by_detail?.display_name; request.requested_by?.display_name || request.requested_by_name || request.issue.created_by_detail?.display_name;
if (!requesterId || !requesterLabel || requesterMap.has(requesterId)) return; if (!requesterId || !requesterLabel) return null;
requesterMap.set(requesterId, { return {
id: requesterId, id: requesterId,
label: requesterLabel, label: requesterLabel,
avatarUrl: request.issue.created_by_detail?.avatar_url || "", avatarUrl: request.issue.created_by_detail?.avatar_url || "",
}); };
}); });
return Array.from(requesterMap.values())
.sort((left, right) => left.label.localeCompare(right.label))
.map((option) => ({ data: option, value: option.id }));
};

397
plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx
View File

@ -4,14 +4,37 @@
* See the LICENSE file for details. * See the LICENSE file for details.
*/ */
import Link from "next/link"; import { useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { CalendarDays } from "lucide-react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { EUserPermissions } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { PriorityIcon } from "@plane/propel/icons"; import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type {
IState,
TExternalContourBoardDirection,
TExternalContourRequest,
TInboxIssueCurrentTab,
TIssue,
} from "@plane/types";
import { Avatar } from "@plane/ui"; import { Avatar } from "@plane/ui";
import { cn, renderFormattedDate } from "@plane/utils"; import { cn, renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
import type { TExternalContourBoardDirection, TExternalContourRequest, TInboxIssueCurrentTab } from "@plane/types"; import { DateDropdown } from "@/components/dropdowns/date";
import { ExternalContourStatePill } from "./state-pill"; import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
import { MemberDropdownBase } from "@/components/dropdowns/member/base";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { WorkItemStateDropdownBase } from "@/components/dropdowns/state/base";
import { StateDropdown } from "@/components/dropdowns/state/dropdown";
import { useAppRouter } from "@/hooks/use-app-router";
import { useMember } from "@/hooks/store/use-member";
import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useProjectState } from "@/hooks/store/use-project-state";
import { useUserPermissions } from "@/hooks/store/user";
import { IssueService } from "@/services/issue/issue.service";
type Props = { type Props = {
currentTab: TInboxIssueCurrentTab; currentTab: TInboxIssueCurrentTab;
@ -21,72 +44,340 @@ type Props = {
workspaceSlug: string; workspaceSlug: string;
}; };
const issueService = new IssueService();
const basePillClasses =
"inline-flex min-h-9 items-center gap-1.5 rounded-full border-0 px-2.5 py-1 text-[11px] font-medium shadow-none outline-none transition-colors";
const buildSourceStateMap = (
states: { id: string; name: string; color: string; group: IState["group"] }[] | undefined,
projectId: string | null
) =>
Object.fromEntries(
(states ?? []).map((state, index) => [
state.id,
{
id: state.id,
color: state.color,
default: false,
description: "",
group: state.group,
name: state.name,
order: index + 1,
project_id: projectId ?? "",
sequence: index + 1,
workspace_id: "",
} satisfies IState,
])
);
const resolveRequestStatus = (issue: TExternalContourRequest["issue"], fallbackStatus: TExternalContourRequest["status"]) => {
const stateGroup = issue.state_detail?.group;
if (!stateGroup) return fallbackStatus;
return stateGroup === "completed" || stateGroup === "cancelled" ? "closed" : "open";
};
export const ExternalContoursBoardItem = observer(function ExternalContoursBoardItem(props: Props) { export const ExternalContoursBoardItem = observer(function ExternalContoursBoardItem(props: Props) {
const { currentTab, direction, projectId, request, workspaceSlug } = props; const { currentTab, direction, projectId, request, workspaceSlug } = props;
const router = useAppRouter();
const searchParams = useSearchParams();
const { t } = useTranslation(); const { t } = useTranslation();
const { getUserDetails, workspace } = useMember();
const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
const { getStateById, getProjectStateIds } = useProjectState();
const {
currentTab: boardCurrentTab,
fetchBoard,
upsertBoardItems,
} = useProjectExternalContoursBoard();
const {
fetchTargetOptions,
getTargetOptionsByProjectId,
updateRequest,
updateRequestIssue,
} = useProjectExternalContours();
const [isUpdating, setIsUpdating] = useState(false);
const [isSourceOptionsLoading, setIsSourceOptionsLoading] = useState(false);
const issue = request.issue; const issue = request.issue;
const selectedInboxIssueId = searchParams.get("inboxIssueId");
const isActive = selectedInboxIssueId === request.id;
const requester = request.requested_by?.display_name || request.requested_by_name || issue.created_by_detail?.display_name || "NODE.DC"; const requester = request.requested_by?.display_name || request.requested_by_name || issue.created_by_detail?.display_name || "NODE.DC";
const requesterAvatar = issue.created_by_detail?.avatar_url || ""; const requesterAvatar = issue.created_by_detail?.avatar_url || "";
const counterpartContourName = const counterpartContourName =
direction === "outgoing" direction === "outgoing"
? request.target_project?.name || request.target_project_name || issue.project_detail?.name ? request.target_project?.name || request.target_project_name || issue.project_detail?.name
: request.source_project?.name || request.source_project_name; : request.source_project?.name || request.source_project_name;
const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? []; const targetProjectId = issue.project_id || request.target_project?.id || request.target_project_id || null;
const lastUpdatedAt = issue.updated_at || request.updated_at; const projectRole = targetProjectId
? getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, targetProjectId)
: undefined;
const canEditTargetIssue =
direction === "incoming" && !!targetProjectId && projectRole !== undefined && projectRole !== EUserPermissions.GUEST;
const canEditSourceRequest = direction === "outgoing" && !!request.capabilities?.can_edit_request && !!targetProjectId;
const canEditCard = canEditTargetIssue || canEditSourceRequest;
const requestLink = `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`;
const targetOptions = getTargetOptionsByProjectId(targetProjectId);
const sourceStateMap = useMemo(
() => buildSourceStateMap(targetOptions?.states, targetProjectId),
[targetOptions?.states, targetProjectId]
);
const sourceStateIds = useMemo(() => targetOptions?.states?.map((state) => state.id) ?? [], [targetOptions?.states]);
const selectedState = canEditTargetIssue ? getStateById(issue.state_id) : sourceStateMap[issue.state_id ?? ""];
const projectStateIds = issue.project_id ? getProjectStateIds(issue.project_id) : [];
const foregroundClasses = isActive ? "text-[#111111]" : "text-white";
const subtleTextClasses = isActive ? "text-[#2F4721]" : "text-[#B3B3B8]";
const pillBackgroundClasses =
isActive ? "bg-black/10 text-[#111111]" : "bg-[rgb(var(--nodedc-card-passive-rgb))] text-white";
const iconBubbleClasses = isActive ? "bg-black text-[rgb(var(--nodedc-card-active-rgb))]" : "bg-[#111214] text-white";
const statusIconColor = selectedState?.color ?? (isActive ? "#111111" : "var(--text-color-primary)");
const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
if (!issue) return null;
const stopCardPropagation = (event: React.MouseEvent) => {
event.stopPropagation();
};
const openDetail = () => {
if (isActive) return;
router.push(requestLink);
};
const syncBoardAfterMutation = async () => {
await fetchBoard(workspaceSlug, projectId, boardCurrentTab ?? currentTab);
};
const ensureSourceOptions = async () => {
if (!canEditSourceRequest || !targetProjectId) return;
const tasks: Promise<unknown>[] = [];
if (!targetOptions) {
setIsSourceOptionsLoading(true);
tasks.push(fetchTargetOptions(workspaceSlug, projectId, targetProjectId));
}
if (!workspace.workspaceMemberIds) {
tasks.push(workspace.fetchWorkspaceMembers(workspaceSlug));
}
if (tasks.length === 0) return;
try {
await Promise.all(tasks);
} finally {
setIsSourceOptionsLoading(false);
}
};
const handleTargetIssueUpdate = async (data: Partial<TIssue>) => {
if (!targetProjectId || !issue.id || isUpdating) return;
setIsUpdating(true);
try {
const updatedIssue = await issueService.patchIssue(workspaceSlug, targetProjectId, issue.id, data);
const nextIssue = { ...issue, ...updatedIssue };
const nextRequest = {
...request,
issue: nextIssue,
status: resolveRequestStatus(nextIssue, request.status),
};
updateRequestIssue(request.id, nextIssue);
upsertBoardItems([nextRequest]);
await syncBoardAfterMutation();
} catch {
setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
} finally {
setIsUpdating(false);
}
};
const handleSourceRequestUpdate = async (data: Partial<TIssue>) => {
if (!canEditSourceRequest || isUpdating) return;
setIsUpdating(true);
try {
const updatedRequest = await updateRequest(workspaceSlug, projectId, request.id, data);
if (updatedRequest) {
upsertBoardItems([updatedRequest]);
}
await syncBoardAfterMutation();
} catch {
setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
} finally {
setIsUpdating(false);
}
};
const handleCardUpdate = async (data: Partial<TIssue>) => {
if (canEditTargetIssue) {
await handleTargetIssueUpdate(data);
return;
}
await handleSourceRequestUpdate(data);
};
return ( return (
<Link <div className="block">
href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`} <div
className="block" data-active={isActive}
> className="nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col px-6 py-5 transition-all hover:bg-white/5"
<div className="nodedc-external-card relative flex min-h-[13rem] flex-col gap-4 px-5 py-5 transition-all hover:bg-white/5"> role="button"
<div className="space-y-1"> tabIndex={0}
<div className="flex items-center justify-between gap-3"> onClick={openDetail}
<div className="flex min-w-0 items-center gap-3"> onKeyDown={(event) => {
<Avatar src={requesterAvatar} name={requester} size="md" /> if (event.key === "Enter" || event.key === " ") {
<div className="min-w-0"> event.preventDefault();
<div className="truncate text-[15px] leading-5 font-semibold text-primary">{requester}</div> openDetail();
</div> }
</div> }}
>
<div className="flex items-center gap-2"> <div className={cn("relative flex min-h-[220px] flex-col px-1", foregroundClasses)}>
{request.has_unread_updates && <span className="size-2 rounded-full bg-accent-primary" />} <div className="space-y-0.5">
<ExternalContourStatePill request={request} /> <div className="flex items-center justify-between gap-3">
</div> <div className="flex min-w-0 flex-1 items-center gap-3">
</div> <div className="shrink-0">
<Avatar src={requesterAvatar} name={requester} size="md" />
<div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">
{counterpartContourName || t("common.none")}
</div>
</div>
<div className="flex flex-1 items-center justify-center px-3 text-center">
<h3 className="line-clamp-3 w-full text-center text-16 leading-7 font-semibold text-primary">{issue.name}</h3>
</div>
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
{assigneeDetails.length > 0 ? (
assigneeDetails.map((assignee, index) => (
<div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
<Avatar src={assignee.avatar_url || ""} name={assignee.display_name || "NODE.DC"} size="md" />
</div> </div>
)) <div className={cn("truncate text-body-sm-medium leading-5", foregroundClasses)}>{requester}</div>
) : ( </div>
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
)} <div className="flex shrink-0 items-center gap-2" onClick={stopCardPropagation}>
{request.has_unread_updates && (
<span
className={cn("size-2 rounded-full", isActive ? "bg-black/70" : "bg-accent-primary")}
title={t("external_contours_page.list.unread_updates")}
/>
)}
<PriorityDropdown
value={issue.priority}
onChange={(priority) => void handleCardUpdate({ priority })}
disabled={!canEditCard || isUpdating}
buttonVariant="transparent-without-text"
button={
<div
className={cn(
"flex h-8 w-8 items-center justify-center rounded-full border-0 shadow-none outline-none",
iconBubbleClasses
)}
>
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
</div>
}
/>
{canEditTargetIssue ? (
<StateDropdown
projectId={issue.project_id ?? undefined}
stateIds={projectStateIds ?? []}
value={issue.state_id}
onChange={(stateId) => void handleCardUpdate({ state_id: stateId })}
disabled={!canEditCard || isUpdating}
buttonVariant="transparent-without-text"
button={
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
<StateGroupIcon
stateGroup={selectedState?.group ?? "backlog"}
color={statusIconColor}
className="h-3.5 w-3.5"
percentage={selectedState?.order}
/>
</div>
}
/>
) : (
<WorkItemStateDropdownBase
projectId={targetProjectId ?? undefined}
value={issue.state_id}
stateIds={sourceStateIds}
getStateById={(stateId) => (stateId ? sourceStateMap[stateId] : undefined)}
onChange={(stateId) => void handleCardUpdate({ state_id: stateId })}
disabled={!canEditCard || isUpdating || !targetProjectId}
isInitializing={isSourceOptionsLoading}
onDropdownOpen={() => {
void ensureSourceOptions();
}}
buttonVariant="transparent-without-text"
button={
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
<StateGroupIcon
stateGroup={selectedState?.group ?? "backlog"}
color={statusIconColor}
className="h-3.5 w-3.5"
percentage={selectedState?.order}
/>
</div>
}
/>
)}
</div>
</div>
<div className={cn("truncate -mt-0.5 pl-8 text-[11px] font-medium leading-4", subtleTextClasses)}>
{counterpartContourName || t("common.none")}
</div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-1 items-center justify-center px-5 py-4 text-center">
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div> <div className="line-clamp-4 max-w-full text-lg font-semibold leading-6">{issue.name}</div>
{issue.priority && issue.priority !== "none" && ( </div>
<div className="nodedc-external-priority-inline flex items-center justify-center">
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" /> <div className="flex items-center justify-between gap-3" onClick={stopCardPropagation}>
</div> {canEditTargetIssue ? (
<MemberDropdown
multiple
projectId={issue.project_id ?? undefined}
value={issue.assignee_ids ?? []}
onChange={(assigneeIds) => void handleCardUpdate({ assignee_ids: assigneeIds })}
disabled={!canEditCard || isUpdating}
buttonVariant="transparent-without-text"
button={
<div className={cn(basePillClasses, pillBackgroundClasses, "pl-1 pr-2")}>
<ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
</div>
}
/>
) : (
<MemberDropdownBase
multiple
getUserDetails={getUserDetails}
memberIds={targetOptions?.member_ids ?? []}
value={issue.assignee_ids ?? []}
onChange={(assigneeIds) => void handleCardUpdate({ assignee_ids: assigneeIds })}
disabled={!canEditCard || isUpdating || !targetProjectId}
onDropdownOpen={() => {
void ensureSourceOptions();
}}
buttonVariant="transparent-without-text"
button={
<div className={cn(basePillClasses, pillBackgroundClasses, "pl-1 pr-2")}>
<ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
</div>
}
/>
)} )}
<DateDropdown
value={issue.target_date}
onChange={(targetDate) =>
void handleCardUpdate({
target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
})
}
disabled={!canEditCard || isUpdating}
buttonVariant="transparent-without-text"
button={
<div className={cn(basePillClasses, pillBackgroundClasses)}>
<CalendarDays className="h-3.5 w-3.5" />
<span className="truncate">{dueDateLabel}</span>
</div>
}
/>
</div> </div>
</div> </div>
</div> </div>
</Link> </div>
); );
}); });

5
plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
View File

@ -125,10 +125,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
remove: async () => undefined, remove: async () => undefined,
update: async (_workspaceSlug: string, _projectId: string, requestId: string, data: Partial<TIssue>) => { update: async (_workspaceSlug: string, _projectId: string, requestId: string, data: Partial<TIssue>) => {
try { try {
await updateRequest(workspaceSlug, sourceProjectId, requestId, { await updateRequest(workspaceSlug, sourceProjectId, requestId, data);
name: data.name,
description_html: data.description_html,
});
} catch { } catch {
setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") }); setToast({ title: t("error"), type: TOAST_TYPE.ERROR, message: t("issue_could_not_be_updated") });
} }

107
plane-src/apps/web/core/components/dropdowns/state/base.tsx
View File

@ -7,6 +7,7 @@
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// plane imports // plane imports
@ -211,60 +212,62 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
button={comboButton} button={comboButton}
renderByDefault={renderByDefault} renderByDefault={renderByDefault}
> >
{isOpen && ( {isOpen &&
<Combobox.Options className="fixed z-10" static> createPortal(
<div <Combobox.Options data-prevent-outside-click className="fixed z-30" static>
className="nodedc-glass-modal nodedc-glass-popup-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none" <div
ref={setPopperElement} className="nodedc-glass-modal nodedc-glass-popup-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
style={styles.popper} ref={setPopperElement}
{...attributes.popper} style={styles.popper}
> {...attributes.popper}
<div className="flex items-center gap-1.5 rounded-[0.95rem] border-0 bg-white/5 px-3 py-2 outline-none"> >
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} /> <div className="flex items-center gap-1.5 rounded-[0.95rem] border-0 bg-white/5 px-3 py-2 outline-none">
<Combobox.Input <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
as="input" <Combobox.Input
ref={inputRef} as="input"
className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none" ref={inputRef}
value={query} className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
onChange={(e) => setQuery(e.target.value)} value={query}
placeholder={t("common.search.label")} onChange={(e) => setQuery(e.target.value)}
displayValue={(assigned: any) => assigned?.name} placeholder={t("common.search.label")}
onKeyDown={searchInputKeyDown} displayValue={(assigned: any) => assigned?.name}
/> onKeyDown={searchInputKeyDown}
</div> />
<div className="mt-2 max-h-56 space-y-1 overflow-y-auto"> </div>
{filteredOptions ? ( <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
filteredOptions.length > 0 ? ( {filteredOptions ? (
filteredOptions.map((option) => ( filteredOptions.length > 0 ? (
<Combobox.Option filteredOptions.map((option) => (
key={option.value} <Combobox.Option
value={option.value} key={option.value}
className={({ active, selected }) => value={option.value}
cn( className={({ active, selected }) =>
`flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-[0.9rem] px-2 py-2 select-none outline-none ${ cn(
active ? "bg-white/6" : "" `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-[0.9rem] px-2 py-2 select-none outline-none ${
} ${selected ? "text-primary" : "text-secondary"}` active ? "bg-white/6" : ""
) } ${selected ? "text-primary" : "text-secondary"}`
} )
> }
{({ selected }) => ( >
<> {({ selected }) => (
<span className="flex-grow truncate">{option.content}</span> <>
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />} <span className="flex-grow truncate">{option.content}</span>
</> {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
)} </>
</Combobox.Option> )}
)) </Combobox.Option>
))
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
)
) : ( ) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p> <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
) )}
) : ( </div>
<p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
)}
</div> </div>
</div> </Combobox.Options>,
</Combobox.Options> document.body
)} )}
</ComboDropDown> </ComboDropDown>
); );
}); });

2
plane-src/apps/web/core/services/external-contours/external-contour.service.ts
View File

@ -71,7 +71,7 @@ export class ExternalContourService extends APIService {
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
requestId: string, requestId: string,
data: Pick<Partial<TIssue>, "name" | "description_html"> data: Pick<Partial<TIssue>, "name" | "description_html" | "priority" | "target_date" | "assignee_ids" | "label_ids" | "state_id">
): Promise<TExternalContourRequest> { ): Promise<TExternalContourRequest> {
return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/external-contours/${requestId}/`, data) return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/external-contours/${requestId}/`, data)
.then((response) => response?.data) .then((response) => response?.data)

4
plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts
View File

@ -38,7 +38,7 @@ export interface IProjectExternalContoursStore {
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
requestId: string, requestId: string,
data: Pick<Partial<TIssue>, "name" | "description_html"> data: Pick<Partial<TIssue>, "name" | "description_html" | "priority" | "target_date" | "assignee_ids" | "label_ids" | "state_id">
) => Promise<TExternalContourRequest | undefined>; ) => Promise<TExternalContourRequest | undefined>;
decideRequest: ( decideRequest: (
workspaceSlug: string, workspaceSlug: string,
@ -251,7 +251,7 @@ export class ProjectExternalContoursStore implements IProjectExternalContoursSto
workspaceSlug: string, workspaceSlug: string,
projectId: string, projectId: string,
requestId: string, requestId: string,
data: Pick<Partial<TIssue>, "name" | "description_html"> data: Pick<Partial<TIssue>, "name" | "description_html" | "priority" | "target_date" | "assignee_ids" | "label_ids" | "state_id">
) => { ) => {
this.loader = "mutation-loading"; this.loader = "mutation-loading";
try { try {

3
plane-src/packages/i18n/src/locales/en/translations.ts
View File

@ -303,9 +303,12 @@ export default {
}, },
filters: { filters: {
sort: "Sorting", sort: "Sorting",
contour: "Contour",
requester: "Requester", requester: "Requester",
unread_only: "Only with updates", unread_only: "Only with updates",
search_placeholder: "Search by request title", search_placeholder: "Search by request title",
search_contour: "Search by contour",
search_state: "Search by state",
search_priority: "Search by priority", search_priority: "Search by priority",
search_assignee: "Search by assignee", search_assignee: "Search by assignee",
search_requester: "Search by requester", search_requester: "Search by requester",

3
plane-src/packages/i18n/src/locales/ru/translations.ts
View File

@ -460,9 +460,12 @@ export default {
}, },
filters: { filters: {
sort: "Сортировка", sort: "Сортировка",
contour: "Контур",
requester: "Отправитель", requester: "Отправитель",
unread_only: "Только с изменениями", unread_only: "Только с изменениями",
search_placeholder: "Поиск по названию запроса", search_placeholder: "Поиск по названию запроса",
search_contour: "Поиск по контуру",
search_state: "Поиск по статусу",
search_priority: "Поиск по приоритету", search_priority: "Поиск по приоритету",
search_assignee: "Поиск по исполнителю", search_assignee: "Поиск по исполнителю",
search_requester: "Поиск по отправителю", search_requester: "Поиск по отправителю",

2
plane-src/packages/types/src/external-contours.ts
View File

@ -110,6 +110,7 @@ export type TExternalContourBoardFilter = {
assignee_ids?: string[]; assignee_ids?: string[];
created_by_ids?: string[]; created_by_ids?: string[];
requested_by_ids?: string[]; requested_by_ids?: string[];
counterparty_project_ids?: string[];
source_project_ids?: string[]; source_project_ids?: string[];
target_project_ids?: string[]; target_project_ids?: string[];
label_ids?: string[]; label_ids?: string[];
@ -143,5 +144,6 @@ export type TExternalContourTargetProject = IProjectLite & {
export type TExternalContourTargetOptions = { export type TExternalContourTargetOptions = {
project: TExternalContourTargetProject; project: TExternalContourTargetProject;
member_ids: string[]; member_ids: string[];
states: Pick<IStateLite, "id" | "name" | "color" | "group">[];
labels: Pick<IIssueLabel, "id" | "name" | "color" | "parent" | "project_id" | "workspace_id" | "sort_order">[]; labels: Pick<IIssueLabel, "id" | "name" | "color" | "parent" | "project_id" | "workspace_id" | "sort_order">[];
}; };

4
plane-src/packages/ui/src/dropdown/common/input-search.tsx
View File

@ -44,7 +44,7 @@ export function InputSearch(props: IInputSearch) {
return ( return (
<div <div
className={cn( className={cn(
"flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2", "nodedc-dropdown-search",
inputContainerClassName inputContainerClassName
)} )}
> >
@ -53,7 +53,7 @@ export function InputSearch(props: IInputSearch) {
as="input" as="input"
ref={inputRef} ref={inputRef}
className={cn( className={cn(
"w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none", "w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder focus:outline-none",
inputClassName inputClassName
)} )}
value={query} value={query}

6
plane-src/packages/ui/src/dropdown/common/options.tsx
View File

@ -46,7 +46,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
isMobile={isMobile} isMobile={isMobile}
/> />
)} )}
<div className={cn("max-h-48 space-y-1 overflow-y-scroll", !disableSearch && "mt-2")}> <div className={cn("max-h-56 space-y-1 overflow-y-auto", !disableSearch && "mt-2")}>
<> <>
{options ? ( {options ? (
options.length > 0 ? ( options.length > 0 ? (
@ -57,9 +57,9 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
disabled={option.disabled} disabled={option.disabled}
className={({ active, selected }) => className={({ active, selected }) =>
cn( cn(
"flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none", "nodedc-dropdown-option",
{ {
"bg-layer-1": active, "bg-white/6": active,
"text-primary": selected, "text-primary": selected,
"text-secondary": !selected, "text-secondary": !selected,
}, },

58
plane-src/packages/ui/src/dropdown/multi-select.tsx
View File

@ -7,6 +7,7 @@
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
import { sortBy } from "lodash-es"; import { sortBy } from "lodash-es";
import React, { useMemo, useRef, useState } from "react"; import React, { useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
// plane imports // plane imports
import { useOutsideClickDetector } from "@plane/hooks"; import { useOutsideClickDetector } from "@plane/hooks";
@ -139,35 +140,34 @@ export function MultiSelectDropdown(props: IMultiSelectDropdown) {
disabled={disabled} disabled={disabled}
/> />
{isOpen && ( {isOpen &&
<Combobox.Options className="fixed z-10" static> createPortal(
<div <Combobox.Options data-prevent-outside-click className="fixed z-30" static>
className={cn( <div
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none", className={cn("nodedc-dropdown-surface my-1 w-56", optionsContainerClassName)}
optionsContainerClassName ref={setPopperElement}
)} style={styles.popper}
ref={setPopperElement} {...attributes.popper}
style={styles.popper} >
{...attributes.popper} <DropdownOptions
> isOpen={isOpen}
<DropdownOptions query={query}
isOpen={isOpen} setQuery={setQuery}
query={query} inputIcon={inputIcon}
setQuery={setQuery} inputPlaceholder={inputPlaceholder}
inputIcon={inputIcon} inputClassName={inputClassName}
inputPlaceholder={inputPlaceholder} inputContainerClassName={inputContainerClassName}
inputClassName={inputClassName} disableSearch={disableSearch}
inputContainerClassName={inputContainerClassName} keyExtractor={keyExtractor}
disableSearch={disableSearch} options={sortedOptions}
keyExtractor={keyExtractor} value={value}
options={sortedOptions} renderItem={renderItem}
value={value} loader={loader}
renderItem={renderItem} />
loader={loader} </div>
/> </Combobox.Options>,
</div> document.body
</Combobox.Options> )}
)}
</Combobox> </Combobox>
); );
} }

60
plane-src/packages/ui/src/dropdown/single-select.tsx
View File

@ -7,6 +7,7 @@
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
import { sortBy } from "lodash-es"; import { sortBy } from "lodash-es";
import React, { useMemo, useRef, useState } from "react"; import React, { useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
// plane imports // plane imports
import { useOutsideClickDetector } from "@plane/hooks"; import { useOutsideClickDetector } from "@plane/hooks";
@ -138,36 +139,35 @@ export function Dropdown(props: ISingleSelectDropdown) {
disabled={disabled} disabled={disabled}
/> />
{isOpen && ( {isOpen &&
<Combobox.Options className="fixed z-10" static> createPortal(
<div <Combobox.Options data-prevent-outside-click className="fixed z-30" static>
className={cn( <div
"my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none", className={cn("nodedc-dropdown-surface my-1 w-56", optionsContainerClassName)}
optionsContainerClassName ref={setPopperElement}
)} style={styles.popper}
ref={setPopperElement} {...attributes.popper}
style={styles.popper} >
{...attributes.popper} <DropdownOptions
> isOpen={isOpen}
<DropdownOptions query={query}
isOpen={isOpen} setQuery={setQuery}
query={query} inputIcon={inputIcon}
setQuery={setQuery} inputPlaceholder={inputPlaceholder}
inputIcon={inputIcon} inputClassName={inputClassName}
inputPlaceholder={inputPlaceholder} inputContainerClassName={inputContainerClassName}
inputClassName={inputClassName} disableSearch={disableSearch}
inputContainerClassName={inputContainerClassName} keyExtractor={keyExtractor}
disableSearch={disableSearch} options={sortedOptions}
keyExtractor={keyExtractor} value={value}
options={sortedOptions} renderItem={renderItem}
value={value} loader={loader}
renderItem={renderItem} handleClose={handleClose}
loader={loader} />
handleClose={handleClose} </div>
/> </Combobox.Options>,
</div> document.body
</Combobox.Options> )}
)}
</Combobox> </Combobox>
); );
} }