Skip to main content

Зв'язуємо NodeRed та UІ

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

1.Отримати колекції

API викликає той самий endpoint (getCollection) у NodeRed, що і на попередній сторінці. Вона викликається при завантаженні сторінки.

image.png

2. Створення нової колекції

API викликає той самий endpoint (createNewCollection) у NodeRed, що і на попередній сторінці.  У body передаємо ім'я.

image.png

3. Видалення з gallery колекції всіх зображень з id колекції, яку оберемо в таблиці.

При видалені  оновлюємо поле deleted на true. Тому в API обираємо метод PUT і в Body передаємо обрану в таблиці _id.

image.png

4. Видалення колекції

При видалені  оновлюємо поле deleted на true. Тому в API обираємо метод PUT і в Body передаємо обрану в таблиці _id.

image.png

Далі у віджеті table змінюємо  table data на дані , які отримуємо з API. Приховуємо візуально поля _id, deleted.

image.png

При кліку на button Create має викликатися API , яка створює наву колекцію, API, яка повертає всі дані з бази про колекції  та закритися модальне вікно!

image.png

{{createNewCollection.run(() => getCollection.run(() => closeModal("createCollection")), () => {})}}

Button Edit та button  Delete  мають бути неактивні поки користувач не вибере колекцію в таблиці (перевірка чи selectedRow в таблиці має _id).

image.png

Щоб жоден елемент в таблиці не був вибраним автоматично у властивості default selected row забираємо значення.

image.png


При натискані на button Edit  - редірект на сторінку SingleCollection.  У query params  передаємо _id обраної в таблиці колекції.

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

image.png

При натиску на button Delete має видалитися вся інформація по _id з колекції imageCollection та gallery в modgoDB та оновитися інформація в таблиці (викликаємо  три API при натиску на кнопку).

image.png

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