github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: workspace profile issues, kanabn DND upgrade, implemented filters in plaen deploy (#2991)

Browse Source
This commit is contained in:
guru_sainath 2023-12-05 17:26:57 +05:30 committed by sriram veeraghanta
parent e6eef7eb0b
commit a4d7b2423e
43 changed files with 1117 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
space/components/issues/board-views/kanban/block.tsx
View File

@ -13,7 +13,7 @@ import { IIssue } from "types/issue";
import { RootStore } from "store/root";
import { useRouter } from "next/router";
export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
// router

2
space/components/issues/board-views/kanban/header.tsx
View File

@ -10,7 +10,7 @@ import { StateGroupIcon } from "@plane/ui";
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
const store: RootStore = useMobxStore();
const stateGroup = issueGroupFilter(state.group);

8
space/components/issues/board-views/kanban/index.tsx
View File

@ -3,8 +3,8 @@
// mobx react lite
import { observer } from "mobx-react-lite";
// components
import { IssueListHeader } from "components/issues/board-views/kanban/header";
import { IssueListBlock } from "components/issues/board-views/kanban/block";
import { IssueKanBanHeader } from "components/issues/board-views/kanban/header";
import { IssueKanBanBlock } from "components/issues/board-views/kanban/block";
// ui
import { Icon } from "components/ui";
// interfaces
@ -23,14 +23,14 @@ export const IssueKanbanView = observer(() => {
store?.issue?.states.map((_state: IIssueState) => (
<div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
<div className="flex-shrink-0">
<IssueListHeader state={_state} />
<IssueKanBanHeader state={_state} />
</div>
<div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
{store.issue.getFilteredIssuesByState(_state.id) &&
store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
<div className="space-y-3 pb-2 px-2">
{store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
<IssueListBlock key={_issue.id} issue={_issue} />
<IssueKanBanBlock key={_issue.id} issue={_issue} />
))}
</div>
) : (

53
space/components/issues/filters-render/index.tsx
View File

@ -1,53 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// components
import IssueStateFilter from "./state";
import IssueLabelFilter from "./label";
import IssuePriorityFilter from "./priority";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
const IssueFilter = observer(() => {
const store: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const clearAllFilters = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "all",
// removeAll: true,
// })
// );
};
// if (store.issue.getIfFiltersIsEmpty()) return null;
return (
<div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
<div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
{/* state */}
{/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
{/* labels */}
{/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
{/* priority */}
{/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
{/* clear all filters */}
<div
className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
onClick={clearAllFilters}
>
<div>Clear all filters</div>
<div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
<span className="material-symbols-rounded text-[12px]">close</span>
</div>
</div>
</div>
</div>
);
});
export default IssueFilter;

43
space/components/issues/filters-render/label/filter-label-block.tsx
View File

@ -1,43 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
// interfaces
import { IIssueLabel } from "types/issue";
export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
const store = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const removeLabelFromFilter = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "label",
// value: label?.id,
// })
// );
};
return (
<div
className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
>
<div
className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
style={{ backgroundColor: `${label?.color}` }}
/>
<div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
<div
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
onClick={removeLabelFromFilter}
>
<span className="material-symbols-rounded text-xs">close</span>
</div>
</div>
);
});

51
space/components/issues/filters-render/label/index.tsx
View File

@ -1,51 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// components
import { RenderIssueLabel } from "./filter-label-block";
// interfaces
import { IIssueLabel } from "types/issue";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
const IssueLabelFilter = observer(() => {
const store: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const clearLabelFilters = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "label",
// removeAll: true,
// })
// );
};
return (
<>
<div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
<div className="flex-shrink-0 text-custom-text-200">Labels</div>
<div className="relative flex flex-wrap items-center gap-1">
{/* {store?.issue?.labels &&
store?.issue?.labels.map(
(_label: IIssueLabel, _index: number) =>
store.issue.getUserSelectedFilter("label", _label.id) && (
<RenderIssueLabel key={_label.id} label={_label} />
)
)} */}
</div>
<div
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
onClick={clearLabelFilters}
>
<span className="material-symbols-rounded text-[12px]">close</span>
</div>
</div>
</>
);
});
export default IssueLabelFilter;

42
space/components/issues/filters-render/priority/filter-priority-block.tsx
View File

@ -1,42 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
// interfaces
import { IIssuePriorityFilters } from "types/issue";
export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
const store = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const removePriorityFromFilter = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "priority",
// value: priority?.key,
// })
// );
};
return (
<div
className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
priority.className || ``
}`}
>
<div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
<span className="material-symbols-rounded text-xs">{priority?.icon}</span>
</div>
<div className="whitespace-nowrap">{priority?.title}</div>
<div
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
onClick={removePriorityFromFilter}
>
<span className="material-symbols-rounded text-xs">close</span>
</div>
</div>
);
});

53
space/components/issues/filters-render/priority/index.tsx
View File

@ -1,53 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { RenderIssuePriority } from "./filter-priority-block";
// interfaces
import { IIssuePriorityFilters } from "types/issue";
// constants
import { issuePriorityFilters } from "constants/data";
const IssuePriorityFilter = observer(() => {
const store = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const clearPriorityFilters = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "priority",
// removeAll: true,
// })
// );
};
return (
<>
<div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
<div className="flex-shrink-0 text-custom-text-200">Priority</div>
<div className="relative flex flex-wrap items-center gap-1">
{/* {issuePriorityFilters.map(
(_priority: IIssuePriorityFilters, _index: number) =>
store.issue.getUserSelectedFilter("priority", _priority.key) && (
<RenderIssuePriority key={_priority.key} priority={_priority} />
)
)} */}
</div>
<div
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
onClick={() => {
clearPriorityFilters();
}}
>
<span className="material-symbols-rounded text-[12px]">close</span>
</div>
</div>
</>
);
});
export default IssuePriorityFilter;

34
space/components/issues/filters-render/state/filter-state-block.tsx
View File

@ -1,34 +0,0 @@
import { observer } from "mobx-react-lite";
// interfaces
import { IIssueState } from "types/issue";
// constants
import { issueGroupFilter } from "constants/data";
export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
const stateGroup = issueGroupFilter(state.group);
const removeStateFromFilter = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "state",
// value: state?.id,
// })
// );
};
if (stateGroup === null) return <></>;
return (
<div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
<div className="flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
{/* <stateGroup.icon /> */}
</div>
<div className="whitespace-nowrap text-xs font-medium">{state?.name}</div>
<div
className="flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
onClick={removeStateFromFilter}
>
<span className="material-symbols-rounded text-xs">close</span>
</div>
</div>
);
});

51
space/components/issues/filters-render/state/index.tsx
View File

@ -1,51 +0,0 @@
import { useRouter } from "next/router";
// mobx react lite
import { observer } from "mobx-react-lite";
// components
import { RenderIssueState } from "./filter-state-block";
// interfaces
import { IIssueState } from "types/issue";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
const IssueStateFilter = observer(() => {
const store: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const clearStateFilters = () => {
// router.replace(
// store.issue.getURLDefinition(workspace_slug, project_slug, {
// key: "state",
// removeAll: true,
// })
// );
};
return (
<>
<div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
<div className="flex-shrink-0 text-custom-text-200">State</div>
<div className="relative flex flex-wrap items-center gap-1">
{/* {store?.issue?.states &&
store?.issue?.states.map(
(_state: IIssueState, _index: number) =>
store.issue.getUserSelectedFilter("state", _state.id) && (
<RenderIssueState key={_state.id} state={_state} />
)
)} */}
</div>
<div
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
onClick={clearStateFilters}
>
<span className="material-symbols-rounded text-[12px]">close</span>
</div>
</div>
</>
);
});
export default IssueStateFilter;

80
space/components/issues/filters/applied-filters/filters-list.tsx Normal file
View File

@ -0,0 +1,80 @@
// components
import { AppliedLabelsFilters } from "./label";
import { AppliedPriorityFilters } from "./priority";
import { AppliedStateFilters } from "./state";
// icons
import { X } from "lucide-react";
// helpers
import { IIssueFilterOptions } from "store/issues/types";
import { IIssueLabel, IIssueState } from "types/issue";
// types
type Props = {
appliedFilters: IIssueFilterOptions;
handleRemoveAllFilters: () => void;
handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
labels?: IIssueLabel[] | undefined;
states?: IIssueState[] | undefined;
};
export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
export const AppliedFiltersList: React.FC<Props> = (props) => {
const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, labels, states } = props;
return (
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions;
if (!value) return;
return (
<div
key={filterKey}
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
>
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
<div className="flex items-center gap-1 flex-wrap">
{filterKey === "priority" && (
<AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
)}
{filterKey === "labels" && labels && (
<AppliedLabelsFilters
handleRemove={(val) => handleRemoveFilter("labels", val)}
labels={labels}
values={value}
/>
)}
{filterKey === "state" && states && (
<AppliedStateFilters
handleRemove={(val) => handleRemoveFilter("state", val)}
states={states}
values={value}
/>
)}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
</button>
</div>
</div>
);
})}
<button
type="button"
onClick={handleRemoveAllFilters}
className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
>
Clear all
<X size={12} strokeWidth={2} />
</button>
</div>
);
};

42
space/components/issues/filters/applied-filters/label.tsx Normal file
View File

@ -0,0 +1,42 @@
import { X } from "lucide-react";
// types
import { IIssueLabel } from "types/issue";
type Props = {
handleRemove: (val: string) => void;
labels: IIssueLabel[] | undefined;
values: string[];
};
export const AppliedLabelsFilters: React.FC<Props> = (props) => {
const { handleRemove, labels, values } = props;
return (
<>
{values.map((labelId) => {
const labelDetails = labels?.find((l) => l.id === labelId);
if (!labelDetails) return null;
return (
<div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: labelDetails.color,
}}
/>
<span className="normal-case">{labelDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</>
);
};

31
space/components/issues/filters/applied-filters/priority.tsx Normal file
View File

@ -0,0 +1,31 @@
import { PriorityIcon } from "@plane/ui";
import { X } from "lucide-react";
type Props = {
handleRemove: (val: string) => void;
values: string[];
};
export const AppliedPriorityFilters: React.FC<Props> = (props) => {
const { handleRemove, values } = props;
return (
<>
{values &&
values.length > 0 &&
values.map((priority) => (
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<PriorityIcon priority={priority as any} className={`h-3 w-3`} />
{priority}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
))}
</>
);
};

90
space/components/issues/filters/applied-filters/root.tsx Normal file
View File

@ -0,0 +1,90 @@
import { FC, useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// components
import { AppliedFiltersList } from "./filters-list";
// store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
import { IIssueFilterOptions } from "store/issues/types";
export const IssueAppliedFilters: FC = observer(() => {
const router = useRouter();
const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
workspace_slug: string;
project_slug: string;
};
const {
issuesFilter: { issueFilters, updateFilters },
issue: { states, labels },
project: { activeBoard },
}: RootStore = useMobxStore();
const userFilters = issueFilters?.filters || {};
const appliedFilters: IIssueFilterOptions = {};
Object.entries(userFilters).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
appliedFilters[key as keyof IIssueFilterOptions] = value;
});
const updateRouteParams = useCallback(
(key: keyof IIssueFilterOptions | null, value: string[] | null, clearFields: boolean = false) => {
const state = key === "state" ? value || [] : issueFilters?.filters?.state ?? [];
const priority = key === "priority" ? value || [] : issueFilters?.filters?.priority ?? [];
const labels = key === "labels" ? value || [] : issueFilters?.filters?.labels ?? [];
let params: any = { board: activeBoard || "list" };
if (!clearFields) {
if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
if (state.length > 0) params = { ...params, states: state.join(",") };
if (labels.length > 0) params = { ...params, labels: labels.join(",") };
}
router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
},
[workspaceSlug, projectId, activeBoard, issueFilters, router]
);
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!projectId) return;
if (!value) {
updateFilters(projectId, { [key]: null });
return;
}
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
updateFilters(projectId, { [key]: newValues });
updateRouteParams(key, newValues);
};
const handleRemoveAllFilters = () => {
if (!projectId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
updateFilters(projectId, { ...newFilters });
updateRouteParams(null, null, true);
};
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="p-5 py-3 border-b border-custom-border-200">
<AppliedFiltersList
appliedFilters={appliedFilters || {}}
handleRemoveFilter={handleRemoveFilter}
handleRemoveAllFilters={handleRemoveAllFilters}
labels={labels ?? []}
states={states ?? []}
/>
</div>
);
});

39
space/components/issues/filters/applied-filters/state.tsx Normal file
View File

@ -0,0 +1,39 @@
import { X } from "lucide-react";
import { StateGroupIcon } from "@plane/ui";
// icons
import { IIssueState } from "types/issue";
// types
type Props = {
handleRemove: (val: string) => void;
states: IIssueState[];
values: string[];
};
export const AppliedStateFilters: React.FC<Props> = (props) => {
const { handleRemove, states, values } = props;
return (
<>
{values.map((stateId) => {
const stateDetails = states?.find((s) => s.id === stateId);
if (!stateDetails) return null;
return (
<div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
{stateDetails.name}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</>
);
};

72
space/components/issues/filters/helpers/dropdown.tsx Normal file
View File

@ -0,0 +1,72 @@
import React, { Fragment, useState } from "react";
import { usePopper } from "react-popper";
import { Popover, Transition } from "@headlessui/react";
import { Placement } from "@popperjs/core";
// ui
import { Button } from "@plane/ui";
// icons
import { ChevronUp } from "lucide-react";
type Props = {
children: React.ReactNode;
title?: string;
placement?: Placement;
};
export const FiltersDropdown: React.FC<Props> = (props) => {
const { children, title = "Dropdown", placement } = props;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "auto",
});
return (
<Popover as="div">
{({ open }) => {
if (open) {
}
return (
<>
<Popover.Button as={React.Fragment}>
<Button
ref={setReferenceElement}
variant="neutral-primary"
size="sm"
appendIcon={
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
}
>
<div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
<span>{title}</span>
</div>
</Button>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel>
<div
className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
</div>
</Popover.Panel>
</Transition>
</>
);
}}
</Popover>
);
};

22
space/components/issues/filters/helpers/filter-header.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
// lucide icons
import { ChevronDown, ChevronUp } from "lucide-react";
interface IFilterHeader {
title: string;
isPreviewEnabled: boolean;
handleIsPreviewEnabled: () => void;
}
export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
<div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
<div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
<button
type="button"
className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
onClick={handleIsPreviewEnabled}
>
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
</div>
);

35
space/components/issues/filters/helpers/filter-option.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from "react";
// lucide icons
import { Check } from "lucide-react";
type Props = {
icon?: React.ReactNode;
isChecked: boolean;
title: React.ReactNode;
onClick?: () => void;
multiple?: boolean;
};
export const FilterOption: React.FC<Props> = (props) => {
const { icon, isChecked, multiple = true, onClick, title } = props;
return (
<button
type="button"
className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
onClick={onClick}
>
<div
className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
} ${multiple ? "rounded-sm" : "rounded-full"}`}
>
{isChecked && <Check size={10} strokeWidth={3} />}
</div>
<div className="flex items-center gap-2 truncate">
{icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
<div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
</div>
</button>
);
};

