diff --git a/deploy.yaml b/deploy.yaml index f2af758..7d6dd4b 100644 --- a/deploy.yaml +++ b/deploy.yaml @@ -12,49 +12,92 @@ areas: grow: 1 properties: content: Deploy - - id: new_brand_button # Create a Button block to add a new brand. + - id: macaddress # The name text input for the brand. The value of this input is the value of the name field in the page state context. + type: TextInput + properties: + title: MAC Address + placeholder: 00:00:00:00:00:00 + - id: projectname # The description text area input for the brand. The value of this input is the value of the description field in the page state context. + type: TextArea + properties: + title: Project name +# placeholder: ... + + # Again use the grow (css flex-grow) layout property to lay out the buttons. + - id: back # Create a back button that will link back to the brands page without making any changes. 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. + grow: 1 # Because the button has a grow of 1, it will expand to take up available space. properties: - title: New Brand # Button text. - icon: PlusOutlined # Ant Design icon on the button. + title: Back + icon: ArrowLeftOutlined + type: default # Change the type of the button to default. + block: true # Makes the button fill the maximum defined width instead of only the with of its contents (title and icon). 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. + onClick: + - id: link_to_brands # When clicked, link back to the brands page. 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. + pageId: brands + - id: update_brand + type: Button + layout: + grow: 3 # Because the button has a grow of 3, which is 3 times as large as the + # grow value of the back and delete buttons, it will expand "3 times bigger", + # and occupy more space in the row. It will be laid out in the same row as the other + # buttons, unless there is not enough space for all three buttons, in which case it will + # drop down to the next row by following css flex layout behavior. + properties: + title: Save + icon: SaveOutlined + block: true + requests: + - id: update_brand + type: MongoDBUpdateOne # MongoDb updateOne request to update the brand. + connectionId: brands + properties: + filter: + _id: + _state: _id # Select the document that matches the document's _id that is in state. + update: + $set: + name: + _state: name # Insert the brand name we set in state. + description: + _state: description # Insert the description name we set in state. + updated_at: + _date: now # Set the updated_at date as current time. + events: + onClick: + - id: update_brand # Call the update_brand request. + type: Request + params: update_brand + - id: link_to_brands # Link back to the brands page. + type: Link + params: + pageId: brands + - id: delete_modal + type: ConfirmModal + properties: + content: Are you sure you want to delete this brand? # The text inside the modal. + okText: Yes # Change the default text of the ok button to 'Yes'. + okButton: + type: danger # Change the default type of the ok button to danger. + cancelText: No # Change the default text of the cancel button to 'No'. + requests: + - id: delete_brand + type: MongoDBDeleteOne # MongoDb Delete One request to delete the brand's document from the collection. + connectionId: brands + properties: + filter: + _id: + _state: _id # Filter the document that matches the document's _id. + events: + onOk: + - id: delete_brand # Call the delete_brand request. + type: Request + params: delete_brand + - id: link_to_brands + type: Link + params: + pageId: brands