UI part. Creating the page

On this page, we will be using the following widgets:

• function widget. (It should automatically appear on a new page.) 
• grid layout widget:
  • • row container widget:
      • • 2 select widgets;
        • button widget;
    • row container widget:
      • carousel widget

Here is the layout of the page:

Grid layout - transparent background, row container backgroung - white, border radius - 10px,  box shadow.

Let's create 4 APIs:

1. /getCollections

Get collection data. Use the existing endpoint.

2. /getRequestText

Getting the unique text based on which the images were generated. Pass the selected collection's id as the value for the "collection" key in the params.

3.  /getGalleryByText

Getting the images associated with the selected text. Pass the selected text as the value for the "text" key in the params.

4. /deleteAllImageByText

Deleting all images with the selected text. Use the PUT method and pass the selected text in the request body.

 

In the select widget, set the data from the API /getCollection in the following format: label as "name" and value as "_id".

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

When a different value is selected, an API is called to retrieve the text associated with the generated images. If no selection is made, a warning message is displayed.

{{SelectCollection.selectedOptionValue ? getRequestText.run() : showAlert("Choose collection", 'warning')}}

In the next Select widget, we display data from the API /getRequestText.

{{getRequestText.data.map((e) => {
	return{
	"label": e.text,
	"value": e.text
	}
})}}

Upon selecting a different value in the widget, the API /getImageByText is triggered. If no selection is made, a warning message is displayed.

{{SelectText.selectedOptionValue ? getImageByText.run() : showAlert("Choose text", 'warning')}}

When the button widget is clicked, we trigger two APIs: one for deletion and another for updating the data in the select widget. The button remains inactive if there is no data from the API that returns the images.

{{getImageByText.data === undefined}}

The carousel widget displays data from the API.

It shows 2 visible images, and we add styles to it.

If you have selected both the collection and the text, but there are no images available, it means that the link to the image has expired.