3
space/components/issues/filters/helpers/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./dropdown";
export * from "./filter-header";
export * from "./filter-option";

11
space/components/issues/filters/index.ts Normal file
View File

@ -0,0 +1,11 @@
// filters
export * from "./root";
export * from "./selection";
// properties
export * from "./state";
export * from "./priority";
export * from "./labels";
// helpers
export * from "./helpers";

83
space/components/issues/filters/labels.tsx Normal file
View File

@ -0,0 +1,83 @@
import React, { useState } from "react";
// components
import { FilterHeader, FilterOption } from "./helpers";
// ui
import { Loader } from "@plane/ui";
// types
import { IIssueLabel } from "types/issue";
const LabelIcons = ({ color }: { color: string }) => (
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
);
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
labels: IIssueLabel[] | undefined;
searchQuery: string;
};
export const FilterLabels: React.FC<Props> = (props) => {
const { appliedFilters, handleUpdate, labels, searchQuery } = props;
const [itemsToRender, setItemsToRender] = useState(5);
const [previewEnabled, setPreviewEnabled] = useState(true);
const appliedFiltersCount = appliedFilters?.length ?? 0;
const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
const handleViewToggle = () => {
if (!filteredOptions) return;
if (itemsToRender === filteredOptions.length) setItemsToRender(5);
else setItemsToRender(filteredOptions.length);
};
return (
<>
<FilterHeader
title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
isPreviewEnabled={previewEnabled}
handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
/>
{previewEnabled && (
<div>
{filteredOptions ? (
filteredOptions.length > 0 ? (
<>
{filteredOptions.slice(0, itemsToRender).map((label) => (
<FilterOption
key={label?.id}
isChecked={appliedFilters?.includes(label?.id) ? true : false}
onClick={() => handleUpdate(label?.id)}
icon={<LabelIcons color={label.color} />}
title={label.name}
/>
))}
{filteredOptions.length > 5 && (
<button
type="button"
className="text-custom-primary-100 text-xs font-medium ml-8"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
</button>
)}
</>
) : (
<p className="text-xs text-custom-text-400 italic">No matches found</p>
)
) : (
<Loader className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
)}
</div>
)}
</>
);
};

