diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts index c2d2f8929..68b7af198 100644 --- a/apps/app/components/core/index.ts +++ b/apps/app/components/core/index.ts @@ -8,5 +8,4 @@ export * from "./issues-view-filter"; export * from "./issues-view"; export * from "./link-modal"; export * from "./not-authorized-view"; -export * from "./multi-level-select"; export * from "./image-picker-popover"; diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx index 9962ba96d..f6e8bd662 100644 --- a/apps/app/components/core/issues-view-filter.tsx +++ b/apps/app/components/core/issues-view-filter.tsx @@ -2,6 +2,12 @@ import React from "react"; import { useRouter } from "next/router"; +import useSWR from "swr"; + +// services +import projectService from "services/project.service"; +import issuesService from "services/issues.service"; +import stateService from "services/state.service"; // hooks import useIssuesProperties from "hooks/use-issue-properties"; import useIssueView from "hooks/use-issue-view"; @@ -14,10 +20,14 @@ import { ChevronDownIcon, ListBulletIcon } from "@heroicons/react/24/outline"; import { Squares2X2Icon } from "@heroicons/react/20/solid"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; +import { getStatesList } from "helpers/state.helper"; // types -import { IIssue, Properties } from "types"; -// common +import { IIssue, IIssueLabels, Properties } from "types"; +// fetch-keys +import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys"; +// constants import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue"; +import { PRIORITIES } from "constants/project"; type Props = { issues?: IIssue[]; @@ -46,6 +56,28 @@ export const IssuesFilterView: React.FC = ({ issues }) => { projectId as string ); + const { data: states } = useSWR( + workspaceSlug && projectId ? STATE_LIST(projectId as string) : null, + workspaceSlug && projectId + ? () => stateService.getStates(workspaceSlug as string, projectId as string) + : null + ); + const statesList = getStatesList(states ?? {}); + + const { data: members } = useSWR( + projectId ? PROJECT_MEMBERS(projectId as string) : null, + workspaceSlug && projectId + ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) + : null + ); + + const { data: issueLabels } = useSWR( + workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, + workspaceSlug && projectId + ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) + : null + ); + return ( <> {issues && issues.length > 0 && ( @@ -70,6 +102,42 @@ export const IssuesFilterView: React.FC = ({ issues }) => { + + Filters + + } + > +

Status

+ {statesList?.map((state) => ( + {}}> + <>{state.name} + + ))} +

Members

+ {members?.map((member) => ( + {}}> + <> + {member.member.first_name && member.member.first_name !== "" + ? member.member.first_name + " " + member.member.last_name + : member.member.email} + + + ))} +

Labels

+ {issueLabels?.map((label) => ( + {}}> + <>{label.name} + + ))} +

Priority

+ {PRIORITIES?.map((priority) => ( + {}}> + {priority ?? "None"} + + ))} +
{({ open }) => ( <> diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts index 7a9108850..94effbfd7 100644 --- a/apps/app/components/ui/index.ts +++ b/apps/app/components/ui/index.ts @@ -11,6 +11,7 @@ export * from "./empty-space"; export * from "./header-button"; export * from "./loader"; export * from "./multi-input"; +export * from "./multi-level-select"; export * from "./outline-button"; export * from "./progress-bar"; export * from "./spinner"; diff --git a/apps/app/components/core/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx similarity index 98% rename from apps/app/components/core/multi-level-select.tsx rename to apps/app/components/ui/multi-level-select.tsx index 36068dcc6..1662c58a8 100644 --- a/apps/app/components/core/multi-level-select.tsx +++ b/apps/app/components/ui/multi-level-select.tsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; +// headless ui import { Listbox, Transition } from "@headlessui/react"; - +// icons import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid"; type TSelectOption = { @@ -23,9 +24,13 @@ type TMultipleSelectProps = { direction?: "left" | "right"; }; -export const MultiLevelSelect: React.FC = (props) => { - const { options, selected, setSelected, label, direction = "right" } = props; - +export const MultiLevelSelect: React.FC = ({ + options, + selected, + setSelected, + label, + direction = "right", +}) => { const [openChildFor, setOpenChildFor] = useState(null); return (