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

package/dist/index.cjs

@@ -1356,6 +1356,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":
@@ -1374,6 +1378,7 @@ function RulesPanel({ metadata, showConditions = true }) {
   const [selectedEntryId, setSelectedEntryId] = react.useState(null);
   const [highlightRuleId, setHighlightRuleId] = react.useState(null);
   const [graphModalOpen, setGraphModalOpen] = react.useState(false);
+  const [scopeFilter, setScopeFilter] = react.useState("scoped");
   const labelLookup = react.useMemo(() => createLabelLookup(metadata), [metadata]);
   const catalog = react.useMemo(() => resolveProgramRulesList(metadata), [metadata]);
   const scopeStageId = react.useMemo(() => resolveScopeStageId(metadata), [metadata]);
@@ -1466,10 +1471,22 @@ function RulesPanel({ metadata, showConditions = true }) {
               ),
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-base font-bold leading-[1.35] text-dhis2-grey-900", children: translate("Rules") })
             ] }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-dhis2-grey-600", children: translate("{{scoped}} in scope \xB7 {{firing}} firing", {
+                scoped: scopedRules.length,
+                firing: firingCount
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.SegmentedControl,
+                {
+                  options: SCOPE_FILTER_OPTIONS,
+                  selected: scopeFilter,
+                  onChange: ({ value }) => {
+                    setScopeFilter(value);
+                  }
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: PANEL_TAB_KEYS.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -1509,6 +1526,7 @@ function RulesPanel({ metadata, showConditions = true }) {
           {
             catalog,
             scopeStageId,
+            scopeFilter,
             activeRuleIds,
             selectedRuleId: highlightRuleId,
             showConditions,
@@ -1565,6 +1583,7 @@ function RulesPanel({ metadata, showConditions = true }) {
 function RulesTab({
   catalog,
   scopeStageId,
+  scopeFilter,
   activeRuleIds,
   selectedRuleId,
   showConditions,
@@ -1574,7 +1593,11 @@ function RulesTab({
   if (!catalog.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("This program has no rules.") });
   }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;