51
space/components/issues/filters/priority.tsx Normal file
View File

@ -0,0 +1,51 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
// ui
import { PriorityIcon } from "@plane/ui";
// components
import { FilterHeader, FilterOption } from "./helpers";
// constants
import { issuePriorityFilters } from "constants/data";
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
searchQuery: string;
};
export const FilterPriority: React.FC<Props> = observer((props) => {
const { appliedFilters, handleUpdate, searchQuery } = props;
const [previewEnabled, setPreviewEnabled] = useState(true);
const appliedFiltersCount = appliedFilters?.length ?? 0;
const filteredOptions = issuePriorityFilters.filter((p) => p.key.includes(searchQuery.toLowerCase()));
return (
<>
<FilterHeader
title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
isPreviewEnabled={previewEnabled}
handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
/>
{previewEnabled && (
<div>
{filteredOptions.length > 0 ? (
filteredOptions.map((priority) => (
<FilterOption
key={priority.key}
isChecked={appliedFilters?.includes(priority.key) ? true : false}
onClick={() => handleUpdate(priority.key)}
icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
title={priority.title}
/>
))
) : (
<p className="text-xs text-custom-text-400 italic">No matches found</p>
)}
</div>
)}
</>
);
});

77
space/components/issues/filters/root.tsx Normal file
View File

