metabuilder/packages/user_manager/components/ui.json

{
  "$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
  "schemaVersion": "2.0.0",
  "package": "user_manager",
  "description": "User management components for viewing, editing, and managing users",
  "components": [
    {
      "id": "user_management",
      "name": "UserManagement",
      "description": "Main user management container with search and user list",
      "props": [
        {
          "name": "variant",
          "type": "string",
          "default": "outlined"
        },
        {
          "name": "className",
          "type": "string",
          "default": "user-management"
        }
      ],
      "state": [
        {
          "name": "searchQuery",
          "type": "string",
          "default": ""
        },
        {
          "name": "selectedRole",
          "type": "string",
          "default": ""
        },
        {
          "name": "selectedStatus",
          "type": "string",
          "default": ""
        },
        {
          "name": "currentPage",
          "type": "number",
          "default": 1
        },
        {
          "name": "totalUsers",
          "type": "number",
          "default": 0
        }
      ],
      "handlers": {
        "init": "list.initialize",
        "search": "list.filterUsers",
        "refresh": "list.refreshUsers",
        "addUser": "actions.createUser"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "variant": "outlined",
          "className": "user-management",
          "children": [
            {
              "type": "Box",
              "className": "user-management-header",
              "children": [
                {
                  "type": "Flex",
                  "justifyContent": "space-between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "Text",
                      "variant": "h5",
                      "fontWeight": "bold",
                      "children": "User Management"
                    },
                    {
                      "type": "Button",
                      "variant": "contained",
                      "color": "primary",
                      "onClick": "addUser",
                      "children": "Add User"
                    }
                  ]
                },
                {
                  "type": "Grid",
                  "container": true,
                  "spacing": 2,
                  "children": [
                    {
                      "type": "Grid",
                      "item": true,
                      "xs": 12,
                      "md": 6,
                      "children": [
                        {
                          "type": "TextField",
                          "placeholder": "Search users...",
                          "variant": "outlined",
                          "size": "small",
                          "fullWidth": true,
                          "value": "{{searchQuery}}",
                          "onChange": "search"
                        }
                      ]
                    },
                    {
                      "type": "Grid",
                      "item": true,
                      "xs": 12,
                      "md": 6,
                      "children": [
                        {
                          "type": "Flex",
                          "gap": 1,
                          "justifyContent": "flex-end",
                          "children": [
                            {
                              "type": "Select",
                              "placeholder": "Filter by role",
                              "size": "small",
                              "value": "{{selectedRole}}"
                            },
                            {
                              "type": "Select",
                              "placeholder": "Status",
                              "size": "small",
                              "value": "{{selectedStatus}}"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "Box",
              "className": "user-management-content",
              "children": [
                {
                  "type": "ComponentRef",
                  "ref": "user_list"
                }
              ]
            },
            {
              "type": "Box",
              "className": "user-management-footer",
              "children": [
                {
                  "type": "Text",
                  "variant": "body2",
                  "color": "secondary",
                  "children": "Total: {{totalUsers}} users"
                },
                {
                  "type": "Pagination",
                  "count": "{{Math.ceil(totalUsers / 20)}}",
                  "page": "{{currentPage}}",
                  "size": "small"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "user_list",
      "name": "UserList",
      "description": "Data table showing users with columns for username, email, role, level, and status",
      "props": [
        {
          "name": "users",
          "type": "array",
          "required": true,
          "default": []
        }
      ],
      "handlers": {
        "init": "list.initialize",
        "sort": "list.sortUsers",
        "select": "list.selectUser"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Table",
          "className": "user-list",
          "stickyHeader": true,
          "children": [
            {
              "type": "TableHead",
              "children": [
                {
                  "type": "TableRow",
                  "children": [
                    {
                      "type": "TableCell",
                      "sortable": true,
                      "children": "Username"
                    },
                    {
                      "type": "TableCell",
                      "sortable": true,
                      "children": "Email"
                    },
                    {
                      "type": "TableCell",
                      "sortable": true,
                      "children": "Role"
                    },
                    {
                      "type": "TableCell",
                      "sortable": true,
                      "align": "center",
                      "children": "Level"
                    },
                    {
                      "type": "TableCell",
                      "sortable": true,
                      "align": "center",
                      "children": "Status"
                    },
                    {
                      "type": "TableCell",
                      "align": "right",
                      "children": "Actions"
                    }
                  ]
                }
              ]
            },
            {
              "type": "TableBody",
              "children": {
                "type": "loop",
                "items": "{{users}}",
                "iterator": "user",
                "key": "{{user.id}}",
                "template": {
                  "type": "TableRow",
                  "hover": true,
                  "children": [
                    {
                      "type": "TableCell",
                      "children": [
                        {
                          "type": "Flex",
                          "alignItems": "center",
                          "gap": 1.5,
                          "children": [
                            {
                              "type": "Avatar",
                              "size": "small",
                              "src": "{{user.avatar}}"
                            },
                            {
                              "type": "Text",
                              "fontWeight": "medium",
                              "children": "{{user.username}}"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "TableCell",
                      "children": "{{user.email}}"
                    },
                    {
                      "type": "TableCell",
                      "children": [
                        {
                          "type": "Chip",
                          "size": "small",
                          "variant": "outlined",
                          "label": "{{user.role}}"
                        }
                      ]
                    },
                    {
                      "type": "TableCell",
                      "align": "center",
                      "children": [
                        {
                          "type": "Badge",
                          "variant": "standard",
                          "label": "{{user.level}}"
                        }
                      ]
                    },
                    {
                      "type": "TableCell",
                      "align": "center",
                      "children": [
                        {
                          "type": "Chip",
                          "size": "small",
                          "color": "{{user.active ? 'success' : 'default'}}",
                          "label": "{{user.active ? 'Active' : 'Inactive'}}"
                        }
                      ]
                    },
                    {
                      "type": "TableCell",
                      "align": "right",
                      "children": [
                        {
                          "type": "ComponentRef",
                          "ref": "user_actions",
                          "props": {
                            "user": "{{user}}"
                          }
                        }
                      ]
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    },
    {
      "id": "user_actions",
      "name": "UserActions",
      "description": "Action buttons for user management operations",
      "props": [
        {
          "name": "user",
          "type": "object",
          "required": true
        }
      ],
      "handlers": {
        "view": "actions.viewUser",
        "edit": "actions.editUser",
        "permissions": "actions.managePermissions",
        "ban": "actions.banUser",
        "delete": "actions.deleteUser",
        "resetPassword": "actions.resetPassword",
        "sendEmail": "actions.sendEmail",
        "activate": "actions.activateUser",
        "deactivate": "actions.deactivateUser"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Flex",
          "gap": 0.5,
          "className": "user-actions",
          "children": [
            {
              "type": "IconButton",
              "size": "small",
              "color": "default",
              "title": "View user details",
              "onClick": "view",
              "children": [
                {
                  "type": "Icon",
                  "name": "Visibility",
                  "size": 18
                }
              ]
            },
            {
              "type": "IconButton",
              "size": "small",
              "color": "primary",
              "title": "Edit user",
              "onClick": "edit",
              "children": [
                {
                  "type": "Icon",
                  "name": "Edit",
                  "size": 18
                }
              ]
            },
            {
              "type": "IconButton",
              "size": "small",
              "color": "secondary",
              "title": "Manage permissions",
              "onClick": "permissions",
              "children": [
                {
                  "type": "Icon",
                  "name": "Security",
                  "size": 18
                }
              ]
            },
            {
              "type": "IconButton",
              "size": "small",
              "color": "warning",
              "title": "Ban user",
              "onClick": "ban",
              "children": [
                {
                  "type": "Icon",
                  "name": "Block",
                  "size": 18
                }
              ]
            },
            {
              "type": "IconButton",
              "size": "small",
              "color": "error",
              "title": "Delete user",
              "onClick": "delete",
              "children": [
                {
                  "type": "Icon",
                  "name": "Delete",
                  "size": 18
                }
              ]
            }
          ]
        }
      }
    }
  ],
  "exports": {
    "components": ["UserManagement", "UserList", "UserActions"]
  }
}