61 lines
2.4 KiB
YAML
61 lines
2.4 KiB
YAML
|
id: stage
|
||
|
|
type: PageSiderMenu
|
||
|
|
properties:
|
||
|
|
title: Stage
|
||
|
|
|
||
|
|
areas:
|
||
|
|
content:
|
||
|
|
blocks:
|
||
|
|
- id: title
|
||
|
|
type: Title
|
||
|
|
layout:
|
||
|
|
grow: 1
|
||
|
|
properties:
|
||
|
|
content: Stage
|
||
|
|
- id: new_brand_button # Create a Button block to add a new brand.
|
||
|
|
type: Button
|
||
|
|
layout:
|
||
|
|
grow: 0 # Because the grow of the button is 0, it will not expand but remain in the same row as the title block.
|
||
|
|
properties:
|
||
|
|
title: New Brand # Button text.
|
||
|
|
icon: PlusOutlined # Ant Design icon on the button.
|
||
|
|
events:
|
||
|
|
onClick: # All the actions to complete when the button is clicked.
|
||
|
|
- id: link_to_new_brand # Link to the page where we will add a new brand.
|
||
|
|
type: Link
|
||
|
|
params:
|
||
|
|
pageId: new-brand # The page id of the new brand page.
|
||
|
|
# A List block to render the following brands.
|
||
|
|
# The list block will render a content area all items in the "brands_list" array in state.
|
||
|
|
# The "brands_list" array is populated by the "set_brands" onEnter action.
|
||
|
|
- id: brands_list
|
||
|
|
type: List
|
||
|
|
blocks:
|
||
|
|
- id: brands_list.$.container # Wrap all the blocks for a brands item in a box.
|
||
|
|
type: Box
|
||
|
|
style:
|
||
|
|
background: '#fff' # Give the box a white background and some spacing.
|
||
|
|
margin: 10
|
||
|
|
padding: 10
|
||
|
|
blocks:
|
||
|
|
- id: brands_list.$.name # Show the item name as a title in the list.
|
||
|
|
type: Title
|
||
|
|
properties:
|
||
|
|
content:
|
||
|
|
_state: brands_list.$.name
|
||
|
|
level: 3
|
||
|
|
- id: brands_list.$.description # Show the item description as a paragraph in the list.
|
||
|
|
type: Paragraph
|
||
|
|
properties:
|
||
|
|
content:
|
||
|
|
_state: brands_list.$.description
|
||
|
|
events:
|
||
|
|
onClick:
|
||
|
|
- id: link_to_edit_brand # Link to the page where we will edit the clicked brand.
|
||
|
|
type: Link
|
||
|
|
params:
|
||
|
|
pageId: edit-brand # The page id of the edit brand page.
|
||
|
|
urlQuery:
|
||
|
|
brand_id:
|
||
|
|
_state: brands_list.$._id # Set the brand_id in the url query on the edit-brand page to the _id field of the clicked list item.
|