UI частина

На цій сторінці використовуємо наступні віджети:

• function віджет. Автоматично має з'явитися на новій сторінці. Додаємо ще одну кнопку, яка буде робити перехід на цю сторінку
• grid layout віджет:
  • • row container віджет:
      • • 2 select віджети;
        • button віджет;
    • row container віджет:
      • carousel віджет

Вигляд сторінки: 

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

Створюємо 4 API:

1. Отримати дані про колекції. Використовуємо існуючий endpoint.

2. Отримати унікальний текст , по якому були згенеровані зображення. У params передаємо під ключем collection обране у віджеті Select  id колекції.

3.  Отримати зображення відносно обраного тексту. У params передаємо під ключем text обраний у віджеті Select  text.

4. Видалення всіх зображень з обраним тектом. Метод PUT,  в body передаємо обраний текст

У віджеті select передаємо дані API getCollection у вигляді label - name, value - _id.

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

При зміні обраного значення викликаємо API, яка повертає текст, відносно якого було згенеровано зображення. Якщо нічого не обрали - попередження.

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

У настпуному віджеті Select показуємо дані API getRequestText.

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

При зміні обраного значення у віджеті викликаємо API getImageByText, якщо не обрано нічого - попередження.

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

При кліку на button віджет викликаємо дві API - видалення та оновлення lаних у віджеті select. Кнопка неактивна, які немає даних від API, яка повертає зображення.

{{getImageByText.data === undefined}}

Віджет carousel  відображає дані API . Видимих картинок - 2, додаємо незначні стилі.

Якщо ви обрали і колекцію і текст, але у картинок немає, значить вийшов термін дії посилання на картинку