mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 06:14:59 +00:00
johndoe6345789
6992c3a650
- Created package.json for ui_pages with dependencies and exports. - Added roles.json for access permissions related to UI pages. - Implemented functions.json for managing UI pages and routing. - Developed stories.json for Storybook showcasing UI pages components. - Defined styles tokens for UI pages including colors, spacing, and typography. feat(ui_permissions): Introduce UI Permissions package for access control - Created package.json for ui_permissions with permission utilities. - Added roles.json defining permissions for a 6-level access control system. - Implemented functions.json for permission checking and level management. - Developed stories.json for Storybook showcasing permission-related components. - Defined styles tokens for UI permissions including colors and spacing.
481 lines
15 KiB
JSON
481 lines
15 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "role_editor",
|
|
"description": "Role editor components including role cards and permission management",
|
|
"components": [
|
|
{
|
|
"id": "role_editor",
|
|
"name": "RoleEditor",
|
|
"description": "Main editor with role selection and permission toggles",
|
|
"props": [
|
|
{
|
|
"name": "allowedRoles",
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "List of roles to show in the editor"
|
|
},
|
|
{
|
|
"name": "readonly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether the editor is in readonly mode"
|
|
},
|
|
{
|
|
"name": "showInstanceOwner",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Show instance owner toggle"
|
|
},
|
|
{
|
|
"name": "onSave",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when changes are saved"
|
|
},
|
|
{
|
|
"name": "onCancel",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when changes are cancelled"
|
|
}
|
|
],
|
|
"state": [
|
|
{
|
|
"name": "selectedRole",
|
|
"type": "string",
|
|
"default": null,
|
|
"description": "Currently selected role"
|
|
},
|
|
{
|
|
"name": "selectedRoleInfo",
|
|
"type": "object",
|
|
"default": null,
|
|
"description": "Information about the selected role"
|
|
},
|
|
{
|
|
"name": "isDirty",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Whether there are unsaved changes"
|
|
},
|
|
{
|
|
"name": "permissions",
|
|
"type": "array",
|
|
"default": [],
|
|
"description": "List of permissions for the selected role"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "role-editor",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"className": "role-editor-header",
|
|
"sx": {
|
|
"p": 3,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 },
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "h5",
|
|
"fontWeight": "bold",
|
|
"children": "Role Editor"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{state.isDirty}}",
|
|
"then": {
|
|
"type": "Chip",
|
|
"label": "Unsaved Changes",
|
|
"color": "warning",
|
|
"size": "small"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 2,
|
|
"children": {
|
|
"type": "loop",
|
|
"source": "{{roles}}",
|
|
"template": {
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6,
|
|
"md": 4,
|
|
"lg": 2,
|
|
"children": [
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "role_card",
|
|
"props": {
|
|
"role": "{{item.role}}",
|
|
"info": "{{item.info}}",
|
|
"selected": "{{state.selectedRole === item.role}}"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "role-editor-content",
|
|
"sx": { "p": 3 },
|
|
"children": [
|
|
{
|
|
"type": "Flex",
|
|
"alignItems": "center",
|
|
"gap": 2,
|
|
"sx": { "mb": 3 },
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "h6",
|
|
"fontWeight": "bold",
|
|
"children": "{{state.selectedRoleInfo.label}}"
|
|
},
|
|
{
|
|
"type": "Chip",
|
|
"label": "Level {{state.selectedRoleInfo.level}}",
|
|
"color": "primary",
|
|
"size": "small",
|
|
"variant": "outlined"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "role-editor-permissions",
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"sx": { "mb": 2 },
|
|
"children": "Permissions"
|
|
},
|
|
{
|
|
"type": "List",
|
|
"dense": true,
|
|
"children": {
|
|
"type": "loop",
|
|
"source": "{{state.permissions}}",
|
|
"template": {
|
|
"type": "ListItem",
|
|
"divider": true,
|
|
"children": [
|
|
{
|
|
"type": "ListItemText",
|
|
"primary": "{{item.name}}",
|
|
"secondary": "{{item.description}}"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{item.inherited}}",
|
|
"then": {
|
|
"type": "Chip",
|
|
"label": "Inherited",
|
|
"size": "small",
|
|
"color": "secondary",
|
|
"variant": "outlined",
|
|
"sx": { "mr": 2 }
|
|
}
|
|
},
|
|
{
|
|
"type": "Switch",
|
|
"checked": "{{item.enabled}}",
|
|
"disabled": "{{props.readonly || item.inherited}}",
|
|
"onChange": "togglePermission",
|
|
"color": "primary"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "role-editor-footer",
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider",
|
|
"display": "flex",
|
|
"justifyContent": "flex-end",
|
|
"gap": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"color": "secondary",
|
|
"onClick": "handleCancel",
|
|
"disabled": "{{!state.isDirty}}",
|
|
"children": "Cancel"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "handleSave",
|
|
"disabled": "{{!state.isDirty || props.readonly}}",
|
|
"children": "Save Changes"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"scripts": {
|
|
"init": "role.initialize",
|
|
"selectRole": "role.selectRole",
|
|
"togglePermission": "role.togglePermission",
|
|
"handleSave": "role.saveChanges",
|
|
"handleCancel": "role.cancelChanges"
|
|
}
|
|
},
|
|
{
|
|
"id": "role_card",
|
|
"name": "RoleCard",
|
|
"description": "A card showing role name, level, and permission summary",
|
|
"props": [
|
|
{
|
|
"name": "role",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Role identifier"
|
|
},
|
|
{
|
|
"name": "info",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "Role information object"
|
|
},
|
|
{
|
|
"name": "selected",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether this card is selected"
|
|
},
|
|
{
|
|
"name": "showBadge",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Whether to show the role badge icon"
|
|
},
|
|
{
|
|
"name": "ownPermissionCount",
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 0,
|
|
"description": "Number of own permissions"
|
|
},
|
|
{
|
|
"name": "inheritedPermissionCount",
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 0,
|
|
"description": "Number of inherited permissions"
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Click handler"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "role-card",
|
|
"sx": {
|
|
"cursor": "pointer",
|
|
"transition": "all 0.2s ease-in-out",
|
|
"position": "relative",
|
|
"&:hover": {
|
|
"borderColor": "primary.main",
|
|
"transform": "translateY(-2px)"
|
|
}
|
|
},
|
|
"onClick": "handleCardClick",
|
|
"children": [
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{props.selected}}",
|
|
"then": {
|
|
"type": "Box",
|
|
"sx": {
|
|
"position": "absolute",
|
|
"top": 0,
|
|
"left": 0,
|
|
"right": 0,
|
|
"height": 3,
|
|
"backgroundColor": "primary.main",
|
|
"borderRadius": "4px 4px 0 0"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 2 },
|
|
"children": [
|
|
{
|
|
"type": "Flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "flex-start",
|
|
"sx": { "mb": 1 },
|
|
"children": [
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{props.showBadge}}",
|
|
"then": {
|
|
"type": "Box",
|
|
"sx": { "fontSize": 24 },
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{props.info.badge}}",
|
|
"color": "primary"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "Chip",
|
|
"label": "L{{props.info.level}}",
|
|
"size": "small",
|
|
"color": "default",
|
|
"variant": "{{props.info.variant}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"sx": { "mb": 0.5 },
|
|
"children": "{{props.info.label}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"sx": { "mb": 2 },
|
|
"children": "{{props.info.blurb}}"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 0.5,
|
|
"children": {
|
|
"type": "loop",
|
|
"source": "{{props.info.highlights}}",
|
|
"template": {
|
|
"type": "Flex",
|
|
"alignItems": "center",
|
|
"gap": 1,
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "Check",
|
|
"size": "small",
|
|
"color": "success"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"children": "{{item}}"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": {
|
|
"px": 2,
|
|
"py": 1,
|
|
"borderTop": 1,
|
|
"borderColor": "divider",
|
|
"backgroundColor": "action.hover"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"children": "Permissions"
|
|
},
|
|
{
|
|
"type": "Flex",
|
|
"gap": 0.5,
|
|
"children": [
|
|
{
|
|
"type": "Chip",
|
|
"label": "{{props.ownPermissionCount}}",
|
|
"size": "small",
|
|
"color": "primary",
|
|
"variant": "filled"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{props.inheritedPermissionCount > 0}}",
|
|
"then": {
|
|
"type": "Chip",
|
|
"label": "+{{props.inheritedPermissionCount}}",
|
|
"size": "small",
|
|
"color": "secondary",
|
|
"variant": "outlined"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"scripts": {
|
|
"handleCardClick": "role.handleCardClick"
|
|
}
|
|
}
|
|
]
|
|
}
|