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
- row container 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')}}
{{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.
No Comments