Let's connect Node-RED and the UI.

Need to create 4 APIs.

1. /getCollections

The API calls the same endpoint ("getCollection") in Node-RED as on the previous page. It is triggered when the page is loaded.

2. /createNewCollection

The API calls the same endpoint ("createNewCollection") in Node-RED as on the previous page. In the request body, we pass the name of the collection.

3. /deleteFromGalleryCollection

Deleting all images from the "gallery" collection with the selected collection id in the table.

When deleting, we update the "deleted" field to true. Therefore, in the API, we choose the PUT method and pass the selected _id from the table in the request body.

4. /deleteCollection

When deleting, we update the "deleted" field to true. Therefore, in the API, we choose the PUT method and pass the selected _id from the table in the request body.

Next, in the table widget, we change the table data to the data received from the API. We also visually hide the "_id" and "deleted" fields.

When clicking the "Create" button, the following actions should occur (call 2 APIs and closeModal() when the button is clicked):

1. An API should be called to create a new collection (createNewCollection).
2. Another API should be called to retrieve all data about the collections from the database (getCollection).
3. The modal window should be closed (closeModal).

The "Edit" and "Delete" buttons should be disabled until the user selects a collection in the table (checking if the selectedRow in the table has an _id).

To prevent any element in the table from being automatically selected, remove the value in the "default selected row" property.

When the "Edit" button is clicked, redirect to the "SingleCollection" page. Pass the selected collection's _id as a query parameter.

{{navigateTo('SingleCollection', {id: collectionTable.selectedRow._id})}}

When the "Delete" button is clicked, the following actions should occur (call 3 APIs when the button is clicked):

1. Delete all information based on the _id from the "imageCollection" collection in MongoDB.
2. Delete all information based on the _id from the "gallery" collection in MongoDB.
3. Update the information in the table.

{{deleteCollection.run(() => deleteFromGalleryByCollection.run(() => getCollection.run()), () => {})}}