From 70fe8301510c3c345b8a54b44277a2017001d93b Mon Sep 17 00:00:00 2001 From: sriram veeraghanta Date: Fri, 15 Sep 2023 16:55:38 +0530 Subject: [PATCH] filtering --- web/components/issue-layouts/list/item.tsx | 53 +++++++++------- web/components/issue-layouts/list/list.tsx | 5 +- web/components/issue-layouts/list/root.tsx | 2 +- .../issue-layouts/properties/index.ts | 1 + .../properties/priority-select.tsx | 61 +++++++++++++++++++ web/store/issue-views/issue_detail.ts | 11 ++++ 6 files changed, 109 insertions(+), 24 deletions(-) create mode 100644 web/components/issue-layouts/properties/index.ts create mode 100644 web/components/issue-layouts/properties/priority-select.tsx diff --git a/web/components/issue-layouts/list/item.tsx b/web/components/issue-layouts/list/item.tsx index accd79fd8..c12eb95d7 100644 --- a/web/components/issue-layouts/list/item.tsx +++ b/web/components/issue-layouts/list/item.tsx @@ -1,5 +1,5 @@ import React, { FC, useState } from "react"; -import { Tooltip, CustomMenu, ContextMenu } from "components/ui"; +import { observer } from "mobx-react-lite"; // lib import { useMobxStore } from "lib/mobx/store-provider"; import { IIssue } from "types"; @@ -15,6 +15,7 @@ import { PaperClipIcon, } from "@heroicons/react/24/outline"; // components +import { Tooltip, CustomMenu, ContextMenu } from "components/ui"; import { LayerDiagonalIcon } from "components/icons"; import { ViewAssigneeSelect, @@ -25,25 +26,36 @@ import { ViewStartDateSelect, ViewStateSelect, } from "components/issues"; +import { IssuePrioritySelect } from "../properties"; export interface IIssueListItem { issue: IIssue; + groupId: string; } -export const IssueListItem: FC = (props) => { - const { issue } = props; +export const IssueListItem: FC = observer((props) => { + const { issue, groupId } = props; // store - const { user: userStore, issueFilters: issueFilterStore } = useMobxStore(); + const { user: userStore, issueFilters: issueFilterStore, issueDetail: issueDetailStore } = useMobxStore(); const displayProperties = issueFilterStore.userFilters?.display_properties; + const workspaceId = issueFilterStore.workspaceId; + const projectId = issueFilterStore.projectId; + const issueId = issue.id; + const user = userStore.currentUser; console.log("userStore", userStore); // context menu const [contextMenu, setContextMenu] = useState(false); const [contextMenuPosition, setContextMenuPosition] = useState(null); - const { user: userAuth } = useUserAuth(); + const isNotAllowed = false; // const isNotAllowed = // userAuth?.isGuest || userAuth?.isViewer || disableUserActions || isArchivedIssues; + const partialUpdateIssue = (data: any) => { + // console.log("data", data); + if (workspaceId && projectId && issueId) issueDetailStore.updateIssueAsync(workspaceId, projectId, issueId, data); + }; + return (
<> @@ -112,20 +124,21 @@ export const IssueListItem: FC = (props) => {
{displayProperties?.priority && ( - + // + )} {displayProperties?.state && ( )} @@ -133,7 +146,7 @@ export const IssueListItem: FC = (props) => { )} @@ -141,19 +154,17 @@ export const IssueListItem: FC = (props) => { )} - {displayProperties?.labels && ( - - )} + {displayProperties?.labels && } {displayProperties?.assignee && ( )} @@ -162,7 +173,7 @@ export const IssueListItem: FC = (props) => { issue={issue} partialUpdateIssue={partialUpdateIssue} position="right" - user={user} + user={user as any} isNotAllowed={isNotAllowed} /> )} @@ -231,4 +242,4 @@ export const IssueListItem: FC = (props) => {
); -}; +}); diff --git a/web/components/issue-layouts/list/list.tsx b/web/components/issue-layouts/list/list.tsx index 8ece7b1c8..2d2e31ef9 100644 --- a/web/components/issue-layouts/list/list.tsx +++ b/web/components/issue-layouts/list/list.tsx @@ -4,14 +4,15 @@ import { IssueListItem } from "./item"; export interface IIssueListView { issues: IIssue[]; + groupId: string; } export const IssueListView: FC = (props) => { - const { issues = [] } = props; + const { issues = [], groupId } = props; return (
{issues.map((issue) => ( - + ))}
); diff --git a/web/components/issue-layouts/list/root.tsx b/web/components/issue-layouts/list/root.tsx index 6b136cf40..19ebf641a 100644 --- a/web/components/issue-layouts/list/root.tsx +++ b/web/components/issue-layouts/list/root.tsx @@ -31,7 +31,7 @@ export const IssueListViewRoot = observer(() => { /> - + )} diff --git a/web/components/issue-layouts/properties/index.ts b/web/components/issue-layouts/properties/index.ts new file mode 100644 index 000000000..3289b3237 --- /dev/null +++ b/web/components/issue-layouts/properties/index.ts @@ -0,0 +1 @@ +export * from "./priority-select"; diff --git a/web/components/issue-layouts/properties/priority-select.tsx b/web/components/issue-layouts/properties/priority-select.tsx new file mode 100644 index 000000000..835adb8a9 --- /dev/null +++ b/web/components/issue-layouts/properties/priority-select.tsx @@ -0,0 +1,61 @@ +import { FC, Fragment, useState } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid"; +import { useMobxStore } from "lib/mobx/store-provider"; +import { IIssue } from "types"; + +export interface IIssuePrioritySelect { + issue: IIssue; + groupId: string; +} + +export const IssuePrioritySelect: FC = (props) => { + const { issue, groupId } = props; + + const { issueFilters: issueFilterStore } = useMobxStore(); + const priorityList = issueFilterStore.issueRenderFilters.priority; + + const selected = priorityList.find((p) => p.key === issue.priority); + + const changePriority = (selectedPriority: any) => { + console.log("selectedPriority", selectedPriority); + }; + + return ( + +
+ + {selected?.title || "None"} + + + + {priorityList.map((priority) => ( + + `relative cursor-default select-none py-2 pl-10 pr-4 ${ + active ? "bg-amber-100 text-amber-900" : "text-gray-900" + }` + } + value={priority} + > + {({ selected }) => ( + <> + + {priority.title} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ + ); +}; diff --git a/web/store/issue-views/issue_detail.ts b/web/store/issue-views/issue_detail.ts index 224b16ac8..cda0b7bc9 100644 --- a/web/store/issue-views/issue_detail.ts +++ b/web/store/issue-views/issue_detail.ts @@ -134,12 +134,23 @@ class IssueViewDetailStore implements IIssueViewDetailStore { this.loader = true; this.error = null; + const filteredParams = this.rootStore.issueFilters.getComputedFilters( + workspaceId, + projectId, + null, + null, + null, + this.rootStore.issueFilters.issueView || "issues" + ); const issueResponse = await this.issueService.patchIssue(workspaceId, projectId, issueId, data, undefined); + const issueList = await this.issueService.getIssuesWithParams(workspaceId, projectId, filteredParams); + console.log("issueList", issueList); if (issueResponse) { runInAction(() => { this.loader = false; this.error = null; + this.rootStore.issueView.issues[workspaceId].project_issues[projectId].issues.list = issueList; }); } } catch (error) {