@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, IconFullscreen16, Button, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, Modal, ModalTitle, ModalContent } from '@dhis2/ui';
+import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, IconFullscreen16, SegmentedControl, Button, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, Modal, ModalTitle, ModalContent } from '@dhis2/ui';
 import { useFormStore, useFormStateContext } from '@nnkogift/dhis2-form-utils-hooks';
 import { createContext, memo, useState, useMemo, useEffect, useSyncExternalStore, useCallback, useContext } from 'react';
 import { selectProgramStage } from '@nnkogift/dhis2-form-utils-metadata';
@@ -1350,6 +1350,10 @@ function countObservedRules(entries) {
   return ruleIds.size;
 }
 var PANEL_TAB_KEYS = ["rules", "trace", "graph"];
+var SCOPE_FILTER_OPTIONS = [
+  { label: translate("In scope"), value: "scoped" },
+  { label: translate("All"), value: "all" }
+];
 function resolveTabLabel(key) {
   switch (key) {
     case "rules":
@@ -1368,6 +1372,7 @@ function RulesPanel({ metadata, showConditions = true }) {
   const [selectedEntryId, setSelectedEntryId] = useState(null);
   const [highlightRuleId, setHighlightRuleId] = useState(null);
   const [graphModalOpen, setGraphModalOpen] = useState(false);
+  const [scopeFilter, setScopeFilter] = useState("scoped");
   const labelLookup = useMemo(() => createLabelLookup(metadata), [metadata]);
   const catalog = useMemo(() => resolveProgramRulesList(metadata), [metadata]);
   const scopeStageId = useMemo(() => resolveScopeStageId(metadata), [metadata]);
@@ -1460,10 +1465,22 @@ function RulesPanel({ metadata, showConditions = true }) {
               ),
               /* @__PURE__ */ jsx("h2", { className: "m-0 text-base font-bold leading-[1.35] text-dhis2-grey-900", children: translate("Rules") })
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-dhis2-grey-600", children: translate("{{scoped}} in scope \xB7 {{firing}} firing", {
-              scoped: scopedRules.length,
-              firing: firingCount
-            }) })
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-dhis2-grey-600", children: translate("{{scoped}} in scope \xB7 {{firing}} firing", {
+                scoped: scopedRules.length,
+                firing: firingCount
+              }) }),
+              /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  options: SCOPE_FILTER_OPTIONS,
+                  selected: scopeFilter,
+                  onChange: ({ value }) => {
+                    setScopeFilter(value);
+                  }
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex", children: PANEL_TAB_KEYS.map((key) => /* @__PURE__ */ jsx(
             "button",
@@ -1503,6 +1520,7 @@ function RulesPanel({ metadata, showConditions = true }) {
           {
             catalog,
             scopeStageId,
+            scopeFilter,
             activeRuleIds,
             selectedRuleId: highlightRuleId,
             showConditions,
@@ -1559,6 +1577,7 @@ function RulesPanel({ metadata, showConditions = true }) {
 function RulesTab({
   catalog,
   scopeStageId,
+  scopeFilter,
   activeRuleIds,
   selectedRuleId,
   showConditions,
@@ -1568,7 +1587,11 @@ function RulesTab({
   if (!catalog.length) {
     return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("This program has no rules.") });
   }
-  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-[10px] p-0", children: catalog.map((rule) => {
+  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
+  if (!visibleRules.length) {
+    return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("No rules are in scope for this stage.") });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-[10px] p-0", children: visibleRules.map((rule) => {
     const inScope = isRuleInScope(rule, scopeStageId);
     const firing = activeRuleIds.has(rule.id);
     const isSelected = selectedRuleId === rule.id;