Update 'deploy.yaml'

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.
+          title: Back
-          icon: PlusOutlined # Ant Design icon on the button.
+          icon: ArrowLeftOutlined
-        events:
+          type: default # Change the type of the button to default.
-          onClick: # All the actions to complete when the button is clicked.
+          block: true # Makes the button fill the maximum defined width instead of only the with of its contents (title and icon).
-            - 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.
+            - id: link_to_brands # When clicked, link back to the brands page.
               type: Link
               params:
-                    pageId: edit-brand # The page id of the edit brand page.
+                pageId: brands
-                    urlQuery:
+      - id: update_brand
-                      brand_id:
+        type: Button
-                        _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.
+        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