UI part. Creating the page

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

Here is the layout of the page:

image.png

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.

image.png

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.

image.png

3.  /getGalleryByText

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

image.png

4. /deleteAllImageByText

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

image.png

 

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

image.png

{{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.

image.png

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

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

image.png

{{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.

image.png

{{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.

image.png

{{getImageByText.data === undefined}}

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

image.png

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.





Revision #3
Created 8 June 2023 09:33:09 by Worker
Updated 8 June 2023 10:16:20 by Worker