Merge pull request #1426 from rtCamp/feat/issue-1089

Add sorting and filtering toolbar to Risks management

Author: b1ink0

frontend/packages/app/src/pages/project-details/tabs/risks/context.ts

@@ -7,7 +7,13 @@ import { createContext, useContextSelector } from "use-context-selector";
  * Internal dependencies.
  */
 import { RISK_STATUSES, type RiskStatus } from "./constants";
-import type { RiskFilters, RiskItem, RiskVisibleColumns } from "./types";
+import type {
+  RiskFilters,
+  RiskItem,
+  RiskSort,
+  RiskVisibleColumns,
+  UserDetails,
+} from "./types";
 
 export interface RisksContextProps {
   state: {
@@ -16,14 +22,17 @@ export interface RisksContextProps {
     error: unknown;
     filters: RiskFilters;
     visibleColumns: RiskVisibleColumns;
+    sort: RiskSort | null;
     isCreateRiskOpen: boolean;
     editRiskName: string | null;
     createRiskInitialStatus: RiskStatus | "";
     deleteRiskName: string | null;
+    allOwnersWithDetails: Record<string, UserDetails | undefined>;
   };
   actions: {
     setFilters: (filters: Partial<RiskFilters>) => void;
     setVisibleColumns: (cols: Partial<RiskVisibleColumns>) => void;
+    setSort: (sort: RiskSort | null) => void;
     updateRiskStatus: (name: string, status: RiskStatus) => Promise<void>;
     openCreateRisk: () => void;
     closeCreateRisk: () => void;
@@ -54,14 +63,17 @@ export const RisksContext = createContext<RisksContextProps>({
       advanced: [],
     },
     visibleColumns: defaultVisibleColumns,
+    sort: null,
     isCreateRiskOpen: false,
     editRiskName: null,
     createRiskInitialStatus: "",
     deleteRiskName: null,
+    allOwnersWithDetails: {},
   },
   actions: {
     setFilters: noop,
     setVisibleColumns: noop,
+    setSort: noop,
     updateRiskStatus: async () => {},
     openCreateRisk: noop,
     closeCreateRisk: noop,

frontend/packages/app/src/pages/project-details/tabs/risks/header.tsx

@@ -8,19 +8,24 @@ import { Plus } from "lucide-react";
  * Internal dependencies.
  */
 import { useRisks } from "./context";
+import { RisksToolbar } from "./toolbar/toolbar";
 
 export function RisksHeader() {
   const openCreateRisk = useRisks((c) => c.actions.openCreateRisk);
 
   return (
-    <div className="flex items-center justify-between mb-3.5">
-      <h1 className="text-xl font-semibold text-ink-gray-8">Risks</h1>
-      <Button
-        variant="solid"
-        label="Create"
-        iconLeft={() => <Plus />}
-        onClick={openCreateRisk}
-      />
-    </div>
+    <>
+      <div className="flex items-center justify-between mb-3.5">
+        <h1 className="text-xl font-semibold text-ink-gray-8">Risks</h1>
+        <Button
+          variant="solid"
+          label="Create"
+          iconLeft={() => <Plus />}
+          onClick={openCreateRisk}
+        />
+      </div>
+
+      <RisksToolbar />
+    </>
   );
 }

frontend/packages/app/src/pages/project-details/tabs/risks/index.tsx

@@ -2,6 +2,8 @@
  * External dependencies.
  */
 import { useSearchParams } from "react-router-dom";
+import { mergeClassNames as cn } from "@next-pms/design-system";
+import { Spinner } from "@next-pms/design-system/components";
 
 /**
  * Internal dependencies.
@@ -31,6 +33,7 @@ function RisksContent() {
   const deleteRiskName = useRisks((c) => c.state.deleteRiskName);
   const closeCreateRisk = useRisks((c) => c.actions.closeCreateRisk);
   const closeDeleteRisk = useRisks((c) => c.actions.closeDeleteRisk);
+  const isLoading = useRisks((c) => c.state.isLoading);
 
   return (
     <>
@@ -46,9 +49,21 @@ function RisksContent() {
       {riskId ? (
         <RiskDetailView riskId={riskId} />
       ) : (
-        <div className="flex flex-col h-full">
+        <div className="relative flex flex-col h-full">
           <RisksHeader />
-          {activeView === "kanban" ? <RisksKanbanView /> : <RisksListView />}
+          <div
+            className={cn("flex flex-col flex-1 min-h-0", {
+              "opacity-50 transition-opacity duration-150": isLoading,
+            })}
+          >
+            {activeView === "kanban" ? <RisksKanbanView /> : <RisksListView />}
+          </div>
+          {isLoading && (
+            <Spinner
+              isFull
+              className="absolute top-0 left-0 w-full h-full cursor-wait"
+            />
+          )}
         </div>
       )}
     </>

frontend/packages/app/src/pages/project-details/tabs/risks/kanban/kanbanView.tsx

@@ -46,20 +46,8 @@ export function RisksKanbanView() {
   }, [data]);
 
   useEffect(() => {
-    setItems((current) => {
-      const fromServer = groupIdsByStatus(data);
-      const merged = {} as RiskIdsByStatus;
-      for (const status of RISK_STATUSES) {
-        const serverSet = new Set(fromServer[status]);
-        // Preserve existing drag-and-drop order; drop items that moved away
-        const kept = current[status].filter((id) => serverSet.has(id));
-        const keptSet = new Set(kept);
-        // Append any items newly added on the server side
-        const added = fromServer[status].filter((id) => !keptSet.has(id));
-        merged[status as RiskStatus] = [...kept, ...added];
-      }
-      return merged;
-    });
+    if (!data) return;
+    setItems(groupIdsByStatus(data));
   }, [data]);
 
   return (

frontend/packages/app/src/pages/project-details/tabs/risks/provider.tsx

@@ -3,14 +3,14 @@
  */
 import { useCallback, useMemo, useState, type PropsWithChildren } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useFrappeUpdateDoc } from "frappe-react-sdk";
+import { useFrappeUpdateDoc, useSWRConfig } from "frappe-react-sdk";
 
 /**
  * Internal dependencies.
  */
 import { RISK_DETAIL_PARAM, RISK_STATUSES, type RiskStatus } from "./constants";
 import { RisksContext, type RisksContextProps } from "./context";
-import type { RiskFilters, RiskVisibleColumns } from "./types";
+import type { RiskFilters, RiskSort, RiskVisibleColumns } from "./types";
 import { useRisksData } from "./useRisksData";
 
 const defaultFilters: RiskFilters = {
@@ -35,9 +35,17 @@ export function RisksProvider({ children }: PropsWithChildren) {
     RiskStatus | ""
   >("");
   const [deleteRiskName, setDeleteRiskName] = useState<string | null>(null);
+  const [sort, setSortState] = useState<RiskSort | null>(null);
   const [, setSearchParams] = useSearchParams();
+  const { mutate } = useSWRConfig();
 
-  const { data, isLoading, error, mutate: refreshRiskList } = useRisksData();
+  const {
+    data,
+    isLoading,
+    error,
+    mutate: refreshRiskList,
+    allOwnersWithDetails,
+  } = useRisksData(filters, sort);
 
   const { updateDoc } = useFrappeUpdateDoc();
 
@@ -52,6 +60,18 @@ export function RisksProvider({ children }: PropsWithChildren) {
     [],
   );
 
+  const setSort = useCallback((s: RiskSort | null) => {
+    setSortState(s);
+    mutate(
+      (key) =>
+        typeof key === "string" &&
+        key.includes("/api/resource/Risk?") &&
+        key.includes("order_by="),
+      undefined,
+      { revalidate: true },
+    );
+  }, []);
+
   const updateRiskStatus = useCallback(
     async (name: string, status: RiskStatus) => {
       await updateDoc("Risk", name, { status });
@@ -114,14 +134,17 @@ export function RisksProvider({ children }: PropsWithChildren) {
         error,
         filters,
         visibleColumns,
+        sort,
         isCreateRiskOpen,
         editRiskName,
         createRiskInitialStatus,
         deleteRiskName,
+        allOwnersWithDetails,
       },
       actions: {
         setFilters,
         setVisibleColumns,
+        setSort,
         updateRiskStatus,
         openCreateRisk,
         closeCreateRisk,
@@ -139,12 +162,15 @@ export function RisksProvider({ children }: PropsWithChildren) {
       error,
       filters,
       visibleColumns,
+      sort,
       isCreateRiskOpen,
       editRiskName,
       createRiskInitialStatus,
       deleteRiskName,
+      allOwnersWithDetails,
       setFilters,
       setVisibleColumns,
+      setSort,
       updateRiskStatus,
       openCreateRisk,
       closeCreateRisk,

frontend/packages/app/src/pages/project-details/tabs/risks/toolbar/columnsDropdown.tsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies.
+ */
+import { useMemo } from "react";
+import { MultiSelect } from "@rtcamp/frappe-ui-react";
+import type { MultiSelectOption } from "@rtcamp/frappe-ui-react";
+
+/**
+ * Internal dependencies.
+ */
+import { RISK_STATUSES } from "../constants";
+import type { RiskStatus } from "../constants";
+import { RiskStatusBadge } from "../riskStatusBadge";
+import type { RiskVisibleColumns } from "../types";
+
+interface ColumnsDropdownProps {
+  visibleColumns: RiskVisibleColumns;
+  setVisibleColumns: (partial: Partial<RiskVisibleColumns>) => void;
+}
+
+const COLUMN_OPTIONS: MultiSelectOption[] = RISK_STATUSES.map((status) => ({
+  value: status,
+  label: status,
+}));
+
+export function ColumnsDropdown({
+  visibleColumns,
+  setVisibleColumns,
+}: ColumnsDropdownProps) {
+  const selectedValues = useMemo(
+    () =>
+      RISK_STATUSES.filter((status) => visibleColumns[status]).map(
+        (status) => status,
+      ),
+    [visibleColumns],
+  );
+
+  const handleChange = (newValues: string[]) => {
+    const partial = Object.fromEntries(
+      RISK_STATUSES.map((status) => [status, newValues.includes(status)]),
+    ) as unknown as RiskVisibleColumns;
+    setVisibleColumns(partial);
+  };
+
+  return (
+    <div>
+      <MultiSelect
+        options={COLUMN_OPTIONS}
+        value={selectedValues}
+        triggerLabel="Columns"
+        hideSearch
+        onChange={handleChange}
+        renderOption={(option) => (
+          <RiskStatusBadge status={option.value as RiskStatus} />
+        )}
+        popupClassName="w-full"
+      />
+    </div>
+  );
+}

frontend/packages/app/src/pages/project-details/tabs/risks/toolbar/sortButton.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies.
+ */
+import { useSearchParams } from "react-router-dom";
+import { SortButton as SortButtonBase } from "@next-pms/design-system/components";
+
+/**
+ * Internal dependencies.
+ */
+import { RISK_VIEW_PARAM } from "../constants";
+import { useRisks } from "../context";
+
+const SORT_FIELDS = [
+  { field: "modified", label: "Last updated on" },
+  { field: "status", label: "Status" },
+  { field: "risk_category", label: "Risk category" },
+  { field: "risk_level", label: "Risk level" },
+];
+
+export function SortButton() {
+  const [searchParams] = useSearchParams();
+  const isKanban = searchParams.get(RISK_VIEW_PARAM) === "kanban";
+  const sort = useRisks((c) => c.state.sort);
+  const setSort = useRisks((c) => c.actions.setSort);
+
+  const sortFields = isKanban
+    ? SORT_FIELDS.filter((f) => f.field !== "status")
+    : SORT_FIELDS;
+
+  return (
+    <SortButtonBase fields={sortFields} sort={sort} onSortChange={setSort} />
+  );
+}