filtering

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<IIssueListItem> = (props) => {
-  const { issue } = props;
+export const IssueListItem: FC<IIssueListItem> = 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<React.MouseEvent | null>(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 (
     <div>
       <>
@@ -112,20 +124,21 @@ export const IssueListItem: FC<IIssueListItem> = (props) => {
 
           <div className={`flex flex-shrink-0 items-center gap-2 text-xs `}>
             {displayProperties?.priority && (
-              <ViewPrioritySelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="right"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
+              // <ViewPrioritySelect
+              //   issue={issue}
+              //   partialUpdateIssue={partialUpdateIssue}
+              //   position="right"
+              //   user={user as any}
+              //   isNotAllowed={isNotAllowed}
+              // />
+              <IssuePrioritySelect issue={issue} groupId={groupId} />
             )}
             {displayProperties?.state && (
               <ViewStateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 position="right"
-                user={user}
+                user={user as any}
                 isNotAllowed={isNotAllowed}
               />
             )}
@@ -133,7 +146,7 @@ export const IssueListItem: FC<IIssueListItem> = (props) => {
               <ViewStartDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
-                user={user}
+                user={user as any}
                 isNotAllowed={isNotAllowed}
               />
             )}
@@ -141,19 +154,17 @@ export const IssueListItem: FC<IIssueListItem> = (props) => {
               <ViewDueDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
-                user={user}
+                user={user as any}
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {displayProperties?.labels && (
-              <ViewIssueLabel labelDetails={issue.label_details} maxRender={3} />
-            )}
+            {displayProperties?.labels && <ViewIssueLabel labelDetails={issue.label_details} maxRender={3} />}
             {displayProperties?.assignee && (
               <ViewAssigneeSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 position="right"
-                user={user}
+                user={user as any}
                 isNotAllowed={isNotAllowed}
               />
             )}
@@ -162,7 +173,7 @@ export const IssueListItem: FC<IIssueListItem> = (props) => {
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 position="right"
-                user={user}
+                user={user as any}
                 isNotAllowed={isNotAllowed}
               />
             )}
@@ -231,4 +242,4 @@ export const IssueListItem: FC<IIssueListItem> = (props) => {
       </>
     </div>
   );
-};
+});

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<IIssueListView> = (props) => {
-  const { issues = [] } = props;
+  const { issues = [], groupId } = props;
   return (
     <div>
       {issues.map((issue) => (
-        <IssueListItem issue={issue} />
+        <IssueListItem issue={issue} groupId={groupId} />
       ))}
     </div>
   );

web/components/issue-layouts/list/root.tsx

@@ -31,7 +31,7 @@ export const IssueListViewRoot = observer(() => {
                     />
                   </Disclosure.Button>
                   <Disclosure.Panel className="px-4 pt-4 pb-2">
-                    <IssueListView issues={issueViewStore?.getIssues?.[groupId]}></IssueListView>
+                    <IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId}></IssueListView>
                   </Disclosure.Panel>
                 </>
               )}

web/components/issue-layouts/properties/index.ts

@@ -0,0 +1 @@
+export * from "./priority-select";

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<IIssuePrioritySelect> = (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 (
+    <Listbox value={selected} onChange={changePriority}>
+      <div className="relative mt-1">
+        <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-3 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+          <span className="block truncate text-xs">{selected?.title || "None"}</span>
+        </Listbox.Button>
+        <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
+          <Listbox.Options className="absolute mt-1 max-h-60 w-[200px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
+            {priorityList.map((priority) => (
+              <Listbox.Option
+                key={priority.key}
+                className={({ active }) =>
+                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                    active ? "bg-amber-100 text-amber-900" : "text-gray-900"
+                  }`
+                }
+                value={priority}
+              >
+                {({ selected }) => (
+                  <>
+                    <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                      {priority.title}
+                    </span>
+                    {selected ? (
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+};

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) {