@ -0,0 +1,77 @@
import { FC, useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// components
import { FiltersDropdown } from "./helpers/dropdown";
import { FilterSelection } from "./selection";
// types
import { IIssueFilterOptions } from "store/issues/types";
// helpers
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "store/issues/helpers";
// store
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
export const IssueFiltersDropdown: FC = observer(() => {
const router = useRouter();
const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
workspace_slug: string;
project_slug: string;
};
const {
project: { activeBoard },
issue: { states, labels },
issuesFilter: { issueFilters, updateFilters },
}: RootStore = useMobxStore();
const updateRouteParams = useCallback(
(key: keyof IIssueFilterOptions, value: string[]) => {
const state = key === "state" ? value : issueFilters?.filters?.state ?? [];
const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
let params: any = { board: activeBoard || "list" };
if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
if (state.length > 0) params = { ...params, states: state.join(",") };
if (labels.length > 0) params = { ...params, labels: labels.join(",") };
router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
},
[workspaceSlug, projectId, activeBoard, issueFilters, router]
);
const handleFilters = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(projectId, { [key]: newValues });
updateRouteParams(key, newValues);
},
[projectId, issueFilters, updateFilters, updateRouteParams]
);
return (
<div className="w-full h-full flex flex-col z-50">
<FiltersDropdown title="Filters" placement="bottom-end">
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFilters={handleFilters}
layoutDisplayFiltersOptions={activeBoard ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeBoard] : undefined}
states={states ?? undefined}
labels={labels ?? undefined}
/>
</FiltersDropdown>
</div>
);
});

