-
-
-
{state?.name}
+
+
+
+
+
{state?.name ?? "State"}
+
+
);
});
diff --git a/space/core/components/issues/issue-layouts/utils.tsx b/space/core/components/issues/issue-layouts/utils.tsx
new file mode 100644
index 00000000000..edb67b4f711
--- /dev/null
+++ b/space/core/components/issues/issue-layouts/utils.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import isNil from "lodash/isNil";
+import { ContrastIcon } from "lucide-react";
+// types
+import {
+ GroupByColumnTypes,
+ IGroupByColumn,
+ TCycleGroups,
+ IIssueDisplayProperties,
+ TGroupedIssues,
+} from "@plane/types";
+// ui
+import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
+// components
+// constants
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+// stores
+import { ICycleStore } from "@/store/cycle.store";
+import { IIssueLabelStore } from "@/store/label.store";
+import { IIssueMemberStore } from "@/store/members.store";
+import { IIssueModuleStore } from "@/store/module.store";
+import { IStateStore } from "@/store/state.store";
+
+export const HIGHLIGHT_CLASS = "highlight";
+export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
+
+export const getGroupByColumns = (
+ groupBy: GroupByColumnTypes | null,
+ cycle: ICycleStore,
+ module: IIssueModuleStore,
+ label: IIssueLabelStore,
+ projectState: IStateStore,
+ member: IIssueMemberStore,
+ includeNone?: boolean
+): IGroupByColumn[] | undefined => {
+ switch (groupBy) {
+ case "cycle":
+ return getCycleColumns(cycle);
+ case "module":
+ return getModuleColumns(module);
+ case "state":
+ return getStateColumns(projectState);
+ case "priority":
+ return getPriorityColumns();
+ case "labels":
+ return getLabelsColumns(label) as any;
+ case "assignees":
+ return getAssigneeColumns(member) as any;
+ case "created_by":
+ return getCreatedByColumns(member) as any;
+ default:
+ if (includeNone) return [{ id: `All Issues`, name: `All Issues`, payload: {}, icon: undefined }];
+ }
+};
+
+const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined => {
+ const { cycles } = cycleStore;
+
+ if (!cycles) return;
+
+ const cycleGroups: IGroupByColumn[] = [];
+
+ cycles.map((cycle) => {
+ if (cycle) {
+ const cycleStatus = cycle?.status ? (cycle.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+ cycleGroups.push({
+ id: cycle.id,
+ name: cycle.name,
+ icon:
,
+ payload: { cycle_id: cycle.id },
+ });
+ }
+ });
+ cycleGroups.push({
+ id: "None",
+ name: "None",
+ icon:
,
+ payload: { cycle_id: null },
+ });
+
+ return cycleGroups;
+};
+
+const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | undefined => {
+ const { modules } = moduleStore;
+
+ if (!modules) return;
+
+ const moduleGroups: IGroupByColumn[] = [];
+
+ modules.map((moduleInfo) => {
+ if (moduleInfo)
+ moduleGroups.push({
+ id: moduleInfo.id,
+ name: moduleInfo.name,
+ icon:
,
+ payload: { module_ids: [moduleInfo.id] },
+ });
+ }) as any;
+ moduleGroups.push({
+ id: "None",
+ name: "None",
+ icon:
,
+ payload: { module_ids: [] },
+ });
+
+ return moduleGroups as any;
+};
+
+const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
+ const { states } = projectState;
+ if (!states) return;
+
+ return states.map((state) => ({
+ id: state.id,
+ name: state.name,
+ icon: (
+
+
+
+ ),
+ payload: { state_id: state.id },
+ })) as any;
+};
+
+const getPriorityColumns = () => {
+ const priorities = ISSUE_PRIORITIES;
+
+ return priorities.map((priority) => ({
+ id: priority.key,
+ name: priority.title,
+ icon:
,
+ payload: { priority: priority.key },
+ }));
+};
+
+const getLabelsColumns = (label: IIssueLabelStore) => {
+ const { labels: storeLabels } = label;
+
+ if (!storeLabels) return;
+
+ const labels = [...storeLabels, { id: "None", name: "None", color: "#666" }];
+
+ return labels.map((label) => ({
+ id: label.id,
+ name: label.name,
+ icon: (
+
+ ),
+ payload: label?.id === "None" ? {} : { label_ids: [label.id] },
+ }));
+};
+
+const getAssigneeColumns = (member: IIssueMemberStore) => {
+ const { members } = member;
+
+ if (!members) return;
+
+ const assigneeColumns: any = members.map((member) => ({
+ id: member.id,
+ name: member?.member__display_name || "",
+ icon:
,
+ payload: { assignee_ids: [member.id] },
+ }));
+
+ assigneeColumns.push({ id: "None", name: "None", icon:
, payload: {} });
+
+ return assigneeColumns;
+};
+
+const getCreatedByColumns = (member: IIssueMemberStore) => {
+ const { members } = member;
+
+ if (!members) return;
+
+ return members.map((member) => ({
+ id: member.id,
+ name: member?.member__display_name || "",
+ icon:
,
+ payload: {},
+ }));
+};
+
+export const getDisplayPropertiesCount = (
+ displayProperties: IIssueDisplayProperties,
+ ignoreFields?: (keyof IIssueDisplayProperties)[]
+) => {
+ const propertyKeys = Object.keys(displayProperties) as (keyof IIssueDisplayProperties)[];
+
+ let count = 0;
+
+ for (const propertyKey of propertyKeys) {
+ if (ignoreFields && ignoreFields.includes(propertyKey)) continue;
+ if (displayProperties[propertyKey]) count++;
+ }
+
+ return count;
+};
+
+export const getIssueBlockId = (
+ issueId: string | undefined,
+ groupId: string | undefined,
+ subGroupId?: string | undefined
+) => `issue_${issueId}_${groupId}_${subGroupId}`;
+
+/**
+ * returns empty Array if groupId is None
+ * @param groupId
+ * @returns
+ */
+export const getGroupId = (groupId: string) => {
+ if (groupId === "None") return [];
+ return [groupId];
+};
+
+/**
+ * method that removes Null or undefined Keys from object
+ * @param obj
+ * @returns
+ */
+export const removeNillKeys =
(obj: T) =>
+ Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
+
+/**
+ * This Method returns if the the grouped values are subGrouped
+ * @param groupedIssueIds
+ * @returns
+ */
+export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => {
+ if (!groupedIssueIds || Array.isArray(groupedIssueIds)) {
+ return false;
+ }
+
+ if (Array.isArray(groupedIssueIds[Object.keys(groupedIssueIds)[0]])) {
+ return false;
+ }
+
+ return true;
+};
diff --git a/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx b/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
new file mode 100644
index 00000000000..51ce71a7723
--- /dev/null
+++ b/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { IIssueDisplayProperties } from "@plane/types";
+
+interface IWithDisplayPropertiesHOC {
+ displayProperties: IIssueDisplayProperties;
+ shouldRenderProperty?: (displayProperties: IIssueDisplayProperties) => boolean;
+ displayPropertyKey: keyof IIssueDisplayProperties | (keyof IIssueDisplayProperties)[];
+ children: ReactNode;
+}
+
+export const WithDisplayPropertiesHOC = observer(
+ ({ displayProperties, shouldRenderProperty, displayPropertyKey, children }: IWithDisplayPropertiesHOC) => {
+ let shouldDisplayPropertyFromFilters = false;
+ if (Array.isArray(displayPropertyKey))
+ shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
+ else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
+
+ const renderProperty =
+ shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
+
+ if (!renderProperty) return null;
+
+ return <>{children};
+ }
+);
diff --git a/space/core/components/issues/peek-overview/layout.tsx b/space/core/components/issues/peek-overview/layout.tsx
index fa138382759..e649a3279a9 100644
--- a/space/core/components/issues/peek-overview/layout.tsx
+++ b/space/core/components/issues/peek-overview/layout.tsx
@@ -6,16 +6,17 @@ import { useRouter, useSearchParams } from "next/navigation";
import { Dialog, Transition } from "@headlessui/react";
// components
import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overview";
-// store
+// hooks
import { useIssue, useIssueDetails } from "@/hooks/store";
type TIssuePeekOverview = {
anchor: string;
peekId: string;
+ handlePeekClose?: () => void;
};
export const IssuePeekOverview: FC = observer((props) => {
- const { anchor, peekId } = props;
+ const { anchor, peekId, handlePeekClose } = props;
const router = useRouter();
const searchParams = useSearchParams();
// query params
@@ -34,13 +35,17 @@ export const IssuePeekOverview: FC = observer((props) => {
useEffect(() => {
if (anchor && peekId && issueStore.groupedIssueIds) {
- if (!issueDetails) {
- issueDetailStore.fetchIssueDetails(anchor, peekId.toString());
- }
+ issueDetailStore.fetchIssueDetails(anchor, peekId.toString());
}
- }, [anchor, issueDetailStore, issueDetails, peekId, issueStore.groupedIssueIds]);
+ }, [anchor, issueDetailStore, peekId, issueStore.groupedIssueIds]);
const handleClose = () => {
+ // if close logic is passed down, call that instead of the below logic
+ if (handlePeekClose) {
+ handlePeekClose();
+ return;
+ }
+
issueDetailStore.setPeekId(null);
let queryParams: any = {
board,
diff --git a/space/core/components/ui/not-found.tsx b/space/core/components/ui/not-found.tsx
new file mode 100644
index 00000000000..a2535616d80
--- /dev/null
+++ b/space/core/components/ui/not-found.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+// ui
+// images
+import Image404 from "@/public/404.svg";
+
+export const PageNotFound = () => (
+
+
+
+
+
+
+
+
Oops! Something went wrong.
+
+ Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+ temporarily unavailable.
+
+
+
+
+