Working with collections on the home page.

On the "home" page, the user should have the ability to save images to a collection and create a new collection.

Database setup and configuration.

Please refer to this link to learn about the database configuration. The palette for installation is "node-red-node-mongodb".

We will create three requests to the database.

Node-RED.

Creating collection.

To create collections, you can use the following nodes in Node-RED:

• http in. (method POST)
• function.
  In the function, we write that we add a property called "deleted" with a value of false to the data sent from the UI.
  

  
  msg.payload.deleted = false
  return msg;

• mongodb out. 

  

• http response

Recieving collections.

To get all collections, you can use the following nodes in Node-RED:

• http in. (method GET)
• function.
  In the function body, specify that only objects with the property "deleted" set to false should be returned.
  

  msg.payload = {
      deleted: false
  }
  return msg;

• mongodb in 

  

• http response

Saving images to a collection.

To save images to collection, you can use the following nodes:

• http in. (method POST)
• function.
  

  For each image, we add the collection _id and the "deleted" property. In the function node, we add the "objectid" library.

  
  

  

  

  
  

   

  msg.payload = msg.payload.images.map((e) =>{
      return {
          ...e,
          collection: objectid(msg.payload.collection),
          deleted: false
      }
  })
  
  return msg; 

• mongodb out.
  

  Important: We make the record in a new collection!

  
  

  

UI Editor

Need to create 3 API:

1. /getCollection.
   

   Be sure to check the "Run on Page Load" checkbox to receive up-to-date data when loading the page.

   
   

2. /createCollection. 

   

3. /addImageToCollection.
   In the body, we pass the id of the selected collection chosen by the user and the API data that returned the images (createImage).
    

   

When the button is clicked, a modal window should open with the option to save the image to the suggested collections or create a new collection.

In the select widget, display the data from the API getCollections as "label"- "name" and "value" - "_id".

{{getCollections.data.map((e) => {
	return{
		label: e.name,
		value: e._id
	}
})}}

By default, the first element should be selected.

{{getCollections.data[0]._id}}

When the "+" button is clicked, another modal window should open where the user can create a new collection.

When the icon button is clicked, another modal window should open.

After clicking the "Create" button, a record is made in the database, and a modal window opens with the option to save images to the collection.

{{createNewCollection.run(() => getCollections.run(() => showModal('addToCollection')), () => {})}}