86
space/components/issues/filters/selection.tsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import { Search, X } from "lucide-react";
// components
import { FilterLabels, FilterPriority, FilterState } from "./";
// types
// filter helpers
import { ILayoutDisplayFiltersOptions } from "store/issues/helpers";
import { IIssueFilterOptions } from "store/issues/types";
import { IIssueState, IIssueLabel } from "types/issue";
type Props = {
filters: IIssueFilterOptions;
handleFilters: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
labels?: IIssueLabel[] | undefined;
states?: IIssueState[] | undefined;
};
export const FilterSelection: React.FC<Props> = observer((props) => {
const { filters, handleFilters, layoutDisplayFiltersOptions, labels, states } = props;
const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
return (
<div className="w-full h-full flex flex-col overflow-hidden">
<div className="p-2.5 pb-0 bg-custom-background-100">
<div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
<Search className="text-custom-text-400" size={12} strokeWidth={2} />
<input
type="text"
className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
placeholder="Search"
value={filtersSearchQuery}
onChange={(e) => setFiltersSearchQuery(e.target.value)}
autoFocus
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
</button>
)}
</div>
</div>
<div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
{/* priority */}
{isFilterEnabled("priority") && (
<div className="py-2">
<FilterPriority
appliedFilters={filters.priority ?? null}
handleUpdate={(val) => handleFilters("priority", val)}
searchQuery={filtersSearchQuery}
/>
</div>
)}
{/* state */}
{isFilterEnabled("state") && (
<div className="py-2">
<FilterState
appliedFilters={filters.state ?? null}
handleUpdate={(val) => handleFilters("state", val)}
searchQuery={filtersSearchQuery}
states={states}
/>
</div>
)}
{/* labels */}
{isFilterEnabled("labels") && (
<div className="py-2">
<FilterLabels
appliedFilters={filters.labels ?? null}
handleUpdate={(val) => handleFilters("labels", val)}
labels={labels}
searchQuery={filtersSearchQuery}
/>
</div>
)}
</div>
</div>
);
});

78
space/components/issues/filters/state.tsx Normal file
View File

@ -0,0 +1,78 @@
import React, { useState } from "react";
// components
import { FilterHeader, FilterOption } from "./helpers";
// ui
import { Loader, StateGroupIcon } from "@plane/ui";
// types
import { IIssueState } from "types/issue";
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
searchQuery: string;
states: IIssueState[] | undefined;
};
export const FilterState: React.FC<Props> = (props) => {
const { appliedFilters, handleUpdate, searchQuery, states } = props;
const [itemsToRender, setItemsToRender] = useState(5);
const [previewEnabled, setPreviewEnabled] = useState(true);
const appliedFiltersCount = appliedFilters?.length ?? 0;
const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
const handleViewToggle = () => {
if (!filteredOptions) return;
if (itemsToRender === filteredOptions.length) setItemsToRender(5);
else setItemsToRender(filteredOptions.length);
};
return (
<>
<FilterHeader
title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
isPreviewEnabled={previewEnabled}
handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
/>
{previewEnabled && (
<div>
{filteredOptions ? (
filteredOptions.length > 0 ? (
<>
{filteredOptions.slice(0, itemsToRender).map((state) => (
<FilterOption
key={state.id}
isChecked={appliedFilters?.includes(state.id) ? true : false}
onClick={() => handleUpdate(state.id)}
icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
title={state.name}
/>
))}
{filteredOptions.length > 5 && (
<button
type="button"
className="text-custom-primary-100 text-xs font-medium ml-8"
onClick={handleViewToggle}
>
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
</button>
)}
</>
) : (
<p className="text-xs text-custom-text-400 italic">No matches found</p>
)
) : (
<Loader className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
)}
</div>
)}
</>
);
};

48
space/components/issues/navbar/index.tsx
View File

