@almadar/std 6.5.2 → 7.2.0

package/behaviors/registry/atoms/std-filter.orb

@@ -1,7 +1,7 @@
 {
   "name": "std-filter",
   "version": "1.0.0",
-  "description": "Filter atom. Shows filter buttons per field with predefined values. Clicking a filter value transitions to filtered state. Clear resets.",
+  "description": "std-filter as a Function",
   "orbitals": [
     {
       "name": "FilterTargetOrbital",
@@ -40,16 +40,62 @@
       "traits": [
         {
           "name": "FilterTargetFilter",
-          "linkedEntity": "FilterTarget",
           "category": "interaction",
+          "linkedEntity": "FilterTarget",
+          "emits": [
+            {
+              "event": "FilterTargetLoaded",
+              "description": "Fired when FilterTarget collection finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                },
+                {
+                  "name": "name",
+                  "type": "string"
+                },
+                {
+                  "name": "description",
+                  "type": "string"
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "createdAt",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "FilterTargetLoadFailed",
+              "description": "Fired when FilterTarget collection fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
-                "name": "browsing",
+                "name": "loading",
                 "isInitial": true
               },
+              {
+                "name": "browsing"
+              },
               {
                 "name": "filtered"
+              },
+              {
+                "name": "error"
               }
             ],
             "events": [
@@ -57,6 +103,20 @@
                 "key": "INIT",
                 "name": "Initialize"
               },
+              {
+                "key": "FilterTargetLoaded",
+                "name": "FilterTarget loaded"
+              },
+              {
+                "key": "FilterTargetLoadFailed",
+                "name": "FilterTarget load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
+              },
               {
                 "key": "FILTER",
                 "name": "Filter",
@@ -80,34 +140,59 @@
             ],
             "transitions": [
               {
-                "from": "browsing",
-                "to": "browsing",
+                "from": "loading",
+                "to": "loading",
                 "event": "INIT",
                 "effects": [
                   [
                     "fetch",
-                    "FilterTarget"
+                    "FilterTarget",
+                    {
+                      "emit": {
+                        "failure": "FilterTargetLoadFailed",
+                        "success": "FilterTargetLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "stack",
+                      "align": "center",
+                      "gap": "md",
                       "direction": "vertical",
-                      "gap": "lg",
+                      "className": "py-12",
+                      "children": [
+                        {
+                          "type": "spinner",
+                          "size": "lg"
+                        },
+                        {
+                          "variant": "caption",
+                          "color": "muted",
+                          "type": "typography",
+                          "content": "Loading…"
+                        }
+                      ],
+                      "type": "stack"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "loading",
+                "to": "browsing",
+                "event": "FilterTargetLoaded",
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
                           "justify": "space-between",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
                               "children": [
                                 {
                                   "type": "icon",
@@ -119,13 +204,21 @@
                                   "content": "FilterTargets",
                                   "variant": "h2"
                                 }
-                              ]
+                              ],
+                              "direction": "horizontal",
+                              "gap": "md",
+                              "type": "stack",
+                              "align": "center"
                             },
                             {
-                              "type": "badge",
-                              "label": "All"
+                              "label": "All",
+                              "type": "badge"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "align": "center",
+                          "gap": "md",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
@@ -136,13 +229,13 @@
                           "filters": [
                             {
                               "field": "status",
+                              "filterType": "select",
                               "label": "Status",
                               "options": [
                                 "active",
                                 "inactive",
                                 "pending"
-                              ],
-                              "filterType": "select"
+                              ]
                             }
                           ]
                         },
@@ -150,198 +243,80 @@
                           "type": "divider"
                         },
                         {
-                          "type": "data-grid",
-                          "entity": "FilterTarget",
-                          "emptyIcon": "inbox",
                           "emptyTitle": "No filtertargets yet",
-                          "emptyDescription": "Add filtertargets to see them here.",
-                          "className": "transition-shadow hover:shadow-md cursor-pointer",
                           "renderItem": [
                             "fn",
                             "item",
                             {
                               "type": "stack",
                               "direction": "vertical",
-                              "gap": "sm",
                               "children": [
                                 {
                                   "type": "typography",
-                                  "variant": "h4",
-                                  "content": "@item.name"
+                                  "content": "@item.name",
+                                  "variant": "h4"
                                 },
                                 {
-                                  "type": "typography",
-                                  "variant": "caption",
                                   "color": "muted",
-                                  "content": "@item.status"
+                                  "content": "@item.status",
+                                  "variant": "caption",
+                                  "type": "typography"
                                 }
-                              ]
+                              ],
+                              "gap": "sm"
                             }
-                          ]
+                          ],
+                          "entity": "FilterTarget",
+                          "type": "data-grid",
+                          "emptyIcon": "inbox",
+                          "emptyDescription": "Add filtertargets to see them here."
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "gap": "lg",
+                      "type": "stack"
                     }
                   ]
                 ]
               },
               {
-                "from": "browsing",
-                "to": "filtered",
-                "event": "FILTER",
+                "from": "loading",
+                "to": "error",
+                "event": "FilterTargetLoadFailed",
                 "effects": [
-                  [
-                    "fetch",
-                    "FilterTarget",
-                    [
-                      "==",
-                      [
-                        "object/get",
-                        "@entity",
-                        "@payload.field"
-                      ],
-                      "@payload.value"
-                    ]
-                  ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "stack",
                       "direction": "vertical",
-                      "gap": "lg",
+                      "gap": "md",
+                      "align": "center",
+                      "className": "py-12",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
-                          "justify": "space-between",
-                          "align": "center",
-                          "children": [
-                            {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "sm",
-                              "align": "center",
-                              "children": [
-                                {
-                                  "type": "icon",
-                                  "name": "filter",
-                                  "size": "lg"
-                                },
-                                {
-                                  "type": "typography",
-                                  "content": "FilterTargets",
-                                  "variant": "h2"
-                                }
-                              ]
-                            },
-                            {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "sm",
-                              "align": "center",
-                              "children": [
-                                {
-                                  "type": "badge",
-                                  "label": "Filtered",
-                                  "variant": "primary"
-                                },
-                                {
-                                  "type": "button",
-                                  "label": "Clear All",
-                                  "event": "CLEAR_FILTERS",
-                                  "variant": "ghost",
-                                  "icon": "x"
-                                }
-                              ]
-                            }
-                          ]
+                          "size": "xl",
+                          "name": "alert-triangle",
+                          "type": "icon",
+                          "color": "destructive"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
-                          "align": "center",
-                          "children": [
-                            {
-                              "type": "icon",
-                              "name": "filter",
-                              "size": "sm"
-                            },
-                            {
-                              "type": "typography",
-                              "variant": "caption",
-                              "color": "muted",
-                              "content": "Filtered by"
-                            },
-                            {
-                              "type": "badge",
-                              "label": "@payload.field",
-                              "variant": "secondary"
-                            },
-                            {
-                              "type": "typography",
-                              "variant": "caption",
-                              "content": "="
-                            },
-                            {
-                              "type": "badge",
-                              "label": "@payload.value",
-                              "variant": "primary"
-                            }
-                          ]
+                          "type": "typography",
+                          "variant": "h3",
+                          "content": "Failed to load"
                         },
                         {
-                          "type": "divider"
-                        },
-                        {
-                          "type": "filter-group",
-                          "entity": "FilterTarget",
-                          "filters": [
-                            {
-                              "field": "status",
-                              "label": "Status",
-                              "options": [
-                                "active",
-                                "inactive",
-                                "pending"
-                              ],
-                              "filterType": "select"
-                            }
-                          ]
-                        },
-                        {
-                          "type": "divider"
+                          "content": "@payload.message",
+                          "color": "muted",
+                          "type": "typography",
+                          "variant": "body"
                         },
                         {
-                          "type": "data-grid",
-                          "entity": "FilterTarget",
-                          "emptyIcon": "inbox",
-                          "emptyTitle": "No filtertargets yet",
-                          "emptyDescription": "Add filtertargets to see them here.",
-                          "className": "transition-shadow hover:shadow-md cursor-pointer",
-                          "renderItem": [
-                            "fn",
-                            "item",
-                            {
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "sm",
-                              "children": [
-                                {
-                                  "type": "typography",
-                                  "variant": "h4",
-                                  "content": "@item.name"
-                                },
-                                {
-                                  "type": "typography",
-                                  "variant": "caption",
-                                  "color": "muted",
-                                  "content": "@item.status"
-                                }
-                              ]
-                            }
-                          ]
+                          "label": "Retry",
+                          "variant": "primary",
+                          "type": "button",
+                          "icon": "rotate-ccw",
+                          "event": "INIT"
                         }
                       ]
                     }
@@ -349,43 +324,69 @@
                 ]
               },
               {
-                "from": "filtered",
+                "from": "browsing",
+                "to": "loading",
+                "event": "INIT",
+                "effects": [
+                  [
+                    "fetch",
+                    "FilterTarget",
+                    {
+                      "emit": {
+                        "failure": "FilterTargetLoadFailed",
+                        "success": "FilterTargetLoaded"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "size": "lg",
+                      "type": "spinner"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "browsing",
                 "to": "filtered",
                 "event": "FILTER",
                 "effects": [
                   [
                     "fetch",
                     "FilterTarget",
-                    [
-                      "==",
-                      [
-                        "object/get",
-                        "@entity",
-                        "@payload.field"
+                    {
+                      "filter": [
+                        "=",
+                        [
+                          "object/get",
+                          "@entity",
+                          "@payload.field"
+                        ],
+                        "@payload.value"
                       ],
-                      "@payload.value"
-                    ]
+                      "emit": {
+                        "failure": "FilterTargetLoadFailed",
+                        "success": "FilterTargetLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "stack",
-                      "direction": "vertical",
-                      "gap": "lg",
                       "children": [
                         {
                           "type": "stack",
-                          "direction": "horizontal",
                           "gap": "md",
                           "justify": "space-between",
-                          "align": "center",
                           "children": [
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "sm",
                               "align": "center",
+                              "gap": "sm",
+                              "direction": "horizontal",
                               "children": [
                                 {
                                   "type": "icon",
@@ -393,17 +394,14 @@
                                   "size": "lg"
                                 },
                                 {
-                                  "type": "typography",
                                   "content": "FilterTargets",
-                                  "variant": "h2"
+                                  "variant": "h2",
+                                  "type": "typography"
                                 }
-                              ]
+                              ],
+                              "type": "stack"
                             },
                             {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "sm",
-                              "align": "center",
                               "children": [
                                 {
                                   "type": "badge",
@@ -411,49 +409,55 @@
                                   "variant": "primary"
                                 },
                                 {
-                                  "type": "button",
                                   "label": "Clear All",
+                                  "type": "button",
                                   "event": "CLEAR_FILTERS",
-                                  "variant": "ghost",
-                                  "icon": "x"
+                                  "icon": "x",
+                                  "variant": "ghost"
                                 }
-                              ]
+                              ],
+                              "align": "center",
+                              "direction": "horizontal",
+                              "type": "stack",
+                              "gap": "sm"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "align": "center"
                         },
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "sm",
-                          "align": "center",
                           "children": [
                             {
+                              "size": "sm",
                               "type": "icon",
-                              "name": "filter",
-                              "size": "sm"
+                              "name": "filter"
                             },
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "color": "muted",
-                              "content": "Filtered by"
+                              "content": "Filtered by",
+                              "type": "typography",
+                              "color": "muted"
                             },
                             {
-                              "type": "badge",
                               "label": "@payload.field",
+                              "type": "badge",
                               "variant": "secondary"
                             },
                             {
-                              "type": "typography",
                               "variant": "caption",
-                              "content": "="
+                              "content": "=",
+                              "type": "typography"
                             },
                             {
                               "type": "badge",
-                              "label": "@payload.value",
-                              "variant": "primary"
+                              "variant": "primary",
+                              "label": "@payload.value"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "align": "center",
+                          "gap": "sm",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
@@ -463,14 +467,14 @@
                           "entity": "FilterTarget",
                           "filters": [
                             {
-                              "field": "status",
-                              "label": "Status",
                               "options": [
                                 "active",
                                 "inactive",
                                 "pending"
                               ],
-                              "filterType": "select"
+                              "filterType": "select",
+                              "field": "status",
+                              "label": "Status"
                             }
                           ]
                         },
@@ -478,147 +482,128 @@
                           "type": "divider"
                         },
                         {
-                          "type": "data-grid",
-                          "entity": "FilterTarget",
                           "emptyIcon": "inbox",
-                          "emptyTitle": "No filtertargets yet",
                           "emptyDescription": "Add filtertargets to see them here.",
-                          "className": "transition-shadow hover:shadow-md cursor-pointer",
                           "renderItem": [
                             "fn",
                             "item",
                             {
                               "type": "stack",
-                              "direction": "vertical",
                               "gap": "sm",
+                              "direction": "vertical",
                               "children": [
                                 {
+                                  "content": "@item.name",
                                   "type": "typography",
-                                  "variant": "h4",
-                                  "content": "@item.name"
+                                  "variant": "h4"
                                 },
                                 {
-                                  "type": "typography",
                                   "variant": "caption",
+                                  "content": "@item.status",
                                   "color": "muted",
-                                  "content": "@item.status"
+                                  "type": "typography"
                                 }
                               ]
                             }
-                          ]
+                          ],
+                          "emptyTitle": "No filtertargets yet",
+                          "type": "data-grid",
+                          "entity": "FilterTarget"
                         }
+                      ],
+                      "gap": "lg",
+                      "direction": "vertical"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "filtered",
+                "to": "filtered",
+                "event": "FILTER",
+                "effects": [
+                  [
+                    "fetch",
+                    "FilterTarget",
+                    {
+                      "emit": {
+                        "failure": "FilterTargetLoadFailed",
+                        "success": "FilterTargetLoaded"
+                      },
+                      "filter": [
+                        "=",
+                        [
+                          "object/get",
+                          "@entity",
+                          "@payload.field"
+                        ],
+                        "@payload.value"
                       ]
                     }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "spinner",
+                      "size": "md"
+                    }
                   ]
                 ]
               },
               {
                 "from": "filtered",
-                "to": "browsing",
+                "to": "loading",
                 "event": "CLEAR_FILTERS",
                 "effects": [
                   [
                     "fetch",
-                    "FilterTarget"
+                    "FilterTarget",
+                    {
+                      "emit": {
+                        "success": "FilterTargetLoaded",
+                        "failure": "FilterTargetLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "type": "stack",
-                      "direction": "vertical",
-                      "gap": "lg",
-                      "children": [
-                        {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
-                          "justify": "space-between",
-                          "align": "center",
-                          "children": [
-                            {
-                              "type": "stack",
-                              "direction": "horizontal",
-                              "gap": "md",
-                              "align": "center",
-                              "children": [
-                                {
-                                  "type": "icon",
-                                  "name": "filter",
-                                  "size": "lg"
-                                },
-                                {
-                                  "type": "typography",
-                                  "content": "FilterTargets",
-                                  "variant": "h2"
-                                }
-                              ]
-                            },
-                            {
-                              "type": "badge",
-                              "label": "All"
-                            }
-                          ]
-                        },
-                        {
-                          "type": "divider"
-                        },
-                        {
-                          "type": "filter-group",
-                          "entity": "FilterTarget",
-                          "filters": [
-                            {
-                              "field": "status",
-                              "label": "Status",
-                              "options": [
-                                "active",
-                                "inactive",
-                                "pending"
-                              ],
-                              "filterType": "select"
-                            }
-                          ]
-                        },
-                        {
-                          "type": "divider"
-                        },
-                        {
-                          "type": "data-grid",
-                          "entity": "FilterTarget",
-                          "emptyIcon": "inbox",
-                          "emptyTitle": "No filtertargets yet",
-                          "emptyDescription": "Add filtertargets to see them here.",
-                          "className": "transition-shadow hover:shadow-md cursor-pointer",
-                          "renderItem": [
-                            "fn",
-                            "item",
-                            {
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "sm",
-                              "children": [
-                                {
-                                  "type": "typography",
-                                  "variant": "h4",
-                                  "content": "@item.name"
-                                },
-                                {
-                                  "type": "typography",
-                                  "variant": "caption",
-                                  "color": "muted",
-                                  "content": "@item.status"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      ]
+                      "type": "spinner",
+                      "size": "lg"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "error",
+                "to": "loading",
+                "event": "INIT",
+                "effects": [
+                  [
+                    "fetch",
+                    "FilterTarget",
+                    {
+                      "emit": {
+                        "success": "FilterTargetLoaded",
+                        "failure": "FilterTargetLoadFailed"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "spinner",
+                      "size": "lg"
                     }
                   ]
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
@@ -634,4 +619,4 @@
       ]
     }
   ]
-}
+}