Skip to main content

Робота з колекціями на сторінці home

На сторінці home у користувача має бути можливість зберегти зображення до колекції та створити нову колекцію. 

Крок 1. Створення бази даних та налаштування.

За цим посиланням  дізнаєтеся про налаштування бази даних. Палета для встановлення - node-red-node-mongodb

Створюємо три запити до бази даних.

Крок 2. NodeRed

1. Створення колекцій.

image.png

Використовуємо ноди:

  • http in(POST)
  • function. У тілі фукнції пишемо, що до даних відправлених з UI додаємо властивість deleted зі значенням false
    msg.payload.deleted = false
    return msg;
  • mongodb out. 

    image.png

  • http response

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

image.png

Використовуємо ноди:

  • http in(GET)
  • function. У тілі фукнції вказуємо, що повертаємо лише ті об'єкти, у яких  властивість deleted = false 
    msg.payload = {
        deleted: false
    }
    return msg;
  • mongodb in 

    image.png

  • http response

3. Збереження зображень до колекції

image.png

Використовуємо ноди:

  • http in(POST)
  • function. До кожного зображення додаємо id колекції та властивість deleted. У ноді функції додаємо бібліотеку objectid . 

    image.png

    image.png

     

     
    msg.payload = msg.payload.images.map((e) =>{
        return {
            ...e,
            collection: objectid(msg.payload.collection),
            deleted: false
        }
    })
    
    return msg; 
  • mongodb out. Важливо: запис робимо в нову колекцію!

    image.png

Крок 3. UI

Створюємо три API

  1. getCollection. Обов'язково запускається при завантаженні сторінки.

    image.png

  2. createCollection. 

    image.png

  3. addImageToCollection. В тілі передаємо id обраної користувачем колекції та дані API, яка повернула зображення - createImage 

    image.png

При натиску на button має відкритися модальне вікно з можливість зберегти зображення до запропонованих колекцій або створити нову колекцію.

image.png


image.png

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

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


За замовчуванням обраний перший елемент

{{getCollections.data[0]._id}}

При натиску на "+" відкривається інше модальне вікно, де можна створити колекцію.

image.png

При натиску на icon button відкривається інше модальне вікно

image.png

image.png

Після натиску на button Create робиться запис у базу даних та відкривається модальне вікно з можливістю зберегти картинки у колекцію.

{{createNewCollection.run(() => getCollections.run(() => showModal('addToCollection')), () => {})}}

image.png