@ -9,6 +9,7 @@ import { observer } from "mobx-react-lite";
// import { NavbarSearch } from "./search";
import { NavbarIssueBoardView } from "./issue-board-view";
import { NavbarTheme } from "./theme";
import { IssueFiltersDropdown } from "components/issues/filters";
// ui
import { Avatar, Button } from "@plane/ui";
import { Briefcase } from "lucide-react";
@ -16,6 +17,7 @@ import { Briefcase } from "lucide-react";
import { useMobxStore } from "lib/mobx/store-provider";
// store
import { RootStore } from "store/root";
import { TIssueBoardKeys } from "types/issue";
const renderEmoji = (emoji: string | { name: string; color: string }) => {
if (!emoji) return;
@ -30,10 +32,21 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
};
const IssueNavbar = observer(() => {
const { project: projectStore, user: userStore }: RootStore = useMobxStore();
const {
project: projectStore,
user: userStore,
issuesFilter: { updateFilters },
}: RootStore = useMobxStore();
// router
const router = useRouter();
const { workspace_slug, project_slug, board } = router.query;
const { workspace_slug, project_slug, board, states, priorities, labels } = router.query as {
workspace_slug: string;
project_slug: string;
board: string;
states: string;
priorities: string;
labels: string;
};
const user = userStore?.currentUser;
@ -46,7 +59,7 @@ const IssueNavbar = observer(() => {
useEffect(() => {
if (workspace_slug && project_slug && projectStore?.deploySettings) {
const viewsAcceptable: string[] = [];
let currentBoard: string | null = null;
let currentBoard: TIssueBoardKeys | null = null;
if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
@ -56,31 +69,41 @@ const IssueNavbar = observer(() => {
if (board) {
if (viewsAcceptable.includes(board.toString())) {
currentBoard = board.toString();
currentBoard = board.toString() as TIssueBoardKeys;
} else {
if (viewsAcceptable && viewsAcceptable.length > 0) {
currentBoard = viewsAcceptable[0];
currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
}
}
} else {
if (viewsAcceptable && viewsAcceptable.length > 0) {
currentBoard = viewsAcceptable[0];
currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
}
}
if (currentBoard) {
if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
let params: any = { board: currentBoard };
if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
if (states && states.length > 0) params = { ...params, states: states };
if (labels && labels.length > 0) params = { ...params, labels: labels };
let storeParams: any = {};
if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
if (storeParams) updateFilters(project_slug, storeParams);
projectStore.setActiveBoard(currentBoard);
router.push({
pathname: `/${workspace_slug}/${project_slug}`,
query: {
board: currentBoard,
},
query: { ...params },
});
}
}
}
}, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
}, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings, updateFilters]);
return (
<div className="relative flex w-full items-center gap-4 px-5">
@ -120,6 +143,11 @@ const IssueNavbar = observer(() => {
<NavbarIssueBoardView />
</div>
{/* issue filters */}
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
<IssueFiltersDropdown />
</div>
{/* theming */}
<div className="relative flex-shrink-0">
<NavbarTheme />

3
space/components/issues/navbar/issue-board-view.tsx
View File

@ -5,6 +5,7 @@ import { issueViews } from "constants/data";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
import { TIssueBoardKeys } from "types/issue";
export const NavbarIssueBoardView = observer(() => {
const {
@ -15,7 +16,7 @@ export const NavbarIssueBoardView = observer(() => {
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
const handleCurrentBoardView = (boardView: string) => {
setActiveBoard(boardView);
setActiveBoard(boardView as TIssueBoardKeys);
router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
};

110
space/components/issues/navbar/issue-filter.tsx
View File

@ -1,110 +0,0 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { ChevronDown } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// components
import { Dropdown } from "components/ui/dropdown";
// constants
import { issueGroupFilter } from "constants/data";
const PRIORITIES = ["urgent", "high", "medium", "low"];
export const NavbarIssueFilter = observer(() => {
const store: RootStore = useMobxStore();
const router = useRouter();
const pathName = router.asPath;
const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
// if (key === "states") {
// store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
// ? store.issue.userSelectedStates.filter((s) => s !== value)
// : [...store.issue.userSelectedStates, value];
// } else if (key === "labels") {
// store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
// ? store.issue.userSelectedLabels.filter((l) => l !== value)
// : [...store.issue.userSelectedLabels, value];
// } else if (key === "priorities") {
// store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
// ? store.issue.userSelectedPriorities.filter((p) => p !== value)
// : [...store.issue.userSelectedPriorities, value];
// }
// const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
// store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
// }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
// store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
// }`;
// router.replace(`${pathName}?${paramsCommaSeparated}`);
};
return (
<Dropdown
button={
<>
<span>Filters</span>
<ChevronDown className="h-3 w-3" aria-hidden="true" />
</>
}
items={[
{
display: "Priority",
children: PRIORITIES.map((priority) => ({
display: (
<span className="capitalize flex items-center gap-x-2">
<span className="material-symbols-rounded text-[14px]">
{priority === "urgent"
? "error"
: priority === "high"
? "signal_cellular_alt"
: priority === "medium"
? "signal_cellular_alt_2_bar"
: "signal_cellular_alt_1_bar"}
</span>
{priority}
</span>
),
onClick: () => handleOnSelect("priorities", priority),
isSelected: store.issue.filteredPriorities.includes(priority),
})),
},
{
display: "State",
children: (store.issue.states || []).map((state) => {
const stateGroup = issueGroupFilter(state.group);
return {
display: (
<span className="capitalize flex items-center gap-x-2">
{/* {stateGroup && <stateGroup.icon />} */}
{state.name}
</span>
),
onClick: () => handleOnSelect("states", state.id),
isSelected: store.issue.filteredStates.includes(state.id),
};
}),
},
{
display: "Labels",
children: [...(store.issue.labels || [])].map((label) => ({
display: (
<span className="capitalize flex items-center gap-x-2">
<span
className="w-3 h-3 rounded-full"
style={{
backgroundColor: label.color || "#000",
}}
/>
{label.name}
</span>
),
onClick: () => handleOnSelect("labels", label.id),
isSelected: store.issue.filteredLabels.includes(label.id),
})),
},
]}
/>
);
});

8
space/components/views/project-details.tsx
View File

@ -9,6 +9,7 @@ import { IssueCalendarView } from "components/issues/board-views/calendar";
import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
import { IssueGanttView } from "components/issues/board-views/gantt";
import { IssuePeekOverview } from "components/issues/peek-overview";
import { IssueAppliedFilters } from "components/issues/filters/applied-filters/root";
// mobx store
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
@ -71,7 +72,10 @@ export const ProjectDetailsView = observer(() => {
</div>
) : (
projectStore?.activeBoard && (
<>
<div className="relative w-full h-full overflow-hidden flex flex-col">
{/* applied filters */}
<IssueAppliedFilters />
{projectStore?.activeBoard === "list" && (
<div className="relative h-full w-full overflow-y-auto">
<IssueListView />
@ -85,7 +89,7 @@ export const ProjectDetailsView = observer(() => {
{projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
{projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
{projectStore?.activeBoard === "gantt" && <IssueGanttView />}
</>
</div>
)
)}
</>

1
space/layouts/project-layout.tsx
View File

@ -1,4 +1,3 @@
import Link from "next/link";
import Image from "next/image";
// mobx

2
space/store/issue.ts
View File

@ -1,4 +1,4 @@
import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// services
import IssueService from "services/issue.service";
// store

29
space/store/issues/base-issue-filter.store.ts Normal file
View File

@ -0,0 +1,29 @@
// types
import { RootStore } from "store/root";
export interface IIssueFilterBaseStore {
// helper methods
computedFilter(filters: any, filteredParams: any): any;
}
export class IssueFilterBaseStore implements IIssueFilterBaseStore {
// root store
rootStore;
constructor(_rootStore: RootStore) {
// root store
this.rootStore = _rootStore;
}
// helper methods
computedFilter = (filters: any, filteredParams: any) => {
const computedFilters: any = {};
Object.keys(filters).map((key) => {
if (filters[key] != undefined && filteredParams.includes(key))
computedFilters[key] =
typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
});
return computedFilters;
};
}

52
space/store/issues/helpers.ts Normal file
View File

@ -0,0 +1,52 @@
import { TIssueBoardKeys } from "types/issue";
import { IIssueFilterOptions, TIssueParams } from "./types";
export const isNil = (value: any) => {
if (value === undefined || value === null) return true;
return false;
};
export interface ILayoutDisplayFiltersOptions {
filters: (keyof IIssueFilterOptions)[];
display_properties: boolean | null;
display_filters: null;
extra_options: null;
}
export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
[pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
} = {
issues: {
list: {
filters: ["priority", "state", "labels"],
display_properties: null,
display_filters: null,
extra_options: null,
},
kanban: {
filters: ["priority", "state", "labels"],
display_properties: null,
display_filters: null,
extra_options: null,
},
},
};
export const handleIssueQueryParamsByLayout = (
layout: TIssueBoardKeys | undefined,
viewType: "issues"
): TIssueParams[] | null => {
const queryParams: TIssueParams[] = [];
if (!layout) return null;
const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
// add filters query params
layoutOptions.filters.forEach((option) => {
queryParams.push(option);
});
return queryParams;
};

106
space/store/issues/issue-filters.store.ts Normal file
View File

@ -0,0 +1,106 @@
import { action, makeObservable, observable, runInAction, computed } from "mobx";
// types
import { RootStore } from "store/root";
import { IIssueFilterOptions, TIssueParams } from "./types";
import { handleIssueQueryParamsByLayout } from "./helpers";
import { IssueFilterBaseStore } from "./base-issue-filter.store";
interface IFiltersOptions {
filters: IIssueFilterOptions;
}
export interface IIssuesFilterStore {
// observables
projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined;
// computed
issueFilters: IFiltersOptions | undefined;
appliedFilters: TIssueParams[] | undefined;
// helpers
issueDisplayFilters: (projectId: string) => IFiltersOptions | undefined;
// actions
updateFilters: (projectId: string, filters: IIssueFilterOptions) => Promise<IFiltersOptions>;
}
export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFilterStore {
// observables
projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined = undefined;
// root store
rootStore;
constructor(_rootStore: RootStore) {
super(_rootStore);
makeObservable(this, {
// observables
projectIssueFilters: observable.ref,
// computed
issueFilters: computed,
appliedFilters: computed,
// actions
updateFilters: action,
});
// root store
this.rootStore = _rootStore;
}
// helpers
issueDisplayFilters = (projectId: string) => {
if (!projectId) return undefined;
return this.projectIssueFilters?.[projectId] || undefined;
};
// actions
updateFilters = async (projectId: string, filters: IIssueFilterOptions) => {
try {
let _projectIssueFilters = { ...this.projectIssueFilters };
if (!_projectIssueFilters) _projectIssueFilters = {};
if (!_projectIssueFilters[projectId]) _projectIssueFilters[projectId] = { filters: {} };
const _filters = {
filters: { ..._projectIssueFilters[projectId].filters },
};
_filters.filters = { ..._filters.filters, ...filters };
_projectIssueFilters[projectId] = {
filters: _filters.filters,
};
runInAction(() => {
this.projectIssueFilters = _projectIssueFilters;
});
return _filters;
} catch (error) {
throw error;
}
};
get issueFilters() {
const projectId = this.rootStore.project.project?.id;
if (!projectId) return undefined;
const issueFilters = this.issueDisplayFilters(projectId);
if (!issueFilters) return undefined;
return issueFilters;
}
get appliedFilters() {
const userFilters = this.issueFilters;
const layout = this.rootStore.project?.activeBoard;
if (!userFilters || !layout) return undefined;
let filteredRouteParams: any = {
priority: userFilters?.filters?.priority || undefined,
state: userFilters?.filters?.state || undefined,
labels: userFilters?.filters?.labels || undefined,
};
const filteredParams = handleIssueQueryParamsByLayout(layout, "issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
return filteredRouteParams;
}
}

36
space/store/issues/types.ts Normal file
View File

@ -0,0 +1,36 @@
import { IIssue } from "types/issue";
export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
export type TIssueParams = "priority" | "state" | "labels";
export interface IIssueFilterOptions {
state?: string[] | null;
labels?: string[] | null;
priority?: string[] | null;
}
// issues
export interface IGroupedIssues {
[group_id: string]: string[];
}
export interface ISubGroupedIssues {
[sub_grouped_id: string]: {
[group_id: string]: string[];
};
}
export type TUnGroupedIssues = string[];
export interface IIssueResponse {
[issue_id: string]: IIssue;
}
export type TLoader = "init-loader" | "mutation" | undefined;
export interface ViewFlags {
enableQuickAdd: boolean;
enableIssueCreation: boolean;
enableInlineEditing: boolean;
}

9
space/store/project.ts
View File

@ -2,6 +2,7 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// service
import ProjectService from "services/project.service";
import { TIssueBoardKeys } from "types/issue";
// types
import { IWorkspace, IProject, IProjectSettings } from "types/project";
@ -12,9 +13,9 @@ export interface IProjectStore {
project: IProject | null;
deploySettings: IProjectSettings | null;
viewOptions: any;
activeBoard: string | null;
activeBoard: TIssueBoardKeys | null;
fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
setActiveBoard: (value: string) => void;
setActiveBoard: (value: TIssueBoardKeys) => void;
}
class ProjectStore implements IProjectStore {
@ -25,7 +26,7 @@ class ProjectStore implements IProjectStore {
project: IProject | null = null;
deploySettings: IProjectSettings | null = null;
viewOptions: any = null;
activeBoard: string | null = null;
activeBoard: TIssueBoardKeys | null = null;
// root store
rootStore;
// service
@ -80,7 +81,7 @@ class ProjectStore implements IProjectStore {
}
};
setActiveBoard = (boardValue: string) => {
setActiveBoard = (boardValue: TIssueBoardKeys) => {
this.activeBoard = boardValue;
};
}

3
space/store/root.ts
View File

@ -6,6 +6,7 @@ import IssueStore, { IIssueStore } from "./issue";
import ProjectStore, { IProjectStore } from "./project";
import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
import { IMentionsStore, MentionsStore } from "./mentions.store";
import { IIssuesFilterStore, IssuesFilterStore } from "./issues/issue-filters.store";
enableStaticRendering(typeof window === "undefined");
@ -15,6 +16,7 @@ export class RootStore {
issueDetails: IIssueDetailStore;
project: IProjectStore;
mentionsStore: IMentionsStore;
issuesFilter: IIssuesFilterStore;
constructor() {
this.user = new UserStore(this);
@ -22,5 +24,6 @@ export class RootStore {
this.project = new ProjectStore(this);
this.issueDetails = new IssueDetailStore(this);
this.mentionsStore = new MentionsStore(this);
this.issuesFilter = new IssuesFilterStore(this);
}
}

35
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -1,4 +1,6 @@
import { memo } from "react";
import { Draggable } from "@hello-pangea/dnd";
import isEqual from "lodash/isEqual";
// components
import { KanBanProperties } from "./properties";
// ui
@ -21,7 +23,7 @@ interface IssueBlockProps {
isReadOnly: boolean;
}
export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
const {
sub_group_id,
columnId,
@ -63,30 +65,36 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
onClick={handleIssuePeekOverview}
>
{issue.tempId !== undefined && (
<div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
)}
<div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
{quickActions(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!columnId && columnId === "null" ? null : columnId,
issue
)}
</div>
<div
className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
isDragDisabled ? "" : "hover:cursor-grab"
} ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
>
{displayProperties && displayProperties?.key && (
<div className="relative">
<div className="text-xs line-clamp-1 text-custom-text-300">
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
<div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
{quickActions(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!columnId && columnId === "null" ? null : columnId,
issue
)}
</div>
</div>
)}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
<div
className="line-clamp-2 text-sm font-medium text-custom-text-100"
onClick={handleIssuePeekOverview}
>
{issue.name}
</div>
</Tooltip>
<div>
<KanBanProperties
@ -106,3 +114,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
</>
);
};
const validateMemo = (prevProps: IssueBlockProps, nextProps: IssueBlockProps) => {
if (prevProps.issue != nextProps.issue) return true;
return false;
};
export const KanbanIssueBlock = memo(KanBanIssueMemoBlock, validateMemo);

2
web/components/issues/modal.tsx
View File

@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (handleSubmit) {
await handleSubmit(res);
} else {
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
if (viewId) currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);

6
web/components/profile/profile-issues.tsx
View File

@ -16,6 +16,8 @@ interface IProfileIssuesPage {
}
export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
const { type } = props;
const router = useRouter();
const { workspaceSlug, userId } = router.query as {
workspaceSlug: string;
@ -28,11 +30,11 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
}: RootStore = useMobxStore();
useSWR(
workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${props.type}` : null,
workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${type}` : null,
async () => {
if (workspaceSlug && userId) {
await fetchFilters(workspaceSlug);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", type);
}
}
);

3
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@ -1,5 +1,4 @@
import React, { ReactElement } from "react";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
@ -9,7 +8,7 @@ import { UserProfileHeader } from "components/headers";
import { NextPageWithLayout } from "types/app";
import { ProfileIssuesPage } from "components/profile/profile-issues";
const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => <ProfileIssuesPage type="assigned" />);
const ProfileAssignedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="assigned" />;
ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (

2
web/store/issues/base-issue-kanban-helper.store.ts
View File

@ -118,8 +118,6 @@ export class KanBanHelpers implements IKanBanHelpers {
const [removed] = sourceIssues.splice(source.index, 1);
console.log("removed", removed);
if (removed) {
if (viewId) store?.removeIssue(workspaceSlug, projectId, removed, viewId);
else store?.removeIssue(workspaceSlug, projectId, removed);

2
web/store/issues/profile/issue.store.ts
View File

@ -28,7 +28,6 @@ export interface IProfileIssuesStore {
workspaceSlug: string,
userId: string,
loadType: TLoader,
_?: string,
type?: "assigned" | "created" | "subscribed"
) => Promise<IIssueResponse>;
createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@ -151,7 +150,6 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
workspaceSlug: string,
userId: string,
loadType: TLoader = "init-loader",
_?: string,
type?: "assigned" | "created" | "subscribed"
) => {
try {